130 lines
3.8 KiB
Vue
130 lines
3.8 KiB
Vue
<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-card-section class="row items-center q-pb-none">
|
|
<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">
|
|
<q-card-section>
|
|
<div class="text-h5">Mitglieder</div>
|
|
<table>
|
|
<tr v-for="user in props.chat!.members">
|
|
<td>
|
|
<ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
|
|
</td>
|
|
<td v-if="user.id != userStore.user!.id">
|
|
<q-btn round flat icon="person_remove" style="color: darkred;" title="Nutzer entfernen"></q-btn>
|
|
<q-btn round flat icon="key" title="Nutzer zum Admin machen"></q-btn>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</q-card-section>
|
|
|
|
<!-- 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-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-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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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({
|
|
showDialog: Boolean,
|
|
chat: Object
|
|
});
|
|
|
|
const internalShowDialog = computed({
|
|
get: () => props.showDialog,
|
|
set: (value) => emit('update:showDialog', value)
|
|
});
|
|
|
|
const closeDialog = () => {
|
|
emit('showModal', true);
|
|
}
|
|
|
|
const selectProfilePicture = (image: profilePicture) => {
|
|
props.chat!.profilepicture = image.url;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.deleteButton {
|
|
color:darkred;
|
|
border:2px solid darkred;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.grid-container > div:nth-child(odd) {
|
|
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> |