UnivateProperties/src/components/admin/property/userDefinedGroupPage.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <div v-if="showField === false">
      <section class="intro-single">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-lg-8">
              <div class="title-single-box">
                <h2 class="title-single">User Defined Group</h2>
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="container">
        <div class="row mb-3">
          <div class="col-md-12">
            <form id="mainForm">
              <div v-if="userDefinedGroup" class="form-group row">
                <div class="col-md-4">
                  <label>Description</label>
                  <input
                    class="form-control"
                    type="text"
                    name="description"
                    id="description"
                    v-model="userDefinedGroup.description"
                  />
                </div>
                <div class="col-md-4">
                  <label>Property Type</label>
                  <select
                    class="form-control"
                    name="UsageType"
                    id="UsageType"
                    v-model="userDefinedGroup.usageType"
                  >
                    <option value="0">Residential</option>
                    <option value="1">Commercial</option>
                    <option value="2">Both</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label>Order</label>
                  <input
                    class="form-control"
                    type="number"
                    name="rank"
                    id="rank"
                    v-model="userDefinedGroup.rank"
                  />
                </div>
              </div>
              <div v-if="!userDefinedGroup" class="form-group row">
                <div class="col-md-4">
                  <label>Description</label>
                  <input
                    class="form-control"
                    type="text"
                    name="description"
                    id="description"
                    v-model="group.description"
                  />
                </div>
                <div class="col-md-4">
                  <label>Property Type</label>
                  <select
                    class="form-control"
                    name="UsageType"
                    id="UsageType"
                    v-model="group.usageType"
                  >
                    <option value="0">Residential</option>
                    <option value="1">Commercial</option>
                    <option value="2">Both</option>
                  </select>
                </div>
                <div class="col-md-4">
                  <label>Order</label>
                  <input
                    class="form-control"
                    type="number"
                    name="rank"
                    id="rank"
                    v-model="group.rank"
                  />
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="container">
        <button
          type="button"
          @click="newItem()"
          class="btn btn-b-n"
          style="width: 85px; height:40px;"
        >New</button>
        <br />
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>Field Name</th>
              <th>Field Type</th>
              <th>Order</th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, i) in userFields" :key="i">
              <td>{{item.fieldName}}</td>
              <td v-if="item.fieldType === 'text'">Text</td>
              <td v-else-if="item.fieldType === 'number'">Number</td>
              <td v-else>Yes / No</td>
              <td>{{item.rank}}</td>
              <td>
                <button
                  type="button"
                  @click="Edit(item)"
                  class="btn btn-b-n"
                  style="width: 85px; height:40px;"
                >Edit</button>
              </td>
              <td>
                <button
                  type="button"
                  @click="Delete(item)"
                  class="btn btn-b-n"
                  style="width: 85px; height:40px;"
                >Delete</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <button
        type="button"
        @click="SubmitData()"
        class="btn btn-b-n"
        style="width: 85px; height:40px;"
      >Save</button>
      <button
        type="button"
        @click="Close()"
        class="btn btn-b-n"
        style="width: 85px; height:40px;"
      >Close</button>
    </div>
    <div v-else>
      <userFields @UpdateUserField="UpdateUserField" :field="item" />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import userFields from './userDefinedField.vue';

export default {
  name: 'UserDefinedGroup',
  components: {
    userFields,
  },
  data() {
    return {
      item: {},
      showField: false,
    };
  },
  mounted() {
    this.clearUserFields();
    this.clearUserGroup();

    if (this.$route.params.id > 0) {
      this.getUserDefinedGroup(this.$route.params.id);
      this.getUserFields(this.$route.params.id);
    }
  },
  computed: {
    ...mapState('propertyAdmin', [
      'userDefinedGroup',
      'userFields',
      'userField',
    ]),
  },
  methods: {
    ...mapActions('propertyAdmin', [
      'getUserDefinedGroup',
      'getUserFields',
      'saveUserDefinedGroup',
      'updateUserDefinedGroup',
      'clearUserGroup',
      'clearUserFields',
      'clearUserField',
      'saveUserField',
      'updateUserField',
      'deleteUserField',
    ]),
    SubmitData() {
      this.userDefinedGroup.fields = [];
      let reload = false;
      if (this.$route.params.id > 0) {
        this.updateUserDefinedGroup(this.userDefinedGroup);
        this.userFields.forEach((fieldData) => {
          if (fieldData.id === 0) {
            fieldData.groupId = this.userDefinedGroup.id;
            this.saveUserField(fieldData);
          } else {
            this.updateUserField(fieldData);
          }
        });
      } else {
        reload = true;
        this.userFields.forEach((fieldData) => {
          this.userDefinedGroup.fields.push({
            fieldName: fieldData.fieldName,
            fieldType: fieldData.fieldType,
            rank: fieldData.rank,
          });
        });
        this.saveUserDefinedGroup(this.userDefinedGroup);
      }
      this.$router.push('/userDefinedGroups/list');
      // this.$router.push({
      //   path: '/userDefinedGroups/list',
      //   query: { reload },
      // });
    },
    newItem() {
      this.clearUserField();
      this.item = this.userField;
      this.item.groupId = this.userDefinedGroup.id;
      this.showField = true;
    },
    Edit(item) {
      this.item = item;
      this.showField = true;
    },
    Close() {
      this.$router.push('/userDefinedGroups/list');
    },
    UpdateUserField(item) {
      if (item.id === 0) {
        this.userFields.push(item);
      }
      this.showField = false;
    },
    Delete(item) {
      if (item.id === 0) {
        this.userFields.pop(this.userFields.find(p => p.id === item.id));
      } else {
        this.deleteUserField(item.id);
      }
    },
  },
};
</script>