now able to create chats with multiple users

src/components/ProtectedData.vue

@@ -19,10 +19,25 @@ export default defineComponent({
     const userLoaded = ref(false);
 
     const chatName = ref('');
+    const userSearch = ref('');
 
     const chats = ref([] as chat[]);
     const chatsLoaded = ref(false);
 
+    const matchingUsers = ref([] as ptpUser[]);
+    const usersForChat = ref([] as string[]);
+
+    const usersForChatOptions = ref([] as {label: string, value: string}[]);
+    const updateUsersForChatOptions = async () =>{
+      if(!usersLoaded.value){
+        await loadUsers();
+      }
+      usersForChatOptions.value = users.value
+        .filter((u, index) => u.keycloakID !== user.value.keycloakID && index < 5)
+        .map((u) => {
+        return {label: u.firstName + ' ' + u.lastName, value: u.keycloakID};
+      });
+    }
 
     const logout = () => {
       userStore.logout();
@@ -34,10 +49,13 @@ export default defineComponent({
       await userStore.loadAllUsers();
       usersLoaded.value = true;
       users.value = userStore.users;
-    }
+    };
 
     const createChat = async(chatName: string)=>{
-      await chatStore.createChat(chatName, userStore.users.map(u => u.keycloakID));
+      if(chatName == ""){
+        chatName = "Chat";
+      }
+      await chatStore.createChat(chatName, usersForChat.value);
     }
 
     const loadChats = async() => {
@@ -48,7 +66,7 @@ export default defineComponent({
       usersLoaded.value = true;
       console.log(users.value);
       console.log(chats.value);
-    }
+    };
     onMounted(async () => {
       userLoaded.value = userStore.userLoaded;
       user.value = userStore.user;
@@ -70,6 +88,12 @@ export default defineComponent({
       loadChats,
       chats,
       chatsLoaded,
+
+      userSearch,
+      matchingUsers,
+      usersForChatOptions,
+      usersForChat,
+      updateUsersForChatOptions,
     };
   },
 })
@@ -96,7 +120,45 @@ export default defineComponent({
     </div>
   </div>
   <br>
-  <q-input v-model="chatName" label="Chat Name" clearable />
+  <q-input
+    v-model="chatName"
+    label="Chat Name"
+    clearable
+  />
+  <div class="q-gutter-y-md" style="max-width: 300px">
+    <q-input
+      standout
+      bottom-slots
+      v-model="userSearch"
+      label="Search User"
+      clearable
+      filled
+      color="orange"
+      @update:model-value="updateUsersForChatOptions()"
+    >
+      <template v-slot:after>
+        <q-btn
+          round
+          dense
+          flat
+          icon="search"
+          @click="updateUsersForChatOptions()"
+        />
+      </template>
+    </q-input>
+  </div>
+  <div class="q-pa-lg">
+    <q-option-group
+      v-model="usersForChat"
+      rules="[val => val.length > 0 || 'Please select at least one user']"
+      :options="usersForChatOptions"
+      type="checkbox"
+      color="primary"
+      inline
+    >
+
+    </q-option-group>
+  </div>
   <q-btn @click="createChat(chatName)" label="Create Chat"/>
   <br>
   <q-btn @click="loadChats()" label="Load Chats"/>
@@ -109,6 +171,8 @@ export default defineComponent({
       </div>
     </div>
   </div>
+
+
 </template>
 
 <style scoped>

src/stores/chat-store.ts

@@ -21,6 +21,18 @@ export const useChatStore = defineStore('chatStore',{
       return this.chats;
     },
     async createChat(chatName: string, members: string[]){
+      if(userStore.keycloakId) {
+        console.log("keycloakId is defined");
+        if (!members.includes(userStore.keycloakId)) {
+          members.push(userStore.keycloakId);
+        }
+      }else if(userStore.user?.keycloakID){
+        console.log("user is defined");
+        if (! members.includes(userStore.user.keycloakID)) {
+          members.push(userStore.user.keycloakID);
+        }
+      }
+      console.log(members);
       return (await api.post("/chats/create/" + chatName, members)).data;
     }
   }