ayanova/src/views/home-memo.vue

@@ -5,6 +5,10 @@
       <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
 
       <v-form ref="form">
+        <!-- cansave: {{ canSave() }}<br />
+        selectedUser: {{ selectedUser }}<br />
+        selectedUsers: {{ selectedUsers }}<br /> -->
+
         <template v-if="!composing">
           <v-row>
             <v-col cols="12">
@@ -33,20 +37,7 @@
         </template>
         <template v-else>
           <v-row>
-            <v-col cols="12">
-              <!-- </v-col>
-            <v-col cols="12"> -->
-              <v-select
-                :items="selectedUsers"
-                :value="selectedUsers"
-                item-text="name"
-                item-value="id"
-                multiple
-                chips
-                deletable-chips
-                :label="$ay.t('MemoToID')"
-                data-cy="selectedUsersInput"
-              ></v-select>
+            <!-- <v-col cols="12">
               <gz-pick-list
                 :ayaType="ayaTypes().User"
                 v-model="selectedUser"
@@ -57,6 +48,47 @@
                 data-cy="userid"
                 @input="userSelected"
               ></gz-pick-list>
+              <v-select
+                :items="selectedUsers"
+                v-model="selectCombo"
+                item-text="name"
+                item-value="id"
+                multiple
+                chips
+                deletable-chips
+                :label="$ay.t('MemoToID')"
+                data-cy="selectedUsersInput"
+              ></v-select>
+            </v-col> 
+            
+            @input="checkSave()"
+            -->
+
+            <v-col cols="12">
+              <gz-pick-list
+                :allowNoSelection="false"
+                :canClear="false"
+                :ayaType="ayaTypes().User"
+                :showEditIcon="false"
+                v-model="pickListSelectedUserId"
+                :label="$ay.t('MemoToID')"
+                ref="userPickList"
+                @input="addSelected()"
+                data-cy="pickListSelectedUserId"
+              ></gz-pick-list>
+
+              <template v-for="item in toUsers">
+                <v-chip
+                  color="primary"
+                  outlined
+                  :key="item.id"
+                  class="ma-1"
+                  close
+                  @click:close="closeChip(item)"
+                >
+                  {{ item.name }}
+                </v-chip>
+              </template>
             </v-col>
 
             <v-col cols="12">
@@ -241,7 +273,6 @@ export default {
           sent: null,
           fromName: null
         },
-      tab: 0,
       formState: {
         ready: false,
         dirty: false,
@@ -255,8 +286,9 @@ export default {
       rights: window.$gz.role.defaultRightsObject(),
       ayaType: window.$gz.type.Memo,
       composing: false,
-      selectedUsers: [],
-      selectedUser: null
+      pickListSelectedUserId: null,
+      items: [],
+      toUsers: []
     };
   },
   //WATCHERS
@@ -268,8 +300,9 @@ export default {
           return;
         }
 
+        let hasSelection = this.toUsers.length > 0;
         //enable / disable save button
-        if (val.dirty && val.valid && !val.readOnly) {
+        if (val.dirty && val.valid && !val.readOnly && hasSelection) {
           window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
         } else {
           window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
@@ -298,10 +331,42 @@ export default {
       }
       vm.selectedUsers.push(user);
     },
-    canSave: function() {
-      return this.formState.valid && this.formState.dirty;
+    updateSave: function() {
+      let hasSelection = this.toUsers.length > 0;
+      //enable / disable save button
+      if (
+        this.formState.dirty &&
+        this.formState.valid &&
+        !this.formState.readOnly &&
+        hasSelection
+      ) {
+        window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+      } else {
+        window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+      }
     },
 
+    closeChip(item) {
+      let i = this.toUsers.findIndex(z => z.id == item.id);
+      if (i != -1) {
+        this.toUsers.splice(i, 1);
+      }
+      this.updateSave();
+    },
+    addSelected() {
+      let selected = this.$refs.userPickList.getFullSelectionValue();
+      if (selected == null) {
+        return;
+      }
+      //already in the list?
+      if (this.toUsers.find(z => z.id == selected.id)) {
+        return;
+      }
+
+      this.toUsers.push(selected);
+      this.pickListSelectedUserId = 0;
+      this.updateSave();
+    },
     ayaTypes: function() {
       return window.$gz.type;
     },
@@ -363,6 +428,7 @@ export default {
     async submit() {
       let vm = this;
       if (vm.canSave == false) {
+        console.log("Can save is false");
         return;
       }
 

ayanova/src/views/home-notify-direct.vue

@@ -5,7 +5,7 @@
         <v-row>
           <!-- {{ toUsers }} -->
           <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-          <v-row cols="12">
+          <!-- <v-row cols="12">
             <v-col cols="9">
               <gz-pick-list
                 :ayaType="ayaTypes().User"
@@ -36,6 +36,32 @@
                 {{ item.name }}
               </v-chip>
             </template>
+          </v-col> -->
+
+          <v-col cols="12">
+            <gz-pick-list
+              :allowNoSelection="false"
+              :canClear="false"
+              :ayaType="ayaTypes().User"
+              :showEditIcon="false"
+              v-model="pickListSelectedUserId"
+              :label="$ay.t('UserList')"
+              ref="userPickList"
+              @input="addSelected()"
+              data-cy="pickListSelectedUserId"
+            ></gz-pick-list>
+            <template v-for="item in toUsers">
+              <v-chip
+                color="primary"
+                outlined
+                :key="item.id"
+                class="ma-2"
+                close
+                @click:close="closeChip(item)"
+              >
+                {{ item.name }}
+              </v-chip>
+            </template>
           </v-col>
 
           <v-col cols="12">