@drax/crud-vue 2.6.0 → 2.8.0

package/src/components/CrudListTable.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type {PropType} from 'vue'
+import {useAuth} from '@drax/identity-vue'
+import CrudSearch from "./CrudSearch.vue";
+import {useCrud} from "../composables/UseCrud";
+import CrudExportButton from "./buttons/CrudExportButton.vue";
+import CrudImportButton from "./buttons/CrudImportButton.vue";
+import CrudCreateButton from "./buttons/CrudCreateButton.vue";
+import CrudUpdateButton from "./buttons/CrudUpdateButton.vue";
+import CrudDeleteButton from "./buttons/CrudDeleteButton.vue";
+import CrudViewButton from "./buttons/CrudViewButton.vue";
+import CrudGroupByButton from "./buttons/CrudGroupByButton.vue";
+import CrudColumnsButton from "./buttons/CrudColumnsButton.vue";
+import CrudExportList from "./CrudExportList.vue";
+import type {IEntityCrud} from "@drax/crud-share";
+import {useI18n} from "vue-i18n";
+import CrudFilters from "./CrudFilters.vue";
+import { useCrudColumns } from "../composables/UseCrudColumns";
+import CrudFiltersDynamic from "./CrudFiltersDynamic.vue";
+import CrudFiltersAction from "./CrudFiltersAction.vue";
+
+const {t, te} = useI18n()
+const {hasPermission} = useAuth()
+
+const {entity} = defineProps({
+  entity: {type: Object as PropType<IEntityCrud>, required: true},
+})
+
+const {
+  loading, itemsPerPage, page, sortBy, search, totalItems, items,
+  doPaginate, filters, applyFilters, clearFilters, paginationError
+} = useCrud(entity)
+
+// Usar el composable de columnas
+const { filteredHeaders } = useCrudColumns(entity)
+
+
+defineExpose({
+  doPaginate
+});
+
+defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
+
+</script>
+
+<template>
+  <v-data-table-server
+      :density="entity.tableDensity"
+      :striped="entity.tableStriped"
+      :header-props="entity.headerProps"
+      v-if="hasPermission(entity.permissions.view)"
+      v-model:items-per-page="itemsPerPage"
+      :items-per-page-options="[5, 10, 20, 50]"
+      v-model:page="page"
+      v-model:sort-by="sortBy"
+      :headers="filteredHeaders"
+      :items="items"
+      :items-length="totalItems"
+      :loading="loading"
+      :search="search"
+      :multi-sort="false"
+      item-value="name"
+      @update:options="doPaginate"
+  >
+
+    <template v-slot:no-data>
+      <v-alert
+          v-if="paginationError"
+          variant="tonal"
+          class="w-100 ma-2"
+          style="width: 100%; min-width: 100%"
+          prominent
+          type="error"
+          :text="te(paginationError) ? t(paginationError) : paginationError"
+      />
+      <v-alert v-else variant="tonal"  class="w-100 ma-2 " type="info" :text="te('crud.noData') ? t('crud.noData') : 'No data' " />
+    </template>
+
+    <template v-slot:bottom>
+      <v-data-table-footer :class="entity.footerClass"
+                           :items-per-page-options="[5, 10, 20, 50]"
+      ></v-data-table-footer>
+    </template>
+
+    <template v-slot:top>
+      <v-toolbar :class="entity.toolbarClass" :density="entity.toolbarDensity">
+        <v-toolbar-title>
+          {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
+        </v-toolbar-title>
+        <v-spacer></v-spacer>
+
+        <slot name="toolbar">
+
+        </slot>
+
+        <crud-import-button
+            :entity="entity"
+            @import="(v:any) => $emit('import', v)"
+        />
+
+        <crud-export-button
+            :entity="entity"
+            @export="(v:any) => $emit('export',v)"
+        />
+
+        <crud-group-by-button
+            v-if="entity.isGroupable"
+            :entity="entity"
+        />
+
+        <crud-columns-button
+            v-if="entity.isColumnSelectable"
+            :entity="entity"
+        />
+
+        <crud-create-button
+            v-if="entity.isCreatable"
+            :entity="entity"
+            @click="$emit('create')"
+        />
+
+      </v-toolbar>
+
+      <crud-export-list
+          :entity="entity"
+      />
+
+      <v-card variant="flat">
+        <v-card-text v-if="entity.searchEnable">
+          <crud-search
+              v-model="search"
+          />
+        </v-card-text>
+
+        <v-card-text class="pt-0">
+          <slot name="filters" v-bind="{filters}"></slot>
+
+          <v-card variant="flat" v-if="!$slots.filters">
+
+            <crud-filters
+                v-if="entity.filtersEnable"
+                :entity="entity"
+                v-model="filters"
+                :auto-filter="!entity.filterButtons"
+                @clearFilter="clearFilters()"
+                @applyFilter="applyFilters()"
+            >
+
+              <template v-for="iFilter in entity.filters"
+                        :key="iFilter.name"
+                        v-slot:[`filter.${iFilter.name}`]="{filter, filterIndex}"
+              >
+                <slot v-if="$slots[`filter.${iFilter.name}`]"
+                      :name="`filter.${iFilter.name}`"
+                      v-bind="{filter, filterIndex}"
+                />
+              </template>
+            </crud-filters>
+
+            <crud-filters-dynamic
+                v-if="entity.dynamicFiltersEnable"
+                :entity="entity"
+                v-model="filters"
+                :auto-filter="!entity.filterButtons"
+                @clearFilter="clearFilters()"
+                @applyFilter="applyFilters()"
+            >
+            </crud-filters-dynamic>
+
+            <crud-filters-action v-if="entity.filterButtons"
+                                 :entity="entity"
+                                 @clearFilter="clearFilters()"
+                                 @applyFilter="applyFilters()"
+            ></crud-filters-action>
+          </v-card>
+
+        </v-card-text>
+
+      </v-card>
+
+      <v-divider></v-divider>
+
+
+
+    </template>
+
+
+    <template v-for="header in entity.headers" :key="header.key" v-slot:[`item.${header.key}`]="{item, value}">
+      <slot v-if="$slots[`item.${header.key}`]" :name="`item.${header.key}`" v-bind="{item, value}">
+        {{ value }}
+      </slot>
+    </template>
+
+
+    <template v-slot:item.actions="{item}">
+
+      <slot name="item.actions" v-bind="{item}">
+      </slot>
+
+      <crud-view-button
+          v-if="entity.isViewable && hasPermission(entity.permissions.view)"
+          @click="$emit('view', item)"
+      />
+
+      <crud-update-button
+          v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
+          @click="$emit('edit', item)"
+      />
+
+      <crud-delete-button
+          v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
+          @click="$emit('delete', item)"
+      />
+
+    </template>
+
+  </v-data-table-server>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/CrudSearch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
 import {debounce} from "@drax/common-front"
-import {ref, defineModel, watch} from "vue"
+import {ref, watch} from "vue"
 
 
 const {t} = useI18n()

package/src/components/buttons/CrudCreateOnTheFlyButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useI18n} from "vue-i18n";
-import {defineProps, type PropType, ref} from "vue";
+import { type PropType, ref} from "vue";
 import type {IEntityCrud} from "@drax/crud-share";
 import CrudForm from "../CrudForm.vue";
 import CrudDialog from "../CrudDialog.vue";

