From fde5baa42edde78016a03ad5d4cad053646e47c0 Mon Sep 17 00:00:00 2001
From: Qiuxia Fan <fine0830@outlook.com>
Date: Tue, 28 Dec 2021 10:18:18 +0800
Subject: [PATCH] refactor: update dashboard tool

---
 src/views/dashboard/Edit.vue       | 50 ++-------------------
 src/views/dashboard/panel/Tool.vue | 70 ++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 47 deletions(-)
 create mode 100644 src/views/dashboard/panel/Tool.vue

diff --git a/src/views/dashboard/Edit.vue b/src/views/dashboard/Edit.vue
index 056041f2..40a15f5a 100644
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -13,33 +13,7 @@ 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="dashboard-tool">
-    <el-tooltip class="item" effect="dark" content="Add Widget" placement="top">
-      <span class="icon-btn" @click="dashboardStore.addWidget">
-        <Icon size="sm" iconName="playlist_add" />
-      </span>
-    </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Settings" placement="top">
-      <span class="icon-btn" @click="dashboardStore.setConfigPanel(true)">
-        <Icon size="sm" iconName="settings" />
-      </span>
-    </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Import" placement="top">
-      <span class="icon-btn">
-        <Icon size="sm" iconName="folder_open" />
-      </span>
-    </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Export" placement="top">
-      <span class="icon-btn">
-        <Icon size="sm" iconName="save_alt" />
-      </span>
-    </el-tooltip>
-    <el-tooltip class="item" effect="dark" content="Apply" placement="top">
-      <span class="icon-btn">
-        <Icon size="sm" iconName="save" />
-      </span>
-    </el-tooltip>
-  </div>
+  <Tool />
   <div class="ds-main">
     <GridLayout />
     <el-dialog
@@ -53,10 +27,11 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { ElDialog } from "element-plus";
 import GridLayout from "./panel/Layout.vue";
 import { LayoutConfig } from "@/types/dashboard";
+import Tool from "./panel/Tool.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { ElDialog, ElTooltip } from "element-plus";
 
 const dashboardStore = useDashboardStore();
 // fetch layout data from serve side
@@ -80,13 +55,6 @@ const layout: LayoutConfig[] = [
 dashboardStore.setLayout(layout);
 </script>
 <style lang="scss" scoped>
-.dashboard-tool {
-  text-align: right;
-  padding: 5px 10px;
-  background: rgb(240, 242, 245);
-  border-bottom: 1px solid #dfe4e8;
-}
-
 .ds-main {
   height: calc(100% - 40px);
 }
@@ -110,18 +78,6 @@ dashboardStore.setLayout(layout);
   border-left: 1px solid #eee;
 }
 
-.icon-btn {
-  display: inline-block;
-  padding: 0 5px;
-  text-align: center;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  margin-left: 8px;
-  cursor: pointer;
-  background-color: #eee;
-  color: #666;
-}
-
 .configuration {
   height: 600px;
 }
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
new file mode 100644
index 00000000..49168d71
--- /dev/null
+++ b/src/views/dashboard/panel/Tool.vue
@@ -0,0 +1,70 @@
+<!-- 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. -->
+<template>
+  <div class="dashboard-tool">
+    <el-tooltip class="item" effect="dark" content="Add Widget" placement="top">
+      <span class="icon-btn" @click="dashboardStore.addWidget">
+        <Icon size="sm" iconName="playlist_add" />
+      </span>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Settings" placement="top">
+      <span class="icon-btn" @click="dashboardStore.setConfigPanel(true)">
+        <Icon size="sm" iconName="settings" />
+      </span>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Import" placement="top">
+      <span class="icon-btn">
+        <Icon size="sm" iconName="folder_open" />
+      </span>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Export" placement="top">
+      <span class="icon-btn">
+        <Icon size="sm" iconName="save_alt" />
+      </span>
+    </el-tooltip>
+    <el-tooltip class="item" effect="dark" content="Apply" placement="top">
+      <span class="icon-btn">
+        <Icon size="sm" iconName="save" />
+      </span>
+    </el-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElTooltip } from "element-plus";
+import { useDashboardStore } from "@/store/modules/dashboard";
+
+const dashboardStore = useDashboardStore();
+</script>
+<style lang="scss" scoped>
+.dashboard-tool {
+  text-align: right;
+  padding: 5px 10px;
+  background: rgb(240, 242, 245);
+  border-bottom: 1px solid #dfe4e8;
+}
+
+.icon-btn {
+  display: inline-block;
+  padding: 0 5px;
+  text-align: center;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  margin-left: 8px;
+  cursor: pointer;
+  background-color: #eee;
+  color: #666;
+}
+</style>