Skip to content

Commit 46913d2

Browse files
atnomoverflowatnomoverflow
committed
table with filter
1 parent 55f2312 commit 46913d2

37 files changed

+1332
-20
lines changed

‎package-lock.json

Lines changed: 44 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@heroicons/vue": "^2.0.18",
13+
"@tanstack/vue-table": "^8.13.2",
1314
"@vee-validate/zod": "^4.12.6",
1415
"@vueuse/core": "^10.9.0",
1516
"@vueuse/motion": "^2.1.0",

‎src/components/footer/footer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const onSubmit = handleSubmit(subscribe)
2222
</script>
2323

2424
<template>
25-
<div class="absolute bottom-0 mt-4 w-full p-2 h-72 ">
25+
<div class="absolute bottom-0 mt-4 w-full p-2 h-72">
2626
<div class="container h-full flex flex-col-reverse">
2727

2828
<div class="flex flex-row w-ful py-4">

‎src/components/navbar/main.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import NavUser from "./UserNav.vue"
44
import Command from "./command.vue"
55
import MainNav from "./mainNav.vue";
66
import OrganizationSwitcher from "./OrganizationSwitcher.vue"
7+
import { Icon } from '@iconify/vue'
8+
import { Button } from "../ui/button";
9+
710
</script>
811

912
<template>

‎src/components/navbar/mainNav.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import { Badge } from '@/components/ui/badge'
32
43
</script>
54

