Flatten nested repos

This commit is contained in:
sas.fajri
2026-04-27 10:13:31 +07:00
parent 01c2963a43
commit 8347aef8f4
17935 changed files with 5015229 additions and 3 deletions

View File

@@ -0,0 +1,233 @@
<template>
<v-layout>
<v-flex xs12>
<v-card class="mb-2" color="white">
<v-toolbar color="grey lighten-2" dark height="50px">
<v-toolbar-title class="black--text">Satuan : {{xunit.name}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="openFormUnitLang(0)" icon>
<v-icon class="black--text">library_add</v-icon>
</v-btn>
</v-toolbar>
<v-layout row wrap>
<v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
<table>
<tr>
<th width="25%" class="text-md-center pt-2 pb-2">BAHASA</th>
<th width="25%" class="text-md-center pt-2 pb-2">SATUAN</th>
<th width="35%" class="text-md-center pt-2 pb-2">KONVERSI</th>
<th width="15%" class="text-md-center pt-2 pb-2">SEBAGAI SI</th>
</tr>
<tr v-if="unitlangs.length > 0 " v-for="(unitlang,idx) in unitlangs">
<td class="text-md-left pl-3">{{unitlang.langname}}</td>
<td class="text-md-left pl-3">{{unitlang.name}}</td>
<td class="text-md-center">{{unitlang.konversi}}</td>
<td class="text-md-center">{{unitlang.issi}}</td>
</tr>
<tr v-if="unitlangs.length === 0">
<td align="center" style="height:50px;text-align:center" colspan="8">Belum ada data</td>
</tr>
</table>
</v-flex>
</v-layout>
<template>
<v-dialog v-model="dialogdeletealertunitlang" max-width="30%">
<v-card>
<v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
Peringatan !
</v-card-title>
<v-card-text class="pt-2 pb-2">
<v-layout row>
<v-flex xs12 d-flex>
<v-layout row>
<v-flex pb-1 xs12>
<v-layout row>
<v-flex pt-2 pr-2 xs12>
{{msgalertunitlang}}
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat @click="dialogdeletealertunitlang = false">
Tutup
</v-btn>
<v-btn flat @click="closeDeleteAlertUnitLang()">
Yakin lah
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
</v-card>
</v-flex>
</v-layout>
</template>
<style scoped>
.searchbox .v-input.v-text-field .v-input__slot {
min-height: 60px;
}
.searchbox .v-btn {
min-height: 60px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background: white;
border: 0px;
}
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
}
table>tr>td {
padding: 8px;
}
table>tr>td:first {
padding-left: 15px !important;
}
</style>
<script>
module.exports = {
components: {
'one-date-picker': httpVueLoader('../../common/oneDatePicker.vue')
},
data() {
return {
query: "",
items: [],
headers: [{
text: "BAHASA",
align: "Center",
sortable: false,
value: "lab",
width: "30%",
class: "blue lighten-4"
},
{
text: "NAMA",
align: "Center",
sortable: false,
value: "lab",
width: "30%",
class: "blue lighten-4"
},
{
text: "KONVERSI",
align: "Center",
sortable: false,
value: "name",
width: "30%",
class: "blue lighten-4"
},
{
text: "SEBAGAI SI",
align: "Center",
sortable: false,
value: "name",
width: "30%",
class: "blue lighten-4"
}
],
isLoading: false,
color: "success",
validunitlang: false,
xid: 0,
name: "",
konversi: "",
issi: "",
dialogdeletealertunitlang: false,
msgalertunitlang: ""
};
},
computed: {
unitlangs() {
return this.$store.state.unitlang.unitlangs
},
xunit() {
return this.$store.state.unit.selected_unit
},
dialogunitlang() {
return this.$store.state.unitlang.dialog_form_unitlang
},
xerrors() {
return this.$store.state.unitlang.errors
}
},
methods: {
updateDialogFormUnitLang() {
this.$store.commit("unitlang/update_dialog_form_unitlang", false)
},
openFormUnitLang(val) {
this.xid = val
this.name = ''
this.konversi = ''
this.issi = ''
this.$store.commit("unitlang/update_dialog_form_unitlang", true)
},
editFormUnitLang(val) {
// this.$store.commit("unitlang/update_error_name", false)
this.xid = val.id
this.name = val.name
this.konversi = val.konversi
this.issi = val.issi === 'N' ? false : true
this.$store.commit("unitlang/update_dialog_form_unitlang", true)
this.$store.commit("unitlang/update_startdate", val.M_UnitLangStartDate)
this.$store.commit("unitlang/update_enddate", val.M_UnitLangEndDate)
},
saveFormUnitLang() {
this.$store.dispatch("unitlang/save", {
xid: this.xid,
unitid: this.$store.state.unit.selected_unit.id,
unitname: this.$store.state.unit.selected_unit.name,
name: this.name,
konversi: this.konversi,
issi: this.issi === true ? "Y" : "N",
})
},
updateAlert_success(val) {
this.$store.commit("unit/update_alert_success", val)
},
deleteUnitLang(data) {
this.xid = data.id
this.msgalertunitlang = "Yakin, mau hapus unitlang ?"
this.dialogdeletealertunitlang = true
},
closeDeleteAlertUnitLang() {
this.$store.dispatch("unitlang/delete", {
xid: this.xid,
unitid: this.$store.state.unit.selected_unit.id,
unitname: this.$store.state.unit.selected_unit.name,
name: this.name
})
this.dialogdeletealertunitlang = false
}
}
}
</script>

