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
Antreesy committed Sep 24, 2024
1 parent 3739745 commit 970835e
Show file tree
Hide file tree
Showing 2 changed files with 177 additions and 84 deletions.
209 changes: 140 additions & 69 deletions src/components/ConversationSettings/DangerZone.vue
View file
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
52 changes: 37 additions & 15 deletions src/components/LeftSidebar/ConversationsList/Conversation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
<NcActionButton v-if="item.canLeaveConversation"
key="leave-conversation"
close-after-click
@click="leaveConversation">
@click="isLeaveDialogOpen = true">
<template #icon>
<IconExitToApp :size="16" />
</template>
Expand All @@ -82,7 +82,7 @@
key="delete-conversation"
close-after-click
class="critical"
@click="isDialogOpen = true">
@click="isDeleteDialogOpen = true">
<template #icon>
<IconDelete :size="16" />
</template>
Expand All @@ -107,12 +107,27 @@
</template>

<!-- confirmation required to delete conversation -->
<template v-if="isDialogOpen" #extra>
<NcDialog :open.sync="isDialogOpen"
<template v-if="isLeaveDialogOpen || isDeleteDialogOpen" #extra>
<NcDialog :open.sync="isLeaveDialogOpen"
:name="t('spreed', 'Leave conversation')"
:message="dialogLeaveMessage">
<template #actions>
<NcButton v-if="supportsArchive && !item.isArchived" type="secondary" @click="toggleArchiveConversation">
{{ t('spreed', 'Archive instead') }}
</NcButton>
<NcButton type="tertiary" @click="isLeaveDialogOpen = false">
{{ t('spreed', 'No') }}
</NcButton>
<NcButton type="warning" @click="leaveConversation">
{{ t('spreed', 'Yes') }}
</NcButton>
</template>
</NcDialog>
<NcDialog :open.sync="isDeleteDialogOpen"
:name="t('spreed','Delete conversation')"
:message="dialogMessage">
:message="dialogDeleteMessage">
<template #actions>
<NcButton type="tertiary" @click="isDialogOpen = false">
<NcButton type="tertiary" @click="isDeleteDialogOpen = false">
{{ t('spreed', 'No') }}
</NcButton>
<NcButton type="error" @click="deleteConversation">
Expand All @@ -126,7 +141,7 @@

<script>
import { toRefs } from 'vue'
import { toRefs, ref } from 'vue'
import { isNavigationFailure, NavigationFailureType } from 'vue-router'
import IconArchive from 'vue-material-design-icons/Archive.vue'
Expand Down Expand Up @@ -209,22 +224,20 @@ export default {
emits: ['click'],
setup(props) {
const isLeaveDialogOpen = ref(false)
const isDeleteDialogOpen = ref(false)
const { item, isSearchResult } = toRefs(props)
const { counterType, conversationInformation } = useConversationInfo({ item, isSearchResult })
return {
supportsArchive,
isLeaveDialogOpen,
isDeleteDialogOpen,
counterType,
conversationInformation,
}
},
data() {
return {
isDialogOpen: false,
}
},
computed: {
canFavorite() {
return this.item.participantType !== PARTICIPANT.TYPE.USER_SELF_JOINED
Expand All @@ -244,7 +257,14 @@ export default {
: t('spreed', 'Archive conversation')
},
dialogMessage() {
dialogLeaveMessage() {
return t('spreed', 'Do you really want to leave "{displayName}"?', this.item, undefined, {
escape: false,
sanitize: false,
})
},
dialogDeleteMessage() {
return t('spreed', 'Do you really want to delete "{displayName}"?', this.item, undefined, {
escape: false,
sanitize: false,
Expand Down Expand Up @@ -285,7 +305,7 @@ export default {
*/
async deleteConversation() {
try {
this.isDialogOpen = false
this.isDeleteDialogOpen = false
if (this.isActive) {
await this.$store.dispatch('leaveConversation', { token: this.item.token })
await this.$router.push({ name: 'root' })
Expand All @@ -303,6 +323,7 @@ export default {
*/
async leaveConversation() {
try {
this.isLeaveDialogOpen = false
if (this.isActive) {
await this.$store.dispatch('leaveConversation', { token: this.item.token })
await this.$router.push({ name: 'root' })
Expand All @@ -323,6 +344,7 @@ export default {
},
async toggleArchiveConversation() {
this.isLeaveDialogOpen = false
this.$store.dispatch('toggleArchive', this.item)
},
Expand Down

0 comments on commit 970835e

Please sign in to comment.