mirror of https://github.com/rancher/dashboard.git
108 lines
2.7 KiB
Vue
108 lines
2.7 KiB
Vue
<script>
|
|
import ArrayList from '@shell/components/form/ArrayList';
|
|
import Row from './ProjectRow';
|
|
import { QUOTA_COMPUTED } from './shared';
|
|
|
|
export default {
|
|
emits: ['remove', 'input'],
|
|
|
|
components: { ArrayList, Row },
|
|
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
},
|
|
types: {
|
|
type: Array,
|
|
default: () => {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return { typeValues: null };
|
|
},
|
|
|
|
created() {
|
|
this.value['spec'] = this.value.spec || {};
|
|
this.value.spec['namespaceDefaultResourceQuota'] = this.value.spec.namespaceDefaultResourceQuota || { limit: {} };
|
|
this.value.spec['resourceQuota'] = this.value.spec.resourceQuota || { limit: {} };
|
|
|
|
this.typeValues = Object.keys(this.value.spec.resourceQuota.limit);
|
|
},
|
|
|
|
computed: { ...QUOTA_COMPUTED },
|
|
|
|
methods: {
|
|
updateType(i, type) {
|
|
this.typeValues[i] = type;
|
|
},
|
|
remainingTypes(currentType) {
|
|
return this.mappedTypes
|
|
.filter((mappedType) => !this.typeValues.includes(mappedType.value) || mappedType.value === currentType);
|
|
},
|
|
emitRemove(data) {
|
|
this.$emit('remove', data.row?.value);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="headers mb-10">
|
|
<div class="mr-10">
|
|
<label>{{ t('resourceQuota.headers.resourceType') }}</label>
|
|
</div>
|
|
<div class="mr-20">
|
|
<label>{{ t('resourceQuota.headers.projectLimit') }}</label>
|
|
</div>
|
|
<div class="mr-10">
|
|
<label>{{ t('resourceQuota.headers.namespaceDefaultLimit') }}</label>
|
|
</div>
|
|
</div>
|
|
<ArrayList
|
|
v-model:value="typeValues"
|
|
label="Resources"
|
|
:add-label="t('resourceQuota.add.label')"
|
|
:default-add-value="remainingTypes()[0] ? remainingTypes()[0].value : ''"
|
|
:add-allowed="remainingTypes().length > 0"
|
|
:mode="mode"
|
|
@remove="emitRemove"
|
|
>
|
|
<template #columns="props">
|
|
<Row
|
|
:value="value"
|
|
:mode="mode"
|
|
:types="remainingTypes(typeValues[props.i])"
|
|
:type="typeValues[props.i]"
|
|
@input="$emit('input', $event)"
|
|
@type-change="updateType(props.i, $event)"
|
|
/>
|
|
</template>
|
|
</ArrayList>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.headers {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border);
|
|
height: 30px;
|
|
width: calc(100% - 75px);
|
|
|
|
div {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|