From 3910c71ab7e102d4d4561e57c4729825185f3253 Mon Sep 17 00:00:00 2001 From: Kuchuk Andrey Date: Tue, 5 Dec 2023 23:38:05 +0400 Subject: [PATCH 1/3] [#83] lock events stabilisation --- plugins/events.client.ts | 15 ++------------- .../lib/use-api-transport/use-api-transport.ts | 8 ++++++++ src/widgets/ui/page-header/page-header.vue | 6 +++--- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/plugins/events.client.ts b/plugins/events.client.ts index 819dec89..efbc28dc 100644 --- a/plugins/events.client.ts +++ b/plugins/events.client.ts @@ -19,7 +19,6 @@ export default defineNuxtPlugin(() => { } = storeToRefs(eventsStore) const { - deleteEvent, deleteEventsAll, deleteEventsList, deleteEventsByType, @@ -31,17 +30,6 @@ export default defineNuxtPlugin(() => { } = 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) { @@ -49,6 +37,7 @@ export default defineNuxtPlugin(() => { cachedIdsStore.removeByIds(uuids); } } + const removeAll = async () => { if (lockedIds.value.length) { const removedIds = events.value @@ -75,7 +64,7 @@ export default defineNuxtPlugin(() => { const removeByType = async (eventType: EventType) => { if (lockedIds.value.length) { const removedIds = events.value - .filter(({ type, uuid }) => type !== eventType || lockedIds.value.includes(uuid)) + .filter(({ type, uuid }) => type === eventType && !lockedIds.value.includes(uuid)) .map(({ uuid }) => uuid) await removeList(removedIds) diff --git a/src/shared/lib/use-api-transport/use-api-transport.ts b/src/shared/lib/use-api-transport/use-api-transport.ts index d995e392..b0a1720c 100644 --- a/src/shared/lib/use-api-transport/use-api-transport.ts +++ b/src/shared/lib/use-api-transport/use-api-transport.ts @@ -75,6 +75,14 @@ export const useApiTransport = () => { } const deleteEventsList = (uuids: EventId[]) => { + if (!uuids.length) { + return Promise.resolve(); + } + + if (uuids.length === 1) { + return deleteEvent(uuids[0]); + } + if (getWSConnection()) { return centrifuge.rpc(`delete:api/events`, { uuids }) } diff --git a/src/widgets/ui/page-header/page-header.vue b/src/widgets/ui/page-header/page-header.vue index 651b9a24..71295ebc 100644 --- a/src/widgets/ui/page-header/page-header.vue +++ b/src/widgets/ui/page-header/page-header.vue @@ -10,14 +10,14 @@ type Emits = { delete: [value: boolean]; }; -const props = withDefaults(defineProps(), { +withDefaults(defineProps(), { title: "", buttonTitle: "", }); const emit = defineEmits(); -const buttonClick = () => { +const clearEvents = () => { emit("delete", true); }; @@ -32,7 +32,7 @@ const buttonClick = () => { From 0fb1ad010bc3bbcd58b43b38edea6aeeb08ec6fc Mon Sep 17 00:00:00 2001 From: Kuchuk Andrey Date: Wed, 6 Dec 2023 00:29:35 +0400 Subject: [PATCH 2/3] [#83] polish styles for event actions --- .../ui/preview-card/preview-card-header.vue | 71 +++++++++---------- 1 file changed, 34 insertions(+), 37 deletions(-) diff --git a/src/shared/ui/preview-card/preview-card-header.vue b/src/shared/ui/preview-card/preview-card-header.vue index 599d0c01..c35b5e7e 100644 --- a/src/shared/ui/preview-card/preview-card-header.vue +++ b/src/shared/ui/preview-card/preview-card-header.vue @@ -58,7 +58,7 @@ const isVisibleTags = computed(() => props.tags.length > 0); v-if="eventUrl" :href="eventUrl" target="_blank" - class="preview-card-header__tag preview-card-header__button--json" + class="preview-card-header__tag preview-card-header__tag--json" > JSON @@ -87,7 +87,7 @@ const isVisibleTags = computed(() => props.tags.length > 0); - - + + @@ -174,50 +174,47 @@ $eventTypeColorsMap: ( } } -.preview-card-header__button { - @apply w-5 h-5 md:w-4 md:h-4 rounded-full opacity-90 hover:opacity-100 transition-all hover:ring-4 ring-offset-1; - /* Applied tailwind classes depends on event type - Need to keep declaration for tailwind correct work: - 'var-dump' 'bg-red-600 ring-red-300', - 'Smtp' 'bg-orange-600 ring-orange-300', - 'Sentry' 'bg-pink-600 ring-pink-300', - 'profiler' 'bg-purple-600 ring-purple-300', - 'monolog' 'bg-gray-600 ring-gray-300', - 'inspector' 'bg-gray-600 ring-gray-300', - 'ray' 'bg-gray-600 ring-gray-300' */ - - @each $map in $eventTypeColorsMap { - $name: nth($map, 1); - $color: nth($map, 2); +.preview-card-header__tag--json { + @apply bg-blue-600 text-blue-50 border-blue-600; - &--#{$name} { - @apply bg-#{$color}-600 ring-#{$color}-300; - } + &:hover { + @apply bg-blue-500 dark:bg-blue-500; } +} - &:disabled { - @apply opacity-50 cursor-not-allowed; - } +.preview-card-header__button { + @apply w-5 h-5 md:w-4 md:h-4 rounded-full opacity-90 hover:opacity-100 transition-all hover:ring-4 ring-offset-1; + @apply text-white bg-gray-300 dark:bg-gray-600 ring-blue-200 dark:ring-blue-800; +} + +.preview-card-header__button--copy { + @apply text-gray-800 dark:text-white bg-transparent dark:bg-transparent; } .preview-card-header__button--collapse { - @apply text-white bg-gray-600 ring-gray-300; + &:hover { + @apply text-white bg-gray-500; + } } -.preview-card-header__button--json { - @apply text-white ring-gray-300 bg-blue-700 hover:bg-blue-500; +.preview-card-header__button--collapse-closed { + @apply text-white bg-blue-700 ring-blue-300 dark:bg-blue-700; } .preview-card-header__button--delete { - @apply text-red-700 bg-white dark:bg-red-700 hover:bg-red-700 hover:text-white; + @apply text-white dark:text-white bg-red-700 dark:bg-red-700 ring-red-200 dark:ring-red-800; + + &:disabled { + @apply opacity-50 pointer-events-none; + } } .preview-card-header__button--lock { - @apply text-gray-700 dark:bg-gray-400 bg-gray-200 hover:bg-green-700 hover:text-white; + @apply hover:bg-green-700 hover:dark:bg-green-700; } .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; + @apply text-white dark:text-white bg-green-700 dark:bg-green-700 ring-2 ring-green-700 dark:ring-green-700 hover:bg-green-800 dark:hover:bg-green-500; } .preview-card-header__button-icon { From 7d9168ff0a271bde2f2bf94e9439d824dd476edb Mon Sep 17 00:00:00 2001 From: Kuchuk Andrey Date: Wed, 6 Dec 2023 00:37:22 +0400 Subject: [PATCH 3/3] [#83] polish preview-card collps button styles --- src/shared/ui/preview-card/preview-card-header.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui/preview-card/preview-card-header.vue b/src/shared/ui/preview-card/preview-card-header.vue index c35b5e7e..bb8d0168 100644 --- a/src/shared/ui/preview-card/preview-card-header.vue +++ b/src/shared/ui/preview-card/preview-card-header.vue @@ -198,7 +198,7 @@ $eventTypeColorsMap: ( } .preview-card-header__button--collapse-closed { - @apply text-white bg-blue-700 ring-blue-300 dark:bg-blue-700; + @apply text-white bg-blue-700 ring-blue-300 dark:bg-blue-700 hover:bg-blue-700; } .preview-card-header__button--delete {