refactor(front): [WIP] layout for collapsible description fields

front/src/components/common/RenderedDescription.vue

@@ -10,7 +10,6 @@ import clip from 'text-clipper'
 
 import Button from '~/components/ui/Button.vue'
 import Alert from '~/components/ui/Alert.vue'
-import Link from '~/components/ui/Link.vue'
 
 interface Events {
   (e: 'updated', data: unknown): void
@@ -53,6 +52,8 @@ const truncatedHtml = computed(() => clip(props.content?.html ?? '', props.trunc
 }))
 
 const showMore = ref(false)
+
+// Truncated or full Html or an empty string
 const html = computed(() => props.fetchHtml
   ? preview.value
   : props.truncateLength > 0 && !showMore.value
@@ -88,73 +89,80 @@ const submit = async () => {
 </script>
 
 <template>
-  <div>
-    <template v-if="content && !isUpdating">
-      <sanitized-html :html="html" />
-      <template v-if="isTruncated">
-        <a
-          v-if="showMore === false"
-          class="more"
-          style="float: right; margin-top: -32px; color: var(--fw-primary);"
-          href=""
-          @click.stop.prevent="showMore = true"
-        >
-          {{ t('components.common.RenderedDescription.button.more') }}
-        </a>
-        <a
-          v-else
-          class="more"
-          style="float: right; margin-top: -32px; color: var(--fw-primary);"
-          href=""
-          @click.stop.prevent="showMore = false"
-        >
-          {{ t('components.common.RenderedDescription.button.less') }}
-        </a>
-      </template>
+  <template v-if="content && !isUpdating">
+    <!-- Render the truncated or full description -->
+
+    <sanitized-html :html="html" />
+
+    <!-- Display the `show more` / `show less` button -->
+
+    <template v-if="isTruncated">
+      <a
+        v-if="showMore === false"
+        class="more"
+        style="float: right; margin-top: -32px; color: var(--fw-primary);"
+        href=""
+        @click.stop.prevent="showMore = true"
+      >
+        {{ t('components.common.RenderedDescription.button.more') }}
+      </a>
+      <a
+        v-else
+        class="more"
+        style="float: right; margin-top: -32px; color: var(--fw-primary);"
+        href=""
+        @click.stop.prevent="showMore = false"
+      >
+        {{ t('components.common.RenderedDescription.button.less') }}
+      </a>
     </template>
-    <span v-else-if="!isUpdating">
-      {{ t('components.common.RenderedDescription.empty.noDescription') }}
-    </span>
-    <form
-      v-if="isUpdating"
-      @submit.prevent="submit()"
+  </template>
+  <span v-else-if="!isUpdating">
+    {{ t('components.common.RenderedDescription.empty.noDescription') }}
+  </span>
+
+  <!-- [DISABLED] Display an edit form -->
+  <!-- TODO: Check if we want to revive in-situ editing here -->
+
+  <form
+    v-if="isUpdating"
+    @submit.prevent="submit()"
+  >
+    <Alert
+      v-if="errors.length > 0"
+      red
+      title="{{ t('components.common.RenderedDescription.header.failure') }}"
+      role="alert"
     >
-      <Alert
-        v-if="errors.length > 0"
-        red
-        title="{{ t('components.common.RenderedDescription.header.failure') }}"
-        role="alert"
-      >
-        <ul class="list">
-          <li
-            v-for="(error, key) in errors"
-            :key="key"
-          >
-            {{ error }}
-          </li>
-        </ul>
-      </Alert>
-      <content-form
-        v-model="text"
-        :autofocus="true"
-      />
-      <Button
-        class="left floated"
-        solid
-        secondary
-        @click.prevent="isUpdating = false"
-      >
-        {{ t('components.common.RenderedDescription.button.cancel') }}
-      </Button>
-      <Button
-        :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
-        type="submit"
-        :disabled="isLoading"
-        solid
-        primary
-      >
-        {{ t('components.common.RenderedDescription.button.update') }}
-      </Button>
-    </form>
-  </div>
+      <ul class="list">
+        <li
+          v-for="(error, key) in errors"
+          :key="key"
+        >
+          {{ error }}
+        </li>
+      </ul>
+    </Alert>
+    <content-form
+      v-model="text"
+      :autofocus="true"
+    />
+    <Button
+      class="left floated"
+      solid
+      secondary
+      @click.prevent="isUpdating = false"
+    >
+      {{ t('components.common.RenderedDescription.button.cancel') }}
+    </Button>
+    <Button
+      :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']"
+      type="submit"
+      :disabled="isLoading"
+      solid
+      primary
+    >
+      {{ t('components.common.RenderedDescription.button.update') }}
+    </Button>
+  </form>
 </template>