feat: add dashboard store

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);
+}

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;

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;
+}

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> = {

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>

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";
+import { GridItemData } from "@/types/dashboard";
-export interface GridItemData {
+
-  x: number;
+const layout: GridItemData[] = [
-  y: number;
-  w: number;
-  h: number;
-  i: number;
-  static: boolean;
-}
-const layout = [
   { 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" },