refactor: dashboard preview

Author: ziyujiahao

backend/apps/dashboard/api/dashboard_api.py

@@ -1,7 +1,8 @@
 
 from fastapi import APIRouter, File, UploadFile, HTTPException
 
-from apps.dashboard.crud.dashboard_service import get_dashboard_list, preview_with_id,create_dashboard
+from apps.dashboard.crud.dashboard_service import get_dashboard_list, preview_with_id, \
+    create_resource, create_canvas
 from apps.dashboard.models.dashboard_model import CreateDashboard
 from common.core.deps import SessionDep, CurrentUser
 
@@ -17,4 +18,16 @@ async def preview_dashboard(session: SessionDep,id:str):
 
 @router.post("/add", response_model=CreateDashboard)
 async def add(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
-    return create_dashboard(session, user, dashboard)
+    return create_resource(session, user, dashboard)
+
+@router.post("/update", response_model=CreateDashboard)
+async def update(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
+    return create_resource(session, user, dashboard)
+
+@router.post("/add_dashboard", response_model=CreateDashboard)
+async def add_dashboard(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
+    return create_canvas(session, user, dashboard)
+
+@router.post("/update_dashboard", response_model=CreateDashboard)
+async def update(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
+    return

backend/apps/dashboard/crud/dashboard_service.py

@@ -3,6 +3,7 @@
 from common.core.deps import SessionDep, CurrentUser
 from sqlmodel import text
 import uuid
+import datetime
 def get_dashboard_list(session: SessionDep):
     sql = text("SELECT id, name, type,node_type, pid, create_time FROM core_dashboard")
     for row in session.exec(sql).mappings():
@@ -11,14 +12,38 @@ def get_dashboard_list(session: SessionDep):
 def preview_with_id(session: SessionDep, dashboard_id: str):
     return  session.query(CoreDashboard).filter(CoreDashboard.id == id).first()
 
-
-def create_dashboard(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
+def get_create_base_info(user: CurrentUser, dashboard: CreateDashboard):
     new_id = uuid.uuid4().hex
     record = CoreDashboard(**dashboard.model_dump())
     record.id = new_id
     record.create_by = user.id
+    return record
+
+def create_resource(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
+    record = get_create_base_info(user, dashboard)
     session.add(record)
     session.flush()
     session.refresh(record)
     session.commit()
     return record
+
+
+
+def update_resource(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
+    record = session.query(CoreDashboard).filter(CoreDashboard.id == dashboard.id).first()
+    record.name = dashboard.name
+    record.update_by = user.id
+    record.update_time = datetime.datetime.now()
+    session.add(record)
+    session.commit()
+
+def create_canvas(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
+    record = get_create_base_info(user, dashboard)
+    record.node_type = dashboard.node_type
+    record.component_data = dashboard.component_data
+    record.canvas_style_data = dashboard.canvas_style_data
+    session.add(record)
+    session.flush()
+
+def update_canvas(session: SessionDep, user: CurrentUser, dashboard: CreateDashboard):
+    record = session.query(CoreDashboard).filter(CoreDashboard.id == dashboard.id).first()

frontend/src/api/dashboard.ts

@@ -5,5 +5,8 @@ export const dashboardApi = {
   getDashboardInfo: (params:any) => request.post(`/dashboard/get_dashboard/${params.id}`,params),
   sqNameCheck: (data: any) => request.post('/dashboard/name_check',data),
   moveResource: (data: any) => request.post('/dashboard/move',data),
-  addResource: (data: any) => request.post('/dashboard/add',data)
+  addResource: (data: any) => request.post('/dashboard/add',data),
+  updateResource: (data: any) => request.post('/dashboard/update',data),
+  saveCanvas: (data: any) => request.post('/dashboard/save_canvas',data),
+  updateCanvas: (data: any) => request.post('/dashboard/update_canvas',data)
 }

frontend/src/views/dashboard/editor/Toolbar.vue

@@ -6,14 +6,19 @@ import ComponentButtonLabel from "@/views/dashboard/components/button-label/Comp
 import dvTab from '@/assets/svg/dv-tab.svg'
 import dvText from '@/assets/svg/dv-text.svg'
 import dvView from '@/assets/svg/dv-view.svg'
-
+import ResourceGroupOpt from "@/views/dashboard/common/ResourceGroupOpt.vue";
+import {ref} from 'vue'
 const dashboardStore = dashboardStoreWithOut()
 const {dashboardInfo} = storeToRefs(dashboardStore)
 const emits = defineEmits(['addComponent'])
-
+const resourceGroupOptRef = ref(null)
 const openViewDialog = () => {
   // do addComponent
 }
+
+const saveCanvasWithCheck = () =>{
+
+}
 </script>
 
 <template>
@@ -46,6 +51,15 @@ const openViewDialog = () => {
       >
       </component-button-label>
     </div>
+    <div class="right-toolbar">
+      <el-button  @click="saveCanvasWithCheck()"
+          style="float: right; margin-right: 12px"
+          type="primary"
+      >
+        Save
+      </el-button>
+    </div>
+    <ResourceGroupOpt ref="resourceGroupOptRef"></ResourceGroupOpt>
   </div>
 </template>
 
@@ -57,12 +71,18 @@ const openViewDialog = () => {
   align-items: center;
   background: #050e21;
   padding-left: 8px;
+
   .core-toolbar {
     display: flex;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
   }
+  .right-toolbar {
+    display: flex;
+    position: absolute;
+    right: 12px;
+  }
 }
 
 </style>

frontend/src/views/dashboard/editor/index.vue

@@ -5,6 +5,11 @@ import DashboardEditor from "@/views/dashboard/editor/DashboardEditor.vue";
 import {findNewComponentFromList} from "@/views/dashboard/components/component-list.ts";
 import {guid} from "@/utils/canvas.ts";
 import cloneDeep from 'lodash/cloneDeep';
+import {storeToRefs} from "pinia";
+import {dashboardStoreWithOut} from "@/stores/dashboard/dashboard.ts";
+
+const dashboardStore = dashboardStoreWithOut()
+const {componentData} = storeToRefs(dashboardStore)
 
 
 const dashboardEditorRef = ref(null);
@@ -24,33 +29,6 @@ const addComponent = (componentType: string) => {
   }
 }
 
-const componentData = ref([
-  {
-    id: 4,
-    x: 1,
-    y: 1,
-    sizeX: 20,
-    sizeY: 10,
-    _dragId: 0
-  },
-  {
-    id: 10,
-    x: 2,
-    y: 1,
-    sizeX: 20,
-    sizeY: 10,
-    _dragId: 1
-  },
-  {
-    id: 7,
-    x: 1,
-    y: 2,
-    sizeX: 20,
-    sizeY: 10,
-    _dragId: 2
-  }
-])
-
 </script>
 
 <template>