|
|
@@ -0,0 +1,297 @@
|
|
|
+<template>
|
|
|
+ <q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
|
+ <q-card class="q-dialog-plugin" style="width: 800px; max-width: 90vw">
|
|
|
+ <DefaultDialogHeader :title="title" @close="onDialogCancel" />
|
|
|
+ <q-form ref="formRef" @submit="onOKClick">
|
|
|
+ <q-card-section class="row q-col-gutter-sm">
|
|
|
+ <ClientSelect
|
|
|
+ v-model="selectedClient"
|
|
|
+ :label="$t('schedules.client')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.client_id"
|
|
|
+ :error-message="serverErrors?.client_id"
|
|
|
+ :initial-id="schedule ? schedule.client_id : null"
|
|
|
+ class="col-12 col-md-6"
|
|
|
+ @update:model-value="onClientChange"
|
|
|
+ />
|
|
|
+
|
|
|
+ <ProviderSelect
|
|
|
+ v-model="selectedProvider"
|
|
|
+ :label="$t('schedules.provider')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.provider_id"
|
|
|
+ :error-message="serverErrors?.provider_id"
|
|
|
+ :initial-id="schedule ? schedule.provider_id : null"
|
|
|
+ class="col-12 col-md-6"
|
|
|
+ @update:model-value="onProviderChange"
|
|
|
+ />
|
|
|
+
|
|
|
+ <AddressSelect
|
|
|
+ v-model="selectedAddress"
|
|
|
+ :label="$t('schedules.address')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.address_id"
|
|
|
+ :error-message="serverErrors?.address_id"
|
|
|
+ :initial-id="schedule ? schedule.address_id : null"
|
|
|
+ :client-id="form.client_id"
|
|
|
+ :disabled="!form.client_id"
|
|
|
+ class="col-12"
|
|
|
+ @update:model-value="serverErrors.address_id = null"
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultInputDatePicker
|
|
|
+ v-model:untreated-date="form.date"
|
|
|
+ :label="$t('schedules.date')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.date"
|
|
|
+ :error-message="serverErrors?.date"
|
|
|
+ class="col-12 col-md-6"
|
|
|
+ @update:untreated-date="serverErrors.date = null"
|
|
|
+ />
|
|
|
+
|
|
|
+ <q-select
|
|
|
+ v-model="form.period_type"
|
|
|
+ :label="$t('schedules.period_type')"
|
|
|
+ :options="periodOptions"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.period_type"
|
|
|
+ :error-message="serverErrors?.period_type"
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ class="col-12 col-md-6"
|
|
|
+ @update:model-value="onPeriodChange"
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultInputTimePicker
|
|
|
+ v-model:untreated-time="form.start_time"
|
|
|
+ :label="$t('schedules.start_time')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.start_time"
|
|
|
+ :error-message="serverErrors?.start_time"
|
|
|
+ class="col-12 col-md-6"
|
|
|
+ @update:untreated-time="onStartTimeChange"
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultInputTimePicker
|
|
|
+ v-model:untreated-time="form.end_time"
|
|
|
+ :label="$t('schedules.end_time')"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.end_time"
|
|
|
+ :error-message="serverErrors?.end_time"
|
|
|
+ :disabled="true"
|
|
|
+ class="col-12 col-md-6"
|
|
|
+ @update:untreated-time="serverErrors.end_time = null"
|
|
|
+ />
|
|
|
+
|
|
|
+ <q-select
|
|
|
+ v-model="form.status"
|
|
|
+ :label="$t('schedules.status')"
|
|
|
+ :options="statusOptions"
|
|
|
+ :rules="[inputRules.required]"
|
|
|
+ :error="!!serverErrors?.status"
|
|
|
+ :error-message="serverErrors?.status"
|
|
|
+ :disable="!schedule"
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ class="col-12 col-md-6"
|
|
|
+ @update:model-value="serverErrors.status = null"
|
|
|
+ />
|
|
|
+
|
|
|
+ <q-input
|
|
|
+ v-model="form.total_amount"
|
|
|
+ :label="$t('schedules.total_amount')"
|
|
|
+ :prefix="'R$'"
|
|
|
+ :readonly="true"
|
|
|
+ class="col-12 col-md-6"
|
|
|
+ />
|
|
|
+
|
|
|
+ <q-checkbox
|
|
|
+ v-if="schedule"
|
|
|
+ v-model="form.code_verified"
|
|
|
+ :label="$t('schedules.code_verified')"
|
|
|
+ class="col-12"
|
|
|
+ />
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-card-actions align="right">
|
|
|
+ <q-btn
|
|
|
+ flat
|
|
|
+ :label="$t('common.actions.cancel')"
|
|
|
+ color="negative"
|
|
|
+ @click="onDialogCancel"
|
|
|
+ />
|
|
|
+ <q-btn
|
|
|
+ type="submit"
|
|
|
+ :label="$t('common.actions.save')"
|
|
|
+ :loading="loading"
|
|
|
+ :disable="!hasUpdatedFields"
|
|
|
+ color="primary"
|
|
|
+ />
|
|
|
+ </q-card-actions>
|
|
|
+ </q-form>
|
|
|
+ </q-card>
|
|
|
+ </q-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed, onMounted } from 'vue'
|
|
|
+import { useDialogPluginComponent } from 'quasar'
|
|
|
+import { useFormUpdateTracker } from 'src/composables/useFormUpdateTracker'
|
|
|
+import { useSubmitHandler } from 'src/composables/useSubmitHandler'
|
|
|
+import { createSchedule, updateSchedule } from 'src/api/schedule'
|
|
|
+import { getProvider } from 'src/api/provider'
|
|
|
+import DefaultDialogHeader from 'src/components/defaults/DefaultDialogHeader.vue'
|
|
|
+import ClientSelect from 'src/components/client/ClientSelect.vue'
|
|
|
+import ProviderSelect from 'src/components/provider/ProviderSelect.vue'
|
|
|
+import AddressSelect from 'src/components/address/AddressSelect.vue'
|
|
|
+import DefaultInputDatePicker from 'src/components/defaults/DefaultInputDatePicker.vue'
|
|
|
+import DefaultInputTimePicker from 'src/components/defaults/DefaultInputTimePicker.vue'
|
|
|
+import { useInputRules } from 'src/composables/useInputRules'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ schedule: {
|
|
|
+ type: Object,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ type: Function,
|
|
|
+ default: () => ''
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+defineEmits([...useDialogPluginComponent.emits])
|
|
|
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
|
|
|
+const { inputRules } = useInputRules()
|
|
|
+const { t } = useI18n()
|
|
|
+const formRef = ref(null)
|
|
|
+const selectedClient = ref(null)
|
|
|
+const selectedProvider = ref(null)
|
|
|
+const selectedAddress = ref(null)
|
|
|
+const providerData = ref(null)
|
|
|
+
|
|
|
+const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
|
|
|
+ client_id: props.schedule ? props.schedule.client_id : null,
|
|
|
+ provider_id: props.schedule ? props.schedule.provider_id : null,
|
|
|
+ address_id: props.schedule ? props.schedule.address_id : null,
|
|
|
+ date: props.schedule ? props.schedule.date : null,
|
|
|
+ period_type: props.schedule ? props.schedule.period_type : '8',
|
|
|
+ schedule_type: props.schedule ? props.schedule.schedule_type : 'default',
|
|
|
+ start_time: props.schedule ? props.schedule.start_time : null,
|
|
|
+ end_time: props.schedule ? props.schedule.end_time : null,
|
|
|
+ status: props.schedule ? props.schedule.status : 'pending',
|
|
|
+ total_amount: props.schedule ? props.schedule.total_amount : 0,
|
|
|
+ code_verified: props.schedule ? props.schedule.code_verified : false
|
|
|
+})
|
|
|
+
|
|
|
+const {
|
|
|
+ loading,
|
|
|
+ serverErrors,
|
|
|
+ execute: submitForm,
|
|
|
+} = useSubmitHandler({
|
|
|
+ onSuccess: () => onDialogOK(true),
|
|
|
+ formRef: formRef,
|
|
|
+})
|
|
|
+
|
|
|
+const periodOptions = computed(() => [
|
|
|
+ { label: t('schedules.period_types.2'), value: '2' },
|
|
|
+ { label: t('schedules.period_types.4'), value: '4' },
|
|
|
+ { label: t('schedules.period_types.6'), value: '6' },
|
|
|
+ { label: t('schedules.period_types.8'), value: '8' }
|
|
|
+])
|
|
|
+
|
|
|
+const statusOptions = computed(() => [
|
|
|
+ { label: t('schedules.statuses.pending'), value: 'pending' },
|
|
|
+ { label: t('schedules.statuses.accepted'), value: 'accepted' },
|
|
|
+ { label: t('schedules.statuses.rejected'), value: 'rejected' },
|
|
|
+ { label: t('schedules.statuses.paid'), value: 'paid' },
|
|
|
+ { label: t('schedules.statuses.cancelled'), value: 'cancelled' },
|
|
|
+ { label: t('schedules.statuses.started'), value: 'started' },
|
|
|
+ { label: t('schedules.statuses.finished'), value: 'finished' }
|
|
|
+])
|
|
|
+
|
|
|
+const onClientChange = (client) => {
|
|
|
+ form.client_id = client?.value || null
|
|
|
+ if (!props.schedule) {
|
|
|
+ selectedAddress.value = null
|
|
|
+ form.address_id = null
|
|
|
+ }
|
|
|
+ serverErrors.client_id = null
|
|
|
+}
|
|
|
+
|
|
|
+const onProviderChange = async (provider) => {
|
|
|
+ form.provider_id = provider?.value || null
|
|
|
+ serverErrors.provider_id = null
|
|
|
+
|
|
|
+ if (form.provider_id) {
|
|
|
+ try {
|
|
|
+ providerData.value = await getProvider(form.provider_id)
|
|
|
+ calculateTotalAmount()
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Error loading provider:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const onPeriodChange = () => {
|
|
|
+ serverErrors.period_type = null
|
|
|
+ calculateEndTime()
|
|
|
+ calculateTotalAmount()
|
|
|
+}
|
|
|
+
|
|
|
+const onStartTimeChange = () => {
|
|
|
+ serverErrors.start_time = null
|
|
|
+ calculateEndTime()
|
|
|
+}
|
|
|
+
|
|
|
+const calculateEndTime = () => {
|
|
|
+ if (!form.start_time || !form.period_type) return
|
|
|
+
|
|
|
+ const [hours, minutes] = form.start_time.split(':').map(Number)
|
|
|
+ const periodHours = parseInt(form.period_type)
|
|
|
+
|
|
|
+ const endHours = hours + periodHours
|
|
|
+ const endMinutes = minutes
|
|
|
+
|
|
|
+ form.end_time = `${String(endHours).padStart(2, '0')}:${String(endMinutes).padStart(2, '0')}:00`
|
|
|
+}
|
|
|
+
|
|
|
+const calculateTotalAmount = () => {
|
|
|
+ if (!providerData.value || !form.period_type) return
|
|
|
+ const rateMap = {
|
|
|
+ '2': providerData.value.daily_price_2h,
|
|
|
+ '4': providerData.value.daily_price_4h,
|
|
|
+ '6': providerData.value.daily_price_6h,
|
|
|
+ '8': providerData.value.daily_price_8h
|
|
|
+ }
|
|
|
+ form.total_amount = rateMap[form.period_type] || 0
|
|
|
+}
|
|
|
+
|
|
|
+const onOKClick = async () => {
|
|
|
+ if (selectedClient.value?.value) {
|
|
|
+ form.client_id = selectedClient.value.value
|
|
|
+ }
|
|
|
+ if (selectedProvider.value?.value) {
|
|
|
+ form.provider_id = selectedProvider.value.value
|
|
|
+ }
|
|
|
+ if (selectedAddress.value?.value) {
|
|
|
+ form.address_id = selectedAddress.value.value
|
|
|
+ }
|
|
|
+
|
|
|
+ if (props.schedule) {
|
|
|
+ await submitForm(() => updateSchedule(props.schedule.id, getUpdatedFields.value))
|
|
|
+ } else {
|
|
|
+ await submitForm(() => createSchedule({ ...form }))
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ if (props.schedule?.provider_id) {
|
|
|
+ try {
|
|
|
+ providerData.value = await getProvider(props.schedule.provider_id)
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Error loading provider:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
