FE_CPONE/test/vuex/one-queue-fo/components/oneQueueFo.vue

<template>
    <v-layout column fill-height>
<one-dialog-info :status="xinfo" :msg="xmsginfo"  @close-dialog-info="closeInfo()"></one-dialog-info>

            <v-toolbar  class="pa-1 mb-2" color="blue lighten-3" dark height="60px">
              <v-toolbar-title>DAFTAR ANTRIAN</v-toolbar-title>
              <v-spacer></v-spacer>
               <v-select
                                    
                                    item-text="serviceName"
                                    return-object
                                    :items="xservices" 
                                    v-model="xservice"
                                    label="Layanan"
                                ></v-select>
            </v-toolbar>


            <v-card class="pa-1 p-left-side grow" grow>
                <v-card-text class="pa-0 mb-5">
                    <v-layout   row wrap>

                        <v-flex >
                        <v-data-table :headers="headers" :items="xqueues"   :loading="isLoading" hide-actions class="elevation-1">
                           <template slot="items" slot-scope="props">
                              <td  :class="redClass(props.item)" style="text-align:left" v-bind:class="{'amber lighten-4':props.item.selected}">{{ getTime(props.item.queueCreated) }}</td>
                               <td :class="redClass(props.item)"  v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.serviceName }}</td>
                                <td :class="redClass(props.item)"  v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.queueNumber }}</td>
                                  <td :class="redClass(props.item)"  v-bind:class="{'amber lighten-4':props.item.selected}">{{ props.item.statusName }}</td>
                                <td :class="redClass(props.item)" class="justify-center layout px-0">
                                <v-btn v-if="props.item.statusName !== 'Queue Called' && props.item.statusName !== 'Queue Recall'"  title="Panggil" @click="doCall(props.item.queueNumber)" flat icon color="warning">
                                <v-icon>mic</v-icon>
                                </v-btn>
                                <v-btn v-if="props.item.statusName === 'Queue Called' || props.item.statusName === 'Queue Recall'" title="Panggil Ulang" @click="doRecall(props.item.queueNumber)" flat icon color="brown">
                                <v-icon>mic</v-icon>
                                </v-btn>
                                <v-btn  title="Proses" @click="doServe(props.item.queueNumber)" flat icon color="info">
                                <v-icon>account_box</v-icon>
                                </v-btn>
                                <v-btn  title="Skip" @click="doSkip(props.item.queueNumber)" flat icon color="red">
                                <v-icon>skip_next</v-icon>
                                </v-btn>
                                <v-btn title="Selesai" @click="doDone(props.item.queueNumber)" flat icon color="success">
                                <v-icon>done</v-icon>
                                </v-btn>
                             </template>
                        </v-data-table>
                        </v-flex>

                    </v-layout>
                </v-card-text>



            </v-card>
    </v-layout>

</template>

<style scoped>
table.v-table tbody td,table.v-table tbody th {
   height: 40px;
}

table.v-table thead tr {
   height: 40px;
}
.v-input__slot{
margin-bottom:0;
}
td.isRed {
   color: #e63900;
}
</style>

<script>
module.exports = {
   components : {
      'one-dialog-info':httpVueLoader('../../common/oneDialogInfo.vue'),
      'one-dialog-alert':httpVueLoader('../../common/oneDialogAlert.vue')
   },
   mounted() {
      this.$store.dispatch("queue/loadx",{serviceid:0})
      this.$store.dispatch("queue/loadservice")
   },
   methods : {
      redClass(que) {
         let cls = { 'isRed' : false  }
         if ( que.queueIsRed == 'Y' ) {
            cls = { 'isRed' : true}
         }
         return cls
      },
      getTime(val){
         //return moment(val).fromNow() 
         return moment(val).format("HH:mm")
      },
      doCall(numbx){
         this.$store.dispatch("queue/docall",{number:numbx})
      },
      doRecall(numbx){
         this.$store.dispatch("queue/dorecall",{number:numbx})
      },
      doServe(numbx){
         this.$store.dispatch("queue/doserve",{number:numbx})
      },
      doDone(numbx){
         this.$store.dispatch("queue/dodone",{number:numbx})
      },
      doSkip(numbx){
         this.$store.dispatch("queue/doskip",{number:numbx})
      },
      closeInfo(){
          this.$store.commit("queue/update_info",false)
      }
   },
   computed: {
      xqueues(){
         return this.$store.state.queue.queues
      },
      isLoading() {
         return this.$store.state.queue.load_queue == 1
      },
      xinfo(){
         return this.$store.state.queue.info
      },
      xmsginfo(){
         return this.$store.state.queue.msg_info
      },
      xservices(){
         return this.$store.state.queue.services
      },
      xservice : {
         get() {
               return this.$store.state.queue.selected_service
         },
         set(val) {
               this.$store.commit("queue/update_selected_service",val)
               this.$store.dispatch("queue/loadx",{serviceid:val.serviceID})
         }
      }
   },
   data() {
      return {
         headers: [
            {
               text: "Jam",
               align: "left",
               sortable: false,
               value: "mr",
               width: "15%",
               class: " blue lighten-4"
            },
            {
               text: "Layanan",
               align: "left",
               sortable: false,
               value: "lab",
               width: "25%",
               class: "blue lighten-4"
            },
            {
               text: "No Antrian",
               align: "left",
               sortable: false,
               value: "name",
               width: "5%",
               class: "blue lighten-4"
            },
            {
               text: "Status",
               align: "left",
               sortable: false,
               value: "name",
               width: "10%",
               class: "blue lighten-4"
            },
            {
               text: "Action",
               align: "Center",
               sortable: false,
               value: "name",
               width: "5%",
               class: "blue lighten-4"
            }
         ]
      };
   }
}
</script>