From 1c173e05b05bdd799b8648a18311f1c56ce78bd2 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Wed, 13 Mar 2024 02:31:11 +0800
Subject: [PATCH] added active/inactive to shortener

---
 frontend/bun.lockb                            | Bin 148481 -> 148481 bytes
 frontend/package.json                         |   2 +-
 .../components/ui/checkbox/checkbox.svelte    |  31 ++++-----
 .../src/lib/components/ui/checkbox/index.ts   |   4 +-
 frontend/src/lib/db/schema.ts                 |   2 +
 frontend/src/routes/(app)/links/+page.svelte  |  61 ++++++++++++++++--
 .../src/routes/api/shortener/[id]/+server.ts  |   4 +-
 7 files changed, 78 insertions(+), 26 deletions(-)

diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index d8261544f0e0c9da52fa7e9c047736cd73c422cb..1a0f593f5e01088fb4b7d116e8367d27e77d5dbc 100755
GIT binary patch
delta 280
zcmV+z0q6dKhzWs+36L%zEJ{Whe|@GaGq;{^Ap){0^5Vf%X#f4*w$ugB_sMN-u}%g?
z0TYvv8Y`2)7zmSyMhpQ=lYtm3v%p5Zh(Khehig@B@rAn$+9-J0URB#pwohTjc1WYa
zCDLrFpSt`@!=xpok6sif{yKR54uPf?F=u4jwx<7Bx?!5MpHh>(&lo^oSuMn?ql~!D
z2Hy(?_uP<igEF}XS;vvLSlzKi-_Sw(>M0F8{b+qEB3D8omD_`$AXWQj9E6`FTp-^K
zcf$3v70^<@2LWC&E;TMSw{DLC%>f7k000000002DLy-X<90N8kFqdGg0Ts7-tpOxg
e134}>mthM6AeX=d0viD~m+{yEA-DYm0t7$w({^?M

delta 276
zcmV+v0qg#OhzWs+36L%z-PC{S83#tEkjnT8(6;y93p3xQ3B#o@1;wJ@SJu4mu}%g?
z0TPpuB`cG_7zmSyMhpQ;laVDWv%p5Zh(I@=AUzZ2k!2%Aobey8VLU_4VlkTg3)mW`
zK}m>4r$F<32`V+^%Qv<S-m0l55q=C&LC={BiLQ&x(%0qK?mUyd&lo^#huLaF%HkfT
zIqDv$S?Q9+2F5|D<de3>*WthSmyB(zPKYc?<yl1cym>oB?0N!ji4WK5l{3=nTNtUa
zgyT@N70^<@2Lb>900000w{DLC%>f7jUN9~(I4&}`Ly-X<904?!UaSEZw|T7rBv%1A
amx1H~A(y`d0vrJ}mm%%}BDeko0s}uq?0Cfh

diff --git a/frontend/package.json b/frontend/package.json
index 4bd10b1..fee689c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,7 +36,7 @@
   "dependencies": {
     "@types/he": "^1.2.3",
     "apexcharts": "^3.44.0",
-    "bits-ui": "^0.18.2",
+    "bits-ui": "^0.19.6",
     "clsx": "^2.0.0",
     "cmdk-sv": "^0.0.13",
     "drizzle-orm": "^0.29.0",
diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
index 9ee3e9f..d203953 100644
--- a/frontend/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -1,30 +1,31 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from 'bits-ui'
-	import { Check, Minus } from 'lucide-svelte'
-	import { cn } from '$lib/utils'
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import Minus from "lucide-svelte/icons/minus";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = CheckboxPrimitive.Props
-	type $$Events = CheckboxPrimitive.Events
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
 
-	let className: $$Props['class'] = undefined
-	export let checked: $$Props['checked'] = false
-	export { className as class }
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = false;
+	export { className as class };
 </script>
 
 <CheckboxPrimitive.Root
 	class={cn(
-		'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
-		className,
+		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		className
 	)}
 	bind:checked
 	{...$$restProps}
-	on:click>
+	on:click
+>
 	<CheckboxPrimitive.Indicator
-		class={cn(
-			'flex h-4 w-4 items-center justify-center text-current',
-		)}
+		class={cn("flex h-4 w-4 items-center justify-center text-current")}
 		let:isChecked
-		let:isIndeterminate>
+		let:isIndeterminate
+	>
 		{#if isChecked}
 			<Check class="h-3.5 w-3.5" />
 		{:else if isIndeterminate}
diff --git a/frontend/src/lib/components/ui/checkbox/index.ts b/frontend/src/lib/components/ui/checkbox/index.ts
index 94d8674..6d92d94 100644
--- a/frontend/src/lib/components/ui/checkbox/index.ts
+++ b/frontend/src/lib/components/ui/checkbox/index.ts
@@ -1,6 +1,6 @@
-import Root from './checkbox.svelte'
+import Root from "./checkbox.svelte";
 export {
 	Root,
 	//
 	Root as Checkbox,
-}
+};
diff --git a/frontend/src/lib/db/schema.ts b/frontend/src/lib/db/schema.ts
index bd1e113..11b97ec 100644
--- a/frontend/src/lib/db/schema.ts
+++ b/frontend/src/lib/db/schema.ts
@@ -5,6 +5,7 @@ import {
 	timestamp,
 	integer,
 	uuid,
+	boolean,
 } from 'drizzle-orm/pg-core'
 
 import { relations, type InferSelectModel } from 'drizzle-orm'
@@ -17,6 +18,7 @@ export const shortener = pgTable('shortener', {
 		.defaultNow()
 		.notNull(),
 	userId: integer('user_id').notNull(),
+	active: boolean('active').notNull().default(true),
 	projectId: integer('project_id'),
 })
 
diff --git a/frontend/src/routes/(app)/links/+page.svelte b/frontend/src/routes/(app)/links/+page.svelte
index 2753903..2b7733b 100644
--- a/frontend/src/routes/(app)/links/+page.svelte
+++ b/frontend/src/routes/(app)/links/+page.svelte
@@ -12,6 +12,7 @@
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
 	import { Badge } from '$lib/components/ui/badge'
+	import { Checkbox } from '$lib/components/ui/checkbox'
 	import {
 		BarChart,
 		ExternalLink,
@@ -35,6 +36,7 @@
 	let editShortenerCode = ''
 	let editShortenerLink = ''
 	let editShortenerCategory: any = undefined
+	let editShortenerActive = false
 	let isEditLoading = false
 
 	let open: boolean = false
@@ -42,15 +44,27 @@
 
 	$: selectedProject = data.selected_project.label
 
-	const openEditDialog = (code: string, link: string) => {
+	const openEditDialog = (
+		code: string,
+		link: string,
+		projectId: number | null,
+		projectName: string | undefined,
+		active: boolean,
+	) => {
 		editDialogOpen = true
 		editShortenerCode = code
 		editShortenerLink = link
-		editShortenerCategory = undefined
+		editShortenerActive = active
+		if (projectId) {
+			editShortenerCategory = { value: projectId, label: projectName }
+		} else {
+			editShortenerCategory = undefined
+		}
 	}
 
 	const editShortener = async (code: string, link: string) => {
 		isEditLoading = true
+		console.log(editShortenerCategory)
 		await fetch(`/api/shortener/${code}`, {
 			method: 'put',
 			body: JSON.stringify({
@@ -58,6 +72,7 @@
 				projectId: editShortenerCategory
 					? editShortenerCategory.value
 					: undefined,
+				active: editShortenerActive,
 			}),
 		})
 		await invalidateAll()
@@ -169,10 +184,25 @@
 							</a>
 							<ExternalLink size={16} />
 						</div>
-						<Badge variant="default"
-							>{shortener.project
-								? shortener.project.name
-								: 'Uncategorized'}</Badge>
+						<div class="flex gap-4">
+							<Badge variant="outline" class="flex gap-2">
+								{#if shortener.active}
+									<span
+										class="relative inline-flex h-2 w-2 rounded-full bg-green-400"
+									></span>
+									Active
+								{:else}
+									<span
+										class="relative inline-flex h-2 w-2 rounded-full bg-gray-600"
+									></span>
+									Inactive
+								{/if}
+							</Badge>
+							<Badge variant="secondary"
+								>{shortener.project
+									? shortener.project.name
+									: 'Uncategorized'}</Badge>
+						</div>
 					</Card.Title>
 					<Card.Description>{shortener.link}</Card.Description>
 				</Card.Header>
@@ -201,7 +231,13 @@
 								<DropdownMenu.Group>
 									<DropdownMenu.Item
 										on:click={() =>
-											openEditDialog(shortener.code, shortener.link)}>
+											openEditDialog(
+												shortener.code,
+												shortener.link,
+												shortener.projectId,
+												shortener.project?.name,
+												shortener.active,
+											)}>
 										Edit
 									</DropdownMenu.Item>
 									<DropdownMenu.Item
@@ -253,6 +289,17 @@
 					</Select.Content>
 				</Select.Root>
 			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<div></div>
+				<div class="flex items-center gap-4">
+					<Checkbox id="terms" bind:checked={editShortenerActive} />
+					<Label
+						for="terms"
+						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+						Active
+					</Label>
+				</div>
+			</div>
 		</div>
 		<Dialog.Footer>
 			<Button
diff --git a/frontend/src/routes/api/shortener/[id]/+server.ts b/frontend/src/routes/api/shortener/[id]/+server.ts
index 4a3fb31..21411e2 100644
--- a/frontend/src/routes/api/shortener/[id]/+server.ts
+++ b/frontend/src/routes/api/shortener/[id]/+server.ts
@@ -31,7 +31,8 @@ export const GET: RequestHandler = async (event) => {
 
 const updateShortenerSchema = z.object({
 	link: z.string().url(),
-	projectId: z.number().nullable(),
+	projectId: z.number().nullish(),
+	active: z.boolean(),
 })
 
 export const PUT: RequestHandler = async (event) => {
@@ -56,6 +57,7 @@ export const PUT: RequestHandler = async (event) => {
 		.set({
 			link: updateShortener.data.link,
 			projectId: updateShortener.data.projectId ?? undefined,
+			active: updateShortener.data.active,
 		})
 		.where(
 			and(