sfp_vue_franchisee_ginastica_cerebro/src/components/defaults/DefaultInputDatePicker.vue

<template>
  <div v-bind="$attrs">
    <q-input
      ref="inputRef"
      v-model="treatedDate"
      :mask="inputMask"
      :label="label"
      :rules="rules"
      :dense="dense"
      clearable
    >
      <template #append>
        <q-icon
          :name="time ? 'mdi-calendar-clock' : 'mdi-calendar'"
          class="cursor-pointer"
        >
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <template v-if="!time">
              <q-date v-model="date" mask="YYYY-MM-DD">
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" flat />
                </div>
              </q-date>
            </template>

            <template v-else>
              <q-tab-panels
                v-model="activePanel"
                animated
                transition-prev="slide-right"
                transition-next="slide-left"
                class="bg-white"
              >
                <q-tab-panel name="date" class="q-pa-none">
                  <q-date
                    v-model="date"
                    mask="YYYY-MM-DD HH:mm"
                    @update:model-value="handleDateSelection"
                  />
                </q-tab-panel>

                <q-tab-panel name="time" class="q-pa-none">
                  <q-time v-model="date" mask="YYYY-MM-DD HH:mm" format24h />
                </q-tab-panel>
              </q-tab-panels>
            </template>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

<script setup>
import { watch, ref, computed, useTemplateRef } from "vue";
import { useI18n } from "vue-i18n";
import masks from "src/helpers/masks";

const { label, rules, time, dense } = defineProps({
  label: {
    type: String,
    default: () => useI18n().t("common.terms.date"),
  },
  rules: {
    type: Array,
    default: () => [],
  },
  dense: {
    type: Boolean,
    default: false,
  },
  time: {
    type: Boolean,
    default: false,
  },
});

const qInputRef = useTemplateRef("inputRef");

const treatedDate = defineModel();
const untreatedDate = defineModel("untreatedDate");

const activePanel = ref("date");
const date = ref();

const handleDateSelection = () => {
  if (time) {
    activePanel.value = "time";
  }
};

const formatDate = (value) => {
  if (!value) return null;

  const [datePart, timePart] = value.split(" ");
  const formattedDate = datePart.split("-").reverse().join("/");

  return time && timePart ? `${formattedDate} ${timePart}` : formattedDate;
};

const unformatDate = (value) => {
  if (!value) return null;

  const [datePart, timePart] = value.split(" ");
  const formattedDate = datePart.split("/").reverse().join("-");

  return time && timePart ? `${formattedDate} ${timePart}` : formattedDate;
};

const inputMask = computed(() => {
  if (!qInputRef.value) return "";

  if (time) {
    return masks.Brasil.datetime;
  }
  return masks.Brasil.date;
});

watch(date, (value) => {
  if (!value) return;

  untreatedDate.value = value;
  treatedDate.value = formatDate(value);
});

watch(treatedDate, (value) => {
  if (!value) {
    date.value = null;
    untreatedDate.value = null;
    treatedDate.value = null;
    activePanel.value = "date";
    return;
  }
  date.value = unformatDate(value);
});

watch(
  untreatedDate,
  (value) => {
    if (!value) {
      date.value = null;
      untreatedDate.value = null;
      treatedDate.value = null;
      activePanel.value = "date";
      return;
    }
    date.value = value;
    treatedDate.value = formatDate(value);
  },
  { immediate: true },
);
</script>