feat(desk): remake entry column type

Author: zzhenryquezz

.eslintrc.js

@@ -64,5 +64,6 @@ module.exports = {
         '@typescript-eslint/ban-types': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
         'vue/multi-word-component-names': 'off',
+        'vue/no-setup-props-destructure': 'off',
     },
 }

packages/core/entities/collection.ts

@@ -1,9 +1,18 @@
 import uuid from 'uuid-random'
 
+export enum CollectionColumnType {
+    text = 'text',
+    number = 'number',
+    select = 'select',
+    relation = 'relation',
+    script = 'script',
+    entry = 'entry',
+}
+
 export interface CollectionColumn {
     id: string
     field: string
-    type: 'text' | 'number' | 'select' | 'relation' | 'script'
+    type: CollectionColumnType
     label: string
     readonly?: boolean
     [key: string]: any

packages/core/entities/directory-entry.ts

@@ -26,6 +26,14 @@ export default class DirectoryEntry {
         return path.split('/').pop() as string
     }
 
+    public static extname(...paths: string[]) {
+        const basename = this.basename(...paths)
+
+        const [, extname] = basename.split('.')
+
+        return extname
+    }
+
     public static directory(...paths: string[]) {
         const path = this.normalize(...paths)
 

packages/core/entities/view.ts

@@ -1,7 +1,5 @@
 import uuid from 'uuid-random'
 
-import { CollectionColumn } from './collection'
-
 export default class View {
     public id: string
 
@@ -10,7 +8,10 @@ export default class View {
     }
 }
 
-interface ViewTableColumn extends CollectionColumn {}
+export interface ViewTableColumn {
+    id: string // link with column
+    width: number
+}
 
 export class ViewTable extends View {
     public component = 'table'

packages/desktop/App.vue

@@ -1,8 +1,30 @@
 <script setup lang="ts">
+import { watch, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useState } from './composables/state'
+
 import NNotify from '@/modules/notify/components/NNotify.vue'
+
+// save last navigation
+const router = useRouter()
+const route = useRoute()
+const loading = ref(false)
+
+const lastRoute = useState('app:router:last', '/', {
+    localStorage: true,
+})
+
+router.push(lastRoute.value)
+
+loading.value = false
+
+watch(
+    () => route.path,
+    (v) => (lastRoute.value = v)
+)
 </script>
 <template>
     <n-notify />
 
-    <router-view />
+    <router-view v-if="!loading" />
 </template>

packages/desktop/electron/gateways/fs-crud-folder.ts

@@ -78,6 +78,8 @@ export default class FolderCrud implements Crud {
                 Object.assign(data, meta)
             }
 
+            data._filename = DirectoryEntry.normalize(collectionPath, entry.name)
+
             items.push(new Item(data, entry.name))
         }
 

packages/desktop/i18n/en-US.ts

@@ -58,6 +58,12 @@ export default {
     apply: 'Apply',
     operation: 'Operation',
     clear: 'Clear',
+    upload: 'Upload',
+    filename: 'Filename',
+    text: 'Text',
+    number: 'Number',
+    select: 'Select',
+    relation: 'Relation',
     errors: {
         workspaceNotFound: '@:workspace not found: {0}',
         collectionNotFound: '@:collection not found: {1}',

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

@@ -1,101 +1,72 @@
 <script setup lang="ts">
-import { CollectionColumn } from '@core/entities/collection'
-
-import { updateCollectionColumn, deleteCollectionColumn } from '@/composables/collection'
+import { CollectionColumn, CollectionColumnType } from '@core/entities/collection'
 
 import { computed, ref, watch } from 'vue'
 import { useStore } from '@/modules/collection/store'
 
 import MEditor from '@/modules/monaco/components/MEditor.vue'
+import { useVModel } from '@vueuse/core'
+import { useNonReactive } from '@/composables/utils'
+import { useI18n } from 'vue-i18n'
 
+// Props & emits
 const props = defineProps({
-    collectionId: {
-        type: String,
+    modelValue: {
+        type: Object as () => CollectionColumn,
         required: true,
     },
-    column: {
-        type: Object as () => CollectionColumn,
+    collectionId: {
+        type: String,
         required: true,
     },
 })
 
-// type options
+const emit = defineEmits(['update:modelValue'])
 
-interface Option {
-    label: string
-    value: CollectionColumn['type']
-}
+// form
+const tm = useI18n()
+const model = useVModel(props, 'modelValue', emit)
 
-const types: Option[] = [
-    {
-        label: 'Text',
-        value: 'text',
-    },
-    {
-        label: 'Number',
-        value: 'number',
-    },
-    {
-        label: 'Select',
-        value: 'select',
-    },
-    // {
-    //     label: 'Entry',
-    //     value: 'entry',
-    // },
-    {
-        label: 'Relation',
-        value: 'relation',
-    },
-    // {
-    //     label: 'Script',
-    //     value: 'script',
-    // },
-]
-
-const dialog = ref(false)
-
-const payload = ref<Omit<CollectionColumn, ''>>({
+const payload = ref<CollectionColumn>({
     id: '',
     label: '',
     field: '',
-    type: 'text',
+    type: CollectionColumnType.text,
     content: '',
     options: undefined,
     collectionId: undefined,
     displayField: undefined,
 })
 
+const types = Object.values(CollectionColumnType).map((v) => ({
+    label: tm.t(v),
+    value: v,
+}))
+
+async function submit() {
+    model.value = useNonReactive(payload.value)
+
+    dialog.value = false
+}
+
+// icons
 const icons: Record<CollectionColumn['type'], any> = {
     text: 'font',
     number: 'hashtag',
     select: 'fa-regular fa-square-caret-down',
     relation: 'arrow-up',
     script: 'code',
+    entry: 'file',
 }
 
-function load() {
-    Object.keys(payload.value).forEach((key) => {
-        payload.value[key] = props.column[key]
-    })
-}
-
-watch(() => props.column, load, { immediate: true, deep: true })
-
-async function submit() {
-    if (payload.value.type !== 'select') {
-        payload.value.options = undefined
-    }
+// dialog
+const dialog = ref(false)
 
-    // await updateCollectionColumn(
-    //     props.workspaceId,
-    //     props.collectionId,
-    //     props.column.id,
-    //     payload.value
-    // )
+watch(dialog, (value) => {
+    if (!value) return
 
-    dialog.value = false
-}
+    payload.value = useNonReactive(model.value)
+})
 
 async function deleteColumn() {
     // await deleteCollectionColumn(props.workspaceId, props.collectionId, props.column.id)
@@ -127,14 +98,14 @@ const options = computed(() => {
                 class="cursor-pointer text-t-secondary text-sm flex items-center overflow-hidden"
                 v-bind="{ ...attrs, ...$attrs }"
             >
-                <fa-icon :icon="icons[column.type] || 'font'" class="mr-2 text-xs" />
+                <fa-icon :icon="icons[model.type] || 'font'" class="mr-2 text-xs" />
 
-                {{ column.label }}
+                {{ model.label }}
             </div>
         </template>
 
         <v-card width="500" color="b-secondary">
-            <v-card-head>
+            <v-card-head class="px-4">
                 <v-card-title>
                     {{ $t('editEntity', [$t('column')]) }}
                 </v-card-title>
@@ -217,8 +188,16 @@ const options = computed(() => {
                         </v-card>
                     </is-drawer>
 
+                    <div v-if="payload.type === 'entry'" class="mb-4">
+                        <is-input
+                            v-model="payload.filename"
+                            :label="$t('filename')"
+                            placeholder="thumbnail.jpg"
+                        />
+                    </div>
+
                     <div>
-                        <v-btn class="w-full">{{ $t('save') }}</v-btn>
+                        <v-btn type="submit" class="w-full">{{ $t('save') }}</v-btn>
                     </div>
                 </w-form>
             </v-card-content>