unity/resources/js/user/pages/contract-templates/FormTable.vue

<template>
  <div class="mb-3">
    <div>Contract Template</div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th style="width: 25%">Details</th>
          <th>Obligation Template</th>
          <th>Status</th>
          <th>Created</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="selected_contract_template" v-for="(contract, $index) in selected_contract_template" :key="$index">
          <td>{{ $index + 1 }}</td>
          <td>
            <div><b>Name</b>: {{ contract.name }}</div>
            <div><b>Complete Day Range</b>: {{ contract.complete_day_range }}</div>
          </td>
          <td>
            <div v-if="contract.contract_template_obligation_list" v-for="(obligation, $index) in contract.contract_template_obligation_list" :key="$index">
              <div>-{{ obligation.name }} <small>({{ obligation.sequence }})</small></div>
            </div>
            <div v-if="!contract.contract_template_obligation_list[0]">
              -
            </div>
          </td>
          <td>
              <span :class="'badge badge-' + contract.status[0].color">{{ contract.status[0].name }}</span>
          </td>
          <td>
            {{ contract.created_at }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
	export default {
    props: {
      selected_contract_template: Array,
      no_convert: Boolean
    },
		methods : {
			convertStatus() {
				let vm = this;  
				vm.selected_contract_template.forEach(function(element, index) {
					element.status = General.initFormArray(Constants.contract_template_obligation_status, [element.status]);
				});
			},
		},
		created() {
			let vm = this;
      if (!vm.no_convert) {
        vm.convertStatus();
      }
		}
	}
</script>