adminforth 1.3.55-next.0 → 1.3.55

package/dist/spa/src/components/CustomDatePicker.vue

@@ -0,0 +1,176 @@
+<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/dist/spa/src/components/CustomDateRangePicker.vue

@@ -0,0 +1,218 @@
+<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/dist/spa/src/components/CustomRangePicker.vue

@@ -0,0 +1,156 @@
+<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>