feat: fix pools contsracts styles and logic[3141]

hashgraph · Dec 10, 2024 · 56779e2 · 56779e2
1 parent 61cdbc8
commit 56779e2
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 21 deletions.
diff --git a/.../app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts b/.../app/modules/contract-engine/dialogs/retire-pools-dialog/retire-pools-dialog.component.ts
@@ -21,7 +21,7 @@ export class RetirePoolsDialogComponent implements OnInit {
     tokens: Token[] = [];
     selectedTokens: any = [];
 
-    contract: any
+    contract: any = {}
 
     constructor(
         // public dialogRef: MatDialogRef<RetirePoolsDialogComponent>,
@@ -31,7 +31,7 @@ export class RetirePoolsDialogComponent implements OnInit {
         public dialogRef: DynamicDialogRef,
         public config: DynamicDialogConfig,
     ) {
-        this.contract = this.config.data.contract;
+        this.contract = this.config.data ?? {};
 
         if (this.contract) {
             this.syncDate = this.contract.syncPoolsDate;

diff --git a/...odules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.ts b/...odules/contract-engine/dialogs/retire-requests-dialog/retire-requests-dialog.component.ts
@@ -22,7 +22,7 @@ export class RetireRequestsDialogComponent implements OnInit {
     tokens: Token[] = [];
     selectedTokens: any = [];
 
-    contract: any
+    contract: any = {}
 
     constructor(
         // public dialogRef: MatDialogRef<RetireRequestsDialogComponent>,
@@ -32,7 +32,7 @@ export class RetireRequestsDialogComponent implements OnInit {
         private dialogRef: DynamicDialogRef,
         private config: DynamicDialogConfig,
     ) {
-        this.contract = this.config.data.contract;
+        this.contract = this.config.data ?? {};
 
         this.syncDate = this.contract.syncRequestsDate;
         this.contractId = this.contract.contractId;

diff --git a/...nd/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html b/...nd/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.html
@@ -16,16 +16,46 @@
                     <!--                        </mat-select>-->
                     <!--                    </mat-form-field>-->
 
-                    <p-dropdown
-                        id="tokenDropdown"
-                        formControlName="token"
-                        [options]="getTokenList(form.controls['token'].value)"
-                        optionLabel="label"
-                        placeholder="Choose Token">
-                        <ng-template let-token pTemplate="item">
-                            {{ token.tokenSymbol }} ({{ token.tokenId }})
-                        </ng-template>
-                    </p-dropdown>
+                    <div
+                        class="p-fluid dropdown-container"
+                        style="transform: scale(0.9) translateX(6px) translateY(5px); width: 95px;"
+                    >
+                        <p-dropdown
+                            id="tokenDropdown"
+                            formControlName="token"
+                            [options]="getTokenList(selectedToken ?? '')"
+                            optionLabel="tokenSymbol"
+                            placeholder="Token"
+                            [required]="true"
+                        >
+                            <ng-template let-option pTemplate="selectedItem">
+                                {{ option.tokenSymbol }} ({{ option.tokenId }})
+                            </ng-template>
+                            <ng-template let-option pTemplate="item">
+                                {{ option.tokenSymbol }} ({{ option.tokenId }})
+                            </ng-template>
+                        </p-dropdown>
+                    </div>
+
+<!--                    <div class="p-fluid dropdown-container" [ngClass]="{'ng-invalid': form.get('token')?.invalid && form.get('token')?.touched}">-->
+<!--                        <div class="dropdown-wrapper">-->
+<!--                            <label for="tokenDropdown" class="floating-label">Token</label>-->
+<!--                            <p-dropdown-->
+<!--                                id="tokenDropdown"-->
+<!--                                formControlName="token"-->
+<!--                                [options]="getTokenList(selectedToken ?? '')"-->
+<!--                                optionLabel="tokenSymbol"-->
+<!--                                placeholder="Choose Token"-->
+<!--                            >-->
+<!--                                <ng-template let-option pTemplate="selectedItem">-->
+<!--                                    {{ option.tokenSymbol }} ({{ option.tokenId }})-->
+<!--                                </ng-template>-->
+<!--                                <ng-template let-option pTemplate="item">-->
+<!--                                    {{ option.tokenSymbol }} ({{ option.tokenId }})-->
+<!--                                </ng-template>-->
+<!--                            </p-dropdown>-->
+<!--                        </div>-->
+<!--                    </div>-->
 
                 </div>
                 <div class="token-card__count">
@@ -37,22 +67,29 @@
                     <!--                        <input matInput formControlName="count" type="number" placeholder="1">-->
                     <!--                    </mat-form-field>-->
 
-                    <div class="p-fluid" style="transform: scale(0.8) translateY(5px); width: 100px;">
-                        <label for="countInput">Count</label>
+                    <div class="p-fluid" style="transform: scale(0.8) translateY(5px); width: 110px;">
+<!--                        <label for="countInput">Count</label>-->
                         <p-inputNumber
                             id="countInput"
                             formControlName="count"
-                            [placeholder]="'1'"
+                            [placeholder]="'Count'"
                             mode="decimal"
                             [min]="1"
                             [useGrouping]="false">
                         </p-inputNumber>
                     </div>
                 </div>
 
-                <button mat-flat-button color="primary" class="token-card__remove"
-                        (click)="removeToken(i)">remove
-                </button>
+<!--                <button mat-flat-button color="primary" class="token-card__remove"-->
+<!--                        (click)="removeToken(i)">remove-->
+<!--                </button>-->
+
+                <button
+                    pButton
+                    class="token-card__remove mat-flat-button"
+                    label="Remove"
+                    (click)="removeToken(i)"
+                ></button>
             </div>
 
             <div class="token-add-card" (click)="addToken()" *ngIf="tokens?.controls && tokens.controls.length < 2">

diff --git a/...nd/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss b/...nd/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.scss
@@ -90,3 +90,22 @@
         background-color: gray;
     }
 }
+
+.dropdown-container ::ng-deep p-overlay {
+    position: absolute;
+    top: -40px;
+    left: 100px;
+}
+
+::ng-deep p-dropdown .p-placeholder {
+    font-size: 14px;
+}
+
+.content__tokens.tokens .token-card svg {
+    width: 24px;
+}
+
+.content__tokens.tokens .token-card__token,
+.content__tokens.tokens .token-card__count{
+    gap: 0;
+}
diff --git a/...tend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.ts b/...tend/src/app/modules/contract-engine/dialogs/set-pool-dialog/set-pool-dialog.component.ts
@@ -79,8 +79,20 @@ export class SetPoolDialogComponent {
         this.dialogRef.close(null);
     }
 
+    get transformedFormValue() {
+        const formValue = this.form.value;
+
+        return  {
+            ...formValue,
+            tokens: formValue.tokens.map((item: any) => ({
+                ...item,
+                token: item.token.tokenId,
+            })),
+        };
+    }
+
     onCreate() {
-        this.dialogRef.close(this.form.value);
+        this.dialogRef.close(this.transformedFormValue);
     }
 
     addToken() {
@@ -130,4 +142,8 @@ export class SetPoolDialogComponent {
             return null;
         };
     }
+
+    get selectedToken(): string | null {
+        return this.form.get('token')?.value || null;
+    }
 }