@open-commune/web 0.1.3

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

@@ -0,0 +1,274 @@
+<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"
+    >
+      <input
+        v-model="selectionText"
+        id="combobox"
+        type="text"
+        role="combobox"
+        aria-controls="options"
+        aria-expanded="false"
+        :class="{ 'ring-gray-50 border-gray-900':display }"
+        :placeholder="placeHolder"
+        class="w-full bg-white rounded-md pl-3 pr-10 py-2 h-10 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"
+        @keyup="_search"
+        @click="_toggle"
+      >
+      <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>
+      <transition
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <div
+          v-if="display"
+          ref="selectRecord"
+          class="absolute mt-1 w-full rounded-md bg-white shadow-lg z-50"
+        >
+          <ul
+            abindex="-1"
+            role="listbox"
+            aria-labelledby="listbox-label"
+            aria-activedescendant="listbox-item-3"
+            class="max-h-60 rounded-md py-2 text-base ring-1 ring-black/5 overflow-auto focus:outline-none sm:text-sm"
+          >
+            <div v-if="groupByDirectParents">
+              <div v-for="({ title, children }, i) in options" :key="i" class="p-2 space-y-1">
+                <div class="border-b border-gray-200">
+                  <p class="pb-4 pl-4 pr-4 text-gray-500 font-light uppercase text-xs">
+                    {{ title }}
+                  </p>
+                </div>
+                <li
+                  v-for="({ title: childTitle }, j) in children"
+                  :key="`${childTitle}-${j}`"
+                  :class="{ 'bg-gray-100': _isSelected(childTitle) }"
+                  class="cursor-pointer select-none relative rounded-md py-2 pl-4 pr-4 text-gray-900 hover:bg-gray-100"
+                  @click="_select(childTitle)"
+                >
+                  <span :class="{ 'font-semibold':_isSelected(childTitle) }" class="font-normal block truncate">
+                    {{ childTitle }}
+                  </span>
+                  <span
+                    v-show="_isSelected(childTitle)"
+                    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>
+              </div>
+            </div>
+            <div v-else>
+              <li
+                v-for="({ title, relatedCollection }) in options"
+                :key="title"
+                :class="{ 'bg-gray-100': _isSelected(title) }"
+                class="cursor-pointer select-none relative rounded-md py-2 pl-4 pr-4 text-gray-900 hover:bg-gray-100"
+                @click="_select(title)"
+              >
+                <span :class="{ 'font-semibold':_isSelected(title) }" class="font-normal block truncate">
+                  {{ title }}
+                </span>
+                <span class="font-normal text-gray-600 block truncate">
+                  {{ relatedCollection }}
+                </span>
+                <span
+                  v-show="_isSelected(title)"
+                  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>
+            </div>
+          </ul>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside } from '@vueuse/core'
+import { useWorkspaceStore } from '~/store/layout/workspace'
+import { useModalStore } from '~/store/layout/modal'
+
+const { Record } = useModels()
+const workspaceStore = useWorkspaceStore()
+
+// Prepare emitters
+const $emitters = defineEmits(['change'])
+
+// Prepare props
+const $props = defineProps({
+  filter: {
+    type: Function,
+    default: () => () => true
+  },
+  onlyDirectParents: {
+    type: Boolean,
+    default: false
+  },
+  groupByDirectParents: {
+    type: Boolean,
+    default: false
+  },
+  collections: {
+    type: Array,
+    default: () => []
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  enableMultiple: {
+    type: Boolean,
+    default: false
+  },
+  placeHolder: {
+    type: String,
+    default: 'Rechercher...'
+  },
+  value: {
+    type: [String, Array],
+    default: ''
+  }
+})
+
+// Prepare reactive data
+const selectRecord = ref(null)
+const display = ref(false)
+const selection = ref('')
+const search = ref('')
+
+// Prepare computed
+const items = computed(() => {
+  const items = Record.repo
+    .where((record) => $props.collections.includes(record.relatedCollection) && record.title.toLowerCase().includes(search.value))
+    .get()
+
+  // atm. we use onRetrieve directly in page, it should be better to have this
+  // handled directly in `pinia-orm` lib
+  return items.map(Record.onRetrieve)
+})
+const options = computed(() => {
+  if ($props.groupByDirectParents) {
+    return items.value
+      .filter($props.filter)
+      .filter(({ directParent }) => !directParent)
+      .map(({ _id, ...rest }) => {
+        const children = items.value
+          .filter($props.filter)
+          .filter(({ directParent }) => directParent === _id)
+
+        return { children, ...rest }
+      }, [])
+  }
+  if ($props.onlyDirectParents) {
+    return items.value.filter($props.filter).filter(({ directParent }) => !directParent)
+  }
+  return items.value.filter($props.filter)
+})
+const selectionText = computed(() => {
+  if (display.value || search.value) {
+    return ''
+  }
+  if (selection.value) {
+    if ($props.enableMultiple) {
+      return selection.value
+        .map(_id => items.value.find(({ _id: check }) => check === _id))
+        .map((item) => item?.title)
+        .join(', ')
+    }
+    const item = items.value.find(({ _id }) => selection.value === _id)
+    return item?.title
+  }
+  return ''
+})
+
+// Prepare watchers
+watch(
+  () => $props.value,
+  (newValue) => {
+    if (!newValue || !newValue.length) {
+      selection.value = $props.enableMultiple ? [] : ''
+    }
+    if (newValue && newValue.length && newValue !== selection.value) {
+      if ($props.enableMultiple) {
+        selection.value = newValue.every(el => typeof el === 'object')
+          ? newValue.map(({ _id: value }) => value)
+          : [...newValue]
+      } else {
+        selection.value = typeof newValue === 'object'
+          ? newValue._id
+          : newValue
+      }
+    }
+  },
+  { immediate: true }
+)
+
+// Prepare methods
+const _isSelected = (option) => {
+  const { _id } = items.value.find(({ title }) => title === option)
+  if ($props.enableMultiple) {
+    return selection.value.includes(_id)
+  }
+  return selection.value === _id
+}
+
+const _search = (str) => {
+  search.value = str?.target?.value
+}
+
+const _toggle = () => {
+  display.value = !display.value
+  search.value = ''
+}
+
+const _close = () => {
+  display.value = false
+  search.value = ''
+}
+
+const _select = (option) => {
+  const { _id } = items.value.find(({ title }) => title === option)
+  if ($props.enableMultiple) {
+    const index = selection.value.indexOf(_id)
+    index >= 0 ? selection.value.splice(index, 1) : selection.value.push(_id)
+  } else {
+    selection.value = _id
+    _close()
+  }
+  $emitters('change', selection.value)
+}
+
+// Prepare lifecycle hooks
+onMounted(async () => {
+  await Promise.all(
+    $props.collections.map(
+      (collection) => Record.list(collection, workspaceStore.workspaceId, { limit: 500 })
+    )
+  )
+})
+
+// Prepare directives
+onClickOutside(selectRecord, _close)
+</script>

package/components/layout/headings/headings-collection.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-show="headingsStore.hasHeadings" class="border-b border-gray-200">
+    <div class="py-8 max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 flex items-start justify-between">
+      <div>
+        <h3 class="text-3xl leading-10 font-medium text-gray-900">
+          {{ headingsStore.headings.title }}
+        </h3>
+        <p class="mt-2 pb-4 text-sm text-gray-500">
+          {{ headingsStore.headings.description }}
+        </p>
+      </div>
+      <button-primary
+        v-if="headingsStore.headings.mainAction"
+        :label="headingsStore.headings.mainAction"
+        @click="$router.replace(`${$route.fullPath}/new`)"
+      />
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { useHeadingsStore } from '~/store/layout/headings'
+import ButtonPrimary from '~/components/elements/buttons/primary'
+
+const $route = useRoute()
+const $router = useRouter()
+const headingsStore = useHeadingsStore()
+</script>

package/components/layout/headings/headings-record.vue

@@ -0,0 +1,33 @@
+<template>
+  <div v-if="!isCreating" class="border-b border-gray-200">
+    <div class="py-8 max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 flex items-start justify-between">
+      <div class="flex flex-col items-start space-y-1">
+        <h3 class="text-3xl leading-10 font-medium text-gray-900">
+          {{ recordTitle }}
+        </h3>
+        <data-last-update v-if="record" :value="record" inline />
+        <data-display-badge-publish-status v-if="recordStatus" :status="recordStatus" />
+      </div>
+      <handler-publication-status :collection="collection" :model="'Record'" :record="record" />
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import dataLastUpdate from '~/components/data/display/row/data-last-update'
+import dataDisplayBadgePublishStatus from '~/components/data/display/row/data-display-badge-publish-status'
+import handlerPublicationStatus from '~/components/forms/handlers/handler-publication-status'
+
+const $route = useRoute()
+const { Record } = useModels()
+
+// Prepare computed
+const isCreating = computed(() => $route.params.record === 'new')
+// atm. we use onRetrieve directly in page, it should be better to have this
+// handled directly in `pinia-orm` lib
+const collection = computed(() => $route.params.collection)
+const record = computed(() => Record.onRetrieve(Record.repo.where('_id', $route.params.record).first()))
+const recordStatus = computed(() => record.value?.status)
+const recordTitle = computed(() => record.value?.title || '')
+</script>

package/components/layout/navigations/primary/dropdown-publish.vue

@@ -0,0 +1,147 @@
+<template>
+  <div v-if="record?.deployment?.vercel?.hook" class="relative">
+    <button
+      id="options-menu"
+      class="inline-flex items-center justify-center border border-transparent rounded-md shadow-sm text-sm text-white hover:bg-white dark:hover:bg-gray-950 hover:text-black focus:outline-none hover:border-black disabled:bg-gray-200 disabled:border-gray-300 disabled:text-gray-400"
+      :class="finish ? 'bg-green-400' : 'bg-black'"
+      aria-haspopup="true"
+      aria-expanded="true"
+      @click.prevent="_toggle"
+    >
+      <icon v-if="finish" icon="iconoir:window-check" class="text-white hover:text-primary h-9 w-9 p-2" />
+      <icon v-else-if="deploying" icon="ei:spinner-2" class="animate-spin h-9 w-9 p-1" />
+      <icon
+        v-else
+        icon="iconoir:upload-data-window"
+        class="text-white hover:text-primary h-9 w-9 p-2"
+      />
+    </button>
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="display"
+        ref="buttonPublish"
+        class="origin-top-right absolute right-0 p-2 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 z-10"
+      >
+        <div class="py-1 w-44" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+          <p class="text-xs text-gray-500 pb-2 space-y-2">
+            Domaine de publication:
+            <nuxt-link :to="record.deployment?.url" class="inline-flex items-center space-x-2 text-sm text-black my-1" target="_blank" external>
+              <span>{{ record.deployment?.url }}</span>
+              <icon
+                icon="lucide:external-link"
+                class="text-primary h-4 w-4"
+              />
+            </nuxt-link>
+          </p>
+          <button-primary
+            :disabled="publishing"
+            :loading="publishing"
+            label="confirmer"
+            class="w-full"
+            @click="_publish"
+          />
+          <div v-if="deploying || finish" class="p-2 border border-gray-300 rounded-md mt-2">
+            <p class="text-xs text-gray-400">
+              Patientez 2 à 5 minutes pour que votre site soit publié...
+            </p>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { onClickOutside, useIntervalFn } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
+import { useNotificationsStore } from '~/store/layout/notifications'
+import { useWorkspaceStore } from '~/store/layout/workspace'
+import buttonPrimary from '~/components/elements/buttons/primary'
+
+// Prepare reactive data
+const buttonPublish = ref(null)
+const display = ref(false)
+const loading = ref(true)
+const publishing = ref(false)
+const deploying = ref(false)
+const finish = ref(false)
+
+// Prepare composables
+const { Organization } = useModels()
+const { pause, resume, isActive } = useIntervalFn(
+  async() => {
+    loading.value = true
+    const deploymentState = await Organization.getDeployment()
+    deploying.value = deploymentState.state !== 'READY'
+    loading.value = false
+  },
+  10000,
+  { immediate: true, immediateCallback: true }
+)
+const $workspaceStore = useWorkspaceStore()
+const notificationsStore = useNotificationsStore()
+
+// Prepare computed
+const record = computed(() => $workspaceStore.workspace)
+
+// Prepare methods
+const _toggle = () => {
+  if (display.value) {
+    _close()
+  } else {
+    _open()
+  }
+}
+
+const _open = () => {
+  display.value = true
+  resume()
+}
+
+const _close = () => {
+  display.value = false
+  if (!deploying.value) {
+    pause()
+  }
+}
+
+const _publish = async () => {
+  publishing.value = true
+  try {
+    await Organization.createDeployment()
+    notificationsStore.add({ icon: 'iconoir:reload-window', type: 'default', title: 'Déploiement déclenché...' })
+    finish.value = true
+    setTimeout(() => { finish.value = false }, 8000)
+  } catch (err) {
+    const noHook = String(err?.message ?? '').includes('E_NO_DEPLOY_HOOK')
+    notificationsStore.add({
+      icon: 'iconoir:window-close',
+      type: 'warn',
+      title: noHook ? 'Aucun hook de déploiement configuré.' : 'Échec du déclenchement du déploiement.'
+    })
+  } finally {
+    publishing.value = false
+  }
+}
+
+// Prepare watch
+watch(deploying, async (after, before) => {
+  if (before === true && after === false) {
+    notificationsStore.add({ icon: 'iconoir:window-check', type: 'success', title: 'Déploiement terminé' })
+    finish.value = true
+    setTimeout(() => { finish.value = false }, 6000)
+  } else if (before === false && after === true) {
+    notificationsStore.add({ icon: 'iconoir:reload-window', type: 'default', title: 'Déploiement en cours...' })
+  }
+})
+
+// Prepare directives
+onClickOutside(buttonPublish, _close)
+</script>

package/components/layout/navigations/primary.vue

@@ -0,0 +1,132 @@
+<template>
+  <header class="border-b border-gray-200 relative">
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+      <div class="py-5 flex items-center justify-between">
+        <!-- Single-tenant : identité de la collectivité, sans sélecteur. -->
+        <nuxt-link to="/overview" class="flex items-center space-x-3">
+          <avatar-circular :place-holder="workspaceStore.workspaceName || 'C'" :media="workspaceStore.workspaceLogo" size="sm" />
+          <span class="font-medium">{{ workspaceStore.workspaceName }}</span>
+        </nuxt-link>
+        <div class="flex flex-row items-center justify-center space-x-2">
+          <dropdown-publish v-if="displayPublishButton" class="h-10" />
+          <button-secondary class="h-10" icon="lucide:message-circle-question" @click="_openForm()" />
+          <button-secondary class="h-10" label="Se déconnecter" @click="_logout()" />
+        </div>
+      </div>
+    </div>
+    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
+      <div class="hidden sm:block">
+        <nav class="-mb-px flex space-x-8 text-gray-500 font-light whitespace-nowrap tracking-wide text-sm" aria-label="Tabs">
+          <nuxt-link
+            v-for="({ title, route }) in navigationItems"
+            :key="route"
+            :to="route"
+            active-class="text-gray-900 border-b-2 border-gray-900 font-normal"
+            class="hover:text-gray-900 hover:font-normal border-transparent py-4 px-1"
+          >
+            {{ title }}
+          </nuxt-link>
+        </nav>
+      </div>
+      <p v-if="demoEnv" class="absolute bg-black rounded-b-lg text-white px-4 text-xs py-0.5">
+        beta
+      </p>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { useWorkspaceStore } from '~/store/layout/workspace'
+import avatarCircular from '~/components/elements/avatars/avatar-circular'
+import buttonSecondary from '~/components/elements/buttons/secondary'
+import dropdownPublish from '~/components/layout/navigations/primary/dropdown-publish'
+// import mobileButton from '~/components/template/navigation-section/mobile-section/Button'
+// import mobileMenu from '~/components/template/navigation-section/mobile-section/Menu'
+// import profileDropdown from '~/components/template/navigation-section/ProfileDropdown'
+
+const session = useSession()
+const { Collection } = useModels()
+const $ability = useAbility()
+const $router = useRouter()
+const $route = useRoute()
+const $config = useRuntimeConfig()
+
+const workspaceStore = useWorkspaceStore()
+
+// Prepare constants
+// Single-tenant : les écrans Organisations et Rôles n'ont plus d'objet
+// (une seule collectivité, rôles figés admin/rédacteur) — retirés de la nav.
+const DEFAULT_NAV_ITEMS = [
+  {
+    title: 'Accueil',
+    route: '/overview',
+    permission: 'manage:all'
+  },
+  {
+    title: 'Membres',
+    route: '/management/members',
+    permission: 'manage:all'
+  }
+]
+const WORKSPACE_NAV_ITEMS = [
+  {
+    title: 'Accueil',
+    route: '/overview',
+    permission: ''
+  },
+  {
+    title: 'Paramètres',
+    route: '/settings',
+    permission: 'admin:organization'
+  }
+]
+
+// Prepare computed data
+const displayPublishButton = computed(() => !!workspaceStore.workspaceId
+  && ($ability.can('manage:all')
+  || $ability.can('admin:organization')
+  || $ability.can('create:deployments'))
+)
+const navigationItems = computed(() => {
+  const items = []
+  // Display sub nav if necessary
+  if (workspaceStore.workspaceId) {
+    const [overview, ...subItemsRest] = WORKSPACE_NAV_ITEMS
+    const collections = Collection.repo.find(workspaceStore.workspaceCollections)
+    items.push(
+      // Single-tenant : les routes vivent à la racine, sans slug d'organisation.
+      ...[overview],
+      ...collections.map(({ name, slug }) => ({ title: name, route: `/${slug}` })),
+      ...subItemsRest
+    )
+  } else {
+    items.push(...DEFAULT_NAV_ITEMS)
+  }
+  // Filter on user permissions
+  return items.filter(({ permission }) => !permission || $ability.can(permission))
+})
+// L'image d'instance est COMMUNE à tous les clients : rien de spécifique n'y est
+// cuit. L'hôte servi est donc la seule source fiable pour distinguer une démo.
+const demoEnv = computed(() => {
+  const host = import.meta.client ? window.location.host : ''
+  return host.includes('.beta') || host.includes('localhost')
+})
+
+// Prepare methods
+const _openForm = () => {
+  // https://forms.fillout.com/t/vjkLG9ZXsLus
+  const formUrl = 'https://forms.fillout.com/t/vjkLG9ZXsLus'
+  const formWindow = window.open(formUrl, '_blank')
+  if (formWindow) {
+    // Browser has allowed it to be opened
+    formWindow.focus()
+  } else {
+    // Browser has blocked it
+    alert('Please allow popups for this website')
+  }
+}
+const _logout = async () => {
+  await session.logout()
+  $router.replace('/')
+}
+</script>

package/components/layout/notifications/notifications-list.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="fixed bottom-10 right-10 max-w-sm z-[55]">
+    <div v-if="notificationsStore.notifications.length" class="relative overflow-hidden space-y-2">
+      <notifications-default
+        v-for="notification of notificationsStore.notifications"
+        :key="notification.id"
+        v-bind="notification"
+        @close="notificationsStore.close(notification.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useNotificationsStore } from '~/store/layout/notifications'
+import notificationsDefault from '~/components/elements/notifications/default'
+
+const notificationsStore = useNotificationsStore()
+</script>