Merge pull request #3 from joschuatonn/feature/defaultFunctionality

Feature/default functionality

src/components/ProtectedData.vue

@@ -1,18 +1,57 @@
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, Ref, 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 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();
+      }
+      console.log(user.value);
+      console.log(users.value);
+      usersForChatOptions.value = users.value
+        .sort((a, b) => compare(a.firstName + ' ' + a.lastName, userSearch) - compare(b.firstName + ' ' + b.lastName, userSearch))
+        .filter((u, index) => u.id != user.value.id && index < 5)
+        .map((u) => {
+        return {label: u.firstName + ' ' + u.lastName, value: u.id};
+      });
+    }
+
+    const compare = (a: string, match: Ref<string>): number => {
+      if(a == match.value){
+        return 2;
+      }
+      if(a.includes(match.value)){
+        return 1;
+      }
+      return 0;
+    };
+
     const logout = () => {
       userStore.logout();
       router.push('/');
@@ -23,7 +62,24 @@ export default defineComponent({
       await userStore.loadAllUsers();
       usersLoaded.value = true;
       users.value = userStore.users;
+    };
+
+    const createChat = async(chatName: string)=>{
+      if(chatName == ""){
+        chatName = "Chat";
       }
+      await chatStore.createChat(chatName, usersForChat.value);
+    }
+
+    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 +88,25 @@ export default defineComponent({
     return {
       user,
       userLoaded,
+
       logout,
+
       loadUsers,
       users,
-      usersLoaded
+      usersLoaded,
+
+      chatName,
+      createChat,
+
+      loadChats,
+      chats,
+      chatsLoaded,
+
+      userSearch,
+      matchingUsers,
+      usersForChatOptions,
+      usersForChat,
+      updateUsersForChatOptions,
     };
   },
 })
@@ -48,19 +119,73 @@ export default defineComponent({
     <p>{{ user.firstName }}</p>
     <p>{{ user.lastName }}</p>
     <p>{{ user.username }}</p>
-    <p>{{ user.keycloakID }}</p>
+    <p>{{ user.id }}</p>
   </div>
   <q-btn @click="logout()" label="Logout"/>
   <q-btn @click="loadUsers()" label="Print Users"/>
   <div v-if="usersLoaded">
     <p>Users:</p>
-    <div v-for="user in users" :key="user.keycloakID">
+    <div v-for="user in users" :key="user.id">
       <p>{{ user.firstName }}</p>
       <p>{{ user.lastName }}</p>
       <p>{{ user.username }}</p>
-      <p>{{ user.keycloakID }}</p>
+      <p>{{ user.id }}</p>
     </div>
   </div>
+  <br>
+  <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"/>
+  <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.id">
+        <p>{{ ptpUser.id }}</p>
+      </div>
+    </div>
+  </div>
+
+
 </template>
 
 <style scoped>

src/main.ts

@@ -18,14 +18,9 @@ const keycloak: Keycloak = await userStore.initKeycloak();
 // Anfrage ans Backend
 
 if (keycloak.subject) {
-  userStore.keycloakId = keycloak.subject;
+  userStore.id = keycloak.subject;
-  //userStore.loadPtpUsersByKeycloakID(keycloak.subject);
+  await userStore.getPtpUserById(keycloak.subject);
-  await userStore.getPtpUserByKeycloakID(keycloak.subject);
+  userStore.loadPtpUsersById(keycloak.subject).then(user  => {
-  /*console.log(userStore.userLoaded);
-  if(userStore.userLoaded) {
-    console.log("Hier ist der Bruder: " + JSON.stringify(userStore.user));
-  }*/
-  userStore.loadPtpUsersByKeycloakID(keycloak.subject).then(user  => {
     console.log(JSON.stringify(user));
   })
 } else {

src/models.ts

@@ -1,5 +1,5 @@
 export interface ptpUser {
-  keycloakID: string;
+  id: string;
   firstName: string;
   lastName: string;
   username: string;
@@ -11,7 +11,25 @@ export interface responseModel {
   response: any;
 }
 
+export interface chat{
+  id: number;
+  members: ptpUser[];
+  messages: message[];
+  displayName: string;
+}
+
+export interface user{
+  id: string;
+  firstName: string;
+  lastName: string;
+  username: string;
+  chats: chat[];
+}
+
 export interface message {
+  id: number;
+  chat: chat;
+  sender:user;
   content: string;
   timestamp: string;
   isOwn: boolean;

src/stores/chat-store.ts

@@ -0,0 +1,37 @@
+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.id)).data.response;
+      return this.chats;
+    },
+    async createChat(chatName: string, members: string[]){
+      if(userStore.id) {
+        if (!members.includes(userStore.id)) {
+          members.push(userStore.id);
+        }
+      }else if(userStore.user?.id){
+        if (! members.includes(userStore.user.id)) {
+          members.push(userStore.user.id);
+        }
+      }
+      console.log(members);
+      return (await api.post("/chats/create/" + chatName, members)).data;
+    }
+  }
+});

src/stores/user-store.ts

@@ -3,6 +3,29 @@ import { api } from 'src/boot/axios';
 import { ptpUser, responseModel } from 'src/models';
 import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js';
 
+/**
+ * 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
+ * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak
+ */
+const keycloakPort: string = "" + process.env.PORT_KEYCLOAK;
+const frontendPort: string = "" + process.env.PORT_FRONTEND;
+const realm : string= "" + process.env.KEYCLOAK_REALM;
+const clientId: string = "" + process.env.KEYCLOAK_CLIENT_ID;
+const keycloak: Keycloak = new Keycloak({
+  url: 'http://localhost:' + keycloakPort + '/',
+  realm: realm,
+  clientId: clientId
+});
+const initOptions: KeycloakInitOptions = {
+  onLoad: 'login-required', //erzwingt Login
+  redirectUri: 'http://localhost:' + frontendPort + '/',
+  checkLoginIframe: false,
+  locale: 'login-required',
+}
+
 export const useUserStore = defineStore('userStore', {
   state: () => ({
     user: null as ptpUser | null,
@@ -10,52 +33,33 @@ export const useUserStore = defineStore('userStore', {
     users: [] as ptpUser[],
     usersLoaded: false,
     keycloak: null as Keycloak | null,
-    keycloakId: "",
+    id: "",
     users: [] as ptpUser[],
   }),
-  getters: {},
   actions: {
-    async getPtpUserByKeycloakID(keycloakID : string) {
+    async getPtpUserById(id : string) {
-      await this.loadPtpUsersByKeycloakID(keycloakID).then((response : responseModel) => {
+      await this.loadPtpUsersById(id).then((response : responseModel) => {
         this.user = response.response;
         this.userLoaded = true;
       });
     },
-    async loadPtpUsersByKeycloakID(keycloakID : string) : Promise<responseModel>  {
+    async loadPtpUsersById(id : string) : Promise<responseModel>  {
-      return (await api.get("/users/login/"+keycloakID)).data;
+      return (await api.get("/users/login/"+id)).data;
     },
+    
     getAllPtpUsers() {
       this.loadAllPtpUsers().then((response : ptpUser[]) => {
         this.users = response;
         this.usersLoaded = true;
       })
     },
+    
     async loadAllPtpUsers() {
       return (await api.get("/users/user")).data;
     },
-    async initKeycloak() {
+    
-      /**
+    async initKeycloak() : Promise<Keycloak>{
-       * Variablen sind in quasar.config.js definiert und werden hier verwendet.
+
-       * @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
-       * @param clientId Name des Clients, hinterlegt in realm-export.json von Keycloak
-       */
-      const keycloakPort: string = "" + process.env.PORT_KEYCLOAK;
-      const frontendPort: string = "" + process.env.PORT_FRONTEND;
-      const realm : string= "" + process.env.KEYCLOAK_REALM;
-      const clientId: string = "" + process.env.KEYCLOAK_CLIENT_ID;
-      const keycloak: Keycloak = new Keycloak({
-        url: 'http://localhost:' + keycloakPort + '/',
-        realm: realm,
-        clientId: clientId
-      });
-      const initOptions: KeycloakInitOptions = {
-        onLoad: 'login-required', //erzwingt Login
-        redirectUri: 'http://localhost:' + frontendPort + '/',
-        checkLoginIframe: false,
-        locale: 'login-required',
-      }
       try {
         await keycloak.init(initOptions).then( (auth: boolean): void => {
           console.log("Authenticated: " + auth);
@@ -72,7 +76,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;
     },
   },
 });