inventory/web/src/components/AppHeader.vue

118 lines
3 KiB
Vue
Raw Normal View History

<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>