feat: add filters on dasboard

src/components/Selector.vue

@@ -18,6 +18,8 @@ limitations under the License. -->
     v-model="selected"
     :placeholder="placeholder"
     @change="changeSelected"
+    filterable
+    :style="{ borderRadius }"
   >
     <el-option
       v-for="item in options"
@@ -47,6 +49,7 @@ const props = defineProps({
   value: { type: String, default: "" },
   size: { type: String, default: "small" },
   placeholder: { type: String, default: "Select a option" },
+  borderRadius: { type: Number, default: 3 },
 });
 const selected = ref<string>(props.value);
 function changeSelected() {
@@ -92,4 +95,8 @@ function changeSelected() {
     width: 30px;
   }
 }
+
+.el-input__inner {
+  border-radius: unset !important;
+}
 </style>

src/router/dashboard.ts

@@ -48,7 +48,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         },
       },
       {
-        path: "/dashboard/edit/:layerId/:entityId/:dashboardId",
+        path: "/dashboard/edit/:layerId/:entity/:dashboardId",
         component: () => import("@/views/dashboard/Edit.vue"),
         name: "Edit",
         meta: {

src/views/dashboard/Edit.vue

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <Tool />
   <div class="ds-main">
-    <GridLayout />
+    <grid-layout />
     <el-dialog
       v-model="dashboardStore.showConfig"
       title="Configurations"

src/views/dashboard/data.ts

@@ -33,23 +33,67 @@ export const EntityType = [
 ];
 export const Options = [
   {
-    value: "layer1",
+    value: "Option1",
-    label: "layer1",
+    label: "Option1",
   },
   {
-    value: "layer2",
+    value: "Option2",
-    label: "layer2",
+    label: "Option2",
   },
   {
-    value: "layer3",
+    value: "Option3",
-    label: "layer3",
+    label: "Option3",
   },
   {
-    value: "layer4",
+    value: "Option4",
-    label: "layer4",
+    label: "Option4",
   },
   {
-    value: "layer5",
+    value: "Option5",
-    label: "layer5",
+    label: "Option5",
+  },
+];
+export const SelectOpts = [
+  {
+    value: "guide",
+    label: "Guide",
+    children: [
+      {
+        value: "disciplines",
+        label: "Disciplines",
+        children: [
+          {
+            value: "consistency",
+            label: "Consistency",
+          },
+          {
+            value: "feedback",
+            label: "Feedback",
+          },
+          {
+            value: "efficiency",
+            label: "Efficiency",
+          },
+          {
+            value: "controllability",
+            label: "Controllability",
+          },
+        ],
+      },
+      {
+        value: "navigation",
+        label: "Navigation",
+        children: [
+          {
+            value: "side nav",
+            label: "Side Navigation",
+          },
+          {
+            value: "top nav",
+            label: "Top Navigation",
+          },
+        ],
+      },
+    ],
   },
 ];

src/views/dashboard/panel/Tool.vue

@@ -13,40 +13,104 @@ 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">
+  <div class="dashboard-tool flex-h">
-    <el-tooltip class="item" effect="dark" content="Add Widget" placement="top">
+    <div class="flex-h">
-      <span class="icon-btn" @click="dashboardStore.addWidget">
+      <div class="selectors-item">
-        <Icon size="sm" iconName="playlist_add" />
+        <span class="label">$Service</span>
-      </span>
+        <Selector
-    </el-tooltip>
+          :value="states.service"
-    <el-tooltip class="item" effect="dark" content="Settings" placement="top">
+          :options="Options"
-      <span class="icon-btn" @click="dashboardStore.setConfigPanel(true)">
+          size="mini"
-        <Icon size="sm" iconName="settings" />
+          placeholder="Select a service"
-      </span>
+          :borderRadius="0"
-    </el-tooltip>
+          @change="changeService"
-    <el-tooltip class="item" effect="dark" content="Import" placement="top">
+          class="selectors"
-      <span class="icon-btn">
+        />
-        <Icon size="sm" iconName="folder_open" />
+      </div>
-      </span>
+      <div class="selectors-item">
-    </el-tooltip>
+        <span class="label">$ServiceInstance</span>
-    <el-tooltip class="item" effect="dark" content="Export" placement="top">
+        <el-cascader
-      <span class="icon-btn">
+          placeholder="Select a instance"
-        <Icon size="sm" iconName="save_alt" />
+          :options="SelectOpts"
-      </span>
+          size="mini"
-    </el-tooltip>
+          filterable
-    <el-tooltip class="item" effect="dark" content="Apply" placement="top">
+          :style="{ minWidth: '230px' }"
-      <span class="icon-btn">
+        />
-        <Icon size="sm" iconName="save" />
+      </div>
-      </span>
+      <div class="selectors-item">
-    </el-tooltip>
+        <span class="label">$DestinationService</span>
+        <Selector
+          :value="states.service"
+          :options="Options"
+          size="mini"
+          placeholder="Select a service"
+          :borderRadius="0"
+          @change="changeService"
+          class="selectors"
+        />
+      </div>
+      <div class="selectors-item">
+        <span class="label">$DestinationServiceInstance</span>
+        <el-cascader
+          placeholder="Select a instance"
+          :options="SelectOpts"
+          size="mini"
+          filterable
+          :style="{ minWidth: '230px' }"
+        />
+      </div>
+    </div>
+    <div class="tool-icons">
+      <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>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ElTooltip } from "element-plus";
+import { reactive } from "vue";
+import { useRoute } from "vue-router";
+import { ElTooltip, ElCascader } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
+import { Options, SelectOpts } from "../data";
 
 const dashboardStore = useDashboardStore();
+const params = useRoute().params;
+const states = reactive({
+  service: Options[0].value,
+});
+console.log(params);
+function changeService(val: { value: string; label: string }) {
+  states.service = val.value;
+}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
@@ -54,6 +118,16 @@ const dashboardStore = useDashboardStore();
   padding: 5px 10px;
   background: rgb(240, 242, 245);
   border-bottom: 1px solid #dfe4e8;
+  justify-content: space-between;
+}
+
+.label {
+  font-size: 12px;
+  display: inline-block;
+  padding: 4px;
+  border: var(--el-input-border, var(--el-border-base));
+  border-right: none;
+  border-radius: 2px;
 }
 
 .icon-btn {
@@ -67,4 +141,12 @@ const dashboardStore = useDashboardStore();
   background-color: #eee;
   color: #666;
 }
+
+.selectors {
+  min-width: 180px;
+}
+
+.selectors-item {
+  margin-right: 5px;
+}
 </style>