Assign button change

src/components/FormModel.vue

@@ -10,6 +10,7 @@ import { useValidator } from 'src/composables/useValidator';
 import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
 import VnConfirm from './ui/VnConfirm.vue';
+import { tMobile } from 'src/composables/tMobile';
 
 const quasar = useQuasar();
 const state = useState();
@@ -43,6 +44,10 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    defaultButtons: {
+        type: Object,
+        default: () => {},
+    },
     autoLoad: {
         type: Boolean,
         default: false,
@@ -119,7 +124,19 @@ const hasChanges = ref(!$props.observeFormChanges);
 const originalData = ref({ ...$props.formInitialData });
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
-
+const defaultButtons = computed(() => ({
+    save: {
+        color: 'primary',
+        icon: 'restart_alt',
+        label: 'globals.save',
+    },
+    reset: {
+        color: 'primary',
+        icon: 'save',
+        label: 'globals.reset',
+    },
+    ...$props.defaultButtons,
+}));
 const startFormWatcher = () => {
     watch(
         () => formData.value,
@@ -131,10 +148,6 @@ const startFormWatcher = () => {
     );
 };
 
-function tMobile(...args) {
-    if (!quasar.platform.is.mobile) return t(...args);
-}
-
 async function fetch() {
     const { data } = await axios.get($props.url, {
         params: { filter: JSON.stringify($props.filter) },
@@ -233,21 +246,21 @@ watch(formUrl, async () => {
             <QBtnGroup push class="q-gutter-x-sm">
                 <slot name="moreActions" />
                 <QBtn
-                    :label="tMobile('globals.reset')"
+                    :label="tMobile(defaultButtons.reset.label)"
-                    color="primary"
+                    :color="defaultButtons.reset.color"
-                    icon="restart_alt"
+                    :icon="defaultButtons.reset.icon"
                     flat
                     @click="reset"
                     :disable="!hasChanges"
-                    :title="t('globals.reset')"
+                    :title="t(defaultButtons.reset.label)"
                 />
                 <QBtn
-                    :label="tMobile('globals.save')"
+                    :label="tMobile(defaultButtons.save.label)"
-                    color="primary"
+                    :color="defaultButtons.save.color"
-                    icon="save"
+                    :icon="defaultButtons.save.icon"
                     @click="save"
                     :disable="!hasChanges"
-                    :title="t('globals.save')"
+                    :title="t(defaultButtons.save.label)"
                 />
             </QBtnGroup>
         </div>

src/i18n/en/index.js

@@ -31,6 +31,7 @@ export default {
         close: 'Close',
         cancel: 'Cancel',
         confirm: 'Confirm',
+        assign: 'Assign',
         back: 'Back',
         yes: 'Yes',
         no: 'No',

src/i18n/es/index.js

@@ -31,6 +31,7 @@ export default {
         close: 'Cerrar',
         cancel: 'Cancelar',
         confirm: 'Confirmar',
+        assign: 'Asignar',
         back: 'Volver',
         yes: 'Si',
         no: 'No',
@@ -881,6 +882,7 @@ export default {
             model: 'Modelo',
             serialNumber: 'Número de serie',
             removePDA: 'Desasignar PDA',
+            assignPDA: 'Asignar PDA',
         },
         create: {
             name: 'Nombre',

src/pages/Worker/Card/WorkerPda.vue

@@ -2,11 +2,9 @@
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { onMounted, ref, computed } from 'vue';
-
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { useRole } from 'src/composables/useRole';
@@ -77,7 +75,9 @@ onMounted(async () => await fetchCurrentDeviceRef.value.fetch());
             :url-create="`Workers/${route.params.id}/allocatePDA`"
             model="DeviceProductionUser"
             :form-initial-data="newPDA"
+            :default-actions="true"
             auto-load
+            :default-buttons="{ save: { label: 'globals.assign', color: 'primary' } }"
             @on-data-saved="(_, data) => setCurrentPDA(data)"
         >
             <template #form="{ data }">