dashboard/edit/networking.k8s.io.ingress/Rule.vue

<script>

import RulePath from '@/edit/networking.k8s.io.ingress/RulePath';
import LabeledInput from '@/components/form/LabeledInput';
import { random32 } from '../../utils/string';

export default {
  components: { RulePath, LabeledInput },

  props: {
    value: {
      type:    Object,
      default: () => {
        return {};
      }
    },
    workloads: {
      type:    Array,
      default: () => []
    }
  },

  data() {
    const { host = '', http = {} } = this.value;

    const { paths = [{ id: random32(1) }] } = http;

    return {
      host, paths, ruleMode: this.value.asDefault ? 'asDefault' : 'setHost'
    };
  },

  methods: {
    update() {
      const http = { paths: this.paths };
      const out = { ...this.value, http };

      if (this.host) {
        out.host = this.host;
      } else {
        delete out.host;
      }

      this.$emit('input', out);
    },

    addPath() {
      this.paths = [...this.paths, { id: random32(1) }];
    },

    removePath(idx) {
      const neu = [...this.paths];

      neu.splice(idx, 1);
      this.paths = neu;
    },

    removeRule() {
      this.$emit('remove');
    }
  }
};
</script>

<template>
  <div class="rule mt-20" @input="update">
    <div class="row">
      <div id="host" class="col span-6">
        <LabeledInput v-model="host" label="Request Host" placeholder="e.g. example.com" />
      </div>
      <div class="col span-6">
        <button class="btn role-link close" @click="removeRule">
          <i class="icon icon-2x icon-x" />
        </button>
      </div>
    </div>
    <template v-for="(path, i) in paths">
      <RulePath
        :key="path.id"
        class="row mb-10"
        :value="path"
        :rule-mode="ruleMode"
        :targets="workloads"
        @input="e=>$set(paths, i, e)"
        @remove="e=>removePath(i)"
      />
    </template>
    <button v-if="ruleMode === 'setHost'" class="btn btn-sm role-link" @click="addPath">
      add path
    </button>
  </div>
</template>

<style lang='scss' scoped>
  .rule {
    background: var(--tabbed-container-bg);
    border: 1px solid var(--tabbed-border);
    border-radius: var(--border-radius);
    padding: 20px;
  }

  #host {
    align-self: center
  }

  .close{
    float:right;
    padding: 0px;
    position: relative;
    top: -10px;
    right: -10px;
  }
</style>