update

Signed-off-by: Stepan Kiryakov <[email protected]>
hashgraph · Jan 30, 2025 · fcc38de · fcc38de
1 parent 449f236
commit fcc38de
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 106 deletions.
diff --git a/frontend/src/app/modules/formulas/formula-configuration/formula-configuration.component.html b/frontend/src/app/modules/formulas/formula-configuration/formula-configuration.component.html
@@ -86,9 +86,23 @@
                 <checkbox-button [(value)]="filters.formula" class="item-filter formula-filter" (change)="onFilter()">Formula</checkbox-button>
                 <checkbox-button [(value)]="filters.text" class="item-filter text-filter" (change)="onFilter()">Text</checkbox-button>
             </div>
-            <div class="formula-items">
-                <div *ngFor="let item of config.data" class="formula-item" [attr.type]="item.type" [attr.readonly]="readonly">
-                    <div class="formula-item-icon">
+            <div 
+                class="formula-items"
+                cdkDropList
+                [cdkDropListData]="config.data"
+                (cdkDropListDropped)="drop($event)"
+            >
+                <div 
+                    *ngFor="let item of config.data" 
+                    class="formula-item" 
+                    [attr.type]="item.type" 
+                    [attr.readonly]="readonly"
+                    cdkDrag
+                    cdkDragLockAxis="y"
+                    [cdkDragDisabled]="readonly"
+
+                >
+                    <div cdkDragHandle class="formula-item-icon" [attr.readonly]="readonly">
                         <svg-icon *ngIf="!readonly" class="icon-btn svg-icon"
                             src="/assets/images/icons/equal.svg"
                             svgClass="icon-color-close">

diff --git a/frontend/src/app/modules/formulas/formula-configuration/formula-configuration.component.scss b/frontend/src/app/modules/formulas/formula-configuration/formula-configuration.component.scss
@@ -120,107 +120,6 @@
                 --checkbox-button-on-second-color: var(--formula-text-background, #d7f5e2);
             }
         }
