From 9d4900fde8bbd22a46de7906087121cfe8fd8f5d Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Fri, 17 Jan 2025 13:35:41 +0100
Subject: [PATCH] (nouns) use same styling on <NounsTemplatesTable>, extract
 <NounsTable> to not repeat styling

---
 components/nouns/NounsDictionary.vue          | 182 ++++++------------
 components/nouns/NounsTable.vue               |  84 ++++++++
 ...ictionaryEntry.vue => NounsTableEntry.vue} |   6 +-
 components/nouns/NounsTemplatesTable.vue      |  45 +----
 pages/nouns/templates.vue                     |   2 +
 5 files changed, 156 insertions(+), 163 deletions(-)
 create mode 100644 components/nouns/NounsTable.vue
 rename components/nouns/{NounsDictionaryEntry.vue => NounsTableEntry.vue} (91%)

diff --git a/components/nouns/NounsDictionary.vue b/components/nouns/NounsDictionary.vue
index a0daee77a..08c4e37ec 100644
--- a/components/nouns/NounsDictionary.vue
+++ b/components/nouns/NounsDictionary.vue
@@ -1,12 +1,8 @@
 <script setup lang="ts">
-import type { ComponentExposed } from 'vue-component-type-helpers';
-
-import type Table from '~/components/Table.vue';
 import type NounsSubmitForm from '~/components/nouns/NounsSubmitForm.vue';
 import { Noun } from '~/src/classes.ts';
 import type { NounRaw } from '~/src/classes.ts';
 import { buildDict } from '~/src/helpers.ts';
