@open-commune/web 0.1.3

package/components/forms/layouts/form.vue

@@ -0,0 +1,203 @@
+<template>
+  <div v-show="attributes.length" class="space-y-4">
+    <div
+      v-for="({ property, component, componentOptions }, i) in attributes"
+      :key="i"
+      class="w-full"
+    >
+      <handler-collections v-if="component === 'handler-collections'" v-bind="componentOptions" :read-only="componentOptions.readOnly || loading" />
+      <handler-records v-if="component === 'handler-records'" v-bind="componentOptions" :read-only="componentOptions.readOnly || loading" />
+      <handler-tokens v-if="component === 'handler-tokens'" v-bind="componentOptions" :read-only="componentOptions.readOnly || loading" />
+      <handler-roles
+        v-if="component === 'handler-roles'"
+        :value="_get(property)"
+        v-bind="componentOptions"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <handler-schedules
+        v-if="component === 'handler-schedules'"
+        :value="_get(property)"
+        v-bind="componentOptions"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <handler-steps
+        v-if="component === 'handler-steps'"
+        :value="_get(property)"
+        v-bind="componentOptions"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <input-color-picker
+        v-if="component === 'input-color-picker'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <input-files-media
+        v-if="component === 'input-files-media'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <input-json
+        v-if="component === 'input-json'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <input-text
+        v-if="component === 'input-text'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <input-text-area
+        v-if="component === 'input-text-area'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <input-WYSIWYG
+        v-if="component === 'input-wysiwyg'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <input-toggle
+        v-if="component === 'input-toggle'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <input-location
+        v-if="component === 'input-location'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <select-enum
+        v-if="component === 'select-enum'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <select-collection-enum
+        v-if="component === 'select-collection-enum'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <select-record
+        v-if="component === 'select-label' || component === 'select-record'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      />
+      <!-- 
+      <select-model
+        v-if="component === 'select-model'"
+        v-bind="componentOptions"
+        :value="_get(property)"
+        :read-only="componentOptions.readOnly || loading"
+        @change="_update(property, $event)"
+      /> -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import handlerCollections from '~/components/forms/handlers/handler-collections'
+import handlerRecords from '~/components/forms/handlers/handler-records'
+import handlerRoles from '~/components/forms/handlers/handler-roles'
+import handlerSchedules from '~/components/forms/handlers/handler-schedules'
+import handlerTokens from '~/components/forms/handlers/handler-tokens'
+import handlerSteps from '~/components/forms/handlers/handler-steps'
+import inputColorPicker from '~/components/forms/inputs/input-color-picker'
+import inputJson from '~/components/forms/inputs/input-json'
+import inputLocation from '~/components/forms/inputs/input-location'
+import inputFilesMedia from '~/components/forms/inputs/input-files-media'
+import inputText from '~/components/forms/inputs/input-text'
+import inputTextArea from '~/components/forms/inputs/input-text-area'
+import inputWYSIWYG from '~/components/forms/inputs/input-editor'
+// import inputTimeSchedules from '@/components/forms/attributes/input-time-schedules'
+import inputToggle from '~/components/forms/inputs/input-toggle'
+import selectCollectionEnum from '~/components/forms/selects/select-collection-enum'
+import selectEnum from '~/components/forms/selects/select-enum'
+import selectRecord from '~/components/forms/selects/select-record'
+// import selectModel from '@/components/forms/attributes/select-model'
+
+// Prepare emitters
+const $emitters = defineEmits(['change'])
+
+// Prepare props
+const $props = defineProps({
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  attributes: {
+    type: Array,
+    default: () => []
+  },
+  record: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// Prepare reactive data
+const updateRecord = ref({})
+
+// Prepare methods
+const _get = (key) => {
+  const path = key.split('.');
+  let value = $props.record;
+
+  for (let i = 0; i < path.length; i++) {
+    const key = path[i];
+    value = value[key];
+
+    // If the nested property doesn't exist, return undefined
+    if (value === undefined) {
+      return undefined;
+    }
+  }
+
+  return value;
+}
+
+const _update = (key, value) => {
+  const path = key.split('.');
+  let targetObject = updateRecord.value;
+
+  for (let i = 0; i < path.length - 1; i++) {
+    const key = path[i];
+    targetObject = targetObject[key] = targetObject[key] || {};
+  }
+
+  const lastKey = path[path.length - 1];
+  targetObject[lastKey] = value;
+
+  $emitters('change', updateRecord.value)
+}
+
+// Prepare mounted
+onMounted(() => {
+  if ($props.record?._id) {
+    Object.assign(updateRecord.value, { _id: $props.record._id })
+  }
+})
+</script>

package/components/forms/layouts/layout.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="lg:grid lg:grid-flow-row lg:auto-rows-max lg:grid-cols-12 lg:gap-x-5">
+    <navigation
+      v-if="tabs.length"
+      :selection="selectedTab"
+      :tabs="tabs"
+      class="px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-2"
+      @select="_changeTab"
+    />
+    <div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-10">
+      <forms-section
+        v-for="({ componentOptions }, i) in currentSections"
+        :key="`form-layout-${i}`"
+        v-bind="{ record, ...componentOptions }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import navigation from '~/components/forms/layouts/navigation'
+import formsSection from '~/components/forms/layouts/section'
+
+// Prepare props
+const $props = defineProps({
+  record: {
+    type: Object,
+    default: () => ({})
+  },
+  layout: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Prepare reactive data
+const selectedTab = ref('')
+
+// Prepare computed
+const tabs = computed(() => $props.layout.map(({ title, icon }) => ({ title, icon })))
+const currentSections = computed(() => $props.layout.find(({ title }) => title === selectedTab.value)?.sections || [])
+
+// Prepare methods
+const _changeTab = (tab) => {
+  selectedTab.value = tab
+}
+</script>

package/components/forms/layouts/modal.vue

@@ -0,0 +1,96 @@
+<template>
+  <transition
+    enter-active-class="ease-out duration-200"
+    enter-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="ease-in duration-200"
+    leave-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <div v-if="display" class="fixed z-20 inset-0 overflow-y-auto" @keyup.escape="modalStore.close">
+      <div class="flex items-end justify-center min-h-screen text-center sm:block">
+        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+          <!-- `bg-inverted/50` et non `bg-gray-600 bg-opacity-50` : Tailwind v4 a
+               SUPPRIMÉ les utilitaires `bg-opacity-*`. Ignoré, il laissait le
+               voile à 100 % — un écran opaque bleu-gris qui masquait tout.
+               Le panneau, lui, porte `relative z-10` : sans position, un
+               élément ne peint pas au-dessus d'un frère positionné, même
+               placé après lui dans le document. Le voile passait par-dessus
+               la modale, qui paraissait grisée en second plan. -->
+          <div class="absolute inset-0 bg-inverted/50 transition-opacity" aria-hidden="true" />
+        </div>
+
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <transition
+          enter-active-class="ease-out duration-300"
+          enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+          leave-active-class="ease-in duration-200"
+          leave-class="opacity-100 translate-y-0 sm:scale-100"
+          leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div
+            v-if="display"
+            class="relative z-10 inline-block align-bottom bg-white sm:max-w-4xl w-full rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:p-6"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modal-headline"
+          >
+            <div>
+              <div class="my-3 text-center sm:mt-5">
+                <h3 id="modal-headline" class="text-lg leading-6 font-medium text-gray-900">
+                  {{ title }}
+                </h3>
+                <div class="mt-2">
+                  <p class="text-sm text-gray-500">
+                    {{ subTitle }}
+                  </p>
+                </div>
+              </div>
+              <form-default 
+                v-if="attributes.length"
+                :record="record"
+                :attributes="attributes"
+                @change="modalStore.updateRecord"
+              />
+            </div>
+            <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
+              <button-secondary
+                v-if="closeButton"
+                :label="closeButton"
+                @click="modalStore.close"
+              />
+              <button-primary
+                v-if="acceptButton"
+                :label="acceptButton"
+                @click="modalStore.submit"
+              />
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import formDefault from '~/components/forms/layouts/form'
+import buttonPrimary from '~/components/elements/buttons/primary'
+import buttonSecondary from '~/components/elements/buttons/secondary'
+import { useModalStore } from '~/store/layout/modal'
+
+const modalStore = useModalStore()
+
+// Prepare emits
+defineEmits(['keyup.escape'])
+
+// Prepare computed
+const display = computed(() => modalStore.display)
+const title = computed(() => modalStore.title)
+const subTitle = computed(() => modalStore.subTitle)
+const attributes = computed(() => modalStore.attributes)
+const record = computed(() => modalStore.record)
+const acceptButton = computed(() => modalStore.acceptButton)
+const closeButton = computed(() => modalStore.closeButton)
+</script>

package/components/forms/layouts/navigation.vue

@@ -0,0 +1,48 @@
+
+<template>
+  <nav class="space-y-1" aria-label="Sidebar">
+    <div
+      v-for="({ title }) in tabs"
+      :key="title"
+      :class="selection === title ? 'bg-gray-200 text-gray-900 font-normal' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-light'"
+      class="flex items-center px-3 py-2 text-sm rounded-md cursor-pointer"
+      @click="_select(title)"
+    >
+      <span class="truncate">
+        {{ title }}
+      </span>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+// Prepre emitters
+const $emitters = defineEmits(['select'])
+
+// Prepare props
+const $props = defineProps({
+  selection: {
+    type: String,
+    default: ''
+  },
+  tabs: {
+    type: Array,
+    default: () => []
+  }
+})
+
+// Prepare methods
+const _select = (tab) => {
+  if (tab) {
+    $emitters('select', tab)
+  }
+}
+
+// Prepare mounted
+onMounted(() => {
+  if (!$props.selection) {
+    const [{ title: first }] = $props.tabs
+    _select(first)
+  }
+})
+</script>

package/components/forms/layouts/section.vue

@@ -0,0 +1,118 @@
+<template>
+  <form class="border border-gray-200 sm:rounded-md" @submit.prevent="">
+    <div class="py-6 px-4 space-y-6 sm:p-6">
+      <div>
+        <h3 v-show="title" class="text-lg leading-6 font-medium text-gray-900">
+          {{ title }}
+        </h3>
+        <p v-show="description" class="mt-1 text-sm text-gray-500">
+          {{ description }}
+        </p>
+      </div>
+      <form-default
+        v-if="attributes.length"
+        :record="record"
+        :attributes="attributes"
+        :loading="isLoading"
+        @change="updateRecord = $event"
+      />
+    </div>
+    <div
+      v-show="hint || (attributes.length && !noAction)"
+      class="flex flex-row items-center px-4 py-3 bg-gray-50 border-t border-gray-200 text-right sm:px-6"
+      :class="hint ? 'justify-between' : 'justify-end'"
+    >
+      <p v-show="hint" class="text-sm text-gray-600">
+        {{ hint }}
+      </p>
+      <button-primary
+        v-show="attributes.length && !noAction"
+        :label="formButtonLabel"
+        :loading="isLoading"
+        @click="_save"
+      />
+    </div>
+  </form>
+</template>
+
+<script setup>
+import { useNotificationsStore } from '~/store/layout/notifications'
+import formDefault from '~/components/forms/layouts/form'
+import buttonPrimary from '~/components/elements/buttons/primary'
+
+const $models = useModels()
+const $route = useRoute()
+const $router = useRouter()
+const notificationsStore = useNotificationsStore()
+
+// Prepare emits
+const $emitters = defineEmits(['change'])
+
+// Define props
+const $props = defineProps({
+  record: {
+    type: Object,
+    default: () => ({})
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  attributes: {
+    type: Array,
+    default: () => []
+  },
+  hint: {
+    type: String,
+    default: ''
+  },
+  formButtonLabel: {
+    type: String,
+    default: 'Enregistrer'
+  },
+  noAction: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare reactive data
+const isLoading = ref(false)
+const updateRecord = ref({})
+
+// Prepare computed
+const isEditing = computed(() => Object.keys($props.record).includes('_id'))
+const currentCollection = computed(() => $route.params.collection)
+const currentModel = computed(() => $route.meta.preFetch?.[0])
+
+// Prepare methods
+const _save = async () => {
+  if (!$props.noAction) {
+    isLoading.value = true
+    try {
+      const { _id, ...record } = updateRecord.value
+      if (isEditing.value) {
+        await $models[currentModel.value].update($props.record._id, record, currentCollection.value)
+      } else {
+        const data = await $models[currentModel.value].create(record, currentCollection.value)
+        if (!isEditing.value) {
+          const splittedRoute = $route.path.split('/')
+          splittedRoute.pop()
+          $router.replace([...splittedRoute, data._id].join('/'))
+        }
+      }
+      notificationsStore.add({ title: `${$props.title} à jour` })
+    } catch (err) {
+      console.log(err)
+    } finally {
+      setTimeout(() => { isLoading.value = false }, 500)
+    }
+  } else {
+    $emitters('change', updateRecord.value)
+  }
+}
+</script>