@tekkare/romulus 0.1.250 → 0.1.252

package/layer/app/components/OipResourceDrawerLink.vue

@@ -0,0 +1,40 @@
+<!--
+  Le lien du tiroir vers la fiche dans son app d'origine, pose sous le titre
+  du bandeau : « Ouvrir la page » dans l'app d'origine elle-meme (navigation
+  sur place, le tiroir se ferme), « Ouvrir dans <app> » ailleurs (onglet).
+-->
+<template>
+  <template v-if="origin">
+    <NuxtLink v-if="origin.local" :to="origin.url" class="oip-rdl" @click="emit('leave')">
+      {{ lang === "en" ? "Open the page" : "Ouvrir la page" }}
+      <RmIcon name="ArrowSquareOut" :size="14" />
+    </NuxtLink>
+    <a v-else :href="origin.url" target="_blank" rel="noopener" class="oip-rdl">
+      {{ lang === "en" ? `Open in ${origin.name}` : `Ouvrir dans ${origin.name}` }}
+      <RmIcon name="ArrowSquareOut" :size="14" />
+    </a>
+  </template>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  origin: { local: boolean; url: string; name: string } | null;
+  lang?: "fr" | "en";
+}>();
+const emit = defineEmits<{ leave: [] }>();
+</script>
+
+<style scoped>
+.oip-rdl {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  width: fit-content;
+  margin-top: var(--space-4);
+  color: var(--color-primary);
+  font-family: var(--font-sans);
+  font-size: var(--font-12);
+  font-weight: 400;
+  text-decoration: underline;
+}
+</style>

package/layer/app/components/OipResourceField.vue

@@ -0,0 +1,41 @@
+<!--
+  Un champ texte d'une fiche de ressource : son intitule, puis sa valeur,
+  surlignee par la recherche en cours. Rendu des fiches de France Augmented
+  Science (anciennement CommonForm), partage par les vues du layer.
+-->
+<template>
+  <div class="oip-rf">
+    <p class="oip-rf__label">{{ label }}</p>
+    <RmTextHighlight class="oip-rf__value" :queries="highlight" :text="text" :lang="lang" />
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string;
+    text: string;
+    highlight?: string[];
+    lang?: "fr" | "en";
+  }>(),
+  { highlight: () => [], lang: "fr" },
+);
+</script>
+
+<style scoped>
+.oip-rf {
+  display: grid;
+  gap: var(--space-4);
+}
+.oip-rf__label {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--font-12);
+  line-height: 14px;
+}
+.oip-rf__value {
+  color: var(--text-primary);
+  font-size: var(--font-14);
+  line-height: 160%;
+}
+</style>

package/layer/app/components/OipResourceGenericCard.vue

@@ -0,0 +1,54 @@
+<!--
+  La carte d'une ressource que le layer n'a pas de vue pour montrer : famille,
+  icone, titre et sous-titre, tels que le registre des types de l'API les
+  decrit (`display`). Un type ajoute au registre s'affiche ainsi dans toutes
+  les apps, sans attendre une vue a lui.
+-->
+<template>
+  <RmLoadingState v-if="pending" spinner />
+  <RmResultCard v-else :actions="false" :lang="lang">
+    <template #title>
+      <span class="oip-rg__title">
+        <RmIcon :name="display?.icon || 'File'" :size="16" />
+        {{ heading }}
+      </span>
+    </template>
+    <template v-if="subtitle || family" #subtitle>{{ [family, subtitle].filter(Boolean).join(" · ") }}</template>
+  </RmResultCard>
+</template>
+
+<script setup lang="ts">
+import { oipFirstTemplate, oipJoinTemplates } from "../utils/oipResources";
+import { useOipResourceTypes } from "../composables/useOipResources";
+
+const props = withDefaults(
+  defineProps<{
+    type: string;
+    id: string;
+    title?: string;
+    source?: Record<string, unknown> | null;
+    lang?: "fr" | "en";
+  }>(),
+  { title: "", source: null, lang: "fr" },
+);
+
+const { data: entry, pending } = useAsyncData(
+  () => `oip-resource-type-${props.type}`,
+  async () => (await useOipResourceTypes()).find((e) => e.key === props.type) ?? null,
+  { server: false, watch: [() => props.type] },
+);
+
+const display = computed(() => entry.value?.display ?? null);
+const doc = computed(() => props.source ?? {});
+const heading = computed(() => oipFirstTemplate(display.value?.title, doc.value, props.id) || props.title || props.id);
+const subtitle = computed(() => oipJoinTemplates(display.value?.subtitle, doc.value, props.id));
+const family = computed(() => display.value?.label?.[props.lang] || entry.value?.label || props.type);
+</script>
+
+<style scoped>
+.oip-rg__title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+}
+</style>

