@open-commune/web 0.1.3

package/editor/views/FileView.vue

@@ -0,0 +1,79 @@
+<template>
+  <NodeViewWrapper
+    as="div"
+    class="my-2 rounded-md border border-neutral-300 dark:border-neutral-700"
+    :class="{ 'ring-2 ring-neutral-400': selected }"
+  >
+    <div class="flex items-center gap-3 p-3">
+      <UIcon name="iconoir:page" class="size-6 shrink-0 text-neutral-500" />
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-sm font-medium">{{ title || 'Fichier' }}</p>
+        <p v-if="resolving" class="text-2xs text-neutral-400">résolution…</p>
+      </div>
+      <UButton
+        v-if="isPdf && src"
+        :icon="preview ? 'iconoir:eye-closed' : 'iconoir:eye'"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        :aria-label="preview ? 'Masquer l’aperçu' : 'Aperçu du PDF'"
+        @click="preview = !preview"
+      />
+      <UButton
+        v-if="src"
+        :to="src"
+        target="_blank"
+        icon="iconoir:open-new-window"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        aria-label="Ouvrir le fichier"
+      />
+    </div>
+    <!-- Native browser PDF viewer: no bundled viewer library. -->
+    <embed
+      v-if="preview && isPdf && src"
+      :src="src"
+      type="application/pdf"
+      class="h-96 w-full rounded-b-md"
+    >
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+// Media resolves on mount through the extension's `fetch` option. Resolved
+// values only rewrite attrs when they actually differ, so displaying a
+// document never mutates it.
+import { computed, onMounted, ref } from 'vue'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+const resolving = ref(false)
+const resolved = ref(null)
+const preview = ref(false)
+
+const title = computed(() => resolved.value?.title ?? props.node.attrs.title)
+const src = computed(() => resolved.value?.src ?? props.node.attrs.src)
+const isPdf = computed(() =>
+  /\.pdf($|\?)/i.test(src.value ?? '') || /\.pdf$/i.test(title.value ?? ''),
+)
+
+onMounted(async () => {
+  const { id } = props.node.attrs
+  const fetch = props.extension.options.fetch
+  if (!id || !fetch) return
+  resolving.value = true
+  try {
+    const media = await fetch({ id })
+    resolved.value = media
+    const next = {}
+    if (media?.src && media.src !== props.node.attrs.src) next.src = media.src
+    if (media?.title && media.title !== props.node.attrs.title) next.title = media.title
+    if (Object.keys(next).length) props.updateAttributes(next)
+  } catch {
+    // Stored attrs remain displayed; resolution retries on next mount.
+  } finally {
+    resolving.value = false
+  }
+})
+</script>

package/editor/views/ImageView.vue

@@ -0,0 +1,56 @@
+<template>
+  <NodeViewWrapper
+    as="figure"
+    class="my-2"
+    :class="{ 'ring-2 ring-neutral-400': selected }"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      :alt="node.attrs.alt || ''"
+      :title="title || undefined"
+      class="max-w-full rounded-md"
+      draggable="false"
+    >
+    <div
+      v-else
+      class="flex items-center gap-3 rounded-md border border-dashed border-neutral-300 p-6 text-neutral-400"
+    >
+      <UIcon name="iconoir:media-image" class="size-6" />
+      <span class="text-sm">{{ resolving ? 'résolution…' : 'Image indisponible' }}</span>
+    </div>
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+// Same resolution contract as FileView: fetch on mount, attrs rewritten
+// only when values actually differ.
+import { computed, onMounted, ref } from 'vue'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+const resolving = ref(false)
+const resolved = ref(null)
+
+const title = computed(() => resolved.value?.title ?? props.node.attrs.title)
+const src = computed(() => resolved.value?.src ?? props.node.attrs.src)
+
+onMounted(async () => {
+  const { id } = props.node.attrs
+  const fetch = props.extension.options.fetch
+  if (!id || !fetch) return
+  resolving.value = true
+  try {
+    const media = await fetch({ id })
+    resolved.value = media
+    const next = {}
+    if (media?.src && media.src !== props.node.attrs.src) next.src = media.src
+    if (media?.title && media.title !== props.node.attrs.title) next.title = media.title
+    if (Object.keys(next).length) props.updateAttributes(next)
+  } catch {
+    // Stored attrs remain displayed; resolution retries on next mount.
+  } finally {
+    resolving.value = false
+  }
+})
+</script>

