293 lines
8.0 KiB
Vue
293 lines
8.0 KiB
Vue
<template>
|
|
<v-layout class="fill-height" column>
|
|
<!-- Alert dialog -->
|
|
<v-dialog v-model="dialog_delete" persistent max-width="290">
|
|
<v-card>
|
|
<!-- <v-card-title class="headline">Peringatan</v-card-title> -->
|
|
<v-card-text>
|
|
Apakah yakin anda akan membatalkan staff "{{ selected.staffName }}"
|
|
sebagai kurir ?</v-card-text
|
|
>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="green darken-1" flat @click="dialog_delete = false"
|
|
>tidak</v-btn
|
|
>
|
|
<v-btn color="red darken-1" flat @click="delete_kurir">Ya</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<!-- End alert dialog -->
|
|
|
|
<!-- Snackbar -->
|
|
<v-snackbar
|
|
v-model="snackbar"
|
|
:timeout="5000"
|
|
:multi-line="false"
|
|
:vertical="false"
|
|
:top="true"
|
|
color="success"
|
|
:value="snackbar"
|
|
>
|
|
{{ snackbar_msg }}
|
|
<v-btn flat @click="snackbar = false"> Tutup </v-btn>
|
|
</v-snackbar>
|
|
<!-- End Snackbar -->
|
|
|
|
<!-- ERROR DIALOG -->
|
|
<v-dialog v-model="error_dialog" max-width="500px">
|
|
<v-card>
|
|
<v-card-title>
|
|
<span>ERROR !</span>
|
|
<v-spacer></v-spacer>
|
|
</v-card-title>
|
|
<v-divider></v-divider>
|
|
<div class="ma-3 red--text">{{ error_msg }}</div>
|
|
<v-divider></v-divider>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" flat @click="error_dialog = false"
|
|
>Close</v-btn
|
|
>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<!-- END ERROR DIALOG -->
|
|
|
|
<v-card class="mb-2 pa-2 searchbox">
|
|
<v-layout>
|
|
<v-flex xs6>
|
|
<v-text-field
|
|
class="xs3 ma-1 mini-select"
|
|
v-model="name"
|
|
style="font-size: 14px;"
|
|
label="Cari"
|
|
placeholder="Masukkan nama atau username"
|
|
outline
|
|
hide-details
|
|
></v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
<v-card>
|
|
<v-layout align-center row>
|
|
<v-flex
|
|
xs12
|
|
pl-2
|
|
style="max-height: 600px; overflow: auto;"
|
|
pr-2
|
|
pt-2
|
|
pb-2
|
|
>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="couriers"
|
|
:loading="isLoading"
|
|
hide-actions
|
|
class="elevation-1"
|
|
>
|
|
<template v-slot:items="props">
|
|
<td class="text-xs-left pa-2">{{ props.item.staffName }}</td>
|
|
<td class="text-xs-left pa-2">{{ props.item.username }}</td>
|
|
<td class="text-xs-center pa-2 d-flex justify-content-center">
|
|
<v-flex justify-center>
|
|
<v-checkbox
|
|
v-model="isCourier"
|
|
:disabled="isLoading"
|
|
@click="changeCourir(props.item.userID, props.item.staffID, props.item.courierID ?? 'new', props.item)"
|
|
:value="props.item.userID ?? 'new'"
|
|
></v-checkbox>
|
|
</v-flex>
|
|
</td>
|
|
</template>
|
|
</v-data-table>
|
|
<v-divider></v-divider>
|
|
<v-layout>
|
|
<v-flex>
|
|
<v-pagination
|
|
style="margin-top: 10px; margin-bottom: 10px;"
|
|
v-model="curr_page"
|
|
:length="total_page"
|
|
>
|
|
</v-pagination>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.searchbox .v-input.v-text-field .v-input__slot {
|
|
min-height: 60px;
|
|
}
|
|
|
|
.searchbox .v-btn {
|
|
min-height: 60px;
|
|
}
|
|
|
|
table.v-table tbody td,
|
|
table.v-table tbody th {
|
|
height: 40px;
|
|
}
|
|
|
|
table.v-table thead tr {
|
|
height: 40px;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
//dropdown courier
|
|
dialog_delete: false,
|
|
selected: {},
|
|
headers: [
|
|
{
|
|
text: "NAMA",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "mr",
|
|
width: "50%",
|
|
class: "text-xs-left pa-2 blue-grey white--text",
|
|
},
|
|
{
|
|
text: "USERNAME",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "mr",
|
|
width: "45%",
|
|
class: "text-xs-left pa-2 blue-grey white--text",
|
|
},
|
|
{
|
|
text: "AKSI",
|
|
align: "center",
|
|
sortable: false,
|
|
value: "lab",
|
|
width: "5%",
|
|
class: "text-xs-center pa-2 blue-grey white--text",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch("courier/search");
|
|
},
|
|
computed: {
|
|
name: {
|
|
get() {
|
|
return this.$store.state.courier.name;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("courier/update_name", val);
|
|
},
|
|
},
|
|
curr_page: {
|
|
get() {
|
|
return this.$store.state.courier.curr_page;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("courier/update_curr_page", val);
|
|
this.$store.dispatch("courier/search");
|
|
},
|
|
},
|
|
isCourier: {
|
|
get() {
|
|
return this.$store.state.courier.is_courier;
|
|
},
|
|
// set(val) {
|
|
// console.log("valllll :" + val)
|
|
// // this.$store.commit("courier/update_is_courier", val)
|
|
|
|
// }
|
|
},
|
|
couriers() {
|
|
return this.$store.state.courier.couriers;
|
|
},
|
|
isLoading() {
|
|
return this.$store.state.courier.loading;
|
|
},
|
|
total_page: {
|
|
get() {
|
|
return this.$store.state.courier.total;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("courier/update_total", val);
|
|
},
|
|
},
|
|
snackbar: {
|
|
get() {
|
|
return this.$store.state.courier.snackbar;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("courier/update_snackbar", val);
|
|
},
|
|
},
|
|
error_dialog: {
|
|
get() {
|
|
return this.$store.state.courier.error_dialog;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("courier/update_error_dialog", val);
|
|
},
|
|
},
|
|
snackbar_msg() {
|
|
return this.$store.state.courier.snackbar_msg;
|
|
},
|
|
error_msg() {
|
|
return this.$store.state.courier.error_message;
|
|
},
|
|
},
|
|
methods: {
|
|
changeCourir(userID, staffID, type, data) {
|
|
this.selected = data;
|
|
console.log("change courier" + userID + " " + staffID);
|
|
var tempCourrier = JSON.stringify(this.isCourier);
|
|
var arrCourier = JSON.parse(tempCourrier);
|
|
console.log(type);
|
|
if (type !== "new") {
|
|
this.dialog_delete = true;
|
|
// console.log("hapus kurir");
|
|
// this.$store.dispatch("courier/deleteData", {
|
|
// "courierID": type
|
|
// });
|
|
// arrCourier.filter((e) => e === type);
|
|
} else {
|
|
var validation = arrCourier.includes(userID);
|
|
if (!validation) {
|
|
this.$store.dispatch("courier/add", {
|
|
staffID: staffID,
|
|
userID: userID,
|
|
});
|
|
console.log("add kurir");
|
|
arrCourier.push(userID);
|
|
}
|
|
}
|
|
console.log(arrCourier);
|
|
this.$store.commit("courier/update_is_courier", arrCourier);
|
|
this.$store.dispatch("courier/search");
|
|
},
|
|
delete_kurir() {
|
|
console.log("hapus kurir");
|
|
this.$store.dispatch("courier/deleteData", {
|
|
courierID: this.selected.courierID,
|
|
});
|
|
this.dialog_delete = false;
|
|
},
|
|
|
|
thr_search: _.debounce(function () {
|
|
this.$store.dispatch("courier/search");
|
|
}, 1000),
|
|
},
|
|
|
|
watch: {
|
|
name(val, old) {
|
|
this.name = val;
|
|
this.thr_search();
|
|
},
|
|
},
|
|
};
|
|
</script>
|