-import { availableGenders } from '~/src/nouns.ts';
 
 const props = defineProps<{
     load?: boolean;
@@ -16,7 +12,7 @@ const { $translator: translator } = useNuxtApp();
 const config = useConfig();
 const filter = useFilterWithCategory();
 
-const dictionarytable = useTemplateRef<ComponentExposed<typeof Table>>('dictionarytable');
+const dictionarytable = useTemplateRef('dictionarytable');
 watch(filter, () => {
     if (dictionarytable.value) {
         dictionarytable.value.reset();
@@ -114,90 +110,71 @@ defineExpose({ loadNouns });
             @submit-clicked="form?.focus()"
         />
 
-        <Table
+        <NounsTable
             ref="dictionarytable"
             :class="[config.nouns.nonbinary ? 'nouns-table-nonbinary' : '']"
-            :data="visibleNouns"
+            :nouns="visibleNouns"
             :marked="(el) => !el.approved"
-            fixed
         >
-            <template #header>
-                <div v-for="gender in availableGenders(config)" :key="gender" class="d-none d-md-block bold">
-                    <NounsGenderLabel :gender="gender" />
-                </div>
-            </template>
-
-            <template #row="{ el: noun }">
-                <NounsDictionaryEntry
-                    :noun="noun"
-                    :base="noun.base && nouns[noun.base] ? nouns[noun.base] : undefined"
-                >
-                    <template #buttons>
-                        <ul class="d-flex flex-wrap flex-md-column list-unstyled list-btn-concise mb-0">
-                            <template v-if="$isGranted('nouns')">
-                                <li v-if="noun.author" class="small">
-                                    <nuxt-link
-                                        :to="`/@${noun.author}`"
-                                        class="btn btn-concise btn-outline-dark btn-sm m-1"
-                                    >
-                                        <Icon v="user" />
-                                        <span class="btn-label">
-                                            <T>crud.author</T><T>quotation.colon</T>
-                                            @{{ noun.author }}
-                                        </span>
-                                    </nuxt-link>
-                                </li>
-                                <li v-if="!noun.approved">
-                                    <button class="btn btn-concise btn-success btn-sm m-1" @click="approve(noun)">
-                                        <Icon v="check" />
-                                        <span class="btn-label"><T>crud.approve</T></span>
-                                    </button>
-                                </li>
-                                <li v-else @click="hide(noun)">
-                                    <button class="btn btn-concise btn-outline-secondary btn-sm m-1">
-                                        <Icon v="times" />
-                                        <span class="btn-label"><T>crud.hide</T></span>
-                                    </button>
-                                </li>
-                                <li>
-                                    <button class="btn btn-concise btn-outline-danger btn-sm m-1" @click="remove(noun)">
-                                        <Icon v="trash" />
-                                        <span class="btn-label"><T>crud.remove</T></span>
-                                    </button>
-                                </li>
-                            </template>
-                            <li>
-                                <button class="btn btn-concise btn-outline-primary btn-sm m-1" @click="edit(noun)">
-                                    <Icon v="pen" />
-                                    <span class="btn-label">
-                                        <T v-if="$isGranted('nouns')">crud.edit</T>
-                                        <T v-else>nouns.edit</T>
-                                    </span>
-                                </button>
-                            </li>
-                            <li>
-                                <a
-                                    :href="`/api/nouns/${noun.id}.png`"
-                                    target="_blank"
-                                    rel="noopener"
-                                    class="btn btn-concise btn-outline-primary btn-sm m-1"
-                                >
-                                    <Icon v="image" />
-                                    <span class="btn-label">
-                                        <T>nouns.image</T>
-                                    </span>
-                                </a>
-                            </li>
-                        </ul>
+            <template #buttons="{ noun }">
+                <ul class="d-flex flex-wrap flex-md-column list-unstyled list-btn-concise mb-0">
+                    <template v-if="$isGranted('nouns')">
+                        <li v-if="noun.author" class="small">
+                            <nuxt-link
+                                :to="`/@${noun.author}`"
+                                class="btn btn-concise btn-outline-dark btn-sm m-1"
+                            >
+                                <Icon v="user" />
+                                <span class="btn-label">
+                                    <T>crud.author</T><T>quotation.colon</T>
+                                    @{{ noun.author }}
+                                </span>
+                            </nuxt-link>
+                        </li>
+                        <li v-if="!noun.approved">
+                            <button class="btn btn-concise btn-success btn-sm m-1" @click="approve(noun)">
+                                <Icon v="check" />
+                                <span class="btn-label"><T>crud.approve</T></span>
+                            </button>
+                        </li>
+                        <li v-else @click="hide(noun)">
+                            <button class="btn btn-concise btn-outline-secondary btn-sm m-1">
+                                <Icon v="times" />
+                                <span class="btn-label"><T>crud.hide</T></span>
+                            </button>
+                        </li>
+                        <li>
+                            <button class="btn btn-concise btn-outline-danger btn-sm m-1" @click="remove(noun)">
+                                <Icon v="trash" />
+                                <span class="btn-label"><T>crud.remove</T></span>
+                            </button>
+                        </li>
                     </template>
-                </NounsDictionaryEntry>
+                    <li>
+                        <button class="btn btn-concise btn-outline-primary btn-sm m-1" @click="edit(noun)">
+                            <Icon v="pen" />
+                            <span class="btn-label">
+                                <T v-if="$isGranted('nouns')">crud.edit</T>
+                                <T v-else>nouns.edit</T>
+                            </span>
+                        </button>
+                    </li>
+                    <li>
+                        <a
+                            :href="`/api/nouns/${noun.id}.png`"
+                            target="_blank"
+                            rel="noopener"
+                            class="btn btn-concise btn-outline-primary btn-sm m-1"
+                        >
+                            <Icon v="image" />
+                            <span class="btn-label">
+                                <T>nouns.image</T>
+                            </span>
+                        </a>
+                    </li>
+                </ul>
             </template>
-
-            <template #empty>
-                <Icon v="search" />
-                <T>nouns.empty</T>
-            </template>
-        </Table>
+        </NounsTable>
 
         <AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />
 
@@ -208,42 +185,3 @@ defineExpose({ loadNouns });
         </template>
     </Loading>
 </template>
-
-<style scoped lang="scss">
-    @import "assets/variables";
-
-    :deep(.row-header) {
-        grid-template-columns: 1fr 1fr 1fr 3em;
-
-        .nouns-table-nonbinary & {
-            grid-template-columns: 1fr 1fr 1fr 1fr 3em;
-        }
-    }
-
-    :deep(.row-content) {
-        grid:
-            "mascLabel masc mascPl"
-            "femLabel fem femPl"
-            "neutrLabel neutr neutrPl"
-            "nbLabel nb nbPl"
-            "sources sources sources"
-            "buttons buttons buttons"
-            / auto 1fr 1fr;
-
-        @include media-breakpoint-up('md', $grid-breakpoints) {
-            grid:
-                "masc fem neutr buttons"
-                "mascPl femPl neutrPl buttons"
-                "sources sources sources buttons"
-                / 1fr 1fr 1fr 3em;
-
-            .nouns-table-nonbinary & {
-                grid:
-                  "masc fem neutr nb buttons"
-                  "mascPl femPl neutrPl nbPl buttons"
-                  "sources sources sources sources buttons"
-                  / 1fr 1fr 1fr 1fr 3em;
-            }
-        }
-    }
-</style>
diff --git a/components/nouns/NounsTable.vue b/components/nouns/NounsTable.vue
new file mode 100644
index 000000000..1366f5aef
--- /dev/null
+++ b/components/nouns/NounsTable.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts" generic="T extends Partial<Noun> & MinimalNoun & { id: string }">
+import type { MinimalNoun, Noun } from '~/src/classes.ts';
+import { availableGenders } from '~/src/nouns.ts';
+
+defineProps<{
+    nouns: T[];
+    marked?: (element: T) => boolean;
+}>();
+
+const config = useConfig();
+
+const table = useTemplateRef('table');
+defineExpose({
+    reset() {
+        table.value?.reset();
+    },
+    focus() {
+        table.value?.focus();
+    },
+});
+</script>
+
+<template>
+    <Table ref="table" :data="nouns" :marked fixed>
+        <template #header>
+            <div v-for="gender in availableGenders(config)" :key="gender" class="d-none d-md-block bold">
+                <NounsGenderLabel :gender="gender" />
+            </div>
+        </template>
+        <template #row="{ el: noun }">
+            <NounsTableEntry :noun>
+                <template #buttons>
+                    <ul class="list-unstyled list-btn-concise">
+                        <slot name="buttons" :noun="noun"></slot>
+                    </ul>
+                </template>
+            </NounsTableEntry>
+        </template>
+
+        <template #empty>
+            <Icon v="search" />
+            <T>nouns.empty</T>
+        </template>
+    </Table>
+</template>
+
+<style scoped lang="scss">
+@import "assets/variables";
+
+:deep(.row-header) {
+  grid-template-columns: 1fr 1fr 1fr 3em;
+
+  .nouns-table-nonbinary & {
+    grid-template-columns: 1fr 1fr 1fr 1fr 3em;
+  }
+}
+
+:deep(.row-content) {
+  grid:
+            "mascLabel masc mascPl"
+            "femLabel fem femPl"
+            "neutrLabel neutr neutrPl"
+            "nbLabel nb nbPl"
+            "sources sources sources"
+            "buttons buttons buttons"
+            / auto 1fr 1fr;
+
+  @include media-breakpoint-up('md', $grid-breakpoints) {
+    grid:
+                "masc fem neutr buttons"
+                "mascPl femPl neutrPl buttons"
+                "sources sources sources buttons"
+                / 1fr 1fr 1fr 3em;
+
+    .nouns-table-nonbinary & {
+      grid:
+                  "masc fem neutr nb buttons"
+                  "mascPl femPl neutrPl nbPl buttons"
+                  "sources sources sources sources buttons"
+                  / 1fr 1fr 1fr 1fr 3em;
+    }
+  }
+}
+</style>
diff --git a/components/nouns/NounsDictionaryEntry.vue b/components/nouns/NounsTableEntry.vue
similarity index 91%
rename from components/nouns/NounsDictionaryEntry.vue
rename to components/nouns/NounsTableEntry.vue
index 123276c70..6a2373417 100644
--- a/components/nouns/NounsDictionaryEntry.vue
+++ b/components/nouns/NounsTableEntry.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { Noun } from '~/src/classes.ts';
+import type { MinimalNoun, Noun } from '~/src/classes.ts';
 import { genders } from '~/src/nouns.ts';
 
 const props = defineProps<{
-    noun: Noun;
+    noun: Partial<Noun> & MinimalNoun;
     base?: Noun;
 }>();
 
@@ -44,7 +44,7 @@ const numerus = computed(() => {
             </small>
         </div>
     </template>
-    <div v-if="noun.sourcesData.length" style="grid-area: sources">
+    <div v-if="noun.sourcesData?.length" style="grid-area: sources">
         <p><strong><T>sources.referenced</T><T>quotation.colon</T></strong></p>
         <ul class="list-unstyled mb-0">
             <li v-for="source in noun.sourcesData" :key="source.id">
diff --git a/components/nouns/NounsTemplatesTable.vue b/components/nouns/NounsTemplatesTable.vue
index 8370f7210..7bd17c543 100644
--- a/components/nouns/NounsTemplatesTable.vue
+++ b/components/nouns/NounsTemplatesTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { MinimalNoun } from '~/src/classes.ts';
 import { nounTemplates } from '~/src/data.ts';
-import { availableGenders, gendersWithNumerus } from '~/src/nouns.ts';
+import { gendersWithNumerus } from '~/src/nouns.ts';
 
 const props = withDefaults(defineProps<{
     templateBase?: string;
@@ -11,15 +11,6 @@ const props = withDefaults(defineProps<{
     filter: '',
 });
 
-const config = useConfig();
-
-const numerus = computed(() => {
-    if (config.nouns.plurals) {
-        return [false, true];
-    }
-    return [false];
-});
-
 const templates = computed((): (MinimalNoun & { id: string })[] => {
     return nounTemplates.filter((template) => {
         for (const field of gendersWithNumerus) {
@@ -39,33 +30,11 @@ const templates = computed((): (MinimalNoun & { id: string })[] => {
 </script>
 
 <template>
-    <Table :data="templates" fixed>
-        <template #header>
-            <th v-for="gender in availableGenders(config)" :key="gender" class="text-nowrap">
-                <NounsGenderLabel :gender="gender" />
-            </th>
-            <th></th>
+    <NounsTable :nouns="templates">
+        <template #buttons="{ noun }">
+            <ul class="list-unstyled list-btn-concise">
+                <slot name="buttons" :template="noun"></slot>
+            </ul>
         </template>
-        <template #row="{ el: template }">
-            <td v-for="gender in availableGenders(config)" :key="gender">
-                <NounsItem
-                    v-for="plural in numerus"
-                    :key="plural ? 'plural' : 'singular'"
-                    :noun="template"
-                    :gender
-                    :plural
-                />
-            </td>
-            <td>
-                <ul class="list-unstyled list-btn-concise">
-                    <slot name="buttons" :template="template"></slot>
-                </ul>
-            </td>
-        </template>
-
-        <template #empty>
-            <Icon v="search" />
-            <T>nouns.empty</T>
-        </template>
-    </Table>
+    </NounsTable>
 </template>
diff --git a/pages/nouns/templates.vue b/pages/nouns/templates.vue
index fab0f2e07..95c7799ea 100644
--- a/pages/nouns/templates.vue
+++ b/pages/nouns/templates.vue
@@ -13,6 +13,8 @@ definePageMeta({
     },
 });
 
+const NounsNav = useLocaleComponent('nouns', 'NounsNav');
+
 const { $translator: translator } = useNuxtApp();
 useSimpleHead({
     title: translator.translate('nouns.headerLonger'),