96 lines
3.9 KiB
Vue
96 lines
3.9 KiB
Vue
<template>
|
|
<BaseLayout>
|
|
<main class="content">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header">Create New Storage Location</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="name" class="form-label">Name</label>
|
|
<input type="text" class="form-control" id="name" name="name"
|
|
placeholder="Enter storage location name" v-model="location.name">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Description</label>
|
|
<textarea class="form-control" id="description" name="description"
|
|
placeholder="Enter description" v-model="location.description"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="category" class="form-label">Category</label>
|
|
<select class="form-select" id="category" name="category"
|
|
v-model="location.category">
|
|
<option value="">No Category</option>
|
|
<option v-for="category in categories" :value="category">
|
|
{{ category }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="parent" class="form-label">Parent Location</label>
|
|
<select class="form-select" id="parent" name="parent"
|
|
v-model="location.parent">
|
|
<option value="">No Parent</option>
|
|
<option v-for="parent in storage_locations" :value="parent.id">
|
|
{{ parent.path }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<button type="submit" class="btn btn-primary" style="width: 100%"
|
|
@click="submitForm()">Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</BaseLayout>
|
|
</template>
|
|
|
|
<script>
|
|
import * as BIcons from "bootstrap-icons-vue";
|
|
import {mapActions, mapState} from "vuex";
|
|
import BaseLayout from "@/components/BaseLayout.vue";
|
|
|
|
export default {
|
|
name: "StorageLocationNew",
|
|
components: {
|
|
BaseLayout,
|
|
...BIcons
|
|
},
|
|
data() {
|
|
return {
|
|
location: {
|
|
name: "",
|
|
description: "",
|
|
category: null,
|
|
parent: null
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['createStorageLocation', 'fetchInfo', 'fetchStorageLocations']),
|
|
submitForm() {
|
|
// Convert empty strings to null for ForeignKey fields
|
|
const locationData = {
|
|
...this.location,
|
|
category: this.location.category === "" ? null : this.location.category,
|
|
parent: this.location.parent === "" ? null : this.location.parent
|
|
};
|
|
this.createStorageLocation(locationData).then(() => this.$router.push('/storage-location'));
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(["categories", "storage_locations"]),
|
|
},
|
|
async mounted() {
|
|
await this.fetchInfo();
|
|
await this.fetchStorageLocations();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|