@ramathibodi/nuxt-commons 0.1.14 → 0.1.16

package/dist/runtime/components/form/Table.vue

@@ -1,266 +1,294 @@
-<script lang="ts" setup>
-import {VDataTable} from 'vuetify/components/VDataTable'
-import {computed, defineOptions, nextTick, ref, useAttrs, watch} from 'vue'
-import {omit} from 'lodash-es'
-import type {FormDialogCallback} from '../../types/formDialog'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
-  title: string
-  noDataText?: string
-  modelValue?: Record<string, any>[]
-  modelKey?: string
-  dialogFullscreen?: boolean
-  initialData?: Record<string, any>
-  toolbarColor?: string
-  importable?: boolean
-  exportable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  noDataText: 'ไม่พบข้อมูล',
-  dialogFullscreen: false,
-  modelKey: 'id',
-  toolbarColor: 'primary',
-  importable: true,
-  exportable: true,
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const attrs = useAttrs()
-const plainAttrs = computed(() => {
-  return omit(attrs, ['modelValue', 'onUpdate:modelValue'])
-})
-
-const items = ref<Record<string, any>[]>([])
-const search = ref<string>()
-const currentItem = ref<Record<string, any> | undefined>(undefined)
-
-const isDialogOpen = ref<boolean>(false)
-
-watch(() => props.modelValue, (newValue) => {
-  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
-    items.value = []
-  }
-  else {
-    let maxKey = 0
-
-    newValue.forEach((item) => {
-      if (!item.hasOwnProperty(props.modelKey)) {
-        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
-        item[props.modelKey] = maxKey + 1
-      }
-    })
-
-    items.value = newValue
-  }
-}, { immediate: true })
-
-watch(items, (newValue) => {
-  emit('update:modelValue', newValue)
-}, { deep: true })
-
-function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
-  if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
-  else item[props.modelKey] = 1
-
-  items.value.push(item)
-
-  if (callback) callback.done()
-}
-
-function importItems(importItems: Record<string, any>[], callback?: FormDialogCallback) {
-  importItems.forEach((item) => {
-    createItem(item)
-  })
-  if (callback) callback.done()
-}
-
-function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === newItem[props.modelKey])
-
-  if (index !== -1) {
-    items.value[index] = newItem
-  }
-
-  if (callback) callback.done()
-}
-
-function moveUpItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
-
-  if (index > 0) {
-    const temp = items.value[index - 1]
-    items.value[index - 1] = items.value[index]
-    items.value[index] = temp
-  }
-
-  if (callback) callback.done()
-}
-
-function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
-
-  if (index < items.value.length - 1) {
-    const temp = items.value[index + 1]
-    items.value[index + 1] = items.value[index]
-    items.value[index] = temp
-  }
-
-  if (callback) callback.done()
-}
-
-function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
-  const index = items.value.findIndex(item => item[props.modelKey] === deleteItem[props.modelKey])
-
-  if (index !== -1) {
-    items.value.splice(index, 1)
-  }
-
-  if (callback) callback.done()
-}
-
-function openDialog(item?: object) {
-  currentItem.value = item
-  nextTick(() => {
-    isDialogOpen.value = true
-  })
-}
-
-const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem })
-</script>
-
-<template>
-  <v-card>
-    <VToolbar :color="toolbarColor">
-      <v-row
-        justify="end"
-        class="ma-1"
-        dense
-        no-gutters
-        align="center"
-      >
-        <v-col cols="7">
-          <VToolbarTitle class="pl-3">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </VToolbarTitle>
-        </v-col>
-        <v-col cols="5">
-          <slot name="search">
-            <VTextField
-              v-model="search"
-              class="justify-end w-100"
-              density="compact"
-              hide-details
-              placeholder="ค้นหา"
-              clearable
-              variant="solo"
-            />
-          </slot>
-        </v-col>
-      </v-row>
-
-      <VToolbarItems>
-        <slot name="toolbarItems" />
-        <ImportCSV
-          v-if="props.importable"
-          icon="mdi mdi-file-upload"
-          variant="flat"
-          @import="importItems"
-        />
-        <ExportCSV
-          v-if="props.exportable && items.length"
-          icon="mdi mdi-file-download"
-          variant="flat"
-          :file-name="title"
-          :model-value="items"
-        />
-        <VBtn
-          :color="toolbarColor"
-          prepend-icon="mdi mdi-plus"
-          variant="flat"
-          @click="openDialog()"
-        >
-          add
-        </VBtn>
-      </VToolbarItems>
-    </VToolbar>
-    <v-data-table
-      v-bind="plainAttrs"
-      color="primary"
-      :items="items"
-      :search="search"
-    >
-      <!-- @ts-ignore -->
-      <template
-        v-for="(_, name, index) in ($slots as {})"
-        :key="index"
-        #[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="((slotData || {}) as object)"
-          :operation="operation"
-        />
-      </template>
-      <template
-        v-if="!$slots['item.operation']"
-        #item.operation="props"
-      >
-        <v-btn
-          :disabled="props.index==0"
-          variant="flat"
-          density="compact"
-          icon="mdi mdi-arrow-up-thick"
-          @click="moveUpItem(props.item)"
-        />
-        <v-btn
-          :disabled="props.index==items.length-1"
-          variant="flat"
-          density="compact"
-          icon="mdi mdi-arrow-down-thick"
-          @click="moveDownItem(props.item)"
-        />
-      </template>
-      <template
-        v-if="!$slots['item.action']"
-        #item.action="{ item }"
-      >
-        <v-btn
-          variant="flat"
-          density="compact"
-          icon="mdi mdi-note-edit"
-          @click="openDialog(item)"
-        />
-        <v-btn
-          variant="flat"
-          density="compact"
-          icon="mdi mdi-delete"
-          @click="deleteItem(item)"
-        />
-      </template>
-    </v-data-table>
-    <FormDialog
-      v-model="isDialogOpen"
-      :title="title"
-      :fullscreen="dialogFullscreen"
-      :initial-data="initialData"
-      :form-data="currentItem"
-      @create="createItem"
-      @update="updateItem"
-    >
-      <template #default="slotData">
-        <slot
-          name="form"
-          v-bind="slotData"
-        />
-      </template>
-    </FormDialog>
-  </v-card>
-</template>
+<script lang="ts" setup>
+import {VDataTable} from 'vuetify/components/VDataTable'
+import {computed, defineOptions, nextTick, ref, useAttrs, watch} from 'vue'
+import {omit} from 'lodash-es'
+import type {FormDialogCallback} from '../../types/formDialog'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props']> {
+  title: string
+  noDataText?: string
+  modelValue?: Record<string, any>[]
+  modelKey?: string
+  dialogFullscreen?: boolean
+  initialData?: Record<string, any>
+  toolbarColor?: string
+  importable?: boolean
+  exportable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  noDataText: 'ไม่พบข้อมูล',
+  dialogFullscreen: false,
+  modelKey: 'id',
+  toolbarColor: 'primary',
+  importable: true,
+  exportable: true,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const attrs = useAttrs()
+const plainAttrs = computed(() => {
+  return omit(attrs, ['modelValue', 'onUpdate:modelValue'])
+})
+
+const items = ref<Record<string, any>[]>([])
+const search = ref<string>()
+const currentItem = ref<Record<string, any> | undefined>(undefined)
+
+const isDialogOpen = ref<boolean>(false)
+
+watch(() => props.modelValue, (newValue) => {
+  if (!Array.isArray(newValue) || !newValue.every(item => typeof item === 'object')) {
+    items.value = []
+  }
+  else {
+    let maxKey = 0
+
+    newValue.forEach((item) => {
+      if (!item.hasOwnProperty(props.modelKey)) {
+        maxKey = Math.max(maxKey, ...newValue.map(i => i[props.modelKey] || 0))
+        item[props.modelKey] = maxKey + 1
+      }
+    })
+
+    items.value = newValue
+  }
+}, { immediate: true })
+
+watch(items, (newValue) => {
+  emit('update:modelValue', newValue)
+}, { deep: true })
+
+function createItem(item: Record<string, any>, callback?: FormDialogCallback) {
+  if (items.value.length > 0) item[props.modelKey] = Math.max(...items.value.map(i => i[props.modelKey] || 0)) + 1
+  else item[props.modelKey] = 1
+
+  items.value.push(item)
+
+  if (callback) callback.done()
+}
+
+function importItems(importItems: Record<string, any>[], callback?: FormDialogCallback) {
+  importItems.forEach((item) => {
+    createItem(item)
+  })
+  if (callback) callback.done()
+}
+
+function updateItem(newItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === newItem[props.modelKey])
+
+  if (index !== -1) {
+    items.value[index] = newItem
+  }
+
+  if (callback) callback.done()
+}
+
+function moveUpItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
+
+  if (index > 0) {
+    const temp = items.value[index - 1]
+    items.value[index - 1] = items.value[index]
+    items.value[index] = temp
+  }
+
+  if (callback) callback.done()
+}
+
+function moveDownItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey])
+
+  if (index >= 0 && index < items.value.length - 1) {
+    const temp = items.value[index + 1]
+    items.value[index + 1] = items.value[index]
+    items.value[index] = temp
+  }
+
+  if (callback) callback.done()
+}
+
+function moveToItem(currentItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === currentItem[props.modelKey]);
+
+  if (index !== -1) {
+    const newPosition = prompt("Enter the new position (0-based index):");
+    const parsedPosition = parseInt(<string>newPosition, 10);
+
+    if (isNaN(parsedPosition) || parsedPosition < 0 || parsedPosition >= items.value.length) {
+      alert("Invalid position entered. Please enter a number between 0 and " + (items.value.length - 1));
+      return
+    }
+
+    const [temp] = items.value.splice(index, 1);
+
+    items.value.splice(parsedPosition, 0, temp);
+  }
+
+  if (callback) callback.done();
+}
+
+function deleteItem(deleteItem: Record<string, any>, callback?: FormDialogCallback) {
+  const index = items.value.findIndex(item => item[props.modelKey] === deleteItem[props.modelKey])
+
+  if (index !== -1) {
+    items.value.splice(index, 1)
+  }
+
+  if (callback) callback.done()
+}
+
+function openDialog(item?: object) {
+  currentItem.value = item
+  nextTick(() => {
+    isDialogOpen.value = true
+  })
+}
+
+const operation = ref({ openDialog, createItem, updateItem, deleteItem, moveUpItem, moveDownItem,moveToItem })
+</script>
+
+<template>
+  <v-card>
+    <VToolbar :color="toolbarColor">
+      <v-row
+        justify="end"
+        class="ma-1"
+        dense
+        no-gutters
+        align="center"
+      >
+        <v-col cols="7">
+          <VToolbarTitle class="pl-3">
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </VToolbarTitle>
+        </v-col>
+        <v-col cols="5">
+          <slot name="search">
+            <VTextField
+              v-model="search"
+              class="justify-end w-100"
+              density="compact"
+              hide-details
+              placeholder="ค้นหา"
+              clearable
+              variant="solo"
+            />
+          </slot>
+        </v-col>
+      </v-row>
+
+      <VToolbarItems>
+        <slot name="toolbarItems" />
+        <ImportCSV
+          v-if="props.importable"
+          icon="mdi mdi-file-upload"
+          variant="flat"
+          @import="importItems"
+          :color="toolbarColor"
+        />
+        <ExportCSV
+          v-if="props.exportable && items.length"
+          icon="mdi mdi-file-download"
+          variant="flat"
+          :file-name="title"
+          :model-value="items"
+          :color="toolbarColor"
+        />
+        <VBtn
+          :color="toolbarColor"
+          prepend-icon="mdi mdi-plus"
+          variant="flat"
+          @click="openDialog()"
+        >
+          add
+        </VBtn>
+      </VToolbarItems>
+    </VToolbar>
+    <v-data-table
+      v-bind="plainAttrs"
+      color="primary"
+      :items="items"
+      :search="search"
+    >
+      <!-- @ts-ignore -->
+      <template
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
+      >
+        <slot
+          :name="name"
+          v-bind="((slotData || {}) as object)"
+          :operation="operation"
+        />
+      </template>
+      <template
+        v-if="!$slots['item.operation']"
+        #item.operation="props"
+      >
+        <v-btn
+          :disabled="props.index==0"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-arrow-up-thick"
+          @click="moveUpItem(props.item)"
+        />
+        <v-btn
+            variant="flat"
+            density="compact"
+            icon="fa fa-arrow-right-to-bracket"
+            @click="moveToItem(props.item)"
+        />
+        <v-btn
+          :disabled="props.index==items.length-1"
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-arrow-down-thick"
+          @click="moveDownItem(props.item)"
+        />
+      </template>
+      <template
+        v-if="!$slots['item.action']"
+        #item.action="{ item }"
+      >
+        <v-btn
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-note-edit"
+          @click="openDialog(item)"
+        />
+        <v-btn
+          variant="flat"
+          density="compact"
+          icon="mdi mdi-delete"
+          @click="deleteItem(item)"
+        />
+      </template>
+    </v-data-table>
+    <FormDialog
+      v-model="isDialogOpen"
+      :title="title"
+      :fullscreen="dialogFullscreen"
+      :initial-data="initialData"
+      :form-data="currentItem"
+      @create="createItem"
+      @update="updateItem"
+    >
+      <template #default="slotData">
+        <slot
+          name="form"
+          v-bind="slotData"
+        />
+      </template>
+    </FormDialog>
+  </v-card>
+</template>