@open-commune/web 0.1.3

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

@@ -0,0 +1,189 @@
+<template>
+  <div class="relative block w-full">
+    <!-- <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 collection" @click="_openModalForm('add')" />
+    <list-table
+      :headers="TABLE_HEADERS"
+      :items="collections"
+      :actions="['update', 'remove']"
+      @update="_openModalForm('update', $event)"
+      @remove="_handleCollection('remove', $event)"
+      @usage="_updateCollectionUsage($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'
+import { useWorkspaceStore } from '~/store/layout/workspace'
+
+const { Organization, Collection } = useModels()
+const { open } = useModalStore()
+const $workspaceStore = useWorkspaceStore()
+
+// prepare constants
+const TABLE_HEADERS = [
+  {
+    title: 'Utilisation',
+    property: 'usage',
+    component: 'data-toggle'
+  },
+  {
+    title: 'Nom',
+    property: 'name',
+    component: 'data-text'
+  },
+  {
+    title: 'Organisation',
+    property: 'organization',
+    component: 'data-badge'
+  },
+  {
+    title: 'Dernière modification',
+    nestedValue: false,
+    alignRight: true,
+    component: 'data-last-update',
+    componentOptions: {
+      inline: true
+    }
+  },
+  {
+    title: '',
+    component: 'actions'
+  }
+]
+
+// Prepare dynamic data
+const availableCollections = ref([])
+
+// Prepare computed
+const organizationId = computed(() => $workspaceStore.workspaceId)
+const organizationPath = computed(() => $workspaceStore.workspacePath)
+const organizationCollections = computed(() => $workspaceStore.workspaceCollections)
+const collections = computed(() => {
+  const collectionRecords = Collection.repo.all()
+  return collectionRecords.map(({ _id, ...rest }) => ({ _id, usage: organizationCollections.value.includes(_id), ...rest }))
+})
+
+// Prepare methods
+const _updateCollectionUsage = async ({ _id, usage }) => {
+  if (usage && !organizationCollections.value.includes(_id)) {
+    await Organization.update(organizationId.value, { collections: [...organizationCollections.value, _id] })
+  }
+  if (!usage && organizationCollections.value.includes(_id)) {
+    await Organization.update(organizationId.value, { collections: [...organizationCollections.value.filter(check => check !== _id)] })
+  }
+}
+
+const _handleCollection = async (action, data = {}) => {
+  const { _id } = data
+  switch (action) {
+    case 'add':
+      await Collection.create(data)
+      break
+    case 'update':
+      await Collection.update(_id, data)
+      break
+    case 'remove':
+      await Collection.remove(_id)
+      break
+    default:
+      throw new Error('E_UNHANDLED')
+  }
+}
+
+const _openModalForm = (action, record) => {
+  console.log(action, record)
+  open({
+    onSubmit: async (data) => _handleCollection(action, data),
+    details: {
+      title: `${action === 'add'? 'Créer' : 'Modifier'} une collection`,
+      subTitle: 'Entrez un nom pour votre collection afin de l\'identifier facilement.',
+      acceptButton: `${action === 'add' ? 'Créer' : 'Modifier'}`,
+      closeButton: 'Annuler'
+    },
+    attributes: [
+      {
+        property: 'name',
+        componentOptions: {
+          label: 'Titre de la collection',
+          name: 'name'
+        },
+        component: 'input-text'
+      },
+      {
+        property: 'slug',
+        componentOptions: {
+          label: 'Slug de la collection',
+          name: 'slug'
+        },
+        component: 'input-text'
+      },
+      {
+        property: 'description',
+        componentOptions: {
+          label: 'Description de la collection',
+          name: 'description'
+        },
+        component: 'input-text-area'
+      },
+      {
+        property: 'attributes',
+        componentOptions: {
+          label: 'Attribut(s) de la collection',
+          name: 'attributes'
+        },
+        component: 'input-json'
+      },
+      {
+        property: 'editor',
+        componentOptions: {
+          label: 'Editeur de la collection',
+          name: 'editor'
+        },
+        component: 'input-json'
+      },
+      {
+        property: 'headings',
+        componentOptions: {
+          label: 'Titres de la collection',
+          name: 'headings'
+        },
+        component: 'input-json'
+      },
+      {
+        property: 'display',
+        componentOptions: {
+          label: 'Affichage de la collection',
+          name: 'display'
+        },
+        component: 'input-json'
+      }
+    ],
+    record
+  })
+}
+
+// Prepare lifecyle hooks
+onMounted(async () => {
+  if (!collections.value.length) {
+    await Collection.list()
+  }
+  if (!availableCollections.value.length) {
+    const parents = organizationPath.value.split('/')
+    if (parents.length) {
+      parents.pop()
+      const results = await Promise.all(
+        parents.map(parent => Collection.list(undefined, parent))
+      )
+      availableCollections.value = results.flat()
+    }
+  }
+})
+</script>

