refactor(front): TrackEdit, EditCard, EditDetail

front/src/components/library/EditCard.vue

@@ -8,7 +8,6 @@ import { useRouter } from 'vue-router'
 import { computed, ref } from 'vue'
 import { useStore } from '~/store'
 import { useI18n } from 'vue-i18n'
-import { color, setColors } from '~/composables/color'
 
 import axios from 'axios'
 
@@ -18,8 +17,6 @@ import useErrorHandler from '~/composables/useErrorHandler'
 import Button from '~/components/ui/Button.vue'
 import DangerousButton from '~/components/common/DangerousButton.vue'
 import Card from '~/components/ui/Card.vue'
-import Link from '~/components/ui/Link.vue'
-import Alert from '~/components/ui/Alert.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 
 interface Events {
@@ -159,17 +156,23 @@ const approve = async (approved: boolean) => {
 
   isLoading.value = false
 }
+
+const alertProps = computed(() => {
+  return {
+    green: props.obj.is_approved && props.obj.is_applied,
+    red: props.obj.is_approved === false,
+    yellow: props.obj.is_applied === false
+  }
+})
 </script>
 
 <template>
-<!--TODO: Make "to:" prop on card link the whole card to detailUrl, but leave track link, actor link and action buttons clickable -->
-  <Card>
+  <Card
+    :alertProps="alertProps"
+    :to="detailUrl"
+    :title="t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)})"
+  >
     <div class="content">
-      <h4 class="header">
-        <router-link :to="detailUrl">
-          {{ t('components.library.EditCard.header.modification', {id: obj.uuid.substring(0, 8)}) }}
-        </router-link>
-      </h4>
       <div class="meta">
         <router-link
           v-if="obj.target && obj.target.type === 'track'"
@@ -179,10 +182,6 @@ const approve = async (approved: boolean) => {
           <i class="bi bi-file-music-fill" />
           {{ t('components.library.EditCard.link.track', {id: obj.target.id, name: obj.target.repr}) }}
         </router-link>
-        <human-date
-          :date="obj.creation_date"
-          :icon="true"
-        />
 
       </div>
     </div>
@@ -192,13 +191,8 @@ const approve = async (approved: boolean) => {
     >
       {{ obj.summary }}
     </div>
+
     <template #alert>
-    <!--TODO: Pass Alert colors through to card.vue -->
-      <Alert
-        :green="obj.is_approved && obj.is_applied"
-        :red="obj.is_approved === false"
-        :yellow="obj.is_approved === null"
-      >
         <span class="right floated">
           <span v-if="obj.is_approved && obj.is_applied">
             <i class="green bi bi-check"/>
@@ -301,16 +295,23 @@ const approve = async (approved: boolean) => {
             </tr>
           </tbody>
         </table>
-      </Alert>
     </template>
+
     <div
       v-if="obj.created_by"
       class="extra content"
     >
-      <!--TODO: Center actor name horizontally -->
       <Spacer :size="8"/>
       <actor-link :actor="obj.created_by" />
     </div>
+
+    <template #footer>
+      <human-date
+        :date="obj.creation_date"
+        :icon="true"
+      />
+    </template>
+
     <template #action
       v-if="canDelete || canApprove"
     >

front/src/components/library/EditDetail.vue

@@ -47,13 +47,11 @@ fetchData()
 </script>
 
 <template>
-  <section :class="['ui', 'vertical', 'stripe', { loading: isLoading }, 'segment']">
-    <div class="ui text container">
+  <section :class="{ loading: isLoading }">
       <edit-card
         v-if="obj"
         :obj="obj"
         :current-state="currentState"
       />
-    </div>
   </section>
 </template>

front/src/components/library/TrackEdit.vue

@@ -12,6 +12,10 @@ import axios from 'axios'
 import useErrorHandler from '~/composables/useErrorHandler'
 import EditForm from '~/components/library/EditForm.vue'
 
+import Loader from '~/components/ui/Loader.vue'
+import Header from '~/components/ui/Header.vue'
+import Alert from '~/components/ui/Alert.vue'
+
 interface Props {
   objectType: EditObjectType
   object: EditObject
@@ -45,35 +49,18 @@ fetchLicenses()
 </script>
 
 <template>
-  <section class="ui vertical stripe segment">
-    <div class="ui text container">
-      <h2>
-        <span v-if="canEdit">
-          {{ t('components.library.TrackEdit.header.edit') }}
-        </span>
-        <span key="2">
-          {{ t('components.library.TrackEdit.header.suggest') }}
-        </span>
-      </h2>
-      <div
-        v-if="!object.is_local"
-        class="ui message"
-      >
-        {{ t('components.library.TrackEdit.message.remote') }}
-      </div>
-      <edit-form
-        v-else-if="!isLoadingLicenses"
-        :object-type="objectType"
-        :object="object"
-        :can-edit="canEdit"
-        :licenses="licenses"
-      />
-      <div
-        v-else
-        class="ui inverted active dimmer"
-      >
-        <div class="ui loader" />
-      </div>
-    </div>
-  </section>
+  <Header :h2="canEdit ? t('components.library.TrackEdit.header.edit') : t('components.library.TrackEdit.header.suggest')" />
+  <Alert yellow
+    v-if="!object.is_local"
+  >
+    {{ t('components.library.TrackEdit.message.remote') }}
+  </Alert>
+  <edit-form
+    v-else-if="!isLoadingLicenses"
+    :object-type="objectType"
+    :object="object"
+    :can-edit="canEdit"
+    :licenses="licenses"
+  />
+  <Loader v-else />
 </template>