From b39109eae650eae6746e3e2cc6a7a689ab190db2 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Thu, 23 Dec 2021 20:24:58 +0800
Subject: [PATCH] feat: add widget header

---
 src/assets/icons/clearclose.svg          | 18 +++++++++++
 src/assets/icons/createmode_editedit.svg | 18 +++++++++++
 src/store/modules/dashboard.ts           |  3 ++
 src/views/dashboard/Edit.vue             |  1 +
 src/views/dashboard/panel/Widget.vue     | 40 ++++++++++++++++++++++--
 5 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/icons/clearclose.svg
 create mode 100644 src/assets/icons/createmode_editedit.svg

diff --git a/src/assets/icons/clearclose.svg b/src/assets/icons/clearclose.svg
new file mode 100644
index 00000000..af9e3a0a
--- /dev/null
+++ b/src/assets/icons/clearclose.svg
@@ -0,0 +1,18 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>clearclose</title>
+<path d="M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z"></path>
+</svg>
diff --git a/src/assets/icons/createmode_editedit.svg b/src/assets/icons/createmode_editedit.svg
new file mode 100644
index 00000000..1a1f2d8b
--- /dev/null
+++ b/src/assets/icons/createmode_editedit.svg
@@ -0,0 +1,18 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>createmode_editedit</title>
+<path d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z"></path>
+</svg>
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index e14a7745..df3a75f9 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -45,6 +45,9 @@ export const dashboardStore = defineStore({
       });
       this.layout.push(newWidget);
     },
+    removeWidget(item: GridItemData) {
+      this.layout = this.layout.filter((d: GridItemData) => d.i !== item.i);
+    },
   },
 });
 
diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index a18818cb..6713d409 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -17,6 +17,7 @@ limitations under the License. -->
     <el-button size="mini" @click="dashboardStore.addWidget">
       Add Widget
     </el-button>
+    <el-button size="mini">Dashboard Settings</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/panel/Widget.vue b/src/views/dashboard/panel/Widget.vue
index 483a2b4d..01e4e67b 100644
--- a/src/views/dashboard/panel/Widget.vue
+++ b/src/views/dashboard/panel/Widget.vue
@@ -13,15 +13,51 @@ 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. -->
 <template>
-  <div class="header">title</div>
-  <div class="body">chart</div>
+  <div class="widget">
+    <div class="header flex-h">
+      <div>title</div>
+      <div class="operations">
+        <Icon class="mr-5" size="sm" iconName="createmode_editedit" />
+        <Icon size="sm" iconName="clearclose" @click="removeWidget" />
+      </div>
+    </div>
+    <div class="body">chart</div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { defineProps } from "vue";
 import type { PropType } from "vue";
 import { GridItemData } from "@/types/dashboard";
+import { useDashboardStore } from "@/store/modules/dashboard";
 
 const props = defineProps({
   item: { type: Object as PropType<GridItemData> },
 });
+const dashboardStore = useDashboardStore();
+function removeWidget() {
+  dashboardStore.removeWidget(props.item);
+}
 </script>
+<style lang="scss" scoped>
+.widget {
+  font-size: 12px;
+  // position: relative;
+}
+
+.header {
+  height: 30px;
+  padding: 5px;
+  width: 100%;
+  border-bottom: 1px solid #eee;
+  justify-content: space-between;
+}
+
+.operations {
+  color: #aaa;
+  cursor: pointer;
+}
+
+.body {
+  padding: 5px;
+}
+</style>