list item component

This commit is contained in:
Dmitry Belyaev 2021-06-01 23:17:40 +03:00
parent da034aa972
commit 3407f1db0e
Signed by: b4tman
GPG Key ID: 41A00BF15EA7E5F3
2 changed files with 155 additions and 106 deletions

View File

@ -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");
},

View File

@ -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>