From c16eefedfc296fc7c9ee9d42afc211f30c0c2ae1 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 17 Feb 2025 17:32:17 +0100
Subject: [PATCH] refactor(front): channel form

---
 front/src/components/audio/ChannelForm.vue | 95 ++++++++++------------
 front/src/views/auth/ProfileOverview.vue   | 12 +--
 front/src/views/channels/List.vue          |  8 +-
 3 files changed, 55 insertions(+), 60 deletions(-)

diff --git a/front/src/components/audio/ChannelForm.vue b/front/src/components/audio/ChannelForm.vue
index 951c40d07..814bdf7bf 100644
--- a/front/src/components/audio/ChannelForm.vue
+++ b/front/src/components/audio/ChannelForm.vue
@@ -165,6 +165,7 @@ defineExpose({
 
 <template>
   <Layout form
+    class="ui form"
     @submit.prevent.stop="submit"
   >
     <Alert
@@ -250,52 +251,40 @@ defineExpose({
             {{ t('components.audio.ChannelForm.label.image') }}
           </attachment-input>
         </div>
-        <div class="ui small hidden divider" />
-        <div class="ui stackable grid row">
-          <div class="ten wide column">
-            <div class="ui field">
-              <Pills
-                v-model="tagList"
-                :label="t('components.audio.ChannelForm.label.tags')"
-              />
-            </div>
-          </div>
-          <div
-            v-if="newValues.content_category === 'podcast'"
-            class="six wide column"
+        <Pills
+          v-model="tagList"
+          :label="t('components.audio.ChannelForm.label.tags')"
+        />
+        <div
+          v-if="newValues.content_category === 'podcast'"
+        >
+          <label for="channel-language">
+            {{ t('components.audio.ChannelForm.label.language') }}
+          </label>
+          <select
+            id="channel-language"
+            v-model="newValues.metadata.language"
+            name="channel-language"
+            required
+            class="ui search selection dropdown"
           >
-            <div class="ui required field">
-              <label for="channel-language">
-                {{ t('components.audio.ChannelForm.label.language') }}
-              </label>
-              <select
-                id="channel-language"
-                v-model="newValues.metadata.language"
-                name="channel-language"
-                required
-                class="ui search selection dropdown"
-              >
-                <option
-                  v-for="(v, key) in metadataChoices.language"
-                  :key="key"
-                  :value="v.value"
-                >
-                  {{ v.label }}
-                </option>
-              </select>
-            </div>
-          </div>
+            <option
+              v-for="(v, key) in metadataChoices.language"
+              :key="key"
+              :value="v.value"
+            >
+              {{ v.label }}
+            </option>
+          </select>
         </div>
-        <div class="ui small hidden divider" />
         <div class="ui field">
           <label for="channel-name">
             {{ t('components.audio.ChannelForm.label.description') }}
           </label>
           <content-form v-model="newValues.description" />
         </div>
-        <div
+        <template
           v-if="newValues.content_category === 'podcast'"
-          class="ui two fields"
         >
           <div class="ui required field">
             <label for="channel-itunes-category">
@@ -337,37 +326,35 @@ defineExpose({
               </option>
             </select>
           </div>
-        </div>
-        <div
+        </template>
+        <template
           v-if="newValues.content_category === 'podcast'"
-          class="ui two fields"
         >
+          <Alert blue>
+            <span>
+              <i class="bi bi-info-circle-fill" />
+              {{ t('components.audio.ChannelForm.help.podcastFields') }}
+            </span>
+          </Alert>
           <div class="ui field">
-            <label for="channel-itunes-email">
-              {{ t('components.audio.ChannelForm.label.email') }}
-            </label>
-            <input
+            <Input
               id="channel-itunes-email"
               v-model="newValues.metadata.owner_email"
               name="channel-itunes-email"
               type="email"
-            >
+              :label="t('components.audio.ChannelForm.label.email')"
+            />
           </div>
           <div class="ui field">
-            <label for="channel-itunes-name">
-              {{ t('components.audio.ChannelForm.label.owner') }}
-            </label>
-            <input
+            <Input
               id="channel-itunes-name"
               v-model="newValues.metadata.owner_name"
               name="channel-itunes-name"
               maxlength="255"
-            >
+              :label="t('components.audio.ChannelForm.label.owner')"
+            />
           </div>
-          <p>
-            {{ t('components.audio.ChannelForm.help.podcastFields') }}
-          </p>
-        </div>
+        </template>
       </template>
     </template>
     <div
diff --git a/front/src/views/auth/ProfileOverview.vue b/front/src/views/auth/ProfileOverview.vue
index 463c510f9..46a2fd25d 100644
--- a/front/src/views/auth/ProfileOverview.vue
+++ b/front/src/views/auth/ProfileOverview.vue
@@ -13,6 +13,7 @@ import { useModal } from '~/ui/composables/useModal.ts'
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
 import Link from '~/components/ui/Link.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 interface Events {
   (e: 'updated', value: Actor): void
@@ -31,7 +32,7 @@ defineProps<Props>()
 
 const step = ref(1)
 const { isOpen, to } = useModal('createChannel')
-const loading = ref(false)
+const isLoading = ref(false)
 const submittable = ref(false)
 const category = ref('podcast')
 
@@ -83,7 +84,7 @@ const createForm = ref()
         ref="createForm"
         :object="null"
         :step="step"
-        @loading="loading = $event"
+        @loading="isLoading = $event"
         @submittable="submittable = $event"
         @category="category = $event"
         @errored="modalContent.scrollTop = 0"
@@ -91,11 +92,12 @@ const createForm = ref()
       />
       <template #actions>
         <Button secondary
-          v-if="step === 1"
           autofocus
+          @click="isOpen = false"
         >
           {{ t('views.auth.ProfileOverview.button.cancel') }}
         </Button>
+        <Spacer grow />
         <Button secondary
           v-if="step > 1"
           @click.stop.prevent="step -= 1"
@@ -111,8 +113,8 @@ const createForm = ref()
         <Button primary
           v-if="step === 2"
           type="submit"
-          :disabled="!submittable && !loading"
-          :isLoading="loading"
+          :disabled="!submittable && !isLoading"
+          :isLoading="isLoading"
           @click.prevent.stop="createForm.submit"
         >
           {{ t('views.auth.ProfileOverview.button.createChannel') }}
diff --git a/front/src/views/channels/List.vue b/front/src/views/channels/List.vue
index 32a51ba13..8338515b0 100644
--- a/front/src/views/channels/List.vue
+++ b/front/src/views/channels/List.vue
@@ -3,15 +3,18 @@ import type { Channel } from '~/types'
 
 import { useI18n } from 'vue-i18n'
 import { ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 import axios from 'axios'
 
 import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
 import RemoteSearchForm from '~/components/RemoteSearchForm.vue'
+import ChannelForm from '~/components/audio/ChannelForm.vue'
 import Layout from '~/components/ui/Layout.vue'
 import Header from '~/components/ui/Header.vue'
 import Modal from '~/components/ui/Modal.vue'
 import Button from '~/components/ui/Button.vue'
+import Spacer from '~/components/ui/Spacer.vue'
 
 import useErrorHandler from '~/composables/useErrorHandler'
 
@@ -31,6 +34,8 @@ const labels = computed(() => ({
   searchPlaceholder: t('views.channels.SubscriptionsList.placeholder.search')
 }))
 
+const router = useRouter()
+
 const step = ref(1)
 const submittable = ref(false)
 const category = ref('podcast')
@@ -165,11 +170,12 @@ const showCreateModal = ref(false)
       />
       <template #actions>
         <Button secondary
-          v-if="step === 1"
           autofocus
+          @click="showCreateModal = false"
         >
           {{ t('views.auth.ProfileOverview.button.cancel') }}
         </Button>
+        <Spacer grow />
         <Button secondary
           v-if="step > 1"
           @click.stop.prevent="step -= 1"