dashboard/edit/rio.cattle.io.router/index.vue

107 lines
2.5 KiB
Vue

<script>
import { get, cleanUp } from '@/utils/object';
import { randomStr } from '@/utils/string';
import CreateEditView from '@/mixins/create-edit-view';
import NameNsDescription from '@/components/form/NameNsDescription';
import Rule from '@/edit/rio.cattle.io.router/Rule';
import Footer from '@/components/form/Footer';
export default {
name: 'CruRouter',
components: {
Rule, NameNsDescription, Footer
},
mixins: [CreateEditView],
data() {
let routes = [{ uuid: randomStr() }];
if (get(this.value, 'spec.routes') ) {
routes = this.value.spec.routes.map((route) => {
return { ...route, uuid: randomStr() }
;
}) || [{ uuid: randomStr() }];
}
return {
routes,
spec: this.value.spec || {}
};
},
computed: {
namespace() {
return this.value.metadata.namespace;
},
cleanedRoutes() {
return this.routes.map(route => cleanUp(route));
},
},
methods: {
addRouteSpec() {
this.routes.push({ uuid: randomStr() });
},
saveRouter(buttonCB) {
this.value.spec = { routes: this.cleanedRoutes };
this.save(buttonCB);
},
change(type, value, index) {
this[type].splice(index, 1, value);
},
reposition(oldIndex, newIndex) {
if (newIndex >= 0 && newIndex < this.routes.length) {
const moving = this.routes.splice(oldIndex, 1)[0];
this.routes.splice(newIndex, 0, moving);
}
},
remove(index) {
this.routes.splice(index, 1);
}
}
};
</script>
<template>
<form>
<div class="row">
<NameNsDescription
:value="value"
class="col span-12"
:mode="mode"
:register-before-hook="registerBeforeHook"
/>
</div>
<h2>Rules</h2>
<div class="row">
<div class="col span-12">
<Rule
v-for="(route, i) in routes"
:key="route.uuid"
:namespace="value.metadata.namespace"
:position="i"
class="col span-12"
:spec="route"
@delete="remove(i)"
@up="reposition(i, i-1)"
@down="reposition(i, i+1)"
@input="e=>change('routes', e, i)"
/>
</div>
</div>
<button :disabled="isView" type="button" class="btn role-tertiary add" @click="addRouteSpec">
Add Rule
</button>
<Footer :mode="mode" :errors="errors" @save="saveRouter" @done="done" />
</form>
</template>
<style>
.footer-controls {
justify-content: center;
margin-right: 20px;
}
.returned-errors{
color: red;
}
</style>