UnivateProperties/src/components/admin/logs/SearchLogs.vue

<template>
  <!-- eslint-disable max-len -->
  <main id="main" style="margin-top:-20px; padding-bottom:50px">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-lg-8">
          <div class="section-header">
            <h2>Search Logs</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="form-group row">
        <div class="col-md-1">
          <label>Filter</label>
        </div>
        <div class="col-md-3">
          <select class="form-control" name="fields" id="fields" v-model="filter.by">
            <option v-for="(item, i) in fields" :key="i">{{ item }}</option>
          </select>
        </div>
        <div class="col-md-8 text-left">
          <div class="input-group mb-8">
            <input class="form-control" type="text" @change="filter()" v-model="filter.value" />
            <div class="input-group-append" @click="clearFilter()">
              <span class="input-group-text cursor-pointer" style="color: #60CBEB">
                <b>X</b>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <listView
        :items="list"
        :showNew="false"
        :editable="false"
        :deleteable="false"
        :showColumnChooser="false"
        :hideSearch="true"
        :sortKey="'date'"
      />
    </div>
    <div class="container">
      <div class="form-group row">
        <div class="col-md-12" align="right">
          <JsonExcel
            class="btn btn-b-n"
            :data="list"
            :fields="exportFields"
            type="xls"
            worksheet="Log"
            name="SearchLog.xls"
          >
            Download
            <eva-icon name="download"></eva-icon>
          </JsonExcel>
        </div>
      </div>
    </div>
    <br />
  </main>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import JsonExcel from "vue-json-excel";
import listView from "../../shared/listView.vue";

export default {
  name: "searchLog",
  components: {
    listView,
    JsonExcel
  },
  data() {
    return {
      exportFields: {
        Date: "date",
        Time: "time",
        User: "userName",
        Type: "type",
        Field: "property",
        Value: "value"
      }
    };
  },
  methods: {
    ...mapActions("searchLog", ["getPropertySearchLogs", "clearFilter"])
  },
  mounted() {
    this.getPropertySearchLogs();
  },
  computed: {
    ...mapState("searchLog", ["list", "fields", "filter"]),
    ...mapGetters({
      list: "searchLog/filterList"
    })
  }
};
</script>