86 lines
2 KiB
Vue
86 lines
2 KiB
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>
|