ayanova/src/components/pick-list.vue

@@ -64,6 +64,7 @@ export default {
       type: Number,
       default: null
     },
+
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     ayaType: {
@@ -78,16 +79,17 @@ export default {
       type: Boolean,
       default: false
     },
+
     label: { type: String, default: "" }
   },
   watch: {
-    ayaType(val,oldVal){
-      if(val!=oldVal && oldVal!=null){
-      //change of type so clear out the list
-      this.searchResults=[];
-      this.searchEntry=null;
-      this.lastSelection=null;
-      this.initialized=false;
+    ayaType(val, oldVal) {
+      if (val != oldVal && oldVal != null) {
+        //change of type so clear out the list
+        this.searchResults = [];
+        this.searchEntry = null;
+        this.lastSelection = null;
+        this.initialized = false;
       }
     },
     value(val) {
@@ -123,6 +125,9 @@ export default {
     }
   },
   methods: {
+    getFullSelectionValue() {
+      return this.lastSelection;
+    },
     hasError: function() {
       return this.errors.length > 0;
     },

ayanova/src/router.js

@@ -105,6 +105,14 @@ export default new Router({
           /* webpackChunkName: "ay-common" */ "./views/home-notifications.vue"
         )
     },
+    {
+      path: "/home-notify-direct",
+      name: "home-notify-direct",
+      component: () =>
+        import(
+          /* webpackChunkName: "ay-common" */ "./views/home-notify-direct.vue"
+        )
+    },
     {
       path: "/home-reminders",
       name: "home-reminders",

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

@@ -3,10 +3,60 @@
     <v-col>
       <v-form ref="form">
         <v-row>
+          <!-- {{ toUsers }} -->
           <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
+          <v-row cols="12">
+            <v-col cols="9">
+              <gz-pick-list
+                :ayaType="ayaTypes().User"
+                :showEditIcon="false"
+                v-model="userId"
+                :label="$ay.t('UserList')"
+                ref="userPickList"
+              ></gz-pick-list> </v-col
+            ><v-col cols="1">
+              <v-btn @click="addSelected()">
+                <v-icon>fa-plus</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+          <!-- <v-col cols="12">
+            <v-select
+              :items="items"
+              item-text="name"
+              item-value="id"
+              multiple
+              chips
+              deletable-chips
+              :value="toUsers"
+              :label="$ay.t('MemoToID')"
+            ></v-select>
+          </v-col> -->
 
+          <v-col cols="12">
+            <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">
+            <v-textarea
+              v-model="message"
+              :label="$ay.t('MemoMessage')"
+              ref="message"
+              auto-grow
+              :clearable="!formState.readOnly"
+            ></v-textarea>
+          </v-col>
         </v-row>
       </v-form>
     </v-col>
@@ -62,7 +112,9 @@ export default {
   components: {},
   data() {
     return {
-      users: [],
+      userId: null,
+      items: [],
+      toUsers: [],
       message: null,
       formState: {
         ready: false,
@@ -103,9 +155,34 @@ export default {
     }
   },
   methods: {
-    translation() {
-      return window.$gz.translation;
+    closeChip(item) {
+      // console.log(item);
+     // debugger;
+      let i = this.toUsers.findIndex(z => z.id == item.id);
+      if (i) {
+        this.toUsers.splice(i, 1);
+      }
     },
+    addSelected() {
+      let selected = this.$refs.userPickList.getFullSelectionValue();
+      if (selected == null) {
+        console.log("Selected is null");
+        return;
+      }
+      //already in the list?
+      if (this.toUsers.find(z => z.id == selected.id)) {
+        console.log(`User ${selected.name} is already in the list`);
+        return;
+      }
+
+      console.log(`Pushing user ${selected.name} into list`);
+      this.toUsers.push(selected);
+      this.userId = 0;
+    },
+    ayaTypes: function() {
+      return window.$gz.type;
+    },
+
     form() {
       return window.$gz.form;
     },
@@ -201,6 +278,7 @@ function generateMenu(vm) {
 //
 async function initForm(vm) {
   await fetchTranslatedText(vm);
+  // await populateSelectionLists(vm);
 }
 
 //////////////////////////////////////////////////////////
@@ -211,7 +289,17 @@ async function fetchTranslatedText(vm) {
   await window.$gz.translation.cacheTranslations([
     "DirectNotification",
     "UserList",
-    "MemoMessage"
+    "MemoMessage",
+    "MemoToID"
   ]);
 }
+
+// //////////////////////
+// //
+// //
+// async function populateSelectionLists(vm) {
+//   //ensure the pick lists required are pre-fetched
+//   await window.$gz.enums.fetchEnumList("usertype");
+//   vm.selectLists.usertypes = window.$gz.enums.getSelectionList("usertype");
+// }
 </script>