Skip to content

Commit 99f4895

Browse files
arabcodersarabcoders
committed
refactor: improve events listing in history page.
1 parent f860653 commit 99f4895

2 files changed

Lines changed: 72 additions & 77 deletions

File tree

‎frontend/app/pages/auth.vue‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -131,30 +131,27 @@
131131
</UFormField>
132132

133133
<UFormField label="Password" name="password" required>
134-
<div class="flex items-center gap-2">
135-
<UInput
136-
id="user-password"
137-
v-model="user.password"
138-
class="w-full"
139-
:type="form_expose ? 'text' : 'password'"
140-
placeholder="Password"
141-
autocomplete="current-password"
142-
/>
143-
144-
<UButton
145-
type="button"
146-
color="neutral"
147-
variant="outline"
148-
:icon="form_expose ? 'i-lucide-eye-off' : 'i-lucide-eye'"
149-
:aria-label="form_expose ? 'Hide password' : 'Show password'"
150-
class="whitespace-nowrap"
151-
@click="
152-
() => {
153-
form_expose = !form_expose;
154-
}
155-
"
156-
/>
157-
</div>
134+
<UInput
135+
id="user-password"
136+
v-model="user.password"
137+
class="w-full"
138+
:type="form_expose ? 'text' : 'password'"
139+
placeholder="Password"
140+
autocomplete="current-password"
141+
>
142+
<template #trailing>
143+
<UButton
144+
type="button"
145+
color="neutral"
146+
variant="ghost"
147+
square
148+
size="xs"
149+
:icon="form_expose ? 'i-lucide-eye-off' : 'i-lucide-eye'"
150+
:aria-label="form_expose ? 'Hide password' : 'Show password'"
151+
@click="form_expose = !form_expose"
152+
/>
153+
</template>
154+
</UInput>
158155
</UFormField>
159156

160157
<div class="space-y-2 pt-1">

‎frontend/app/pages/history/[id]/index.vue‎

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@
252252
<button
253253
type="button"
254254
class="flex min-w-0 flex-1 items-center gap-3 text-left"
255-
@click="data._toggle = !data._toggle"
255+
@click="showLocalMetadata = !showLocalMetadata"
256256
>
257257
<div class="flex min-w-0 items-center gap-2 text-sm font-semibold text-highlighted">
258258
<UIcon name="i-lucide-database" class="size-4 shrink-0 text-toned" />
@@ -269,20 +269,22 @@
269269
<button
270270
type="button"
271271
class="inline-flex shrink-0 items-center"
272-
:aria-label="data?._toggle ? 'Collapse local metadata' : 'Expand local metadata'"
273-
@click="data._toggle = !data._toggle"
272+
:aria-label="
273+
showLocalMetadata ? 'Collapse local metadata' : 'Expand local metadata'
274+
"
275+
@click="showLocalMetadata = !showLocalMetadata"
274276
>
275277
<UIcon
276278
name="i-lucide-chevron-right"
277279
:class="[
278280
'size-4 text-toned transition-transform',
279-
data?._toggle ? 'rotate-90' : '',
281+
showLocalMetadata ? 'rotate-90' : '',
280282
]"
281283
/>
282284
</button>
283285
</div>
284286

285-
<div v-if="data?._toggle" class="space-y-5 text-sm leading-6 text-default">
287+
<div v-if="showLocalMetadata" class="space-y-5 text-sm leading-6 text-default">
286288
<div class="grid grid-cols-2 gap-3">
287289
<div
288290
class="rounded-md border border-default bg-elevated/40 px-3 py-2.5 text-sm text-default"
@@ -1574,51 +1576,52 @@
15741576
variant="soft"
15751577
title="No related events"
15761578
/>
1577-
<div v-else-if="relatedLoaded" class="grid gap-4 xl:grid-cols-2">
1578-
<UCard
1579+
<div
1580+
v-else-if="relatedLoaded"
1581+
class="overflow-hidden rounded-lg border border-default/70 bg-elevated/30 shadow-sm"
1582+
>
1583+
<article
15791584
v-for="event in related.events"
15801585
:key="event.id"
1581-
class="h-full shadow-sm"
1582-
:ui="eventCardUi"
1586+
class="flex items-center justify-between gap-2 border-b border-default/50 px-3 py-2 last:border-b-0 hover:bg-elevated/60"
15831587
>
1584-
<template #header>
1585-
<div class="flex items-start justify-between gap-3">
1586-
<button
1587-
type="button"
1588-
class="min-w-0 truncate text-left text-base font-semibold text-highlighted hover:text-primary"
1589-
@click="openEvent(event.id)"
1590-
>
1591-
{{ event.name }}
1592-
</button>
1588+
<div class="flex min-w-0 flex-1 items-center gap-2">
1589+
<span
1590+
class="inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-default bg-elevated/70 text-primary"
1591+
>
1592+
<UIcon name="i-lucide-activity" class="size-3.5" />
1593+
</span>
15931594

