feat: int api remove event

src/App.vue

@@ -6,20 +6,23 @@
   >
     <router-view />
     <FeedbackButton />
+    <Popover />
   </div>
 </template>
 
 <script lang="ts">
 import * as api from './api/';
 import { setLanguage } from './i18n';
 import { defineComponent } from 'vue';
 import FeedbackButton from './components/utils/FeedbackButton.vue';
 import notifier from 'codex-notifier';
+import { Popover } from '@codexteam/ui/vue';
 
 export default defineComponent({
   name: 'App',
   components: {
     FeedbackButton,
+    Popover,
   },
   computed: {
     /**

src/api/events/index.ts

@@ -6,7 +6,8 @@ import {
   QUERY_EVENT,
   QUERY_EVENT_REPETITIONS_PORTION,
   QUERY_PROJECT_DAILY_EVENTS,
-  QUERY_CHART_DATA
+  QUERY_CHART_DATA,
+  MUTATION_REMOVE_EVENT
 } from './queries';
 import * as api from '@/api';
 import type {
@@ -196,3 +197,17 @@ export async function fetchChartData(
     timezoneOffset,
   })).project.event.chartData;
 }
+
+/**
+ * Remove event and all related data (repetitions, daily events)
+ * @param projectId - project event is related to
+ * @param eventId — original event id to remove
+ */
+export async function removeEvent(projectId: string, eventId: string): Promise<APIResponse<{ removeEvent: boolean }>> {
+  return await api.call<{ removeEvent: boolean }>(MUTATION_REMOVE_EVENT, {
+    projectId,
+    eventId,
+  }, undefined, {
+    allowErrors: true,
+  });
+}

src/api/events/queries.ts

@@ -156,3 +156,13 @@ export const MUTATION_REMOVE_EVENT_ASSIGNEE = `
     }
   }
 `;
+
+// language=GraphQL
+/**
+ * GraphQL Mutation to remove an event and all related data
+ */
+export const MUTATION_REMOVE_EVENT = `
+  mutation removeEvent($projectId: ID!, $eventId: ID!) {
+    removeEvent(projectId: $projectId, eventId: $eventId)
+  }
+`;

src/components/event/EventActionsMenu.vue

@@ -0,0 +1,28 @@
+<template>
+  <ContextMenu
+    class="event-actions-menu"
+    :items="items"
+  />
+</template>
+
+<script setup lang="ts">
+import { ContextMenu, type ContextMenuItem } from '@codexteam/ui/vue';
+
+/**
+ * Event actions menu props
+ */
+interface Props {
+  /**
+   * List of action items to show in the menu
+   */
+  items: ContextMenuItem[];
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped>
+.event-actions-menu {
+  min-width: 140px;
+}
+</style>

src/components/event/EventHeader.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="event-header">
     <div class="event-layout__container">
-      <span
-        v-if="!loading"
-        class="event-header__date"
-      >
-        {{ formattedFullDate }}
-      </span>
+      <div class="event-header__top-right">
+        <span
+          v-if="!loading"
+          class="event-header__date"
+        >
+          {{ formattedFullDate }}
+        </span>
+        <Icon
+          v-if="isAdmin"
+          class="event-header__button--more"
+          symbol="dots"
+          @click="onMoreClick($event)"
+        />
+      </div>
 
       <div
         v-if="workspace"
@@ -124,12 +132,17 @@ import AssigneeBar from '../utils/AssigneeBar.vue';
 import EntityImage from '../utils/EntityImage.vue';
 
 import { HawkEvent, HawkEventBacktraceFrame } from '@/types/events';
-import { TOGGLE_EVENT_MARK } from '@/store/modules/events/actionTypes';
+import { REMOVE_EVENT, TOGGLE_EVENT_MARK } from '@/store/modules/events/actionTypes';
 import { Project } from '@/types/project';
 import { Workspace } from '@/types/workspaces';
 import { projectBadges } from '../../mixins/projectBadges';
 import ProjectBadge from '../project/ProjectBadge.vue';
 import { JavaScriptAddons } from '@hawk.so/types';
+import { ContextMenuItem, usePopover } from '@codexteam/ui/vue';
+import EventActionsMenu from './EventActionsMenu.vue';
+import { ActionType } from '../utils/ConfirmationWindow/types';
+import notifier from 'codex-notifier';
+import Icon from '../utils/Icon.vue';
 
 export default defineComponent({
   name: 'EventHeader',
@@ -141,6 +154,7 @@ export default defineComponent({
     AssigneeBar,
     EntityImage,
     ProjectBadge,
+    Icon,
   },
   mixins: [projectBadges],
   props: {
@@ -153,6 +167,15 @@ export default defineComponent({
       validator: prop => typeof prop === 'object' || prop === null,
     },
   },
+  emits: ['event-deleted'],
+  setup() {
+    const { showPopover, hide } = usePopover();
+
+    return {
+      showPopover,
+      hidePopover: hide,
+    };
+  },
   data() {
     return {
       /**
@@ -253,6 +276,13 @@ export default defineComponent({
       return this.$store.getters.getWorkspaceByProjectId(this.projectId);
     },
 
+    /**
+     * Is current user admin in workspace with this project
+     */
+    isAdmin(): boolean {
+      return this.workspace ? this.$store.getters.isCurrentUserAdmin(this.workspace.id) : false;
+    },
+
     /**
      * Computed property that returns formatted full date for event timestamp
      */
@@ -302,6 +332,84 @@ export default defineComponent({
         window.open(this.event.taskManagerItem.url, '_blank', 'noopener');
       }
     },
+
+    /**
+     * Build "more options" context menu items
+     */
+    eventActionsMenuItems(): ContextMenuItem[] {
+      return [
+        {
+          type: 'default',
+          title: this.$t('event.remove') as string,
+          icon: 'Trash',
+          onActivate: () => {
+            this.hidePopover();
+            this.confirmRemoveEvent();
+          },
+        },
+      ];
+    },
+
+    /**
+     * Open the "more options" context menu near the 3-dot button
+     *
+     * @param event - native click mouse event
+     */
+    onMoreClick(event: MouseEvent) {
+      if (!this.isAdmin) {
+        return;
+      }
+
+      this.showPopover({
+        targetEl: event.currentTarget as HTMLElement,
+        with: {
+          component: EventActionsMenu,
+          props: {
+            items: this.eventActionsMenuItems(),
+          },
+        },
+        align: {
+          vertically: 'below',
+          horizontally: 'right',
+        },
+      });
+    },
+
+    /**
+     * Show confirmation dialog and, on confirm, delete the event then navigate back
+     */
+    confirmRemoveEvent() {
+      const { projectId, eventId } = this.$route.params;
+
+      this.$confirm.open({
+        description: this.$t('event.removeConfirmation').toString(),
+        actionType: ActionType.DELETION,
+        continueButtonText: this.$t('event.removeButton').toString(),
+        onConfirm: async () => {
+          const isRemoved = await this.$store.dispatch(REMOVE_EVENT, {
+            projectId,
+            eventId,
+          });
+
+          if (isRemoved) {
+            notifier.show({
+              message: this.$t('event.removeSuccess').toString(),
+              style: 'success',
+              time: 5000,
+            });
+            this.$emit('event-deleted');
+
+            return;
+          }
+
+          notifier.show({
+            message: this.$t('event.removeError').toString(),
+            style: 'error',
+            time: 5000,
+          });
+        },
+      });
+    },
   },
 });
 </script>
@@ -352,8 +460,14 @@ export default defineComponent({
       text-overflow: ellipsis;
     }
 
-    &__date {
+    &__top-right {
+      display: flex;
       float: right;
+      align-items: center;
+      gap: 12px;
+    }
+
+    &__date {
       font-size: 12px;
       line-height: 23px;
     }
@@ -395,6 +509,18 @@ export default defineComponent({
       &:hover {
         color: var(--color-text-main)
       }
+
+      &--more {
+        width: 16px;
+        height: 16px;
+        opacity: 0.5;
+        cursor: pointer;
+        transition: opacity 0.2s ease-in-out;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
     }
 
     &__nav-bar, &__viewed-by {

src/components/event/Layout.vue

@@ -7,6 +7,7 @@
     <EventHeader
       v-if="event || loading"
       :event="event"
+      @event-deleted="onEventDeleted"
     />
     <div class="event-layout__info">
       <div class="event-layout__container">
@@ -45,6 +46,7 @@ export default defineComponent({
     PopupDialog,
     EventHeader,
   },
+  emits: ['event-deleted'],
   data() {
     return {
       /**
@@ -125,6 +127,18 @@ export default defineComponent({
         });
       }
     },
+
+    /**
+     * Called when EventHeader signals that the event was deleted.
+     * and navigates back to the project overview to close the modal.
+     */
+    onEventDeleted() {
+      this.$emit('event-deleted');
+      this.$router.push({
+        name: 'project-overview',
+        params: { projectId: this.projectId },
+      });
+    },
   },
 });
 </script>

src/components/project/Overview.vue

@@ -23,7 +23,12 @@
         <EventsList ref="eventsList" />
       </div>
     </div>
-    <router-view />
+    <router-view v-slot="{ Component }">
+      <component
+        :is="Component"
+        @event-deleted="eventDeleted"
+      />
+    </router-view>
   </div>
 </template>
 
@@ -145,6 +150,10 @@ export default {
         this.$refs.eventsList.reloadDailyEvents();
       }
     },
+
+    async eventDeleted() {
+      this.reloadDailyEvents();
+    },
   },
 };
 </script>

src/i18n/messages/en.json

@@ -609,7 +609,12 @@
       "title": "Event Hidden",
       "description": "We received this event but have hidden it because your subscription has expired.",
       "upgradeButton": "Pay and view event"
-    }
+    },
+    "remove": "Remove event",
+    "removeConfirmation": "Are you sure you want to remove this event? All repetitions and related data will also be removed.",
+    "removeButton": "Remove",
+    "removeSuccess": "Event successfully removed",
+    "removeError": "Failed to remove the event"
   },
   "common": {
     "workspace": "Workspace",

src/i18n/messages/ru.json

@@ -609,7 +609,12 @@
       "title": "Событие скрыто",
       "description": "Мы получили это событие, но скрыли его, потому что ваша подписка закончилась.",
       "upgradeButton": "Оплатить и посмотреть событие"
-    }
+    },
+    "remove": "Удалить событие",
+    "removeConfirmation": "Вы уверены, что хотите удалить это событие? Все повторения и связанные данные также будут удалены.",
+    "removeButton": "Удалить",
+    "removeSuccess": "Событие успешно удалено",
+    "removeError": "Не удалось удалить событие"
   },
   "common": {
     "workspace": "Воркспейc",

src/main.ts

@@ -1,3 +1,4 @@
+import '@codexteam/ui/styles';
 import './styles/base.css';
 import { createApp } from 'vue';
 import 'virtual:svg-icons-register';
@@ -11,7 +12,6 @@ import * as api from './api/index';
 import { REFRESH_TOKENS } from './store/modules/user/actionTypes';
 import { RESET_STORE } from './store/methodsTypes';
 
-import '@codexteam/ui/styles';
 
 const DEBOUNCE_TIMEOUT = 1000;