From 2f8085fa86b368a995c945b042fc744f1d7f5ae3 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 15 Dec 2022 00:30:54 +0100
Subject: [PATCH] feat: basic alt text edit

---
 components/publish/PublishAttachment.vue | 30 +++++++++++++++++++++++-
 components/publish/PublishWidget.vue     |  8 ++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/components/publish/PublishAttachment.vue b/components/publish/PublishAttachment.vue
index a187f49e..6957da81 100644
--- a/components/publish/PublishAttachment.vue
+++ b/components/publish/PublishAttachment.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Attachment } from 'masto'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   attachment: Attachment
   alt?: string
   removable?: boolean
@@ -11,7 +11,11 @@ withDefaults(defineProps<{
 
 defineEmits<{
   (evt: 'remove'): void
+  (evt: 'setDescription', description: string): void
 }>()
+
+const isEditDialogOpen = ref(false)
+const description = ref(props.attachment.description)
 </script>
 
 <template>
@@ -29,5 +33,29 @@ defineEmits<{
         <div i-ri:close-line text-3 :class="[isSmallScreen ? 'text-6' : 'text-3']" />
       </div>
     </div>
+    <div absolute right-2 bottom-2>
+      <button class="bg-black/75" text-white px2 py1 rounded-2 @click="isEditDialogOpen = true">
+        Edit
+      </button>
+    </div>
+    <ModalDialog v-model="isEditDialogOpen" py-6 px-6 max-w-300>
+      <div flex gap-5>
+        <div flex flex-col gap-2 justify-between>
+          <h1 font-bold>
+            Description
+          </h1>
+          <div flex flex-col gap-2>
+            <textarea v-model="description" p-3 w-100 h-50 bg-base rounded-2 border-strong border-1 />
+            <button btn-outline @click="$emit('setDescription', description)">
+              Apply
+            </button>
+          </div>
+          <button btn-outline @click="isEditDialogOpen = false">
+            Close
+          </button>
+        </div>
+        <StatusAttachment :attachment="attachment" w-full />
+      </div>
+    </ModalDialog>
   </div>
 </template>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 672493b3..cde38322 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CreateStatusParams, StatusVisibility } from 'masto'
+import type { Attachment, CreateStatusParams, StatusVisibility } from 'masto'
 import { fileOpen } from 'browser-fs-access'
 import { useDropZone } from '@vueuse/core'
 import { EditorContent } from '@tiptap/vue-3'
@@ -99,6 +99,11 @@ async function uploadAttachments(files: File[]) {
   isUploading = false
 }
 
+async function setDescription(att: Attachment, description: string) {
+  att.description = description
+  await useMasto().mediaAttachments.update(att.id, { description: att.description })
+}
+
 function removeAttachment(index: number) {
   draft.attachments.splice(index, 1)
 }
@@ -213,6 +218,7 @@ defineExpose({
             v-for="(att, idx) in draft.attachments" :key="att.id"
             :attachment="att"
             @remove="removeAttachment(idx)"
+            @set-description="setDescription(att, $event)"
           />
         </div>
       </div>