From f9f38e4cf03364af0479e6c9e77ec749a3a05d3c Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 23 Dec 2021 10:55:39 +0800
Subject: [PATCH] feat: add dashboard store

---
 src/store/modules/dashboard.ts            | 39 +++++++++++++++++++++++
 src/store/modules/selectors.ts            |  3 +-
 src/types/dashboard.ts                    | 24 ++++++++++++++
 src/types/global.d.ts                     |  2 +-
 src/views/dashboard/Edit.vue              |  1 +
 src/views/dashboard/widget/GridLayout.vue | 13 ++------
 6 files changed, 69 insertions(+), 13 deletions(-)
 create mode 100644 src/store/modules/dashboard.ts
 create mode 100644 src/types/dashboard.ts

diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
new file mode 100644
index 00000000..c0a4c8df
--- /dev/null
+++ b/src/store/modules/dashboard.ts
@@ -0,0 +1,39 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { defineStore } from "pinia";
+import { store } from "@/store";
+import { GridItemData } from "@/types/dashboard";
+
+interface DashboardState {
+  layouts: GridItemData[];
+}
+
+export const dashboardStore = defineStore({
+  id: "dashboard",
+  state: (): DashboardState => ({
+    layouts: [],
+  }),
+  actions: {
+    setLayouts(data: GridItemData[]) {
+      this.layouts = data;
+    },
+  },
+});
+
+export function useDashboardStore(): any {
+  return dashboardStore(store);
+}
diff --git a/src/store/modules/selectors.ts b/src/store/modules/selectors.ts
index 6e919664..0e1dfe82 100644
--- a/src/store/modules/selectors.ts
+++ b/src/store/modules/selectors.ts
@@ -29,9 +29,8 @@ export const selectorStore = defineStore({
   state: (): SelectorState => ({
     services: [],
   }),
-  getters: {},
   actions: {
-    async fetchLayers() {
+    async fetchLayers(): Promise<AxiosResponse> {
       const res: AxiosResponse = await graph.query("queryLayers").params({});
 
       return res;
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
new file mode 100644
index 00000000..7a51c495
--- /dev/null
+++ b/src/types/dashboard.ts
@@ -0,0 +1,24 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface GridItemData {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  i: string;
+  static?: boolean;
+}
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 30bfd083..ecbfb242 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -38,7 +38,7 @@ declare global {
   };
 
   // vue
-  export declare type PropType<T> = VuePropType<T>;
+  declare type PropType<T> = VuePropType<T>;
   declare type VueNode = VNodeChild | JSX.Element;
 
   export type Writable<T> = {
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 609c59ca..556c406a 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -14,6 +14,7 @@ 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">Save As</el-button>
     <el-button size="mini">Discard</el-button>
     <el-button size="mini" type="primary">Apply</el-button>
diff --git a/src/views/dashboard/widget/GridLayout.vue b/src/views/dashboard/widget/GridLayout.vue
index 54481b72..5af6c321 100644
--- a/src/views/dashboard/widget/GridLayout.vue
+++ b/src/views/dashboard/widget/GridLayout.vue
@@ -37,16 +37,9 @@ limitations under the License. -->
   </grid-layout>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
-export interface GridItemData {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-  i: number;
-  static: boolean;
-}
-const layout = [
+import { GridItemData } from "@/types/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" },