package/src/composables/UseCrud.ts

@@ -1,13 +1,22 @@
-import type {IDraxPaginateResult, IEntityCrud} from "@drax/crud-share";
+import type {
+    IDraxFieldFilter,
+    IDraxPaginateResult,
+    IEntityCrud,
+    IEntityCrudFilter,
+} from "@drax/crud-share";
 import {useCrudStore} from "../stores/UseCrudStore";
 import {computed, nextTick, toRaw} from "vue";
 import getItemId from "../helpers/getItemId";
 import {useI18n} from "vue-i18n";
+import {useRouter} from "vue-router";
+import type {IEntityCrudFilterDynamic} from "@drax/crud-share/types/interfaces/IEntityCrudFilterDynamic";
 
 export function useCrud(entity: IEntityCrud) {
 
     const store = useCrudStore(entity?.name)
 
+    const router = useRouter();
+
     const {t: $t, te: $te} = useI18n()
 
     const exportError = computed({
@@ -33,6 +42,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setDialog(value)
         }
     })
+
     const operation = computed({
         get() {
             return store.operation
@@ -40,6 +50,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setOperation(value)
         }
     })
+
     const form = computed({
         get() {
             return store.form
@@ -47,6 +58,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setForm(value)
         }
     })
+
     const formValid = computed({
         get() {
             return store.formValid
@@ -54,6 +66,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setFormValid(value)
         }
     })
+
     const notify = computed({
         get() {
             return store.notify
@@ -61,6 +74,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setNotify(value)
         }
     })
+
     const error = computed({
         get() {
             return store.error
@@ -68,6 +82,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setError(value)
         }
     })
+
     const message = computed({
         get() {
             return store.message
@@ -75,6 +90,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setMessage(value)
         }
     })
+
     const loading = computed({
         get() {
             return store.loading
@@ -82,6 +98,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setLoading(value)
         }
     })
+
     const itemsPerPage = computed({
         get() {
             return store.itemsPerPage
@@ -89,6 +106,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setItemsPerPage(value)
         }
     })
+
     const page = computed({
         get() {
             return store.page
@@ -96,6 +114,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setPage(value)
         }
     })
+
     const sortBy = computed({
         get() {
             return store.sortBy
@@ -103,6 +122,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setSortBy(value)
         }
     })
+
     const search = computed({
         get() {
             return store.search
@@ -110,6 +130,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setSearch(value)
         }
     })
+
     const totalItems = computed({
         get() {
             return store.totalItems
@@ -117,6 +138,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setTotalItems(value)
         }
     })
