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

63
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-card style="margin: 3rem 20rem;height: 80vh;padding: 20px;overflow: auto !important;">
<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-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<div class="grid-container">
<div class="grid-container" v-if="chat?.members">
<q-card-section>
<div class="text-h5">Mitglieder ({{ members.length }})</div>
<div class="text-h5">Mitglieder ({{ chat!.members.length }})</div>
<table>
<tr v-for="user in members">
<tr v-for="user in chat.members">
<td>
<ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
</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="key" title="Nutzer zum Admin machen"></q-btn>
</td>
@@ -24,24 +24,24 @@
</q-card-section>
<!-- Namen des Chats ändern -->
<q-card-section>
<q-card-section v-if="currentUserIsAdmin">
<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>
<div class="text-h5">Aktionen</div>
<q-btn class="deleteButton">Gruppenchat verlassen</q-btn>
<q-btn class="deleteButton">Grupepnchat löschen</q-btn>
<q-btn class="deleteButton" @click="removeUser(userStore.user!.id)">Gruppenchat verlassen</q-btn>
<q-btn class="deleteButton" v-if="currentUserIsAdmin">Gruppenchat löschen</q-btn>
</q-card-section>
<q-card-section>
<q-card-section v-if="currentUserIsAdmin">
<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!.profilepictureAsString ? 'dashed grey' : 'none'}"
:style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == chat.profilepictureAsString ? 'dashed grey' : 'none'}"
style="color: red;"
round
flat
@@ -67,12 +67,12 @@
import { computed, ref } from 'vue';
import ProfileCardComponent from './ProfileCardComponent.vue';
import { useUserStore } from 'src/stores/user-store';
import { chat, profilePicture, ptpUser, responseModel } from 'src/models';
import { profilePicture, ptpUser, responseModel } from 'src/models';
import type { chat } from 'src/models';
import { useChatStore } from 'src/stores/chat-store';
import { useQuasar } from 'quasar';
import { sendNotification } from 'src/utils';
const showDialog = ref(true);
const userStore = useUserStore();
const chatStore = useChatStore();
@@ -81,7 +81,8 @@ import { sendNotification } from 'src/utils';
const emit = defineEmits(['update:showDialog', 'showModal']);
const props = defineProps({
showDialog: Boolean,
chat: Object
chatID: Number,
leaveChat: Function
});
const internalShowDialog = computed({
@@ -94,37 +95,39 @@ import { sendNotification } from 'src/utils';
}
const selectProfilePicture = (image: profilePicture) => {
props.chat!.profilepictureAsString = image.url;
chat.value!.profilepictureAsString = image.url;
//props.chat!.profilepictureAsString = image.url;
showUnsavedChangesAlert();
}
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) => {
chatStore.removeUserFromChat(keycloakID, props.chat!.id).then((response : responseModel) => {
reloadChats();
sendNotification(response.message, response.success);
chatStore.removeUserFromChat(keycloakID, props.chatID!).then((response : responseModel) => {
chatStore.loadChatsByUser().then(() => {
if(response.success) {
members.value = members.value.filter((user) => user.id != keycloakID);
if(userStore.user!.id == keycloakID) {
sendNotification("Du hast den Chat verlassen", true);
props.leaveChat!();
closeDialog();
} else {
sendNotification(response.message, response.success);
}
if(members.value.length == 1) {
sendNotification("Es ist ein kritischer Fehler aufgetreten", false);
} else if(members.value.length == 2) {
closeDialog();
chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
}
});
});
}
const reloadChats = async() => {
await chatStore.loadChatsByUser();
};
const saveChatChanges = () => {
chatStore.updateChat(props.chat! as chat).then((response : responseModel) => {
chatStore.updateChat(chat.value as chat).then((response : responseModel) => {
showingAlert.value = false;
sendNotification(response.message, response.success);
});