@open-commune/web 0.1.3

package/components/forms/selects/select-collection-enum.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      id="listbox-label"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <div
+      :class="{ 'mt-1':label }"
+      class="relative"
+    >
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        :class="{ 'ring-gray-50 border-gray-900':display && !readOnly, 'bg-gray-50 text-gray-500 ring-gray-200': readOnly }"
+        class="relative w-full rounded-md pl-3 pr-10 py-2 text-left cursor-pointer shadow-xs border border-gray-200 focus:outline-none text-sm"
+        @click="_toggle"
+      >
+        <span :class="{ 'text-gray-700':!selectionText }" class="block truncate">
+          {{ selectionText || placeHolder }}
+        </span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </span>
+      </button>
+      <transition
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="display"
+          ref="selectCollectionEnum"
+          class="absolute mt-1 w-full rounded-md bg-white shadow-lg z-50"
+        >
+          <ul tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" class="max-h-60 rounded-md p-2 text-base ring-1 ring-black/5 overflow-auto focus:outline-none sm:text-sm">
+            <li
+              v-for="(option, i) in list"
+              :id="`listbox-item-${i}`"
+              :key="option"
+              :class="readOnly ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer text-black'"
+              class=" select-none rounded-sm relative py-2 px-4 hover:bg-gray-50"
+              role="option"
+              @click="!readOnly && _select(option)"
+            >
+              <span :class="{ 'font-normal text-black': _isSelected(option) }" class="font-light block truncate">
+                {{ option }}
+              </span>
+              <span
+                v-show="_isSelected(option)"
+                class="absolute text-black inset-y-0 right-0 flex items-center pr-4"
+              >
+                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                </svg>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside } from '@vueuse/core'
+
+// Prepare $emitters
+const $emitters = defineEmits(['change'])
+
+// Prepare props
+const $props = defineProps({
+  attribute: {
+    type: String,
+    default: ''
+  },
+  filter: {
+    type: Function,
+    default: () => () => true
+  },
+  itemKey: {
+    type: String,
+    default: 'label'
+  },
+  itemValue: {
+    type: String,
+    default: 'id'
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  enableMultiple: {
+    type: Boolean,
+    default: false
+  },
+  object: {
+    type: Boolean,
+    default: true
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  placeHolder: {
+    type: String,
+    default: 'Sélectionnez'
+  },
+  value: {
+    type: [String, Array],
+    default: ''
+  }
+})
+
+// Prepare reactive data
+const items = ref([])
+const display = ref(false)
+const selection = ref('')
+const selectCollectionEnum = ref(null)
+
+// Prepare computed
+const list = computed(() => {
+  const list = items.value.filter($props.filter)
+  if ($props.object) {
+    return list.map(item => item[$props.itemKey])
+  }
+  return list
+})
+const selectionText = computed(() => {
+  if ($props.object) {
+    return items.value.filter(item => _isSelected(item[$props.itemKey])).map(item => item[$props.itemKey]).join(', ')
+  }
+  return $props.enableMultiple ? selection.value.join(', ') : selection.value
+})
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (newValue) {
+      selection.value = newValue
+    } else {
+      selection.value = $props.enableMultiple ? [] : ''
+    }
+  },
+  { immediate: true }
+)
+
+// Prepare methods
+const _isSelected = (option) => {
+  const val = $props.object
+  ? items.value.find(item => item[$props.itemKey] === option)?.[$props.itemValue]
+  : option
+  return $props.enableMultiple ? selection.value.includes(val) : selection.value === val
+}
+const _select = (option) => {
+  let val = option
+  if ($props.object) {
+    const { [$props.itemValue]: objectVal } = items.value.find(({ [$props.itemKey]: val }) => val === option)
+    val = objectVal
+  }
+  if ($props.enableMultiple) {
+    const index = selection.value.indexOf(val)
+    selection.value = index >= 0 ? selection.value.filter(check => check !== val) : [...selection.value, val]
+  } else {
+    selection.vale = val
+    _close()
+  }
+  $emitters('change', selection.value)
+}
+const _toggle = () => {
+  display.value = !display.value
+}
+const _close = () => {
+  display.value = false
+}
+
+// Prepare mounted
+onMounted(() => {
+  const { Collection } = useModels()
+  const $route = useRoute()
+  const collectionRecord = Collection.repo.where('slug', $route.params.collection).first()
+  const { options } = collectionRecord.attributes.find(({ name }) => name === $props.attribute)
+  items.value = options.items
+})
+
+// Prepare directives
+onClickOutside(selectCollectionEnum, _close)
+</script>