View File

@@ -0,0 +1,712 @@
<template>
<v-layout>
<template>
<v-dialog v-model="dialogdeletealert" max-width="30%">
<v-card>
<v-card-title class="headline blue lighten-3 white--text pt-2 pb-2" primary-title>
Peringatan !
</v-card-title>
<v-card-text class="pt-2 pb-2">
<v-layout row>
<v-flex xs12 d-flex>
<v-layout row>
<v-flex pb-1 xs12>
<v-layout row>
<v-flex pt-2 pr-2 xs12>
{{msgalert}}
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat @click="dialogdeletealert = false">
Tutup
</v-btn>
<v-btn flat @click="closeDeleteAlert()">
Yakin lah
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<v-flex xs12>
<v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
<v-toolbar color="blue lighten-3 white--text" dark height="50px">
<v-toolbar-title class="black--text">SATUAN</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="openFormSatuan()" icon>
<v-icon class="black--text">library_add</v-icon>
</v-btn>
</v-toolbar>
<v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
{{msgsnackbar}}
<v-btn flat @click="updateAlert_success(false)">
Tutup
</v-btn>
</v-snackbar>
<v-layout row style="background:#EEEEEE;padding-top:5px;" justify-left>
<v-list-tile>
<input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..." />
</v-list-tile-content>
</v-list-tile>
</v-layout>
<v-divider></v-divider>
<div>
<v-layout>
<v-flex xs12>
<v-card class="mb-2" color="white">
<v-layout row wrap>
<v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>
<div class="rTable">
<div class="rTableHeading">
<div style="width:25%" class="rTableHead">KODE</div>
<div style="width:50%" class="rTableHead">SATUAN</div>
<div class="rTableHead">AKSI</div>
</div>
</div>
<div v-for="(vo,idx) in vunits" :key="vo.Nat_UnitID">
<div class="rTable">
<div class="rTableGroup">
<div class="rTableRow">
<div style="width:25%" class="rTableCell rfirstCell">{{vo.code}}</div>
<div style="width:50%" class="rTableCell rfirstCell">{{vo.description}}</div>
<div class="rTableCell">
<v-icon style="color:#757575" @click="editSatuan(vo)">edit</v-icon>
<v-icon style="color:#757575" @click="deleteSatuan(vo)">clear</v-icon>
<v-icon v-if="vo.show_detail === 'N'" style="color:#757575" class="text-sm-right" @click="showDetail(idx)">more_vert</v-icon>
<v-icon v-if="vo.show_detail === 'Y'" style="color:#757575" class="text-sm-right" @click="hideDetail(idx)">more_vert</v-icon>
<v-icon v-if="vo.show_detail === 'Y'" style="color:#757575" @click="simpanBahasaSatuan(idx)">save</v-icon>
</div>
</div>
</div>
<transition name="fade">
<div v-if="vo.show_detail === 'Y'" style="width:100%;border:1px solid black" class="caption">
<v-layout row>
<table>
<tr>
<th class="text-md-center pt-2 pb-2 dark blue lighten-3 white--text">BAHASA</th>
<th class="text-md-center pt-2 pb-2 dark blue lighten-3 white--text">SATUAN</th>
<th class="text-md-center pt-2 pb-2 dark blue lighten-3 white--text">NAMA SI</th>
<th class="text-md-center pt-2 pb-2 dark blue lighten-3 white--text">KONVERSI</th>
</tr>
<tr v-for="(vt,tidx) in vo.unitlangs" :key="vt.Nat_LangID">
<td class="text-md-left">{{vt.langname}}</td>
<td class="text-xs-center pa-2">
<v-text-field style="margin-top:0;padidng-top:0" v-model="vt.name" hide-details></v-text-field>
</td>
<td class="text-xs-center pa-2">
<v-text-field style="margin-center:0;padidng-center:0" v-model="vt.siname" hide-details></v-text-field>
</td>
<td class="text-xs-center pa-2">
<v-text-field style="margin-center:0;padidng-center:0" v-model="vt.konversi" hide-details></v-text-field>
</td>
</tr>
</table>
</v-layout>
</div>
</transition>
</div>
</div>
</v-flex>
</v-layout>
</v-card>
</v-flex>
</v-layout>
</div>
<v-layout row>
<v-flex class="text-xs-center" pt-3 xs12>
<v-pagination style="margin-top:10px;margin-bottom:10px" v-model="curr_page" :length="xtotal_page"></v-pagination>
</v-flex>
</v-layout>
<template>
<v-layout row justify-center>
<v-dialog v-model="dialogunit" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="headline">Form Satuan</span>
</v-card-title>
<v-card-text class="pt-0 pb-0">
<v-form ref="formunit" v-model="valid" lazy-validation>
<v-layout wrap>
<v-flex xs12>
<v-text-field v-model="unitcode" label="Kode Satuan" :rules="codeRules" required></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field v-model="unitname" label="Nama Satuan" :rules="nameRules" required
:error="error_dup" :error-messages="error_dup_message"
></v-text-field>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click="updateDialogFormSatuan()">Tutup</v-btn>
<v-btn v-if="xact === 'new'" color="blue darken-1" flat @click="saveFormSatuan()">Simpan</v-btn>
<v-btn v-if="xact === 'edit'" color="blue darken-1" flat @click="updateFormSatuan()">Simpan Perubahan</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</v-layout>
</template>
</v-card>
</v-flex>
</v-layout>
</template>
<style scoped>
.textinput {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
width: 100%;
padding: 8px 10px;
margin-bottom: 5px;
box-sizing: border-box;
border: 1px solid #607d8b;
}
.textinput:focus {
width: 100%;
}
.textinput:focus::-webkit-input-placeholder {
color: transparent;
}
.textinput:focus::-moz-placeholder {
color: transparent;
}
.textinput:-moz-placeholder {
color: transparent;
}
.boxoutline {
color: red;
border: 1px solid red;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
border-radius: 1px
}
.boxoutline:hover {
background: rgba(0, 0, 0, 0.07) !important;
font-size: 15px;
font-weight: 700;
}
.boxsolid {
color: #ffffff;
border: 1px solid #ffffff;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #f44336;
font-size: 14px;
font-weight: 500;
border-radius: 1px
}
.boxsolid:hover {
background: #f44336de;
font-size: 15px;
font-weight: 700;
}
.scroll-container {
scroll-padding: 50px 0 0 50px;
}
::-webkit-scrollbar {
width: 7px;
}
/* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color: #73baf3;
}
/* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #2196f3;
}
/* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: #0079da;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
25% {
transform: scale(.50);
}
50% {
transform: scale(.75);
}
75% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.rTable {
display: table;
width: 100%;
border-spacing: 0 .2em;
}
.rTableGroup {
display: table-row-group;
}
.rTableRow {
display: table-row;
font-size: 14px;
-webkit-flex-wrap: wrap;
/* Safari 6.1+ */
flex-wrap: wrap;
}
.rTableHeading {
display: table-header-group;
background-color: #fffff;
}
.rTableCell {
display: table-cell;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
line-height: 2;
border: 1px solid #757575;
background-color: #fffff;
border-spacing: 5px;
}
.rTableHead {
display: table-cell;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 0px;
background-color: #fffff;
}
.rTableHeading {
display: table-header-group;
text-transform: uppercase;
font-weight: 500;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
}
.rTableBody {
display: table-row-group;
}
.rfirstCell {
border-left: 10px solid #757575;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.caption {
border: 1px solid blue;
caption-side: bottom;
display: table-caption;
text-align: center;
padding: 5px
}
.mini-input .v-input {
margin-top: 0px;
}
.mini-input .v-input,
.mini-input .v-input--selection-controls,
.mini-input .v-input__slot {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
.mini-input .v-messages {
min-height: 0px;
}
.text-fajrihm {
padding: 3px 20px 3px 0;
text-align: left;
font-size: 13px;
font-family: open sans, tahoma, sans-serif;
}
.label-delivery {
font-size: 11px;
padding: 3px 10px 3px 0;
font-family: open sans, tahoma, sans-serif;
}
.text-delivery {
font-size: 12px;
padding: 3px 10px 3px 0;
font-family: open sans, tahoma, sans-serif;
}
.nota {
font-size: 2em;
font-weight: bold;
text-align: left;
}
.total {
min-height: 76px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background: white;
border: 0px;
}
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding-top: 2px;
padding-bottom: 2px;
}
table>tr>td {
padding: 8px;
}
table>tr>td:first {
padding-left: 15px !important;
}
.mini-input .v-input {
margin-top: 0px;
}
.mini-input .v-input,
.mini-input .v-input--selection-controls,
.mini-input .v-input__slot {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 3px;
}
.mini-input .v-messages {
min-height: 0px;
}
.border-bottom-dashed {
border-bottom: 1px dashed rgba(0, 0, 0, .12);
}
.v-breadcrumbs__item {
color: #fff !important;
}
</style>
<script>
module.exports = {
data: () => ({
color: "success",
valid: false,
unitname: '',
nameRules: [
v => !!v || 'Nama Satuan harus diisi'
],
unitcode: '',
codeRules: [
v => !!v || 'Kode Satuan harus diisi'
],
dialogdeletealert: false,
msgalert: "",
xid: 0
}),
mounted() {
this.$store.dispatch("unit/lookup", {
search: this.xsearch,
current_page: this.curr_page
})
},
computed: {
error_dup() {
return this.$store.state.unit.save_error_message != ""
},
error_dup_message() {
return this.$store.state.unit.save_error_message
},
xact() {
return this.$store.state.unit.act
},
xerrors() {
return this.$store.state.unit.errors
},
xshowall() {
return this.$store.state.unit.show_all
},
vunits() {
return this.$store.state.unit.units
},
vshowunits() {
return this.$store.state.unit.showunits
},
xunitlangs() {
return this.$store.state.unit.unitlangs
},
xtotalunits() {
return this.$store.state.unit.total_units
},
xtotalfilterunits() {
return this.$store.state.unit.total_filter_units
},
dialogunit() {
return this.$store.state.unit.dialog_form_unit
},
snackbar: {
get() {
return this.$store.state.unit.alert_success
},
set(val) {
this.$store.commit("unit/update_alert_success", val)
}
},
msgsnackbar() {
return this.$store.state.unit.msg_success
},
lookupstatus() {
return this.$store.state.unit.lookup_unit
},
isLoading() {
return this.$store.state.unit.search_status == 1
},
xsearch: {
get() {
return this.$store.state.unit.x_search
},
set(val) {
this.$store.commit("unit/update_x_search", val)
}
},
curr_page: {
get() {
return this.$store.state.unit.current_page
},
set(val) {
this.$store.commit("unit/update_current_page", val)
this.$store.dispatch("unit/lookup", {
search: this.xsearch,
current_page: val
})
}
},
xtotal_page: {
get() {
return this.$store.state.unit.total_units
},
set(val) {
this.$store.commit("unit/update_total_units", val)
}
}
},
methods: {
updateShowAll(val) {
this.$store.commit("unit/update_show_all", val)
this.$store.dispatch("unit/lookup", {
search: this.xsearch,
current_page: 1
})
},
isSelected(p) {
return p.id == this.$store.state.unit.selected_unit.id
},
subname(name) {
var xname = name
if (xname.length > 18) {
xname = xname.substring(0, 18) + '...'
}
return xname
},
selectMe(sc) {
this.$store.commit("unit/update_selected_unit", sc)
this.$store.dispatch("unitlang/lookup", {
id: this.$store.state.unit.selected_unit.id
})
},
updateDialogFormSatuan() {
this.$store.commit("unit/update_dialog_form_unit", false)
},
openFormSatuan() {
this.$refs.formunit.reset()
this.$refs.formunit.resetValidation()
this.$store.commit("unit/update_act", 'new')
this.$store.commit("unit/update_dialog_form_unit", true)
this.$store.commit("unit/update_save_error_message","")
},
saveFormSatuan() {
if (this.$refs.formunit.validate()) {
this.$store.dispatch("unit/save", {
code: this.unitcode,
name: this.unitname,
search: this.xsearch
})
}
},
updateFormSatuan() {
if (this.$refs.formunit.validate()) {
this.$store.dispatch("unit/update", {
id: this.xid,
code: this.unitcode,
name: this.unitname,
search: this.xsearch
})
}
},
updateAlert_success(val) {
this.$store.commit("unit/update_alert_success", val)
},
editSatuan(data) {
this.xid = data.id
this.unitcode = data.code
this.unitname = data.name
this.$store.commit("unit/update_act", 'edit')
this.$store.commit("unit/update_dialog_form_unit", true)
this.$store.commit("unit/update_save_error_message","")
},
deleteSatuan(data) {
this.xid = data.id
var xdata = {
id: data.id,
name: data.name,
search: this.xsearch
}
this.$store.commit("unit/update_selected_unit", xdata)
this.msgalert = "Yakin, mau hapus unit " + data.name + " ?"
this.dialogdeletealert = true
},
showDetail(idx) {
var arrOrders = this.$store.state.unit.units
this.$store.dispatch("unitlang/lookupunitlang", {
id: arrOrders[idx].id,
search: this.xsearch,
current_page: this.curr_page
})
arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
this.$store.commit("unit/update_units", arrOrders)
this.$store.commit("unit/update_unitlangs", arrOrders)
},
hideDetail(idx) {
var arrOrders = this.$store.state.unit.units
this.$store.dispatch("unitlang/lookupunitlanghide", {
id: arrOrders[idx].id,
search: this.xsearch,
current_page: this.curr_page
})
arrOrders[idx].show_detail = arrOrders[idx].show_detail === 'Y' ? 'N' : 'Y'
this.$store.commit("unit/update_units", arrOrders)
},
simpanBahasaSatuan(idx) {
var arrOrders = this.$store.state.unit.units
var prm = {}
prm.unitid = arrOrders[idx].id
prm.unitcode = arrOrders[idx].code
prm.unitname = arrOrders[idx].name
prm.unitlangs = arrOrders[idx].unitlangs
prm.search = this.xsearch
this.$store.dispatch("unit/saveunitlang", prm)
},
closeDeleteAlert() {
this.$store.dispatch("unit/delete", {
unitid: this.$store.state.unit.selected_unit.id,
unitcode: this.$store.state.unit.selected_unit.code,
unitname: this.$store.state.unit.selected_unit.name
})
this.dialogdeletealert = false
},
thr_search: _.debounce(function () {
this.$store.dispatch("unit/lookup", {
search: this.xsearch,
current_page: this.curr_page
})
}, 1000)
},
watch: {
xsearch(val, old) {
if (val !== old && this.lookupstatus !== 1) {
console.log(val)
this.xsearch = val
this.thr_search()
}
}
}
}
</script>

