add reset layout functionality

sora-xor · Mar 20, 2024 · 781f4c4 · 781f4c4
1 parent 5e9c62b
commit 781f4c4
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 15 deletions.
diff --git a/src/components/shared/Widget/Customize.vue → src/components/shared/Widget/Customise.vue b/src/components/shared/Widget/Customize.vue → src/components/shared/Widget/Customise.vue
@@ -14,6 +14,8 @@
               <span>{{ key }}</span>
             </label>
           </div>
+
+          <slot />
         </div>
       </el-popover>
     </template>

diff --git a/src/components/shared/Widget/Grid.vue b/src/components/shared/Widget/Grid.vue
@@ -23,6 +23,7 @@
           id: widget.i,
           loading,
           onResize,
+          reset,
         }"
       />
     </grid-item>
@@ -123,6 +124,8 @@ export default class WidgetsGrid extends Vue {
     this.saveLayouts(layouts, save);
   }
 
+  private defaultValue: WidgetsVisibilityModel = {};
+
   private breakpoint: BreakpointKey = BreakpointKey.md;
 
   private updateResponsiveLayouts = debounce(this.saveLayouts, 250);
@@ -153,7 +156,9 @@ export default class WidgetsGrid extends Vue {
   }
 
   get shouldUpdate(): boolean {
-    return !isEqual(this.gridLayout)(this.responsiveLayout);
+    const notEqual = !isEqual(this.gridLayout)(this.responsiveLayout);
+
+    return notEqual;
   }
 
   get gridLinesStyle(): Partial<CSSStyleDeclaration> {
@@ -170,25 +175,58 @@ export default class WidgetsGrid extends Vue {
   }
 
   created(): void {
-    const storedLayouts = layoutsStorage.get(this.gridId);
+    // save initial model for reset availability
+    this.defaultValue = cloneDeep(this.value);
 
-    if (storedLayouts) {
-      this.layouts = JSON.parse(storedLayouts);
-      this.updateWidgetsModelByLayout();
+    const hasLayoutsInStorage = layoutsStorage.get(this.gridId);
+
+    if (hasLayoutsInStorage) {
+      this.loadLayoutsFromStorage();
     } else {
-      this.layouts = cloneDeep(this.defaultLayouts);
-      this.updateLayoutWidgetsByModel(this.value, {}, false); // don't save initial layout
+      this.loadLayoutsFromConfig();
     }
   }
 
   private saveLayouts(layouts: ResponsiveLayouts, save = true): void {
     this.layouts = cloneDeep(layouts);
     // update layouts in storage
-    if (save && this.gridId) {
+    if (save) {
+      this.saveLayoutsToStorage();
+    }
+  }
+
+  private saveLayoutsToStorage(): void {
+    if (this.gridId) {
       layoutsStorage.set(this.gridId, JSON.stringify(this.layouts));
     }
   }
 
+  private clearLayoutsFromStorage(): void {
+    if (this.gridId) {
+      layoutsStorage.remove(this.gridId);
+    }
+  }
+
+  private loadLayoutsFromStorage(): void {
+    const storedLayouts = layoutsStorage.get(this.gridId);
+
+    if (!storedLayouts) return;
+
+    this.layouts = JSON.parse(storedLayouts);
+    this.updateWidgetsModelByLayout();
+  }
+
+  private loadLayoutsFromConfig(): void {
+    this.layouts = cloneDeep(this.defaultLayouts);
+    this.updateLayoutWidgetsByModel(this.defaultValue, {}, false); // don't save initial layout
+    this.updateWidgetsModelByLayout();
+  }
+
+  reset(): void {
+    this.clearLayoutsFromStorage();
+    this.loadLayoutsFromConfig();
+  }
+
   onBreakpointChanged(newBreakpoint: BreakpointKey): void {
     this.breakpoint = newBreakpoint;
   }

diff --git a/src/consts/index.ts b/src/consts/index.ts
@@ -251,7 +251,7 @@ export enum Components {
   BaseWidget = 'shared/Widget/Base',
   WidgetsGrid = 'shared/Widget/Grid',
   // Shared Widgets Components
-  CustomiseWidget = 'shared/Widget/Customize',
+  CustomiseWidget = 'shared/Widget/Customise',
   IFrameWidget = 'shared/Widget/IFrame',
   PriceChartWidget = 'shared/Widget/PriceChart',
   // Shared Buttons

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -28,8 +28,10 @@
     <template v-slot:[SwapWidgets.Transactions]="props">
       <swap-transactions-widget v-bind="props" full extensive />
     </template>
-    <template v-slot:[SwapWidgets.Customise]="props">
-      <customise-widget v-bind="props" :widgets.sync="widgets" :options.sync="options" />
+    <template v-slot:[SwapWidgets.Customise]="{ reset, ...props }">
+      <customise-widget v-bind="props" :widgets.sync="widgets" :options.sync="options">
+        <s-button @click="reset">Reset</s-button>
+      </customise-widget>
     </template>
   </widgets-grid>
 </template>
@@ -108,11 +110,11 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
       { x: 4, y: 20, w: 4, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
     ],
     xss: [
-      { x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 12, i: SwapWidgets.Customise },
+      { x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
       { x: 0, y: 4, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
-      { x: 0, y: 20, w: 4, h: 12, minW: 4, minH: 12, i: SwapWidgets.Distribution },
-      { x: 0, y: 32, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
-      { x: 0, y: 52, w: 4, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
+      { x: 0, y: 24, w: 4, h: 12, minW: 4, minH: 12, i: SwapWidgets.Distribution },
+      { x: 0, y: 36, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
+      { x: 0, y: 56, w: 4, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
     ],
   };