107 lines
3.1 KiB
Vue
107 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import axios from 'axios';
|
|
import { useDialogPluginComponent } from 'quasar';
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
|
|
const editableStates = ref([]);
|
|
const { t } = useI18n();
|
|
const showChangeStateDialog = ref(false);
|
|
const newState = ref(null);
|
|
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
|
const $props = defineProps({
|
|
selectedRows: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
const updateState = async () => {
|
|
try {
|
|
showChangeStateDialog.value = true;
|
|
const rowsToUpdate = $props.selectedRows.map(({ ticketFk }) =>
|
|
axios.post(`Tickets/state`, {
|
|
ticketFk,
|
|
code: newState.value,
|
|
})
|
|
);
|
|
await Promise.all(rowsToUpdate);
|
|
} catch (err) {
|
|
return err;
|
|
} finally {
|
|
dialogRef.value.hide({ type: 'refresh', refresh: true });
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog">
|
|
<FetchData
|
|
url="States/editableStates"
|
|
@on-fetch="(data) => (editableStates = data)"
|
|
auto-load
|
|
/>
|
|
<QCard class="q-pa-sm">
|
|
<QCardSection class="row items-center q-pb-none">
|
|
<QAvatar
|
|
:icon="icon"
|
|
color="primary"
|
|
text-color="white"
|
|
size="xl"
|
|
v-if="icon"
|
|
/>
|
|
<span class="text-h6 text-grey">{{
|
|
t('negative.detail.modal.changeState.title')
|
|
}}</span>
|
|
<QSpace />
|
|
<QBtn icon="close" flat round dense v-close-popup />
|
|
</QCardSection>
|
|
<QCardSection class="row items-center justify-center column items-stretch">
|
|
<span>{{ t('negative.detail.modal.changeState.title') }}</span>
|
|
<VnSelect
|
|
:label="t('negative.detail.modal.changeState.placeholder')"
|
|
v-model="newState"
|
|
:options="editableStates"
|
|
option-label="name"
|
|
option-value="code"
|
|
/>
|
|
</QCardSection>
|
|
<QCardActions align="right">
|
|
<QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
|
|
<QBtn
|
|
:label="t('globals.confirm')"
|
|
color="primary"
|
|
:disable="!newState"
|
|
@click="updateState"
|
|
unelevated
|
|
autofocus
|
|
/> </QCardActions
|
|
></QCard>
|
|
</QDialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.list {
|
|
max-height: 100%;
|
|
padding: 15px;
|
|
width: 100%;
|
|
}
|
|
|
|
.grid-style-transition {
|
|
transition: transform 0.28s, background-color 0.28s;
|
|
}
|
|
|
|
#true {
|
|
background-color: $positive;
|
|
}
|
|
|
|
#false {
|
|
background-color: $negative;
|
|
}
|
|
|
|
div.q-dialog__inner > div {
|
|
max-width: fit-content !important;
|
|
}
|
|
</style>
|