update dashboard list

src/constants/templates.ts

@@ -20,7 +20,6 @@ export const AllLayout = {
     name: "All Layout",
     layer: "GENERAL",
     entity: "All",
-    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -178,7 +177,6 @@ export const ServiceLayout = {
     name: "Service Layout",
     layer: "GENERAL",
     entity: "Service",
-    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -565,7 +563,6 @@ export const EndpointLayout = {
     name: "Endpoint Layout",
     layer: "GENERAL",
     entity: "Endpoint",
-    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -743,7 +740,6 @@ export const InstanceLayout = {
     name: "Instance Layout",
     layer: "GENERAL",
     entity: "ServiceInstance",
-    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -896,7 +892,6 @@ export const ServiceRelationLayout = {
     name: "Service Relation Layout",
     layer: "GENERAL",
     entity: "ServiceRelation",
-    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -974,7 +969,6 @@ export const InstanceRelationLayout = {
     name: "Service Instance Relation Layout",
     layer: "GENERAL",
     entity: "ServiceInstanceRelation",
-    date: new Date().getTime(),
     isRoot: true,
     children: [
       {
@@ -1007,7 +1001,6 @@ export const EndpointRelationLayout = {
     name: "Endpoint Relation Layout",
     layer: "GENERAL",
     entity: "EndpointRelation",
-    date: new Date().getTime(),
     isRoot: true,
     children: [
       {

src/views/dashboard/Edit.vue

@@ -71,7 +71,7 @@ async function setTemplate() {
   const c: { configuration: string; id: string } = JSON.parse(
     sessionStorage.getItem(layoutKey) || "{}"
   );
-  const layout = JSON.parse(c.configuration || "") || {};
+  const layout = JSON.parse(c.configuration || "{}");
   dashboardStore.setLayout(layout.children || []);
 }
 function handleClick(e: any) {

src/views/dashboard/List.vue

@@ -43,13 +43,9 @@ limitations under the License. -->
         <el-table-column fixed prop="name" label="Name" />
         <el-table-column prop="layer" label="Layer" />
         <el-table-column prop="entity" label="Entity" />
-        <el-table-column prop="date" label="Date" />
         <el-table-column label="Operations">
           <template #default="scope">
-            <el-button
-              size="small"
-              @click="handleEdit(scope.$index, scope.row)"
-            >
+            <el-button size="small" @click="handleEdit(scope.row)">
               {{ t("view") }}
             </el-button>
             <!-- <el-button
@@ -58,14 +54,17 @@ limitations under the License. -->
             >
               {{ t("edit") }}
             </el-button> -->
-            <el-button
-              size="small"
-              type="danger"
-              @click="handleDelete(scope.$index, scope.row)"
+            <el-popconfirm
+              title="Are you sure to delete this?"
+              @confirm="handleDelete(scope.$index, scope.row)"
             >
+              <template #reference>
+                <el-button size="small" type="danger">
                   {{ t("delete") }}
                 </el-button>
               </template>
+            </el-popconfirm>
+          </template>
         </el-table-column>
       </el-table>
     </div>
@@ -78,6 +77,7 @@ import { ElTable, ElTableColumn, ElButton, ElInput } from "element-plus";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { ElMessage } from "element-plus";
+import router from "@/router";
 
 const appStore = useAppStoreWithOut();
 const dashboardStore = useDashboardStore();
@@ -110,11 +110,20 @@ async function setList() {
   }
   dashboards.value = JSON.parse(sessionStorage.getItem("dashboards") || "");
 }
-const handleEdit = (index: number, row: any) => {
-  console.log(index, row);
+const handleEdit = (row: { name: string; layer: string; entity: string }) => {
+  router.push(
+    `/dashboard/${row.layer}/${row.entity}/${row.name.split(" ").join("-")}`
+  );
 };
-const handleDelete = (index: number, row: any) => {
-  console.log(index, row);
+const handleDelete = (
+  index: number,
+  row: { name: string; layer: string; entity: string }
+) => {
+  dashboards.value.splice(index, 1);
+  sessionStorage.setItem("dashboards", JSON.stringify(dashboards.value));
+  sessionStorage.removeItem(
+    `${row.layer}_${row.entity}_${row.name.split(" ").join("-")}`
+  );
 };
 </script>
 <style lang="scss" scoped>