apps/ptpchat-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ChatSettingsComponent no longer accepts type "chat" as prop, chatID instead

Browse Source
This commit is contained in:
joschuatonn
2024-06-20 07:28:36 +02:00
parent 03f16315fa
commit 0c9ca7c36a
1 changed files with 40 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/ChatSettingsComponent.vue
View File

@@ -2,20 +2,20 @@
<q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow: auto;" full-width> <q-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow: auto;" full-width>
<q-card style="margin: 3rem 20rem;height: 80vh;padding: 20px;overflow: auto !important;"> <q-card style="margin: 3rem 20rem;height: 80vh;padding: 20px;overflow: auto !important;">
<q-card-section class="row items-center q-pb-none"> <q-card-section class="row items-center q-pb-none">
<div class="text-h4">{{ props.chat!.displayName }}</div> <div class="text-h4">{{ chat!.displayName }}</div>
<q-space /> <q-space />
<q-btn icon="close" flat round dense v-close-popup /> <q-btn icon="close" flat round dense v-close-popup />
</q-card-section> </q-card-section>
<div class="grid-container"> <div class="grid-container" v-if="chat?.members">
<q-card-section> <q-card-section>
<div class="text-h5">Mitglieder ({{ members.length }})</div> <div class="text-h5">Mitglieder ({{ chat!.members.length }})</div>
<table> <table>
<tr v-for="user in members"> <tr v-for="user in chat.members">
<td> <td>
<ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent> <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
</td> </td>
<td v-if="user.id != userStore.user!.id"> <td v-if="user.id != userStore.user!.id && currentUserIsAdmin">
<q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen" @click="removeUser(user.id)"></q-btn> <q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen" @click="removeUser(user.id)"></q-btn>
<q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn> <q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn>
</td> </td>
@@ -24,24 +24,24 @@
</q-card-section> </q-card-section>
<!-- Namen des Chats ändern --> <!-- Namen des Chats ändern -->
<q-card-section> <q-card-section v-if="currentUserIsAdmin">
<div class="text-h5">Namen ändern</div> <div class="text-h5">Namen ändern</div>
<q-input filled v-model="props.chat!.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert"/> <q-input filled v-model="chat.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert"/>
</q-card-section> </q-card-section>
<q-card-section> <q-card-section>
<div class="text-h5">Aktionen</div> <div class="text-h5">Aktionen</div>
<q-btn class="deleteButton">Gruppenchat verlassen</q-btn> <q-btn class="deleteButton" @click="removeUser(userStore.user!.id)">Gruppenchat verlassen</q-btn>
<q-btn class="deleteButton">Grupepnchat löschen</q-btn> <q-btn class="deleteButton" v-if="currentUserIsAdmin">Gruppenchat löschen</q-btn>
</q-card-section> </q-card-section>
<q-card-section> <q-card-section v-if="currentUserIsAdmin">
<div class="text-h5">Gruppenbild ändern</div> <div class="text-h5">Gruppenbild ändern</div>
<div style="display: flex;" v-if="chatStore.profilePicturesLoaded"> <div style="display: flex;" v-if="chatStore.profilePicturesLoaded">
<div <div
v-for="(image, index) in chatStore.profilePictures" v-for="(image, index) in chatStore.profilePictures"
:style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == props.chat!.profilepictureAsString ? 'dashed grey' : 'none'}" :style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == chat.profilepictureAsString ? 'dashed grey' : 'none'}"
style="color: red;" style="color: red;"
round round
flat flat
@@ -66,13 +66,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import ProfileCardComponent from './ProfileCardComponent.vue'; import ProfileCardComponent from './ProfileCardComponent.vue';
import { useUserStore } from 'src/stores/user-store'; import { useUserStore } from 'src/stores/user-store';
import { chat, profilePicture, ptpUser, responseModel } from 'src/models'; import { profilePicture, ptpUser, responseModel } from 'src/models';
import { useChatStore } from 'src/stores/chat-store'; import type { chat } from 'src/models';
import { useQuasar } from 'quasar'; import { useChatStore } from 'src/stores/chat-store';
import { sendNotification } from 'src/utils'; import { useQuasar } from 'quasar';
import { sendNotification } from 'src/utils';
const showDialog = ref(true);
const userStore = useUserStore(); const userStore = useUserStore();
const chatStore = useChatStore(); const chatStore = useChatStore();
@@ -81,7 +81,8 @@ import { sendNotification } from 'src/utils';
const emit = defineEmits(['update:showDialog', 'showModal']); const emit = defineEmits(['update:showDialog', 'showModal']);
const props = defineProps({ const props = defineProps({
showDialog: Boolean, showDialog: Boolean,
chat: Object chatID: Number,
leaveChat: Function
}); });
const internalShowDialog = computed({ const internalShowDialog = computed({
@@ -94,37 +95,39 @@ import { sendNotification } from 'src/utils';
} }
const selectProfilePicture = (image: profilePicture) => { const selectProfilePicture = (image: profilePicture) => {
props.chat!.profilepictureAsString = image.url; chat.value!.profilepictureAsString = image.url;
//props.chat!.profilepictureAsString = image.url;
showUnsavedChangesAlert(); showUnsavedChangesAlert();
} }
const $q = useQuasar(); const $q = useQuasar();
const members = ref([] as ptpUser[]);
members.value = props.chat!.members; const chat = ref(chatStore.chats.find((chat) => chat.id == props.chatID));
const currentUserIsAdmin = computed(() => {
return chat.value!.adminIds.includes(userStore.user!.id);
});
const removeUser = (keycloakID : string) => { const removeUser = (keycloakID : string) => {
chatStore.removeUserFromChat(keycloakID, props.chat!.id).then((response : responseModel) => { chatStore.removeUserFromChat(keycloakID, props.chatID!).then((response : responseModel) => {
reloadChats(); chatStore.loadChatsByUser().then(() => {
sendNotification(response.message, response.success); if(response.success) {
if(response.success) { if(userStore.user!.id == keycloakID) {
members.value = members.value.filter((user) => user.id != keycloakID); sendNotification("Du hast den Chat verlassen", true);
} props.leaveChat!();
closeDialog();
} else {
sendNotification(response.message, response.success);
}
if(members.value.length == 1) { chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
sendNotification("Es ist ein kritischer Fehler aufgetreten", false); }
} else if(members.value.length == 2) { });
closeDialog();
}
}); });
} }
const reloadChats = async() => {
await chatStore.loadChatsByUser();
};
const saveChatChanges = () => { const saveChatChanges = () => {
chatStore.updateChat(props.chat! as chat).then((response : responseModel) => { chatStore.updateChat(chat.value as chat).then((response : responseModel) => {
showingAlert.value = false; showingAlert.value = false;
sendNotification(response.message, response.success); sendNotification(response.message, response.success);
}); });