|
|
@@ -1,48 +1,22 @@
|
|
|
<template>
|
|
|
<q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
|
<q-card class="q-dialog-plugin overflow-hidden" style="width: 100%; max-width: 400px">
|
|
|
- <DefaultDialogHeader :title="() => 'Mês de Cobrança'" @close="onDialogCancel" />
|
|
|
+ <DefaultDialogHeader title="Mês de Cobrança" @close="onDialogCancel" />
|
|
|
|
|
|
<q-form ref="formRef" @submit="onGenerate">
|
|
|
<q-card-section class="q-pt-none">
|
|
|
- <DefaultInput
|
|
|
- v-model="monthDisplay"
|
|
|
+ <DefaultSelect
|
|
|
+ v-model="month"
|
|
|
label="Mês"
|
|
|
- outlined
|
|
|
- readonly
|
|
|
- clearable
|
|
|
+ :options="monthOptions"
|
|
|
:rules="[inputRules.required]"
|
|
|
- @clear="onClearMonth"
|
|
|
- >
|
|
|
- <template #append>
|
|
|
- <q-icon name="mdi-calendar" class="cursor-pointer">
|
|
|
- <q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
|
|
- <q-date
|
|
|
- v-model="month"
|
|
|
- mask="MM/YYYY"
|
|
|
- emit-immediately
|
|
|
- default-view="Months"
|
|
|
- @update:model-value="onMonthSelect"
|
|
|
- >
|
|
|
- <div class="row items-center justify-end">
|
|
|
- <q-btn v-close-popup label="OK" color="primary" flat />
|
|
|
- </div>
|
|
|
- </q-date>
|
|
|
- </q-popup-proxy>
|
|
|
- </q-icon>
|
|
|
- </template>
|
|
|
- </DefaultInput>
|
|
|
+ />
|
|
|
</q-card-section>
|
|
|
|
|
|
<q-card-actions>
|
|
|
<q-space />
|
|
|
<q-btn outline label="Cancelar" @click="onDialogCancel" />
|
|
|
- <q-btn
|
|
|
- color="primary-2"
|
|
|
- label="Gerar"
|
|
|
- type="submit"
|
|
|
- :loading="loading"
|
|
|
- />
|
|
|
+ <q-btn color="primary-2" label="Gerar" type="submit" />
|
|
|
</q-card-actions>
|
|
|
</q-form>
|
|
|
</q-card>
|
|
|
@@ -54,7 +28,7 @@ import { ref } from "vue";
|
|
|
import { useDialogPluginComponent } from "quasar";
|
|
|
import { useInputRules } from "src/composables/useInputRules";
|
|
|
import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
|
|
|
-import DefaultInput from "src/components/defaults/DefaultInput.vue";
|
|
|
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
|
|
|
|
|
|
defineEmits([...useDialogPluginComponent.emits]);
|
|
|
|
|
|
@@ -63,23 +37,24 @@ const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
|
|
|
|
|
|
const { inputRules } = useInputRules();
|
|
|
|
|
|
-const formRef = ref(null);
|
|
|
-const loading = ref(false);
|
|
|
const month = ref(null);
|
|
|
-const monthDisplay = ref(null);
|
|
|
-
|
|
|
-function onMonthSelect(value) {
|
|
|
- if (!value) return;
|
|
|
- monthDisplay.value = value;
|
|
|
-}
|
|
|
-
|
|
|
-function onClearMonth() {
|
|
|
- month.value = null;
|
|
|
- monthDisplay.value = null;
|
|
|
-}
|
|
|
|
|
|
-async function onGenerate() {
|
|
|
- // TODO: call generate billings API with month.value (MM/YYYY)
|
|
|
+const monthOptions = [
|
|
|
+ { label: "Janeiro", value: 1 },
|
|
|
+ { label: "Fevereiro", value: 2 },
|
|
|
+ { label: "Março", value: 3 },
|
|
|
+ { label: "Abril", value: 4 },
|
|
|
+ { label: "Maio", value: 5 },
|
|
|
+ { label: "Junho", value: 6 },
|
|
|
+ { label: "Julho", value: 7 },
|
|
|
+ { label: "Agosto", value: 8 },
|
|
|
+ { label: "Setembro", value: 9 },
|
|
|
+ { label: "Outubro", value: 10 },
|
|
|
+ { label: "Novembro", value: 11 },
|
|
|
+ { label: "Dezembro", value: 12 },
|
|
|
+];
|
|
|
+
|
|
|
+function onGenerate() {
|
|
|
onDialogOK({ month: month.value });
|
|
|
}
|
|
|
</script>
|
ebagabee