@open-commune/web 0.1.3

package/components/forms/handlers/handler-schedules.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="relative block w-full">
+    <label
+      v-if="label"
+      id="listbox-label"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <list-table
+      v-if="periodsDataList.length"
+      :headers="TABLE_HEADERS"
+      :items="periodsDataList"
+      :actions="['remove']"
+      :class="{ 'mt-1': label }"
+      class="col-span-4 bg-gray-100 p-2"
+      @remove="_removePeriod"
+    />
+    <div v-if="displayPeriodHandler" class="flex flex-col space-y-1 my-4">
+      <div class="inline-flex w-full items-center space-x-2">
+        <select-date
+          :time-picker="enableTime"
+          :time-end="!enableToDate"
+          :value="periodFromDate"
+          class="w-1/4"
+          @change="_updateCurrentPeriod('begin', $event)"
+        />
+        <select-date
+          v-if="enableToDate"
+          :time-picker="enableTime"
+          :value="periodToDate"
+          class="w-1/4"
+          @change="_updateCurrentPeriod('end', $event)"
+        />
+        <select-enum
+          v-if="enablePeriodicity"
+          :items="PERIODICITY"
+          :item-key="'label'"
+          :item-value="'value'"
+          :value="periodPeriodicity"
+          place-holder="Récurrence"
+          class="w-1/4"
+          @change="periodPeriodicity = $event"
+        />
+        <button-secondary label="Ajouter date(s)" class="whitespace-nowrap" @click="_addPeriod" />
+        <button-tertiary v-if="selection.periods?.length" label="Annuler" class="!px-0" @click="displayPeriodHandler = false" />
+      </div>
+      <div class="flex flex-col justify-start">
+        <input-toggle
+          :value="enableToDate || enablePeriodicity"
+          :default-value="false"
+          :description="'Date de fin différente'"
+          :icon="false"
+          small
+          @change="_toggleToDate"
+        />
+        <input-toggle
+          :value="enableTime"
+          :default-value="false"
+          :description="'Inclure des horaires'"
+          :icon="false"
+          small
+          @change="_toggleTime"
+        />
+        <input-toggle
+          :value="enablePeriodicity"
+          :default-value="false"
+          :description="'Récurrent'"
+          :icon="false"
+          small
+          @change="_togglePeriodicity"
+        />
+      </div>   
+    </div>
+    <div v-else class="inline-flex w-full justify-end">
+      <button-tertiary label="Ajouter une autre date" class="!px-0" @click="displayPeriodHandler = true" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DateTime, Interval } from 'luxon'
+import listTable from '~/components/data/lists/data-lists-table'
+import selectDate from '~/components/forms/selects/select-date'
+import selectEnum from '~/components/forms/selects/select-enum'
+import inputToggle from '~/components/forms/inputs/input-toggle'
+import buttonSecondary from '~/components/elements/buttons/secondary'
+import buttonTertiary from '~/components/elements/buttons/tertiary'
+
+// Prepare constants
+const PERIODICITY = [
+  { label: 'Tous les jours', value: 'DAILY' },
+  { label: 'Tous les semaines', value: 'WEEKLY' },
+  { label: 'Tous les mois', value: 'MONTHLY' },
+  { label: 'Chaque année', value: 'YEARLY' },
+]
+const TABLE_HEADERS = [
+  {
+    property: 'Période',
+    component: 'data-summary',
+    nestedValue: false  
+  },
+  {
+    title: '',
+    component: 'actions',
+    componentOptions: {
+      options: [
+        { label: 'Supprimer', action: 'remove' }
+      ]
+    }
+  }
+]
+
+// Prepare props
+const $props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Prepare $emitters
+const $emitters = defineEmits(['keyup.enter', 'change'])
+
+// Prepare data
+const selection = ref({})
+const displayPeriodHandler = ref(true)
+const periodFromDate = ref('')
+const periodToDate = ref('')
+const periodPeriodicity = ref('UNIQUE')
+const enableToDate = ref(false)
+const enableTime = ref(false)
+const enablePeriodicity = ref(false)
+
+// Prepare computed
+const periodsDataList = computed(
+  () => selection.value?.periods?.map(
+    ({ fromDate, toDate, periodicity }) => ({
+      title: Interval.fromISO(`${fromDate}/${toDate}`, { locale: 'fr' }).toFormat('ccc d LLL à H:mm', { locale: 'fr' }),
+      description: PERIODICITY.find(({ value }) => value === periodicity)?.label || 'Une seule fois',
+      fromDate,
+      toDate
+    })
+  ) || []
+)
+// Prepare methods
+const _resetDisplay = () => {
+  periodFromDate.value = ''
+  periodToDate.value = ''
+  periodPeriodicity.value = 'UNIQUE'
+  enableToDate.value = false
+  enableTime.value = false
+  enablePeriodicity.value = false
+  displayPeriodHandler.value = false
+}
+const _togglePeriodicity = (value) => {
+  enablePeriodicity.value = value
+  enableToDate.value = value
+}
+const _toggleToDate = (value) => {
+  enableToDate.value = value
+}
+const _toggleTime = (value) => {
+  enableTime.value = value
+}
+const _updateCurrentPeriod = (beginOrEnd, data) => {
+  if (beginOrEnd === 'begin') {
+    periodFromDate.value = data.beginTime
+    if (!enableToDate.value) {
+      periodToDate.value = data.endTime
+    }
+  } else {
+    periodToDate.value = data.date
+  }
+}
+const _addPeriod = () => {
+  if (!selection.value?.periods) {
+    selection.value = { periods: [] }
+  }
+  // La date AFFICHÉE par défaut compte même sans clic dans le calendrier —
+  // le widget hérité enregistrait des périodes VIDES dans ce cas (fromDate '').
+  const fromDate = periodFromDate.value ||
+    DateTime.now().setZone('Europe/Paris').set({ second: 0, millisecond: 0 }).toISO()
+  const toDate = periodToDate.value || fromDate
+  selection.value.periods.push({
+    fromDate,
+    toDate,
+    periodicity: periodPeriodicity.value
+  })
+  $emitters('change', selection.value)
+  _resetDisplay()
+}
+const _removePeriod = (val) => {
+  const indexToRemove = selection.value.periods?.findIndex(
+    ({ fromDate, toDate }) => fromDate === val.fromDate && toDate === val.toDate
+  )
+  if (indexToRemove >= 0) {
+    selection.value.periods?.splice(indexToRemove, 1)
+  }
+  $emitters('change', selection.value)
+}
+
+// prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (newValue?.periods?.length) {
+      selection.value = newValue
+      displayPeriodHandler.value = !selection.value?.periods?.length
+    }
+  },
+  { immediate: true }
+)
+</script>