package/editor/views/UploadView.vue

@@ -0,0 +1,71 @@
+<template>
+  <NodeViewWrapper as="div" class="my-2">
+    <UFileUpload
+      v-model="file"
+      :accept="node.attrs.accept || undefined"
+      :label="node.attrs.accept ? 'Téléversez une image' : 'Téléversez un fichier'"
+      description="Ou glissez-le directement dans l'éditeur"
+      :preview="false"
+      class="min-h-32"
+    >
+      <template #leading>
+        <UAvatar
+          :icon="loading ? 'iconoir:refresh' : 'iconoir:page'"
+          size="xl"
+          :ui="{ icon: [loading && 'animate-spin'] }"
+        />
+      </template>
+    </UFileUpload>
+  </NodeViewWrapper>
+</template>
+
+<script setup>
+// Uploads the picked file then swaps this placeholder for the real node.
+import { ref, watch } from 'vue'
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+
+const props = defineProps(nodeViewProps)
+const toast = useToast()
+const file = ref(null)
+const loading = ref(false)
+
+/**
+ * Where this slot sits RIGHT NOW, sized from the node the document actually
+ * holds. An upload takes seconds: a position read before it, or a size taken
+ * from the captured `props.node`, describes a document that has moved on.
+ * Null when the slot is gone — then there is nothing left to replace.
+ */
+const range = () => {
+  const pos = props.getPos()
+  if (typeof pos !== 'number') return null
+  const node = props.editor.state.doc.nodeAt(pos)
+  return node ? { from: pos, to: pos + node.nodeSize } : null
+}
+
+watch(file, async (picked) => {
+  if (!picked || loading.value) return
+  loading.value = true
+  try {
+    const upload = props.extension.options.upload
+    if (!upload) throw new Error('no upload handler')
+    const { id, src, title } = await upload(picked)
+    const at = range()
+    if (!at) return
+    // One replacement rather than a delete then an insert: the second half of
+    // a two-step edit addresses a document the first half has already shifted.
+    props.editor.chain().focus().insertContentAt(at, {
+      type: picked.type.startsWith('image/') ? 'image' : 'file',
+      attrs: { id, src, title },
+    }).run()
+  } catch (error) {
+    // The cause reaches the console: an author reporting a failed upload
+    // should not be the only source of truth about it.
+    console.error('[upload]', picked.name, error)
+    toast.add({ title: `Téléversement échoué : ${picked.name}`, color: 'error' })
+    const at = range()
+    if (at) props.editor.chain().deleteRange(at).run()
+  } finally {
+    loading.value = false
+  }
+})
+</script>

package/layouts/default.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="min-h-screen">
+    <!-- <NuxtLoadingIndicator /> -->
+    <primary-navigation />
+    <headings-collection />
+    <main class="py-8 max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 h-full">
+      <section>
+        <slot />
+      </section>
+    </main>
+    <form-modal />
+    <notifications-list />
+  </div>
+</template>
+
+<script setup>
+import primaryNavigation from '~/components/layout/navigations/primary'
+import headingsCollection from '~/components/layout/headings/headings-collection'
+import formModal from '~/components/forms/layouts/modal'
+import notificationsList from '~/components/layout/notifications/notifications-list'
+</script>

package/layouts/entrance.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="min-w-screen min-h-screen">
+    <slot />
+    <notifications-list />
+  </div>
+</template>
+
+<script setup>
+import notificationsList from '~/components/layout/notifications/notifications-list'
+</script>