package/components/forms/selects/select-date.vue

@@ -0,0 +1,245 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      id="listbox-label"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <div
+      :class="{ 'mt-1':label }"
+      class="relative"
+    >
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        :class="{ 'ring-gray-50 border-gray-900':display, '!bg-gray-100 !text-gray-200': readOnly }"
+        :disabled="readOnly"
+        class="relative w-full bg-white rounded-md pl-3 pr-10 py-2 text-left cursor-pointer shadow-xs border border-gray-200 focus:outline-none focus:ring-gray-50 focus:border-black hover:border-black text-sm"
+        @click="_toggle"
+      >
+        <div class="flex justify-between items-center">
+          <span :class="{ '!text-gray-400': readOnly }" class="truncate">
+            {{ selectionDate }}
+          </span>
+          <span v-if="timePicker">
+            {{ selectionTimeBegin }} <span v-if="timeEnd">→ {{ selectionTimeEnd }}</span>
+          </span>
+        </div>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <icon
+          class="text-gray-400 h-5 w-5"
+          :icon="timePicker ? 'carbon:event-schedule' : 'carbon:calendar'"
+        />
+        </span>
+      </button>
+      <transition
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="display" ref="calendar" class="absolute flex flex-col mt-1 p-4 w-full min-w-[20rem] bg-white shadow-lg z-50 rounded-md">
+          <!-- time picker -->
+          <div v-if="timePicker" class="inline-flex space-x-1 pb-2 border-b border-gray-100">
+            <select-enum
+              :items="hoursBegin"
+              :value="selectionTimeBegin"
+              :object="false"
+              class="w-full"
+              @change="_updateHour('begin', $event)"
+            />
+            <select-enum
+              v-if="timeEnd"
+              :items="hoursEnd"
+              :value="selectionTimeEnd"
+              :object="false"
+              class="w-full"
+              @change="_updateHour('end', $event)"
+            />
+          </div>
+          <!-- Header -->
+          <div class="flex flex-col items-start md:items-center md:flex-row justify-between w-full pt-2 mb-1">
+            <span class="text-sm font-bold mb-2 md:mb-0">
+              {{ calendarMonth }}
+            </span>
+            <div class="inline-flex">
+              <icon
+                class="text-gray-400 hover:text-white hover:bg-primary p-1 cursor-pointer rounded-md h-6 w-6"
+                icon="material-symbols:chevron-left"
+                @click="_previousMonth"
+              />
+              <icon
+                class="text-gray-400 hover:text-white hover:bg-primary p-1 cursor-pointer rounded-md h-6 w-6"
+                icon="material-symbols:chevron-right-rounded"
+                @click="_nextMonth"
+              />
+            </div>
+          </div>
+
+          <!-- Calendar Body -->
+          <div class="flex-grow grid grid-cols-7 gap-0.5 rounded-md">
+            <div v-for="day in WEEK_DAYS" :key="day" class="h-min text-center text-gray-500 font-semibold mt-3 text-xs self-end">
+              {{ day }}
+            </div>
+            <button
+              v-for="({ dt, selected, current }) in calendarDays"
+              :key="dt.ordinal"
+              :class="{
+                'bg-white hover:bg-primary text-black hover:text-white': current && !selected,
+                'bg-primary text-white': current && selected,
+                'text-gray-400': !current && !selected
+              }"
+              class="relative w-full rounded-md px-2 py-1.5"
+              @click="_select(dt)"
+            >
+              <span class="text-xs self-end">
+                {{ dt.day }}
+              </span>
+            </button>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { Icon } from '@iconify/vue'
+import { DateTime, Info } from 'luxon'
+import selectEnum from '~/components/forms/selects/select-enum'
+
+// Prepare constant
+const TODAY = DateTime.now({ zone: 'Europe/Paris' })
+const WEEK_DAYS = Info.weekdays('narrow', { locale: 'fr' })
+const HOURS = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30']
+
+// Prepare props
+const $props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  timePicker: {
+    type: Boolean,
+    default: false
+  },
+  timeEnd: {
+    type: Boolean,
+    default: false
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String,
+    default: ''
+  }
+})
+
+// Prepare emitters
+const $emitters = defineEmits(['select'])
+
+// Prepare dynamic data
+const display = ref(false)
+const selectionBegin = ref(TODAY.set({ hour: 0, minute: 0, second: 0 }))
+const selectionEnd = ref(TODAY.set({ hour: 23, minute: 59, second: 0 }))
+const calendar = ref(null)
+
+// Prepare computed
+const hoursBegin = computed(() => HOURS)
+const hoursEnd = computed(() => HOURS)
+const selectionDate = computed(() => selectionBegin.value.toFormat('ccc d LLL', { locale: 'fr' }))
+const selectionTimeBegin = computed(() => selectionBegin.value.toFormat('HH:mm', { locale: 'fr' }))
+const selectionTimeEnd = computed(() => selectionEnd.value.toFormat('HH:mm', { locale: 'fr' }))
+const calendarMonth = computed(() => selectionBegin.value.toFormat('LLLL yyyy', { locale: 'fr' }))
+const calendarDays = computed(() => {
+  // Prepare array of days
+  const selectedDT = selectionBegin.value
+  const days = []
+
+  // Determine the final days of the previous month until the last monday
+  let previousMonthDT = selectedDT.minus({ months: 1 }).endOf('month')
+  while (previousMonthDT.weekday !== 1) {
+    days.push({ dt: previousMonthDT })
+    previousMonthDT = previousMonthDT.minus({ days: 1 })
+  }
+  days.push({ dt: previousMonthDT })
+
+  // Complete array with seleted month days
+  days.reverse().push(
+    ...Array.from(
+      { length: selectedDT.endOf('month').day },
+      (_, day) => ({
+        dt: selectedDT.set({ day: day + 1 }),
+        selected: selectedDT.day.toString() === (day + 1).toString(),
+        current: true
+      })
+    )
+  )
+
+  // Complete array to with the next month beginning day
+  let nextMonthDT = selectedDT.plus({ months: 1 }).startOf('month')
+  while (nextMonthDT.weekday !== 1) {
+    days.push({ dt: nextMonthDT })
+    nextMonthDT = nextMonthDT.plus({ days: 1 })
+  }
+  return days
+})
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (newValue) {
+      console.log(newValue)
+      selectionBegin.value = DateTime.fromISO(newValue)
+    }
+  },
+  { immediate: true }
+)
+
+// Prepare methods
+const _emitChange = () => {
+  $emitters('change', {
+    date: selectionBegin.value.toISO(),
+    beginTime: selectionBegin.value.toISO(),
+    endTime: selectionEnd.value.toISO()
+  })
+}
+const _updateHour = (beginOrEnd, time) => {
+  const [hour, minute] = time.split(':')
+  if (beginOrEnd === 'begin') {
+    selectionBegin.value = selectionBegin.value.set({ hour, minute })
+  } else {
+    selectionEnd.value = selectionEnd.value.set({ hour, minute })
+  }
+  _emitChange()
+}
+const _select = (dt) => {
+  selectionBegin.value = dt.set({ hour: selectionBegin.value.hour, minute: selectionBegin.value.minute })
+  selectionEnd.value = dt.set({ hour: selectionEnd.value.hour, minute: selectionEnd.value.minute })
+  _emitChange()
+}
+const _nextMonth = () => {
+  selectionBegin.value = selectionBegin.value.plus({ month: 1 })
+  selectionEnd.value = selectionEnd.value.plus({ month: 1 })
+}
+const _previousMonth = () => {
+  selectionBegin.value = selectionBegin.value.minus({ months: 1 })
+  selectionEnd.value = selectionEnd.value.minus({ months: 1 })
+}
+const _toggle = () => {
+  display.value = !display.value
+}
+const _close = () => {
+  display.value = false
+}
+
+// Prepare directives
+onClickOutside(calendar, _close)
+</script>