View File

@@ -0,0 +1,409 @@
<template>
<v-layout>
<template>
<v-dialog v-model="dialogdeletealert" max-width="30%">
<v-card>
<v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
Peringatan !
</v-card-title>
<v-card-text class="pt-2 pb-2">
<v-layout row>
<v-flex xs12 d-flex>
<v-layout row>
<v-flex pb-1 xs12>
<v-layout row>
<v-flex pt-2 pr-2 xs12>
{{msgalert}}
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat @click="dialogdeletealert = false">
Tutup
</v-btn>
<v-btn flat @click="closeDeleteAlert()">
Yakin lah
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<v-flex xs12>
<v-card class="scroll-container" style="/*max-height:645px;overflow: auto;*/">
<v-toolbar color="grey lighten-2" dark height="50px">
<v-toolbar-title class="black--text">SATUAN</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn @click="openFormSatuan()" icon>
<v-icon class="black--text">library_add</v-icon>
</v-btn>
</v-toolbar>
<v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
{{msgsnackbar}}
<v-btn flat @click="updateAlert_success(false)">
Tutup
</v-btn>
</v-snackbar>
<v-layout row style="background:#EEEEEE;padding-top:5px;" justify-left>
<v-list-tile>
<input type="text" v-model="xsearch" class="textinput" placeholder="Cari ..." />
</v-list-tile-content>
</v-list-tile>
</v-layout>
<v-divider></v-divider>
<div v-for="(vs,index) in vunits">
<v-layout pa-2 v-if="isSelected(vs)" row>
<v-flex xs12 @click="selectMe(vs)">
<v-layout row>
<v-flex class="boxsolid" xs10>
<v-tooltip right>
<template v-slot:activator="{ on }">
<span v-html="vs.description" v-on="on"></span>
</template>
<span>{{vs.name}}</span>
</v-tooltip>
</v-flex>
<v-flex class="boxsolid text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs3>
<v-layout row align-center justify-space-between>
<v-icon style="color:#ffffff" @click="editSatuan(vs)">edit</v-icon>
<v-icon style="color:#ffffff" @click="deleteSatuan(vs)">clear</v-icon>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-layout pa-2 v-if="!isSelected(vs)" row>
<v-flex xs12 @click="selectMe(vs)">
<v-layout row>
<v-flex class="boxoutline" xs10>
<v-tooltip right>
<template v-slot:activator="{ on }">
<span v-html="vs.description" v-on="on"></span>
</template>
<span>{{vs.name}}</span>
</v-tooltip>
</v-flex>
<v-flex class="boxoutline text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs3>
<v-layout row align-center justify-space-between>
<v-icon style="color:red" @click="editSatuan(vs)">edit</v-icon>
<v-icon style="color:red" @click="deleteSatuan(vs)">clear</v-icon>
</v-layout>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
<v-divider></v-divider>
</div>
<v-layout row>
<v-flex class="text-xs-center" pt-3 xs12>
<p style="margin-bottom:2px;color: rgba(0,0,0,0.54);font-size:12px;">Menampilkan <span class="red--text">{{xtotalfilterunits}}</span> dari <span class="red--text">{{xtotalunits}}</span> total data</p>
<v-btn small v-if="xshowall === 'N'" flat @click="updateShowAll('Y')" color="primary" dark>Tampilkan Semua</v-btn>
<v-btn small v-if="xshowall === 'Y'" flat @click="updateShowAll('N')" color="primary" dark>Batasi data</v-btn>
</v-flex>
</v-layout>
<template>
<v-layout row justify-center>
<v-dialog v-model="dialogunit" persistent max-width="600px">
<v-card>
<v-card-title>
<span class="headline">Form Satuan</span>
</v-card-title>
<v-card-text class="pt-0 pb-0">
<v-form ref="formunit" v-model="valid" lazy-validation>
<v-layout wrap>
<v-flex xs12>
<v-text-field v-model="unitname" label="Nama Satuan" :rules="nameRules" required></v-text-field>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="grey darken-1" flat @click="updateDialogFormSatuan()">Tutup</v-btn>
<v-btn v-if="xact === 'new'" color="grey darken-1" flat @click="saveFormSatuan()">Simpan</v-btn>
<v-btn v-if="xact === 'edit'" color="grey darken-1" flat @click="updateFormSatuan()">Simpan Perubahan</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</v-layout>
</template>
</v-card>
</v-flex>
</v-layout>
</template>
<style scoped>
.textinput {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
background-color: white;
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
width: 100%;
padding: 8px 10px;
margin-bottom: 5px;
box-sizing: border-box;
border: 1px solid #607d8b;
}
.textinput:focus {
width: 100%;
}
.textinput:focus::-webkit-input-placeholder {
color: transparent;
}
.textinput:focus::-moz-placeholder {
color: transparent;
}
.textinput:-moz-placeholder {
color: transparent;
}
.boxoutline {
color: red;
border: 1px solid red;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #ffffff;
font-size: 14px;
font-weight: 500;
border-radius: 1px
}
.boxoutline:hover {
background: rgba(0, 0, 0, 0.07) !important;
font-size: 15px;
font-weight: 700;
}
.boxsolid {
color: #ffffff;
border: 1px solid #ffffff;
justify-content: center;
height: 45px;
line-height: 45px;
padding-left: 10px;
background: #f44336;
font-size: 14px;
font-weight: 500;
border-radius: 1px
}
.boxsolid:hover {
background: #f44336de;
font-size: 15px;
font-weight: 700;
}
.scroll-container {
scroll-padding: 50px 0 0 50px;
}
::-webkit-scrollbar {
width: 7px;
}
/* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color: #73baf3;
}
/* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #2196f3;
}
/* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: #0079da;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>
<script>
module.exports = {
data: () => ({
color: "success",
valid: false,
unitname: '',
nameRules: [
v => !!v || 'Nama Satuan harus diisi'
],
dialogdeletealert: false,
msgalert: "",
xid: 0,
xsearch: ""
}),
mounted() {
this.$store.dispatch("unit/lookup", {
search: this.xsearch,
all: this.xshowall
})
},
computed: {
xact() {
return this.$store.state.unit.act
},
xerrors() {
return this.$store.state.unit.errors
},
xshowall() {
return this.$store.state.unit.show_all
},
vunits() {
return this.$store.state.unit.units
},
xtotalunits() {
return this.$store.state.unit.total_units
},
xtotalfilterunits() {
return this.$store.state.unit.total_filter_units
},
dialogunit() {
return this.$store.state.unit.dialog_form_unit
},
snackbar: {
get() {
return this.$store.state.unit.alert_success
},
set(val) {
this.$store.commit("unit/update_alert_success", val)
}
},
msgsnackbar() {
return this.$store.state.unit.msg_success
},
lookupstatus() {
return this.$store.state.unit.lookup_unit
},
isLoading() {
return this.$store.state.unit.search_status == 1
}
},
methods: {
updateShowAll(val) {
this.$store.commit("unit/update_show_all", val)
this.$store.dispatch("unit/lookup", {
search: this.xsearch,
all: this.xshowall
})
},
isSelected(p) {
return p.id == this.$store.state.unit.selected_unit.id
},
subname(name) {
var xname = name
if (xname.length > 18) {
xname = xname.substring(0, 18) + '...'
}
return xname
},
selectMe(sc) {
this.$store.commit("unit/update_selected_unit", sc)
this.$store.dispatch("unitlang/lookup", {
id: this.$store.state.unit.selected_unit.id
})
},
updateDialogFormSatuan() {
this.$store.commit("unit/update_dialog_form_unit", false)
},
openFormSatuan() {
this.$refs.formunit.reset()
this.$refs.formunit.resetValidation()
this.$store.commit("unit/update_act", 'new')
this.$store.commit("unit/update_dialog_form_unit", true)
},
saveFormSatuan() {
if (this.$refs.formunit.validate()) {
this.$store.dispatch("unit/save", {
name: this.unitname
})
}
},
updateFormSatuan() {
if (this.$refs.formunit.validate()) {
this.$store.dispatch("unit/update", {
id: this.xid,
name: this.unitname
})
}
},
updateAlert_success(val) {
this.$store.commit("unit/update_alert_success", val)
},
editSatuan(data) {
this.xid = data.id
this.unitname = data.name
this.$store.commit("unit/update_act", 'edit')
this.$store.commit("unit/update_dialog_form_unit", true)
},
deleteSatuan(data) {
this.xid = data.id
var xdata = {
id: data.id,
name: data.name
}
this.$store.commit("unit/update_selected_unit", xdata)
this.msgalert = "Yakin, mau hapus unit " + data.name + " ?"
this.dialogdeletealert = true
},
closeDeleteAlert() {
this.$store.dispatch("unit/delete", {
unitid: this.$store.state.unit.selected_unit.id,
unitname: this.$store.state.unit.selected_unit.name
})
this.dialogdeletealert = false
},
thr_search: _.debounce(function () {
this.$store.dispatch("unit/lookup", {
search: this.xsearch,
all: this.xshowall
})
}, 1000)
},
watch: {
xsearch(val, old) {
if (val !== old && this.lookupstatus !== 1) {
console.log(val)
this.xsearch = val
this.thr_search()
}
}
}
}
</script>