98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
<template>
|
|
<div class="container-fluid">
|
|
<h2>Список баз</h2>
|
|
<div
|
|
v-if="isLoadingError"
|
|
class="m-4 alert alert-danger d-flex align-items-center"
|
|
role="alert"
|
|
>
|
|
<svg
|
|
class="bi flex-shrink-0 me-2"
|
|
width="32"
|
|
height="32"
|
|
role="img"
|
|
aria-label="Danger:"
|
|
>
|
|
<use xlink:href="#exclamation-triangle-fill--sprite" />
|
|
</svg>
|
|
<span>Ошибка загрузки</span>
|
|
</div>
|
|
<div v-else-if="isLoading" class="container">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="0 == allInfobases.length" class="container">
|
|
<div class="alert alert-warning" role="alert">
|
|
<svg class="m-2" width="32" height="32">
|
|
<use xlink:href="#exclamation-triangle-fill--sprite"></use>
|
|
</svg>
|
|
<span>Нет ни одной базы</span>
|
|
</div>
|
|
</div>
|
|
<table v-else class="table table-striped">
|
|
<colgroup>
|
|
<col style="width: 3%" />
|
|
<col style="width: 32%" />
|
|
<col style="width: 50%" />
|
|
<col style="width: 15%" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="col text-end">#</th>
|
|
<th scope="col" class="col text-center">Имя</th>
|
|
<th scope="col" class="col text-start">Ссылка</th>
|
|
<th scope="col" class="col text-end">Действия</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr
|
|
v-is="'InfobaseListItem'"
|
|
v-for="(infobase, index) in allInfobases"
|
|
:key="infobase.name"
|
|
:infobase="infobase"
|
|
:index="index"
|
|
/>
|
|
</tbody>
|
|
</table>
|
|
<div v-if="errorMessage" class="container">
|
|
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
|
<svg
|
|
class="bi flex-shrink-0 me-2"
|
|
width="24"
|
|
height="24"
|
|
role="img"
|
|
aria-label="Danger:"
|
|
>
|
|
<use xlink:href="#exclamation-triangle-fill--sprite" />
|
|
</svg>
|
|
<span v-text="errorMessage"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
|
|
import { mapGetters } from "vuex";
|
|
|
|
import InfobaseListItem from "@/components/InfobaseListItem.vue";
|
|
|
|
export default {
|
|
name: "InfobaseList",
|
|
components: {
|
|
InfobaseListItem,
|
|
},
|
|
computed: mapGetters([
|
|
"allInfobases",
|
|
"isLoading",
|
|
"isLoadingError",
|
|
"errorMessage",
|
|
]),
|
|
methods: {},
|
|
async mounted() {
|
|
this.$store.dispatch("fetchInfobases");
|
|
},
|
|
};
|
|
</script>
|