Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/components/Settings/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <label class="required-field">{{ timesheetSetting.label }}</label>

    <table width="100%" class="table table-striped table-responsive values-table">
      <thead>
      <tr>
        <th width="50%">Key</th>
        <th width="50%">Value</th>
        <th></th>
      </tr>
      </thead>
      <tbody>

      <tr v-for="(optionValue,optionIndex) in timesheetSetting.value" :id="`tr_${optionIndex}`"
          :data-index="`${optionIndex}`">
        <td>
          <div class="form-group">
            <corals-input :form="form" size="sm" type="text" :field="`timesheetSetting.value.${optionIndex}.key`"
                          v-model="optionValue.key"
                          :label="false"/>
          </div>
        </td>
        <td>
          <div class="form-group">
            <corals-input :form="form" size="sm" type="text" :field="`timesheetSetting.value.${optionIndex}.value`"
                          v-model="optionValue.value"
                          :label="false"/>
          </div>
        </td>
        <td>
          <button class="btn btn-danger btn-sm" style="margin:0;"
                  @click.prevent="removeOption(optionIndex)" :data-index="`${optionIndex}`">
            <fa icon="times"/>
          </button>
        </td>
      </tr>
      </tbody>
    </table>

    <button class="btn btn-success btn-sm" @click.prevent="addOption">
      <fa icon="plus"/>
    </button>
  </div>
</template>

<script>

export default {
  name: "SelectType",
  props: {
    form: {
      required: true
    },
    timesheetSetting: {
      required: true
    },
    index: {
      required: true
    },
  },
  data() {
    return {
    }
  },
  methods: {
    getOptionObject() {
      return {
        'key': '',
        'value': ''
      }
    },
    removeOption(optionIndex) {
      let result = [];
      this.timesheetSetting.value.forEach((arr, index) => {
        if (index != optionIndex) {
          result.push(arr);
        }
      });
      this.timesheetSetting.value = result;
    },
    addOption() {
      this.timesheetSetting.value.push(this.getOptionObject());
    },
  },
  computed: {
  },
}
</script>