adminforth 1.3.54-next.3 → 1.3.54-next.30

package/spa/src/components/CustomDatePicker.vue

@@ -1,176 +0,0 @@
-<template>
-  <div>
-    <div class="grid w-40 gap-4 mb-2">
-      <div>
-        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
-
-        <div class="relative">
-          <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-            <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
-          </div>
-
-          <input ref="datepickerStartEl" type="text"
-                 class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                 placeholder="Select date">
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <div class="grid w-40 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
-        <div>
-          <div class="relative">
-            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
-            </div>
-
-            <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   value="00:00" required/>
-          </div>
-        </div>
-      </div>
-
-      <button type="button"
-              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
-              @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
-        <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
-             xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-             fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="m8 10 4 4 4-4"/>
-        </svg>
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import {ref, computed, onMounted, watch, onBeforeUnmount} from 'vue';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-
-import {useCoreStore} from '@/stores/core';
-
-import Datepicker from "flowbite-datepicker/Datepicker";
-import IconCalendar from "@/components/icons/IconCalendar.vue";
-import IconTime from "@/components/icons/IconTime.vue";
-
-const coreStore = useCoreStore();
-dayjs.extend(utc)
-
-const props = defineProps({
-  valueStart: {
-    default: undefined
-  },
-  column: {
-    type: Object,
-  },
-  label: {
-    type: String,
-  },
-  autoHide: {
-    type: Boolean,
-  }
-});
-
-const emit = defineEmits(['update:valueStart']);
-
-const datepickerStartEl = ref();
-
-const showTimeInputs = ref(false);
-
-const startDate = ref('');
-
-const startTime = ref('');
-
-const datepickerObject = ref('')
-
-const start = computed(() => {
-  if (!startDate.value) {
-    return;
-  }
-
-  let date = dayjs(startDate.value);
-
-  if (startTime.value) {
-    date = addTimeToDate(formatTime(startTime.value), date)
-  }
-
-  return date.utc().toISOString();
-})
-
-async function updateFromProps() {
-  if (!props.valueStart) {
-    datepickerStartEl.value.value = '';
-    startTime.value = '';
-  } else {
-    // wait ref to initialize
-    await (new Promise(resolve => setTimeout(resolve, 0)));
-    datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
-    startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
-  }
-}
-
-onMounted(() => {
-  updateFromProps();
-
-  watch(() => [props.valueStart], (value) => {
-    updateFromProps();
-  });
-})
-
-watch(start, () => {
-  //console.log('⚡ emit', start.value)
-  emit('update:valueStart', start.value)
-})
-
-function initDatepickers() {
-  const options = {format: 'dd M yyyy'};
-
-  if (props.autoHide) {
-    options.autohide = true;
-  }
-
-  datepickerObject.value = new Datepicker(datepickerStartEl.value, options);
-
-  addChangeDateListener();
-}
-
-function addChangeDateListener() {
-  datepickerStartEl.value.addEventListener('changeDate', setStartDate)
-}
-
-function removeChangeDateListener() {
-  datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
-}
-
-function destroyDatepickerElement() {
-  datepickerObject.value.destroy();
-}
-
-function setStartDate(event) {
-  startDate.value = event.detail.date
-}
-
-function formatTime(time) {
-  return time.split(':').map(Number).length === 2 ? time + ':00' : time;
-}
-
-function addTimeToDate(time, date) {
-  const [hours, minutes, seconds] = time.split(':').map(Number)
-  return date.hour(hours).minute(minutes).second(seconds)
-}
-
-const toggleTimeInputs = () => {
-  showTimeInputs.value = !showTimeInputs.value
-}
-
-onMounted(() => {
-  initDatepickers();
-});
-
-onBeforeUnmount(() => {
-  removeChangeDateListener();
-  destroyDatepickerElement();
-});
-</script>

package/spa/src/components/CustomDateRangePicker.vue

