Add SearchableSelectInput and refactor notification types and utils

apps/dashboard/src/app/(internal)/brukere/queries.ts

@@ -16,13 +16,16 @@ interface UseUserAllQueryProps {
   page?: Pageable
 }
 
-export const useUserAllQuery = ({ filter, page }: UseUserAllQueryProps) => {
+export const useUserAllQuery = ({ filter, page }: UseUserAllQueryProps, options?: Parameters<typeof useQuery>[2]) => {
   const trpc = useTRPC()
   const { data, isLoading } = useQuery(
-    trpc.user.all.queryOptions({
-      filter,
-      ...page,
-    })
+    trpc.user.all.queryOptions(
+      {
+        filter,
+        ...page,
+      },
+      options
+    )
   )
   return { users: useMemo(() => data?.items ?? [], [data]), isLoading }
 }

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

@@ -2,6 +2,7 @@ import type { FC } from "react"
 import { useEditNotificationMutation } from "../mutations"
 import { useNotificationWriteForm } from "../write-form"
 import { useNotificationDetailsContext } from "./provider"
+
 export const NotificationEditCard: FC = () => {
   const { notification } = useNotificationDetailsContext()
   const edit = useEditNotificationMutation()
@@ -10,9 +11,9 @@ export const NotificationEditCard: FC = () => {
     label: "Oppdater varsling",
     onSubmit: (data) => {
       const { ...notificationData } = data
-      edit.mutate({ id: notification.id, input: notificationData})
+      edit.mutate({ id: notification.id, input: notificationData })
     },
-    defaultValues: { ...notification  }
+    defaultValues: { ...notification },
   })
   return <FormComponent />
 }

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

@@ -1,4 +1,5 @@
 "use client"
+
 import { Loader } from "@mantine/core"
 import { type PropsWithChildren, use, useMemo } from "react"
 import { NotificationDetailsContext } from "./provider"

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

@@ -1,7 +1,7 @@
 "use client"
 
-import type { Notification } from "@dotkomonline/types"
 import { createContext, useContext } from "react"
+import type { Notification } from "@dotkomonline/rpc"
 
 export const NotificationDetailsContext = createContext<{
   notification: Notification

apps/dashboard/src/app/(internal)/varslinger/all-notification-table.tsx

@@ -3,8 +3,8 @@ import { Anchor } from "@mantine/core"
 import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table"
 import Link from "next/link"
 import { useMemo } from "react"
-import { mapNotificationPayloadTypeToLabel, mapNotificationTypeToLabel, Notification } from "node_modules/@dotkomonline/rpc/src/modules/notification/notification"
 import { DateTooltip } from "@/components/DateTooltip"
+import { mapNotificationPayloadTypeToLabel, mapNotificationTypeToLabel, type Notification } from "@dotkomonline/rpc"
 
 interface AllNotificationsTableProps {
   notifications: Notification[]
@@ -25,7 +25,7 @@ export const AllNotificationsTable = ({ notifications }: AllNotificationsTablePr
         ),
       }),
 