package/components/forms/handlers/handler-steps.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="relative block w-full">
+    <label v-if="label" id="listbox-label" class="block text-2xs font-light tracking-wider text-gray-500 uppercase">
+      {{ label }}
+    </label>
+    <!-- <div class="bg-gray-200 text-gray-500 text-sm rounded-md w-full p-4">
+      /!\ Navigation should be based on organization.collections array only<br>
+      Collections that does not belong to organization can't be updated or deleted only enabled / disabled<br>
+      Let user duplicate an existing collection for this organization only
+    </div> -->
+    <button-secondary class="my-1" label="Ajouter une étape" @click="_openModalForm('add')" />
+    <list-table
+      :headers="TABLE_HEADERS"
+      :items="selection"
+      :actions="['update', 'remove']"
+      @update="_openModalForm('update', $event)"
+      @remove="_handleStep('remove', $event)"
+    />
+  </div>
+</template>
+
+<script setup>
+import listTable from '~/components/data/lists/data-lists-table'
+import buttonSecondary from '~/components/elements/buttons/secondary'
+import { useModalStore } from '~/store/layout/modal'
+
+const { open } = useModalStore()
+
+// prepare constants
+const TABLE_HEADERS = [
+  {
+    title: 'Nom',
+    property: 'name',
+    component: 'data-text'
+  },
+  {
+    title: 'Statut',
+    property: 'status',
+    component: 'data-text'
+  },
+  {
+    title: '',
+    component: 'actions'
+  }
+]
+
+// Prepare props
+const $props = defineProps({
+  label: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Prepare $emitters
+const $emitters = defineEmits(['keyup.enter', 'change'])
+
+// Prepare reactive data
+const selection = ref([])
+
+// Prepare methods
+const _handleStep = async (action, data = {}) => {
+  switch (action) {
+    case 'add':
+      selection.value.push({ ...data, _id: selection.value.length })
+      break
+    case 'update':
+      selection.value[data._id] = data
+      break
+    case 'remove':
+      selection.value.splice(data._id, 1)
+      selection.value = selection.value.map((val, index) => ({ ...val, _id: index }))
+      break
+    default:
+      throw new Error('E_UNHANDLED')
+  }
+}
+
+const _openModalForm = (action, record) => {
+  open({
+    onSubmit: async (data) => _handleStep(action, { _id: record?._id, ...data }),
+    details: {
+      title: `${action === 'add' ? 'Créer' : 'Modifier'} une étape`,
+      subTitle: 'Vous pouvez détailler votre étape ici.',
+      acceptButton: `${action === 'add' ? 'Créer' : 'Modifier'}`,
+      closeButton: 'Annuler'
+    },
+    attributes: [
+      {
+        property: 'name',
+        componentOptions: {
+          label: 'Titre de l\'étape',
+          name: 'name'
+        },
+        component: 'input-text'
+      },
+      {
+        property: 'description',
+        componentOptions: {
+          label: 'Description de l\'étape',
+          name: 'description'
+        },
+        component: 'input-text-area'
+      },
+      {
+        property: 'status',
+        componentOptions: {
+          label: 'Etat de l\'étape',
+          name: 'status',
+          items: ['Planifié', 'En cours', 'Réalisé'],
+          object: false
+        },
+        component: 'select-enum'
+      },
+      {
+        property: 'content',
+        componentOptions: {
+          label: 'Contenu de l\'étape',
+          name: 'content'
+        },
+        component: 'input-wysiwyg'
+      }
+    ],
+    record
+  })
+}
+
+// prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (newValue) {
+      selection.value = newValue.map((val, index) => ({ _id: index, ...val }))
+    }
+  },
+  { immediate: true }
+)
+watch(
+  selection,
+  (newValue) => $emitters('change', newValue),
+  { immediate: true }
+)
+</script>