package/layer/app/components/OipResourceSource.vue

@@ -0,0 +1,50 @@
+<!--
+  La ligne « Source » d'une fiche de ressource : fournisseur, jeu de donnees et
+  date de la fiche Directus, lus par /api/oip/sources. Le clic ouvre le
+  panneau Sources de l'app sur cette fiche (cf. useOipResourceHooks).
+-->
+<template>
+  <RmSourceLine
+    v-if="source"
+    tone="primary"
+    :source="name"
+    :verified="source.latest_download_date || undefined"
+    :lang="lang"
+    @click="onClick"
+  />
+</template>
+
+<script setup lang="ts">
+import { useOipResourceHooks } from "../composables/useOipResourceHooks";
+
+const props = withDefaults(defineProps<{ uuid: string; lang?: "fr" | "en" }>(), { lang: "fr" });
+const emit = defineEmits<{ open: [uuid: string] }>();
+const hooks = useOipResourceHooks();
+
+const { data } = useFetch<{ sources: any[] }>("/api/oip/sources", {
+  method: "POST",
+  body: computed(() => ({ uuids: [props.uuid] })),
+  key: computed(() => `oip-resource-source-${props.uuid}`),
+  server: false,
+});
+const source = computed(() => data.value?.sources?.[0] ?? null);
+
+/** Traduction dans la langue, sinon la premiere. */
+function translated(list: any[] | undefined, field: string): string {
+  const rows = list ?? [];
+  const row = rows.find((r) => String(r?.languages_code ?? "").startsWith(props.lang)) ?? rows[0];
+  return row?.[field] ?? "";
+}
+
+/** « Fournisseur - Jeu de donnees », comme les fiches de France Augmented Science. */
+const name = computed(() => {
+  const provider = translated(source.value?.provider?.translations, "provider_name");
+  const dataset = translated(source.value?.translations, "source_name");
+  return [provider, dataset].filter(Boolean).join(" - ") || source.value?.Nickname || "";
+});
+
+function onClick() {
+  emit("open", props.uuid);
+  hooks.openSource?.(props.uuid);
+}
+</script>

package/layer/app/components/OipResourceTags.vue

@@ -0,0 +1,65 @@
+<!--
+  Une liste d'etiquettes d'une fiche de ressource (types d'article, termes
+  MeSH...) : icone et intitule, puis les valeurs, surlignees par la recherche
+  en cours. Rendu des fiches de France Augmented Science (anciennement
+  CommonTableTags, en colonne), partage par les vues du layer.
+-->
+<template>
+  <div class="oip-rt">
+    <div class="oip-rt__head">
+      <RmIcon v-if="icon" :name="icon" :size="12" color="var(--text-muted)" />
+      <p class="oip-rt__label">{{ label }}</p>
+    </div>
+    <div v-if="values.length" class="oip-rt__tags">
+      <RmTag v-for="(value, index) in values" :key="index" variant="gray">
+        <RmTextHighlight :queries="highlight" :text="value" :lang="lang" />
+      </RmTag>
+    </div>
+    <p v-else class="oip-rt__empty">
+      {{ lang === "en" ? `No ${label.toLowerCase()}` : `Aucun élément (${label.toLowerCase()})` }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string;
+    values: string[];
+    icon?: string;
+    highlight?: string[];
+    lang?: "fr" | "en";
+  }>(),
+  { icon: "", highlight: () => [], lang: "fr" },
+);
+</script>
+
+<style scoped>
+.oip-rt {
+  display: grid;
+  gap: var(--space-4);
+}
+.oip-rt__head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+.oip-rt__label {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: var(--font-12);
+  font-weight: 500;
+}
+.oip-rt__tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8);
+}
+.oip-rt__empty {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--font-12);
+  font-style: italic;
+}
+</style>