-     columnHelper.accessor((notification) => notification.shortDescription, {
+      columnHelper.accessor((notification) => notification.shortDescription, {
         id: "shortDescription",
         header: () => "Kort beskrivelse",
         cell: (info) => info.getValue(),
@@ -52,7 +52,6 @@ export const AllNotificationsTable = ({ notifications }: AllNotificationsTablePr
       }),
     ],
     [columnHelper]
-
   )
 
   const tableOptions = useMemo(
@@ -65,9 +64,5 @@ export const AllNotificationsTable = ({ notifications }: AllNotificationsTablePr
   )
 
   const table = useReactTable(tableOptions)
-  return (
-    <GenericTable
-      table = {table} 
-    />
-  )
+  return <GenericTable table={table} />
 }

apps/dashboard/src/app/(internal)/varslinger/modals/create-notification.tsx

@@ -8,10 +8,7 @@ export const CreateNotificationModal: FC<ContextModalProps> = ({ context, id })
   const create = useCreateNotificationMutation()
   const FormComponent = useNotificationWriteForm({
     onSubmit: (data) => {
-      create.mutate(
-        data
-      ),
-      close()
+      create.mutate(data), close()
     },
   })
   return <FormComponent />

apps/dashboard/src/app/(internal)/varslinger/mutations.ts

@@ -1,4 +1,3 @@
-import { env } from "@/lib/env"
 import { useQueryNotification } from "@/lib/notifications"
 import { useTRPC } from "@/lib/trpc-client"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
@@ -16,8 +15,7 @@ export const useCreateNotificationMutation = () => {
         })
       },
       onSuccess: async (data) => {
-        await queryClient.invalidateQueries({ queryKey: trpc.notification.findMany.queryKey() });
-
+        await queryClient.invalidateQueries({ queryKey: trpc.notification.findMany.queryKey() })
 
         notification.complete({
           title: "Varsling opprettet",
@@ -64,4 +62,3 @@ export const useEditNotificationMutation = () => {
     })
   )
 }
-

apps/dashboard/src/app/(internal)/varslinger/page.tsx

@@ -3,11 +3,10 @@
 import { Box, Button, Skeleton, Stack } from "@mantine/core"
 import { AllNotificationsTable } from "./all-notification-table"
 import { useCreateNotificationModal } from "./modals/create-notification"
