feat: refs #8406 "add" button on a bottom bar in CrudModel

src/components/CrudModel.vue

@@ -50,7 +50,7 @@ const $props = defineProps({
     },
     insertOnLoad: {
         type: Boolean,
-        default: true,
+        default: false,
     },
     defaultSave: {
         type: Boolean,
@@ -64,6 +64,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    defaultAdd: {
+        type: Boolean,
+        default: false,
+    },
     selected: {
         type: Object,
         default: null,
@@ -96,7 +100,6 @@ const saveButtonRef = ref(null);
 const watchChanges = ref();
 let isNotEqual = ref(false);
 let isLastRowEmpty = ref(false);
-const isFirstFetch = ref(true);
 const formUrl = computed(() => $props.url);
 const rowsContainer = ref(null);
 
@@ -134,10 +137,9 @@ async function fetch(data) {
     const rows = keyData ? data[keyData] : data;
     resetData(rows);
     emit('onFetch', rows);
-    if (isFirstFetch.value && $props.insertOnLoad) {
+    if ($props.insertOnLoad) {
         await insert();
     }
-    isFirstFetch.value = false;
     return rows;
 }
 
@@ -338,9 +340,16 @@ function removeIndexField(data) {
 }
 
 async function handleTab(event) {
-        const focusableElements = rowsContainer.value?.querySelectorAll(
-        'input, select, textarea, [tabindex]:not([tabindex="-1"]), .q-field__native, .q-checkbox__input'
+    if (event.target.classList.contains('q-checkbox__input') || 
+        event.target.type === 'checkbox' ||
+        event.target.closest('.q-checkbox')) {
+        return;
+    }
+    
+    const focusableElements = rowsContainer.value?.querySelectorAll(
+        'input:not([type="checkbox"]), select, textarea, [tabindex]:not([tabindex="-1"]):not(.q-checkbox__input), .q-field__native'
     );
+    
     if (!focusableElements || focusableElements.length === 0) return;
 
     const lastElement = focusableElements[focusableElements.length - 1];
@@ -348,7 +357,7 @@ async function handleTab(event) {
         event.preventDefault();
         await insert();
         await nextTick();
-        const newElements = rowsContainer.value.querySelectorAll('input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        const newElements = rowsContainer.value.querySelectorAll('input:not([type="checkbox"]), select, textarea, [tabindex]:not([tabindex="-1"]):not(.q-checkbox__input)');
         if (newElements.length > focusableElements.length) {
             newElements[newElements.length - 1].focus();
         }
@@ -376,7 +385,7 @@ watch(formUrl, async () => {
         v-bind="$attrs"
     >
         <template #body v-if="formData">
-            <div ref="rowsContainer" @keydown.tab.prevent="handleTab">
+            <div ref="rowsContainer" @keydown.tab="handleTab">
                 <slot
                     name="body"
                     :rows="formData"
@@ -467,4 +476,16 @@ watch(formUrl, async () => {
         :label="t && t('globals.pleaseWait')"
         color="primary"
     />
+    <div class=" bottomButton" v-if="defaultAdd">
+        <QBtn
+            @click="insert()"
+            class="cursor-pointer fill-icon"
+            color="primary"
+            icon="add_circle"
+            size="md"
+            round
+            flat
+            v-shortcut="'+'"
+        />
+    </div>
 </template>

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -138,6 +138,8 @@ const columns = computed(() => [
         :filter="developmentsFilter"
         ref="claimDevelopmentForm"
         :data-required="{ claimFk: route.params.id }"
+        :defaultAdd="true"
+        :insert-on-load="true"
         v-model:selected="selected"
         @save-changes="$router.push(`/claim/${route.params.id}/action`)"
         :default-save="false"

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -89,7 +89,8 @@ onBeforeMount(async () => await setTaxableBase());
         data-key="InvoiceInDueDays"
         url="InvoiceInDueDays"
         :filter="filter"
-        :insert-on-load="false"
+        :insert-on-load="true"
+        :default-add="true"
         auto-load
         :data-required="{ invoiceInFk: invoiceId }"
         v-model:selected="rowsSelected"

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -89,7 +89,9 @@ const columns = computed(() => [
             url="InvoiceInIntrastats"
             auto-load
             :data-required="{ invoiceInFk: invoiceInId }"
+            :default-add="true"
             :filter="filter"
+            :insert-on-load="true"
             v-model:selected="rowsSelected"
             @on-fetch="(data) => (invoceInIntrastat = data)"
         >

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -187,6 +187,8 @@ function setCursor(ref) {
         url="InvoiceInTaxes"
         :filter="filter"
         :data-required="{ invoiceInFk: $route.params.id }"
+        :default-add="true"
+        :insert-on-load="true"
         auto-load
         v-model:selected="rowsSelected"
         :go-to="`/invoice-in/${$route.params.id}/due-day`"

src/pages/Item/Card/ItemBarcode.vue

@@ -51,6 +51,7 @@ const submit = async (rows) => {
             <CrudModel
                 :data-required="{ itemFk: route.params.id }"
                 :default-remove="false"
+                :insert-on-load="true"
                 :filter="{
                     fields: ['id', 'itemFk', 'code'],
                     where: { itemFk: route.params.id },

src/pages/Item/Card/ItemTax.vue

@@ -58,7 +58,6 @@ const submitTaxes = async (data) => {
         :save-fn="submitTaxes"
         :filter="taxesFilter"
         :default-remove="false"
-        :insert-on-load="false"
         data-key="ItemTax"
         model="ItemTax"
         ref="ItemTaxRef"

src/pages/Ticket/Card/TicketService.vue

@@ -181,6 +181,7 @@ function beforeSave(data) {
         model="TicketService"
         :filter="crudModelFilter"
         :data-required="crudModelRequiredData"
+        :default-add="true"
         auto-load
         v-model:selected="selected"
         :order="['description ASC']"

src/pages/Worker/Card/WorkerBalance.vue

@@ -99,6 +99,10 @@ const columns = computed(() => [
                 workerFk: entityId,
             },
         }"
+        :crud-model="{
+            insertOnLoad: false,
+        }"
+
         order="paymentDate DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerFormation.vue

@@ -128,6 +128,9 @@ const columns = computed(() => [
                 workerFk: entityId,
             },
         }"
+        :crud-model="{
+            insertOnLoad: false,
+        }"
         order="id DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerMedical.vue

@@ -109,6 +109,9 @@ const columns = [
                 workerFk: entityId,
             },
         }"
+        :crud-model="{
+            insertOnLoad: false,
+        }"
         order="date DESC"
         :columns="columns"
         auto-load

src/pages/Worker/Card/WorkerPda.vue

@@ -170,6 +170,9 @@ function isSigned(row) {
             'row-key': 'deviceProductionFk',
             selection: 'multiple',
         }"
+        :crud-model="{
+            insertOnLoad: false,
+        }"
         :table-filter="{ hiddenTags: ['userFk'] }"
     >
         <template #moreBeforeActions>