package/components/forms/handlers/handler-tokens.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="relative block w-full">
+    <button-secondary class="my-1" label="Ajouter un token" @click="_openModalForm" />
+    <list-table
+      :headers="TABLE_HEADERS"
+      :items="tokens"
+      :actions="['remove']"
+      @remove="_removeToken($event)"
+    />
+  </div>
+</template>
+
+<script setup>
+import listTable from '~/components/data/lists/data-lists-table'
+import buttonSecondary from '~/components/elements/buttons/secondary'
+import { useModalStore } from '~/store/layout/modal'
+
+const { Token } = useModels()
+const { open } = useModalStore()
+
+// Prepare constants
+const TABLE_HEADERS = [
+  {
+    title: 'Nom',
+    property: 'name',
+    component: 'data-text'
+  },
+  {
+    title: 'Token',
+    property: 'token',
+    component: 'data-text'
+  },
+  {
+    title: '',
+    component: 'actions'
+  }
+]
+
+// Prepare computed data
+const tokens = computed(() => Token.repo.all())
+
+// Prepare methods
+const _createToken = async (data) => {
+  await Token.create(data)
+}
+
+const _removeToken = async ({ _id }) => {
+  await Token.remove(_id)
+}
+
+const _openModalForm = (action, record) => {
+  open({
+    onSubmit: _createToken,
+    details: {
+      title: 'Créer un token',
+      subTitle: 'Entrez un nom pour votre token afin de l\'identifier facilement.',
+      acceptButton: 'Créer',
+      closeButton: 'Annuler'
+    },
+    attributes: [
+      {
+        property: 'name',
+        componentOptions: {
+          placeHolder: 'ex: landing pages, mobile app, ... ',
+          name: 'name'
+        },
+        component: 'input-text'
+      }
+    ]
+  })
+}
+
+// Prepare lifecle hooks
+onMounted(async () => {
+  if (!tokens.value.length) {
+    await Token.list()
+  }
+})
+</script>

