134 lines
6.4 KiB
Vue
134 lines
6.4 KiB
Vue
<template>
|
|
<BaseLayout>
|
|
<main class="content">
|
|
<div class="container-fluid p-0">
|
|
<h1 class="h3 mb-3">Storage Locations</h1>
|
|
<div class="row">
|
|
<div class="col-12 col-xl-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">{{ user }}'s Storage Locations</h5>
|
|
<button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
|
|
<b-icon-list></b-icon-list>
|
|
</button>
|
|
<button v-else @click="layout = 'grid'" class="btn">
|
|
<b-icon-grid></b-icon-grid>
|
|
</button>
|
|
</div>
|
|
<table class="table table-striped" v-if="layout === 'table'">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:40%;">Name</th>
|
|
<th style="width:25%">Path</th>
|
|
<th class="d-none d-md-table-cell" style="width:25%">Category</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="location in storage_locations" :key="location.id">
|
|
<td>
|
|
<router-link :to="`/storage-locations/${location.id}`">{{ location.name }}</router-link>
|
|
</td>
|
|
<td class="d-none d-md-table-cell">
|
|
<span class="text-muted">{{ location.path }}</span>
|
|
</td>
|
|
<td class="d-none d-md-table-cell">
|
|
<span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
|
|
<span class="text-muted" v-else>-</span>
|
|
</td>
|
|
<td class="table-action">
|
|
<router-link :to="`/storage-locations/${location.id}/edit`">
|
|
<b-icon-pencil-square></b-icon-pencil-square>
|
|
</router-link>
|
|
<a :href="`/storage-locations/${location.id}/delete`" @click.prevent="deleteStorageLocation(location)">
|
|
<b-icon-trash></b-icon-trash>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="card-body" v-else>
|
|
<div class="row">
|
|
<div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="location in storage_locations"
|
|
:key="location.id">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-0">
|
|
<router-link :to="`/storage-locations/${location.id}`">
|
|
{{ location.name }}
|
|
</router-link>
|
|
</h5>
|
|
<div class="card-text text-black-50">
|
|
<small class="text-muted d-block">{{ location.path }}</small>
|
|
<span class="badge bg-info text-white" v-if="location.category">{{ location.category }}</span>
|
|
</div>
|
|
<div class="card-text" v-if="location.description">
|
|
<small>{{ location.description }}</small>
|
|
</div>
|
|
<div class="btn-group mt-2">
|
|
<button class="btn btn-danger btn-sm"
|
|
@click="deleteStorageLocation(location.id)">Delete
|
|
</button>
|
|
<router-link :to="`/storage-locations/${location.id}/edit`"
|
|
class="btn btn-primary btn-sm">Edit
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card">
|
|
<button class="btn" @click="fetchStorageLocations">Refresh</button>
|
|
<router-link to="/storage-locations/new" class="btn btn-primary">Add</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</BaseLayout>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapActions, mapState} from "vuex";
|
|
import * as BIcons from "bootstrap-icons-vue";
|
|
import BaseLayout from "@/components/BaseLayout.vue";
|
|
|
|
export default {
|
|
name: "StorageLocation",
|
|
data() {
|
|
return {
|
|
layout: "grid",
|
|
}
|
|
},
|
|
components: {
|
|
BaseLayout,
|
|
...BIcons
|
|
},
|
|
computed: {
|
|
...mapState(["user", "storage_locations"]),
|
|
},
|
|
methods: {
|
|
...mapActions(["fetchStorageLocations", "deleteStorageLocation"]),
|
|
},
|
|
async mounted() {
|
|
await this.fetchStorageLocations()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card-text small {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.btn-group {
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-group .btn {
|
|
flex: 1;
|
|
}
|
|
</style>
|