91 lines
2.5 KiB
Vue
91 lines
2.5 KiB
Vue
<template>
|
|
<v-card title="Organize a realm" prepend-icon="mdi-account-multiple" :loading="loading">
|
|
<v-form @submit.prevent="submit">
|
|
<v-card-text>
|
|
<v-text-field label="Name" variant="outlined" density="comfortable" v-model="data.name" />
|
|
<v-textarea label="Description" variant="outlined" density="comfortable" v-model="data.description" />
|
|
<v-select
|
|
label="Realm type"
|
|
item-title="label"
|
|
item-value="value"
|
|
variant="outlined"
|
|
density="comfortable"
|
|
:items="realmTypeOptions"
|
|
v-model="data.realm_type"
|
|
/>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-btn type="reset" color="grey-darken-3" @click="realms.show.editor = false">Cancel</v-btn>
|
|
<v-btn type="submit" :disabled="loading">Save</v-btn>
|
|
</v-card-actions>
|
|
</v-form>
|
|
</v-card>
|
|
|
|
<!-- @vue-ignore -->
|
|
<v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from "vue"
|
|
import { getAtk } from "@/stores/userinfo"
|
|
import { useRealms } from "@/stores/realms"
|
|
import { request } from "@/scripts/request"
|
|
|
|
const emits = defineEmits(["relist"])
|
|
|
|
const realms = useRealms()
|
|
|
|
const realmTypeOptions = [
|
|
{ label: "Public Realm", value: 0 },
|
|
{ label: "Restricted Realm", value: 1 },
|
|
{ label: "Private Realm", value: 2 }
|
|
]
|
|
|
|
const error = ref<null | string>(null)
|
|
const loading = ref(false)
|
|
|
|
const data = ref({
|
|
name: "",
|
|
description: "",
|
|
realm_type: 0
|
|
})
|
|
|
|
async function submit(evt: SubmitEvent) {
|
|
const form = evt.target as HTMLFormElement
|
|
const payload = data.value
|
|
if (!payload.name) return
|
|
|
|
const url = realms.related.edit_to ? `/api/realms/${realms.related.edit_to?.id}` : "/api/realms"
|
|
const method = realms.related.edit_to ? "PUT" : "POST"
|
|
|
|
loading.value = true
|
|
const res = await request("interactive", url, {
|
|
method: method,
|
|
headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
|
|
body: JSON.stringify(payload)
|
|
})
|
|
if (res.status !== 200) {
|
|
error.value = await res.text()
|
|
} else {
|
|
emits("relist")
|
|
form.reset()
|
|
realms.done = true
|
|
realms.show.editor = false
|
|
realms.related.edit_to = null
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
watch(
|
|
realms.related,
|
|
(val) => {
|
|
if (val.edit_to) {
|
|
data.value = JSON.parse(JSON.stringify(val.edit_to))
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
</script>
|