UnivateProperties/src/components/property/propertyList.vue

<template>
  <!-- eslint-disable max-len -->
  <div>
    <div class="container">
      <div class="container">
        <br />
        <br />
        <div class="row">
          <div class="col-md-12 col-lg-8">
            <div class="title-box-d">
              <h1 class="title-d" style="text-align:left; font-size: 250%">Properties</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <listView
        :items="properties"
        :showNew="false"
        :editable="true"
        :deleteable="true"
        @onEdit="Edit"
        @onDelete="Delete"
      />
    </div>
    <br />
  </div>
</template>

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

export default {
  name: 'PropertyList',
  components: {
    listView,
  },
  data() {
    return {
      propertyType: '',
      role: 'MY',
    };
  },
  methods: {
    ...mapActions('propertyList', ['getProperties', 'deleteProperty']),
    Edit(item) {
      const salesType = item.isSale ? 'Sale' : 'Rental';
      this.$router.push({
        path: '/property/edit',
        query: { id: item.id },
      });
    },
    Delete(item) {
      this.deleteProperty(item.id);
    },
  },
  mounted() {
    if (this.user.role === 'Super Admin') {
      this.role = 'SUPERADMIN';
    }
    if (this.user.role === 'Agency') {
      this.user.role = 'ADMIN';
    }

    this.getProperties(
      Object.assign({
        propertyType: this.role,
        user: this.user.id,
      }),
    );
  },
  computed: {
    ...mapState('propertyList', ['properties']),
    ...mapState('authentication', ['user']),
    UserChanged() {
      if (this.user.role === 'Super Admin') {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.role = 'SUPERADMIN';
      }
      if (this.user.role === 'Agency') {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.user.role = 'ADMIN';
      }

      this.getProperties(
        Object.assign({
          propertyType: this.role,
          user: this.user.id,
        }),
      );
      return this.user;
    },
  },
  watch: {
    UserChanged() {
      console.log(this.user);
    },
  },
};
</script>