Add change state dropdown action

src/components/common/VnSelect.vue

@@ -1,6 +1,5 @@
 <script setup>
-import { ref, toRefs, computed, watch } from 'vue';
-import { onMounted } from 'vue';
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
@@ -58,6 +57,10 @@ const $props = defineProps({
         type: [Number, String],
         default: '30',
     },
+    focusOnMount: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const { t } = useI18n();
@@ -146,6 +149,10 @@ watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
 });
+
+onMounted(async () => {
+    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
+});
 </script>
 
 <template>

src/pages/Ticket/Card/TicketSale.vue

@@ -31,6 +31,7 @@ const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
 const salesDataRef = ref(null);
 const editPriceProxyRef = ref(null);
+const stateBtnDropdownRef = ref(null);
 
 const arrayData = useArrayData('ticketData');
 const { store } = arrayData;
@@ -40,6 +41,7 @@ const isLocked = ref(false);
 const isTicketEditable = ref(false);
 const sales = ref([]);
 const itemsWithNameOptions = ref([]);
+const editableStatesOptions = ref([]);
 const selectedSales = ref([]);
 const mana = ref(null);
 const manaCode = ref('mana');
@@ -336,6 +338,7 @@ const goToLog = (saleId) => {
 
 const changeTicketState = async (val) => {
     try {
+        stateBtnDropdownRef.value.hide();
         const params = { ticketFk: route.params.id, code: val };
         await axios.post('Tickets/state', params);
         notify('globals.dataSaved', 'positive');
@@ -397,9 +400,38 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (itemsWithNameOptions = data)"
     />
+    <FetchData
+        url="States/editableStates"
+        :filter="{ fields: ['code', 'name', 'id', 'alertLevel'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (editableStatesOptions = data)"
+    />
     <VnSubToolbar>
         <template #st-actions>
             <QBtnGroup push class="q-gutter-x-sm" flat>
+                <QBtn
+                    :label="t('ticketSale.ok')"
+                    color="primary"
+                    :disable="!isTicketEditable || ticketState === 'OK'"
+                    @click="changeTicketState('OK')"
+                >
+                    <QTooltip>{{ t(`Change ticket state to 'Ok'`) }}</QTooltip>
+                </QBtn>
+                <QBtnDropdown
+                    ref="stateBtnDropdownRef"
+                    color="primary"
+                    :label="t('ticketSale.state')"
+                >
+                    <VnSelect
+                        :options="editableStatesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        hide-dropdown-icon
+                        focus-on-mount
+                        @update:model-value="changeTicketState"
+                    />
+                </QBtnDropdown>
                 <QBtn
                     color="primary"
                     icon="delete"
@@ -414,14 +446,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 >
                     <QTooltip>{{ t('Remove lines') }}</QTooltip>
                 </QBtn>
-                <QBtn
-                    :label="t('ticketSale.ok')"
-                    color="primary"
-                    :disable="!isTicketEditable || ticketState === 'OK'"
-                    @click="changeTicketState('OK')"
-                >
-                    <QTooltip>{{ t(`Change ticket state to 'Ok'`) }}</QTooltip>
-                </QBtn>
             </QBtnGroup>
         </template>
     </VnSubToolbar>

src/pages/Ticket/locale/en.yml

@@ -17,3 +17,4 @@ ticketSale:
     noVisible: Not visible
     hasComponentLack: Component lack
     ok: Ok
+    state: State

src/pages/Ticket/locale/es.yml

@@ -19,3 +19,4 @@ ticketSale:
     noVisible: No visible
     hasComponentLack: Faltan componentes
     ok: Ok
+    state: Estado