PVWebClient/src/components/telemarketer/leads.vue

<template>
  <v-container class="fill-height" fluid>
    <v-row>
      <v-container>
        <v-btn color="primary" @click="FindClick">FIND BY TEL</v-btn>
      </v-container>
      <v-container>
        <v-btn color="primary">RELEASE</v-btn>
      </v-container>
      <v-container>
        <v-btn color="primary" @click="ReplenishClick">REPLENISH</v-btn>
      </v-container>
    </v-row>
    <v-row>
      <v-select v-model="select" :items="items" single-line />
    </v-row>
    <v-row>
      <v-text-field clearable />
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-data-table
          v-if="leads.length > 0"
          :headers="headers"
          :items="leads"
          :items-per-page="10"
          class="elevation-1"
          show-select
        ></v-data-table>
        <v-card v-else class="mx-auto" max-width="344">
          <v-card-text>
            <div style="text-align:center">No leads currently allocated</div>
            <br />
            <v-btn color="primary" class="col-md-12" @click="ReplenishClick">REPLENISH</v-btn>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      select: "Pool",
      items: ["Pool", "Own", "Call Back"],
      leads: [],
      headers: [
        { text: "Initals", value: "initals" },
        { text: "Surname", value: "surname" },
        { text: "Import Source", value: "importSource" },
        { text: "Last Called", value: "lastCalled" },
        { text: "Callback Date", value: "callbackDate" }
      ]
    };
  },
  methods: {
    FindClick() {
      this.$router.push("leadFind");
    },
    ReplenishClick() {
      this.$router.push("leadReplenish");
    }
  }
};
</script>