refactor(desk): add useItemStore

Author: zzhenryquezz

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

@@ -11,6 +11,7 @@ import { useView } from '@/modules/view/composables/use-view'
 import CActionsColumns from './CActionsColumns.vue'
 import CActionsOrder from './CActionsOrder.vue'
 import CActionsFilters from './CActionsFilters.vue'
+import { useItemStore } from '@/modules/item/store'
 
 const CActionsGallery = defineAsyncComponent(() => import('./CActionsGallery.vue'))
 const CActionsTable = defineAsyncComponent(() => import('./CActionsTable.vue'))
@@ -63,8 +64,22 @@ watch(
 
 // refresh
 
+// items
+
+let itemsStore = useItemStore(props.collectionId)
+
+watch(
+    () => props.collectionId,
+    async (id) => {
+        itemsStore = useItemStore(id)
+
+        await itemsStore.load()
+    },
+    { immediate: true }
+)
+
 async function refresh() {
-    await store.item.setItems(props.collectionId, true)
+    await itemsStore.load(true)
 
     await store.column.set(props.collectionId, true)
 }
@@ -107,7 +122,7 @@ function isCommon(v: View): v is ViewCommon {
                     <v-icon name="search" />
                 </v-btn>
 
-                <v-btn text size="sm" @click="refresh">
+                <v-btn text size="sm" :loading="itemsStore.loading" @click="refresh">
                     <v-icon name="rotate" />
                 </v-btn>
 

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

@@ -3,13 +3,12 @@ import get from 'lodash/get'
 import set from 'lodash/set'
 
 import Column from '@core/entities/column'
-import Item from '@core/entities/item'
 import { ViewFilter } from '@core/entities/view-common'
 
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { useVModel } from 'vue-wind/composables/v-model'
 import { operations } from '../composables/filter'
-import { useStore } from '@/store/global'
+import { useItemStore } from '@/modules/item/store'
 
 const props = defineProps({
     modelValue: {
@@ -44,18 +43,7 @@ const options = Object.keys(operations.relation).map((key) => ({
 }))
 
 // Relation
-const store = useStore()
-
-const relation = ref({
-    items: [] as Item[],
-})
-
-store.item
-    .list({
-        collectionId: props.column.collectionId,
-    })
-    .then((r) => (relation.value.items = r.data))
-    .catch(() => (relation.value.items = []))
+const store = useItemStore(props.column.collectionId)
 </script>
 <template>
     <div class="flex w-full">
@@ -71,7 +59,7 @@ store.item
         <v-select
             v-model="model.value"
             :placeholder="$t('value')"
-            :options="relation.items"
+            :options="store.items"
             :label-key="column.displayField || 'id'"
             class="w-full"
             value-key="id"

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

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'lodash'
 import { computed, onUnmounted, ref, useAttrs, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
@@ -18,7 +17,8 @@ import { createPayload } from '../composables/filter'
 import { withView } from '@/modules/collection-column/composables/with-view'
 import { useView } from '@/modules/view/composables/use-view'
 import { useHooks, Events } from '@/plugins/hooks'
-import { useItems } from '@/modules/item/composables/items'
+import { useItemStore } from '@/modules/item/store'
+import { withViewIterations } from '@/modules/view/composables'
 
 // Props & Emits
 const props = defineProps({
@@ -62,7 +62,21 @@ const visibleColumns = computed(() => view.value.columns.filter((c) => !c.hide).
 
 // items
 
-const { items } = useItems(props.collectionId, view)
+let itemsStore = useItemStore(props.collectionId)
+
+const items = computed(() => withViewIterations(itemsStore.items, view.value))
+
+watch(
+    () => props.collectionId,
+    async (id) => {
+        itemsStore = useItemStore(id)
+
+        if (!itemsStore.items.length) {
+            await itemsStore.load()
+        }
+    },
+    { immediate: true }
+)
 
 // thumbnail
 const hooks = useHooks()
@@ -96,7 +110,7 @@ onUnmounted(() => hooks.off('item:updated', onItemUpdated))
 async function create() {
     const item = new Item(createPayload(view.value?.filters, collection?.columns))
 
-    await store.item.create(props.collectionId, item)
+    await itemsStore.create(item)
 }
 
 // on item click
@@ -124,6 +138,7 @@ function onClick(item: Item) {
                 :items="items"
                 :columns="columns"
                 :sizes="view.sizes"
+                :limit="view.limit"
                 item-key="id"
                 class="py-4"
                 v-bind="bindings.gallery"
@@ -162,7 +177,7 @@ function onClick(item: Item) {
                                         size="xs"
                                         color="danger"
                                         dark
-                                        @click="store.item.destroy(collectionId, data.item.id)"
+                                        @click="itemsStore.destroy(data.item.id)"
                                     >
                                         <v-icon name="trash" class="mr-2" />
                                         {{ $t('deleteEntity', [$t('item')]) }}

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

@@ -18,10 +18,8 @@ import { withOnlyView, withView } from '@/modules/collection-column/composables/
 
 import { withViewIterations } from '@/modules/view/composables'
 import { useView } from '@/modules/view/composables/use-view'
-import { Events, useHooks } from '@/plugins/hooks'
 
-import { useItems } from '@/modules/item/composables/items'
-import { createViewStore } from '@/modules/view/store'
+import { useItemStore } from '@/modules/item/store'
 
 const IValue = defineAsyncComponent(() => import('@/modules/item/components/IValue.vue'))
 const CActions = defineAsyncComponent(() => import('./CActions.vue'))
@@ -123,14 +121,29 @@ function resizeColumn(id: string, width: number) {
 }
 
 // items
-const { items } = useItems(props.collectionId, view)
+
+let itemsStore = useItemStore(props.collectionId)
+
+const items = computed(() => withViewIterations(itemsStore.items, view.value))
+
+watch(
+    () => props.collectionId,
+    async (id) => {
+        itemsStore = useItemStore(id)
+
+        if (!itemsStore.items.length) {
+            await itemsStore.load()
+        }
+    },
+    { immediate: true }
+)
 
 // create item
 
 async function create() {
     const item = new Item(createPayload(view.value?.filters, collection.value?.columns))
 
-    await store.item.create(props.collectionId, item)
+    await itemsStore.create(item)
 }
 </script>
 
@@ -247,7 +260,7 @@ async function create() {
                                             size="xs"
                                             color="danger"
                                             dark
-                                            @click="store.item.destroy(collectionId, data.item.id)"
+                                            @click="itemsStore.destroy(data.item.id)"
                                         >
                                             <v-icon name="trash" class="mr-2" />
                                             {{ $t('deleteEntity', [$t('item')]) }}

packages/desktop/modules/entry/pages/ESingle.vue

@@ -65,26 +65,32 @@ async function setView() {
 
     const { path, type } = entry.value
 
+    store.layout.toolbar = true
+
+    if (type === 'directory') {
+        store.layout.toolbar = false
+        current.value = 'folder'
+        return
+    }
+
     if (/.(md)/.test(path)) {
         current.value = 'markdown'
+        return
     }
 
     if (/.(jpg|jpeg)/.test(path)) {
         current.value = 'image'
+        return
     }
 
     if (/.(json|txt|csv|html)/.test(path)) {
         current.value = 'editor'
+        return
     }
     if (/.(js|ts)/.test(path)) {
         current.value = 'code'
+        return
     }
-
-    if (type === 'directory') {
-        current.value = 'folder'
-    }
-
-    store.layout.toolbar = current.value !== 'folder'
 }
 
 watch(() => entry.value?.path, setView, { deep: true })

packages/desktop/modules/item/components/IValueRelation.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { watch, ref } from 'vue'
-
-import Item from '@core/entities/item'
+import { watch } from 'vue'
 
 import { createValue } from '@/modules/item/composables/value'
-import { useStore } from '@/store/global'
+import { useItemStore } from '../store'
 
 const props = defineProps({
     collectionId: {
@@ -25,26 +23,28 @@ const props = defineProps({
 
 const { payload, column, onLoaded, save } = createValue(props)
 
-// options
-const store = useStore()
-
-const options = ref<Item[]>([])
+await new Promise<void>((resolve) => onLoaded(resolve))
 
-async function setOptions() {
-    if (!column.value) return
+// options
+let store = useItemStore(column.value!.collectionId)
 
-    options.value = await store.item.list(column.value.collectionId)
-}
+watch(
+    column,
+    async () => {
+        if (!column.value) return
 
-watch(column, setOptions)
+        store = useItemStore(column.value.collectionId)
 
-await new Promise<void>((resolve) => onLoaded(resolve))
+        await store.load()
+    },
+    { immediate: true }
+)
 </script>
 
 <template>
     <v-select
         v-model="payload"
-        :options="options"
+        :options="store.items"
         :clear-value="() => null"
         :label-key="column?.displayField"
         value-key="id"

packages/desktop/modules/item/composables/value.ts

@@ -1,10 +1,7 @@
 import { computed, ref, watch } from 'vue'
-import debounce from 'lodash/debounce'
-
-import Column from '@core/entities/column'
-import Item from '@core/entities/item'
 
 import { useStore } from '@/store/global'
+import { useItemStore } from '../store'
 
 interface Params {
     collectionId: string
@@ -13,26 +10,24 @@ interface Params {
 }
 
 export function createValue<T = string | undefined>({ collectionId, columnId, itemId }: Params) {
-    // column
+    const store = useStore()
 
-    const column = ref<Column | null>(null)
+    const column = computed(() => store.column.get(collectionId, columnId))
 
     async function setColumn() {
-        await store.column
-            .show(collectionId, columnId)
-            .then((r) => (column.value = r))
-            .catch(() => (column.value = null))
+        await store.column.set(collectionId)
     }
 
     // item
 
-    const item = ref<Item | null>(null)
+    const itemStore = useItemStore(collectionId)
+
+    const item = computed(() => itemStore.get(itemId))
 
     async function setItem() {
-        await store.item
-            .show(collectionId, itemId)
-            .then((r) => (item.value = r))
-            .catch(() => (item.value = null))
+        if (!itemStore.items.length) {
+            await itemStore.load()
+        }
     }
 
     // payload
@@ -45,20 +40,24 @@ export function createValue<T = string | undefined>({ collectionId, columnId, it
         payload.value = item.value[column.value.field]
     }
 
+    watch(() => {
+        if (!column.value || !item.value) return
+
+        return item.value[column.value.field]
+    }, setPayload)
+
     async function save() {
         if (!column.value || !item.value) return
 
         const data = {
             [column.value.field]: payload.value,
         }
 
-        await store.item.update(collectionId, itemId, data)
+        await itemStore.update(itemId, data)
     }
 
     // load
 
-    const store = useStore()
-
     const loading = ref(false)
 
     loading.value = true