@it-enterprise/forcebpm-ui-kit 1.0.2-beta.21 → 1.0.2-beta.22

package/src/f-date-picker/FMenuDatePicker.vue

@@ -0,0 +1,337 @@
+<script setup>
+// FMenuDatePicker
+import { ref, computed, watch, nextTick } from 'vue'
+import moment from 'moment'
+import FDatePicker from './FDatePicker.vue'
+import FTextFieldDate from './FTextFieldDate.vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: null,
+    validator(value, props) {
+      if (!props.isInput && !props.isRange) {
+        console.warn('title cannot be used with isInput=false and isRange=false')
+        return false
+      }
+      return true
+    }
+  },
+  prependText: {
+    type: String,
+    default: null
+  },
+  type: {
+    type: String,
+    default: 'date',
+    validator: value => ['date', 'datetime'].includes(value)
+  },
+  color: {
+    type: String,
+    default: 'secondary'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  isRange: {
+    type: Boolean,
+    default: false
+  },
+  isInput: {
+    type: Boolean,
+    default: true
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  isTodayMin: {
+    type: Boolean,
+    default: false
+  },
+  menu: {
+    type: Boolean,
+    default: false
+  },
+  menuProps: {
+    type: Object,
+    default: () => ({
+      top: true
+    })
+  },
+  allowedDates: {
+    type: Function,
+    default: () => true
+  }
+})
+
+const modelValue = defineModel({
+  type: [String, Date, Object],
+  default: ''
+})
+
+const localMenu = ref(props.menu)
+const textDate = ref(null)
+const textFromDate = ref(null)
+const textToDate = ref(null)
+const date = ref(props.isRange ? { from: null, to: null } : null)
+const FORMAT_DATE = props.type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm'
+
+const emit = defineEmits(['save', 'cancel', 'update:menu'])
+
+const isInputDate = computed(() => {
+  return props.title ? Boolean(textDate.value && date.value) : true
+})
+
+const isInputRangeDate = computed(() => {
+  return props.title ? Boolean(textFromDate.value && textToDate.value && date.value) : true
+})
+
+const isValidDate = computed(() => {
+  return props.isRange ? moment(textFromDate.value).isValid() && moment(textToDate.value).isValid() : moment(textDate.value).isValid()
+})
+
+const initDate = () => {
+  if (
+    modelValue.value &&
+    (moment.isMoment(modelValue.value) ||
+      ((typeof modelValue.value === 'string' || modelValue.value instanceof Date) && moment(modelValue.value).isValid()))
+  ) {
+    const formattedValue = moment(modelValue.value).format(FORMAT_DATE)
+    textDate.value = formattedValue
+    date.value = formattedValue
+    return
+  }
+
+  if (modelValue.value && props.isRange && typeof modelValue.value === 'object' && modelValue.value.from && modelValue.value.to) {
+    date.value = {
+      from: moment(modelValue.value.from).isValid() ? moment(modelValue.value.from).format(FORMAT_DATE) : modelValue.value.from,
+      to: moment(modelValue.value.to).isValid() ? moment(modelValue.value.to).format(FORMAT_DATE) : modelValue.value.to
+    }
+    textFromDate.value = date.value.from
+    textToDate.value = date.value.to
+  } else {
+    textDate.value = null
+    textFromDate.value = null
+    textToDate.value = null
+    date.value = props.isRange ? { from: null, to: null } : null
+  }
+}
+
+const menuAllowedDates = val => {
+  if (props.isTodayMin) {
+    return moment(val).isSameOrAfter(moment(), 'day')
+  } else {
+    return props.allowedDates(val)
+  }
+}
+const rangeFromAllowedDates = val => {
+  return moment(val).isSameOrBefore(moment(date.value.to), 'day')
+}
+const rangeToAllowedDates = val => {
+  return moment(val).isSameOrAfter(moment(date.value.from), 'day')
+}
+
+const textFieldFromDateHandler = value => {
+  textFromDate.value = value
+  if (date.value) {
+    date.value.from = value || null
+    modelValue.value = date.value
+  }
+}
+
+const textFieldToDateHandler = value => {
+  textToDate.value = value
+  if (date.value) {
+    date.value.to = value || null
+    modelValue.value = date.value
+  }
+}
+
+const textFieldDateHandler = value => {
+  textDate.value = value
+  date.value = value || null
+  modelValue.value = date.value
+}
+
+const clearDate = () => {
+  textFromDate.value = null
+  textToDate.value = null
+  textDate.value = null
+  date.value = null
+  modelValue.value = date.value
+}
+
+const cancel = () => {
+  initDate()
+  localMenu.value = false
+}
+
+const menuHandler = val => {
+  emit('update:menu', val)
+
+  if (val === false) {
+    nextTick(() => {
+      cancel()
+    })
+  }
+}
+
+const save = () => {
+  localMenu.value = false
+
+  if (props.isRange) {
+    if (date.value && date.value.from && date.value.to) {
+      modelValue.value = date.value
+      emit('save', date.value)
+    }
+  } else {
+    if (date.value) {
+      const formattedValue = typeof date.value === 'string' ? date.value : moment(date.value).format(FORMAT_DATE)
+      modelValue.value = formattedValue
+      emit('save', formattedValue)
+    }
+  }
+}
+
+watch(modelValue, initDate, { immediate: true })
+
+watch(
+  () => props.menu,
+  newVal => {
+    localMenu.value = newVal
+  }
+)
+</script>
+
+<template>
+  <div class="f-menu-date-picker d-flex align-center">
+    <template v-if="isInput">
+      <div v-if="isRange && isInputRangeDate" class="d-flex align-center f-menu-date-picker-range-input">
+        <!-- From input date -->
+        <div class="d-flex align-center">
+          <FTextFieldDate
+            v-model="textFromDate"
+            :type="type"
+            :color="color"
+            :disabled="disabled"
+            :allowed-dates="rangeFromAllowedDates"
+            @blur="textFieldFromDateHandler"
+          />
+        </div>
+
+        <FIcon icon="ctx-arrow-next" :color="color" class="mx-1" />
+
+        <!-- To input date -->
+        <div class="d-flex align-center">
+          <FTextFieldDate
+            v-model="textToDate"
+            :type="type"
+            :color="color"
+            :disabled="disabled"
+            :allowed-dates="rangeToAllowedDates"
+            @blur="textFieldToDateHandler"
+          />
+        </div>
+      </div>
+
+      <template v-else-if="isInputDate">
+        <!-- Prepend text -->
+        <span v-if="prependText" :class="`text-${color}`" class="f-menu-date-picker-prepend-text mr-1">{{ prependText }}:</span>
+
+        <!-- Input date -->
+        <FTextFieldDate
+          v-model="textDate"
+          :type="type"
+          :color="color"
+          :disabled="disabled"
+          :allowed-dates="menuAllowedDates"
+          @blur="textFieldDateHandler"
+        />
+      </template>
+    </template>
+
+    <!-- Select date -->
+    <v-menu
+      v-model="localMenu"
+      v-bind="menuProps"
+      persistent
+      min-width="auto"
+      offset="0, -6"
+      location="bottom right"
+      content-class="f-menu-date-picker-content"
+      :disabled="disabled"
+      :close-on-content-click="false"
+      @update:model-value="menuHandler"
+    >
+      <template #activator="{ props: propsMenu }">
+        <div v-bind="propsMenu" class="f-menu-date-picker-activator">
+          <span v-if="!isInputDate && !isInputRangeDate" class="d-flex align-center">
+            <!-- Prepend text -->
+            <span v-if="prependText" :class="`text-${color}`" class="f-menu-date-picker-prepend-text mr-1">{{ prependText }}:</span>
+            <!-- Title -->
+            <span :class="disabled ? 'is-disabled' : `text-${color}`" class="f-menu-date-picker-title">{{ title }}</span>
+          </span>
+
+          <!-- Icon -->
+          <v-tooltip location="top" offset="8" :disabled="disabled" :text="$t('tooltip.calendar')">
+            <template #activator="{ props: propsTooltip }">
+              <FIcon icon="calendar" :color="color" class="ml-1" :class="disabled ? 'cursor-default' : 'cursor-pointer'" v-bind="propsTooltip" />
+            </template>
+          </v-tooltip>
+        </div>
+      </template>
+
+      <FDatePicker
+        v-model="date"
+        is-actions
+        :is-range="isRange"
+        :type="type"
+        :color="color"
+        :allowed-dates="menuAllowedDates"
+        @save="save"
+        @cancel="cancel"
+      />
+    </v-menu>
+
+    <!-- Clear date -->
+    <v-tooltip v-if="clearable && isValidDate && !disabled" location="top" offset="12" :text="$t('tooltip.clearDate')">
+      <template #activator="{ props: propsClear }">
+        <v-btn v-bind="propsClear" variant="text" size="16" class="ml-1 pt-1 f-menu-date-picker-clear-btn" @click="clearDate">
+          <FIcon icon="times" color="secondary" size="12" />
+        </v-btn>
+      </template>
+    </v-tooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.f-menu-date-picker {
+  .f-menu-date-picker-prepend-text {
+    font-size: 1.1em;
+  }
+  .f-menu-date-picker-activator {
+    display: flex;
+    position: relative;
+    bottom: 2px;
+    .f-menu-date-picker-title {
+      font-size: 1.1em;
+      position: relative;
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0;
+        min-height: 0.5px;
+        height: 0.5px;
+        width: 100%;
+        background: currentColor;
+      }
+      &.is-disabled::after {
+        content: none;
+      }
+    }
+  }
+}
+</style>