package/components/forms/handlers/handler-publication-status.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="relative">
+    <div class="flex items-center w-36 text-left shadow-xs text-sm" @click="_toggle">
+      <button
+        class="focus:outline-none border border-black text-black block truncate cursor-default px-4 py-2 w-full rounded-l-md"
+      >
+        {{ actionLabel }}
+      </button>
+      <button
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        class="flex items-center p-2 rounded-r-md cursor-pointer bg-black focus:outline-none border border-black"
+      >
+        <svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </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="publicationStatusHandler"
+        class="absolute flex flex-col justify-center right-0 mt-1 p-4 space-y-2 w-64 rounded-md bg-white shadow-lg z-50"
+      >
+        <!-- <alert sort="info" :description="actionAlert" /> -->
+        <!-- <ul tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" class="text-base overflow-auto focus:outline-none sm:text-sm">
+          <li
+            v-for="({ label, option }, i) in list"
+            :id="`listbox-item-${i}`"
+            :key="option"
+            class="cursor-pointer select-none relative py-2 pl-4 pr-4 text-gray-900 hover:bg-gray-100"
+            role="option"
+            @click="_updateStatus(option)"
+          >
+            <span class="font-normal block truncate">
+              {{ label }}
+            </span>
+          </li>
+        </ul> -->
+        <!-- si publish dans les permissions -->
+        <tertiary-button
+          v-if="status === 'draft'"
+          :label="'Valider la ressource'"
+          @click="_updateStatus('ready')"
+        />
+        <tertiary-button
+          v-if="['draft', 'waiting'].includes(status)"
+          :label="'Publier la ressource'"
+          @click="_updateStatus('published')"
+        />
+        <primary-button
+          :label="`${actionLabel} la ressource`"
+          class="mt-1"
+          @click="_updateStatus(actionTo)"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside } from '@vueuse/core'
+// import alert from '~/components/template/content-section/Alert'
+import primaryButton from '~/components/elements/buttons/primary'
+import tertiaryButton from '~/components/elements/buttons/tertiary'
+
+// Prepare props
+const $props = defineProps({
+  collection: {
+    type: String,
+    default: ''
+  },
+  model: {
+    type: String,
+    default: ''
+  },
+  record: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// Prepare emitters
+const $emitters = defineEmits(['select', 'loaded', 'loading'])
+
+// Prepare composables
+const { Record } = useModels()
+
+// Prepare constants
+const STATUSES_LIST = [
+  { label: 'Brouillon', option: 'draft' },
+  { label: 'En cours de valiation', option: 'waiting' },
+  { label: 'Prêt', option: 'ready' },
+  // { label: '', option: 'scheduled' },
+  { label: 'Publié', option: 'published' }
+]
+const STATUSES_ACTIONS = [
+  {
+    label: 'Soumettre',
+    alert: 'Une fois soumise, cette ressource devra être validée avant publication.',
+    from: 'draft',
+    to: 'waiting'
+  },
+  {
+    label: 'Valider',
+    // ability: this.canValidate,
+    alert: 'Une fois validée, cette ressource devra être publiée afin de la rendre disponible sur votre site web.',
+    from: 'waiting',
+    to: 'ready'
+  },
+  {
+    label: 'Publier',
+    // ability: this.canPublish,
+    alert: 'Une fois publiée, cette ressource apparaîtré sur votre site web.',
+    from: 'ready',
+    to: 'published' // scheduled
+  },
+  // {
+  //   label: '',
+  // alert: '',
+  //   from: 'scheduled',
+  //   to: ''
+  // },
+  {
+    label: 'Dé-publier',
+    // ability: this.canPublish,
+    alert: 'Attention, cette resource actuellement en ligné, une fois dé-publiée, cette ressource n\'apparaîtra plus sur votre site web.',
+    from: 'published',
+    to: 'ready'
+  }
+]
+
+// Prepare data
+const display = ref(false)
+const publicationStatusHandler = ref(null)
+
+// Prepare computed
+const status = computed(() => $props.record?.status)
+const actionLabel = computed(() => STATUSES_ACTIONS.find(({ from }) => from === status.value)?.label)
+const actionAlert = computed(() => STATUSES_ACTIONS.find(({ from }) => from === status.value)?.alert)
+const actionTo = computed(() => STATUSES_ACTIONS.find(({ from }) => from === status.value)?.to)
+// const canValidate = computed(() => {
+//   const { $auth, $props: { model } } = this
+//   return $auth.hasScope('manage:all') || $auth.hasScope(`validate:${model.toLowerCase()}s`)
+// })
+// const canPublish = computed(() => {
+//   const { $auth, $props: { model } } = this
+//   return $auth.hasScope('manage:all') || $auth.hasScope(`publish:${model.toLowerCase()}s`)
+// })
+
+// Prepare methods
+const _select = (option) => {
+  let val = option
+  if ($props.object) {
+    const { [$props.itemValue]: objectVal } = $props.items.find(({ [$props.itemKey]: val }) => val === option)
+    val = objectVal
+  }
+  _close()
+  $emitters('select', val)
+}
+
+const _getLabel = (value) => {
+  const { label = '' } = STATUSES_ACTIONS.find(({ from }) => from === value) || {}
+  return label
+}
+const _updateStatus = async (status) => {
+  $emitters('loading')
+  const { _id } = $props.record
+  try {
+    await Record.update(_id, { status }, $props.collection)
+  } catch (err) {
+    console.log(err)
+  } finally {
+    // await this.$api[model].read(collection, _id)
+    $emitters('loaded')
+    _close()
+  }
+}
+const _toggle = () => {
+  display.value = !display.value
+}
+const _close = () => {
+  display.value = false
+}
+// Prepare directives
+onClickOutside(publicationStatusHandler, _close)
+</script>

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

@@ -0,0 +1,138 @@
+<template>
+  <div class="relative block w-full">
+    <button-secondary class="my-1" label="Ajouter une thématique" @click="_openModalForm('add')" />
+    <!-- <list-table
+      :headers="TABLES_HEADERS"
+      :items="items"
+      :actions="['update', 'remove']"
+      @update="_openModalForm('update', $event)"
+      @remove="_handleRecord('remove', $event)"
+    /> -->
+    <!-- TODO: replace by data-list-table? -->
+    <data-list :items="items" :density="1" :density-children="1" :group-by="'directParent'" :item-value="'_id'" class="space-y-8">
+      <template #item="{ item }">
+        <data-list-row
+          :item="item"
+          :headers="ROW_DEFINITION"
+          @click="_openModalForm('update', item)"
+          class="mb-2 py-1 border-b border-b-gray-200 rounded-t-md"
+        />
+      </template>
+      <template #item-child="{ item: itemChild, isStart, isLast }">
+        <data-list-row
+          :item="itemChild"
+          :headers="ROW_DEFINITION"
+          @click="_openModalForm('update', itemChild)"
+          :class="{ 'rounded-t-md': isStart, 'rounded-b-md': isLast }"
+          class="py-0.5"
+        />
+      </template>
+    </data-list>
+  </div>
+</template>
+
+<script setup>
+import dataList from '~/components/data/lists/data-list'
+import dataListRow from '~/components/data/display/row'
+import buttonSecondary from '~/components/elements/buttons/secondary'
+import { useModalStore } from '~/store/layout/modal'
+
+const { Collection, Record } = useModels()
+const { open } = useModalStore()
+
+// Prepare constants
+const ROW_DEFINITION = [
+  {
+    property: '_id',
+    alignleft: true,
+    component: 'data-label'
+  },
+  {
+    component: 'data-spacer',
+    grow: true
+  },
+  {
+    nestedValue: false,
+    alignRight: true,
+    component: 'data-last-update',
+    componentOptions: {
+      inline: true
+    }
+  },
+  {
+    title: '',
+    component: 'actions',
+    componentOptions: {
+      options: [
+        { label: 'Modifier', action: 'update' },
+        { label: 'Supprimer', action: 'remove' }
+      ]
+    }
+  }
+]
+
+// Prepare props
+const $props = defineProps({
+  collection: {
+    type: String,
+    default: ''
+  },
+  alwaysPublished: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Prepare computed
+const items = computed(() => {
+  const items = Record.repo.where('relatedCollection', $props.collection).get()
+  // atm. we use .map(onRetrieve) directly in page & components, it should be better to have this
+  // handled directly in `pinia-orm` lib
+  return items.map(Record.onRetrieve)
+})
+const collectionAttributes = computed(() => {
+  const collectionRecords = Collection.repo.all()
+  return collectionRecords.find(({ slug }) => slug === $props.collection)?.editor?.componentOptions?.layout?.[0]?.sections?.[0]?.componentOptions?.attributes || []
+})
+
+// Prepare methods
+const _handleRecord = async (action, data = {}) => {
+  const { _id } = data
+  if ($props.alwaysPublished) {
+    data.status = 'published'
+  }
+  switch (action) {
+    case 'add':
+      await Record.create(data, $props.collection)
+      break
+    case 'update':
+      await Record.update(_id, data, $props.collection)
+      break
+    case 'remove':
+      await Record.remove(_id, $props.collection)
+      break
+    default:
+      throw new Error('E_UNHANDLED')
+  }
+}
+const _openModalForm = (action, record) => {
+  open({
+    onSubmit: async (data) => _handleRecord(action, data),
+    details: {
+      title: `${action === 'add' ? 'Créer' : 'Modifier'} une thématique`,
+      subTitle: 'Entrez un nom pour votre thématique afin de l\'identifier facilement.',
+      acceptButton: `${action === 'add' ? 'Créer' : 'Modifier'}`,
+      closeButton: 'Annuler'
+    },
+    attributes: collectionAttributes.value,
+    record
+  })
+}
+
+// Prepare lifecyle hooks
+onMounted(async () => {
+  if (!items.value.length) {
+    await Record.list($props.collection)
+  }
+})
+</script>

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

@@ -0,0 +1,176 @@
+<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="grid grid-cols-5 space-x-2 mb-2" :class="{ 'mt-1': label }">
+      <div class="inline-flex col-span-4 space-x-1">
+        <select-enum
+          :items="organizations"
+          :value="currentOrganization"
+          place-holder="Organisation"
+          class="w-full"
+          @change="currentOrganization = $event"
+        />
+        <select-enum
+          :items="roles"
+          :value="currentRole"
+          :item-key="'name'"
+          :read-only="!currentOrganization"
+          place-holder="Role"
+          class="w-full"
+          @change="currentRole = $event"
+        />
+        <select-enum
+          :items="collections"
+          :value="currentCollections"
+          :read-only="!currentOrganization || !currentRole"
+          place-holder="Collection(s)"
+          class="w-full"
+          enable-multiple
+          @change="currentCollections = $event"
+        />
+      </div>
+      <button-secondary class="col-span-1" label="Ajouter un rôle" @click="_addRole" />
+      <!-- @click="_openModalForm('add')" -->
+    </div>
+    <list-table
+      :headers="TABLE_HEADERS"
+      :items="selection"
+      :actions="['remove']"
+      class="bg-gray-100 p-2"
+      @remove="_removeRole"
+    />
+    <!-- @update="_openModalForm('update', $event)"
+    @remove="_handle('remove', $event)" -->
+  </div>
+</template>
+
+<script setup>
+import { computedAsync } from '@vueuse/core'
+import listTable from '~/components/data/lists/data-lists-table'
+import selectEnum from '~/components/forms/selects/select-enum'
+import buttonSecondary from '~/components/elements/buttons/secondary'
+
+// Prepare composable
+const { Organization, Role, Collection } = useModels()
+
+// Prepare constants
+const TABLE_HEADERS = [
+  {
+    title: 'Organisation',
+    nestedValue: false,
+    component: 'data-summary',
+    componentOptions: {
+      titleKey: 'organization',
+      descriptionKey: 'role',
+    }
+  },
+  {
+    property: 'collections',
+    component: 'data-text'
+  },
+  {
+    component: 'data-spacer',
+    grow: true
+  },
+  {
+    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 currentOrganization = ref(null)
+const currentRole = ref(null)
+const currentCollections = ref([])
+
+// Prepare computed
+const organizations = computed(() => Organization.repo.all())
+const roles = computed(() => Role.repo.all())
+const collections = computedAsync(
+  async () => {
+    if (currentOrganization.value) {
+      const collections = await Collection.list(undefined, currentOrganization.value)
+      console.log(collections)
+      return [{ _id: '*', name: 'Toutes les collections (*)'}, ...collections]
+    }
+    return []
+  },
+  [],
+)
+
+
+// Prepare methods
+const _addRole = () => {
+  selection.value.push({
+    organization: currentOrganization.value,
+    role: currentRole.value,
+    collections: currentCollections.value
+  })
+  currentOrganization.value = null
+  currentRole.value = null
+  currentCollections.value = []
+}
+const _removeRole = (val) => {
+  const indexToRemove = selection.value.findIndex(
+    ({ organization, collections, role }) =>organization === val.organization
+      && role === val.role
+      && val.collections.every((_id) => collections.includes(_id))
+  )
+  if (indexToRemove >= 0) {
+    selection.value.splice(indexToRemove, 1)
+  }
+}
+
+// prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (newValue) {
+      selection.value = newValue
+    }
+  },
+  { immediate: true }
+)
+watch(
+  selection,
+  (newValue) => $emitters('change', newValue),
+  { immediate: true }
+)
+
+// Prepare lifecycle hook
+onMounted(async () => {
+  if (!roles.value.length) {
+    await Role.list()
+  }
+  if (!organizations.value.length) {
+    await Organization.list()
+  }
+})
+</script>