Changes made to a group chat can now be saved (WIP)

src/components/ChatSettingsComponent.vue

@@ -9,7 +9,7 @@
 
       <div class="grid-container">
         <q-card-section>
-          <div class="text-h5">Mitglieder</div>
+          <div class="text-h5">Mitglieder ({{ members.length }})</div>
           <table>
             <tr v-for="user in members">
               <td>
@@ -26,7 +26,7 @@
         <!-- Namen des Chats ändern -->
         <q-card-section>
           <div class="text-h5">Namen ändern</div>
-          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter />
+          <q-input filled v-model="props.chat!.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert"/>
         </q-card-section>
 
         <q-card-section>
@@ -41,7 +41,7 @@
           <div style="display: flex;" v-if="chatStore.profilePicturesLoaded">
             <div
               v-for="(image, index) in chatStore.profilePictures"
-              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == props.chat!.profilepicture ? 'dashed grey' : 'none'}"
+              :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == props.chat!.profilepictureAsString ? 'dashed grey' : 'none'}"
               style="color: red;"
               round
               flat
@@ -67,7 +67,7 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
 import { useUserStore } from 'src/stores/user-store';
-import { profilePicture, ptpUser, responseModel } from 'src/models';
+import { chat, profilePicture, ptpUser, responseModel } from 'src/models';
 import { useChatStore } from 'src/stores/chat-store';
 import { useQuasar } from 'quasar';
 import { sendNotification } from 'src/utils';
@@ -76,6 +76,8 @@ import { sendNotification } from 'src/utils';
   const userStore = useUserStore();
   const chatStore = useChatStore();
 
+  const showingAlert = ref(false);
+
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
     showDialog: Boolean,
@@ -92,7 +94,8 @@ import { sendNotification } from 'src/utils';
   }
 
   const selectProfilePicture = (image: profilePicture) => {
-    props.chat!.profilepicture = image.url;
+    props.chat!.profilepictureAsString = image.url;
+    showUnsavedChangesAlert();
   }
 
   const $q = useQuasar();
@@ -119,6 +122,30 @@ import { sendNotification } from 'src/utils';
   const reloadChats = async() => {
     await chatStore.loadChatsByUser();
   };
+
+  const saveChatChanges = () => {
+    chatStore.updateChat(props.chat! as chat).then((response : responseModel) => {
+      showingAlert.value = false;
+      sendNotification(response.message, response.success);
+    });
+  }
+
+  const showUnsavedChangesAlert = () => {
+    if(!showingAlert.value) {
+      $q.notify({
+        message: 'Du hast Änderungen vorgenommen, die noch nicht gespeichert wurden',
+        position: 'top',
+        timeout: 0,
+        color: "green",
+        icon: 'announcement',
+        actions: [
+          { label: 'Änderungen speichern', color: 'white', handler: () => { saveChatChanges() } },
+        ]
+      });
+
+      showingAlert.value = true;
+    }
+  }
 </script>
 
 <style scoped>