gorb/frontend
4
0
Fork 0
Code Issues 14 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: implement Confirmation modal on kick and ban context menu actions
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
SauceyRed 2025-08-16 12:01:36 +02:00
parent 78b7732411
commit 3a9df965c2
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
2 changed files with 56 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

21
components/Message.vue
View file

@ -59,6 +59,9 @@
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
</div>
</div>
<ModalConfirmation v-if="confirmationModal && confirmationModal.show" :action-name="confirmationModal.actionName"
:display-name="getDisplayName(props.message.member)" :callback="confirmationModal.callback"
:onClose="resetConfirmationModal" :onCancel="resetConfirmationModal" />
</template>
<script lang="ts" setup>
@ -67,7 +70,7 @@ import { parse } from 'marked';
import type { MessageProps } from '~/types/props';
import MessageMedia from './MessageMedia.vue';
import MessageReply from './UserInterface/MessageReply.vue';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
import type { ContextMenuInterface, ContextMenuItem, IConfirmationModal } from '~/types/interfaces';
const { getDisplayName } = useProfile()
const { getUser } = useAuth()
@ -88,6 +91,10 @@ const date = uuidToDate(props.message.uuid);
const currentDate: Date = new Date()
const confirmationModal = ref<IConfirmationModal>();
const memberMenuItems = ref<ContextMenuItem[]>([]);
console.log("[MSG] message to render:", props.message);
console.log("author:", props.message.member);
console.log("[MSG] reply message:", props.replyMessage);
@ -155,6 +162,9 @@ onMounted(async () => {
};
console.log("media links:", mediaLinks);
console.log("[CONFIRM] modal:", confirmationModal.value);
memberMenuItems.value = await createMemberContextMenuItems(props.message.member, route.params.serverId as string, confirmationModal);
});
//function toggleTooltip(e: Event) {
@ -176,8 +186,6 @@ if (props.message.member.user.uuid == me!.uuid /* || check message delete permis
messageMenuItems.splice(Math.min(2, messageMenuItems.length), 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
}
const memberMenuItems = await createMemberContextMenuItems(props.message.member, route.params.serverId as string);
function getDayDifference(date1: Date, date2: Date) {
const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
@ -189,6 +197,13 @@ function getDayDifference(date1: Date, date2: Date) {
return Math.round(dayDifference);
}
function resetConfirmationModal() {
console.log("[CONFIRM] resetting");
if (confirmationModal) {
confirmationModal.value = { show: false, actionName: "", callback: () => {} };
}
}
</script>
<style scoped>

42
utils/createMemberContextMenuItems.ts
View file

@ -1,7 +1,7 @@
import { Permission } from "~/types/enums";
import type { ContextMenuItem, GuildMemberResponse } from "~/types/interfaces";
import type { ContextMenuItem, GuildMemberResponse, IConfirmationModal } from "~/types/interfaces";
export default async (member: GuildMemberResponse, guildId: string) => {
export default async (member: GuildMemberResponse, guildId: string, confirmationModal?: Ref<IConfirmationModal | undefined>) => {
const menuItems: ContextMenuItem[] = [];
const { fetchMeMember } = useApi();
@ -19,12 +19,46 @@ export default async (member: GuildMemberResponse, guildId: string) => {
console.log("[MENUITEM] member is not me");
if (hasPermission(me.value, Permission.KickMember)) {
console.log("[MENUITEM] has kick member permission");
menuItems.splice(Math.min(3, menuItems.length), 0, { name: "Kick", icon: "lucide:user-x", type: "danger", callback: async () => await kickMember(member.uuid) });
menuItems.splice(Math.min(3, menuItems.length), 0, {
name: "Kick",
icon: "lucide:user-x",
type: "danger",
callback: async () => {
if (confirmationModal) {
console.log("[CONFIRM] HEYO THERE!!");
confirmationModal.value = {
actionName: "kick",
callback: async () => await kickMember(member.uuid),
show: true
}
} else {
console.log("[CONFIRM] no modal");
await kickMember(member.uuid)
}
}
});
}
if (hasPermission(me.value, Permission.BanMember)) {
console.log("[MENUITEM] has ban permission");
menuItems.splice(Math.min(4, menuItems.length), 0, { name: "Ban (WIP)", icon: "lucide:ban", type: "danger", callback: async () => await banMember(guildId, member.uuid) });
menuItems.splice(Math.min(4, menuItems.length), 0, {
name: "Ban (WIP)",
icon: "lucide:ban",
type: "danger",
callback: async () => {
if (confirmationModal) {
console.log("[CONFIRM] HEYO THERE!! 2");
confirmationModal.value = {
actionName: "ban",
callback: async () => await banMember(member.guild_uuid, member.uuid),
show: true
}
} else {
console.log("[CONFIRM] no modal 2");
await banMember(member.guild_uuid, member.uuid)
}
}
});
}
}