62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<Modal ref="modalRef" size="md">
|
||
|
|
<template #title>
|
||
|
|
Create a new storage {{ set === true ? 'set' : '' }}
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template #default="{ closeModal }">
|
||
|
|
<Form @submit="onSubmit" v-model="data" :validators="validators">
|
||
|
|
<FormField name="displayName" label="Display Name" />
|
||
|
|
<FormField name="type" label="Type" />
|
||
|
|
<button type="submit">Submit</button>
|
||
|
|
</Form>
|
||
|
|
</template>
|
||
|
|
</Modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import { BuildingListItem } from '../../interfaces/building.interfaces';
|
||
|
|
import { RoomListItem } from '../../interfaces/room.interfaces';
|
||
|
|
import { StorageSetListItem } from '../../interfaces/storage.interfaces';
|
||
|
|
import { FormSubmit } from '../form/form.types';
|
||
|
|
import Form from '../form/Form.vue';
|
||
|
|
import FormField from '../form/FormField.vue';
|
||
|
|
import { IsRequired, MinLength } from '../form/validators';
|
||
|
|
import Modal from '../Modal.vue';
|
||
|
|
|
||
|
|
const modalRef = ref<InstanceType<typeof Modal>>();
|
||
|
|
const room = ref<RoomListItem>();
|
||
|
|
const building = ref<BuildingListItem>();
|
||
|
|
const set = ref<StorageSetListItem | boolean>();
|
||
|
|
const data = ref({
|
||
|
|
displayName: '',
|
||
|
|
});
|
||
|
|
|
||
|
|
const validators = ref([
|
||
|
|
{
|
||
|
|
field: 'displayName',
|
||
|
|
validators: [MinLength(3), IsRequired()],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
field: 'type',
|
||
|
|
validators: [IsRequired()],
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
openModal: (
|
||
|
|
useBuilding: BuildingListItem,
|
||
|
|
useRoom: RoomListItem,
|
||
|
|
useSet?: StorageSetListItem | boolean
|
||
|
|
) => {
|
||
|
|
room.value = useRoom;
|
||
|
|
building.value = useBuilding;
|
||
|
|
set.value = useSet;
|
||
|
|
modalRef.value?.openModal();
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const onSubmit = (value: FormSubmit) => console.log(value);
|
||
|
|
</script>
|