Initial import
This commit is contained in:
sas.fajri
@@ -0,0 +1,292 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user