package/layouts/record.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="min-h-screen">
+    <!-- <NuxtLoadingIndicator /> -->
+    <primary-navigation />
+    <headings-record />
+    <main class="py-8 max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 h-full">
+      <section>
+        <slot />
+      </section>
+    </main>
+    <form-modal />
+    <notifications-list />
+  </div>
+</template>
+
+<script setup>
+import primaryNavigation from '~/components/layout/navigations/primary'
+import headingsRecord from '~/components/layout/headings/headings-record'
+import formModal from '~/components/forms/layouts/modal'
+import notificationsList from '~/components/layout/notifications/notifications-list'
+</script>

package/middleware/00.auth.global.js

@@ -0,0 +1,16 @@
+// Auth guard. Public: login ('/'), password and invitation flows, the
+// external-session callback, and any page declaring `auth: false`.
+const PUBLIC_PREFIXES = ['/password/', '/welcome/', '/auth/callback']
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (to.meta.auth === false) return
+
+  const session = useSession()
+  if (session.token.value) {
+    if (to.path === '/') return navigateTo('/overview', { replace: true })
+    return
+  }
+
+  if (to.path === '/' || PUBLIC_PREFIXES.some((p) => to.path.startsWith(p))) return
+  return navigateTo('/', { replace: true })
+})

package/middleware/01.instance.global.js

@@ -0,0 +1,21 @@
+import { useWorkspaceStore } from '~/store/layout/workspace'
+
+// Single-tenant (upgrade-admin-nuxt4) : remplace les middlewares
+// 01.list-workspaces / 02.set-workspace — plus de résolution par segment de
+// route, l'instance EST l'organisation. Charge la collectivité une fois
+// après authentification et pose les permissions du rôle.
+export default defineNuxtRouteMiddleware(async () => {
+  const session = useSession()
+  if (!session.isAuthenticated.value) return
+
+  const workspaceStore = useWorkspaceStore()
+  workspaceStore.updateAbilities()
+
+  if (!workspaceStore.workspaceId) {
+    const $models = useModels()
+    if (!$models.Organization.repo.all().length) {
+      await $models.Organization.list()
+    }
+    await workspaceStore.updateOrganization($models.Organization.repo.where().first())
+  }
+})

package/middleware/03.verify-permissions.global.js

@@ -0,0 +1,11 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  const { can } = useAbility()
+
+  if (to.meta.permissions?.length) {
+    console.log('[midd.] - verifying member permissions')
+    if (to.meta.permissions.some((permission) => !can(permission))) {
+      return abortNavigation()
+    }
+    return
+  }
+})

package/middleware/04.prefetch-page.global.js

@@ -0,0 +1,18 @@
+// @review: c'est quoi le prefetch ? Ca me semble overengineered ça, pourquoi on gère pas ça dans le useAsyncData de nuxt js plutot ?
+export default defineNuxtRouteMiddleware(async (to) => {
+  const session = useSession()
+  const $models = useModels()
+
+  if (session.isAuthenticated.value && to.meta.preFetch?.length) {
+    console.log('[midd.] - prefetch page', to.params.collection, to.params.record)
+    if (to.params.record && to.params.record !== 'new') {
+      const [model] = to.meta.preFetch
+      await $models[model].read(to.params.record, to.params.collection)
+      return
+    }
+    // Use collection name in case of collection's records pages
+    await Promise.all(
+      to.meta.preFetch.map(model => $models[model].list(to.params.collection, undefined, { limit: 50 }))
+    )
+  }
+})

package/middleware/05.headings-page.global.js