@@ -1,218 +0,0 @@
-<template>
-  <div>
-    <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
-      <div class="relative">
-        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
-        </div>
-
-        <input ref="datepickerStartEl" type="text"
-               class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               placeholder="From">
-      </div>
-
-      <div class="relative">
-        <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-          <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
-        </div>
-
-        <input ref="datepickerEndEl" type="text"
-               class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               placeholder="To">
-      </div>
-    </div>
-
-    <div>
-      <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
-        <div>
-          <div class="relative">
-            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
-            </div>
-
-            <input v-model="startTime" type="time" id="start-time"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   value="00:00" required/>
-          </div>
-        </div>
-
-        <div>
-          <div class="relative">
-            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
-            </div>
-
-            <input v-model="endTime" type="time" id="end-time"
-                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                   value="00:00" required/>
-          </div>
-        </div>
-      </div>
-
-      <button type="button"
-              class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
-              @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
-        <svg class="w-8 h-8 ms-0.5 relative top-px" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
-             xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-             fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="m8 10 4 4 4-4"/>
-        </svg>
-      </button>
-    </div>
-  </div>
-</template>
-<script setup>
-import {ref, computed, onMounted, watch, onBeforeUnmount} from 'vue';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-
-import {useCoreStore} from '@/stores/core';
-
-import Datepicker from "flowbite-datepicker/Datepicker";
-import IconCalendar from "@/components/icons/IconCalendar.vue";
-import IconTime from "@/components/icons/IconTime.vue";
-
-const coreStore = useCoreStore();
-dayjs.extend(utc)
-
-const props = defineProps({
-  valueStart: {
-    default: undefined
-  },
-  valueEnd: {
-    default: undefined
-  },
-  column: {
-    type: Object,
-  },
-});
-
-const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
-
-const datepickerStartEl = ref();
-const datepickerEndEl = ref();
-
-const showTimeInputs = ref(false);
-
-const startDate = ref('');
-const endDate = ref('');
-
-const startTime = ref('');
-const endTime = ref('');
-
-const datepickerStartObject = ref('')
-const datepickerEndObject = ref('')
-
-const start = computed(() => {
-  if (!startDate.value) {
-    return;
-  }
-
-  let date = dayjs(startDate.value);
-
-  if (startTime.value) {
-    date = addTimeToDate(formatTime(startTime.value), date)
-  }
-
-  return date.utc().toISOString();
-})
-
-const end = computed(() => {
-  if (!endDate.value) {
-    return;
-  }
-
-  let date = dayjs(endDate.value);
-
-  if (endTime.value) {
-    date = addTimeToDate(formatTime(endTime.value), date)
-  } else {
-    date = addTimeToDate('23:59:59', date)
-  }
-
-  return date.utc().toISOString();
-})
-
-function updateFromProps() {
-  if (!props.valueStart) {
-    datepickerStartEl.value.value = '';
-    startTime.value = '';
-  }
-  if (!props.valueEnd) {
-    datepickerEndEl.value.value = '';
-    endTime.value = '';
-  }
-}
-
-onMounted(() => {
-  updateFromProps();
-
-  watch(() => [props.valueStart, props.valueEnd], (value) => {
-    updateFromProps();
-  });
-})
-
-watch(start, () => {
-  //console.log('⚡ emit', start.value)
-  emit('update:valueStart', start.value)
-})
-
-watch(end, () => {
-  //console.log('⚡ emit', end.value)
-  emit('update:valueEnd', end.value)
-})
-
-function initDatepickers() {
-
-  datepickerStartObject.value = new Datepicker(datepickerStartEl.value, {format: 'dd M yyyy'});
-
-  datepickerEndObject.value = new Datepicker(datepickerEndEl.value, {format: 'dd M yyyy'});
-  addChangeDateListener();
-}
-
-function addChangeDateListener() {
-  datepickerStartEl.value.addEventListener('changeDate', setStartDate)
-  datepickerEndEl.value.addEventListener('changeDate', setEndDate)
-}
-
-function removeChangeDateListener() {
-  datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
-  datepickerEndEl.value.removeEventListener('changeDate', setEndDate);
-}
-
-function destroyDatepickerElement() {
-  datepickerStartObject.value.destroy();
-  datepickerEndObject.value.destroy();
-}
-
-function setStartDate(event) {
-  startDate.value = event.detail.date
-}
-
-function setEndDate(event) {
-  endDate.value = event.detail.date
-}
-
-function formatTime(time) {
-  return time.split(':').map(Number).length === 2 ? time + ':00' : time;
-}
-
-function addTimeToDate(time, date) {
-  const [hours, minutes, seconds] = time.split(':').map(Number)
-  return date.hour(hours).minute(minutes).second(seconds)
-}
-
-const toggleTimeInputs = () => {
-  showTimeInputs.value = !showTimeInputs.value
-}
-
-onMounted(() => {
-  initDatepickers();
-});
-
-onBeforeUnmount(() => {
-  removeChangeDateListener();
-  destroyDatepickerElement();
-})
-</script>

