Skip to content

Commit c0f4c5f

Browse files
wyMinLwinwyMinLwin
authored
Merge pull request #87 from wyMinLwin/modular-refactor-vue
refactor: Refactor vue template codebase into more modular way
2 parents d8d9735 + 19b6fab commit c0f4c5f

21 files changed

+1039
-699
lines changed

‎packages/create-scaffa/templates/vue/src/modules/dashboard/DashboardView.vue‎

Lines changed: 6 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -6,126 +6,18 @@
66
<p class="text-muted-foreground">Welcome to your dashboard overview</p>
77
</div>
88

9-
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
10-
<Card>
11-
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
12-
<CardTitle class="text-sm font-medium">Total Products</CardTitle>
13-
<Package class="h-4 w-4 text-muted-foreground" />
14-
</CardHeader>
15-
<CardContent>
16-
<div class="text-2xl font-bold">{{ data?.length || 0 }}</div>
17-
<p class="text-xs text-muted-foreground">+20.1% from last month</p>
18-
</CardContent>
19-
</Card>
20-
21-
<Card>
22-
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
23-
<CardTitle class="text-sm font-medium">Active Users</CardTitle>
24-
<Users class="h-4 w-4 text-muted-foreground" />
25-
</CardHeader>
26-
<CardContent>
27-
<div class="text-2xl font-bold">+2350</div>
28-
<p class="text-xs text-muted-foreground">+180.1% from last month</p>
29-
</CardContent>
30-
</Card>
31-
32-
<Card>
33-
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
34-
<CardTitle class="text-sm font-medium">Sales</CardTitle>
35-
<CreditCard class="h-4 w-4 text-muted-foreground" />
36-
</CardHeader>
37-
<CardContent>
38-
<div class="text-2xl font-bold">+12,234</div>
39-
<p class="text-xs text-muted-foreground">+19% from last month</p>
40-
</CardContent>
41-
</Card>
42-
43-
<Card>
44-
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
45-
<CardTitle class="text-sm font-medium">Active Now</CardTitle>
46-
<Activity class="h-4 w-4 text-muted-foreground" />
47-
</CardHeader>
48-
<CardContent>
49-
<div class="text-2xl font-bold">+573</div>
50-
<p class="text-xs text-muted-foreground">+201 since last hour</p>
51-
</CardContent>
52-
</Card>
53-
</div>
9+
<StatsCards />
5410

5511
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
56-
<Card class="col-span-4">
57-
<CardHeader>
58-
<CardTitle>Recent Products</CardTitle>
59-
<CardDescription>You have {{ data?.length || 0 }} products in total.</CardDescription>
60-
</CardHeader>
61-
<CardContent>
62-
<div v-if="isLoading" class="space-y-2">
63-
<Skeleton class="h-4 w-full" />
64-
<Skeleton class="h-4 w-full" />
65-
<Skeleton class="h-4 w-full" />
66-
</div>
67-
<div v-else class="space-y-4">
68-
<div v-for="product in data?.slice(0, 5)" :key="product.id" class="flex items-center">
69-
<Avatar class="h-9 w-9">
70-
<AvatarImage :src="getProductImage(product)" :alt="product.title" />
71-
<AvatarFallback>{{ product.title.charAt(0).toUpperCase() }}</AvatarFallback>
72-
</Avatar>
73-
<div class="ml-4 space-y-1">
74-
<p class="text-sm font-medium leading-none">{{ product.title }}</p>
75-
<p class="text-sm text-muted-foreground">{{ product.category }}</p>
76-
</div>
77-
<div class="ml-auto font-medium">
78-
<Badge variant="secondary">${{ product.price }}</Badge>
79-
</div>
80-
</div>
81-
</div>
82-
</CardContent>
83-
</Card>
84-
85-
<Card class="col-span-3">
86-
<CardHeader>
87-
<CardTitle>Recent Activity</CardTitle>
88-
<CardDescription>Your recent activities and updates.</CardDescription>
89-
</CardHeader>
90-
<CardContent>
91-
<div class="space-y-4">
92-
<div class="flex items-center">
93-
<span class="flex h-2 w-2 rounded-full bg-sky-500"></span>
94-
<div class="ml-4 space-y-1">
95-
<p class="text-sm font-medium leading-none">Product added</p>
96-
<p class="text-sm text-muted-foreground">2 minutes ago</p>
97-
</div>
98-
</div>
99-
<div class="flex items-center">
100-
<span class="flex h-2 w-2 rounded-full bg-green-500"></span>
101-
<div class="ml-4 space-y-1">
102-
<p class="text-sm font-medium leading-none">User registered</p>
103-
<p class="text-sm text-muted-foreground">5 minutes ago</p>
104-
</div>
105-
</div>
106-
<div class="flex items-center">
107-
<span class="flex h-2 w-2 rounded-full bg-orange-500"></span>
108-
<div class="ml-4 space-y-1">
109-
<p class="text-sm font-medium leading-none">Order processed</p>
110-
<p class="text-sm text-muted-foreground">12 minutes ago</p>
111-
</div>
112-
</div>
113-
</div>
114-
</CardContent>
115-
</Card>
12+
<RecentProducts />
13+
<RecentActivity />
11614
</div>
11715
</div>
11816
</div>
11917
</template>
12018

12119
<script setup lang="ts">
122-
import api from '@/api'
123-
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
124-
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
125-
import { Badge } from '@/components/ui/badge'
126-
import { Skeleton } from '@/components/ui/skeleton'
127-
import { Package, Users, CreditCard, Activity } from 'lucide-vue-next'
128-
import { getProductImage } from '@/lib/images'
129-
130-
const { data, isLoading } = api.products.getProducts.useQuery()
20+
import StatsCards from './chunks/StatsCards.vue'
21+
import RecentProducts from './chunks/RecentProducts.vue'
22+
import RecentActivity from './chunks/RecentActivity.vue'
13123
</script>

