268 lines
8.7 KiB
Vue
268 lines
8.7 KiB
Vue
<template>
|
|
<v-layout class="mb-2" column>
|
|
<v-dialog v-model="dialogsuccess" persistent max-width="320">
|
|
<v-card>
|
|
<v-card-title class="headline success white--text">Berhasil</v-card-title>
|
|
<v-card-text>{{ msgsuccess }}</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" flat @click="closeDialogSuccess">OK</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
<v-card>
|
|
<v-subheader red--text text--lighten-1>
|
|
DASHBOARD USER MCU
|
|
<v-spacer></v-spacer>
|
|
<v-btn small color="warning" @click="newForm">Baru</v-btn>
|
|
<v-btn small color="primary" @click="saveUser">Simpan</v-btn>
|
|
<v-btn small color="info" @click="resetPassword">Reset Password</v-btn>
|
|
<v-btn small color="error" :disabled="!isEditMode" @click="removeUser">Hapus User</v-btn>
|
|
</v-subheader>
|
|
<v-divider></v-divider>
|
|
|
|
<v-layout row wrap class="pa-2">
|
|
<v-flex xs12 pa-1>
|
|
<v-text-field label="Username*" :readonly="isEditMode" v-model="username"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 pa-1>
|
|
<v-text-field label="Display Name" v-model="displayName"></v-text-field>
|
|
</v-flex>
|
|
<v-flex xs12 pa-1 v-if="!isEditMode">
|
|
<v-text-field
|
|
label="Password*"
|
|
type="password"
|
|
hint="Minimal 8 karakter, wajib huruf besar, huruf kecil, angka, dan simbol"
|
|
persistent-hint
|
|
v-model="password"
|
|
></v-text-field>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 pa-1>
|
|
<v-autocomplete
|
|
v-model="selectedProject"
|
|
:items="projectItems"
|
|
:search-input.sync="projectKeyword"
|
|
item-text="label"
|
|
return-object
|
|
label="Cari Project (Nomor / Nama)"
|
|
no-filter
|
|
></v-autocomplete>
|
|
</v-flex>
|
|
<v-flex xs12 pa-1>
|
|
<v-btn small color="primary" @click="assignProject">Assign Project</v-btn>
|
|
</v-flex>
|
|
|
|
<v-flex xs12 pa-1>
|
|
<div class="caption mb-1">Project Assigned</div>
|
|
<v-chip
|
|
v-for="(p, idx) in assignedProjects"
|
|
:key="idx"
|
|
class="mr-1 mb-1"
|
|
close
|
|
@input="removeProject(p)"
|
|
>
|
|
{{ p.project_number }} - {{ p.project_name }}
|
|
</v-chip>
|
|
<div v-if="assignedProjects.length == 0" class="grey--text caption">Belum ada project</div>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-card>
|
|
</v-layout>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
data() {
|
|
return {
|
|
username: '',
|
|
displayName: '',
|
|
password: '',
|
|
selectedProject: null,
|
|
projectKeyword: '',
|
|
pendingProjects: []
|
|
}
|
|
},
|
|
computed: {
|
|
selectedUser() { return this.$store.state.dashboard_user.selected_user || {} },
|
|
isEditMode() { return !!(this.selectedUser && this.selectedUser.User_ID) },
|
|
assignedProjects() { return this.isEditMode ? (this.selectedUser.projects || []) : this.pendingProjects },
|
|
dialogsuccess() { return this.$store.state.dashboard_user.dialog_success },
|
|
msgsuccess() { return this.$store.state.dashboard_user.msg_success },
|
|
projectItems() {
|
|
return (this.$store.state.dashboard_user.project_options || []).map(p => {
|
|
return Object.assign({}, p, { label: p.project_number + ' - ' + p.project_name })
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
selectedUser: {
|
|
deep: true,
|
|
immediate: true,
|
|
handler(val) {
|
|
this.username = val.User_Username || ''
|
|
this.displayName = val.User_DisplayName || ''
|
|
this.password = ''
|
|
if (val && val.User_ID) this.pendingProjects = []
|
|
}
|
|
},
|
|
projectKeyword(val, old) {
|
|
let next = (val || '').trim()
|
|
let prev = (old || '').trim()
|
|
if (next === prev) return
|
|
this.thrSearchProject(next)
|
|
}
|
|
},
|
|
methods: {
|
|
thrSearchProject: _.debounce(function(keyword) {
|
|
this.$store.dispatch('dashboard_user/search_project', { search: keyword || '' })
|
|
}, 300),
|
|
closeDialogSuccess() {
|
|
this.$store.commit('dashboard_user/update_dialog_success', false)
|
|
this.refreshList()
|
|
},
|
|
refreshList() {
|
|
this.$store.dispatch('dashboard_user/search', {
|
|
username: this.$store.state.dashboard_user.search_username || '',
|
|
project: this.$store.state.dashboard_user.search_project && this.$store.state.dashboard_user.search_project.mcu_id ? this.$store.state.dashboard_user.search_project.mcu_id : 'all',
|
|
page: this.$store.state.dashboard_user.page || 1,
|
|
limit: this.$store.state.dashboard_user.limit || 20
|
|
})
|
|
},
|
|
validateBasic(requirePassword) {
|
|
if (!this.username) {
|
|
alert('Username wajib diisi')
|
|
return false
|
|
}
|
|
if (requirePassword && !this.password) {
|
|
alert('Password wajib diisi')
|
|
return false
|
|
}
|
|
if (requirePassword) {
|
|
let pwd = this.password || ''
|
|
if (pwd.length < 8) {
|
|
alert('Password minimal 8 karakter')
|
|
return false
|
|
}
|
|
if (!(/[A-Z]/.test(pwd) && /[a-z]/.test(pwd) && /[0-9]/.test(pwd) && /[^A-Za-z0-9]/.test(pwd))) {
|
|
alert('Password harus mengandung huruf besar, huruf kecil, angka, dan simbol')
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
},
|
|
async saveUser() {
|
|
if (!this.validateBasic(!this.isEditMode)) return
|
|
let resp = await this.$store.dispatch('dashboard_user/save', {
|
|
username: this.username,
|
|
password: this.password,
|
|
display_name: this.displayName
|
|
})
|
|
if (resp.status == 'OK') {
|
|
if (this.pendingProjects.length > 0) {
|
|
for (let i = 0; i < this.pendingProjects.length; i++) {
|
|
let p = this.pendingProjects[i]
|
|
await this.$store.dispatch('dashboard_user/assign_project', {
|
|
username: this.username,
|
|
mcu_id: p.mcu_id
|
|
})
|
|
}
|
|
this.pendingProjects = []
|
|
}
|
|
this.$store.commit('dashboard_user/update_selected_user', {})
|
|
this.refreshList()
|
|
} else {
|
|
alert(resp.message || 'Gagal simpan user')
|
|
}
|
|
},
|
|
async resetPassword() {
|
|
this.password = window.prompt('Masukkan password baru') || ''
|
|
if (!this.validateBasic(true)) return
|
|
let resp = await this.$store.dispatch('dashboard_user/reset_password', {
|
|
username: this.username,
|
|
password: this.password
|
|
})
|
|
if (resp.status != 'OK') {
|
|
alert(resp.message || 'Gagal reset password')
|
|
}
|
|
},
|
|
async removeUser() {
|
|
if (!this.isEditMode || !this.username) {
|
|
alert('Pilih user dulu')
|
|
return
|
|
}
|
|
if (!window.confirm('Hapus user ini?')) return
|
|
let resp = await this.$store.dispatch('dashboard_user/remove_user', {
|
|
username: this.username
|
|
})
|
|
if (resp.status == 'OK') {
|
|
this.newForm()
|
|
this.refreshList()
|
|
} else {
|
|
alert(resp.message || 'Gagal hapus user')
|
|
}
|
|
},
|
|
async assignProject() {
|
|
if (!this.username) {
|
|
alert('Pilih atau isi username dulu')
|
|
return
|
|
}
|
|
if (!this.selectedProject || !this.selectedProject.mcu_id) {
|
|
alert('Pilih project dulu')
|
|
return
|
|
}
|
|
if (!this.isEditMode) {
|
|
let exists = this.pendingProjects.find(p => p.mcu_id == this.selectedProject.mcu_id)
|
|
if (exists) {
|
|
this.selectedProject = null
|
|
this.projectKeyword = ''
|
|
return
|
|
}
|
|
this.pendingProjects.push(this.selectedProject)
|
|
this.selectedProject = null
|
|
this.projectKeyword = ''
|
|
return
|
|
}
|
|
let resp = await this.$store.dispatch('dashboard_user/assign_project', {
|
|
username: this.username,
|
|
mcu_id: this.selectedProject.mcu_id
|
|
})
|
|
if (resp.status == 'OK') {
|
|
this.selectedProject = null
|
|
this.projectKeyword = ''
|
|
this.refreshList()
|
|
} else {
|
|
alert(resp.message || 'Gagal assign project')
|
|
}
|
|
},
|
|
async removeProject(project) {
|
|
if (!project || !project.mcu_id) return
|
|
if (!this.isEditMode) {
|
|
this.pendingProjects = this.pendingProjects.filter(p => p.mcu_id != project.mcu_id)
|
|
return
|
|
}
|
|
if (!this.username) return
|
|
let resp = await this.$store.dispatch('dashboard_user/remove_project', {
|
|
username: this.username,
|
|
mcu_id: project.mcu_id
|
|
})
|
|
if (resp.status == 'OK') {
|
|
this.refreshList()
|
|
} else {
|
|
alert(resp.message || 'Gagal remove project')
|
|
}
|
|
},
|
|
newForm() {
|
|
this.$store.commit('dashboard_user/update_selected_user', {})
|
|
this.username = ''
|
|
this.displayName = ''
|
|
this.password = ''
|
|
this.selectedProject = null
|
|
this.projectKeyword = ''
|
|
this.pendingProjects = []
|
|
}
|
|
}
|
|
}
|
|
</script>
|