-
-        .formula-item {
-            box-shadow: 0px 4px 8px 0px var(--guardian-shadow, #00000014);
-            background: var(--guardian-background, #FFFFFF);
-            border-radius: 8px;
-            margin-bottom: 16px;
-            display: flex;
-            flex-direction: row;
-            overflow: hidden;
-
-            .formula-item-icon {
-                width: 32px;
-                min-width: 32px;
-                width: 32px;
-                min-width: 32px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                cursor: move;
-
-                * {
-                    pointer-events: none;
-                }
-            }
-
-            .formula-item-container {
-                width: 100%;
-                padding: 16px;
-
-                .formula-item-header {
-                    height: 24px;
-                    width: 100%;
-                    margin-bottom: 16px;
-                    position: relative;
-                    display: flex;
-
-                    &__icon {
-                        margin-right: 8px;
-                    }
-
-                    &__name {
-                        font-family: Poppins;
-                        font-size: 16px;
-                        font-weight: 600;
-                        height: 24px;
-                        line-height: 24px;
-                    }
-
-                    &__delete {
-                        position: absolute;
-                        top: 0px;
-                        right: 0px;
-                        width: 24px;
-                        height: 24px;
-
-                        .guardian-icon-button {
-                            width: 24px;
-                            height: 24px;
-                        }
-                    }
-                }
-
-                .formula-item-body {}
-            }
-
-            &[type="constant"] {
-                border: 1px solid var(--formula-constant-color, #4169E2);
-
-                .formula-item-icon {
-                    background: var(--formula-constant-background, #e1e7fa);
-                    border-right: 1px solid #E1E7EF;
-                }
-            }
-
-            &[type="variable"] {
-                border: 1px solid var(--formula-variable-color, #DA9B22);
-
-                .formula-item-icon {
-                    background: var(--formula-variable-background, #FFF6E3);
-                    border-right: 1px solid #E1E7EF;
-                }
-            }
-
-            &[type="formula"] {
-                border: 1px solid var(--formula-function-color, #E50299);
-
-                .formula-item-icon {
-                    background: var(--formula-function-background, #fbd9ef);
-                    border-right: 1px solid #E1E7EF;
-                }
-            }
-
-            &[type="text"] {
-                border: 1px solid var(--formula-text-color, #19BE47);
-
-                .formula-item-icon {
-                    background: var(--formula-text-background, #d7f5e2);
-                    border-right: 1px solid #E1E7EF;
-                }
-            }
-        }
     }
 
     &[keyboard="true"] {
@@ -377,7 +276,7 @@
         font-weight: 400;
         line-height: normal;
     }
-    
+
     .info-text-strong {
         color: var(--color-grey-5, #848fa9);
         text-align: center;
@@ -396,4 +295,117 @@
             margin-bottom: 190px;
         }
     }
+}
+
+.formula-item {
+    box-shadow: 0px 4px 8px 0px var(--guardian-shadow, #00000014);
+    background: var(--guardian-background, #FFFFFF);
+    border-radius: 8px;
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+
+    .formula-item-icon {
+        width: 32px;
+        min-width: 32px;
+        width: 32px;
+        min-width: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: move;
+
+        * {
+            pointer-events: none;
+        }
+
+        &[readonly="true"] {
+            cursor: default;
+        }
+    }
+
+    .formula-item-container {
+        width: 100%;
+        padding: 16px;
+
+        .formula-item-header {
+            height: 24px;
+            width: 100%;
+            margin-bottom: 16px;
+            position: relative;
+            display: flex;
+
+            &__icon {
+                margin-right: 8px;
+            }
+
+            &__name {
+                font-family: Poppins;
+                font-size: 16px;
+                font-weight: 600;
+                height: 24px;
+                line-height: 24px;
+            }
+
+            &__delete {
+                position: absolute;
+                top: 0px;
+                right: 0px;
+                width: 24px;
+                height: 24px;
+
+                .guardian-icon-button {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+
+        .formula-item-body {}
+    }
+
+    &[type="constant"] {
+        border: 1px solid var(--formula-constant-color, #4169E2);
+
+        .formula-item-icon {
+            background: var(--formula-constant-background, #e1e7fa);
+            border-right: 1px solid #E1E7EF;
+        }
+    }
+
+    &[type="variable"] {
+        border: 1px solid var(--formula-variable-color, #DA9B22);
+
+        .formula-item-icon {
+            background: var(--formula-variable-background, #FFF6E3);
+            border-right: 1px solid #E1E7EF;
+        }
+    }
+
+    &[type="formula"] {
+        border: 1px solid var(--formula-function-color, #E50299);
+
+        .formula-item-icon {
+            background: var(--formula-function-background, #fbd9ef);
+            border-right: 1px solid #E1E7EF;
+        }
+    }
+
+    &[type="text"] {
+        border: 1px solid var(--formula-text-color, #19BE47);
+
+        .formula-item-icon {
+            background: var(--formula-text-background, #d7f5e2);
+            border-right: 1px solid #E1E7EF;
+        }
+    }
+}
+
+.cdk-drag.formula-item.cdk-drag-preview {
+
+}
+
+.formula-item.cdk-drag-placeholder {
+    opacity: 0.5;
 }
diff --git a/frontend/src/app/modules/formulas/formula-configuration/formula-configuration.component.ts b/frontend/src/app/modules/formulas/formula-configuration/formula-configuration.component.ts
@@ -10,6 +10,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MathLiveComponent } from '../../common/mathlive/mathlive.component';
 import { LinkDialog } from '../dialogs/link-dialog/link-dialog.component';
 import { Formulas } from '../models/formulas';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
 @Component({
     selector: 'app-formula-configuration',
@@ -346,4 +347,8 @@ export class FormulaConfigurationComponent implements OnInit {
         $event.stopPropagation();
         item.link = null;
     }
+
+    public drop(event: CdkDragDrop<any[]>) {
+        this.config.reorder(event.previousIndex, event.currentIndex);
+    }
 }
diff --git a/frontend/src/app/modules/formulas/formulas.module.ts b/frontend/src/app/modules/formulas/formulas.module.ts
@@ -38,7 +38,6 @@ import { FormulasViewDialog } from './dialogs/formulas-view-dialog/formulas-view
         FormsModule,
         MaterialModule,
         CommonComponentsModule,
-
         AppRoutingModule,
         DynamicDialogModule,
         TableModule,

diff --git a/frontend/src/app/modules/formulas/models/formulas.ts b/frontend/src/app/modules/formulas/models/formulas.ts
@@ -1,3 +1,4 @@
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 import { IFormulaItem, FormulaItemType, GenerateUUIDv4, IFormulaConfig } from '@guardian/interfaces';
 
 export class Formulas {
@@ -99,4 +100,15 @@ export class Formulas {
         }
         return null;
     }
+
+    public reorder(previousIndex: number, currentIndex: number) {
+        if (previousIndex !== currentIndex) {
+            const prevItem = this.data[previousIndex];
+            const currentItem = this.data[currentIndex];
+            const originalPreviousIndex = this.items.findIndex((e) => e === prevItem);
+            const originalCurrentIndex = this.items.findIndex((e) => e === currentItem);
+            moveItemInArray(this.items, originalPreviousIndex, originalCurrentIndex);
+            this.update();
+        }
+    }
 }