toolshed/frontend/src/views/Admin.vue
2024-08-31 01:27:40 +02:00

115 lines
No EOL
4.5 KiB
Vue

<template>
<BaseLayout>
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Admin</h1>
<div class="row">
<div class="col-6 col-xl-3">
<div class="card">
<div class="card-header">
<h5 class="card-title">Tags</h5>
</div>
<div class="card-body">
<ul>
<li v-for="tag in tags.sort()" :key="tag.id">
{{ tag }}
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="card">
<div class="card-header">
<h5 class="card-title">Properties</h5>
</div>
<div class="card-body">
<ul>
<li v-for="property in properties.sort()" :key="property.id">
{{ property.name }} ({{ property.unit_name }}, {{ property.unit_symbol }})
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Categories</h5>
</div>
<div class="card-body">
<ul>
<li v-for="category in categories.sort()" :key="category.id">
{{ category }}
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Domains</h5>
</div>
<div class="card-body">
<ul>
<li v-for="domain in domains.sort()" :key="domain.id">
{{ domain }}
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Availability Policies</h5>
</div>
<div class="card-body">
<ul>
<li v-for="policy in availability_policies.sort()" :key="policy.id">
{{ policy.text }}
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<h5 class="card-title">Storage Locations</h5>
</div>
<div class="card-body">
<ul>
<li v-for="location in storage_locations.sort()" :key="location.id">
{{ location.path }}
</li>
</ul>
</div>
</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: "Admin",
components: {
BaseLayout,
...BIcons
},
computed: {
...mapState(["tags", "properties", "categories", "availability_policies", "domains", "storage_locations"])
},
methods: {
...mapActions(["fetchInfo", "fetchStorageLocations"])
},
async mounted() {
await this.fetchInfo();
await this.fetchStorageLocations();
}
}
</script>
<style scoped>
</style>