1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-30 10:36:40 +00:00
homebox/frontend/components/Label/CreateModal.vue
2022-09-01 17:52:40 -08:00

66 lines
1.4 KiB
Vue

<template>
<BaseModal v-model="modal">
<template #title> Create Label </template>
<form @submit.prevent="create">
<FormTextField
:trigger-focus="focused"
ref="locationNameRef"
:autofocus="true"
label="Label Name"
v-model="form.name"
/>
<FormTextField label="Label Description" v-model="form.description" />
<div class="modal-action">
<BaseButton type="submit" :loading="loading"> Create </BaseButton>
</div>
</form>
</BaseModal>
</template>
<script setup lang="ts">
const props = defineProps({
modelValue: {
type: Boolean,
required: true,
},
});
const modal = useVModel(props, 'modelValue');
const loading = ref(false);
const focused = ref(false);
const form = reactive({
name: '',
description: '',
color: '', // Future!
});
function reset() {
form.name = '';
form.description = '';
form.color = '';
focused.value = false;
modal.value = false;
loading.value = false;
}
whenever(
() => modal.value,
() => {
focused.value = true;
}
);
const api = useUserApi();
const toast = useNotifier();
async function create() {
const { data, error } = await api.labels.create(form);
if (error) {
toast.error("Couldn't create label");
return;
}
toast.success('Label created');
reset();
}
</script>