frontend/src/views/AddMerchView.vue

<script setup>
import router from '@/router/index.js'
import { computed, ref } from 'vue'
import { apiClient } from '@/services/apiClient.js'

const mandarakeLink = 'https://order.mandarake.co.jp/order/listPage/list?soldOut=1&keyword='

const name = ref('')

// surugaya block
const surugayaLink = ref('')
const checkCookie = ref(true)
const surugayaDefaultCookieValues = ref('safe_search_expired=2;safe_search_option=3')
const surugayaCustomCookieValues = ref('')

const surugayaCookieValue = computed({
  get() {
    return checkCookie.value ? surugayaDefaultCookieValues.value : surugayaCustomCookieValues.value
  },
  set(newValue) {
    if (!checkCookie.value) {
      surugayaCustomCookieValues.value = newValue
    }
  },
})

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

const mandarakeAutocomplete = computed(() => {
  return `${mandarakeLink}${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: {
      cookie_values: surugayaCookieValue.value,
      link: surugayaLink.value,
    },
  }
})

const addMerch = async () => {
  const response = await apiClient.post('/merch/', payload.value)
  if (response.status === 200) {
    router.push({ name: 'collection' })
  } else {
    console.log("Add merch error: ", response)
  }
}
</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" />
        <n-input
          class="mt-10"
          clearable
          placeholder="Cookie values"
          v-model:value="surugayaCookieValue"
        />
        <n-checkbox v-model:checked="checkCookie">Default values</n-checkbox>
      </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="addMerch">Add</n-button>
      </div>
    </n-form>
  </n-card>
</template>

<style scoped></style>