Skip to content

Commit

Permalink
feat: add archiving option to settings dialog, make a flow for leavin…
Browse files Browse the repository at this point in the history
…g conversation

Signed-off-by: Maksim Sukharev <[email protected]>
  • Loading branch information
Antreesy committed Sep 24, 2024
1 parent 3739745 commit 6498409
Show file tree
Hide file tree
Showing 3 changed files with 279 additions and 174 deletions.
209 changes: 140 additions & 69 deletions src/components/ConversationSettings/DangerZone.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,78 +4,109 @@
-->

<template>
<div>
<div class="danger-zone">
<div v-if="supportsArchive" class="app-settings-subsection">
<h4 class="app-settings-section__subtitle">
{{ t('spreed', 'Archive conversation') }}
</h4>
<p class="danger-zone__hint">
{{ t('spreed', 'Hide a conversation from the list. It will still be shown, if you have been mentioned directly and have according conversation settings.') }}
</p>
<NcButton type="secondary" @click="toggleArchiveConversation">
{{ labelArchive }}
</NcButton>
</div>

<NcNoteCard type="warning" :text="t('spreed', 'Be careful, these actions cannot be undone.')" />
<div class="danger-zone">
<div v-if="canLeaveConversation" class="app-settings-subsection">
<h4 class="app-settings-section__subtitle">
{{ t('spreed', 'Leave conversation') }}
</h4>
<p class="danger-zone__hint">
{{ t('spreed', 'Once a conversation is left, to rejoin a closed conversation, an invite is needed. An open conversation can be rejoined at any time.') }}
</p>
<NcButton type="warning" @click="leaveConversation">
{{ t('spreed', 'Leave conversation') }}
</NcButton>
</div>
<div v-if="canDeleteConversation" class="app-settings-subsection">
<h4 class="app-settings-section__subtitle">
{{ t('spreed', 'Delete conversation') }}
</h4>
<p class="danger-zone__hint">
{{ t('spreed', 'Permanently delete this conversation.') }}
</p>
<NcButton type="error"
@click="toggleShowDeleteConversationDialog">
{{ t('spreed', 'Delete conversation') }}
</NcButton>
<NcDialog class="danger-zone__dialog"
:open.sync="isDeleteConversationDialogOpen"
:name="t('spreed','Delete conversation')"
:message="deleteConversationDialogMessage"
container=".danger-zone">
<template #actions>
<NcButton type="tertiary" @click="toggleShowDeleteConversationDialog">
{{ t('spreed', 'No') }}
</NcButton>
<NcButton type="error" @click="deleteConversation">
{{ t('spreed', 'Yes') }}
</NcButton>
</template>
</NcDialog>
</div>
<div v-if="canDeleteConversation" class="app-settings-subsection">
<h4 class="app-settings-section__subtitle">
{{ t('spreed', 'Delete chat messages') }}
</h4>
<p class="danger-zone__hint">
{{ t('spreed', 'Permanently delete all the messages in this conversation.') }}
</p>
<NcButton type="error"
@click="toggleShowDeleteChatDialog">
{{ t('spreed', 'Delete chat messages') }}
</NcButton>
<NcDialog class="danger-zone__dialog"
:open.sync="isDeleteChatDialogOpen"
:name="t('spreed','Delete all chat messages')"
:message="deleteChatDialogMessage"
container=".danger-zone">
<template #actions>
<NcButton type="tertiary" @click="toggleShowDeleteChatDialog">
{{ t('spreed', 'No') }}
</NcButton>
<NcButton type="error" @click="clearChatHistory">
{{ t('spreed', 'Yes') }}
</NcButton>
</template>
</NcDialog>
</div>
<div />

<div v-if="canLeaveConversation" class="app-settings-subsection">
<h4 class="app-settings-section__subtitle">
{{ t('spreed', 'Leave conversation') }}
</h4>
<p class="danger-zone__hint">
{{ t('spreed', 'Once a conversation is left, to rejoin a closed conversation, an invite is needed. An open conversation can be rejoined at any time.') }}
</p>
<NcButton type="warning" @click="toggleShowLeaveConversationDialog">
{{ t('spreed', 'Leave conversation') }}
</NcButton>
<NcDialog class="danger-zone__dialog"
:open.sync="isLeaveConversationDialogOpen"
:name="t('spreed','Leave conversation')"
:message="leaveConversationDialogMessage"
container=".danger-zone">
<template #actions>
<NcButton v-if="supportsArchive && !conversation.isArchived" type="secondary" @click="toggleArchiveConversation">
{{ t('spreed', 'Archive instead') }}
</NcButton>
<NcButton type="tertiary" @click="toggleShowLeaveConversationDialog">
{{ t('spreed', 'No') }}
</NcButton>
<NcButton type="error" @click="leaveConversation">
{{ t('spreed', 'Yes') }}
</NcButton>
</template>
</NcDialog>
</div>

