refactor(desk): use createViewIfNotExists in CGallery

Author: zzhenryquezz

packages/desktop/modules/collection/components/CGallery.vue

@@ -15,7 +15,7 @@ import EImg from '@/modules/entry/components/EImg.vue'
 
 import { createPayload } from '../composables/filter'
 import { withView } from '@/modules/collection-column/composables/with-view'
-import { useView } from '@/modules/view/composables/use-view'
+import { createViewIfNotExists, useView } from '@/modules/view/composables/use-view'
 import { useHooks, Events } from '@/plugins/hooks'
 import { useItemStore } from '@/modules/item/store'
 import { withViewIterations } from '@/modules/view/composables'
@@ -47,6 +47,22 @@ function setView() {
     view = useView<ViewGallery>(props.collectionId, props.viewId, new ViewGallery({}, props.viewId))
 }
 
+watch(
+    () => props.viewId,
+    async () => {
+        if (props.viewId) {
+            await createViewIfNotExists(
+                props.collectionId,
+                props.viewId,
+                new ViewGallery({}, props.viewId)
+            )
+        }
+    },
+    {
+        immediate: true,
+    }
+)
+
 watch([() => props.viewId, () => props.collectionId], setView, { immediate: true })
 
 // columns

packages/desktop/modules/collection/components/CTable.vue

@@ -65,6 +65,7 @@ let view = useView<ViewTable>(props.collectionId, props.viewId, new ViewTable({}
 function setView() {
     view = useView<ViewTable>(props.collectionId, props.viewId, new ViewTable({}, props.viewId))
 }
+
 watch(
     () => props.viewId,
     async () => {

packages/examples/todo-list/dashboard.md

@@ -1,3 +1,9 @@
-# Table view
+# Tables
 
 <c-table collection-id="todo-list" view-id="table:0" />
+
+
+# Gallery view
+
+<c-gallery collection-id="todo-list" view-id="gallery:0" />
+

packages/examples/todo-list/todo-list/.is/views.json

@@ -35,5 +35,49 @@
             }
         ],
         "orderBy": []
+    },
+    {
+        "component": "gallery",
+        "id": "gallery:0",
+        "label": "",
+        "search": "",
+        "filters": [],
+        "columns": [
+            {
+                "label": "",
+                "id": "bc616ad5-46ce-4010-92b2-db0722358b12",
+                "options": []
+            },
+            {
+                "label": "Name",
+                "id": "63fefd4f-d313-49c9-92b0-82b4f655eb33",
+                "options": []
+            },
+            {
+                "label": "Progress (%)",
+                "id": "6d9d3fab-bce5-4182-b7f6-d7a9af661bf2",
+                "options": []
+            }
+        ],
+        "orderBy": [],
+        "thumbnail": {
+            "fit": "",
+            "key": "",
+            "position": ""
+        },
+        "sizes": {
+            "sm": {
+                "width": 200,
+                "height": "auto"
+            },
+            "md": {
+                "width": 200,
+                "height": "auto"
+            },
+            "lg": {
+                "width": 200,
+                "height": "auto"
+            }
+        }
     }
 ]