‎src/components/table/column.vue

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<script setup lang="ts">
2+
import {
3+
Card,
4+
CardContent,
5+
CardDescription,
6+
CardFooter,
7+
CardHeader,
8+
CardTitle,
9+
} from '@/components/ui/card'
10+
import { Icon } from "@iconify/vue"
11+
import Button from '@/components/ui/button/Button.vue';
12+
import { ref } from 'vue'
13+
import {
14+
Collapsible,
15+
CollapsibleContent,
16+
CollapsibleTrigger,
17+
} from '@/components/ui/collapsible'
18+
19+
import {
20+
DropdownMenu,
21+
DropdownMenuContent,
22+
DropdownMenuItem,
23+
DropdownMenuShortcut,
24+
DropdownMenuTrigger,
25+
} from '@/components/ui/dropdown-menu'
26+
import { Application } from '@/components/table/data/schema';
27+
import { applicationTypes } from '@/components/table/data/data';
28+
29+
interface DataColumnProps {
30+
application: Application
31+
}
32+
const props = defineProps<DataColumnProps>()
33+
const rotated = ref(false)
34+
const isOpen = ref(false)
35+
const Logo = () => {
36+
const type = applicationTypes.find(
37+
(appType) => appType.value === props.application.type
38+
);
39+
return type?.icon
40+
}
41+
</script>
42+
<template>
43+
<Card class="w-full">
44+
<CardHeader class="flex flex-row space-x-4">
45+
<div class="m-auto p-2 text-background bg-foreground rounded-full">
46+
<component :is="Logo" class="w-8 h-8 " />
47+
</div>
48+
<div class="space-y-2 flex-grow">
49+
<CardTitle>{{ props.application.name }}</CardTitle>
50+
<CardDescription class="flex space-x-6 ">
51+
<div class="flex flex-col w-full space-y-2">
52+
<a :href="props.application.gitRepo" class="flex items-center space-x-1">
53+
<span class="text-background bg-foreground rounded-full p-1">
54+
<Icon icon="radix-icons:github-logo" class="w-4 h-4"></Icon>
55+
</span>
56+
<span>
57+
{{ props.application.gitRepo }}
58+
</span>
59+
</a>
60+
<div v-if="props.application?.image != undefined" class="flex space-x-1">
61+
<div class="text-background bg-foreground rounded-full p-1">
62+
<Icon icon="simple-icons:docker" class="w-4 h-4">
63+
</Icon>
64+
</div>
65+
<span>
66+
{{ props.application?.image }}
67+
</span>
68+
</div>
69+
</div>
70+
<div class="flex space-x-4 items-center w-full">
71+
<h3 class="flex flex-col text-base text-muted-foreground font-semibold">
72+
Status : <span class="text-green-500">
73+
Running
74+
</span>
75+
</h3>
76+
<h3 class="flex flex-col text-base text-muted-foreground font-semibold">
77+
Last Build : <span class="text-foreground font-normal">
78+
1 day ago
79+
</span>
80+
</h3>
81+
</div>
82+
</CardDescription>
83+
</div>
84+
<div class="flex flex-row space-x-2">
85+
<Button variant="destructive" class="bg-rose-600 hover:bg-rose-500">
86+
<Icon icon="radix-icons:stop" class="mr-2 h-4 w-4" />
87+
Stop
88+
</Button>
89+
<Button>
90+
<Icon icon="radix-icons:play" class="mr-2 h-4 w-4" />
91+
Start
92+
</Button>
93+
<DropdownMenu>
94+
<DropdownMenuTrigger as-child>
95+
<Button variant="ghost" class="flex w-8 p-0 data-[state=open]:bg-muted">
96+
<Icon icon="radix-icons:dots-vertical" class="h-4 w-4" />
97+
<span class="sr-only">Open menu</span>
98+
</Button>
99+
</DropdownMenuTrigger>
100+
<DropdownMenuContent align="end" class="w-[160px]">
101+
<DropdownMenuItem>Edit</DropdownMenuItem>
102+
<DropdownMenuItem>
103+
Delete
104+
<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
105+
</DropdownMenuItem>
106+
</DropdownMenuContent>
107+
</DropdownMenu>
108+
</div>
109+
</CardHeader>
110+
<CardContent>
111+
<Collapsible v-model:open="isOpen" class="border border-border rounded-lg p-2">
112+
<CollapsibleTrigger @click="() => rotated = !rotated" class="flex flex-row-reverse w-full">
113+
<Icon icon="radix-icons:chevron-down" class="transform transition-transform duration-300"
114+
:class="{ 'rotate-180': rotated }" />
115+
</CollapsibleTrigger>
116+
<CollapsibleContent class="space-y-2">
117+
<div class="grid grid-cols-3">
118+
<div class="p-2 space-x-2 flex items-center border rounded-lg w-fit border-border m-auto ">
119+
<span class="font-semibold">
120+
CPU:
121+
</span>
122+
<Icon icon="ph:cpu" />
123+
<span>
124+
{{ props.application.cpu }} cpu
125+
</span>
126+
</div>
127+
<div class="p-2 space-x-2 flex items-center border rounded-lg w-fit border-border m-auto ">
128+
<span class="font-semibold">
129+
Memory:
130+
</span>
131+
<Icon icon="clarity:memory-solid" />
132+
<span>
133+
{{ props.application.memory }}
134+
</span>
135+
</div>
136+
<div class="p-2 space-x-2 flex items-center border rounded-lg w-fit border-border m-auto ">
137+
<span class="font-semibold">
138+
Storage:
139+
</span>
140+
<Icon icon="ic:baseline-sd-storage" />
141+
<span>
142+
{{ props.application.storage }}
143+
</span>
144+
</div>
145+
</div>
146+
<div class="space-y-4">
147+
<h2 class="font-semibold">
148+
Logs:
149+
</h2>
150+
<p class="p-8 border ">
151+
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
152+
<br />
153+
Commodi quibusdam molestias quis,
154+
<br />
155+
assumenda impedit ex architecto harum voluptas molestiae delectus eaque perferendis quia
156+
<br />
157+
corrupti ratione deserunt atque eligendi nihil! Enim?
158+
</p>
159+
</div>
160+
</CollapsibleContent>
161+
</Collapsible>
162+
</CardContent>
163+
<CardFooter class="flex justify-between px-6 pb-6">
164+
</CardFooter>
165+
</Card>
166+
</template>@/components/CustomTable/data/schema./data/data

0 commit comments

Comments
 (0)