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"
        :showCustomAction="true"
        :CustomActionHeading="'Publish'"
        :displayColumns="columns"
        :displayFormats="formats"
        :displayHeaders="headers"
        @onEdit="Edit"
        @onDelete="Delete"
        @onCustomClick="Publish"
      />
    </div>
    <br />
  </div>
</template>

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

export default {
  name: 'PropertyList',
  components: {
    listView,
  },
  data() {
    return {
      propertyType: '',
      role: 'MY',
      user: Log.getUser(),
      columns: [
        'name',
        'id',
        'dateAvailable',
        'size',
        'price',
        'usageType',
        'type',
        'saleType',
        'publish',
        'status',
      ],
      formats: ['text', 'text', 'date', 'text', 'money', 'text', 'text', 'text', 'text', 'text'],
      headers: ['', '', 'Available From', '', '', '', 'Property Type', '', '', ''],
    };
  },
  methods: {
    ...mapActions('propertyList', ['getProperties', 'deleteProperty', 'publishProperty']),
    Edit(item) {
      const salesType = item.isSale ? 'Sale' : 'Rental';
      this.$router.push({
        path: '/property/edit',
        query: { id: item.id },
      });
    },
    Delete(item) {
      this.deleteProperty(item.id);
    },
    Publish(item) {
      this.publishProperty(item);
    },
  },
  mounted() {
    this.getProperties(Object.assign(this.user.id));
  },
  computed: {
    ...mapState('propertyList', ['properties']),
    UserChanged() {
      this.getProperties(Object.assign(this.user.id));
      return this.user;
    },
  },
  watch: {
    UserChanged() {
      console.log(this.user);
    },
  },
};
</script>