118 lines
3 KiB
Vue
118 lines
3 KiB
Vue
|
<template>
|
||
|
|
<v-app-bar color="primary" app>
|
||
|
|
<v-app-bar-title>Inventory Manager</v-app-bar-title>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-btn
|
||
|
|
prepend-icon="mdi-plus"
|
||
|
|
@click="openAddStorageDialog"
|
||
|
|
>
|
||
|
|
Add Storage Space
|
||
|
|
</v-btn>
|
||
|
|
|
||
|
|
<!-- Dialog for adding new storage space -->
|
||
|
|
<v-dialog v-model="showDialog" max-width="500px">
|
||
|
|
<v-card>
|
||
|
|
<v-card-title>Add New Storage Space</v-card-title>
|
||
|
|
<v-card-text>
|
||
|
|
<v-form @submit.prevent="addStorageSpace">
|
||
|
|
<v-text-field
|
||
|
|
v-model="newStorage.location"
|
||
|
|
label="Location"
|
||
|
|
required
|
||
|
|
:error-messages="locationError"
|
||
|
|
></v-text-field>
|
||
|
|
|
||
|
|
<v-select
|
||
|
|
v-model="newStorage.parentId"
|
||
|
|
:items="storageSpaces"
|
||
|
|
item-title="location"
|
||
|
|
item-value="id"
|
||
|
|
label="Parent Storage (optional)"
|
||
|
|
clearable
|
||
|
|
>
|
||
|
|
<template v-slot:item="{ item, props }">
|
||
|
|
<v-list-item v-bind="props" :title="item.raw.location || `Storage #${item.raw.id}`"></v-list-item>
|
||
|
|
</template>
|
||
|
|
</v-select>
|
||
|
|
|
||
|
|
<v-alert
|
||
|
|
v-if="error"
|
||
|
|
type="error"
|
||
|
|
variant="tonal"
|
||
|
|
class="mt-3"
|
||
|
|
>
|
||
|
|
{{ error }}
|
||
|
|
</v-alert>
|
||
|
|
</v-form>
|
||
|
|
</v-card-text>
|
||
|
|
<v-card-actions>
|
||
|
|
<v-spacer></v-spacer>
|
||
|
|
<v-btn color="grey" variant="text" @click="showDialog = false">Cancel</v-btn>
|
||
|
|
<v-btn
|
||
|
|
color="primary"
|
||
|
|
variant="elevated"
|
||
|
|
@click="addStorageSpace"
|
||
|
|
:loading="loading"
|
||
|
|
>
|
||
|
|
Save
|
||
|
|
</v-btn>
|
||
|
|
</v-card-actions>
|
||
|
|
</v-card>
|
||
|
|
</v-dialog>
|
||
|
|
</v-app-bar>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, computed } from 'vue';
|
||
|
|
import { useStorageStore } from '@/stores/storage';
|
||
|
|
|
||
|
|
const storageStore = useStorageStore();
|
||
|
|
const showDialog = ref(false);
|
||
|
|
const loading = ref(false);
|
||
|
|
const error = ref<string | null>(null);
|
||
|
|
const locationError = ref<string>('');
|
||
|
|
|
||
|
|
const newStorage = ref({
|
||
|
|
location: '',
|
||
|
|
parentId: null as number | null
|
||
|
|
});
|
||
|
|
|
||
|
|
const storageSpaces = computed(() => storageStore.storageSpaces);
|
||
|
|
|
||
|
|
function openAddStorageDialog() {
|
||
|
|
// Reset form
|
||
|
|
newStorage.value = {
|
||
|
|
location: '',
|
||
|
|
parentId: null
|
||
|
|
};
|
||
|
|
error.value = null;
|
||
|
|
locationError.value = '';
|
||
|
|
showDialog.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function addStorageSpace() {
|
||
|
|
// Validate
|
||
|
|
if (!newStorage.value.location.trim()) {
|
||
|
|
locationError.value = 'Location is required';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
locationError.value = '';
|
||
|
|
loading.value = true;
|
||
|
|
error.value = null;
|
||
|
|
|
||
|
|
try {
|
||
|
|
await storageStore.createStorageSpace({
|
||
|
|
location: newStorage.value.location,
|
||
|
|
parentId: newStorage.value.parentId
|
||
|
|
});
|
||
|
|
|
||
|
|
showDialog.value = false;
|
||
|
|
} catch (err: any) {
|
||
|
|
error.value = err.message || 'Failed to create storage space';
|
||
|
|
} finally {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|