Skip to content

Commit

Permalink
Merge pull request #99 from buggregator/issue/#83-lock-events-polishing
Browse files Browse the repository at this point in the history 
Issue/#83 lock events polishing
  • Loading branch information
@butschster
butschster authored Dec 5, 2023
2 parents 0dd4e8d + 7d9168f commit 7eb6b59
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 53 deletions.
15 changes: 2 additions & 13 deletions plugins/events.client.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export default defineNuxtPlugin(() => {
} = storeToRefs(eventsStore)

const {
deleteEvent,
deleteEventsAll,
deleteEventsList,
deleteEventsByType,
Expand All @@ -31,24 +30,14 @@ 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) {
eventsStore.removeByIds(uuids);
cachedIdsStore.removeByIds(uuids);
}
}

const removeAll = async () => {
if (lockedIds.value.length) {
const removedIds = events.value
Expand All @@ -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)
Expand Down
8 changes: 8 additions & 0 deletions src/shared/lib/use-api-transport/use-api-transport.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
}
Expand Down
71 changes: 34 additions & 37 deletions src/shared/ui/preview-card/preview-card-header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
</a>
Expand Down Expand Up @@ -87,7 +87,7 @@ const isVisibleTags = computed(() => props.tags.length > 0);

<button
class="preview-card-header__button preview-card-header__button--collapse"
:class="`preview-card-header__button--${eventType}`"
:class="{ 'preview-card-header__button--collapse-closed': !isOpen }"
@click="changeView"
>
<IconSvg
Expand All @@ -102,14 +102,6 @@ const isVisibleTags = computed(() => props.tags.length > 0);
/>
</button>

<button
class="preview-card-header__button preview-card-header__button--delete"
: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="{
Expand All @@ -119,6 +111,14 @@ const isVisibleTags = computed(() => props.tags.length > 0);
>
<IconSvg name="lock" class="preview-card-header__button-icon" />
</button>

<button
class="preview-card-header__button preview-card-header__button--delete"
:disabled="isLocked"
@click="deleteEvent"
>
<IconSvg name="times" class="preview-card-header__button-icon" />
</button>
</div>
</div>
</template>
Expand Down Expand Up @@ -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 hover: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 {
Expand Down
6 changes: 3 additions & 3 deletions src/widgets/ui/page-header/page-header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ type Emits = {
delete: [value: boolean];
};
const props = withDefaults(defineProps<Props>(), {
withDefaults(defineProps<Props>(), {
title: "",
buttonTitle: "",
});
const emit = defineEmits<Emits>();
const buttonClick = () => {
const clearEvents = () => {
emit("delete", true);
};
</script>
Expand All @@ -32,7 +32,7 @@ const buttonClick = () => {
<button
v-if="buttonTitle"
class="page-header__btn-clear"
@click="buttonClick"
@click="clearEvents"
>
{{ buttonTitle }}
</button>
Expand Down

0 comments on commit 7eb6b59

Please sign in to comment.