Skip to content

Commit

Permalink
fixup! [wip] feat(ban): list existing bans
Browse files Browse the repository at this point in the history
  • Loading branch information
DorraJaouad committed Jun 3, 2024
1 parent 5a777ce commit 18eb5cd
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 18 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,25 @@
{{ t('spreed', 'Banned users') }}
</h4>
<div class="app-settings-section__hint">
TODO add a proper text here
{{ t('spreed', 'Manage the list of banned users in this conversation.') }}
</div>
<NcButton @click="modal = true">
{{ t('spreed', 'Manage bans') }}
</NcButton>

<NcModal v-if="modal"
container=".conversation-ban-settings"
container=".conversation-ban__settings"
@close="modal = false">
<div class="conversation-ban__content">
<h2 class="conversation-ban__title">
{{ t('spreed', 'Banned users') }}
</h2>

<ul v-if="banList.length" class="conversation-ban__list">
<li v-for="ban in banList" :key="ban.id" class="conversation-ban__item">
<span>{{ ban.bannedId }}</span>
<NcButton @click="handleUnban(ban.id)">
{{ t('spreed', 'Unban') }}
</NcButton>
</li>
<BannedItem v-for="ban in banList"
:key="ban.id"
:ban="ban"
@unban-participant="handleUnban(ban.id)" />
</ul>

<NcEmptyContent v-else>
Expand All @@ -55,7 +53,9 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'

import { getConversationBans, unbanActor } from '../../services/banService.ts'
import BannedItem from './BannedItem.vue'

import { getConversationBans, unbanActor } from '../../../services/banService.ts'

export default {
name: 'BanSettings',
Expand All @@ -65,6 +65,7 @@ export default {
NcEmptyContent,
NcLoadingIcon,
NcModal,
BannedItem,
// Icons
AccountCancel,
},
Expand All @@ -81,6 +82,7 @@ export default {
banList: [],
isLoading: true,
modal: false,
showDetails: false,
}
},

Expand Down Expand Up @@ -112,9 +114,6 @@ export default {

<style lang="scss" scoped>
.conversation-ban {
&__settings {
}

&__content {
min-height: 240px;
}
Expand All @@ -125,11 +124,7 @@ export default {

&__list {
overflow: scroll;
}

&__item {
display: flex;
align-items: center;
height: 400px;
}
}
</style>
86 changes: 86 additions & 0 deletions src/components/ConversationSettings/BanSettings/BannedItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!--
- SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
<li :key="ban.id" class="ban-item">
<div class="ban-item__header">
<span>{{ ban.bannedId }}</span>
<div class="ban-item__buttons">
<NcButton type="tertiary" @click="showDetails = !showDetails">
{{ showDetails ? t('spreed', 'Hide details') : t('spreed', 'Details') }}
</NcButton>
<NcButton @click="$emit('unban-participant')">
{{ t('spreed', 'Unban') }}
</NcButton>
</div>
</div>
<div v-if="showDetails" class="ban-item__hint">
<div v-for="(item, index) in banInfo" :key="index">
{{ item }}
</div>
</div>
</li>
</template>

<script>
import moment from '@nextcloud/moment'

import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'

import { getConversationBans, unbanActor } from '../../../services/banService.ts'

export default {
name: 'BannedItem',

components: {
NcButton,
},

props: {
ban: {
type: Object,
required: true,
},
},

emits: ['unban-participant'],

data() {
return {
showDetails: null,
}
},

computed: {
banInfo() {
return [
t('spreed', 'Banned by: {actor}', { actor: this.ban.actorId }),
t('spreed', 'Date: {date}', { date: moment(this.ban.bannedTime * 1000).format('lll') }),
t('spreed', 'Note: {note}', { note: this.ban.internalNote }),
]
},
},
}
</script>

<style lang="scss" scoped>

.ban-item {
margin-bottom: 2px;
&__header {
display: flex;
justify-content: space-between;
align-items: center;
}
&__hint {
word-wrap: break-word;
color: var(--color-text-maxcontrast);
margin-bottom: 4px;
}
&__buttons {
display: flex;
}
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDia
import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'

import BanSettings from './BanSettings.vue'
import BanSettings from './BanSettings/BanSettings.vue'
import BasicInfo from './BasicInfo.vue'
import BotsSettings from './BotsSettings.vue'
import BreakoutRoomsSettings from './BreakoutRoomsSettings.vue'
Expand Down

0 comments on commit 18eb5cd

Please sign in to comment.