package/spa/src/components/CustomRangePicker.vue

@@ -1,156 +0,0 @@
-<template>
-  <div class="flex flex-wrap gap-2">
-    <input
-      :min="minFormatted"
-      :max="maxFormatted"
-      type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="From"
-      v-model="start"
-    >
-
-    <input
-      :min="minFormatted"
-      :max="maxFormatted"
-      type="number" aria-describedby="helper-text-explanation"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="To"
-      v-model="end"
-    >
-
-    <button
-      v-if="isChanged"
-      type="button"
-      class="flex items-center p-0.5 ml-auto px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
-      @click="clear">Clear
-    </button>
-
-    <div v-if="min && max" class="w-full px-2.5">
-      <vue-slider
-        class="custom-slider"
-        :dot-size="20"
-        height="7.99px"
-        :min="minFormatted"
-        :max="maxFormatted"
-        v-model="sliderValue"
-        @update:model-value="updateFromSlider($event)"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import VueSlider from 'vue-slider-component';
-import 'vue-slider-component/theme/antd.css'
-import {computed, onMounted, ref, watch} from "vue";
-import debounce from 'debounce'
-
-const props = defineProps({
-  valueStart: {
-    default: '',
-  },
-  valueEnd: {
-    default: '',
-  },
-  min: {},
-  max: {},
-});
-
-const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
-
-const minFormatted = computed(() => Math.floor(props.min));
-const maxFormatted = computed(() => Math.ceil(props.max));
-
-const isChanged = computed(() => {
-  return start.value && start.value !== minFormatted.value || end.value && end.value !== maxFormatted.value;
-});
-
-const start = ref(props.valueStart);
-const end = ref(props.valueEnd);
-
-const sliderValue = ref([minFormatted.value, maxFormatted.value]);
-
-const updateFromSlider =
-    debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? '': value[0];
-      end.value = value[1] === maxFormatted.value ? '': value[1];
-    }, 500);
-
-onMounted(() => {
-  updateStartFromProps();
-  updateEndFromProps();
-
-  watch(() => props.valueStart, (value) => {
-    updateStartFromProps();
-  });
-
-  watch(() => props.valueEnd, (value) => {
-    updateEndFromProps();
-  });
-})
-
-function updateStartFromProps() {
-  start.value = props.valueStart;
-  setSliderValues(start.value, end.value)
-}
-
-function updateEndFromProps() {
-  end.value = props.valueEnd;
-  setSliderValues(start.value, end.value)
-}
-
-watch(start, () => {
-  console.log('⚡ emit', start.value)
-  emit('update:valueStart', start.value)
-})
-
-watch(end, () => {
-  console.log('⚡ emit', end.value)
-  emit('update:valueEnd', end.value);
-})
-
-watch([minFormatted,maxFormatted], () => {
-  setSliderValues(minFormatted.value, maxFormatted.value)
-})
-
-const clear = () => {
-  start.value = ''
-  end.value = ''
-  setSliderValues('', '')
-}
-
-function setSliderValues(start, end) {
-  sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
-}
-</script>
-
-<style lang="scss" scoped>
-.custom-slider {
-    &:deep(.vue-slider-rail) {
-        background-color: rgb(229 231 235);
-    }
-
-    &:deep(.vue-slider-dot-handle) {
-        // apply bg-blue-500 to the handle when active
-        @apply bg-lightPrimary;
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-dot-handle:hover) {
-        @apply bg-lightPrimary;
-        filter: brightness(1.1);
-        border: none;
-        box-shadow: none;
-    }
-
-    &:deep(.vue-slider-process) {
-      @apply bg-lightPrimaryOpacity;
-
-    }
-
-    &:deep(.vue-slider-process:hover) {
-      filter: brightness(1.1);
-      @apply bg-lightPrimaryOpacity;
-    }
-}
-</style>