151 lines
4.5 KiB
Vue
151 lines
4.5 KiB
Vue
<template>
|
||
<div class="container-fluid">
|
||
<h2>Список баз</h2>
|
||
<div v-if="isLoadingError" class="text-danger m-4">
|
||
<span class="fs-1">⛔</span><br />
|
||
<h3>Ошибка загрузки</h3>
|
||
</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">
|
||
<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-for="(infobase, index) in allInfobases" :key="infobase.name">
|
||
<th class="text-end" scope="row">{{ index + 1 }}</th>
|
||
<td class="text-center">{{ infobase.name }}</td>
|
||
<td class="text-start">
|
||
<template v-if="infobase.publicated">
|
||
<InfobaseURLEditor
|
||
v-if="is_edit_url_active(infobase.name)"
|
||
:infobase_name="infobase.name"
|
||
:key="infobase.name"
|
||
:init_url="infobase.url"
|
||
@submit="apply_edit_url"
|
||
@cancel="cancel_edit_url"
|
||
/>
|
||
<a
|
||
class="text-break"
|
||
v-if="!is_edit_url_active(infobase.name)"
|
||
v-bind:href="url_base + infobase.url"
|
||
target="blank"
|
||
>{{ infobase.url }}</a
|
||
>
|
||
</template>
|
||
</td>
|
||
<td class="text-end">
|
||
<div
|
||
v-if="!is_edit_url_active(infobase.name)"
|
||
class="btn-group shadow"
|
||
role="group"
|
||
>
|
||
<button
|
||
v-if="infobase.publicated"
|
||
type="button"
|
||
class="btn btn-warning"
|
||
@click="start_edit_url(infobase.name)"
|
||
title="Изменить URL"
|
||
>
|
||
Изменить
|
||
</button>
|
||
<button
|
||
v-if="infobase.publicated"
|
||
type="button"
|
||
class="btn btn-danger"
|
||
@click="remove_publication(infobase.name)"
|
||
title="Снять с публикации"
|
||
>
|
||
Отменить
|
||
</button>
|
||
<button
|
||
v-if="!infobase.publicated"
|
||
type="button"
|
||
class="btn btn-primary"
|
||
@click="add_publication(infobase.name)"
|
||
title="Опубликовать базу"
|
||
>
|
||
Публиковать
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
|
||
import { mapGetters, mapMutations } from "vuex";
|
||
|
||
import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
|
||
|
||
export default {
|
||
name: "InfobaseList",
|
||
components: {
|
||
InfobaseURLEditor,
|
||
},
|
||
data: () => ({
|
||
url_base: "http://localhost:11111",
|
||
is_loading: true,
|
||
loading_error: false,
|
||
infobases: [],
|
||
url_editors: {},
|
||
}),
|
||
computed: mapGetters([
|
||
"allInfobases",
|
||
"getInfobaseByName",
|
||
"isLoading",
|
||
"isLoadingError",
|
||
]),
|
||
methods: {
|
||
...mapMutations({
|
||
set_url: "setInfobaseURL",
|
||
set_publication: "setInfobasePublication",
|
||
}),
|
||
add_publication(name) {
|
||
this.set_publication({ name, publicated: true });
|
||
},
|
||
remove_publication(name) {
|
||
this.set_publication({ name, publicated: false });
|
||
},
|
||
start_edit_url(name) {
|
||
let infobase = this.getInfobaseByName(name);
|
||
if (infobase === undefined) return;
|
||
|
||
this.url_editors[name] = true;
|
||
},
|
||
cancel_edit_url({ name }) {
|
||
delete this.url_editors[name];
|
||
},
|
||
apply_edit_url({ name, url }) {
|
||
this.set_url({ name, url });
|
||
delete this.url_editors[name];
|
||
},
|
||
is_edit_url_active(name) {
|
||
return name in this.url_editors;
|
||
},
|
||
},
|
||
async mounted() {
|
||
this.$store.dispatch("fetchInfobases");
|
||
},
|
||
};
|
||
</script>
|