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

fixed some bugs so that the Präsentation kein komplettes Desaster wird

Browse Source
This commit is contained in:
joschuatonn
2024-06-25 08:52:05 +02:00
parent f229e3bfbb
commit b38e610d61
13 changed files with 440 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/components/ChatSettingsComponent.vue
View File

@@ -1,38 +1,35 @@
<template>
<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-dialog v-bind:model-value="internalShowDialog" @update:model-value="closeDialog" style="overflow-x: hidden;" full-width>
<q-card style="margin: 3rem 15rem;height: 80vh;padding: 20px;overflow: auto !important;">
<q-card-section class="row items-center q-pb-none">
<div class="text-h4">{{ chat!.displayName }}</div>
<div class="text-h4">{{ props.chat!.displayName }}</div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<div class="grid-container" v-if="chat?.members">
<q-card-section>
<div class="text-h5">Mitglieder ({{ chat!.members.length }})</div>
<table>
<tr v-for="user in chat.members">
<td>
<ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
</td>
<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>
</tr>
</table>
<q-card-section style="grid-row: span 2;">
<div class="text-h5">Mitglieder ({{ props.chat!.members.length }})</div>
<div style="height:15rem;overflow-y: auto;">
<table>
<tr v-for="user in props.chat!.members">
<td>
<ProfileCardComponent :user="user" :selected="false" :showAdminTag="isUserAdmin(user.id)"></ProfileCardComponent>
</td>
<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="arrow_downward" title="Adminrechte entziehen" @click="removeAdmin(user.id)" v-if="isUserAdmin(user.id)"></q-btn>
<q-btn round flat icon="arrow_upward" title="Nutzer zum Admin machen" @click="addAdmin(user.id)" v-if="!isUserAdmin(user.id)"></q-btn>
</td>
</tr>
</table>
</div>
</q-card-section>
<!-- Namen des Chats ändern -->
<q-card-section v-if="currentUserIsAdmin">
<div class="text-h5">Namen ändern</div>
<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" @click="removeUser(userStore.user!.id)">Gruppenchat verlassen</q-btn>
<q-btn class="deleteButton" v-if="currentUserIsAdmin">Gruppenchat löschen</q-btn>
<q-input filled v-model="props.chat!.displayName" maxlength="256" counter @update:model-value="showUnsavedChangesAlert" style="width: 30rem"/>
</q-card-section>
<q-card-section v-if="currentUserIsAdmin">
@@ -41,7 +38,8 @@
<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 == chat.profilepictureAsString ? 'dashed grey' : 'none'}"
:key="index"
:style="{'background-image' : 'url('+image.url+')' , 'outline' : image.url == chat.profilepicture ? 'dashed grey' : 'none'}"
style="color: red;"
round
flat
@@ -58,6 +56,46 @@
/>
</div>
</q-card-section>
<q-card-section>
<div class="text-h5">Mitglieder hinzufügen</div>
<q-input
filled
v-model="searchQuery"
placeholder="Nach Nutzern suchen"
@update:model-value="updateSearchResults"
>
<template v-slot:prepend>
<q-icon name="search"></q-icon>
</template>
</q-input>
<div style="height: 12rem; overflow-y: auto;">
<div v-for="(user, index) in searchResults" class="grid-container-search">
<div class="wrapper-div">
<q-btn
v-if="!props.chat!.members.find((u : ptpUser) => user.id == u.id)"
round
flat
dense
icon="add"
title="Hinzufügen"
style="width:3rem;height:3rem;"
class="button"
@click="handleClickEvent(user)"
/>
</div>
<ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
</div>
</div>
</q-card-section>
<q-card-section>
<div class="text-h5">Aktionen</div>
<q-btn class="deleteButton" @click="removeUser(userStore.user!.id)">Gruppenchat verlassen</q-btn>
<q-btn class="deleteButton" v-if="currentUserIsAdmin" @click="deleteChat">Gruppenchat löschen</q-btn>
</q-card-section>
</div>
</q-card>
</q-dialog>
@@ -71,18 +109,25 @@
import type { chat } from 'src/models';
import { useChatStore } from 'src/stores/chat-store';
import { useQuasar } from 'quasar';
import { sendNotification } from 'src/utils';
import { sendNotification, getFilteredUserList } from 'src/utils';
const userStore = useUserStore();
const chatStore = useChatStore();
const showingAlert = ref(false);
const searchQuery = ref("");
const searchResults = ref([] as ptpUser[]);
const emit = defineEmits(['update:showDialog', 'showModal']);
const props = defineProps({
showDialog: Boolean,
chatID: Number,
leaveChat: Function
chat: Object,
leaveChat: {
type: Function,
required: true
}
});
const internalShowDialog = computed({
@@ -95,37 +140,86 @@
}
const selectProfilePicture = (image: profilePicture) => {
chat.value!.profilepictureAsString = image.url;
chat.value!.profilepicture = image.url;
//props.chat!.profilepictureAsString = image.url;
showUnsavedChangesAlert();
}
const $q = useQuasar();
const chat = ref(chatStore.chats.find((chat) => chat.id == props.chatID));
const chat = ref(chatStore.chats.find((chat) => chat.id == props.chat!.id));
const currentUserIsAdmin = computed(() => {
return chat.value!.adminIds.includes(userStore.user!.id);
return props.chat!.adminIds.includes(userStore.user!.id);
});
const updateSearchResults = () => {
searchResults.value = getFilteredUserList(searchQuery.value, userStore.users, userStore.user!.id);
}
const handleClickEvent = (user : ptpUser) => {
chatStore.addUserToChat(user.id, props.chatID!).then((response : responseModel) => {
chatStore.loadChatsByUser().then(() => {
sendNotification(response.message, response.success);
props.chat!.members.unshift(user);
});
});
}
const removeUser = (keycloakID : string) => {
chatStore.removeUserFromChat(keycloakID, props.chatID!).then((response : responseModel) => {
chatStore.loadChatsByUser().then(() => {
if(response.success) {
if(userStore.user!.id == keycloakID) {
sendNotification("Du hast den Chat verlassen", true);
props.leaveChat!();
props.leaveChat();
closeDialog();
} else {
sendNotification(response.message, response.success);
}
chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
//props.chat!.members.shift();
const index = props.chat!.members.indexOf(props.chat!.members.find((user : ptpUser) => user.id == keycloakID));
if (index > -1) {
props.chat!.members.splice(index, 1);
}
//chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
}
});
});
}
const deleteChat = () => {
chatStore.deleteChat(props.chatID!).then((response : responseModel) => {
sendNotification(response.message, response.success);
props.leaveChat();
closeDialog();
});
}
const addAdmin = (keycloakID : string) => {
chatStore.addAdmin(props.chatID!, keycloakID).then((response : responseModel) => {
chatStore.loadChatsByUser().then(() => {
sendNotification(response.message, response.success);
chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
});
});
}
const removeAdmin = (keycloakID : string) => {
chatStore.removeAdmin(props.chatID!, keycloakID).then((response : responseModel) => {
chatStore.loadChatsByUser().then(() => {
sendNotification(response.message, response.success);
chat.value = chatStore.chats.find((chat) => chat.id == props.chatID);
});
});
}
const isUserAdmin = (keycloakID : string) => {
return chat.value!.adminIds.includes(keycloakID);
}
const saveChatChanges = () => {
chatStore.updateChat(chat.value as chat).then((response : responseModel) => {
showingAlert.value = false;
@@ -142,13 +236,19 @@
color: "green",
icon: 'announcement',
actions: [
{ label: 'Änderungen speichern', color: 'white', handler: () => { saveChatChanges() } },
{ label: 'Speichern', color: 'white', handler: () => { saveChatChanges() } },
{ label: 'Verwerfen', color: 'white', handler: () => { discardChanges() } },
]
});
showingAlert.value = true;
}
}
const discardChanges = () => {
showingAlert.value = false;
closeDialog();
}
</script>
<style scoped>
@@ -184,4 +284,25 @@
transition: .3s;
filter: brightness(0.6);
}
/* MIGHT BE MOVED LATER */
.grid-container-search {
display: grid;
grid-template-columns: 70px auto;
}
.grid-container-search > div:nth-child(even) {
min-width: 20rem;
}
.wrapper-div {
height:100%;
position: relative;
}
.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>