126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="valid">
|
|
<ul v-if="isArrayInited" class="list-group">
|
|
<li v-for="(value, index) in array" :key="index" class="list-group-item">
|
|
<select v-model="array[index]" class="no-bg domain-input">
|
|
<option value="">Select a network...</option>
|
|
<option v-for="option in options" :key="option" :value="option">{{ option }}</option>
|
|
</select>
|
|
|
|
<font-awesome-icon icon="times" class="action remove ms-2 me-3 text-danger" @click="remove(index)" />
|
|
</li>
|
|
</ul>
|
|
|
|
<button class="btn btn-normal btn-sm mt-3" @click="addField">{{ $t("addListItem", [ displayName ]) }}</button>
|
|
</div>
|
|
<div v-else>
|
|
Long syntax is not supported here. Please use the YAML editor.
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
displayName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
options: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
computed: {
|
|
array() {
|
|
// Create the array if not exists, it should be safe.
|
|
if (!this.service[this.name]) {
|
|
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
|
this.service[this.name] = [];
|
|
}
|
|
return this.service[this.name];
|
|
},
|
|
|
|
/**
|
|
* Check if the array is inited before called v-for.
|
|
* Prevent empty arrays inserted to the YAML file.
|
|
* @return {boolean}
|
|
*/
|
|
isArrayInited() {
|
|
return this.service[this.name] !== undefined;
|
|
},
|
|
|
|
service() {
|
|
return this.$parent.$parent.service;
|
|
},
|
|
|
|
valid() {
|
|
// Check if the array is actually an array
|
|
if (!Array.isArray(this.array)) {
|
|
return false;
|
|
}
|
|
|
|
// Check if the array contains non-object only.
|
|
for (let item of this.array) {
|
|
if (typeof item === "object") {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
addField() {
|
|
this.array.push("");
|
|
},
|
|
remove(index) {
|
|
this.array.splice(index, 1);
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../styles/vars.scss";
|
|
|
|
.list-group {
|
|
background-color: $dark-bg2;
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0 10px 10px;
|
|
|
|
.domain-input {
|
|
flex-grow: 1;
|
|
background-color: $dark-bg2;
|
|
border: none;
|
|
color: $dark-font-color;
|
|
outline: none;
|
|
|
|
&::placeholder {
|
|
color: #1d2634;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|