adminforth 1.1.75 → 1.1.77

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

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <div class="mx-auto grid grid-cols-2 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="Start date">
+        </div>
+      </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" 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-blue-700 dark:text-blue-500 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();
+})
+
+function updateFromProps() {
+  if (!props.valueStart) {
+    datepickerStartEl.value.value = '';
+    startTime.value = '';
+  } else {
+    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/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-blue-700 dark:text-blue-500 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/spa/src/components/CustomRangePicker.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="flex flex-wrap gap-2">
+    <input
+      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
+      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-blue-700 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 class="w-full">
+      <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: {
+    default: 0,
+  },
+  max: {
+    default: 10,
+  },
+});
+
+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);
+})
+
+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) {
+        background-color: #1c64f2;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:deep(.vue-slider-dot-handle:hover) {
+        background-color: #1c64f2;
+        border: none;
+        box-shadow: none;
+    }
+
+    &:deep(.vue-slider-process) {
+        background-color: rgb(225 239 254);
+    }
+
+    &:deep(.vue-slider-process:hover) {
+        background-color: rgb(225 239 254);
+    }
+}
+</style>

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

@@ -0,0 +1,168 @@
+<template>
+  <div class="relative inline-block w-full" id="dropd">
+    <div class="relative">
+      <input
+        type="text"
+        v-model="search"
+        @focus="showDropdown = true"
+        class="block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm transition duration-150 ease-in-out 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="selectedItems.length ? '' : placeholder || 'Select...'"
+      />
+      <div class="absolute inset-y-0 left-2 flex items-center pr-2 flex-wrap">
+        {{  }}
+        <div v-for="item in selectedItems" :key="item?.name" class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
+          <span>{{ item.label }}</span>
+          <button
+            type="button"
+            @click="toogleItem(item)"
+            class="z-index-100  flex-shrink-0 ml-1 h-4 w-4 -mr-1 rounded-full inline-flex items-center justify-center text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 focus:bg-gray-100"
+          >
+            <span class="sr-only">Remove item</span>
+            <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+                d="M1 1l6 6m0-6L1 7"
+              />
+            </svg>
+          </button>
+        </div>  
+      </div>
+      <div class="absolute inset-y-0 right-2 flex items-center pointer-events-none">
+        <!-- triangle icon -->
+        <IconCaretDownSolid v-if="!showDropdown" class="h-5 w-5 text-gray-400" />
+        <IconCaretUpSolid v-else class="h-5 w-5 text-gray-400" />
+      </div>
+    </div>
+    <div v-if="showDropdown" class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+      <div
+        v-for="item in filteredItems"
+        :key="item.value"
+        class="px-4 py-2 cursor-pointer hover:bg-gray-100"
+        :class="{ 'bg-blue-100': selectedItems.includes(item) }"
+        @click="toogleItem(item)"
+      >
+        <label :for="item.value">{{ item.label }}</label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { IconCaretDownSolid, IconCaretUpSolid } from '@iconify-prerendered/vue-flowbite';
+
+
+const props = defineProps({
+  options: Array,
+  modelValue: {
+    default: undefined,
+  },
+  allowCustom: {
+    type: Boolean,
+    default: false,
+  },
+  single: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const search = ref('');
+const showDropdown = ref(false);
+
+const selectedItems = ref([]);
+
+function updateFromProps() {
+  if (props.modelValue !== undefined) {
+    if (props.single) {
+      const el = props.options.find(item => item.value === props.modelValue);
+      if (el) {
+        selectedItems.value = [el];
+      } else {
+        selectedItems.value = [];
+      }
+    } else {
+      selectedItems.value = props.options.filter(item => props.modelValue.includes(item.value));
+    }
+  }
+}
+
+onMounted(() => {
+  updateFromProps();
+
+  watch(() => props.modelValue, (value) => {
+    updateFromProps();
+  });
+
+  watch(() => props.options, () => {
+    updateFromProps();
+  });
+
+  addClickListener();
+
+});
+
+const filteredItems = computed(() => {
+  return props.options.filter(item =>
+    item.label.toLowerCase().includes(search.value.toLowerCase())
+  );
+});
+
+const handleClickOutside = (event) => {
+  if (!event.target.closest('#dropd')) {
+    showDropdown.value = false;
+  }
+};
+
+const addClickListener = () => {
+  document.addEventListener('click', handleClickOutside);
+};
+
+const removeClickListener = () => {
+  document.removeEventListener('click', handleClickOutside);
+};
+
+const toogleItem = (item) => {
+  if (selectedItems.value.includes(item)) {
+    selectedItems.value = selectedItems.value.filter(i => i !== item);
+  } else {
+    if (props.single) {
+      selectedItems.value = [item];
+    } else {
+      selectedItems.value = [...selectedItems.value, item];
+    }
+  }
+  if (props.single) {
+    showDropdown.value = false;
+  }
+
+  
+  const list = selectedItems.value.map(item => item.value);
+  const updValue = list.length ? list : undefined;
+  let emitValue;
+  if (props.single) {
+    emitValue = updValue ? updValue[0] : undefined;
+  } else {
+    emitValue = updValue;
+  }
+  console.log('⚡ emit', emitValue)
+  emit('update:modelValue', emitValue);
+
+};
+
+
+onUnmounted(() => {
+  removeClickListener();
+});
+
+
+</script>