@drax/crud-vue 3.46.0 → 3.48.0

package/src/components/CrudImportList.vue

@@ -18,19 +18,20 @@ const {
 <template>
   <v-card
       v-if="importListVisible"
+      id="crud-import-list"
       :loading="importLoading"
-      class="ma-3" density="compact" variant="outlined" color="secondary"
+      class="crud-import-list ma-3" density="compact" variant="outlined" color="secondary"
   >
-    <v-card-title>
+    <v-card-title id="crud-import-list-title" class="crud-import-list__title">
       {{ t('action.imports') }}
     </v-card-title>
-    <v-card-text>
-      <v-alert v-if="importError" type="error">
+    <v-card-text id="crud-import-list-content" class="crud-import-list__content">
+      <v-alert v-if="importError" id="crud-import-list-error" class="crud-import-list__error" type="error">
         {{ t('error.crud.import') }}
       </v-alert>
       <template v-else>
         <slot name="import-table" :importFiles="importFiles">
-          <v-table density="compact">
+          <v-table id="crud-import-list-table" class="crud-import-list__table" density="compact">
             <thead>
             <tr>
               <th> {{t('crud.import.link')}}</th>
@@ -41,17 +42,17 @@ const {
             </tr>
             </thead>
             <tbody>
-            <tr v-for="importFile in importFiles">
-              <td>
-                <a v-if="importFile.url" :href="importFile.url" target="_blank">
+            <tr v-for="(importFile, index) in importFiles" :id="`crud-import-list-row-${index}`" class="crud-import-list__row">
+              <td class="crud-import-list__url-cell">
+                <a v-if="importFile.url" :id="`crud-import-list-link-${index}`" class="crud-import-list__link" :href="importFile.url" target="_blank">
                   {{t('crud.import.report')}}
                 </a>
-                <span v-else>-</span>
+                <span v-else class="crud-import-list__empty-link">-</span>
               </td>
-              <td>{{ importFile.rowCount }}</td>
-              <td>{{ importFile.successCount ?? '-' }}</td>
-              <td>{{ importFile.errorCount ?? '-' }}</td>
-              <td>{{ importFile.time }}</td>
+              <td class="crud-import-list__row-count-cell">{{ importFile.rowCount }}</td>
+              <td class="crud-import-list__success-count-cell">{{ importFile.successCount ?? '-' }}</td>
+              <td class="crud-import-list__error-count-cell">{{ importFile.errorCount ?? '-' }}</td>
+              <td class="crud-import-list__time-cell">{{ importFile.time }}</td>
             </tr>
             </tbody>
           </v-table>
@@ -59,10 +60,10 @@ const {
       </template>
     </v-card-text>
 
-    <v-card-actions>
+    <v-card-actions id="crud-import-list-actions" class="crud-import-list__actions">
       <v-spacer></v-spacer>
-      <v-btn @click="importFiles = []" :loading="importLoading">{{ t('action.clear') }}</v-btn>
-      <v-btn @click="importListVisible = false">{{ t('action.close') }}</v-btn>
+      <v-btn id="crud-import-list-clear-button" class="crud-import-list__clear-button" @click="importFiles = []" :loading="importLoading">{{ t('action.clear') }}</v-btn>
+      <v-btn id="crud-import-list-close-button" class="crud-import-list__close-button" @click="importListVisible = false">{{ t('action.close') }}</v-btn>
     </v-card-actions>
   </v-card>
 </template>

package/src/components/CrudList.vue

@@ -48,6 +48,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
 <template>
   <v-data-table-server
+      :id="`crud-list-table-${entity.name}`"
+      class="crud-list-table"
       :density="entity.tableDensity"
       :striped="entity.tableStriped"
       :header-props="entity.headerProps"
@@ -69,25 +71,26 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
     <template v-slot:no-data>
       <v-alert
           v-if="paginationError"
+          id="crud-list-pagination-error"
           variant="tonal"
-          class="w-100 ma-2"
+          class="crud-list-table__pagination-error 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' " />
+      <v-alert v-else id="crud-list-no-data" variant="tonal"  class="crud-list-table__no-data 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"
+      <v-data-table-footer id="crud-list-footer" :class="['crud-list-table__footer', 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>
+      <v-toolbar id="crud-list-toolbar" :class="['crud-list-table__toolbar', entity.toolbarClass]" :density="entity.toolbarDensity">
+        <v-toolbar-title id="crud-list-title" class="crud-list-table__title">
           {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
         </v-toolbar-title>
         <v-spacer></v-spacer>
@@ -96,30 +99,42 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
         </slot>
 
         <crud-import-button
+            id="crud-list-import-button"
+            class="crud-list-table__import-button"
             :entity="entity"
             @import="(file:any, format:any) => $emit('import', file, format)"
         />
 
         <crud-export-button
+            id="crud-list-export-button"
+            class="crud-list-table__export-button"
             :entity="entity"
             @export="(v:any) => $emit('export',v)"
         />
 
         <crud-group-by-button
+            id="crud-list-group-by-button"
+            class="crud-list-table__group-by-button"
             v-if="entity.isGroupable"
             :entity="entity"
         />
 
 
         <crud-filter-button
+            id="crud-list-filter-button"
+            class="crud-list-table__filter-button"
             :entity="entity" />
 
         <crud-columns-button
+            id="crud-list-columns-button"
+            class="crud-list-table__columns-button"
             v-if="entity.isColumnSelectable"
             :entity="entity"
         />
 
         <crud-create-button
+            id="crud-list-create-button"
+            class="crud-list-table__create-button"
             v-if="entity.isCreatable"
             :entity="entity"
             @click="$emit('create')"
@@ -127,32 +142,36 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
       </v-toolbar>
 
-      <crud-export-list :entity="entity">
+      <crud-export-list id="crud-list-export-list" class="crud-list-table__export-list" :entity="entity">
         <template #export-table="{ exportFiles }">
           <slot name="export-table" :exportFiles="exportFiles" />
         </template>
       </crud-export-list>
 
-      <crud-import-list :entity="entity">
+      <crud-import-list id="crud-list-import-list" class="crud-list-table__import-list" :entity="entity">
         <template #import-table="{ importFiles }">
           <slot name="import-table" :importFiles="importFiles" />
         </template>
       </crud-import-list>
 
-      <v-card variant="flat">
-        <v-card-text v-if="entity.searchEnable">
+      <v-card id="crud-list-controls" class="crud-list-table__controls" variant="flat">
+        <v-card-text v-if="entity.searchEnable" id="crud-list-search-section" class="crud-list-table__search-section">
           <crud-search
+              id="crud-list-search"
+              class="crud-list-table__search"
               v-model="search"
           />
         </v-card-text>
 
-        <v-card-text class="pt-0">
+        <v-card-text id="crud-list-filters-section" class="crud-list-table__filters-section pt-0">
           <slot name="filters" v-bind="{filters}"></slot>
 
-          <v-card variant="flat" v-if="!$slots.filters">
+          <v-card id="crud-list-default-filters" class="crud-list-table__default-filters" variant="flat" v-if="!$slots.filters">
 
             <crud-filters
                 v-if="entity.filtersEnable"
+                id="crud-list-filters"
+                class="crud-list-table__filters"
                 :entity="entity"
                 v-model="filters"
                 :auto-filter="!entity.filterButtons"
@@ -173,6 +192,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
             <crud-filters-dynamic
                 v-if="entity.dynamicFiltersEnable"
+                id="crud-list-dynamic-filters"
+                class="crud-list-table__dynamic-filters"
                 :entity="entity"
                 v-model="filters"
                 :auto-filter="!entity.filterButtons"
@@ -182,6 +203,8 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
             </crud-filters-dynamic>
 
             <crud-filters-action v-if="entity.filterButtons"
+                                 id="crud-list-filters-actions"
+                                 class="crud-list-table__filters-actions"
                                  :entity="entity"
                                  @clearFilter="clearFilters()"
                                  @applyFilter="applyFilters()"
@@ -192,7 +215,7 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
       </v-card>
 
-      <v-divider></v-divider>
+      <v-divider id="crud-list-toolbar-divider" class="crud-list-table__toolbar-divider"></v-divider>
 
 
 
@@ -213,16 +236,22 @@ defineEmits(['import', 'export', 'create', 'update', 'delete', 'view', 'edit'])
 
       <crud-view-button
           v-if="entity.isViewable && hasPermission(entity.permissions.view)"
+          :id="`crud-list-row-view-button-${index}`"
+          class="crud-list-table__row-view-button"
           @click="$emit('view', item, index)"
       />
 
       <crud-update-button
           v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
+          :id="`crud-list-row-update-button-${index}`"
+          class="crud-list-table__row-update-button"
           @click="$emit('edit', item, index)"
       />
 
       <crud-delete-button
           v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
+          :id="`crud-list-row-delete-button-${index}`"
+          class="crud-list-table__row-delete-button"
           @click="$emit('delete', item, index)"
       />
 

package/src/components/CrudListGallery.vue

@@ -54,45 +54,57 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="hasPermission(entity.permissions.view)" class="d-flex flex-column h-100 pb-4">
+  <div v-if="hasPermission(entity.permissions.view)" :id="`crud-list-gallery-${entity.name}`" class="crud-list-gallery d-flex flex-column h-100 pb-4">
     <!-- Toolbar -->
-    <v-toolbar :class="entity.toolbarClass" :density="entity.toolbarDensity" extended>
-      <v-toolbar-title>
+    <v-toolbar id="crud-list-gallery-toolbar" :class="['crud-list-gallery__toolbar', entity.toolbarClass]" :density="entity.toolbarDensity" extended>
+      <v-toolbar-title id="crud-list-gallery-title" class="crud-list-gallery__title">
         {{ te(`${entity.name.toLowerCase()}.crud`) ? t(`${entity.name.toLowerCase()}.crud`) : entity.name }}
       </v-toolbar-title>
       <v-spacer></v-spacer>
       <template v-slot:extension>
 
-        <v-row justify="end" class="px-2 border-t-sm" >
+        <v-row id="crud-list-gallery-toolbar-actions" justify="end" class="crud-list-gallery__toolbar-actions px-2 border-t-sm" >
 
           <slot name="toolbar-left">
           </slot>
 
           <crud-import-button
+              id="crud-list-gallery-import-button"
+              class="crud-list-gallery__import-button"
               :entity="entity"
               @import="(file:any, format:any) => $emit('import', file, format)"
           />
 
           <crud-export-button
+              id="crud-list-gallery-export-button"
+              class="crud-list-gallery__export-button"
               :entity="entity"
               @export="(v:any) => $emit('export',v)"
           />
 
           <crud-group-by-button
               v-if="entity.isGroupable"
+              id="crud-list-gallery-group-by-button"
+              class="crud-list-gallery__group-by-button"
               :entity="entity"
           />
 
           <crud-filter-button
+              id="crud-list-gallery-filter-button"
+              class="crud-list-gallery__filter-button"
               :entity="entity" />
 
           <crud-columns-button
               v-if="entity.isColumnSelectable"
+              id="crud-list-gallery-columns-button"
+              class="crud-list-gallery__columns-button"
               :entity="entity"
           />
 
           <crud-saved-queries-button
               v-if="entity.isSavedQueriesEnabled"
+              id="crud-list-gallery-saved-queries-button"
+              class="crud-list-gallery__saved-queries-button"
               :entity="entity"
           />
 
@@ -101,11 +113,15 @@ onMounted(() => {
 
           <crud-refresh-button
               v-if="entity.isRefreshable !== false"
+              id="crud-list-gallery-refresh-button"
+              class="crud-list-gallery__refresh-button"
               @click="doPaginate"
           />
 
           <crud-create-button
               v-if="entity.isCreatable"
+              id="crud-list-gallery-create-button"
+              class="crud-list-gallery__create-button"
               :entity="entity"
               @click="$emit('create')"
           />
@@ -121,6 +137,8 @@ onMounted(() => {
     </v-toolbar>
 
     <crud-export-list
+        id="crud-list-gallery-export-list"
+        class="crud-list-gallery__export-list"
         :entity="entity"
     >
       <template #export-table="{ exportFiles }">
@@ -129,6 +147,8 @@ onMounted(() => {
     </crud-export-list>
 
     <crud-import-list
+        id="crud-list-gallery-import-list"
+        class="crud-list-gallery__import-list"
         :entity="entity"
     >
       <template #import-table="{ importFiles }">
@@ -136,20 +156,24 @@ onMounted(() => {
       </template>
     </crud-import-list>
 
-    <v-card variant="flat">
-      <v-card-text v-if="entity.searchEnable">
+    <v-card id="crud-list-gallery-controls" class="crud-list-gallery__controls" variant="flat">
+      <v-card-text v-if="entity.searchEnable" id="crud-list-gallery-search-section" class="crud-list-gallery__search-section">
         <crud-search
+            id="crud-list-gallery-search"
+            class="crud-list-gallery__search"
             v-model="search"
         />
       </v-card-text>
 
-      <v-card-text class="pt-0">
+      <v-card-text id="crud-list-gallery-filters-section" class="crud-list-gallery__filters-section pt-0">
         <slot name="filters" v-bind="{filters}"></slot>
 
-        <v-card variant="flat" v-if="!$slots.filters">
+        <v-card id="crud-list-gallery-default-filters" class="crud-list-gallery__default-filters" variant="flat" v-if="!$slots.filters">
 
           <crud-filters
               v-if="entity.filtersEnable"
+              id="crud-list-gallery-filters"
+              class="crud-list-gallery__filters"
               :entity="entity"
               v-model="filters"
               :auto-filter="!entity.filterButtons"
@@ -170,6 +194,8 @@ onMounted(() => {
 
           <crud-filters-dynamic
               v-if="isDynamicFiltersEnable"
+              id="crud-list-gallery-dynamic-filters"
+              class="crud-list-gallery__dynamic-filters"
               :entity="entity"
               v-model="filters"
               :auto-filter="!entity.filterButtons"
@@ -179,6 +205,8 @@ onMounted(() => {
           </crud-filters-dynamic>
 
           <crud-filters-action v-if="entity.filterButtons"
+                               id="crud-list-gallery-filters-actions"
+                               class="crud-list-gallery__filters-actions"
                                :entity="entity"
                                @clearFilter="clearFilters()"
                                @applyFilter="applyFilters()"
@@ -189,44 +217,45 @@ onMounted(() => {
 
     </v-card>
 
-    <v-divider></v-divider>
+    <v-divider id="crud-list-gallery-controls-divider" class="crud-list-gallery__controls-divider"></v-divider>
 
     <!-- CONTENT GALLERY -->
-    <v-container fluid class="flex-grow-1 position-relative pa-4">
-      <v-overlay :model-value="loading" contained class="align-center justify-center bg-transparent" scrim="transparent"
+    <v-container id="crud-list-gallery-content" class="crud-list-gallery__content flex-grow-1 position-relative pa-4" fluid>
+      <v-overlay id="crud-list-gallery-loading-overlay" class="crud-list-gallery__loading-overlay align-center justify-center bg-transparent" :model-value="loading" contained scrim="transparent"
                  persistent z-index="4">
-        <v-progress-circular indeterminate color="primary"></v-progress-circular>
+        <v-progress-circular id="crud-list-gallery-loading" class="crud-list-gallery__loading" indeterminate color="primary"></v-progress-circular>
       </v-overlay>
 
       <v-alert
           v-if="paginationError"
+          id="crud-list-gallery-pagination-error"
           variant="tonal"
-          class="w-100 mb-4"
+          class="crud-list-gallery__pagination-error w-100 mb-4"
           prominent
           type="error"
           :text="te(paginationError) ? t(paginationError) : paginationError"
       />
-      <v-alert v-else-if="!loading && items.length === 0" variant="tonal" class="w-100 mb-4" type="info"
+      <v-alert v-else-if="!loading && items.length === 0" id="crud-list-gallery-no-data" variant="tonal" class="crud-list-gallery__no-data w-100 mb-4" type="info"
                :text="te('crud.noData') ? t('crud.noData') : 'No data'"/>
 
       <!-- GALLERY GRIDS -->
-      <v-row v-if="items.length > 0">
-        <v-col v-for="(item, index) in items" :key="item.id || item.uuid || item.name || Math.random()" cols="12" sm="6" md="4"
+      <v-row v-if="items.length > 0" id="crud-list-gallery-grid" class="crud-list-gallery__grid">
+        <v-col v-for="(item, index) in items" :id="`crud-list-gallery-item-column-${index}`" class="crud-list-gallery__item-column" :key="item.id || item.uuid || item.name || Math.random()" cols="12" sm="6" md="4"
                xl="3">
 
 
-            <v-card class="h-100 d-flex flex-column hover-card" elevation="2" border>
+            <v-card :id="`crud-list-gallery-item-card-${index}`" class="crud-list-gallery__item-card h-100 d-flex flex-column hover-card" elevation="2" border>
               <slot name="item" v-bind="{item}">
-              <v-card-text class="field-grid">
+              <v-card-text :id="`crud-list-gallery-item-fields-${index}`" class="crud-list-gallery__item-fields field-grid">
                 <template v-for="header in filteredHeaders.filter(h => h.key !=='actions')" :key="header.key">
 
-                  <div class="field-label font-weight-regular text-grey-darken-2">
+                  <div :id="`crud-list-gallery-item-field-label-${index}-${header.key}`" class="crud-list-gallery__item-field-label field-label font-weight-regular text-grey-darken-2">
                     {{
                       te(`${entity.name.toLowerCase()}.${header.key}`) ? t(`${entity.name.toLowerCase()}.${header.key}`) : (header.title || header.key)
                     }}
                   </div>
 
-                  <div class="field-value font-weight-medium">
+                  <div :id="`crud-list-gallery-item-field-value-${index}-${header.key}`" class="crud-list-gallery__item-field-value field-value font-weight-medium">
                     <slot v-if="$slots[`item.${header.key}`]" :name="`item.${header.key}`"
                           v-bind="{item, value: item[header.key]}">
                       {{ item[header.key] }}
@@ -240,24 +269,30 @@ onMounted(() => {
               </v-card-text>
               </slot>
 
-              <v-divider></v-divider>
+              <v-divider :id="`crud-list-gallery-item-divider-${index}`" class="crud-list-gallery__item-divider"></v-divider>
 
-              <v-card-actions class="bg-grey-lighten-4 py-2 px-4 d-flex justify-end flex-wrap gap-2">
+              <v-card-actions :id="`crud-list-gallery-item-actions-${index}`" class="crud-list-gallery__item-actions bg-grey-lighten-4 py-2 px-4 d-flex justify-end flex-wrap gap-2">
                 <slot name="item.actions" v-bind="{item, index}">
                 </slot>
 
                 <crud-view-button
                     v-if="entity.isViewable && hasPermission(entity.permissions.view)"
+                    :id="`crud-list-gallery-item-view-button-${index}`"
+                    class="crud-list-gallery__item-view-button"
                     @click="$emit('view', item, index)"
                 />
 
                 <crud-update-button
                     v-if="entity.isEditable && entity.isItemEditable(item) && hasPermission(entity.permissions?.update)"
+                    :id="`crud-list-gallery-item-update-button-${index}`"
+                    class="crud-list-gallery__item-update-button"
                     @click="$emit('edit', item, index)"
                 />
 
                 <crud-delete-button
                     v-if="entity.isDeletable && hasPermission(entity.permissions?.delete)"
+                    :id="`crud-list-gallery-item-delete-button-${index}`"
+                    class="crud-list-gallery__item-delete-button"
                     @click="$emit('delete', item, index)"
                 />
               </v-card-actions>
@@ -267,24 +302,27 @@ onMounted(() => {
     </v-container>
 
     <!-- FOOTER WITH ALIGNED PAGINATION -->
-    <v-divider></v-divider>
-    <div :class="['d-flex align-center justify-space-between flex-wrap px-4 py-3 bg-surface', entity.footerClass]">
-      <div class="d-flex align-center mb-2 mb-sm-0">
-        <span class="text-body-2 mr-2 text-white">{{
+    <v-divider id="crud-list-gallery-footer-divider" class="crud-list-gallery__footer-divider"></v-divider>
+    <div id="crud-list-gallery-footer" :class="['crud-list-gallery__footer d-flex align-center justify-space-between flex-wrap px-4 py-3 bg-surface', entity.footerClass]">
+      <div id="crud-list-gallery-items-per-page" class="crud-list-gallery__items-per-page d-flex align-center mb-2 mb-sm-0">
+        <span id="crud-list-gallery-items-per-page-label" class="crud-list-gallery__items-per-page-label text-body-2 mr-2 text-white">{{
             te('crud.itemsPerPage') ? t('crud.itemsPerPage') : 'Items per page:'
           }}</span>
         <v-select
+            id="crud-list-gallery-items-per-page-select"
             v-model="itemsPerPage"
             :items="[5, 10, 20, 50]"
             variant="outlined"
             density="compact"
             hide-details
-            class="pagination-select"
+            class="crud-list-gallery__items-per-page-select pagination-select"
             @update:model-value="doPaginate"
         ></v-select>
       </div>
 
       <v-pagination
+          id="crud-list-gallery-pagination"
+          class="crud-list-gallery__pagination"
           v-model="page"
           :length="Math.ceil(totalItems / itemsPerPage) || 1"
           :total-visible="5"