mirror of
https://github.com/aljazceru/meshcore-web.git
synced 2025-12-18 16:44:21 +01:00
add ability to delete channel message history
This commit is contained in:
54
src/components/channels/ChannelDropDownMenu.vue
Normal file
54
src/components/channels/ChannelDropDownMenu.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<DropDownMenu>
|
||||
<template v-slot:button>
|
||||
<IconButton v-if="channel" class="bg-transparent text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
|
||||
</svg>
|
||||
</IconButton>
|
||||
</template>
|
||||
<template v-slot:items>
|
||||
|
||||
<!-- delete message history button -->
|
||||
<DropDownMenuItem @click="onDeleteMessageHistory">
|
||||
<svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-red-500">Delete Message History</span>
|
||||
</DropDownMenuItem>
|
||||
|
||||
</template>
|
||||
</DropDownMenu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IconButton from "../IconButton.vue";
|
||||
import DropDownMenu from "../DropDownMenu.vue";
|
||||
import DropDownMenuItem from "../DropDownMenuItem.vue";
|
||||
import Database from "../../js/Database.js";
|
||||
|
||||
export default {
|
||||
name: 'ChannelDropDownMenu',
|
||||
components: {
|
||||
DropDownMenuItem,
|
||||
DropDownMenu,
|
||||
IconButton,
|
||||
},
|
||||
props: {
|
||||
channel: Object,
|
||||
},
|
||||
methods: {
|
||||
async onDeleteMessageHistory() {
|
||||
|
||||
// confirm user wants to delete message history
|
||||
if(!confirm("Are you sure you want to delete all message history for this channel?")){
|
||||
return;
|
||||
}
|
||||
|
||||
// delete message history
|
||||
await Database.ChannelMessage.deleteChannelMessages(this.channel.idx);
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -7,12 +7,21 @@
|
||||
<div class="text-sm text-gray-500">{{ channel.description }}</div>
|
||||
</div>
|
||||
|
||||
<!-- channel dropdown menu -->
|
||||
<div class="my-auto">
|
||||
<ChannelDropDownMenu :channel="channel"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContactDropDownMenu from "../contacts/ContactDropDownMenu.vue";
|
||||
import ChannelDropDownMenu from "./ChannelDropDownMenu.vue";
|
||||
|
||||
export default {
|
||||
name: 'ChannelListItem',
|
||||
components: {ChannelDropDownMenu, ContactDropDownMenu},
|
||||
props: {
|
||||
channel: Object,
|
||||
},
|
||||
|
||||
@@ -2,7 +2,13 @@
|
||||
<Page>
|
||||
|
||||
<!-- app bar -->
|
||||
<AppBar title="Channel Messages" :subtitle="subtitle"/>
|
||||
<AppBar title="Channel Messages" :subtitle="subtitle">
|
||||
<template v-slot:trailing>
|
||||
<ChannelDropDownMenu
|
||||
v-if="channel"
|
||||
:channel="channel"/>
|
||||
</template>
|
||||
</AppBar>
|
||||
|
||||
<!-- list -->
|
||||
<div class="flex h-full w-full overflow-hidden">
|
||||
@@ -17,10 +23,12 @@ import Page from "./Page.vue";
|
||||
import AppBar from "../AppBar.vue";
|
||||
import MessageViewer from "../messages/MessageViewer.vue";
|
||||
import GlobalState from "../../js/GlobalState.js";
|
||||
import ChannelDropDownMenu from "../channels/ChannelDropDownMenu.vue";
|
||||
|
||||
export default {
|
||||
name: 'ChannelMessagesPage',
|
||||
components: {
|
||||
ChannelDropDownMenu,
|
||||
MessageViewer,
|
||||
AppBar,
|
||||
Page,
|
||||
|
||||
Reference in New Issue
Block a user