add enrollment form

2025-12-11 09:50:23 -03:00
parent 12f558233b
commit 2edc7a353f
7 changed files with 240 additions and 39 deletions
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/async-combobox.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/async-combobox.tsx
@@ -0,0 +1,128 @@
+import { useRequest, useToggle } from 'ahooks'
+import { debounce } from 'lodash'
+import { CheckIcon, UserIcon } from 'lucide-react'
+import { initials, cn } from '@repo/ui/lib/utils'
+import { formatCPF } from '@brazilian-utils/brazilian-utils'
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import { Abbr } from '@repo/ui/components/abbr'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput
+} from '@repo/ui/components/ui/input-group'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@repo/ui/components/ui/popover'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@repo/ui/components/ui/command'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+
+interface AsyncComboboxProps {
+  value: any
+  title: string
+  onChange: (props: any) => void
+  onSearch: (search: string) => Promise<any[]>
+}
+export function AsyncCombobox({
+  title,
+  value,
+  onSearch,
+  onChange
+}: AsyncComboboxProps) {
+  const [open, { set }] = useToggle()
+  const {
+    data = [],
+    loading,
+    runAsync
+  } = useRequest(onSearch, { manual: true, defaultParams: [''] })
+
+  return (
+    <Popover open={open} onOpenChange={set}>
+      <PopoverTrigger asChild>
+        <InputGroup>
+          <InputGroupInput
+            readOnly
+            value={value?.name || ''}
+            placeholder={title}
+            className="cursor-pointer"
+            autoComplete="off"
+          />
+          <InputGroupAddon>
+            <UserIcon />
+          </InputGroupAddon>
+
+          {loading && (
+            <InputGroupAddon align="inline-end">
+              <Spinner />
+            </InputGroupAddon>
+          )}
+        </InputGroup>
+      </PopoverTrigger>
+
+      <PopoverContent className="lg:w-84 p-0" align="start">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={title}
+            autoComplete="off"
+            onValueChange={debounce(runAsync, 300)}
+          />
+
+          <CommandList>
+            <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+            <CommandGroup>
+              {data.map(({ id, name, email, cpf }) => (
+                <CommandItem
+                  key={id}
+                  value={id}
+                  className="cursor-pointer"
+                  onSelect={() => {
+                    onChange?.({ id, name, email, cpf })
+                    set(false)
+                  }}
+                >
+                  <div className="flex gap-2.5 items-start">
+                    <Avatar className="size-10 hidden lg:block">
+                      <AvatarFallback className="border">
+                        {initials(name)}
+                      </AvatarFallback>
+                    </Avatar>
+
+                    <ul>
+                      <li className="font-bold">
+                        <Abbr>{name}</Abbr>
+                      </li>
+                      <li className="text-muted-foreground text-sm">
+                        <Abbr>{email}</Abbr>
+                      </li>
+                      {cpf && (
+                        <li className="text-muted-foreground text-sm">
+                          {formatCPF(cpf)}
+                        </li>
+                      )}
+                    </ul>
+                  </div>
+
+                  <CheckIcon
+                    className={cn(
+                      'ml-auto',
+                      value?.id === id ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
@@ -1,6 +1,6 @@
 import type { Route } from './+types/route'

-import { useToggle } from 'ahooks'
+import { useRequest, useToggle } from 'ahooks'
 import {
  CalendarIcon,
  CopyIcon,
@@ -10,15 +10,15 @@ import {
  XIcon,
  ChevronsUpDownIcon,
  CheckIcon,
-  BookIcon,
-  UserIcon
+  BookIcon
 } from 'lucide-react'
-import { Link } from 'react-router'
+import { Link, useParams } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
-import { Fragment, use, useMemo, useState } from 'react'
+import { Fragment, use, useEffect, useMemo, useState } from 'react'
 import { format } from 'date-fns'
 import { ptBR } from 'react-day-picker/locale'
 import { zodResolver } from '@hookform/resolvers/zod'
+import Fuse from 'fuse.js'

 import {
  Command,
@@ -61,10 +61,10 @@ import { Label } from '@repo/ui/components/ui/label'
 import { Calendar } from '@repo/ui/components/ui/calendar'
 import { createSearch } from '@repo/util/meili'
 import { cn } from '@repo/ui/lib/utils'
-import Fuse from 'fuse.js'
 import { useIsMobile } from '@repo/ui/hooks/use-mobile'

 import { formSchema, type Schema, MAX_ITEMS } from './data'
+import { AsyncCombobox } from './async-combobox'

 export function meta({}: Route.MetaArgs) {
  return [{ title: 'Adicionar matrícula' }]
@@ -86,16 +86,20 @@ export async function action({}: Route.ActionArgs) {
  return {}
 }

+const emptyRow = {
+  user: undefined,
+  course: undefined,
+  scheduled_for: undefined
+}
+
 export default function Route({
  loaderData: { courses }
 }: Route.ComponentProps) {
+  const { orgid } = useParams()
+  const [data, setData] = useState({})
  const form = useForm({
    resolver: zodResolver(formSchema),
-    defaultValues: {
-      enrollments: [
-        { user: undefined, course: undefined, scheduled_for: undefined }
-      ]
-    }
+    defaultValues: { enrollments: [emptyRow] }
  })
  const { formState, control, handleSubmit, getValues } = form
  const { fields, insert, remove, append } = useFieldArray({
@@ -104,17 +108,25 @@ export default function Route({
  })

  const onSubmit = async (data: Schema) => {
-    console.log(data)
+    setData(data)
+  }
+
+  const onSearch = async (search: string) => {
+    const params = new URLSearchParams({ q: search })
+    const r = await fetch(`/${orgid}/users.json?${params.toString()}`)
+    const { hits } = (await r.json()) as { hits: any[] }
+    return hits
  }

  const duplicateRow = (index: number, times: number = 1) => {
    if (fields.length + times > MAX_ITEMS) {
-      return
+      return null
    }

-    const values = getValues(`enrollments.${index}`)
+    const { user, ...rest } = getValues(`enrollments.${index}`)
    Array.from({ length: times }, (_, i) => {
-      insert(index + 1 + i, values)
+      // @ts-ignore
+      insert(index + 1 + i, rest)
    })
  }

@@ -145,7 +157,7 @@ export default function Route({
          <CardHeader>
            <CardTitle className="text-2xl">Adicionar matrícula</CardTitle>
            <CardDescription>
-              Siga os passos abaixo para adicionar uma nova matrícula
+              Siga os passos abaixo para adicionar novas matrículas.
            </CardDescription>
          </CardHeader>

@@ -162,21 +174,28 @@ export default function Route({
                <div className="max-lg:hidden text-foreground font-medium text-sm">
                  Matriculado em
                </div>
-                <div></div>
+                <div>{/**/}</div>
              </>

              {/* Rows */}
              <>
                {fields.map((field, index) => (
                  <Fragment key={field.id}>
+                    {/* Separator only for mobile */}
                    {index >= 1 && <div className="h-2.5 lg:hidden"></div>}

-                    <InputGroup>
-                      <InputGroupInput placeholder="Colaborador" />
-                      <InputGroupAddon>
-                        <UserIcon />
-                      </InputGroupAddon>
-                    </InputGroup>
+                    <Controller
+                      control={control}
+                      name={`enrollments.${index}.user`}
+                      render={({ field: { value, onChange } }) => (
+                        <AsyncCombobox
+                          value={value}
+                          title="Colaborador"
+                          onChange={onChange}
+                          onSearch={onSearch}
+                        />
+                      )}
+                    />

                    <Controller
                      control={control}
@@ -233,15 +252,8 @@ export default function Route({

            <Button
              type="button"
-              onClick={() =>
-                append({
              // @ts-ignore
-                  user: undefined,
-                  // @ts-ignore
-                  course: undefined,
-                  scheduled_for: undefined
-                })
-              }
+              onClick={() => append(emptyRow)}
              className="cursor-pointer"
              disabled={fields.length == MAX_ITEMS}
              variant="outline"
@@ -258,11 +270,17 @@ export default function Route({
              disabled={formState.isSubmitting}
            >
              {formState.isSubmitting && <Spinner />}
-              Continuar
+              Matricular
            </Button>
          </CardContent>
        </Card>
      </form>
+
+      {data && (
+        <pre className="whitespace-pre-wrap text-xs bg-muted p-2 rounded">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      )}
    </div>
  )
 }
@@ -281,7 +299,7 @@ interface FacetedFilterProps {
 }

 function FacetedFilter({ value, onChange, options }: FacetedFilterProps) {
-  const [search, setSearch] = useState('')
+  const [search, setSearch] = useState<string>('')
  const [open, { set }] = useToggle()
  const { hits } = use(options)
  const fuse = useMemo(() => {
@@ -318,7 +336,7 @@ function FacetedFilter({ value, onChange, options }: FacetedFilterProps) {
        </InputGroup>
      </PopoverTrigger>

-      <PopoverContent className="w-72 p-0" align="start">
+      <PopoverContent className="lg:w-84 p-0" align="start">
        <Command shouldFilter={false}>
          <CommandInput
            placeholder="Curso"
@@ -458,7 +476,7 @@ function DuplicateRowMultipleTimes({
        </Button>
      </PopoverTrigger>

-      <PopoverContent align={isMobile ? 'start' : 'end'} className="w-80">
+      <PopoverContent align={isMobile ? 'start' : 'end'} className="w-82">
        <form
          onSubmit={(e) => {
            e.stopPropagation()
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.users[.]json/route.ts
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.users[.]json/route.ts
@@ -0,0 +1,30 @@
+import type { Route } from './+types/route'
+
+import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
+import { data } from 'react-router'
+
+import { createSearch } from '@repo/util/meili'
+
+export async function loader({ params, context, request }: Route.LoaderArgs) {
+  const { searchParams } = new URL(request.url)
+  const { orgid } = params
+  const query = searchParams.get('q') || ''
+  const sort = searchParams.get('sort') || 'createDate:desc'
+  const page = Number(searchParams.get('p')) + 1
+  const hitsPerPage = Number(searchParams.get('perPage')) || 25
+
+  // Post-migration (users): rename `tenant_id` to `org_id`
+  let builder = new MeiliSearchFilterBuilder().where('tenant_id', '=', orgid)
+
+  const r = await createSearch({
+    index: 'betaeducacao-prod-users_d2o3r5gmm4it7j',
+    filter: builder.build(),
+    sort: [sort],
+    query,
+    page,
+    hitsPerPage,
+    env: context.cloudflare.env
+  })
+
+  return data(r)
+}
--- a/apps/insights.saladeaula.digital/app/routes/_app.orgs._index/route.tsx
+++ b/apps/insights.saladeaula.digital/app/routes/_app.orgs._index/route.tsx
@@ -21,7 +21,7 @@ export async function loader({ context, request }: Route.LoaderArgs) {
  const page = Number(searchParams.get('p')) + 1
  const hitsPerPage = Number(searchParams.get('perPage')) || 25

-  const users = createSearch({
+  const orgs = createSearch({
    index: 'betaeducacao-prod-users_d2o3r5gmm4it7j',
    sort: ['createDate:desc', 'create_date:desc'],
    filter: 'cnpj EXISTS',
@@ -31,7 +31,7 @@ export async function loader({ context, request }: Route.LoaderArgs) {
    env: context.cloudflare.env
  })

-  return { data: users }
+  return { data: orgs }
 }

 export default function Route({ loaderData: { data } }: Route.ComponentProps) {
--- a/apps/insights.saladeaula.digital/app/routes/_app.orgs[.]json/route.ts
+++ b/apps/insights.saladeaula.digital/app/routes/_app.orgs[.]json/route.ts
@@ -0,0 +1,23 @@
+import type { Route } from './+types/route'
+
+import { createSearch } from '@repo/util/meili'
+import { data } from 'react-router'
+
+export async function loader({ context, request }: Route.LoaderArgs) {
+  const { searchParams } = new URL(request.url)
+  const query = searchParams.get('q') || ''
+  const page = Number(searchParams.get('p')) + 1
+  const hitsPerPage = Number(searchParams.get('perPage')) || 25
+
+  const r = await createSearch({
+    index: 'betaeducacao-prod-users_d2o3r5gmm4it7j',
+    sort: ['createDate:desc', 'create_date:desc'],
+    filter: 'cnpj EXISTS',
+    query,
+    page,
+    hitsPerPage,
+    env: context.cloudflare.env
+  })
+
+  return data(r)
+}
--- a/apps/saladeaula.digital/app/routes/index.tsx
+++ b/apps/saladeaula.digital/app/routes/index.tsx
@@ -104,7 +104,7 @@ export default function Component({
        <div className="flex gap-2.5">
          <div className="w-full xl:w-1/3">
            <SearchForm
-              defaultValue={s || ''}
+              defaultValue={search || ''}
              placeholder={
                <>
                  Digite <Kbd>/</Kbd> para pesquisar
--- a/packages/ui/src/components/faceted-filter.tsx
+++ b/packages/ui/src/components/faceted-filter.tsx
@@ -78,6 +78,7 @@ export function FacetedFilter({
          )}
        </Button>
      </PopoverTrigger>
+
      <PopoverContent className="w-[200px] p-0" align="start">
        <Command>
          <CommandInput placeholder={title} />
@@ -120,6 +121,7 @@ export function FacetedFilter({
                )
              })}
            </CommandGroup>
+
            {selectedValues.size > 0 && (
              <>
                <CommandSeparator />