list item component
This commit is contained in:
parent
da034aa972
commit
3407f1db0e
GPG Key ID:
41A00BF15EA7E5F3
|
|
@ -1,20 +1,25 @@
|
|||
<template>
|
||||
<div class="container-fluid">
|
||||
<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 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>
|
||||
<h2>Список баз</h2>
|
||||
<div v-if="isLoadingError" class="m-4 alert alert-danger d-flex align-items-center" role="alert">
|
||||
<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"
|
||||
|
|
@ -49,64 +54,12 @@
|
|||
</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>
|
||||
<InfobaseListItem
|
||||
v-for="(infobase, index) in allInfobases"
|
||||
:key="infobase.name"
|
||||
:infobase="infobase"
|
||||
:index="index"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -114,21 +67,20 @@
|
|||
|
||||
<script>
|
||||
import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
|
||||
import { mapGetters, mapMutations, mapActions } from "vuex";
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
|
||||
import InfobaseListItem from "@/components/InfobaseListItem.vue";
|
||||
|
||||
export default {
|
||||
name: "InfobaseList",
|
||||
components: {
|
||||
InfobaseURLEditor,
|
||||
InfobaseListItem,
|
||||
},
|
||||
data: () => ({
|
||||
url_base: "http://localhost:11111",
|
||||
is_loading: true,
|
||||
loading_error: false,
|
||||
infobases: [],
|
||||
url_editors: {},
|
||||
}),
|
||||
computed: mapGetters([
|
||||
"allInfobases",
|
||||
|
|
@ -137,37 +89,7 @@ export default {
|
|||
"isLoadingError",
|
||||
"errorMessage",
|
||||
]),
|
||||
methods: {
|
||||
...mapMutations({
|
||||
set_url: "setInfobaseURL",
|
||||
set_publication: "setInfobasePublication",
|
||||
}),
|
||||
...mapActions({
|
||||
set_url: "updateInfobaseURL",
|
||||
}),
|
||||
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;
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
async mounted() {
|
||||
this.$store.dispatch("fetchInfobases");
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<tr>
|
||||
<th class="text-end" scope="row">{{ index + 1 }}</th>
|
||||
<td class="text-center">{{ name }}</td>
|
||||
<td class="text-start">
|
||||
<template v-if="publicated">
|
||||
<InfobaseURLEditor
|
||||
v-if="url_edit"
|
||||
:infobase_name="name"
|
||||
:key="name"
|
||||
:init_url="url"
|
||||
@submit="apply_edit_url"
|
||||
@cancel="cancel_edit_url"
|
||||
/>
|
||||
<a
|
||||
class="text-break"
|
||||
v-if="!url_edit"
|
||||
v-bind:href="url_base + url"
|
||||
target="blank"
|
||||
>{{ infobase.url }}</a
|
||||
>
|
||||
</template>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div
|
||||
v-if="!url_edit && !pending_operation"
|
||||
class="btn-group shadow"
|
||||
role="group"
|
||||
>
|
||||
<button
|
||||
v-if="publicated"
|
||||
type="button"
|
||||
class="btn btn-warning"
|
||||
@click="start_edit_url"
|
||||
title="Изменить URL"
|
||||
>
|
||||
Изменить
|
||||
</button>
|
||||
<button
|
||||
v-if="publicated"
|
||||
type="button"
|
||||
class="btn btn-danger"
|
||||
@click="remove_publication"
|
||||
title="Снять с публикации"
|
||||
>
|
||||
Отменить
|
||||
</button>
|
||||
<button
|
||||
v-if="!publicated"
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
@click="add_publication"
|
||||
title="Опубликовать базу"
|
||||
>
|
||||
Публиковать
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
|
||||
import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
|
||||
|
||||
export default {
|
||||
name: "InfobaseListItem",
|
||||
components: {
|
||||
InfobaseURLEditor,
|
||||
},
|
||||
data: () => ({
|
||||
url_base: "http://localhost:11111",
|
||||
url_edit: false,
|
||||
pending_operation: false,
|
||||
}),
|
||||
props: {
|
||||
index: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
infobase: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["getInfobaseByName"]),
|
||||
name() {
|
||||
return this.infobase.name;
|
||||
},
|
||||
publicated() {
|
||||
return this.infobase.publicated;
|
||||
},
|
||||
url() {
|
||||
return this.infobase.url;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
set_url: "setInfobaseURL",
|
||||
set_publication: "setInfobasePublication",
|
||||
}),
|
||||
// ...mapActions({
|
||||
// set_url: "updateInfobaseURL",
|
||||
// }),
|
||||
add_publication() {
|
||||
let name = this.name;
|
||||
this.set_publication({ name, publicated: true });
|
||||
},
|
||||
remove_publication() {
|
||||
let name = this.name;
|
||||
this.set_publication({ name, publicated: false });
|
||||
},
|
||||
start_edit_url() {
|
||||
this.url_edit = true;
|
||||
},
|
||||
cancel_edit_url() {
|
||||
this.url_edit = false;
|
||||
},
|
||||
apply_edit_url({ name, url }) {
|
||||
this.set_url({ name, url });
|
||||
this.url_edit = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue