FE_CPONE/test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuDetail.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-subheader>
      <v-divider></v-divider>

      <v-layout row wrap class="pa-2">
        <v-flex xs12 pa-1>
          <v-text-field label="Username*" 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-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: ''
    }
  },
  computed: {
    selectedUser() { return this.$store.state.dashboard_user.selected_user || {} },
    assignedProjects() { return this.selectedUser.projects || [] },
    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 = ''
      }
    },
    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
      }
      return true
    },
    async saveUser() {
      this.password = window.prompt('Masukkan password untuk user ini') || ''
      if (!this.validateBasic(true)) return
      let resp = await this.$store.dispatch('dashboard_user/save', {
        username: this.username,
        password: this.password,
        display_name: this.displayName
      })
      if (resp.status == 'OK') {
        this.$store.commit('dashboard_user/update_selected_user', {})
      } 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 assignProject() {
      if (!this.username) {
        alert('Pilih atau isi username dulu')
        return
      }
      if (!this.selectedProject || !this.selectedProject.mcu_id) {
        alert('Pilih project dulu')
        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 (!this.username || !project || !project.mcu_id) 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 = ''
    }
  }
}
</script>