feat(desk): column type checkbox

Author: zzhenryquezz

packages/core/entities/column.ts

@@ -4,13 +4,14 @@ export enum ColumnType {
     text = 'text',
     number = 'number',
     select = 'select',
-    relation = 'relation',
+    link = 'link',
+    date = 'date',
+    checkbox = 'checkbox',
     script = 'script',
+    relation = 'relation',
     entry = 'entry',
     createdAt = 'createdAt',
     updatedAt = 'updatedAt',
-    link = 'link',
-    date = 'date',
 }
 
 export default class Column {

packages/desktop/i18n/en-US.ts

@@ -91,6 +91,7 @@ export default {
     pasteEntity: 'Paste {0}',
     image: 'Image | Images',
     sideBySide: 'Side by side',
+    checkbox: 'Checkbox',
     errors: {
         unknown: 'Unknown error',
         workspaceNotFound: '@:workspace not found: {0}',

packages/desktop/modules/collection-column/components/CcColumn.vue

@@ -91,6 +91,7 @@ const icons: Record<Column['type'], any> = {
     updatedAt: 'fa-regular fa-calendar',
     link: 'link',
     date: 'fa-regular fa-calendar',
+    checkbox: 'fa-regular fa-square-check',
 }
 
 // dialog
@@ -146,12 +147,14 @@ const relation = computed(() => {
     <v-dialog v-else v-model="dialog">
         <template #activator="{ attrs }">
             <div
-                class="cursor-pointer text-t-secondary text-sm flex items-center overflow-hidden"
+                class="cursor-pointer text-t-secondary flex items-center overflow-hidden"
                 v-bind="{ ...attrs, ...$attrs }"
             >
-                <fa-icon :icon="icons[column.type] || 'font'" class="mr-2 text-xs" />
+                <v-icon :name="icons[column.type] || 'font'" class="mr-3" />
 
-                {{ column.label }}
+                <div class="text-sm">
+                    {{ column.label }}
+                </div>
             </div>
         </template>
 

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

@@ -214,7 +214,7 @@ async function create() {
 
                                     <v-resize-line
                                         :model-value="c.width || 200"
-                                        :min-width="100"
+                                        :min-width="50"
                                         @update:model-value="(v) => resizeColumn(c.id, v)"
                                     />
                                 </template>
@@ -283,16 +283,6 @@ async function create() {
                                 color="none"
                                 flat
                             />
-
-                            <v-btn
-                                v-if="cIndex === 1"
-                                size="sm"
-                                color="b-secondary"
-                                class="absolute right-2 top-2 opacity-0 group-hover/item:opacity-100"
-                                :to="`/collections/${collectionId}/items/${data.item.id}`"
-                            >
-                                <v-icon name="eye" />
-                            </v-btn>
                         </v-td>
                     </v-tr>
                 </template>

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

@@ -12,9 +12,11 @@ import { createBindings } from '@/composables/binding'
 const IValueText = defineAsyncComponent(() => import('./IValueText.vue'))
 const IValueNumber = defineAsyncComponent(() => import('./IValueNumber.vue'))
 const IValueSelect = defineAsyncComponent(() => import('./IValueSelect.vue'))
+const IValueDate = defineAsyncComponent(() => import('./IValueDate.vue'))
+const IValueCheckbox = defineAsyncComponent(() => import('./IValueCheckbox.vue'))
+
 const IValueRelation = defineAsyncComponent(() => import('./IValueRelation.vue'))
 const IValueLink = defineAsyncComponent(() => import('./IValueLink.vue'))
-const IValueDate = defineAsyncComponent(() => import('./IValueDate.vue'))
 const IValueScript = defineAsyncComponent(() => import('./IValueScript.vue'))
 const IValueEntry = defineAsyncComponent(() => import('./IValueEntry.vue'))
 const IValueTimestamp = defineAsyncComponent(() => import('./IValueTimestamp.vue'))
@@ -117,6 +119,14 @@ const bindings = createBindings(attrs, ['input', 'select'])
             v-bind="bindings.multiple(['root', 'input'])"
         />
 
+        <i-value-checkbox
+            v-else-if="type === ColumnType.checkbox"
+            :collection-id="collectionId"
+            :item-id="itemId"
+            :column-id="columnId"
+            v-bind="bindings.multiple(['root'])"
+        />
+
         <i-value-timestamp
             v-else-if="type === ColumnType.createdAt || type === ColumnType.updatedAt"
             :collection-id="collectionId"

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { createValue } from '@/modules/item/composables/value'
+import { ref } from 'vue'
+
+const props = defineProps({
+    collectionId: {
+        type: String,
+        required: true,
+    },
+    columnId: {
+        type: String,
+        required: true,
+    },
+    itemId: {
+        type: String,
+        required: true,
+    },
+})
+
+const { payload, save, onLoaded } = createValue({
+    collectionId: props.collectionId,
+    columnId: props.columnId,
+    itemId: props.itemId,
+})
+
+await new Promise<void>((resolve) => onLoaded(resolve))
+</script>
+
+<template>
+    <v-checkbox v-model="payload" autofocus @update:model-value="save" />
+</template>

packages/desktop/modules/item/pages/IList.vue

@@ -30,7 +30,7 @@ watch(
 )
 
 // set meta
-const meta = useMeta({ title: collection.value?.name ?? 'collection' })
+const meta = useMeta()
 
 function load() {
     meta.value.title = collection.value?.name ?? props.collectionId

packages/desktop/modules/layout/components/LToolbar.vue

@@ -9,6 +9,7 @@ import { onKeyStroke } from '@vueuse/core'
 import { useStore } from '@/modules/menu/store'
 import { useToggleDrawer } from '../composables/drawer'
 import DirectoryEntry from '@/../core/entities/directory-entry'
+import { useMeta } from '@/composables/metas'
 
 const route = useRoute()
 const router = useRouter()
@@ -78,12 +79,13 @@ watch(
 // add page to menu
 
 const store = useStore()
+const meta = useMeta()
 
 const menu = ref({
     item: computed(() => store.menu.find((i) => i.to === route.path)),
     async create() {
         await store.create({
-            label: document.title,
+            label: meta.value.title ?? document.title,
             to: route.path,
             children: [],
             id: uuid(),