url editor component

This commit is contained in:
Dmitry Belyaev 2021-05-29 22:14:13 +03:00
parent d4ba24c05f
commit 37af190769
Signed by: b4tman
GPG Key ID: 41A00BF15EA7E5F3
2 changed files with 96 additions and 40 deletions

View File

@ -5,14 +5,16 @@
<span class="fs-1">&#9940;</span><br /> <span class="fs-1">&#9940;</span><br />
<h3>Ошибка загрузки</h3> <h3>Ошибка загрузки</h3>
</div> </div>
<div v-else-if="is_loading"> <div v-else-if="is_loading" class="container">
<div class="spinner-border text-primary" role="status"> <div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</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"> <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> <span>Нет ни одной базы</span>
</div> </div>
</div> </div>
@ -31,33 +33,14 @@
<td>{{ infobase.name }}</td> <td>{{ infobase.name }}</td>
<td> <td>
<template v-if="infobase.publicated"> <template v-if="infobase.publicated">
<form <InfobaseURLEditor
v-if="is_edit_url_active(infobase.name)" v-if="is_edit_url_active(infobase.name)"
@submit.prevent="apply_edit_url(infobase.name)" :infobase_name="infobase.name"
> :key="infobase.name"
<div class="btn-group shadow rounded-start" role="group"> :init_url="infobase.url"
<input @submit="apply_edit_url"
type="text" @cancel="cancel_edit_url"
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>
<a v-else v-bind:href="url_base + infobase.url" target="blank">{{ <a v-else v-bind:href="url_base + infobase.url" target="blank">{{
infobase.url infobase.url
}}</a> }}</a>
@ -105,22 +88,24 @@
</template> </template>
<script> <script>
import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite";
import axios from "axios"; import axios from "axios";
import "bootstrap-icons/icons/check-lg.svg?sprite" import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
import "bootstrap-icons/icons/x-lg.svg?sprite"
import "bootstrap-icons/icons/exclamation-triangle-fill.svg?sprite"
const api_base = "http://localhost:17653/api/v1"; const api_base = "http://localhost:17653/api/v1";
export default { export default {
name: "InfobaseList", name: "InfobaseList",
components: {
InfobaseURLEditor,
},
data: () => ({ data: () => ({
url_base: "http://localhost:11111", url_base: "http://localhost:11111",
is_loading: true, is_loading: true,
loading_error: false, loading_error: false,
infobases: [], infobases: [],
url_edit: {}, url_editors: {},
}), }),
methods: { methods: {
publicate(name) { publicate(name) {
@ -145,17 +130,17 @@ export default {
let infobase = this.infobases.find((infobase) => name === infobase.name); let infobase = this.infobases.find((infobase) => name === infobase.name);
if (infobase === undefined) return; if (infobase === undefined) return;
this.url_edit[name] = infobase.url; this.url_editors[name] = true;
}, },
cancel_edit_url(name) { cancel_edit_url({name}) {
delete this.url_edit[name]; delete this.url_editors[name];
}, },
apply_edit_url(name) { apply_edit_url({name, url}) {
this.set_url(name, this.url_edit[name]); this.set_url(name, url);
delete this.url_edit[name]; delete this.url_editors[name];
}, },
is_edit_url_active(name) { is_edit_url_active(name) {
return name in this.url_edit; return name in this.url_editors;
}, },
}, },
async mounted() { async mounted() {

View File

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