frontend/src/views/AddMerchView.vue

<script setup>

import router from '@/router/index.js'
import { computed, ref } from 'vue'

const addMerch = async () => {
  router.push({ name: 'collection' })
}

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

const name = ref('')

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

const cookieValue = 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 inputValue = computed({
  get() {
    return checkAutoComplete.value ? mandarakeAutocomplete.value : customLink.value
  },
  set(newValue) {
    if (!checkAutoComplete.value) {
      customLink.value = newValue
    }
  }
})
</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" />
        <n-input
          class="mt-10"
          clearable
          placeholder="Cookie values"
          v-model:value="cookieValue"
        />
        <n-checkbox v-model:checked="checkCookie">Default values</n-checkbox>
      </div>

      <div>
        <h3>Mandarake</h3>
        <n-input
          v-model:value="inputValue"
          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>