<div v-if="canDeleteConversation" class="app-settings-subsection">
<h4 class="app-settings-section__subtitle">
{{ t('spreed', 'Delete conversation') }}
</h4>
<p class="danger-zone__hint">
{{ t('spreed', 'Permanently delete this conversation.') }}
</p>
<NcButton type="error"
@click="toggleShowDeleteConversationDialog">
{{ t('spreed', 'Delete conversation') }}
</NcButton>
<NcDialog class="danger-zone__dialog"
:open.sync="isDeleteConversationDialogOpen"
:name="t('spreed','Delete conversation')"
:message="deleteConversationDialogMessage"
container=".danger-zone">
<template #actions>
<NcButton type="tertiary" @click="toggleShowDeleteConversationDialog">
{{ t('spreed', 'No') }}
</NcButton>
<NcButton type="error" @click="deleteConversation">
{{ t('spreed', 'Yes') }}
</NcButton>
</template>
</NcDialog>
</div>

<div v-if="canDeleteConversation" class="app-settings-subsection">
<h4 class="app-settings-section__subtitle">
{{ t('spreed', 'Delete chat messages') }}
</h4>
<p class="danger-zone__hint">
{{ t('spreed', 'Permanently delete all the messages in this conversation.') }}
</p>
<NcButton type="error"
@click="toggleShowDeleteChatDialog">
{{ t('spreed', 'Delete chat messages') }}
</NcButton>
<NcDialog class="danger-zone__dialog"
:open.sync="isDeleteChatDialogOpen"
:name="t('spreed','Delete all chat messages')"
:message="deleteChatDialogMessage"
container=".danger-zone">
<template #actions>
<NcButton type="tertiary" @click="toggleShowDeleteChatDialog">
{{ t('spreed', 'No') }}
</NcButton>
<NcButton type="error" @click="clearChatHistory">
{{ t('spreed', 'Yes') }}
</NcButton>
</template>
</NcDialog>
</div>
</div>
</template>

<script>
import { ref } from 'vue'
import { showError } from '@nextcloud/dialogs'
import { emit } from '@nextcloud/event-bus'
import { t } from '@nextcloud/l10n'
Expand All @@ -84,6 +115,10 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
const supportsArchive = hasTalkFeature('local', 'archived-conversations')
export default {
name: 'DangerZone',
components: {
Expand All @@ -109,10 +144,16 @@ export default {
},
},
data() {
setup() {
const isLeaveConversationDialogOpen = ref(false)
const isDeleteConversationDialogOpen = ref(false)
const isDeleteChatDialogOpen = ref(false)
return {
isDeleteConversationDialogOpen: false,
isDeleteChatDialogOpen: false,
supportsArchive,
isLeaveConversationDialogOpen,
isDeleteConversationDialogOpen,
isDeleteChatDialogOpen,
}
},
Expand All @@ -125,6 +166,19 @@ export default {
return this.conversation.token
},
labelArchive() {
return this.conversation.isArchived
? t('spreed', 'Unarchive conversation')
: t('spreed', 'Archive conversation')
},
leaveConversationDialogMessage() {
return t('spreed', 'Do you really want to leave "{displayName}"?', this.conversation, undefined, {
escape: false,
sanitize: false,
})
},
deleteConversationDialogMessage() {
return t('spreed', 'Do you really want to delete "{displayName}"?', this.conversation, undefined, {
escape: false,
Expand All @@ -146,10 +200,23 @@ export default {
hideConversationSettings() {
emit('hide-conversation-settings')
},
/**
* Deletes the current user from the conversation.
*/
async toggleArchiveConversation() {
this.isLeaveConversationDialogOpen = false
await this.$store.dispatch('toggleArchive', this.conversation)
this.hideConversationSettings()
},
/**
* Deletes the current user from the conversation.
*/
async leaveConversation() {
this.isLeaveConversationDialogOpen = false
try {
await this.$store.dispatch('removeCurrentUserFromConversation', { token: this.token })
this.hideConversationSettings()
Expand Down Expand Up @@ -198,6 +265,10 @@ export default {
}
},
toggleShowLeaveConversationDialog() {
this.isLeaveConversationDialogOpen = !this.isLeaveConversationDialogOpen
},
toggleShowDeleteConversationDialog() {
this.isDeleteConversationDialogOpen = !this.isDeleteConversationDialogOpen
},
Expand Down
Loading

0 comments on commit 6498409

Please sign in to comment.