@@ -0,0 +1,25 @@
+import { useHeadingsStore } from '~/store/layout/headings'
+
+// @review: meme remarque ça me semble overengineered ça, pourquoi c'est pas gérer directement au niveau, des pages ça a un interet ?
+export default defineNuxtRouteMiddleware((to, from) => {
+  const session = useSession()
+  if (session.isAuthenticated.value) {
+    console.log('[midd.] - update headings', to.params.collection)
+    const headingsStore = useHeadingsStore()
+    const { Collection } = useModels()
+
+    // If we are currently on a collection page, we retrieve the headings directly from collection definitions
+    if (to.params.collection) {
+      const currentCollection = Collection.repo.where('slug', to.params.collection).first()
+      // Collection inconnue (ex : URL restaurée vers une collection supprimée) :
+      // on renvoie à l'accueil du workspace plutôt que de planter l'app.
+      if (!currentCollection) {
+        return navigateTo('/overview')
+      }
+      Object.assign(to.meta, { headings: currentCollection.headings })
+    }
+
+    // Parse page meta headings
+    headingsStore.updateHeadings({ ...(to.meta.headings || {}) })
+  }
+})

package/models/_commun.js

@@ -0,0 +1,243 @@
+/**
+ * Pont legacy ↔ Commun partagé par les modèles : cache des définitions de
+ * collections, conversion attributes[] ↔ fields[] (même table que le
+ * migrateur packages/legacy-migrate) et conversion des VALEURS de champs.
+ *
+ * Contrat de valeurs (iso legacy Mongo, où tout le complexe était stringifié) :
+ * - rich-text : STRING côté widgets (input-wysiwyg) ↔ OBJET côté serveur
+ * - steps[].content : STRING côté widgets ↔ OBJET côté serveur
+ * - tout le reste (media/relation ids, dates, nombres, json/schedules/location)
+ *   circule tel quel.
+ */
+
+// ── Mapping composants de formulaire ↔ types de champs Commun ──────────────
+export const COMPONENT_TO_FIELD_TYPE = {
+  'input-text': 'text',
+  'input-textarea': 'text',
+  'input-text-area': 'text',
+  'input-slug': 'text',
+  'input-number': 'number',
+  'input-toggle': 'boolean',
+  'input-checkbox': 'boolean',
+  'input-date': 'date',
+  'input-datetime': 'date',
+  'input-wysiwyg': 'rich-text',
+  'input-files-media': 'media',
+  'input-file-media': 'media',
+  'input-location': 'json',
+  'select-enum': 'select',
+  'select-record': 'relation',
+  'handler-records': 'relation',
+  'handler-schedules': 'json',
+  'array-of-steps': 'steps',
+  'handler-steps': 'steps'
+}
+
+// Composant par défaut pour AFFICHER un champ Commun dans l'éditeur de
+// collections (perte assumée : text ne distingue plus input-text/textarea).
+export const FIELD_TYPE_TO_COMPONENT = {
+  text: 'input-text',
+  'rich-text': 'input-wysiwyg',
+  number: 'input-number',
+  boolean: 'input-toggle',
+  date: 'input-date',
+  media: 'input-files-media',
+  relation: 'select-record',
+  select: 'select-enum',
+  steps: 'array-of-steps',
+  json: 'input-text'
+}
+
+// ── Cache module de l'annuaire des membres (affichage « modifié par ») ─────
+let _usersById = null
+
+export async function getUsersById(trpc) {
+  if (!_usersById) {
+    try {
+      const directory = await trpc.users.directory.query()
+      _usersById = new Map(directory.map((user) => [user.id, user]))
+    } catch {
+      // Annuaire indisponible (session expirée…) : affichage sans nom.
+      return new Map()
+    }
+  }
+  return _usersById
+}
+
+/** id utilisateur Commun → objet user legacy attendu par avatar-with-text. */
+export function userRefToLegacy(usersById, id) {
+  if (!id) return {}
+  const user = usersById.get(id)
+  return user ? { _id: id, firstName: user.name, lastName: '' } : {}
+}
+
+// ── Cache module des définitions (rafraîchi par Collection.list/mutations) ──
+let _definitions = null
+
+export async function getDefinitions(trpc) {
+  if (!_definitions) {
+    const definitions = await trpc.collections.list.query()
+    _definitions = new Map(definitions.map((definition) => [definition.slug, definition]))
+  }
+  return _definitions
+}
+
+export function invalidateDefinitions() {
+  _definitions = null
+}
+
+export async function getDefinition(trpc, slug) {
+  const definitions = await getDefinitions(trpc)
+  const definition = definitions.get(slug)
+  if (!definition) throw new Error(`E_UNKNOWN_COLLECTION: ${slug}`)
+  return definition
+}
+
+// ── Conversion des valeurs de champs ────────────────────────────────────────
+function tryParse(raw) {
+  try {
+    return JSON.parse(raw)
+  } catch {
+    // Convention migrateur : un contenu non-JSON est encapsulé.
+    return { type: 'doc', legacyHtml: String(raw) }
+  }
+}
+
+/** Valeur serveur (objets) → valeur widget (stringifiée si rich-text/steps). */
+export function toClientValue(field, value) {
+  if (value == null) return value
+  switch (field?.type) {
+    case 'rich-text':
+      return typeof value === 'string' ? value : JSON.stringify(value)
+    case 'steps':
+      return (Array.isArray(value) ? value : []).map((step) => ({
+        ...step,
+        content: typeof step?.content === 'string'
+          ? step.content
+          : JSON.stringify(step?.content ?? {})
+      }))
+    default:
+      return value
+  }
+}
+
+/** Valeur widget → valeur serveur (parse rich-text/steps, boolean normalisé). */
+export function toServerValue(field, value) {
+  if (value == null) return value
+  switch (field?.type) {
+    case 'rich-text':
+      return typeof value === 'string' ? tryParse(value) : value
+    case 'steps':
+      return (Array.isArray(value) ? value : []).map((step) => ({
+        ...step,
+        content: typeof step?.content === 'string' ? tryParse(step.content) : step?.content
+      }))
+    case 'boolean':
+      return Boolean(value)
+    default:
+      return value
+  }
+}
+
+// ── Conversion des définitions attributes[] ↔ fields[] ─────────────────────
+/** FieldDefinition Commun → attribut legacy (édition de collections). */
+export function fieldToAttribute(field) {
+  return {
+    name: field.name,
+    component: FIELD_TYPE_TO_COMPONENT[field.type] ?? 'input-text',
+    required: Boolean(field.required),
+    options: { hidden: Boolean(field.hidden) },
+    headings: { label: field.label ?? field.name },
+    ...(field.options?.length ? { enum: field.options } : {}),
+    ...(field.target ? { componentOptions: { collection: field.target } } : {})
+  }
+}
+
+/** Attribut legacy → FieldDefinition Commun (null si non mappable). */
+export function attributeToField(attribute) {
+  const name = String(attribute.name ?? '')
+  // title/name/slug sont des COLONNES d'entrée, pas des champs (iso migrateur).
+  if (['title', 'name', 'slug'].includes(name)) return null
+  const component = String(attribute.component ?? attribute.type ?? '')
+  const type = COMPONENT_TO_FIELD_TYPE[component]
+  if (!type) return null
+
+  const options = Array.isArray(attribute.enum)
+    ? attribute.enum.map(String)
+    : Array.isArray(attribute.componentOptions?.options)
+      ? attribute.componentOptions.options.map(String)
+      : undefined
+
+  const field = {
+    name: name.replace(/[^a-zA-Z0-9_]/g, '_').replace(/^_+/, '') || 'field',
+    label: String(attribute.headings?.label ?? name),
+    type,
+    required: Boolean(attribute.required),
+    hidden: Boolean(attribute.options?.hidden ?? attribute.componentOptions?.hidden),
+    ...(type === 'select' && options?.length ? { options } : {}),
+    ...(type === 'relation'
+      ? { target: String(attribute.componentOptions?.collection ?? 'unknown') }
+      : {})
+  }
+  // Un select sans options ne passe pas la validation serveur — dégradé en texte.
+  if (type === 'select' && !options?.length) return { ...field, type: 'text' }
+  return field
+}
+
+// ── Projections d'entités Commun → enregistrements legacy ──────────────────
+/** Entry Commun → record legacy aplati par onRetrieve côté composants. */
+export function entryToRecord(definition, entry, usersById = new Map()) {
+  const fieldsByName = new Map(definition.fields.map((field) => [field.name, field]))
+  return {
+    _id: entry.id,
+    title: entry.title,
+    slug: entry.slug,
+    path: '',
+    status: entry.status,
+    relatedCollection: definition.slug,
+    records: entry.related ?? [],
+    attributes: Object.entries(entry.data ?? {}).map(([name, value]) => ({
+      name,
+      value: toClientValue(fieldsByName.get(name), value)
+    })),
+    createdBy: userRefToLegacy(usersById, entry.createdBy),
+    updatedBy: userRefToLegacy(usersById, entry.updatedBy),
+    publishedAt: entry.publishedAt ?? '',
+    createdAt: entry.createdAt,
+    updatedAt: entry.updatedAt
+  }
+}
+
+/** CollectionDefinition Commun → collection legacy. */
+export function definitionToCollection(definition) {
+  return {
+    _id: definition.id,
+    name: definition.name,
+    slug: definition.slug,
+    description: definition.description ?? '',
+    headings: definition.headings ?? {},
+    display: definition.display ?? {},
+    editor: definition.editor ?? {},
+    attributes: (definition.fields ?? []).map(fieldToAttribute),
+    organization: '',
+    createdBy: {},
+    updatedBy: {},
+    createdAt: definition.createdAt,
+    updatedAt: definition.updatedAt
+  }
+}
+
+/** Media Commun (objects signés) → media legacy. */
+export function mediaToLegacy(media) {
+  return {
+    _id: media.id,
+    originalName: media.filename,
+    mime: media.mime,
+    objects: media.objects ?? {},
+    organization: '',
+    createdBy: '',
+    updatedBy: '',
+    createdAt: media.createdAt,
+    updatedAt: media.updatedAt
+  }
+}

