mirror of https://github.com/rancher/dashboard.git
104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<script>
|
|
import ArrayList from '@shell/components/form/ArrayList';
|
|
import Select from '@shell/components/form/Select';
|
|
|
|
export default {
|
|
emits: ['update:value'],
|
|
|
|
components: { ArrayList, Select },
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
options: {
|
|
default: null,
|
|
type: Array
|
|
},
|
|
selectProps: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
arrayListProps: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
enableDefaultAddValue: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
filteredOptions() {
|
|
return this.options
|
|
.filter((option) => !this.value.includes(option.value));
|
|
},
|
|
|
|
addAllowed() {
|
|
return this.arrayListProps?.addAllowed || this.filteredOptions.length > 0;
|
|
},
|
|
|
|
defaultAddValue() {
|
|
return this.enableDefaultAddValue ? this.options[0]?.value : '';
|
|
},
|
|
|
|
getOptionLabel() {
|
|
return this.selectProps?.getOptionLabel ? (opt) => (this.selectProps?.getOptionLabel(opt) || opt) : undefined;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
updateRow(index, value) {
|
|
this.value.splice(index, 1, value);
|
|
this.$emit('update:value', this.value);
|
|
},
|
|
calculateOptions(value) {
|
|
const valueOption = this.options.find((o) => o.value === value);
|
|
|
|
if (valueOption) {
|
|
return [valueOption, ...this.filteredOptions];
|
|
}
|
|
|
|
return this.filteredOptions;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<ArrayList
|
|
v-bind="arrayListProps"
|
|
:value="value"
|
|
class="array-list-select"
|
|
:add-allowed="addAllowed || loading"
|
|
:loading="loading"
|
|
:defaultAddValue="defaultAddValue"
|
|
:disabled="disabled"
|
|
@update:value="$emit('update:value', $event)"
|
|
>
|
|
<template v-slot:columns="scope">
|
|
<Select
|
|
:value="scope.row.value"
|
|
v-bind="selectProps"
|
|
:options="calculateOptions(scope.row.value)"
|
|
:get-option-label="getOptionLabel"
|
|
@update:value="updateRow(scope.i, $event)"
|
|
/>
|
|
</template>
|
|
</ArrayList>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep() .unlabeled-select {
|
|
height: 61px;
|
|
}
|
|
</style>
|