package/components/forms/selects/select-enum.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      id="listbox-label"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <div
+      :class="{ 'mt-1':label }"
+      class="relative"
+    >
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        :class="{ 'ring-gray-50 border-gray-900':display, '!bg-gray-100 !text-gray-200': readOnly }"
+        :disabled="readOnly"
+        class="relative w-full bg-white rounded-md pl-3 pr-10 py-2 text-left cursor-pointer shadow-xs border border-gray-200 focus:outline-none focus:ring-gray-50 focus:border-black hover:border-black text-sm"
+        @click="_toggle"
+      >
+        <span :class="{ 'text-gray-700':!selectionText, '!text-gray-400': readOnly }" class="block truncate">
+          {{ selectionText || placeHolder }}
+        </span>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </span>
+      </button>
+      <transition
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="display"
+          ref="selectEnum"
+          class="absolute mt-1 w-full rounded-md bg-white shadow-lg z-50"
+        >
+          <ul tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" class="max-h-60 rounded-md p-2 text-base ring-1 ring-black/5 overflow-auto focus:outline-none sm:text-sm">
+            <li
+              v-for="(option, i) in list"
+              :id="`listbox-item-${i}`"
+              :key="option"
+              class="cursor-default select-none rounded-md relative py-2 pl-4 pr-4 text-gray-900 hover:bg-gray-100"
+              role="option"
+              @click="_select(option)"
+            >
+              <span :class="{ 'font-semibold':_isSelected(option) }" class="font-normal block truncate">
+                {{ option }}
+              </span>
+              <span
+                v-show="_isSelected(option)"
+                class="absolute text-gray-900 inset-y-0 right-0 flex items-center pr-4"
+              >
+                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                </svg>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside } from '@vueuse/core'
+
+// Prepare $emitters
+const $emitters = defineEmits(['change'])
+
+// Prepare props
+const $props = defineProps({
+  filter: {
+    type: Function,
+    default: () => () => true
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemKey: {
+    type: String,
+    default: 'name'
+  },
+  itemValue: {
+    type: String,
+    default: '_id'
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  enableMultiple: {
+    type: Boolean,
+    default: false
+  },
+  object: {
+    type: Boolean,
+    default: true
+  },
+  placeHolder: {
+    type: String,
+    default: 'Sélectionnez'
+  },
+  readOnly: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: [String, Array],
+    default: ''
+  }
+})
+
+// Prepare reactive data
+const display = ref(false)
+const selection = ref($props.enableMultiple ? [] : '')
+const selectEnum = ref(null)
+
+// Prepare computed
+const list = computed(() => {
+  const list = $props.items.filter($props.filter)
+  if ($props.object) {
+    return list.map(item => item[$props.itemKey])
+  }
+  return list
+})
+const selectionText = computed(() => {
+  const selectedItems = $props.object
+    ? $props.items.map(item => item[$props.itemKey]).filter(_isSelected)
+    : selection.value
+
+  return $props.enableMultiple ? selectedItems.join(', ') : $props.object ? selectedItems[0] : selectedItems
+})
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (newValue) {
+      selection.value = newValue
+    } else {
+      selection.value = $props.enableMultiple ? [] : ''
+    }
+  },
+  { immediate: true }
+)
+
+// Prepare methods
+const _isSelected = (option) => {
+  const val = $props.object
+  ? $props.items.find(item => item[$props.itemKey] === option)?.[$props.itemValue]
+  : option
+  return $props.enableMultiple ? selection.value.includes(val) : selection.value === val;
+}
+const _select = (option) => {
+  let val = option
+  if ($props.object) {
+    const { [$props.itemValue]: objectVal } = $props.items.find(({ [$props.itemKey]: val }) => val === option)
+    val = objectVal
+  }
+  if ($props.enableMultiple) {
+    const index = selection.value?.indexOf(val)
+    selection.value = index >= 0 ? selection.value.filter(check => check !== val) : [...selection.value, val]
+  } else {
+    selection.value = val
+    _close()
+  }
+  $emitters('change', selection.value)
+}
+const _toggle = () => {
+  display.value = !display.value
+}
+const _close = () => {
+  display.value = false
+}
+
+// Prepare directives
+onClickOutside(selectEnum, _close)
+</script>