1594-
<UBadge :color="getEventStatusColor(event.status)" variant="soft">
1595-
<span class="inline-flex items-center gap-1">
1596-
<UIcon
1597-
:name="getEventStatusIcon(event.status)"
1598-
:class="getEventStatusIconClass(event.status)"
1599-
/>
1600-
<span>{{ event.status_name }}</span>
1601-
</span>
1602-
</UBadge>
1603-
</div>
1604-
</template>
1595+
<button
1596+
type="button"
1597+
class="min-w-0 truncate text-left text-sm font-semibold text-highlighted hover:text-primary"
1598+
:title="event.name"
1599+
@click="openEvent(event.id)"
1600+
>
1601+
{{ event.name }}
1602+
</button>
1603+
</div>
16051604

1606-
<div class="rounded-md border border-default bg-elevated/20 px-3 py-3">
1607-
<div class="flex items-center justify-between gap-3 text-sm">
1608-
<span class="inline-flex items-center gap-2 text-xs font-medium text-toned">
1609-
<UIcon name="i-lucide-calendar" class="size-4" />
1610-
<span>Created</span>
1605+
<div class="flex shrink-0 items-center gap-2">
1606+
<UBadge :color="getEventStatusColor(event.status)" variant="soft" size="sm">
1607+
<span class="inline-flex items-center gap-1">
1608+
<UIcon
1609+
:name="getEventStatusIcon(event.status)"
1610+
:class="getEventStatusIconClass(event.status)"
1611+
/>
1612+
<span>{{ event.status_name }}</span>
16111613
</span>
1612-
<UTooltip
1613-
:text="`Created at: ${moment(event.timestamp).format(TOOLTIP_DATE_FORMAT)}`"
1614-
>
1615-
<span class="cursor-help text-default">{{
1616-
moment(event.timestamp).fromNow()
1617-
}}</span>
1618-
</UTooltip>
1619-
</div>
1614+
</UBadge>
1615+
1616+
<UTooltip
1617+
:text="`Created at: ${moment(event.timestamp).format(TOOLTIP_DATE_FORMAT)}`"
1618+
>
1619+
<span class="cursor-help whitespace-nowrap text-xs text-toned">
1620+
{{ moment(event.timestamp).fromNow() }}
1621+
</span>
1622+
</UTooltip>
16201623
</div>
1621-
</UCard>
1624+
</article>
16221625
</div>
16231626
</div>
16241627
</section>
@@ -1789,7 +1792,6 @@ type HistoryViewItem = {
17891792
progress?: number | string;
17901793
files: Array<MediaFile>;
17911794
duplicate_reference_ids?: Array<number>;
1792-
_toggle?: boolean;
17931795
};
17941796
17951797
type ValidationResponse = Record<string, { status: boolean; message: string }>;
@@ -1861,6 +1863,8 @@ const pageShell = requireTopLevelPageShell('history');
18611863
useHead({ title: `History : ${id}` });
18621864
18631865
const show_page_tips = useStorage('show_page_tips', true);
1866+
const showLocalMetadata = useStorage<boolean>('history_local_metadata_open', true);
1867+
const showComparison = useStorage<boolean>('history_comparison_open', true);
18641868
const breakpoints = useBreakpoints({ mobile: 0, desktop: 640 });
18651869
const dialog = useDialog();
18661870
const {
@@ -1876,11 +1880,6 @@ const detailCardUi = {
18761880
body: 'px-4 pb-4 pt-0',
18771881
};
18781882
1879-
const eventCardUi = {
1880-
header: 'p-4',
1881-
body: 'px-4 pb-4 pt-0',
1882-
};
1883-
18841883
const eventViewModalUi = {
18851884
content: 'max-w-5xl',
18861885
body: 'p-4 sm:p-5',
@@ -1897,7 +1896,6 @@ const isLoading = ref(true);
18971896
const showRawData = ref(false);
18981897
const playbackModalOpen = ref(false);
18991898
const isDeleting = ref(false);
1900-
const showComparison = ref(true);
19011899
const comparisonExpanded = ref<Record<string, boolean>>({});
19021900
const expandLocalId = ref(false);
19031901
const expandLocalTitle = ref(false);
@@ -2401,7 +2399,7 @@ const summaryBadges = computed<Array<SummaryBadge>>(() => {
24012399
const rawData = computed<string>(() => {
24022400
const dataRecord = data.value as unknown as JsonObject;
24032401
const cleaned = Object.keys(dataRecord)
2404-
.filter((key) => !['files', 'hardware', 'content_exists', '_toggle'].includes(key))
2402+
.filter((key) => !['files', 'hardware', 'content_exists'].includes(key))
24052403
.reduce((obj: JsonObject, key: string) => {
24062404
obj[key] = dataRecord[key] ?? null;
24072405
return obj;
@@ -2535,7 +2533,7 @@ const loadContent = async (historyId: number) => {
25352533
}
25362534
25372535
isLoading.value = false;
2538-
data.value = { ...json, _toggle: true };
2536+
data.value = { ...json };
25392537
25402538
useHead({ title: `History : ${historyTitle.value}` });
25412539
await loadImage();
@@ -2737,7 +2735,7 @@ const toggleWatched = async () => {
27372735
return;
27382736
}
27392737
2740-
data.value = { ...json, _toggle: data.value._toggle };
2738+
data.value = { ...json };
27412739
27422740
notification(
27432741
'success',

0 commit comments

Comments
 (0)