From 3d440303930127fda4db02fa248703d6293298b3 Mon Sep 17 00:00:00 2001 From: roble Date: Tue, 14 Apr 2026 19:49:49 +0100 Subject: [PATCH] refactor: improve code readability by reformatting and organizing imports and function structures --- resources/js/pages/Index.vue | 259 +++++++++++++++++++++++++---------- 1 file changed, 186 insertions(+), 73 deletions(-) diff --git a/resources/js/pages/Index.vue b/resources/js/pages/Index.vue index 685d97c..22970d8 100644 --- a/resources/js/pages/Index.vue +++ b/resources/js/pages/Index.vue @@ -17,10 +17,10 @@ import { toast } from 'vue-sonner'; import type { RoadmapItem } from '../types'; -import IconAltArrowDownBold from '~icons/solar/alt-arrow-down-bold'; -import IconAltArrowUpBold from '~icons/solar/alt-arrow-up-bold'; import IconMap from '~icons/heroicons/map'; import IconPlus from '~icons/heroicons/plus'; +import IconAltArrowDownBold from '~icons/solar/alt-arrow-down-bold'; +import IconAltArrowUpBold from '~icons/solar/alt-arrow-up-bold'; const props = defineProps<{ items: RoadmapItem[]; @@ -45,36 +45,47 @@ const STATUS_CONFIG = [ // ── Sorting ────────────────────────────────────────────────────────────────── function changeSort(value: string) { - router.get(route('roadmap.index'), { sort: value }, { - preserveState: true, - replace: true, - }); + router.get( + route('roadmap.index'), + { sort: value }, + { + preserveState: true, + replace: true, + }, + ); } // ── Optimistic local state ──────────────────────────────────────────────────── -const localItems = ref(props.items.map(i => ({ ...i }))); - -watch(() => props.items, newItems => { - localItems.value = newItems.map(i => ({ ...i })); -}, { deep: true }); +const localItems = ref(props.items.map((i) => ({ ...i }))); + +watch( + () => props.items, + (newItems) => { + localItems.value = newItems.map((i) => ({ ...i })); + }, + { deep: true }, +); // ── Status grouping ─────────────────────────────────────────────────────────── const groups = computed(() => - STATUS_CONFIG - .map(({ value, label }) => ({ - status: value, - label, - items: localItems.value - .filter(i => i.status === value) - .sort((a, b) => props.sort === 'top' ? b.net_score - a.net_score : 0), - })) - .filter(g => g.items.length > 0), + STATUS_CONFIG.map(({ value, label }) => ({ + status: value, + label, + items: localItems.value + .filter((i) => i.status === value) + .sort((a, b) => + props.sort === 'top' ? b.net_score - a.net_score : 0, + ), + })).filter((g) => g.items.length > 0), ); // ── Vote class helpers ──────────────────────────────────────────────────────── function buttonClass(userVote: 'up' | 'down' | null, type: 'up' | 'down') { - if (userVote !== type) return 'text-muted-foreground hover:bg-muted hover:text-foreground'; - return type === 'up' ? 'bg-secondary text-white' : 'bg-destructive text-destructive-foreground'; + if (userVote !== type) + return 'text-muted-foreground hover:bg-muted hover:text-foreground'; + return type === 'up' + ? 'bg-secondary text-white' + : 'bg-destructive text-destructive-foreground'; } function scoreClass(vote: 'up' | 'down' | null) { @@ -86,12 +97,17 @@ function scoreClass(vote: 'up' | 'down' | null) { // ── Voting ──────────────────────────────────────────────────────────────────── function showVoteToast(currentVote: 'up' | 'down' | null, type: 'up' | 'down') { if (currentVote === type) return toast.info(trans('Vote removed')); - if (currentVote === null) return type === 'up' ? toast.success(trans('Upvoted!')) : toast.info(trans('Downvoted')); - return type === 'up' ? toast.success(trans('Changed to upvote')) : toast.info(trans('Changed to downvote')); + if (currentVote === null) + return type === 'up' + ? toast.success(trans('Upvoted!')) + : toast.info(trans('Downvoted')); + return type === 'up' + ? toast.success(trans('Changed to upvote')) + : toast.info(trans('Changed to downvote')); } function vote(item: RoadmapItem, type: 'up' | 'down') { - const local = localItems.value.find(i => i.id === item.id); + const local = localItems.value.find((i) => i.id === item.id); if (!local) return; const currentVote = local.user_vote; @@ -103,20 +119,25 @@ function vote(item: RoadmapItem, type: 'up' | 'down') { local.user_vote = null; local.net_score -= delta; } else { - if (currentVote !== null) local.net_score -= currentVote === 'up' ? 1 : -1; + if (currentVote !== null) + local.net_score -= currentVote === 'up' ? 1 : -1; local.net_score += delta; local.user_vote = type; } - router.post(route('roadmap.vote', item.id), { type }, { - preserveScroll: true, - only: ['items'], - onSuccess: () => showVoteToast(currentVote, type), - onError: () => { - local.net_score = originalScore; - local.user_vote = currentVote; + router.post( + route('roadmap.vote', item.id), + { type }, + { + preserveScroll: true, + only: ['items'], + onSuccess: () => showVoteToast(currentVote, type), + onError: () => { + local.net_score = originalScore; + local.user_vote = currentVote; + }, }, - }); + ); } // ── Suggestion dialog ───────────────────────────────────────────────────────── @@ -129,7 +150,10 @@ const form = useForm({ }); // ── Badge variant ───────────────────────────────────────────────────────────── -const colorToVariant: Record = { +const colorToVariant: Record< + string, + 'default' | 'destructive' | 'secondary' | 'outline' +> = { primary: 'default', secondary: 'secondary', danger: 'destructive', @@ -139,8 +163,10 @@ const colorToVariant: Record t.value === item.type); +function typeBadgeVariant( + item: RoadmapItem, +): 'default' | 'destructive' | 'secondary' | 'outline' { + const found = props.types.find((t) => t.value === item.type); return colorToVariant[found?.color ?? 'primary'] ?? 'default'; } @@ -172,30 +198,46 @@ function formatDate(dateStr: string): string {
- -
+
-

{{ $t('Product Roadmap') }}

+

+ {{ $t('Product Roadmap') }} +

- {{ $t('Vote on features and suggest new ideas.') }} + {{ + $t( + 'Vote on features and suggest new ideas.', + ) + }}

-
-
- {{ $t('Sort:') }} +
+ {{ + $t('Sort:') + }}
-
+
-

+

{{ $t(group.label) }} - ({{ group.items.length }}) + ({{ group.items.length }})

- +
{{ item.net_score }}
-
-

+

+

{{ item.title }}

{{ item.description }}

-

- {{ $t('Created on') }} {{ formatDate(item.created_at) }} +

+ {{ $t('Created on') }} + {{ formatDate(item.created_at) }}

-
@@ -303,14 +377,20 @@ function formatDate(dateStr: string): string { {{ $t('Submit feedback') }} - {{ $t('We review all submissions before publishing them to the roadmap.') }} + {{ + $t( + 'We review all submissions before publishing them to the roadmap.', + ) + }}
- +