feat: common solutions for custom tables[3141]

hashgraph · Jan 22, 2025 · 0f7fcf3 · 0f7fcf3
1 parent f8ecb13
commit 0f7fcf3
Show file tree

Hide file tree

Showing 42 changed files with 158 additions and 55 deletions.
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
@@ -449,3 +449,24 @@ body {
 ::ng-deep .p-tooltip {
     z-index: 9999 !important;
 }
+
+::ng-deep p-dropdownitem li {
+    min-height: 38px !important;
+}
+
+::ng-deep .grid-setting td.propRowCell {
+    height: 38px !important;
+}
+
+::ng-deep .propRowCell .pi-trash {
+    margin: 4px 4px
+}
+
+::ng-deep .propRowCell .readonly-prop {
+    min-height: 36px;
+    padding-top: 12px;
+}
+
+::ng-deep td.propRowCell.cellName {
+    align-content: center;
+}
diff --git a/frontend/src/app/modules/analytics/search-policies/search-policies.component.html b/frontend/src/app/modules/analytics/search-policies/search-policies.component.html
@@ -33,7 +33,9 @@
                             id="tagsDropdown"
                             formControlName="tag"
                             [options]="getTagOptions()"
-                            placeholder="Select a Tag">
+                            placeholder="Select a Tag"
+                            [appendTo]="'body'"
+                        >
                         </p-dropdown>
                     </div>
                 </div>

diff --git a/frontend/src/app/modules/analytics/search-policy-dialog/search-policy-dialog.component.html b/frontend/src/app/modules/analytics/search-policy-dialog/search-policy-dialog.component.html
@@ -23,10 +23,11 @@
                     appendTo="body"
                     class="type-dropdown"
                     formControlName="type"
-                    optionLabel="name" 
+                    optionLabel="name"
                     optionValue="value"
                     placeholder="Type"
-                    (onChange)="changeType()">
+                    (onChange)="changeType()"
+                >
                     <ng-template let-filterSelectedProperty pTemplate="selectedItem">
                         <span class="dropdown-type">Type:</span>
                         <span>{{ filterSelectedProperty.name }}</span>
@@ -80,7 +81,7 @@
                             appendTo="body"
                             class="type-dropdown"
                             formControlName="tokens"
-                            optionLabel="name" 
+                            optionLabel="name"
                             optionValue="value"
                             placeholder="Tokens">
                             <ng-template let-filterSelectedProperty pTemplate="selectedItem">
@@ -90,10 +91,10 @@
                         </p-dropdown>
                         <div [attr.hidden]="!filtersForm.value.tokens">
                             <span>Min Amount:</span>
-                            <p-inputNumber 
+                            <p-inputNumber
                                 class="type-number"
                                 formControlName="tokensCount"
-                                mode="decimal" 
+                                mode="decimal"
                                 [min]="1" ></p-inputNumber>
                         </div>
                     </div>
@@ -103,7 +104,7 @@
                             appendTo="body"
                             class="type-dropdown"
                             formControlName="vcDocuments"
-                            optionLabel="name" 
+                            optionLabel="name"
                             optionValue="value"
                             placeholder="VC Documents">
                             <ng-template let-filterSelectedProperty pTemplate="selectedItem">
@@ -113,10 +114,10 @@
                         </p-dropdown>
                         <div [attr.hidden]="!filtersForm.value.vcDocuments">
                             <span>Min Amount:</span>
-                            <p-inputNumber 
+                            <p-inputNumber
                                 class="type-number"
                                 formControlName="vcDocumentsCount"
-                                mode="decimal" 
+                                mode="decimal"
                                 [min]="1" ></p-inputNumber>
                         </div>
                     </div>
@@ -128,7 +129,7 @@
                             appendTo="body"
                             class="type-dropdown"
                             formControlName="vpDocuments"
-                            optionLabel="name" 
+                            optionLabel="name"
                             optionValue="value"
                             placeholder="VP Documents">
                             <ng-template let-filterSelectedProperty pTemplate="selectedItem">
@@ -138,10 +139,10 @@
                         </p-dropdown>
                         <div [attr.hidden]="!filtersForm.value.vpDocuments">
                             <span>Min Amount:</span>
-                            <p-inputNumber 
+                            <p-inputNumber
                                 class="type-number"
                                 formControlName="vpDocumentsCount"
-                                mode="decimal" 
+                                mode="decimal"
                                 [min]="1" ></p-inputNumber>
                         </div>
                     </div>
@@ -170,10 +171,10 @@
         <div *ngIf="list && list.length" class="grid-container">
             <div class="grid-header">
                 <div class="col-64">
-                    <input 
-                        class="checkbox-input" 
-                        type="checkbox" 
-                        [checked]="selectedAll"  
+                    <input
+                        class="checkbox-input"
+                        type="checkbox"
+                        [checked]="selectedAll"
                         (change)="onSelectAll()">
                 </div>
                 <div class="col-250">ID</div>
@@ -188,10 +189,10 @@
             <div class="grid-body">
                 <div *ngFor="let item of list" class="grid-row" (click)="onSelect(item)">
                     <div class="col-64">
-                        <input 
-                            class="checkbox-input" 
-                            type="checkbox" 
-                            [checked]="item._select" 
+                        <input
+                            class="checkbox-input"
+                            type="checkbox"
+                            [checked]="item._select"
                             (change)="select()">
                     </div>
                     <div class="col-250">{{item.messageId || item.id}}</div>
@@ -238,10 +239,10 @@
             <button (click)="onClose()" class="button secondary" label="Cancel" pButton></button>
         </div>
         <div>
-            <button 
-                (click)="onCompare()" 
+            <button
+                (click)="onCompare()"
                 [disabled]="count<2"
-                class="button" 
+                class="button"
                 label="Compare with selected ({{count}})" pButton>
                 <svg-icon
                     class="icon2-btn"
@@ -251,4 +252,4 @@
             </button>
         </div>
     </div>
-</div>
+</div>
diff --git a/frontend/src/app/modules/common/paginator/paginator.component.html b/frontend/src/app/modules/common/paginator/paginator.component.html
@@ -1,20 +1,20 @@
 <div class="table-paginator">
     <span>Items per page:</span>
-    <p-dropdown (onChange)="newOnSize()" [(ngModel)]="pageSize" [options]="options" [autoDisplayFirst]="false"></p-dropdown>
+    <p-dropdown (onChange)="newOnSize()" [appendTo]="'body'" [(ngModel)]="pageSize" [options]="options" [autoDisplayFirst]="false"></p-dropdown>
     <span class="color-grey-6">
         {{ pageNumberMin }} – {{ pageNumberMax }} of {{ length }}
     </span>
     <div class="flex">
-        <svg-icon 
-            class="svg-btn" 
+        <svg-icon
+            class="svg-btn"
             (click)="movePageIndex(-1)"
-            src="/assets/images/icons/left-arrow.svg" 
+            src="/assets/images/icons/left-arrow.svg"
             svgClass="svg-color">
         </svg-icon>
-        <svg-icon 
-            class="svg-btn" 
+        <svg-icon
+            class="svg-btn"
             (click)="movePageIndex(+1)"
-            src="/assets/images/icons/right-arrow.svg" 
+            src="/assets/images/icons/right-arrow.svg"
             svgClass="svg-color">
         </svg-icon>
     </div>

diff --git a/frontend/src/app/modules/common/status-dropdown/status-dropdown.component.html b/frontend/src/app/modules/common/status-dropdown/status-dropdown.component.html
@@ -5,7 +5,7 @@
     [showClear]="false"
     class="guardian-dropdown guardian-dropdown-status status-{{status}}"
     appendTo="body"
-    optionLabel="label" 
+    optionLabel="label"
     optionValue="value"
     [placeholder]="label"
     panelStyleClass="guardian-dropdown-panel guardian-dropdown-status-panel"
@@ -26,4 +26,4 @@
 </p-dropdown>
 <div *ngIf="disabled" class="guardian-disabled-status status-{{status}}">
     {{label}}
-</div>
+</div>
diff --git a/frontend/src/app/modules/common/token-configuration/token-configuration.component.html b/frontend/src/app/modules/common/token-configuration/token-configuration.component.html
@@ -20,7 +20,8 @@
         <label class="p-field-label">* Token Type</label>
         <p-dropdown formControlName="tokenType" [disabled]="readonly"
                     [options]="tokenTypes" optionLabel="name" optionValue="value"
-                    (onChange)="onChangeType()">
+                    (onChange)="onChangeType()"
+                    [appendTo]="'body'">
             <ng-template let-tokenType pTemplate="item">
                 <div class="dropdown-item">{{ tokenType.name }}</div>
             </ng-template>
@@ -61,7 +62,7 @@
             <div class="key-description">
                 The contract which can call wipe for token. If empty, wipe key will be used.
             </div>
-            <p-dropdown class="wipe-contract-dropdown" [disabled]="readonly" formControlName="wipeContractId"
+            <p-dropdown class="wipe-contract-dropdown" [appendTo]="'body'" [disabled]="readonly" formControlName="wipeContractId"
                         [options]="displayContracts" optionLabel="contractId" optionValue="contractId"
                         [showClear]="true" placeholder="Select wipe contract" emptyMessage="There are no wipe contracts">
             </p-dropdown>

diff --git a/frontend/src/app/modules/policy-engine/dialogs/migrate-data/migrate-data.component.html b/frontend/src/app/modules/policy-engine/dialogs/migrate-data/migrate-data.component.html
@@ -38,7 +38,7 @@
                         <p-dropdown appendTo="body"
                             *ngIf="migrationConfig.migrateRetirePools && migrationConfig.migrateState"
                             [(ngModel)]="migrationConfig.retireContractId" [options]="contracts" [showClear]="true"
-                            optionLabel="description" optionValue="contractId"
+                            optionLabel="description" optionValue="contractId" [appendTo]="'body'"
                             placeholder="Select contract"></p-dropdown>
                         <div class="mapping-content"
                             *ngIf="getObjectKeys(this.migrationConfig.tokensMap).length > 0 && migrationConfig.migrateRetirePools && migrationConfig.migrateState">

diff --git a/...pp/modules/policy-engine/dialogs/policy-wizard-dialog/policy-wizard-dialog.component.html b/...pp/modules/policy-engine/dialogs/policy-wizard-dialog/policy-wizard-dialog.component.html
@@ -49,6 +49,7 @@
                 optionLabel="name"
                 optionValue="id"
                 placeholder="Not selected"
+                [appendTo]="'body'"
             >
                 <ng-template pTemplate="selectedItem" let-selectedItem>
                     {{ selectedItem ? selectedItem.name : 'Not selected' }}
@@ -65,6 +66,7 @@
                 optionLabel="name"
                 optionValue="id"
                 placeholder="Not selected"
+                [appendTo]="'body'"
             >
                 <ng-template pTemplate="selectedItem" let-selectedItem>
                     {{ selectedItem ? selectedItem.name : 'Not selected' }}
@@ -123,6 +125,7 @@ <h3>Categorization</h3>
                 optionLabel="name"
                 optionValue="id"
                 placeholder="Not selected"
+                [appendTo]="'body'"
             >
                 <ng-template pTemplate="selectedItem" let-selectedItem>
                     {{ selectedItem ? selectedItem.name : 'Not selected' }}

diff --git a/frontend/src/app/modules/policy-engine/helpers/document-path/document-path.component.scss b/frontend/src/app/modules/policy-engine/helpers/document-path/document-path.component.scss
@@ -1,9 +1,14 @@
 .container {
-    height: 26px;
+    height: 38px;
     overflow: hidden;
     padding: 2px;
     display: grid;
     grid-template-columns: 130px 8px 1fr fit-content(24px);
+
+    .select,
+    input.input-end {
+        height: 34px !important;
+    }
 }
 
 .input-end {

diff --git a/frontend/src/app/modules/policy-engine/helpers/select-schema/select-schema.component.html b/frontend/src/app/modules/policy-engine/helpers/select-schema/select-schema.component.html
@@ -11,7 +11,7 @@
     <ng-template let-item pTemplate="item">
         <div
             pTooltip="{{ item.tooltip }}"
-            tooltipPosition="below"
+            tooltipPosition="top"
             class="schema-variable"
         >
             {{ item.displayName }}

diff --git a/frontend/src/app/modules/policy-engine/helpers/select-schema/select-schema.component.scss b/frontend/src/app/modules/policy-engine/helpers/select-schema/select-schema.component.scss
@@ -57,4 +57,13 @@
 .block-name[root="true"] {
     font-weight: 500;
     font-size: 14px;
-}
+}
+
+::ng-deep p-dropdown {
+    //display: block;
+    //max-width: 375px !important;
+}
+
+::ng-deep .p-overlay {
+    min-width: 375px !important;
+}
diff --git a/frontend/src/app/modules/policy-engine/policies/policies.component.html b/frontend/src/app/modules/policy-engine/policies/policies.component.html
@@ -27,7 +27,9 @@
                     appendTo="body"
                     class="tags-dropdown"
                     formControlName="tag"
-                    placeholder="Tags"></p-dropdown>
+                    placeholder="Tags"
+                    [appendTo]="'body'"
+                ></p-dropdown>
                 <button (click)="applyFilters()"
                         class="button ml-8"
                         label="Apply Filters"

diff --git a/...ne/policy-configuration/blocks/calculate/calculate-config/calculate-config.component.html b/...ne/policy-configuration/blocks/calculate/calculate-config/calculate-config.component.html
@@ -8,7 +8,9 @@
                 [disabled]="readonly"
                 (onChange)="onSave()"
                 placeholder="Select input document type"
-                [options]="inputDocumentsOptions">
+                [options]="inputDocumentsOptions"
+                [appendTo]="'body'"
+            >
             </p-dropdown>
         </td>
     </tr>

diff --git a/...icy-configuration/blocks/calculate/custom-logic-config/custom-logic-config.component.html b/...icy-configuration/blocks/calculate/custom-logic-config/custom-logic-config.component.html
@@ -22,7 +22,9 @@
                 [disabled]="readonly"
                 (onChange)="onSave()"
                 placeholder="Select a document signer"
-                [options]="documentSignerOptions">
+                [options]="documentSignerOptions"
+                [appendTo]="'body'"
+            >
             </p-dropdown>
         </td>
     </tr>
@@ -36,7 +38,9 @@
                 [disabled]="readonly"
                 (onChange)="onSave()"
                 placeholder="Select an ID type"
-                [options]="idTypeOptions">
+                [options]="idTypeOptions"
+                [appendTo]="'body'"
+            >
             </p-dropdown>
         </td>
     </tr>

diff --git a/...ne/policy-configuration/blocks/documents/aggregate-config/aggregate-config.component.html b/...ne/policy-configuration/blocks/documents/aggregate-config/aggregate-config.component.html
@@ -16,7 +16,9 @@
                 [(ngModel)]="properties.aggregateType"
                 [disabled]="readonly"
                 placeholder="Select an aggregate type"
-                [options]="aggregateTypeOptions">
+                [options]="aggregateTypeOptions"
+                [appendTo]="'body'"
+            >
             </p-dropdown>
         </td>
     </tr>

diff --git a/...ation/blocks/documents/document-validator-config/document-validator-config.component.html b/...ation/blocks/documents/document-validator-config/document-validator-config.component.html
@@ -95,6 +95,7 @@
                     [(ngModel)]="condition.type"
                     [disabled]="readonly"
                     (onChange)="onSave()"
+                    [appendTo]="'body'"
                     placeholder="Select a condition type"
                     [options]="conditionTypeOptions">
                 </p-dropdown>

diff --git a/...y-configuration/blocks/documents/filters-addon-config/filters-addon-config.component.html b/...y-configuration/blocks/documents/filters-addon-config/filters-addon-config.component.html
@@ -9,6 +9,7 @@
                 [(ngModel)]="properties.type"
                 [disabled]="readonly"
                 (onChange)="onSave()"
+                appendTo="body"
                 placeholder="Select a type"
             >
             </p-dropdown>
@@ -23,6 +24,7 @@
                 [(ngModel)]="properties.queryType"
                 [disabled]="readonly"
                 (onChange)="onSave()"
+                appendTo="body"
             >
                 <ng-template pTemplate="item" let-item>
                     <span>{{item.label}}</span>