Added a profile picture selector to the ChatSettingsComponent

src/components/ChatSettingsComponent.vue

@@ -34,6 +34,30 @@
           <q-btn class="deleteButton">Gruppenchat verlassen</q-btn>
           <q-btn class="deleteButton">Grupepnchat löschen</q-btn>
         </q-card-section>
+
+        <q-card-section>
+          <div class="text-h5">Gruppenbild ändern</div>
+
+          <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="color: red;"
+              round
+              flat
+              outline
+              class="profilePictureSelector"
+              @click="selectProfilePicture(image)"
+            >
+            </div>
+          </div>
+          <div v-else>
+            <q-spinner
+              color="primary"
+              size="3em"
+            />
+          </div>
+        </q-card-section>
       </div>
     </q-card>
   </q-dialog>
@@ -43,9 +67,12 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
 import { useUserStore } from 'src/stores/user-store';
+import { profilePicture } from 'src/models';
+import { useChatStore } from 'src/stores/chat-store';
 
   const showDialog = ref(true);
   const userStore = useUserStore();
+  const chatStore = useChatStore();
 
   const emit = defineEmits(['update:showDialog', 'showModal']);
   const props = defineProps({
@@ -61,6 +88,10 @@ import { useUserStore } from 'src/stores/user-store';
   const closeDialog = () => {
     emit('showModal', true);
   }
+
+  const selectProfilePicture = (image: profilePicture) => {
+    props.chat!.profilepicture = image.url;
+  }
 </script>
 
 <style scoped>
@@ -80,4 +111,20 @@ import { useUserStore } from 'src/stores/user-store';
     margin-right: 50px;
     min-width: 30vw;
   }
+
+  .profilePictureSelector {
+    transition: .3s;
+    background-size: cover;
+    background-position:center;
+    width: 6rem;
+    height:6rem;
+    margin: 15px;
+    border-radius: 100%;
+    cursor: pointer;
+  }
+
+  .profilePictureSelector:hover {
+    transition: .3s;
+    filter: brightness(0.6);
+  }
 </style>