now able to create chats with oneself and print them

src/components/ProtectedData.vue

@@ -1,18 +1,29 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue';
-import { useUserStore } from 'stores/user-store';
+
 import { useRouter } from 'vue-router';
-import { ptpUser } from 'src/models';
+import { useUserStore } from 'stores/user-store';
+import { useChatStore } from 'stores/chat-store';
+
+import { ptpUser, chat } from 'src/models';
 
 export default defineComponent({
   name: 'ProtectedData',
   components: {},
   setup() {
     const userStore = useUserStore();
+    const chatStore = useChatStore();
     const router = useRouter();
 
     const user = ref();
     const userLoaded = ref(false);
+
+    const chatName = ref('');
+
+    const chats = ref([] as chat[]);
+    const chatsLoaded = ref(false);
+
+
     const logout = () => {
       userStore.logout();
       router.push('/');
@@ -24,6 +35,20 @@ export default defineComponent({
       usersLoaded.value = true;
       users.value = userStore.users;
     }
+
+    const createChat = async(chatName: string)=>{
+      await chatStore.createChat(chatName, userStore.users.map(u => u.keycloakID));
+    }
+
+    const loadChats = async() => {
+      chats.value = await chatStore.loadChatsByUser();
+      chatsLoaded.value = true;
+
+      users.value = await userStore.loadAllUsers();
+      usersLoaded.value = true;
+      console.log(users.value);
+      console.log(chats.value);
+    }
     onMounted(async () => {
       userLoaded.value = userStore.userLoaded;
       user.value = userStore.user;
@@ -32,10 +57,19 @@ export default defineComponent({
     return {
       user,
       userLoaded,
+
       logout,
+
       loadUsers,
       users,
-      usersLoaded
+      usersLoaded,
+
+      chatName,
+      createChat,
+
+      loadChats,
+      chats,
+      chatsLoaded,
     };
   },
 })
@@ -61,6 +95,20 @@ export default defineComponent({
       <p>{{ user.keycloakID }}</p>
     </div>
   </div>
+  <br>
+  <q-input v-model="chatName" label="Chat Name" clearable />
+  <q-btn @click="createChat(chatName)" label="Create Chat"/>
+  <br>
+  <q-btn @click="loadChats()" label="Load Chats"/>
+  <div v-if="chatsLoaded">
+    <p>Chats:</p>
+    <div v-for="chat in chats" :key="chat.id">
+      <h5>{{ chat.displayName }}</h5>
+      <div v-for="ptpUser in chat.members" :key="ptpUser.keycloakID">
+        <p>{{ ptpUser.keycloakID }}</p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>

src/models.ts

@@ -10,3 +10,26 @@ export interface responseModel {
   message: string;
   response: any;
 }
+
+export interface chat{
+  id: number;
+  members: ptpUser[];
+  messages: message[];
+  displayName: string;
+}
+
+export interface user{
+  id: number;
+  keycloakID: string;
+  firstName: string;
+  lastName: string;
+  username: string;
+  chats: chat[];
+}
+
+export interface message{
+  id: number;
+  chat: chat;
+  sender: user;
+  content: string;
+}

src/stores/chat-store.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia';
+import { chat } from 'src/models';
+import { api } from 'src/boot/axios';
+import { useUserStore } from 'stores/user-store';
+
+const userStore = useUserStore();
+
+export const useChatStore = defineStore('chatStore',{
+  state:() => ({
+    chats: [] as chat[],
+  }),
+  actions: {
+    async getChatsByUser(): Promise<chat[]> {
+      if(!this.chats){
+        await this.loadChatsByUser();
+      }
+      return this.chats;
+    },
+    async loadChatsByUser() : Promise<chat[]>{
+      this.chats = (await api.get("/users/chat/" + userStore.keycloakId)).data.response;
+      return this.chats;
+    },
+    async createChat(chatName: string, members: string[]){
+      return (await api.post("/chats/create/" + chatName, members)).data;
+    }
+  }
+});

src/stores/user-store.ts

@@ -3,31 +3,8 @@ import { api } from 'src/boot/axios';
 import { ptpUser, responseModel } from 'src/models';
 import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
 
-export const useUserStore = defineStore('userStore', {
-  state: () => ({
-    user: null as ptpUser | null,
-    userLoaded: false,
-    keycloak: null as Keycloak | null,
-    keycloakId: "",
-    users: [] as ptpUser[],
-  }),
-  getters: {},
-  actions: {
-    async getPtpUserByKeycloakID(keycloakID : string) {
-      await this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
-        this.user = response.response;
-        this.userLoaded = true;
-      });
-    },
-    async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel>  {
-      return (await api.get("/users/login/"+keycloakID)).data;
-    },
-    async loadAllUsers(){
-      this.users = (await api.get("/users/user")).data;
-    },
-    async initKeycloak() {
 /**
-       * Variablen sind in quasar.config.js definiert und werden hier verwendet.
+ * Variablen für Keycloak Funktionen; sind in quasar.config.js definiert.
  * @param keycloakPort Port, auf dem Keycloak läuft, hinterlegt in docker-compose.yml
  * @param frontendPort Port, auf dem das Frontend läuft, hinterlegt in quasar.config.js und realm-export.json von Keycloak für die Redirect-URL
  * @param realm Name des Realms, hinterlegt in realm-export.json von Keycloak
@@ -48,6 +25,31 @@ export const useUserStore = defineStore('userStore', {
   checkLoginIframe: false,
   locale: 'login-required',
 }
+
+export const useUserStore = defineStore('userStore', {
+  state: () => ({
+    user: null as ptpUser | null,
+    userLoaded: false,
+    keycloak: null as Keycloak | null,
+    keycloakId: "",
+    users: [] as ptpUser[],
+  }),
+  actions: {
+    async getPtpUserByKeycloakID(keycloakID : string) {
+      await this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
+        this.user = response.response;
+        this.userLoaded = true;
+      });
+    },
+    async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel>  {
+      return (await api.get("/users/login/"+keycloakID)).data;
+    },
+    async loadAllUsers(): Promise<ptpUser[]> {
+      this.users = (await api.get("/users/user")).data;
+      return this.users;
+    },
+    async initKeycloak() : Promise<Keycloak>{
+
       try {
         await keycloak.init(initOptions).then( (auth: boolean): void => {
           console.log("Authenticated: " + auth);
@@ -64,7 +66,7 @@ export const useUserStore = defineStore('userStore', {
       }else await this.keycloak?.login( {prompt: 'login'} as KeycloakLoginOptions);
     },
     async logout() {
-      window.location.href= 'http://localhost:' + process.env.PORT_KEYCLOAK + '/realms/' + process.env.KEYCLOAK_REALM + '/protocol/openid-connect/logout?post_logout_redirect_uri=http%3A%2F%2Flocalhost:' + process.env.PORT_FRONTEND + '&client_id=' + process.env.KEYCLOAK_CLIENT_ID;
-    }
+      window.location.href= 'http://localhost:' + keycloakPort + '/realms/' + realm + '/protocol/openid-connect/logout?post_logout_redirect_uri=http%3A%2F%2Flocalhost:' + frontendPort + '&client_id=' + clientId;
+    },
   },
 });