package/components/forms/inputs/input-color-picker.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="relative">
+    <label
+      :for="name"
+      class="block text-2xs font-light tracking-wider text-gray-500 uppercase"
+    >
+      {{ label }}
+    </label>
+    <div class="inline-flex items-center w-full space-x-2">
+      <div class="relative mt-1 rounded-md shadow-sm">
+        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+          <div class="h-5 w-5 mt-1 rounded-full bg-white" :style="`background-color: ${data}`" />
+        </div>
+        <input
+          :id="name"
+          v-model="data"
+          :name="name"
+          :class="{ 'mt-1':!!label }"
+          :placeholder="placeHolder"
+          :disabled="disabled"
+          type="text"
+          class="block w-full rounded-md py-2 px-3 pl-10 shadow-xs border border-gray-200 disabled:bg-gray-100 focus:outline-none focus:ring-gray-50 focus:border-black sm:text-sm"
+          @keyup.enter="$emit('enter')"
+        >
+      </div>
+      <button
+        :class="{ 'mt-1':!!label }"
+        class="border border-gray-200 w-auto h-full text-sm py-1.5 px-2 font-medium rounded-md text-gray-900 hover:text-black bg-transparent focus:outline-none focus:ring-gray-50 focus:border-black"
+        @click="_toggle"
+      >
+        <svg
+          class="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 26 26"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
+          />
+        </svg>
+      </button>
+    </div>
+    <transition
+      leave-active-class="transition ease-in duration-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="display"
+        ref="inputColorPicker"
+        class="border border-gray-300 origin-top-right absolute right-0 top-full mt-2 rounded-md shadow-lg z-20"
+      >
+        <div class="rounded-md bg-white shadow-xs p-2">
+          <div class="flex">
+            <div v-for="(color, i) in COLORS" :key="i">
+              <div
+                v-for="variant in color"
+                :key="variant"
+                :style="`background-color: ${variant};`"
+                class="cursor-pointer w-6 h-6 rounded-full mx-1 my-1"
+                @click="_select(variant)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside } from '@vueuse/core'
+
+// Prepare constants
+const COLORS = [
+  ['#E2E8F0', '#64748B', '#1E293B'],
+  ['#E5E7EB', '#6B7280', '#1F2937'],
+  ['#FECACA', '#EF4444', '#991B1B'],
+  ['#FED7AA', '#F97316', '#9A3412'],
+  ['#FDE68A', '#F59E0B', '#92400E'],
+  ['#FEF08A', '#EAB308', '#854D0E'],
+  ['#D9F99D', '#84CC16', '#3F6212'],
+  ['#BBF7D0', '#22C55E', '#166534'],
+  ['#A7F3D0', '#10B981', '#065F46'],
+  ['#99F6E4', '#14B8A6', '#115E59'],
+  ['#A5F3FC', '#06B6D4', '#155E75'],
+  ['#BAE6FD', '#0EA5E9', '#075985'],
+  ['#BFDBFE', '#3B82F6', '#1E40AF'],
+  ['#C7D2FE', '#6366F1', '#3730A3'],
+  ['#DDD6FE', '#8B5CF6', '#5B21B6'],
+  ['#E9D5FF', '#A855F7', '#6B21A8'],
+  ['#F5D0FE', '#D946EF', '#86198F'],
+  ['#FBCFE8', '#EC4899', '#9D174D'],
+  ['#FECDD3', '#F43F5E', '#9F1239']
+]
+
+// Prepare $emitters
+const $emitters = defineEmits(['change'])
+
+// Prepare props
+const $props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  name: {
+    type: String,
+    default: 'input'
+  },
+  placeHolder: {
+    type: String,
+    default: ''
+  },
+  value: {
+    type: String,
+    default: ''
+  }
+})
+
+// Prepare reactive data
+const inputColorPicker = ref(null)
+const display = ref(false)
+const data = ref('')
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    data.value = newValue
+  },
+  { immediate: true }
+)
+watch(
+  data,
+  (newValue) => $emitters('change', newValue)
+)
+
+// Prepare methods
+const _toggle = () => {
+  display.value = !display.value
+}
+const _close = () => {
+  display.value = false
+}
+const _select = (color) => {
+  data.value = color
+  _close()
+}
+// Prepare directives
+onClickOutside(inputColorPicker, _close)
+</script>