Support pending project before user save

test/vuex/dashboard-user-mcu/components/oneDashboardUserMcuDetail.vue

@@ -42,7 +42,7 @@
           ></v-autocomplete>
         </v-flex>
         <v-flex xs12 pa-1>
-          <v-btn small color="primary" :disabled="!isEditMode" @click="assignProject">Assign Project</v-btn>
+          <v-btn small color="primary" @click="assignProject">Assign Project</v-btn>
         </v-flex>
 
         <v-flex xs12 pa-1>
@@ -71,13 +71,14 @@ module.exports = {
       displayName: '',
       password: '',
       selectedProject: null,
-      projectKeyword: ''
+      projectKeyword: '',
+      pendingProjects: []
     }
   },
   computed: {
     selectedUser() { return this.$store.state.dashboard_user.selected_user || {} },
     isEditMode() { return !!(this.selectedUser && this.selectedUser.User_ID) },
-    assignedProjects() { return this.selectedUser.projects || [] },
+    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() {
@@ -94,6 +95,7 @@ module.exports = {
         this.username = val.User_Username || ''
         this.displayName = val.User_DisplayName || ''
         this.password = ''
+        if (val && val.User_ID) this.pendingProjects = []
       }
     },
     projectKeyword(val, old) {
@@ -139,7 +141,18 @@ module.exports = {
         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')
       }
@@ -172,10 +185,6 @@ module.exports = {
       }
     },
     async assignProject() {
-      if (!this.isEditMode) {
-        alert('Simpan user dulu sebelum assign project')
-        return
-      }
       if (!this.username) {
         alert('Pilih atau isi username dulu')
         return
@@ -184,6 +193,18 @@ module.exports = {
         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
@@ -197,7 +218,12 @@ module.exports = {
       }
     },
     async removeProject(project) {
-      if (!this.username || !project || !project.mcu_id) return
+      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
@@ -215,6 +241,7 @@ module.exports = {
       this.password = ''
       this.selectedProject = null
       this.projectKeyword = ''
+      this.pendingProjects = []
     }
   }
 }