From 91abc20fef46470b08f3516ce58cd87dad2f76c0 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 23 Dec 2021 16:24:05 +0800
Subject: [PATCH] feat: add widgets

---
 src/store/modules/dashboard.ts                | 14 ++++++++
 src/views/dashboard/Edit.vue                  | 33 +++++++++++++++--
 .../widget/{GridItem.vue => Item.vue}         |  0
 .../widget/{GridLayout.vue => Layout.vue}     | 35 +++++--------------
 4 files changed, 53 insertions(+), 29 deletions(-)
 rename src/views/dashboard/widget/{GridItem.vue => Item.vue} (100%)
 rename src/views/dashboard/widget/{GridLayout.vue => Layout.vue} (69%)

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index c0a4c8df..2c549e18 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -31,6 +31,20 @@ export const dashboardStore = defineStore({
     setLayouts(data: GridItemData[]) {
       this.layouts = data;
     },
+    addWidget() {
+      const newWidget: GridItemData = {
+        x: 0,
+        y: 0,
+        w: 12,
+        h: 3,
+        i: String(this.layouts.length),
+      };
+      this.layouts = this.layouts.map((d: GridItemData) => {
+        d.y = d.y + 3;
+        return d;
+      });
+      this.layouts.push(newWidget);
+    },
   },
 });
 
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 556c406a..e035f0c6 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool">
-    <el-button size="mini">Add Widget</el-button>
+    <el-button size="mini" @click="dashboardStore.addWidget">
+      Add Widget
+    </el-button>
     <el-button size="mini">Save As</el-button>
     <el-button size="mini">Discard</el-button>
     <el-button size="mini" type="primary">Apply</el-button>
@@ -27,7 +29,34 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { toRefs, defineComponent, reactive, ref } from "vue";
 import { ElButton } from "element-plus";
-import GridLayout from "./widget/GridLayout.vue";
+import GridLayout from "./widget/Layout.vue";
+import { GridItemData } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const dashboardStore = useDashboardStore();
+const layouts: GridItemData[] = [
+  { x: 0, y: 0, w: 2, h: 2, i: "0" },
+  { x: 2, y: 0, w: 2, h: 4, i: "1" },
+  { x: 4, y: 0, w: 2, h: 5, i: "2" },
+  { x: 6, y: 0, w: 2, h: 3, i: "3" },
+  { x: 8, y: 0, w: 2, h: 3, i: "4" },
+  { x: 10, y: 0, w: 2, h: 3, i: "5" },
+  { x: 0, y: 5, w: 2, h: 5, i: "6" },
+  { x: 2, y: 5, w: 2, h: 5, i: "7" },
+  { x: 4, y: 5, w: 2, h: 5, i: "8" },
+  { x: 6, y: 3, w: 2, h: 4, i: "9" },
+  { x: 8, y: 4, w: 2, h: 4, i: "10" },
+  { x: 10, y: 4, w: 2, h: 4, i: "11" },
+  { x: 0, y: 10, w: 2, h: 5, i: "12" },
+  { x: 2, y: 10, w: 2, h: 5, i: "13" },
+  { x: 4, y: 8, w: 2, h: 4, i: "14" },
+  { x: 6, y: 8, w: 2, h: 4, i: "15" },
+  { x: 8, y: 10, w: 2, h: 5, i: "16" },
+  { x: 10, y: 4, w: 2, h: 2, i: "17" },
+  { x: 0, y: 9, w: 2, h: 3, i: "18" },
+  { x: 2, y: 6, w: 2, h: 2, i: "19" },
+];
+dashboardStore.setLayouts(layouts);
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
diff --git a/src/views/dashboard/widget/GridItem.vue b/src/views/dashboard/widget/Item.vue
similarity index 100%
rename from src/views/dashboard/widget/GridItem.vue
rename to src/views/dashboard/widget/Item.vue
diff --git a/src/views/dashboard/widget/GridLayout.vue b/src/views/dashboard/widget/Layout.vue
similarity index 69%
rename from src/views/dashboard/widget/GridLayout.vue
rename to src/views/dashboard/widget/Layout.vue
index 5af6c321..353987e6 100644
--- a/src/views/dashboard/widget/GridLayout.vue
+++ b/src/views/dashboard/widget/Layout.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <grid-layout
-    v-model:layout="layout"
+    v-model:layout="dashboardStore.layouts"
     :col-num="12"
     :row-height="30"
     :is-draggable="true"
@@ -24,7 +24,7 @@ limitations under the License. -->
     :use-css-transforms="true"
   >
     <grid-item
-      v-for="item in layout"
+      v-for="item in dashboardStore.layouts"
       :x="item.x"
       :y="item.y"
       :w="item.w"
@@ -37,30 +37,9 @@ limitations under the License. -->
   </grid-layout>
 </template>
 <script lang="ts" setup>
-import { GridItemData } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
-const layout: GridItemData[] = [
-  { x: 0, y: 0, w: 2, h: 2, i: "0" },
-  { x: 2, y: 0, w: 2, h: 4, i: "1" },
-  { x: 4, y: 0, w: 2, h: 5, i: "2" },
-  { x: 6, y: 0, w: 2, h: 3, i: "3" },
-  { x: 8, y: 0, w: 2, h: 3, i: "4" },
-  { x: 10, y: 0, w: 2, h: 3, i: "5" },
-  { x: 0, y: 5, w: 2, h: 5, i: "6" },
-  { x: 2, y: 5, w: 2, h: 5, i: "7" },
-  { x: 4, y: 5, w: 2, h: 5, i: "8" },
-  { x: 6, y: 3, w: 2, h: 4, i: "9" },
-  { x: 8, y: 4, w: 2, h: 4, i: "10" },
-  { x: 10, y: 4, w: 2, h: 4, i: "11" },
-  { x: 0, y: 10, w: 2, h: 5, i: "12" },
-  { x: 2, y: 10, w: 2, h: 5, i: "13" },
-  { x: 4, y: 8, w: 2, h: 4, i: "14" },
-  { x: 6, y: 8, w: 2, h: 4, i: "15" },
-  { x: 8, y: 10, w: 2, h: 5, i: "16" },
-  { x: 10, y: 4, w: 2, h: 2, i: "17" },
-  { x: 0, y: 9, w: 2, h: 3, i: "18" },
-  { x: 2, y: 6, w: 2, h: 2, i: "19" },
-];
+const dashboardStore = useDashboardStore();
 </script>
 <style lang="scss" scoped>
 .vue-grid-layout {
@@ -70,8 +49,10 @@ const layout: GridItemData[] = [
 }
 
 .vue-grid-item:not(.vue-grid-placeholder) {
-  background: #ccc;
-  border: 1px solid black;
+  background: #fff;
+  box-shadow: 0px 1px 4px 0px #00000029;
+  border-radius: 5px;
+  // border: 1px solid black;
 }
 
 .vue-grid-item .resizing {