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

<template>
  <!-- eslint-disable max-len -->
  <div>
    <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 Groups List</h2>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="container">
      <button type="button" @click="New()" class="btn btn-b-n" style="width: 85px; height:40px;">New</button>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Description</th>
            <th>Property Type</th>
            <th>Order</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, i) in userDefinedGroups" :key="i">
            <td>{{item.description}}</td>
            <td v-if="item.usageType === 0">Residential</td>
            <td v-else-if="item.usageType === 1">Commercial</td>
            <td v-else>Both</td>
            <td>{{item.rank}}</td>
            <td>
              <button
                type="button"
                @click="Edit(item.id)"
                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>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'UserDefinedGroup',
  mounted() {
    this.getUserDefinedGroups();
  },
  computed: {
    ...mapState('propertyAdmin', ['userDefinedGroups']),
  },
  methods: {
    ...mapActions('propertyAdmin', [
      'getUserDefinedGroups',
      'deleteUserDefinedGroup',
    ]),
    New() {
      this.$router.push('/userDefinedGroups/userDefinedGroup');
    },
    Edit(id) {
      this.$router.push(`/userDefinedGroups/userDefinedGroup/${id}`);
    },
    Delete(item) {
      if (item.id === 0) {
        this.userDefinedGroups.pop(item);
      }
      this.deleteUserDefinedGroup(item.id);
    },
  },
};
</script>