-import { useNotificationAllQuery } from "./queries"
-
+import { useNotificationAllInfiniteQuery } from "./queries"
 
 export default function NotificationPage() {
-  const { notifications, isLoading: isNotificationsLoading } = useNotificationAllQuery()
+  const { notifications, isLoading: isNotificationsLoading } = useNotificationAllInfiniteQuery()
   const open = useCreateNotificationModal()
 
   return (

apps/dashboard/src/app/(internal)/varslinger/queries.ts

@@ -1,18 +1,16 @@
 import { useTRPC } from "@/lib/trpc-client"
-import { Pageable } from "@dotkomonline/rpc"
+import type { Pageable } from "@dotkomonline/utils"
 import { useInfiniteQuery } from "@tanstack/react-query"
 import { useMemo } from "react"
 
-export const useNotificationAllQuery = (page?: Pageable) => {
+export const useNotificationAllInfiniteQuery = (page?: Pageable) => {
   const trpc = useTRPC()
 
-  const { data,  ...query } = useInfiniteQuery({
+  const { data, ...query } = useInfiniteQuery({
     ...trpc.notification.findMany.infiniteQueryOptions({ ...page }),
     getNextPageParam: (lastPage) => lastPage.nextCursor,
     select: (res) => res.pages.flatMap((p) => p.items),
   })
 
   return { notifications: useMemo(() => data ?? [], [data]), ...query }
 }
-
-

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

@@ -2,21 +2,23 @@ import { useFormBuilder } from "@/components/forms/Form"
 import { createRichTextInput } from "@/components/forms/RichTextInput/RichTextInput"
 import { createSelectInput } from "@/components/forms/SelectInput"
 import { createTextInput } from "@/components/forms/TextInput"
-import { mapNotificationPayloadTypeToLabel, mapNotificationTypeToLabel, NotificationPayloadTypeSchema, NotificationTypeSchema, NotificationWriteSchema } from "node_modules/@dotkomonline/rpc/src/modules/notification/notification"
-import { type z } from "zod"
+import type { z } from "zod"
 import { useGroupAllQuery } from "../grupper/queries"
+import { createSearchableSelectInput } from "@/components/forms/SearchableSelectInput"
+import { useUserSearch } from "@/components/forms/hooks/useUserSearch"
+import {
+  mapNotificationPayloadTypeToLabel,
+  mapNotificationTypeToLabel,
+  NotificationPayloadTypeSchema,
+  NotificationTypeSchema,
+  NotificationWriteSchema,
+} from "@dotkomonline/rpc"
 
-const NOTIFICATION_FORM_DATA_TYPE = Object.values(NotificationTypeSchema.Values).map((type) => ({
-  value: type,
-  label: mapNotificationTypeToLabel(type),
-}))
-
-const NOTIFICATION_FORM_DATA_PAYLOAD_TYPE = Object.values(NotificationPayloadTypeSchema.Values).map((type) => ({
-  value: type,
-  label: mapNotificationPayloadTypeToLabel(type),
-}))
-
-const NOTIFICATION_FORM_DEFAULT_VALUES: Partial<NotificationWriteFormSchema> = {recipientIds: [], taskId: null }
+const NOTIFICATION_FORM_DEFAULT_VALUES: Partial<NotificationWriteFormSchema> = {
+  recipientIds: [],
+  taskId: null,
+  payloadType: "NONE",
+}
 
 type NotificationWriteFormSchema = z.infer<typeof NotificationWriteSchema>
 
@@ -31,7 +33,6 @@ export const useNotificationWriteForm = ({
   label = "Legg inn ny varsling",
   defaultValues = NOTIFICATION_FORM_DEFAULT_VALUES,
 }: UseNotificationWriteFormProps) => {
-
   const { groups } = useGroupAllQuery()
 
   return useFormBuilder({
@@ -40,6 +41,15 @@ export const useNotificationWriteForm = ({
     onSubmit,
     label,
     fields: {
+      recipientIds: createSearchableSelectInput({
+        multiSelect: true,
+        useSearchHook: useUserSearch,
+        dataMapper: (user) => ({ value: user.id, label: `${user.name} (${user.email})` }),
+        selectProps: {
+          label: "Mottakere",
+          placeholder: "Søk etter brukere",
+        },
+      }),
       title: createTextInput({
         label: "Tittel",
         placeholder: "Juleball Påmeldingen er åpen!",
@@ -50,34 +60,40 @@ export const useNotificationWriteForm = ({
         placeholder: "En kort beskrivelse av varslingen",
         required: true,
       }),
-       content: createRichTextInput({
+      content: createRichTextInput({
         label: "Innhold",
         required: true,
       }),
-        type: createSelectInput  ({
-        data: NOTIFICATION_FORM_DATA_TYPE,
+      type: createSelectInput({
+        data: Object.values(NotificationTypeSchema.Values).map((type) => ({
+          value: type,
+          label: mapNotificationTypeToLabel(type),
+        })),
         label: "Type",
         placeholder: "Velg type",
         required: true,
       }),
-        payload: createTextInput  ({
+      payloadType: createSelectInput({
+        label: "Payload Type",
+        data: Object.values(NotificationPayloadTypeSchema.Values).map((type) => ({
+          value: type,
+          label: mapNotificationPayloadTypeToLabel(type),
+        })),
+        placeholder: "Velg type",
+        required: true,
+      }),
+      payload: createTextInput({
         label: "Payload",
-        placeholder: "Paylaod",
+        placeholder: "Payload",
         required: false,
       }),
-        payloadType: createSelectInput  ({
-        label: "payload type",
-        data: NOTIFICATION_FORM_DATA_PAYLOAD_TYPE,
-        placeholder: "Velg type",
+      actorGroupId: createSelectInput({
+        label: "Ansvarlig gruppe",
+        placeholder: "Velg gruppe",
+        data: groups.map((group) => ({ value: group.slug, label: group.abbreviation })),
+        searchable: true,
         required: true,
       }),
-        actorGroupId: createSelectInput({
-         label: "Ansvarlig gruppe",
-         placeholder: "Velg gruppe",
-         data: groups.map((group) => ({ value: group.slug, label: group.abbreviation })),
-         searchable: true,
-         required: true,
-       }),     
     },
   })
-}
+}