frontend/src/views/AddMerchView.vue

<script setup>
import router from '@/router/index.js'
import { computed, ref } from 'vue'
import { useMerchApi } from '@/api/merch.js'
import { BASE_MANDARAKE_LINK } from '@/main.js'

const { addMerch } = useMerchApi()

const name = ref('')

// surugaya block
const surugayaLink = ref('')

// mandarake block
const checkAutoComplete = ref(true)
const customLink = ref('')

const mandarakeAutocomplete = computed(() => {
  return `${BASE_MANDARAKE_LINK}${name.value}`
})

const mandarakeResultLink = computed({
  get() {
    return checkAutoComplete.value ? mandarakeAutocomplete.value : customLink.value
  },
  set(newValue) {
    if (!checkAutoComplete.value) {
      customLink.value = newValue
    }
  },
})

// payload

const payload = computed(() => {
  return {
    merch_uuid: null,
    name: name.value,
    origin_mandarake: {
      link: mandarakeResultLink.value,
    },
    origin_surugaya: {
      link: surugayaLink.value,
    },
  }
})

const addNewMerch = async () => {
  try {
    await addMerch(payload)
  } catch (error) {
    console.log(error)
  }
  router.push({ name: "collection" })
}
</script>

<template>
  <n-card title="Add merch">
    <n-form>
      <n-divider title-placement="left">Main</n-divider>
      <div class="mb-20">
        <h3>Name</h3>
        <n-input class="mt-10" clearable placeholder="Name" v-model:value="name" />
      </div>

      <n-divider title-placement="left">Origins</n-divider>
      <div>
        <h3>Surugaya</h3>
        <n-input class="mt-10" clearable placeholder="Link" v-model:value="surugayaLink" />
      </div>

      <div>
        <h3>Mandarake</h3>
        <n-input v-model:value="mandarakeResultLink" class="mt-10" clearable placeholder="Link" />
        <n-checkbox v-model:checked="checkAutoComplete">Auto-complete link</n-checkbox>
      </div>

      <div class="mt-10 c-center">
        <n-button class="w360" type="primary" @click="addNewMerch">Add</n-button>
      </div>
    </n-form>
  </n-card>
</template>

<style scoped></style>