Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat/form-validation #97

Merged
merged 8 commits into from
Feb 2, 2025
Merged

feat/form-validation #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
13f3c24
feat: validate profil edit form
Klrfl Feb 1, 2025
0510bc0
feat: admin tambah buku wip
Klrfl Feb 1, 2025
86e51e2
feat: validate form in buku/tambah
Klrfl Feb 1, 2025
09a14e3
export to lib for reuse
Klrfl Feb 1, 2025
8ad6395
fix: image upload not working
Klrfl Feb 1, 2025
9911ba8
feat: add validation on buku edit form
Klrfl Feb 2, 2025
11aea0f
refactor: extract upload image into separate file
Klrfl Feb 2, 2025
619e621
ui: make style for simple message component
Klrfl Feb 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 47 additions & 39 deletions assets/primevue/message.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,127 @@
.p-message {
@apply rounded-md outline outline-1
@apply rounded-md outline outline-1;
}

.p-message-content {
@apply flex items-center px-3 py-2 gap-2 h-full
@apply flex items-center px-3 py-2 gap-2 h-full;
}

.p-message-icon {
@apply flex-shrink-0
@apply flex-shrink-0;
}

.p-message-close-button {
@apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none
@apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none
w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2;
}

.p-message-close-icon {
@apply text-base w-4 h-4
@apply text-base w-4 h-4;
}

.p-message-info {
@apply bg-blue-50/95 outline-blue-200 text-blue-600
@apply bg-blue-50/95 outline-blue-200 text-blue-600
dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500
shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)];
}

.p-message-info .p-message-close-button {
@apply hover:bg-blue-100 focus-visible:outline-blue-600
dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
@apply hover:bg-blue-100 focus-visible:outline-blue-600
dark:hover:bg-white/5 dark:focus-visible:outline-blue-500;
}

.p-message-success {
@apply bg-green-50/95 outline-green-200 text-green-600
@apply bg-green-50/95 outline-green-200 text-green-600
dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500
shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)];
}

.p-message-success .p-message-close-button {
@apply hover:bg-green-100 focus-visible:outline-green-600
dark:hover:bg-white/5 dark:focus-visible:outline-green-500
@apply hover:bg-green-100 focus-visible:outline-green-600
dark:hover:bg-white/5 dark:focus-visible:outline-green-500;
}

.p-message-warn {
@apply bg-yellow-50/95 outline-yellow-200 text-yellow-600
@apply bg-yellow-50/95 outline-yellow-200 text-yellow-600
dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500
shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)];
}

.p-message-warn .p-message-close-button {
@apply hover:bg-yellow-100 focus-visible:outline-yellow-600
dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
@apply hover:bg-yellow-100 focus-visible:outline-yellow-600
dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500;
}

.p-message-error {
@apply bg-red-50/95 outline-red-200 text-red-600
@apply bg-red-50/95 outline-red-200 text-red-600
dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500
shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]
shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)];
}

.p-message-error .p-message-close-button {
@apply hover:bg-red-100 focus-visible:outline-red-600
dark:hover:bg-white/5 dark:focus-visible:outline-red-500
@apply hover:bg-red-100 focus-visible:outline-red-600
dark:hover:bg-white/5 dark:focus-visible:outline-red-500;
}

.p-message-secondary {
@apply bg-surface-100 outline-surface-200 text-surface-600
@apply bg-surface-100 outline-surface-200 text-surface-600
dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)];
}

.p-message-secondary .p-message-close-button {
@apply hover:bg-surface-200 focus-visible:outline-surface-600
dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
@apply hover:bg-surface-200 focus-visible:outline-surface-600
dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300;
}

.p-message-contrast {
@apply bg-surface-900 outline-surface-950 text-surface-50
@apply bg-surface-900 outline-surface-950 text-surface-50
dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)];
}

.p-message-contrast .p-message-close-button {
@apply hover:bg-surface-800 focus-visible:outline-surface-50
dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
@apply hover:bg-surface-800 focus-visible:outline-surface-50
dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950;
}

.p-message-text {
@apply text-base font-medium
@apply text-base font-medium;
}

.p-message-icon {
@apply text-lg w-[1.125rem] h-[1.125rem]
@apply text-lg w-[1.125rem] h-[1.125rem];
}

.p-message-enter-from {
@apply opacity-0
@apply opacity-0;
}

.p-message-enter-active {
@apply transition-opacity duration-300
@apply transition-opacity duration-300;
}

.p-message.p-message-leave-from {
@apply max-h-[1000px]
@apply max-h-[1000px];
}

.p-message.p-message-leave-to {
@apply max-h-0 opacity-0 m-0
@apply max-h-0 opacity-0 m-0;
}

.p-message-leave-active {
@apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]
@apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s];
}

.p-message-leave-active .p-message-close-button {
@apply opacity-0
}
@apply opacity-0;
}

.p-message-error.p-message-sm {
@apply bg-transparent outline-none;
}

.p-message-sm .p-message-content {
@apply p-0;
}
33 changes: 33 additions & 0 deletions lib/buku.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { useSupabaseClient } from "#build/imports"
import type { Database } from "~/types/database.types"
import { zodResolver } from "@primevue/forms/resolvers/zod"
import { z } from "zod"

export const schema = z.object({
judul: z.string().nonempty("judul tidak boleh kosong."),
no_isbn: z.string().nonempty("isbn tidak boleh kosong."),
image: z.string().optional().nullable().default(null),
kategori_id: z.number({ message: "buku harus memiliki kategori." }),
asal: z.string().default("-"),
jumlah_exspl: z
.number({ message: "jumlah harus berupa angka." })
.min(0, "jumlah harus 0 atau lebih.")
.max(10000, "banyak amat sih ga mungkin lah bukunya segitu."),
penerbit: z.string().nonempty("penerbit tidak boleh kosong."),
alamat_terbit: z.string().nonempty("alamat penerbit tidak boleh kosong."),
tahun_terbit: z
.string()
.regex(/^\d{0,4}$/, { message: "tahun terbit harus berupa angka 0 sampai 4 digit." }),
penulis: z.string().nonempty("penulis tidak boleh kosong"),
})

export const resolver = zodResolver(schema)

export async function uploadBookImage(isbn: string, file: File) {
const supabase = useSupabaseClient<Database>()

const { error } = await supabase.storage.from("Buku").upload(`public/${isbn}`, file, {
upsert: true,
})
return error
}
Loading
Loading