@drax/crud-vue 3.25.1 → 3.29.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.25.1",
+  "version": "3.29.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -24,10 +24,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@drax/common-front": "^3.25.1",
+    "@drax/common-front": "^3.29.0",
     "@drax/crud-front": "^3.21.0",
-    "@drax/crud-share": "^3.21.0",
-    "@drax/media-vue": "^3.25.1"
+    "@drax/crud-share": "^3.29.0",
+    "@drax/media-vue": "^3.29.0"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -50,5 +50,5 @@
     "vue-tsc": "^3.2.4",
     "vuetify": "^3.11.8"
   },
-  "gitHead": "3a0fbd6094e1869b18c6c09a1d7bbdc0aee63288"
+  "gitHead": "4f97968e53b812a348aec9f09e59bff69e71ca9e"
 }

package/src/components/CrudFormList.vue

@@ -10,7 +10,7 @@ import {useDisplay} from "vuetify"
 const {t, te} = useI18n()
 const valueModel = defineModel({type: Array, default: () => []});
 
-const {field, entity} = defineProps({
+const {field, entity, readonly} = defineProps({
   entity: {type: Object as PropType<IEntityCrud>, required: true},
   field: {type: Object as PropType<IEntityCrudField>, required: true},
   readonly: {type: Boolean, default: false},
@@ -45,15 +45,22 @@ function addItem() {
   const item = newItem()
   valueModel.value.push(item);
   menuSelect(item, valueModel.value.length - 1)
+  emit('updateValue')
 }
 
 function removeItem(index: number) {
+  const removedItem = valueModel.value[index]
+
   if (indexSelected.value === index) {
-    itemSelected.value = undefined
-    indexSelected.value = undefined
+    valueModel.value.splice(index, 1);
+    syncSelectedItem(undefined)
+    emit('updateValue')
+    return
   }
-  valueModel.value.splice(index, 1);
 
+  valueModel.value.splice(index, 1);
+  syncSelectedItem(itemSelected.value === removedItem ? undefined : itemSelected.value)
+  emit('updateValue')
 }
 
 const label = computed(() => {
@@ -81,10 +88,87 @@ const menuMaxHeight = computed(() => {
   return field.menuMaxHeight || '300px'
 })
 
-defineEmits(['updateValue'])
+const emit = defineEmits(['updateValue'])
 
 const {xs} = useDisplay()
 
+const dragIndex = ref<number | null>(null)
+const dragOverIndex = ref<number | null>(null)
+
+const isSortable = computed(() => {
+  return !readonly
+})
+
+function getItemTitle(index: number) {
+  //@ts-ignore
+  return valueModel.value[index]?.[field?.arrayObjectShowField ?? Object.keys(valueModel.value[index] as any)[0]]
+}
+
+function syncSelectedItem(item?: any) {
+  if (!item) {
+    itemSelected.value = undefined
+    indexSelected.value = undefined
+    return
+  }
+
+  const nextIndex = valueModel.value.findIndex(currentItem => currentItem === item)
+
+  if (nextIndex === -1) {
+    itemSelected.value = undefined
+    indexSelected.value = undefined
+    return
+  }
+
+  itemSelected.value = item
+  indexSelected.value = nextIndex
+}
+
+function reorderItems(fromIndex: number, toIndex: number) {
+  if (fromIndex === toIndex) {
+    return
+  }
+
+  const movedItem = valueModel.value[fromIndex]
+  const selectedItem = itemSelected.value
+
+  valueModel.value.splice(fromIndex, 1)
+  valueModel.value.splice(toIndex, 0, movedItem)
+
+  syncSelectedItem(selectedItem ?? movedItem)
+  emit('updateValue')
+}
+
+function onDragStart(index: number) {
+  if (!isSortable.value) {
+    return
+  }
+
+  dragIndex.value = index
+  dragOverIndex.value = index
+}
+
+function onDragEnter(index: number) {
+  if (!isSortable.value || dragIndex.value === null) {
+    return
+  }
+
+  dragOverIndex.value = index
+}
+
+function onDrop(index: number) {
+  if (!isSortable.value || dragIndex.value === null) {
+    return
+  }
+
+  reorderItems(dragIndex.value, index)
+  clearDragState()
+}
+
+function clearDragState() {
+  dragIndex.value = null
+  dragOverIndex.value = null
+}
+
 </script>
 
 <template>
@@ -95,14 +179,19 @@ const {xs} = useDisplay()
     <!--ACCORDION-->
     <v-card-text v-if="field.arrayObjectUI === 'accordion' || xs">
       <v-expansion-panels>
-        <v-expansion-panel v-for="(item,index) in valueModel" :key="index">
+        <v-expansion-panel v-for="(item,index) in valueModel" :key="index"
+                           :class="{'crud-form-list--drag-over': dragOverIndex === index}"
+                           :draggable="isSortable"
+                           @dragstart="onDragStart(index)"
+                           @dragenter.prevent="onDragEnter(index)"
+                           @dragover.prevent
+                           @drop.prevent="onDrop(index)"
+                           @dragend="clearDragState">
 
           <v-expansion-panel-title>
+            <v-icon v-if="isSortable" class="mr-2" size="small">mdi-drag</v-icon>
             <v-chip class="mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
-            {{
-              //@ts-ignore
-              valueModel[index][field?.arrayObjectShowField ?? Object.keys(valueModel[index] as any)[0]]
-            }}
+            {{ getItemTitle(index) }}
 
             <template v-slot:actions="{expanded}">
               <v-icon>{{ expanded ? "mdi-menu-down" : "mdi-menu-up" }}</v-icon>
@@ -169,12 +258,16 @@ const {xs} = useDisplay()
 
                 <v-chip v-for="(item,index) in valueModel" :key="index"
                         :value="index" @click="menuSelect(item, index)"
+                        :draggable="isSortable"
+                        :class="{'crud-form-list--drag-over': dragOverIndex === index}"
+                        @dragstart="onDragStart(index)"
+                        @dragenter.prevent="onDragEnter(index)"
+                        @dragover.prevent
+                        @drop.prevent="onDrop(index)"
+                        @dragend="clearDragState"
                         label class="pr-0" :color="indexSelected === index ? 'primary' : ''"
                 >
-                  {{
-                    //@ts-ignore
-                    valueModel[index][field?.arrayObjectShowField ?? Object.keys(valueModel[index] as any)[0]] || (index)
-                  }}
+                  {{ getItemTitle(index) || (index) }}
 
                   <template v-slot:append>
                     <v-btn variant="text" class="ml-2" density="compact"
@@ -227,9 +320,17 @@ const {xs} = useDisplay()
             <v-card-text>
               <v-list v-model="itemSelected" :style="{ maxHeight: menuMaxHeight, overflowY: 'auto' }">
                 <v-list-item v-for="(item,index) in valueModel" :key="index" rounded="shaped"
+                             :class="{'crud-form-list--drag-over': dragOverIndex === index}"
                              :value="item" @click="menuSelect(item, index)"
+                             :draggable="isSortable"
+                             @dragstart="onDragStart(index)"
+                             @dragenter.prevent="onDragEnter(index)"
+                             @dragover.prevent
+                             @drop.prevent="onDrop(index)"
+                             @dragend="clearDragState"
                 >
                   <template v-slot:append>
+                    <v-icon v-if="isSortable" size="small" class="mr-2">mdi-drag</v-icon>
                     <v-btn size="x-small" variant="text" color="red" icon="mdi-delete"
                            @click="removeItem(index)"
 
@@ -237,10 +338,7 @@ const {xs} = useDisplay()
                   </template>
                   <v-list-item-title>
                     <v-chip class="mr-2" :color="hasError(index) ? 'red':'teal'">{{ index }}</v-chip>
-                    {{
-                      //@ts-ignore
-                      valueModel[index][field?.arrayObjectShowField ?? Object.keys(valueModel[index] as any)[0]]
-                    }}
+                    {{ getItemTitle(index) }}
                   </v-list-item-title>
                 </v-list-item>
 
@@ -287,5 +385,8 @@ const {xs} = useDisplay()
 </template>
 
 <style scoped>
-
+.crud-form-list--drag-over {
+  outline: 2px dashed rgb(var(--v-theme-primary));
+  outline-offset: 2px;
+}
 </style>

package/src/components/CrudListGallery.vue

@@ -22,6 +22,7 @@ import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
 import CrudFiltersAction from "./CrudFiltersAction.vue";
 import CrudFilterButton from "./buttons/CrudFilterButton.vue";
 import CrudSavedQueriesButton from "./buttons/CrudSavedQueriesButton.vue";
+import CrudRefreshButton from "./buttons/CrudRefreshButton.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -98,6 +99,11 @@ onMounted(() => {
           <slot name="toolbar">
           </slot>
 
+          <crud-refresh-button
+              v-if="entity.isRefreshable !== false"
+              @click="doPaginate"
+          />
+
           <crud-create-button
               v-if="entity.isCreatable"
               :entity="entity"

package/src/components/CrudListTable.vue

@@ -22,6 +22,7 @@ import CrudFiltersAction from "./CrudFiltersAction.vue";
 import CrudFilterButton from "./buttons/CrudFilterButton.vue";
 import CrudSavedQueriesButton from "./buttons/CrudSavedQueriesButton.vue";
 import CrudRowValue from "./CrudRowValue.vue";
+import CrudRefreshButton from "./buttons/CrudRefreshButton.vue";
 
 const {t, te} = useI18n()
 const {hasPermission} = useAuth()
@@ -131,6 +132,11 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
         </slot>
 
+        <crud-refresh-button
+            v-if="entity.isRefreshable !== false"
+            @click="doPaginate"
+        />
+
         <crud-create-button
             v-if="entity.isCreatable"
             :entity="entity"

package/src/components/buttons/CrudRefreshButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n()
+</script>
+
+<template>
+  <v-tooltip location="top">
+    <template v-slot:activator="{ props }">
+      <v-btn
+          v-bind="{ ...$attrs, ...props }"
+          icon="mdi-refresh"
+          class="mr-1"
+          variant="text"
+      >
+      </v-btn>
+    </template>
+    {{ t('action.refresh')}}
+  </v-tooltip>
+</template>
+
+<style scoped>
+
+</style>

package/src/cruds/EntityCrud.ts

@@ -225,6 +225,10 @@ class EntityCrud implements IEntityCrud {
     return true
   }
 
+  get isRefreshable() {
+    return true
+  }
+
   get isSavedQueriesEnabled(){
     return false
   }

package/src/index.ts

@@ -14,6 +14,7 @@ import CrudNotify from "./components/CrudNotify.vue";
 import CrudSearch from "./components/CrudSearch.vue";
 import CrudAutocomplete from "./components/CrudAutocomplete.vue";
 import CrudSavedQueriesButton from "./components/buttons/CrudSavedQueriesButton.vue";
+import CrudRefreshButton from "./components/buttons/CrudRefreshButton.vue";
 import EntityCombobox from "./components/combobox/EntityCombobox.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useEntityStore} from "./stores/UseEntityStore";
@@ -39,6 +40,7 @@ export {
     CrudSearch,
     CrudAutocomplete,
     CrudSavedQueriesButton,
+    CrudRefreshButton,
     CrudFilters,
     CrudFiltersAction,
     useCrud,