url editor component
This commit is contained in:
parent
d4ba24c05f
commit
37af190769
GPG Key ID:
41A00BF15EA7E5F3
|
|
@ -5,14 +5,16 @@
|
|||
<span class="fs-1">⛔</span><br />
|
||||
<h3>Ошибка загрузки</h3>
|
||||
</div>
|
||||
<div v-else-if="is_loading">
|
||||
<div v-else-if="is_loading" class="container">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="0 == infobases.length">
|
||||
<div v-else-if="0 == infobases.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>
|
||||
<svg class="m-2" width="32" height="32">
|
||||
<use xlink:href="#exclamation-triangle-fill--sprite"></use>
|
||||
</svg>
|
||||
<span>Нет ни одной базы</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,33 +33,14 @@
|
|||
<td>{{ infobase.name }}</td>
|
||||
<td>
|
||||
<template v-if="infobase.publicated">
|
||||
<form
|
||||
<InfobaseURLEditor
|
||||
v-if="is_edit_url_active(infobase.name)"
|
||||
@submit.prevent="apply_edit_url(infobase.name)"
|
||||
>
|
||||
<div class="btn-group shadow rounded-start" role="group">
|
||||
<input
|
||||
type="text"
|
||||
v-model="url_edit[infobase.name]"
|
||||
class="rounded-start"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-sm btn-primary"
|
||||
hint="Принять"
|
||||
>
|
||||
<svg width="16" height="16"><use xlink:href="#check-lg--sprite"></use></svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
@click="cancel_edit_url(infobase.name)"
|
||||
hint="Отменить"
|
||||
>
|
||||
<svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
:infobase_name="infobase.name"
|
||||
:key="infobase.name"
|
||||
:init_url="infobase.url"
|
||||
@submit="apply_edit_url"
|
||||
@cancel="cancel_edit_url"
|
||||
/>
|
||||
<a v-else v-bind:href="url_base + infobase.url" target="blank">{{
|
||||
infobase.url
|
||||
}}</a>
|
||||
|
|
@ -105,22 +88,24 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
|
||||
import axios from "axios";
|
||||
|
||||
import "bootstrap-icons/icons/check-lg.svg?sprite"
|
||||
import "bootstrap-icons/icons/x-lg.svg?sprite"
|
||||
import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite"
|
||||
import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
|
||||
|
||||
const api_base = "http://localhost:17653/api/v1";
|
||||
|
||||
export default {
|
||||
name: "InfobaseList",
|
||||
components: {
|
||||
InfobaseURLEditor,
|
||||
},
|
||||
data: () => ({
|
||||
url_base: "http://localhost:11111",
|
||||
is_loading: true,
|
||||
loading_error: false,
|
||||
infobases: [],
|
||||
url_edit: {},
|
||||
url_editors: {},
|
||||
}),
|
||||
methods: {
|
||||
publicate(name) {
|
||||
|
|
@ -145,17 +130,17 @@ export default {
|
|||
let infobase = this.infobases.find((infobase) => name === infobase.name);
|
||||
if (infobase === undefined) return;
|
||||
|
||||
this.url_edit[name] = infobase.url;
|
||||
this.url_editors[name] = true;
|
||||
},
|
||||
cancel_edit_url(name) {
|
||||
delete this.url_edit[name];
|
||||
cancel_edit_url({name}) {
|
||||
delete this.url_editors[name];
|
||||
},
|
||||
apply_edit_url(name) {
|
||||
this.set_url(name, this.url_edit[name]);
|
||||
delete this.url_edit[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_edit;
|
||||
return name in this.url_editors;
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<form @submit.prevent="submit">
|
||||
<div class="btn-group shadow rounded-start" role="group">
|
||||
<input
|
||||
type="text"
|
||||
v-model="url"
|
||||
class="rounded-start"
|
||||
/>
|
||||
<button type="submit" class="btn btn-sm btn-primary" hint="Принять">
|
||||
<svg width="16" height="16">
|
||||
<use xlink:href="#check-lg--sprite"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline-secondary"
|
||||
@click="cancel"
|
||||
hint="Отменить"
|
||||
>
|
||||
<svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "bootstrap-icons/icons/check-lg.svg?sprite";
|
||||
import "bootstrap-icons/icons/x-lg.svg?sprite";
|
||||
|
||||
export default {
|
||||
name: "InfobaseURLEditor",
|
||||
data() {
|
||||
return {
|
||||
url: this.init_url,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
infobase_name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
init_url: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
submit: ({ name, url }) => {
|
||||
if (name && url ) {
|
||||
return true;
|
||||
} else {
|
||||
console.warn("Invalid submit event payload!");
|
||||
return false;
|
||||
}
|
||||
},
|
||||
cancel: null,
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (this.url === this.init_url) {
|
||||
this.cancel()
|
||||
return;
|
||||
}
|
||||
this.$emit("submit", { name: this.infobase_name, url: this.url });
|
||||
},
|
||||
cancel() {
|
||||
this.$emit("cancel", { name: this.infobase_name });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue