add offlines and s3 integration

apps/dashboard/src/app/(dashboard)/offline/[id]/edit-card.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react"
+import { useOfflineWriteForm } from "../write-form"
+import { useOfflineDetailsContext } from "./provider"
+import { useEditOfflineMutation } from "../../../../modules/offline/mutations/use-edit-offline-mutation"
+
+export const OfflineEditCard: FC = () => {
+  const { offline } = useOfflineDetailsContext()
+  const edit = useEditOfflineMutation()
+
+  const FormComponent = useOfflineWriteForm({
+    label: "Oppdater",
+    onSubmit: (data) => {
+      edit.mutate({
+        id: offline.id,
+        input: data,
+      })
+    },
+    defaultValues: offline,
+  })
+  return <FormComponent />
+}

apps/dashboard/src/app/(dashboard)/offline/[id]/layout.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { Loader } from "@mantine/core"
+import { PropsWithChildren } from "react"
+import { trpc } from "../../../../utils/trpc"
+import { OfflineDetailsContext } from "./provider"
+
+export default function OfflineDetailsLayout({ children, params }: PropsWithChildren<{ params: { id: string } }>) {
+  const { data, isLoading } = trpc.offline.get.useQuery(params.id)
+  return (
+    <>
+      {isLoading || !data ? (
+        <Loader />
+      ) : (
+        <OfflineDetailsContext.Provider value={{ offline: data }}>{children}</OfflineDetailsContext.Provider>
+      )}
+    </>
+  )
+}

apps/dashboard/src/app/(dashboard)/offline/[id]/page.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import { Icon } from "@iconify/react"
+import { Box, CloseButton, Group, Tabs, Title } from "@mantine/core"
+import { useRouter } from "next/navigation"
+import { OfflineEditCard } from "./edit-card"
+import { useOfflineDetailsContext } from "./provider"
+
+const SIDEBAR_LINKS = [
+  {
+    icon: "tabler:building-warehouse",
+    label: "Info",
+    slug: "info",
+    component: OfflineEditCard,
+  },
+] as const
+
+export default function OfflineDetailsPage() {
+  const { offline } = useOfflineDetailsContext()
+  const router = useRouter()
+  return (
+    <Box p="md">
+      <Group>
+        <CloseButton onClick={() => router.back()} />
+        <Title>{offline.title}</Title>
+      </Group>
+
+      <Tabs defaultValue={SIDEBAR_LINKS[0].slug}>
+        <Tabs.List>
+          {SIDEBAR_LINKS.map(({ label, icon, slug }) => (
+            <Tabs.Tab key={slug} value={slug} leftSection={<Icon icon={icon} width={14} height={14} />}>
+              {label}
+            </Tabs.Tab>
+          ))}
+        </Tabs.List>
+        {SIDEBAR_LINKS.map(({ slug, component: Component }) => (
+          <Tabs.Panel mt="md" key={slug} value={slug}>
+            <Component />
+          </Tabs.Panel>
+        ))}
+      </Tabs>
+    </Box>
+  )
+}

apps/dashboard/src/app/(dashboard)/offline/[id]/provider.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import { Offline } from "@dotkomonline/types"
+
+/** Context consisting of everything required to use and render the form */
+export const OfflineDetailsContext = createContext<{
+  offline: Offline
+} | null>(null)
+
+export const useOfflineDetailsContext = () => {
+  const ctx = useContext(OfflineDetailsContext)
+  if (ctx === null) {
+    throw new Error("useOfflineDetailsContext called without Provider in tree")
+  }
+  return ctx
+}

apps/dashboard/src/app/(dashboard)/offline/page.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { Icon } from "@iconify/react"
+import { Button, ButtonGroup, Card, Group, Skeleton, Stack } from "@mantine/core"
+import { GenericTable } from "../../../components/GenericTable"
+import { useOfflineAllQuery } from "../../../modules/offline/queries/use-offlines-all-query"
+import { useCreateOfflineModal } from "../../../modules/offline/modals/create-offline-modal"
+import { useOfflineTable } from "../../../modules/offline/use-offline-table"
+
+export default function OfflinePage() {
+  const { offlines, isLoading: isOfflinesLoading } = useOfflineAllQuery()
+  const open = useCreateOfflineModal()
+  const table = useOfflineTable({ data: offlines })
+
+  return (
+    <Skeleton visible={isOfflinesLoading}>
+      <Stack>
+        <Card withBorder>
+          <GenericTable table={table} />
+        </Card>
+        <Group justify="space-between">
+          <Button onClick={open}>Legg inn ny Offline</Button>
+          <ButtonGroup>
+            <Button variant="subtle">
+              <Icon icon="tabler:caret-left" />
+            </Button>
+            <Button variant="subtle">
+              <Icon icon="tabler:caret-right" />
+            </Button>
+          </ButtonGroup>
+        </Group>
+      </Stack>
+    </Skeleton>
+  )
+}

apps/dashboard/src/app/(dashboard)/offline/write-form.tsx

@@ -0,0 +1,45 @@
+import { createDateTimeInput, createTextInput, useFormBuilder } from "src/app/form"
+import { z } from "zod"
+import { OfflineWriteSchema } from "../../../../../../packages/types/src/offline"
+
+const OFFLINE_FORM_DEFAULT_VALUES: Partial<FormValidationSchema> = {}
+
+type UseOfflineWriteFormProps = {
+  onSubmit: (data: FormValidationSchema) => void
+  defaultValues?: Partial<FormValidationSchema>
+  label?: string
+}
+
+export const FormValidationSchema = OfflineWriteSchema
+type FormValidationSchema = z.infer<typeof FormValidationSchema>
+
+export const useOfflineWriteForm = ({
+  onSubmit,
+  label = "Registrer",
+  defaultValues = OFFLINE_FORM_DEFAULT_VALUES,
+}: UseOfflineWriteFormProps) => {
+  return useFormBuilder({
+    schema: FormValidationSchema,
+    defaultValues,
+    onSubmit,
+    label,
+    fields: {
+      title: createTextInput({
+        label: "Tittel",
+        placeholder: "Offline #50",
+      }),
+      published: createDateTimeInput({
+        label: "Utgivelsesdato",
+        placeholder: "2023-10-05",
+      }),
+      file: createTextInput({
+        label: "Fil",
+        placeholder: "s3 link",
+      }),
+      image: createTextInput({
+        label: "Bilde",
+        placeholder: "s3 link",
+      }),
+    },
+  })
+}

apps/dashboard/src/app/ModalProvider.tsx

@@ -5,11 +5,13 @@ import { FC, PropsWithChildren } from "react"
 import { CreateCompanyModal } from "src/modules/company/modals/create-company-modal"
 import { CreateEventModal } from "src/modules/event/modals/create-event-modal"
 import { CreateJobListingModal } from "src/modules/job-listing/modals/create-job-listing-modal"
+import { CreateOfflineModal } from "../modules/offline/modals/create-offline-modal"
 
 const modals = {
   "event/create": CreateEventModal,
   "jobListing/create": CreateJobListingModal,
   "company/create": CreateCompanyModal,
+  "offline/create": CreateOfflineModal,
 } as const
 
 export const ModalProvider: FC<PropsWithChildren> = ({ children }) => {

apps/dashboard/src/modules/offline/modals/create-offline-modal.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react"
+import { ContextModalProps, modals } from "@mantine/modals"
+import { useCreateOfflineMutation } from "../mutations/use-create-offline-mutation"
+import { useOfflineWriteForm } from "../../../app/(dashboard)/offline/write-form"
+
+export const CreateOfflineModal: FC<ContextModalProps> = ({ context, id }) => {
+  const close = () => context.closeModal(id)
+  const create = useCreateOfflineMutation()
+  const FormComponent = useOfflineWriteForm({
+    onSubmit: (data) => {
+      create.mutate(data)
+      close()
+    },
+  })
+  return <FormComponent />
+}
+
+export const useCreateOfflineModal = () => {
+  return () =>
+    modals.openContextModal({
+      modal: "offline/create",
+      title: "Opprett ny Offline",
+      innerProps: {},
+    })
+}

apps/dashboard/src/modules/offline/mutations/use-create-offline-mutation.ts

@@ -0,0 +1,31 @@
+import { useQueryNotification } from "../../../app/notifications"
+import { trpc } from "../../../utils/trpc"
+import { useRouter } from "next/navigation"
+
+export const useCreateOfflineMutation = () => {
+  const utils = trpc.useContext()
+  const router = useRouter()
+  const notification = useQueryNotification()
+  return trpc.offline.create.useMutation({
+    onMutate: () => {
+      notification.loading({
+        title: "Oppretter...",
+        message: "Vellykkett opprettelse. Du blir sendt til ressursen.",
+      })
+    },
+    onSuccess: (data) => {
+      notification.complete({
+        title: "Opprettet",
+        message: "Ressursen har blitt opprettet.",
+      })
+      utils.offline.all.invalidate()
+      router.push(`/job-listing/${data.id}`)
+    },
+    onError: (err) => {
+      notification.fail({
+        title: "Feil oppsto",
+        message: `En feil oppsto under opprettelsen: ${err.toString()}.`,
+      })
+    },
+  })
+}

apps/dashboard/src/modules/offline/mutations/use-edit-offline-mutation.ts

@@ -0,0 +1,28 @@
+import { useQueryNotification } from "../../../app/notifications"
+import { trpc } from "../../../utils/trpc"
+
+export const useEditOfflineMutation = () => {
+  const notification = useQueryNotification()
+  const utils = trpc.useContext()
+  return trpc.offline.edit.useMutation({
+    onMutate: () => {
+      notification.loading({
+        title: "Oppdaterer",
+        message: "Ressursen blir oppdatert.",
+      })
+    },
+    onSuccess: (data) => {
+      notification.complete({
+        title: "Ressursen oppdatert",
+        message: `Ressursen "${data.title}" har blitt oppdatert.`,
+      })
+      utils.offline.all.invalidate()
+    },
+    onError: (err) => {
+      notification.fail({
+        title: "Feil oppsto",
+        message: `En feil oppsto under oppdatering: ${err.toString()}.`,
+      })
+    },
+  })
+}

apps/dashboard/src/modules/offline/queries/use-offlines-all-query.ts

@@ -0,0 +1,6 @@
+import { trpc } from "../../../utils/trpc"
+
+export const useOfflineAllQuery = () => {
+  const { data: offlines = [], ...query } = trpc.offline.all.useQuery({ take: 999 })
+  return { offlines, ...query }
+}

apps/dashboard/src/modules/offline/use-offline-table.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { Offline } from "@dotkomonline/types"
+import { Anchor, Text } from "@mantine/core"
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+import Link from "next/link"
+import { useMemo } from "react"
+import { formatDate } from "../../utils/format"
+
+interface Props {
+  data: Offline[]
+}
+
+export const useOfflineTable = ({ data }: Props) => {
+  const columnHelper = createColumnHelper<Offline>()
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("title", {
+        header: () => "Tittel",
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor("published", {
+        header: () => "Utgivelsesdato",
+        cell: (info) => {
+          return <Text>{formatDate(info.getValue())}</Text>
+        },
+      }),
+      columnHelper.accessor((evt) => evt, {
+        id: "actions",
+        header: () => "Detaljer",
+        cell: (info) => (
+          <Anchor component={Link} size="sm" href={`/offline/${info.getValue().id}`}>
+            Se mer
+          </Anchor>
+        ),
+      }),
+    ],
+    [columnHelper]
+  )
+
+  return useReactTable({
+    data: data,
+    getCoreRowModel: getCoreRowModel(),
+    columns,
+  })
+}

apps/db-migrator/src/fixture.ts

@@ -8,6 +8,7 @@ import { events } from "./fixtures/event"
 import { eventCompany } from "./fixtures/event-company"
 import { jobListingLocationLinks, jobListingLocations, jobListings } from "./fixtures/job-listing"
 import { marks } from "./fixtures/mark"
+import { offlines } from "./fixtures/offline"
 import { personalMarks } from "./fixtures/personal-mark"
 import { products } from "./fixtures/product"
 import { productPaymentProviders } from "./fixtures/product-payment-provider"
@@ -194,4 +195,11 @@ export const runFixtures = async () => {
     .returning("id")
     .onConflict((oc) => oc.column("id").doNothing())
     .execute()
+
+  await db
+    .insertInto("offline")
+    .values(offlines)
+    .returning("id")
+    .onConflict((oc) => oc.column("id").doNothing())
+    .execute()
 }

apps/db-migrator/src/fixtures/offline.ts

@@ -0,0 +1,19 @@
+import { Database } from "@dotkomonline/db"
+import { Insertable } from "kysely"
+
+export const offlines: Insertable<Database["offline"]>[] = [
+  {
+    id: "01HD77R4Y4S3WJ44NZ8029VP4P",
+    title: "Job at Bekk",
+    published: new Date("2023-10-09T10:00:00+02:00"),
+    file: "https://bekk.no",
+    image: "https://bekk.no",
+  },
+  {
+    id: "01HD77R4Y4S3WJ44NZ8029VP4C",
+    title: "Job at Bekk 2",
+    published: new Date("2023-10-09T10:00:00+02:00"),
+    file: "https://bekk.no",
+    image: "https://bekk.no",
+  },
+]