Merge pull request #90 from buggregator/issue/#83-lock-events

Issue/#83 lock events

Author: butschster

plugins/events.client.ts

@@ -3,14 +3,25 @@ import { useApiTransport } from '~/src/shared/lib/use-api-transport'
 import type { EventId, EventType, ServerEvent } from '~/src/shared/types';
 import { useCachedIdsStore } from "~/stores/cached-ids";
 import { useEventStore } from "~/stores/events";
+import { useLockedIdsStore } from "~/stores/locked-ids";
 
 export default defineNuxtPlugin(() => {
   const eventsStore = useEventStore();
   const cachedIdsStore = useCachedIdsStore();
+  const lockedIdsStore = useLockedIdsStore();
+
+  const {
+    lockedIds,
+  } = storeToRefs(lockedIdsStore)
+
+  const {
+    events,
+  } = storeToRefs(eventsStore)
 
   const {
     deleteEvent,
     deleteEventsAll,
+    deleteEventsList,
     deleteEventsByType,
     getEventsAll,
     getEvent,
@@ -19,7 +30,36 @@ export default defineNuxtPlugin(() => {
     rayStopExecution,
   } = useApiTransport();
 
+  const removeList = async (uuids: EventId[]) => {
+    if (uuids.length === 1) {
+      const res = await deleteEvent(uuids[0])
+
+      if (res) {
+        eventsStore.removeById(uuids[0]);
+        cachedIdsStore.removeById(uuids[0]);
+      }
+
+      return
+    }
+
+    const res = await deleteEventsList(uuids)
+
+    if (res) {
+      eventsStore.removeByIds(uuids);
+      cachedIdsStore.removeByIds(uuids);
+    }
+  }
   const removeAll = async () => {
+    if (lockedIds.value.length) {
+      const removedIds = events.value
+        .filter(({ uuid }) => !lockedIds.value.includes(uuid))
+        .map(({ uuid }) => uuid)
+
+      await removeList(removedIds)
+
+      return
+    }
+
     const res = await deleteEventsAll()
 
     if (res) {
@@ -29,20 +69,25 @@ export default defineNuxtPlugin(() => {
   }
 
   const removeById = async (eventId: EventId) => {
-    const res = await deleteEvent(eventId)
+    await removeList([eventId])
+  }
 
-    if (res) {
-      eventsStore.removeById(eventId);
-      cachedIdsStore.removeById(eventId);
+  const removeByType = async (eventType: EventType) => {
+    if (lockedIds.value.length) {
+      const removedIds = events.value
+        .filter(({ type, uuid }) => type !== eventType || lockedIds.value.includes(uuid))
+        .map(({ uuid }) => uuid)
+
+      await removeList(removedIds)
+
+      return
     }
-  }
 
-  const removeByType = async (type: EventType) => {
-    const res = await deleteEventsByType(type)
+    const res = await deleteEventsByType(eventType)
 
     if (res) {
-      eventsStore.removeByType(type);
-      cachedIdsStore.removeByType(type);
+      eventsStore.removeByType(eventType);
+      cachedIdsStore.removeByType(eventType);
     }
   }
 
@@ -61,10 +106,6 @@ export default defineNuxtPlugin(() => {
     })
   }
 
-  const {
-    events,
-  } = storeToRefs(eventsStore)
-
   const {
     cachedIds,
   } = storeToRefs(cachedIdsStore)
@@ -88,6 +129,11 @@ export default defineNuxtPlugin(() => {
       rayExecution: {
         continue: rayContinueExecution,
         stop: rayStopExecution,
+      },
+      lockedIds: {
+        items: lockedIds,
+        add: lockedIdsStore.add,
+        remove: lockedIdsStore.remove,
       }
     }
   }

src/shared/lib/io/use-events-requests.ts

@@ -5,6 +5,7 @@ type TUseEventsRequests = () => {
   getAll: () => Promise<ServerEvent<unknown>[]>,
   getSingle: (id: EventId) => Promise<ServerEvent<unknown> | null>,
   deleteAll: () => Promise<void | Response>,
+  deleteList: (uuids: EventId[]) => Promise<void | Response>,
   deleteSingle: (id: EventId) => Promise<void | Response>,
   deleteByType: (type: EventType) => Promise<void | Response>,
   getEventRestUrl: (param: EventId | undefined) => string
@@ -45,6 +46,11 @@ export const useEventsRequests: TUseEventsRequests = () => {
       console.error('Fetch Error', err)
     })
 
+  const deleteList = (uuids: EventId[]) => fetch(getEventRestUrl(), { method: 'DELETE',  body: JSON.stringify({ uuids }) })
+    .catch((err) => {
+      console.error('Fetch Error', err)
+    })
+
   const deleteByType = (type: EventType) => fetch(getEventRestUrl(), { method: 'DELETE', body: JSON.stringify({type}) })
     .catch((err) => {
       console.error('Fetch Error', err)
@@ -54,6 +60,7 @@ export const useEventsRequests: TUseEventsRequests = () => {
     getAll,
     getSingle,
     deleteAll,
+    deleteList,
     deleteSingle,
     deleteByType,
     getEventRestUrl

src/shared/lib/use-api-transport/use-api-transport.ts

@@ -12,6 +12,7 @@ export const useApiTransport = () => {
     getAll,
     getSingle,
     deleteAll,
+    deleteList,
     deleteSingle,
     deleteByType,
     getEventRestUrl
@@ -73,6 +74,14 @@ export const useApiTransport = () => {
     return deleteAll();
   }
 
+  const deleteEventsList = (uuids: EventId[]) => {
+    if (getWSConnection()) {
+      return centrifuge.rpc(`delete:api/events`, { uuids })
+    }
+
+    return deleteList(uuids);
+  }
+
   const deleteEventsByType = (type: EventType) => {
     if (getWSConnection()) {
       return centrifuge.rpc(`delete:api/events`, {type})
@@ -98,6 +107,7 @@ export const useApiTransport = () => {
     getEvent: getSingle,
     deleteEvent,
     deleteEventsAll,
+    deleteEventsList,
     deleteEventsByType,
     rayStopExecution,
     rayContinueExecution,

src/shared/types/events.ts

@@ -28,7 +28,7 @@ export interface ServerEvent<T> {
 
 export interface NormalizedEvent<T> {
   id: EventId,
-  type: EventType | string,
+  type: EventType,
   labels: string[],
   origin: object | null,
   serverName: string,

src/shared/types/local-storage.ts

@@ -1,6 +1,7 @@
 
 export enum LOCAL_STORAGE_KEYS {
   CACHED_EVENTS = "cached_events",
+  LOCKED_EVENTS = "locked_events",
   THEME = "theme",
   NAVBAR = "navbar",
 }

src/shared/ui/preview-card/preview-card-header.vue

@@ -9,6 +9,7 @@ type Props = {
   eventUrl: string;
   tags: string[];
   isOpen: boolean;
+  isLocked: boolean;
   isVisibleControls: boolean;
 };
 
@@ -17,6 +18,7 @@ type Emits = {
   toggleView: [value: boolean];
   copy: [value: boolean];
   download: [value: boolean];
+  lock: [value: boolean];
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,18 +32,22 @@ const changeView = () => {
   emit("toggleView", true);
 };
 
-const onDeleteButtonClick = () => {
+const deleteEvent = () => {
   emit("delete", true);
 };
 
-const onCopyButtonRightClick = () => {
+const copyEvent = () => {
   emit("copy", true);
 };
 
-const onCopyButtonClick = () => {
+const downloadEvent = () => {
   emit("download", true);
 };
 
+const lockEvent = () => {
+  emit("lock", true);
+};
+
 const isVisibleTags = computed(() => props.tags.length > 0);
 </script>
 
@@ -73,8 +79,8 @@ const isVisibleTags = computed(() => props.tags.length > 0);
     <div v-if="isVisibleControls" class="preview-card-header__container">
       <button
         class="preview-card-header__button preview-card-header__button--copy"
-        @click="onCopyButtonClick"
-        @click.right.prevent="onCopyButtonRightClick"
+        @click="downloadEvent"
+        @click.right.prevent="copyEvent"
       >
         <IconSvg name="copy" class="preview-card-header__button-icon" />
       </button>
@@ -98,10 +104,21 @@ const isVisibleTags = computed(() => props.tags.length > 0);
 
       <button
         class="preview-card-header__button preview-card-header__button--delete"
-        @click="onDeleteButtonClick"
+        :disabled="isLocked"
+        @click="deleteEvent"
       >
         <IconSvg name="times" class="preview-card-header__button-icon" />
       </button>
+
+      <button
+        class="preview-card-header__button preview-card-header__button--lock"
+        :class="{
+          'preview-card-header__button--locked': isLocked,
+        }"
+        @click="lockEvent"
+      >
+        <IconSvg name="lock" class="preview-card-header__button-icon" />
+      </button>
     </div>
   </div>
 </template>
@@ -177,6 +194,10 @@ $eventTypeColorsMap: (
       @apply bg-#{$color}-600 ring-#{$color}-300;
     }
   }
+
+  &:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
 }
 
 .preview-card-header__button--collapse {
@@ -191,7 +212,19 @@ $eventTypeColorsMap: (
   @apply text-red-700 bg-white dark:bg-red-700 hover:bg-red-700 hover:text-white;
 }
 
+.preview-card-header__button--lock {
+  @apply text-gray-700 dark:bg-gray-400 bg-gray-200 hover:bg-green-700 hover:text-white;
+}
+
+.preview-card-header__button--locked {
+  @apply text-white dark:text-white bg-green-700 dark:bg-green-700 ring-2 ring-green-700 hover:bg-green-800 dark:hover:bg-green-500;
+}
+
 .preview-card-header__button-icon {
   @apply p-1 dark:fill-white;
+
+  .preview-card-header__button--lock & {
+    @apply p-0.5;
+  }
 }
 </style>

src/shared/ui/preview-card/preview-card.vue

@@ -17,7 +17,12 @@ type Props = {
 
 const props = defineProps<Props>();
 
+const {
+  $lockedIds: { items },
+} = useNuxtApp();
+
 const isCollapsed = ref(false);
+const isLocked = ref((items || []).value.includes(props.event.id));
 const isOptimized = ref(false);
 const isVisibleControls = ref(true);
 
@@ -54,6 +59,20 @@ const deleteEvent = () => {
   return $events?.removeById(props.event.id);
 };
 
+const toggleEventLock = () => {
+  const { $lockedIds } = useNuxtApp();
+
+  if (($lockedIds?.items.value || []).includes(props.event.id)) {
+    $lockedIds?.remove(props.event.id);
+
+    isLocked.value = false;
+  } else {
+    $lockedIds?.add(props.event.id);
+
+    isLocked.value = true;
+  }
+};
+
 const downloadImage = () => {
   changeVisibleControls(false);
 
@@ -129,11 +148,13 @@ onBeforeUnmount(() => {
       :event-id="event.id"
       :tags="normalizedTags"
       :is-open="!isCollapsed && !isOptimized"
+      :is-locked="isLocked"
       :is-visible-controls="isVisibleControls && !isOptimized"
       @toggle-view="toggleView"
       @delete="deleteEvent"
       @copy="copyCode"
       @download="downloadImage"
+      @lock="toggleEventLock"
     />
 
     <div

stores/cached-ids.ts

@@ -61,15 +61,18 @@ export const useCachedIdsStore = defineStore("useCachedIdsStore", {
       this.cachedIds[type].length = 0;
       syncLocalStorage(this.cachedIds);
     },
-    removeById(eventUuid: EventId) {
+    removeByIds(uuids: EventId[]) {
       this.cachedTypesList.forEach((type) => {
         this.cachedIds[type] = this.cachedIds[type].filter(
-          (uuid: EventId) => uuid !== eventUuid
+          (uuid: EventId) => uuids.includes(uuid)
         );
       });
 
       syncLocalStorage(this.cachedIds);
     },
+    removeById(eventUuid: EventId) {
+      this.removeByIds([eventUuid]);
+    },
     removeAll() {
       this.cachedIds = initialCachedIds;
       syncLocalStorage(this.cachedIds);