|
|
@@ -0,0 +1,407 @@
|
|
|
+<template>
|
|
|
+ <q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
|
+ <q-card class="q-dialog-plugin feriados-dialog">
|
|
|
+ <template v-if="view === 'calendar'">
|
|
|
+ <DefaultDialogHeader title="Feriados" @close="onClose" />
|
|
|
+
|
|
|
+ <q-card-section class="row q-col-gutter-md q-pt-none">
|
|
|
+ <div class="col-12 col-sm-7">
|
|
|
+ <div class="row items-center justify-between q-mb-md">
|
|
|
+ <q-btn
|
|
|
+ flat
|
|
|
+ round
|
|
|
+ dense
|
|
|
+ icon="mdi-chevron-left"
|
|
|
+ color="grey-7"
|
|
|
+ @click="prevMonth"
|
|
|
+ />
|
|
|
+ <div class="row items-center q-gutter-xs">
|
|
|
+ <q-select
|
|
|
+ v-model="currentMonth"
|
|
|
+ :options="monthOptions"
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ dense
|
|
|
+ outlined
|
|
|
+ style="min-width: 100px"
|
|
|
+ />
|
|
|
+ <q-select
|
|
|
+ v-model="currentYear"
|
|
|
+ :options="yearOptions"
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ dense
|
|
|
+ outlined
|
|
|
+ style="min-width: 80px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <q-btn
|
|
|
+ flat
|
|
|
+ round
|
|
|
+ dense
|
|
|
+ icon="mdi-chevron-right"
|
|
|
+ color="grey-7"
|
|
|
+ @click="nextMonth"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="calendar-grid q-mb-xs">
|
|
|
+ <div
|
|
|
+ v-for="day in weekDays"
|
|
|
+ :key="day"
|
|
|
+ class="cal-header text-caption text-grey-6 text-center text-weight-medium"
|
|
|
+ >
|
|
|
+ {{ day }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="calendar-grid">
|
|
|
+ <div
|
|
|
+ v-for="(cell, index) in calendarCells"
|
|
|
+ :key="index"
|
|
|
+ class="cal-cell"
|
|
|
+ :class="{
|
|
|
+ 'cal-cell--empty': !cell.day,
|
|
|
+ 'cal-cell--holiday': cell.isHoliday,
|
|
|
+ }"
|
|
|
+ @click="cell.day && !cell.isHoliday && openNewRecord(cell.day)"
|
|
|
+ >
|
|
|
+ <span v-if="cell.day" class="cal-cell__number">{{ cell.day }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-12 col-sm-5">
|
|
|
+ <div class="text-subtitle2 q-mb-sm">Resumo</div>
|
|
|
+ <q-separator class="q-mb-sm" />
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="monthHolidays.length === 0"
|
|
|
+ class="text-caption text-grey-5 text-center q-mt-lg q-px-sm"
|
|
|
+ >
|
|
|
+ Clique em um dia no calendário para adicionar um registro.
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-list v-else separator>
|
|
|
+ <q-item
|
|
|
+ v-for="holiday in monthHolidays"
|
|
|
+ :key="holiday.id"
|
|
|
+ class="q-pa-sm cursor-pointer"
|
|
|
+ clickable
|
|
|
+ @click="openEdit(holiday)"
|
|
|
+ >
|
|
|
+ <q-item-section avatar>
|
|
|
+ <q-avatar
|
|
|
+ size="36px"
|
|
|
+ color="deep-orange"
|
|
|
+ text-color="white"
|
|
|
+ class="text-weight-bold"
|
|
|
+ >
|
|
|
+ {{ holiday.day }}
|
|
|
+ </q-avatar>
|
|
|
+ </q-item-section>
|
|
|
+ <q-item-section>
|
|
|
+ <q-item-label class="text-body2">{{ holiday.description }}</q-item-label>
|
|
|
+ <q-item-label caption>{{ typeLabel(holiday.type) }}</q-item-label>
|
|
|
+ </q-item-section>
|
|
|
+ <q-item-section side>
|
|
|
+ <q-icon name="mdi-pencil-outline" color="grey-5" size="xs" />
|
|
|
+ </q-item-section>
|
|
|
+ </q-item>
|
|
|
+ </q-list>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="monthHolidays.length > 0"
|
|
|
+ class="text-caption text-grey-5 text-center q-mt-md q-px-sm"
|
|
|
+ >
|
|
|
+ Clique em um dia no calendário para adicionar um registro.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-separator />
|
|
|
+
|
|
|
+ <q-card-actions align="right">
|
|
|
+ <q-btn outline color="primary" label="FECHAR" no-caps @click="onClose" />
|
|
|
+ </q-card-actions>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <DefaultDialogHeader
|
|
|
+ :title="`Novo Registro: ${formattedSelectedDate}`"
|
|
|
+ @close="cancelNewRecord"
|
|
|
+ />
|
|
|
+
|
|
|
+ <q-card-section class="column q-gutter-md q-pt-sm">
|
|
|
+ <DefaultInput
|
|
|
+ v-model="newDescription"
|
|
|
+ label="Nome do Evento"
|
|
|
+ placeholder="Ex: Ponto facultativo, Natal..."
|
|
|
+ icon="mdi-pencil-outline"
|
|
|
+ outlined
|
|
|
+ autofocus
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultSelect
|
|
|
+ v-model="newType"
|
|
|
+ label="Selecione o Tipo."
|
|
|
+ :options="typeOptions"
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ outlined
|
|
|
+ />
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-separator />
|
|
|
+
|
|
|
+ <q-card-actions align="right">
|
|
|
+ <q-btn outline color="primary" label="CANCELAR" no-caps @click="cancelNewRecord" />
|
|
|
+ <q-btn
|
|
|
+ unelevated
|
|
|
+ color="primary"
|
|
|
+ label="SALVAR"
|
|
|
+ no-caps
|
|
|
+ :disable="!newDescription.trim()"
|
|
|
+ :loading="saving"
|
|
|
+ @click="saveNewRecord"
|
|
|
+ />
|
|
|
+ </q-card-actions>
|
|
|
+ </template>
|
|
|
+ </q-card>
|
|
|
+ </q-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from "vue";
|
|
|
+import { useDialogPluginComponent, useQuasar } from "quasar";
|
|
|
+import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
|
|
|
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
|
|
|
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
|
|
|
+import { createBaseHoliday } from "src/api/holiday";
|
|
|
+import FeriadosEditDialog from "src/pages/dashboard/components/FeriadosEditDialog.vue";
|
|
|
+
|
|
|
+defineEmits([...useDialogPluginComponent.emits]);
|
|
|
+
|
|
|
+const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
|
|
|
+const $q = useQuasar();
|
|
|
+
|
|
|
+const now = new Date();
|
|
|
+const currentMonth = ref(now.getMonth() + 1);
|
|
|
+const currentYear = ref(now.getFullYear());
|
|
|
+
|
|
|
+const view = ref("calendar");
|
|
|
+const selectedDay = ref(null);
|
|
|
+const newDescription = ref("");
|
|
|
+const newType = ref("feriado");
|
|
|
+const saving = ref(false);
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ initialHolidays: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const holidays = ref([...props.initialHolidays]);
|
|
|
+
|
|
|
+const weekDays = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
|
|
|
+
|
|
|
+const monthOptions = [
|
|
|
+ { label: "Jan", value: 1 },
|
|
|
+ { label: "Fev", value: 2 },
|
|
|
+ { label: "Mar", value: 3 },
|
|
|
+ { label: "Abr", value: 4 },
|
|
|
+ { label: "Mai", value: 5 },
|
|
|
+ { label: "Jun", value: 6 },
|
|
|
+ { label: "Jul", value: 7 },
|
|
|
+ { label: "Ago", value: 8 },
|
|
|
+ { label: "Set", value: 9 },
|
|
|
+ { label: "Out", value: 10 },
|
|
|
+ { label: "Nov", value: 11 },
|
|
|
+ { label: "Dez", value: 12 },
|
|
|
+];
|
|
|
+
|
|
|
+const typeOptions = [
|
|
|
+ { label: "Feriado", value: "feriado" },
|
|
|
+ { label: "Ponto Facultativo", value: "facultativo" },
|
|
|
+];
|
|
|
+
|
|
|
+const yearOptions = computed(() => {
|
|
|
+ const base = now.getFullYear();
|
|
|
+ return Array.from({ length: 7 }, (_, i) => {
|
|
|
+ const y = base - 2 + i;
|
|
|
+ return { label: String(y), value: y };
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+const monthHolidays = computed(() =>
|
|
|
+ holidays.value
|
|
|
+ .filter((h) => h.month === currentMonth.value && h.year === currentYear.value)
|
|
|
+ .sort((a, b) => a.day - b.day),
|
|
|
+);
|
|
|
+
|
|
|
+const calendarCells = computed(() => {
|
|
|
+ const year = currentYear.value;
|
|
|
+ const month = currentMonth.value;
|
|
|
+ const firstDay = new Date(year, month - 1, 1).getDay();
|
|
|
+ const daysInMonth = new Date(year, month, 0).getDate();
|
|
|
+ const holidayDays = new Set(monthHolidays.value.map((h) => h.day));
|
|
|
+
|
|
|
+ const cells = [];
|
|
|
+ for (let i = 0; i < firstDay; i++) cells.push({ day: null, isHoliday: false });
|
|
|
+ for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d, isHoliday: holidayDays.has(d) });
|
|
|
+ return cells;
|
|
|
+});
|
|
|
+
|
|
|
+const formattedSelectedDate = computed(() => {
|
|
|
+ if (!selectedDay.value) return "";
|
|
|
+ const dd = String(selectedDay.value).padStart(2, "0");
|
|
|
+ const mm = String(currentMonth.value).padStart(2, "0");
|
|
|
+ return `${dd}/${mm}/${currentYear.value}`;
|
|
|
+});
|
|
|
+
|
|
|
+function typeLabel(type) {
|
|
|
+ return type === "facultativo" ? "Ponto Facultativo" : "Feriado";
|
|
|
+}
|
|
|
+
|
|
|
+function prevMonth() {
|
|
|
+ if (currentMonth.value === 1) {
|
|
|
+ currentMonth.value = 12;
|
|
|
+ currentYear.value -= 1;
|
|
|
+ } else {
|
|
|
+ currentMonth.value -= 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function nextMonth() {
|
|
|
+ if (currentMonth.value === 12) {
|
|
|
+ currentMonth.value = 1;
|
|
|
+ currentYear.value += 1;
|
|
|
+ } else {
|
|
|
+ currentMonth.value += 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function openNewRecord(day) {
|
|
|
+ selectedDay.value = day;
|
|
|
+ newDescription.value = "";
|
|
|
+ newType.value = "feriado";
|
|
|
+ view.value = "new-record";
|
|
|
+}
|
|
|
+
|
|
|
+function cancelNewRecord() {
|
|
|
+ view.value = "calendar";
|
|
|
+ selectedDay.value = null;
|
|
|
+}
|
|
|
+
|
|
|
+async function saveNewRecord() {
|
|
|
+ const desc = newDescription.value.trim();
|
|
|
+ if (!desc || selectedDay.value === null) return;
|
|
|
+
|
|
|
+ const mm = String(currentMonth.value).padStart(2, "0");
|
|
|
+ const dd = String(selectedDay.value).padStart(2, "0");
|
|
|
+
|
|
|
+ saving.value = true;
|
|
|
+ try {
|
|
|
+ const created = await createBaseHoliday({
|
|
|
+ description: desc,
|
|
|
+ holiday_date: `${currentYear.value}-${mm}-${dd}`,
|
|
|
+ type: newType.value,
|
|
|
+ });
|
|
|
+
|
|
|
+ holidays.value.push({
|
|
|
+ id: created.id,
|
|
|
+ day: selectedDay.value,
|
|
|
+ month: currentMonth.value,
|
|
|
+ year: currentYear.value,
|
|
|
+ description: created.description,
|
|
|
+ type: created.type,
|
|
|
+ });
|
|
|
+
|
|
|
+ view.value = "calendar";
|
|
|
+ selectedDay.value = null;
|
|
|
+ } catch {
|
|
|
+ $q.notify({ type: "negative", message: "Erro ao salvar feriado." });
|
|
|
+ } finally {
|
|
|
+ saving.value = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function openEdit(holiday) {
|
|
|
+ $q.dialog({
|
|
|
+ component: FeriadosEditDialog,
|
|
|
+ componentProps: { holiday },
|
|
|
+ }).onOk(({ action, holiday: updated, id }) => {
|
|
|
+ if (action === "update") {
|
|
|
+ const idx = holidays.value.findIndex((h) => h.id === updated.id);
|
|
|
+ if (idx !== -1) holidays.value[idx] = updated;
|
|
|
+ } else if (action === "delete") {
|
|
|
+ holidays.value = holidays.value.filter((h) => h.id !== id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function onClose() {
|
|
|
+ onDialogOK(holidays.value);
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.feriados-dialog {
|
|
|
+ width: 900px;
|
|
|
+ max-width: 95vw;
|
|
|
+}
|
|
|
+
|
|
|
+.calendar-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(7, 1fr);
|
|
|
+ gap: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.cal-header {
|
|
|
+ padding: 6px 0 4px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.cal-cell {
|
|
|
+ aspect-ratio: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background 0.15s;
|
|
|
+}
|
|
|
+
|
|
|
+.cal-cell:hover:not(.cal-cell--empty):not(.cal-cell--holiday) {
|
|
|
+ background: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+.cal-cell--empty {
|
|
|
+ cursor: default;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.cal-cell__number {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.cal-cell--holiday .cal-cell__number {
|
|
|
+ background: #e64a19;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.cal-cell--holiday {
|
|
|
+ cursor: default;
|
|
|
+}
|
|
|
+</style>
|
