feat(front): add links to go back from album editor to album

front/src/components/library/EditForm.vue

@@ -11,9 +11,10 @@ import axios from 'axios'
 
 import Layout from '~/components/ui/Layout.vue'
 import Button from '~/components/ui/Button.vue'
+import Link from '~/components/ui/Link.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 import Input from '~/components/ui/Input.vue'
-// import Textarea from '~/components/ui/Textarea.vue'
+import Textarea from '~/components/ui/Textarea.vue'
 import Pills from '~/components/ui/Pills.vue'
 import Alert from '~/components/ui/Alert.vue'
 
@@ -155,6 +156,15 @@ const resetField = (fieldId: string) => {
     >
       {{ t('components.library.EditForm.button.new') }}
     </Button>
+
+    <Link
+      solid
+      secondary
+      raised
+      :to="{ name: 'library.albums.detail', params: { id: object.id } }"
+    >
+      Back to Album
+    </Link>
   </Alert>
   <Layout
     v-else
@@ -268,14 +278,12 @@ const resetField = (fieldId: string) => {
           </select>
         </template>
         <template v-else-if="fieldConfig.type === 'content'">
-          TEXTAREA
+          <Textarea
-          <b> v-model: </b>{{ values[fieldConfig.id].text }}
-          <!-- <Textarea
             v-model="values[fieldConfig.id].text"
             :label="fieldConfig.label"
             :field-id="fieldConfig.id"
             initial-lines="3"
-          /> -->
+          />
         </template>
         <!-- TODO: Style Attachment Input -->
         <template v-else-if="fieldConfig.type === 'attachment'">
@@ -324,9 +332,7 @@ const resetField = (fieldId: string) => {
         </Button>
       </Layout>
       <Spacer />
-      TEXTAREA
+      <Textarea
-      <b> v-model: </b>{{ summary }}
-      <!-- <Textarea
         id="change-summary"
         v-model="summary"
         name="change-summary"
@@ -338,24 +344,34 @@ const resetField = (fieldId: string) => {
           v-if="objectType === 'track'"
           low-height
           secondary
-          raised
+          :to="{ name: 'library.tracks.detail', params: { id: object.id } }"
-          :to="{name: 'library.tracks.detail', params: {id: object.id }}"
         >
           {{ t('components.library.EditForm.button.cancel') }}
         </Link>
-      </Textarea> -->
+      </Textarea>
-      <Button
+      <Layout flex>
-        :is-loading="isLoading"
+        <Spacer grow />
-        primary
+        <Button
-        :disabled="isLoading || !mutationPayload"
+          :is-loading="isLoading"
-      >
+          primary
-        <span v-if="canEdit">
+          :disabled="isLoading || !mutationPayload"
-          {{ t('components.library.EditForm.button.submit') }}
+        >
-        </span>
+          <span v-if="canEdit">
-        <span v-else>
+            {{ t('components.library.EditForm.button.submit') }}
-          {{ t('components.library.EditForm.button.suggest') }}
+          </span>
-        </span>
+          <span v-else>
-      </Button>
+            {{ t('components.library.EditForm.button.suggest') }}
+          </span>
+        </Button>
+        <Link
+          solid
+          secondary
+          raised
+          :to="{ name: 'library.albums.detail', params: { id: object.id } }"
+        >
+          {{ t('components.library.EditForm.button.cancel') }}
+        </Link>
+      </Layout>
     </form>
   </Layout>
 </template>

front/src/components/ui/Textarea.vue

@@ -22,7 +22,8 @@ const { charLimit = Infinity, placeholder = '', initialLines: minLines = 3, ...p
 const model = defineModel<string>({ required: true })
 
 const { undo, redo, commit: commitHistory, last } = useManualRefHistory(model)
-const { textarea, triggerResize } = useTextareaAutosize({ input: model })
+const textarea = ref()
+const { triggerResize } = useTextareaAutosize({ input: model, element: textarea })
 
 const commit = () => {
   triggerResize()