+
     const items = computed({
         get() {
             return store.items
@@ -124,6 +146,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setItems(value)
         }
     })
+
     const exportFiles = computed({
         get() {
             return store.exportFiles
@@ -131,6 +154,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setExportFiles(value)
         }
     })
+
     const exportLoading = computed({
         get() {
             return store.exportLoading
@@ -138,6 +162,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setExportLoading(value)
         }
     })
+
     const exportListVisible = computed({
         get() {
             return store.exportListVisible
@@ -145,6 +170,7 @@ export function useCrud(entity: IEntityCrud) {
             store.setExportListVisible(value)
         }
     })
+
     const filters = computed({
         get() {
             return store.filters
@@ -153,6 +179,24 @@ export function useCrud(entity: IEntityCrud) {
         }
     })
 
+    const prepareDynamicFilters = computed(() => {
+        return store.dynamicFilters.map((filter: IEntityCrudFilterDynamic) => {
+            return {
+                field: filter.name,
+                operator: filter.operator,
+                value: filter.value
+            }
+        }) as IDraxFieldFilter[]
+    })
+
+
+    const getAllFilters = computed(() =>{
+        return [
+            ...store.filters,
+            ...prepareDynamicFilters.value
+        ]  as IDraxFieldFilter[]
+    })
+
 
     async function doPaginate() {
         store.setLoading(true)
@@ -165,7 +209,7 @@ export function useCrud(entity: IEntityCrud) {
                 orderBy: store.sortBy[0]?.key,
                 order: store.sortBy[0]?.order,
                 search: store.search,
-                filters: store.filters
+                filters: getAllFilters.value
             })
             store.setItems(r.items)
             store.setTotalItems(r.total)
@@ -204,7 +248,7 @@ export function useCrud(entity: IEntityCrud) {
                 orderBy: store.sortBy[0]?.key,
                 order: store.sortBy[0]?.order,
                 search: store.search,
-                filters: store.filters
+                filters: getAllFilters.value
             })
 
             if (r && r.url) {
@@ -325,6 +369,9 @@ export function useCrud(entity: IEntityCrud) {
                 await doPaginate()
                 closeDialog()
                 store.showMessage("Entity created successfully!")
+                if(entity.redirectOnCreate){
+                    router.push(entity.redirectOnCreate(item))
+                }
                 return {status: 'created', item: item}
             }
             throw new Error("provider.create not implemented")
@@ -395,7 +442,17 @@ export function useCrud(entity: IEntityCrud) {
     }
 
     function prepareFilters() {
-        store.setFilters(entity.formFilters)
+
+        const staticFilters : IDraxFieldFilter[] = entity.filters.map(
+            (filter: IEntityCrudFilter) =>
+                ({
+                    field: filter.name,
+                    value: filter.default ? filter.default : null,
+                    operator: (filter.operator ? filter.operator : 'eq')
+                })
+        ) as IDraxFieldFilter[]
+
+        store.setFilters(staticFilters)
     }
 
     async function clearFilters() {

package/src/index.ts

@@ -12,6 +12,7 @@ import EntityCombobox from "./components/combobox/EntityCombobox.vue";
 import {useCrudStore} from "./stores/UseCrudStore";
 import {useEntityStore} from "./stores/UseEntityStore";
 import {useCrud} from "./composables/UseCrud";
+import {useFilterIcon} from "./composables/UseFilterIcon";
 import {useFormUtils} from "./composables/UseFormUtils";
 import {useInputErrorI18n} from "./composables/UseInputErrorI18n";
 import {EntityCrud} from "./EntityCrud";
@@ -32,6 +33,7 @@ export {
     useFormUtils,
     useCrudStore,
     useInputErrorI18n,
+    useFilterIcon,
     EntityCrud,
     useEntityStore,
     EntityCombobox

package/src/stores/UseCrudStore.ts

@@ -13,6 +13,7 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
             error: '' as string,
             paginationError: '' as string,
             filters: [] as IDraxFieldFilter[],
+            dynamicFilters: [] as IDraxFieldFilter[],
             items: [] as any[],
             totalItems: 0 as number,
             itemsPerPage: 10 as number,
@@ -134,6 +135,21 @@ export const useCrudStore = (id: string = 'entity') => defineStore('CrudStore'+i
                 this.filters[index].value = value
             }
         },
+        addDynamicFilter(filter: IDraxFieldFilter) {
+            this.dynamicFilters.push(filter)
+        },
+        removeDynamicFilter(index: number) {
+            this.dynamicFilters.splice(index, 1)
+        },
+        setDynamicFilters(filters: IDraxFieldFilter[]) {
+            this.dynamicFilters = filters
+        },
+        setDynamicFilterValue(name:string, value:any) {
+            const index = this.getFilterIndex(name)
+            if (index >= 0) {
+                this.dynamicFilters[index].value = value
+            }
+        },
         setVisibleColumns(columns: string[]) {
             this.visibleColumns = columns
         },