package/layer/app/components/OipResourceView.vue

@@ -0,0 +1,107 @@
+<!--
+  Une fiche de ressource entiere, ses onglets compris, telle que son app
+  d'origine la montre : un seul bandeau (titre, lien vers l'app d'origine
+  sous le titre, onglets), puis l'onglet actif. Montee par le tiroir des
+  projets (cf. OipResourceDrawer) ; les pages de l'app d'origine montent
+  directement l'onglet de leur route.
+-->
+<template>
+  <div class="oip-rv" :class="{ 'oip-rv--whole': wholeView }">
+    <!-- Fiche d'un seul tenant (fr_drugs_app) : elle porte son bandeau et ses onglets. -->
+    <component
+      :is="wholeView"
+      v-if="wholeView"
+      :key="`${type}-${id}`"
+      :id="id"
+      :type="type"
+      :highlight="highlight"
+      :lang="lang"
+    >
+      <template #title-link><slot name="title-link" /></template>
+    </component>
+    <template v-else>
+      <RmPageHeader
+        :tabs="tabs.length > 1 ? headerTabs : []"
+        :tabs-label="en ? 'Record sections' : 'Sections de la fiche'"
+        @tab="active = $event"
+      >
+        <template #title>
+          <span class="oip-rv__title">{{ title || id }}</span>
+          <slot name="title-link" />
+        </template>
+      </RmPageHeader>
+      <component
+        :is="current.component"
+        v-if="current"
+        :key="`${type}-${id}-${current.key}`"
+        class="oip-rv__body"
+        :id="routeId"
+        :highlight="highlight"
+        :lang="lang"
+        @source="emit('source', $event)"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { oipResourceViewSpec } from "../utils/oipResources";
+import { oipResourceTabComponent, oipResourceViewComponent } from "../composables/useOipResourceViews";
+
+const props = withDefaults(
+  defineProps<{
+    type: string;
+    id: string;
+    /** Titre du bandeau (celui de la ligne du projet, ou relu). */
+    title?: string;
+    /** Onglet ouvert d'abord. Absent : le premier. */
+    tab?: string;
+    highlight?: string[];
+    lang?: "fr" | "en";
+  }>(),
+  { title: "", tab: "", highlight: () => [], lang: "fr" },
+);
+
+const emit = defineEmits<{ source: [uuid: string] }>();
+
+const en = computed(() => props.lang === "en");
+
+/** La fiche du type, ou de celui dont il est l'alias (essais ranges par fr_drugs_app). */
+const spec = computed(() => oipResourceViewSpec(props.type));
+
+const wholeView = computed(() => (spec.value?.view ? oipResourceViewComponent(spec.value.view) : null));
+
+/** L'identifiant que les onglets lisent, celui des routes de l'app d'origine. */
+const routeId = computed(() => spec.value?.routeId(props.id) ?? props.id);
+
+const tabs = computed(() =>
+  (spec.value?.tabs ?? [])
+    .map((tab) => ({ ...tab, component: oipResourceTabComponent(spec.value!.type, tab.key) }))
+    .filter((tab) => tab.component),
+);
+
+const active = ref(props.tab);
+watch(
+  () => [props.type, props.id, props.tab] as const,
+  () => (active.value = props.tab),
+);
+
+const current = computed(() => tabs.value.find((tab) => tab.key === active.value) ?? tabs.value[0] ?? null);
+
+const headerTabs = computed(() =>
+  tabs.value.map((tab) => ({ key: tab.key, label: tab.label[props.lang], active: tab.key === current.value?.key })),
+);
+</script>
+
+<style scoped>
+.oip-rv__title {
+  display: block;
+}
+/* Les gouttieres de la colonne de contenu, rendues au contenu seul : le
+   bandeau, lui, reste bord a bord comme dans la page. */
+.oip-rv__body {
+  box-sizing: border-box;
+  margin-top: var(--space-24);
+  padding: 0 var(--space-24) var(--space-32);
+}
+</style>