link edit refactor

src/views/DetailsView.vue

@@ -6,6 +6,7 @@ import PeriodSelector from '@/components/PeriodSelector.vue'
 import ChartBlock from '@/components/ChartBlock.vue'
 import { useChartsApi } from '@/api/charts.js'
 import EditLink from '@/views/DetailsView/EditLink.vue'
+import CopyToClipboard from '@/components/CopyToClipboard.vue'
 
 const { getMerchDetails, deleteMerch } = useMerchApi()
 const { getDistinctPrices } = useChartsApi()
@@ -17,6 +18,11 @@ const props = defineProps({
   },
 })
 
+const editing = ref({
+  surugaya: false,
+  mandarake: false,
+})
+
 const merchDetails = ref(null)
 const loading = ref(true)
 const error = ref(null)
@@ -76,11 +82,15 @@ const fetchPrices = async (days = 7) => {
   }
 }
 
+function handleLinkUpdate(origin, newLink) {
+  merchDetails.value[`origin_${origin}`].link = newLink
+  editing.value[origin] = false
+}
+
 function handleSelectDays(days) {
   fetchPrices(days)
 }
 
-
 onMounted(() => {
   fetchMerch()
   fetchPrices(7)
@@ -102,20 +112,71 @@ onMounted(() => {
       <ChartBlock :charts-data="prices" />
     </div>
 
-    <n-divider title-placement="left">Surugaya</n-divider>
+    <!-- Surugaya -->
+    <CopyToClipboard :text="merchDetails.origin_surugaya?.link">
+      <n-divider title-placement="left">Surugaya</n-divider>
+    </CopyToClipboard>
+    <div v-if="!editing.surugaya">
+      <template v-if="merchDetails.origin_surugaya?.link">
+        <a
+          :href="merchDetails.origin_surugaya.link"
+          target="_blank"
+          rel="noopener"
+          class="default-color"
+        >
+          {{ merchDetails.origin_surugaya.link }}
+        </a>
+        <n-button type="primary" style="margin-left: 8px" @click="editing.surugaya = true">
+          Edit link
+        </n-button>
+      </template>
+      <template v-else>
+        <span class="default-color underline link-like-text" @click="editing.surugaya = true">Add link</span>
+      </template>
+    </div>
+
     <EditLink
+      v-else
       :merch-uuid="merch_uuid"
       origin="surugaya"
       :name="merchDetails.name"
-      v-model="merchDetails.origin_surugaya.link" />
+      :model-value="merchDetails.origin_surugaya?.link || ''"
+      @update:model-value="handleLinkUpdate('surugaya', $event)"
+      @cancel-edit="editing.surugaya = false"
+    />
+
+    <!-- Mandarake -->
+    <CopyToClipboard :text="merchDetails.origin_mandarake?.link">
+      <n-divider title-placement="left">Mandarake</n-divider>
+    </CopyToClipboard>
+    <div v-if="!editing.mandarake">
+      <template v-if="merchDetails.origin_mandarake?.link">
+        <a
+          :href="merchDetails.origin_mandarake.link"
+          target="_blank"
+          rel="noopener"
+          class="default-color"
+        >
+          {{ merchDetails.origin_mandarake.link }}
+        </a>
+        <n-button type="primary" style="margin-left: 8px" @click="editing.mandarake = true">
+          Edit link
+        </n-button>
+      </template>
+      <template v-else>
+        <span class="default-color underline link-like-text" @click="editing.mandarake = true">Add link</span>
+      </template>
+    </div>
 
-    <n-divider title-placement="left">Mandarake</n-divider>
     <EditLink
+      v-else
       :merch-uuid="merch_uuid"
       origin="mandarake"
       :name="merchDetails.name"
-      v-model="merchDetails.origin_mandarake.link" />
-
+      :model-value="merchDetails.origin_mandarake?.link || ''"
+      @update:model-value="handleLinkUpdate('mandarake', $event)"
+      @cancel-edit="editing.mandarake = false"
+    />
   </n-card>
   <div v-else>Not found</div>