package/models/_factory.js

@@ -0,0 +1,34 @@
+import { useRepo } from 'pinia-orm'
+import { useWorkspaceStore } from '~/store/layout/workspace'
+
+const HOOK_DEFAULT = (val) => val
+
+/**
+ * Couche d'accès au monolithe Commun : chaque modèle implémente ses méthodes
+ * via le client tRPC (plan admin). L'interface publique legacy est conservée
+ * (read/list/create/update/remove + repo pinia-orm + hooks onRetrieve/onSave)
+ * pour ne pas toucher aux pages/composants.
+ */
+export default class ModelAPI {
+
+  constructor(model, baseURL) {
+    const { entity, editForms, onRetrieve, onSave } = model
+    this.baseURL = baseURL
+    this.entity = entity
+    this.editForms = editForms?.()
+    this.onRetrieve = onRetrieve || HOOK_DEFAULT
+    this.onSave = onSave || HOOK_DEFAULT
+    this.repo = useRepo(model)
+    this.workspace = useWorkspaceStore()
+    this.trpc = useTrpc()
+  }
+
+  // Chaque modèle surcharge ce dont il a besoin — iso convention legacy
+  // (Entrance/Media jetaient déjà E_UNKNOWN_ENDPOINT sur les verbes absents).
+  async read() { throw new Error('E_UNKNOWN_ENDPOINT') }
+  async list() { throw new Error('E_UNKNOWN_ENDPOINT') }
+  async create() { throw new Error('E_UNKNOWN_ENDPOINT') }
+  async update() { throw new Error('E_UNKNOWN_ENDPOINT') }
+  async remove() { throw new Error('E_UNKNOWN_ENDPOINT') }
+
+}