Skip to content

Commit

Permalink
temp
Browse files Browse the repository at this point in the history
  • Loading branch information
@henrikskog
henrikskog committed May 5, 2024
1 parent b2b6001 commit 2b8b7ad
Show file tree
Hide file tree
Showing 38 changed files with 1,295 additions and 1,188 deletions.
24 changes: 1 addition & 23 deletions apps/dashboard/src/app/(dashboard)/offline/[id]/edit-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,16 @@
import type { OfflineWrite } from "@dotkomonline/types"
import type { FC } from "react"
import type { File } from "../../../../../stubs/file/File"
import { useEditOfflineMutation } from "../../../../modules/offline/mutations/use-edit-offline-mutation"
import { useS3UploadFile } from "../../../../modules/offline/use-s3-upload-file"
import { useOfflineWriteForm } from "../write-form"
import { useOfflineDetailsContext } from "./provider"

export const OfflineEditCard: FC = () => {
const { offline } = useOfflineDetailsContext()
console.log(offline)
const edit = useEditOfflineMutation()
const upload = useS3UploadFile()

const handleUpload = async (file?: File) => (file?.name ? await upload(file) : null)

const FormComponent = useOfflineWriteForm({
label: "Oppdater",
onSubmit: async (data) => {
// Only upload if files are present
const fileUrl = await handleUpload(data.file)
const imageUrl = await handleUpload(data.image)

const toSave: Partial<OfflineWrite> = {
...data,
fileUrl: fileUrl ?? data.fileUrl, // Preserving existing URL if no new file uploaded
imageUrl: imageUrl ?? data.imageUrl, // Preserving existing URL if no new image uploaded
}

edit.mutate({
id: offline.id,
input: {
...toSave,
},
})
// TODO: Handle offline edit
},
defaultValues: offline,
})
Expand Down
36 changes: 9 additions & 27 deletions apps/dashboard/src/app/(dashboard)/offline/write-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,18 @@
import { OfflineWriteSchema } from "@dotkomonline/types"
import { z } from "zod"
import { type Offline, OfflineWriteSchema } from "@dotkomonline/types"
import type { z } from "zod"
import { createDateTimeInput, createFileInput, createImageInput, createTextInput, useFormBuilder } from "../../form"

const OFFLINE_FORM_DEFAULT_VALUES: Partial<FormValidationSchema> = {
fileUrl: null,
imageUrl: null,
}

interface UseOfflineWriteFormProps {
onSubmit(data: FormValidationSchema): Promise<void>
defaultValues?: Partial<FormValidationSchema>
defaultValues?: Partial<Offline>
label?: string
}

export const FormValidationSchema = OfflineWriteSchema.extend({
file: z.any().optional(),
image: z.any().optional(),
fileUrl: z.string().nullable(),
imageUrl: z.string().nullable(),
}).omit({
fileId: true,
imageId: true,
})
export const FormValidationSchema = OfflineWriteSchema
type FormValidationSchema = z.infer<typeof FormValidationSchema>

export const useOfflineWriteForm = ({
onSubmit,
label = "Registrer",
defaultValues = OFFLINE_FORM_DEFAULT_VALUES,
}: UseOfflineWriteFormProps) =>
useFormBuilder({
export const useOfflineWriteForm = ({ onSubmit, label = "Registrer", defaultValues }: UseOfflineWriteFormProps) => {
return useFormBuilder({
schema: FormValidationSchema,
defaultValues,
onSubmit,
Expand All @@ -43,15 +26,14 @@ export const useOfflineWriteForm = ({
label: "Utgivelsesdato",
placeholder: "2023-10-05",
}),
file: createFileInput({
fileId: createFileInput({
label: "Fil",
placeholder: "Last opp",
file: defaultValues.file ?? undefined,
}),
image: createImageInput({
imageId: createImageInput({
label: "Bilde",
placeholder: "Last opp",
currentFile: defaultValues.image ?? undefined,
}),
},
})
}
103 changes: 15 additions & 88 deletions apps/dashboard/src/app/form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import type { StaticAsset } from "@dotkomonline/types"
import { ErrorMessage } from "@hookform/error-message"
import { zodResolver } from "@hookform/resolvers/zod"
import {
Anchor,
Box,
Button,
Checkbox,
type CheckboxProps,
FileInput,
type FileInputProps,
Flex,
MultiSelect,
Expand All @@ -16,7 +13,6 @@ import {
type NumberInputProps,
Select,
type SelectProps,
Table,
TagsInput,
type TagsInputProps,
Text,
Expand All @@ -26,7 +22,6 @@ import {
type TextareaProps,
} from "@mantine/core"
import { DateTimePicker, type DateTimePickerProps } from "@mantine/dates"
import { useDisclosure } from "@mantine/hooks"
import type { FC } from "react"
import {
type Control,
Expand All @@ -40,6 +35,7 @@ import {
useForm,
} from "react-hook-form"
import type { z } from "zod"
import FileUpload from "../components/molecules/FileUpload/FileUpload"
import ImageUpload from "../components/molecules/ImageUpload/ImageUpload"

interface InputFieldContext<T extends FieldValues> {
Expand Down Expand Up @@ -258,83 +254,30 @@ export function createTextInput<F extends FieldValues>({
}
}

interface FileTableProps {
files: StaticAsset[]
onDelete(file: StaticAsset): void
}
const FileTable = ({ files, onDelete }: FileTableProps) => {
return (
<Table striped>
<Table.Thead>
<Table.Tr>
<Table.Th>Navn</Table.Th>
<Table.Th w={200}>Type</Table.Th>
<Table.Th w={200}>Handlinger</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{files.map((file) => (
<Table.Tr key={file.id}>
<Table.Td>
<Anchor href={file.url} target="_blank" rel="noreferrer">
{file.fileName}
</Anchor>
</Table.Td>
<Table.Td>{file.fileType}</Table.Td>
<Table.Td>
<Button color="red" onClick={() => onDelete(file)}>
Slett
</Button>
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
)
}

export function createImageInput<F extends FieldValues>({
...props
}: Omit<FileInputProps, "error"> & {
currentFile?: StaticAsset
aspect?: number
}): InputProducerResult<F> {
return function FormFileInput({ name, state, control }) {
return (
<Box>
<Text>{props.label}</Text>
{props.currentFile && (
<FileTable
files={[props.currentFile]}
onDelete={() => {
console.log("Delete")
}}
/>
)}
<Controller
control={control}
name={name}
render={({ field }) => {
const [isOpened, { toggle }] = useDisclosure(false)

return (
<div>
{props.currentFile && (
<Text mb="sm" fs="italic">
Ved å laste opp et nytt bilde vil det gamle bildet bli slettet
</Text>
)}
<ImageUpload
onSubmit={(blob) => {
console.log(blob)
field.onChange(blob)
close()
}}
aspect={props.aspect}
/>
</div>
)
}}
render={({ field }) => (
<ImageUpload
onSubmit={(data) => {
field.onChange(data ? {
crop: data.crop,
assetId: data.assetId,
} : null)
}}
defaultValues={field.value}
aspect={props.aspect}
/>
)}
/>
</Box>
)
Expand All @@ -343,31 +286,15 @@ export function createImageInput<F extends FieldValues>({

export function createFileInput<F extends FieldValues>({
...props
}: Omit<FileInputProps, "error"> & {
file?: StaticAsset
}): InputProducerResult<F> {
}: Omit<FileInputProps, "error">): InputProducerResult<F> {
return function FormFileInput({ name, state, control }) {
return (
<Box>
<Text>{props.label}</Text>
{props.file ? (
<FileTable
files={[props.file]}
onDelete={() => {
console.log("Delete")
}}
/>
) : (
<Text mb="sm" fs="italic">
Ingen fil lastet opp
</Text>
)}
<Controller
control={control}
name={name}
render={({ field }) => (
<input type="file" onChange={(e) => field.onChange(e.target.files?.[0])} />
)}
render={({ field }) => <FileUpload value={field.value} onChange={field.onChange} />}
/>
</Box>
)
Expand Down
78 changes: 53 additions & 25 deletions apps/dashboard/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,61 @@
import { authOptions } from "@dotkomonline/auth/src/dashboard.app"
import { Card, Container, Flex, Text, Title } from "@mantine/core"
import { getServerSession } from "next-auth"
import { redirect } from "next/navigation"
import { SignInButton } from "./SignInButton"
"use client"
import { ImageSchema } from "@dotkomonline/types"
import { z } from "zod"
import { createImageInput, useFormBuilder } from "./form"

import { TestComp } from "./testcomp"
const FormValidationSchema = z.object({
image: ImageSchema,
fileId: z.string(),
})
type FormValidationSchema = z.infer<typeof FormValidationSchema>

export default async function DashboardPage() {
const session = await getServerSession(authOptions)
if (session !== null) {
redirect("/event")
}
export default function DashboardPage() {
const Form = useFormBuilder({
schema: FormValidationSchema,
label: "Last opp bilde",
defaultValues: {
image: {
id: "01HX4CPYMNFNYDKNZ2WW7SEKA3",
crop: {
left: 21,
top: 129,
width: 335,
height: 232,
},
assetId:
"00d9565a-d6be-4b3e-bede-89957ca43f0chei.png30d674cb-e251-49a7-9cc1-81d857a712ce",
}
},
fields: {
image: createImageInput({
label: "Bilde",
placeholder: "Last opp",
}),
},
onSubmit: async (data) => {
console.log("submitting form", data)
},
})

return (
<Flex justify="center" align="center">
<Container mt="xl">
<Card>
<Flex direction="column" gap="2">
<Title>Logg inn</Title>
<Text>Vennligst logg inn for å bruke Monoweb Admin</Text>

<SignInButton />
</Flex>
</Card>
</Container>
</Flex>
<Form />
)
}

// export default async function DashboardPage() {
// return <TestComp />

// https://s3.eu-north-1.amazonaws.com/cdn.staging.online.ntnu.no/testing/testing/Screenshot%202023-06-25%20at%2012.43.43.png578d7818-88be-4087-a428-32c89a3cf994

// {
// "id": "01HX2ERFQH8GGRVPGVJ8ZYCYMM",
// "createdAt": "2024-05-04T18:44:44.357Z",
// "assetUri": "78786155-af3e-43d4-bf7c-35ae183d792ehei.png1b16623e-fc87-4ca2-930a-048454269d25",
// "crop": {
// "x": 46.414062499999936,
// "y": 317.6171875,
// "width": 421.984375,
// "height": 237.4609375,
// "unit": "px"
// }
// }

// https://onli.no/cdn-cgi/image/trim=1000;0;0;0/https://s3.eu-north-1.amazonaws.com/cdn.staging.online.ntnu.no/testing/78786155-af3e-43d4-bf7c-35ae183d792ehei.png1b16623e-fc87-4ca2-930a-048454269d25
15 changes: 2 additions & 13 deletions apps/dashboard/src/app/testcomp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,21 @@

import { Box } from "@mantine/core"
import { z } from "zod"
import { createImageInput, createTextInput, useFormBuilder } from "./form"
import { createImageInput, useFormBuilder } from "./form"

export function TestComp() {
const Form = useFormBuilder({
schema: z.object({
image: z.any(),
name: z.string(),
}),
label: "Upload image",
onSubmit: (values) => {
console.log(values)
console.log("ONSUBMIT", values)
},
fields: {
name: createTextInput({
label: "Name",
}),
image: createImageInput({
label: "Image",
aspect: undefined,
currentFile: {
id: "1",
fileName: "Moppe",
url: "https://www.clasohlson.com/no/Hjem/Vaske-og-rydde/Mopper-og-b%C3%B8tter/c/1457",
fileType: "image/jpeg",
createdAt: new Date(),
},
}),
},
})
Expand Down
Loading

0 comments on commit 2b8b7ad

Please sign in to comment.