‎packages/create-scaffa/templates/vue/src/modules/dashboard/chunks/RecentActivity.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<Card class="col-span-3">
3+
<CardHeader>
4+
<CardTitle>Recent Activity</CardTitle>
5+
<CardDescription>Your recent activities and updates.</CardDescription>
6+
</CardHeader>
7+
<CardContent>
8+
<div class="space-y-4">
9+
<div class="flex items-center">
10+
<span class="flex h-2 w-2 rounded-full bg-sky-500"></span>
11+
<div class="ml-4 space-y-1">
12+
<p class="text-sm font-medium leading-none">Product added</p>
13+
<p class="text-sm text-muted-foreground">2 minutes ago</p>
14+
</div>
15+
</div>
16+
<div class="flex items-center">
17+
<span class="flex h-2 w-2 rounded-full bg-green-500"></span>
18+
<div class="ml-4 space-y-1">
19+
<p class="text-sm font-medium leading-none">User registered</p>
20+
<p class="text-sm text-muted-foreground">5 minutes ago</p>
21+
</div>
22+
</div>
23+
<div class="flex items-center">
24+
<span class="flex h-2 w-2 rounded-full bg-orange-500"></span>
25+
<div class="ml-4 space-y-1">
26+
<p class="text-sm font-medium leading-none">Order processed</p>
27+
<p class="text-sm text-muted-foreground">12 minutes ago</p>
28+
</div>
29+
</div>
30+
</div>
31+
</CardContent>
32+
</Card>
33+
</template>
34+
35+
<script setup lang="ts">
36+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
37+
</script>

‎packages/create-scaffa/templates/vue/src/modules/dashboard/chunks/RecentProducts.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<Card class="col-span-4">
3+
<CardHeader>
4+
<CardTitle>Recent Products</CardTitle>
5+
<CardDescription>You have {{ data?.length || 0 }} products in total.</CardDescription>
6+
</CardHeader>
7+
<CardContent>
8+
<div v-if="isLoading" class="space-y-2">
9+
<Skeleton class="h-4 w-full" />
10+
<Skeleton class="h-4 w-full" />
11+
<Skeleton class="h-4 w-full" />
12+
</div>
13+
<div v-else class="space-y-4">
14+
<div v-for="product in data?.slice(0, 5)" :key="product.id" class="flex items-center">
15+
<Avatar class="h-9 w-9">
16+
<AvatarImage :src="getProductImage(product)" :alt="product.title" />
17+
<AvatarFallback>{{ product.title.charAt(0).toUpperCase() }}</AvatarFallback>
18+
</Avatar>
19+
<div class="ml-4 space-y-1">
20+
<p class="text-sm font-medium leading-none">{{ product.title }}</p>
21+
<p class="text-sm text-muted-foreground">{{ product.category }}</p>
22+
</div>
23+
<div class="ml-auto font-medium">
24+
<Badge variant="secondary">${{ product.price }}</Badge>
25+
</div>
26+
</div>
27+
</div>
28+
</CardContent>
29+
</Card>
30+
</template>
31+
32+
<script setup lang="ts">
33+
import api from '@/api'
34+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
35+
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
36+
import { Badge } from '@/components/ui/badge'
37+
import { Skeleton } from '@/components/ui/skeleton'
38+
import { getProductImage } from '@/lib/images'
39+
40+
const { data, isLoading } = api.products.getProducts.useQuery()
41+
</script>

‎packages/create-scaffa/templates/vue/src/modules/dashboard/chunks/StatsCards.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
3+
<Card>
4+
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
5+
<CardTitle class="text-sm font-medium">Total Products</CardTitle>
6+
<Package class="h-4 w-4 text-muted-foreground" />
7+
</CardHeader>
8+
<CardContent>
9+
<div class="text-2xl font-bold">{{ data?.length || 0 }}</div>
10+
<p class="text-xs text-muted-foreground">+20.1% from last month</p>
11+
</CardContent>
12+
</Card>
13+
14+
<Card>
15+
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
16+
<CardTitle class="text-sm font-medium">Active Users</CardTitle>
17+
<Users class="h-4 w-4 text-muted-foreground" />
18+
</CardHeader>
19+
<CardContent>
20+
<div class="text-2xl font-bold">+2350</div>
21+
<p class="text-xs text-muted-foreground">+180.1% from last month</p>
22+
</CardContent>
23+
</Card>
24+
25+
<Card>
26+
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
27+
<CardTitle class="text-sm font-medium">Sales</CardTitle>
28+
<CreditCard class="h-4 w-4 text-muted-foreground" />
29+
</CardHeader>
30+
<CardContent>
31+
<div class="text-2xl font-bold">+12,234</div>
32+
<p class="text-xs text-muted-foreground">+19% from last month</p>
33+
</CardContent>
34+
</Card>
35+
36+
<Card>
37+
<CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
38+
<CardTitle class="text-sm font-medium">Active Now</CardTitle>
39+
<Activity class="h-4 w-4 text-muted-foreground" />
40+
</CardHeader>
41+
<CardContent>
42+
<div class="text-2xl font-bold">+573</div>
43+
<p class="text-xs text-muted-foreground">+201 since last hour</p>
44+
</CardContent>
45+
</Card>
46+
</div>
47+
</template>
48+
49+
<script setup lang="ts">
50+
import api from '@/api'
51+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
52+
import { Package, Users, CreditCard, Activity } from 'lucide-vue-next'
53+
54+
const { data } = api.products.getProducts.useQuery()
55+
</script>

0 commit comments

Comments
 (0)