@hed-hog/lms 0.0.347 → 0.0.350

package/hedhog/frontend/app/_components/course-picker.tsx.ejs

@@ -0,0 +1,228 @@
+'use client';
+
+import { CourseAvatar } from '@/app/(app)/(libraries)/lms/_components/course-avatar';
+import { Button } from '@/components/ui/button';
+import {
+  EntityPicker,
+  type EntityPickerValue,
+} from '@/components/ui/entity-picker';
+import { useApp } from '@hed-hog/next-app-provider';
+import { Pencil, Plus } from 'lucide-react';
+import { useCallback } from 'react';
+import type { FieldValues, Path, UseFormReturn } from 'react-hook-form';
+
+type CoursePickerOption = {
+  id: number;
+  title: string;
+  code?: string;
+  logoFileId?: number | null;
+  offeringType?: 'scheduled' | 'on_demand' | 'blended' | string | null;
+};
+
+type CoursePickerListResponse = {
+  data: CoursePickerOption[];
+  lastPage?: number;
+};
+
+type CoursePickerProps<TFieldValues extends FieldValues> = {
+  form: UseFormReturn<TFieldValues>;
+  name: Path<TFieldValues>;
+  selectedCourseTitle?: string;
+  placeholder: string;
+  entityLabel: string;
+  searchPlaceholder?: string;
+  emptyStateDescription?: string;
+  loadingLabel?: string;
+  noResultsLabel?: string;
+  valueType?: 'number' | 'string';
+  disabled?: boolean;
+  allowClearSelection?: boolean;
+  showCreateButton?: boolean;
+  showEditButton?: boolean;
+  editButtonLabel?: string;
+  createButtonLabel?: string;
+  searchEndpoint?: string;
+  searchExtraParams?: Record<string, unknown>;
+  pageSize?: number;
+  refreshToken?: unknown;
+  isOptionDisabled?: (option: CoursePickerOption) => boolean;
+  onCreateClick?: () => void;
+  onEditClick?: (selected: CoursePickerOption | null) => void;
+  onSelectionChange?: (
+    value: EntityPickerValue,
+    option: CoursePickerOption | null
+  ) => void;
+};
+
+export function CoursePicker<TFieldValues extends FieldValues>({
+  form,
+  name,
+  selectedCourseTitle,
+  placeholder,
+  entityLabel,
+  searchPlaceholder,
+  emptyStateDescription,
+  loadingLabel,
+  noResultsLabel,
+  valueType = 'number',
+  disabled = false,
+  allowClearSelection = false,
+  showCreateButton = true,
+  showEditButton = false,
+  editButtonLabel = 'Editar curso',
+  createButtonLabel = 'Criar curso',
+  searchEndpoint = '/lms/courses',
+  searchExtraParams,
+  pageSize = 20,
+  refreshToken,
+  isOptionDisabled,
+  onCreateClick,
+  onEditClick,
+  onSelectionChange,
+}: CoursePickerProps<TFieldValues>) {
+  const { request } = useApp();
+
+  const getOptionValue = useCallback(
+    (option: CoursePickerOption) => option.id,
+    []
+  );
+
+  const getOptionLabel = useCallback(
+    (option: CoursePickerOption) => option.title,
+    []
+  );
+
+  const selectedId = form.watch(name);
+  const hasSelectedCourse =
+    selectedId !== null &&
+    selectedId !== undefined &&
+    String(selectedId).trim().length > 0;
+
+  const getOfferingTypeLabel = useCallback(
+    (offeringType?: CoursePickerOption['offeringType']) => {
+      if (offeringType === 'scheduled') return 'Agendado';
+      if (offeringType === 'blended') return 'Hibrido';
+      if (offeringType === 'on_demand') return 'Sob Demanda';
+      return null;
+    },
+    []
+  );
+
+  return (
+    <div className="flex items-end gap-2">
+      <div className="min-w-0 flex-1">
+        <EntityPicker<CoursePickerOption, TFieldValues>
+          form={form}
+          name={name}
+          valueType={valueType}
+          placeholder={placeholder}
+          refreshToken={refreshToken}
+          entityLabel={entityLabel}
+          initialSelectedLabel={selectedCourseTitle ?? ''}
+          searchPlaceholder={searchPlaceholder ?? placeholder}
+          emptyStateDescription={
+            emptyStateDescription ?? 'Nenhum curso encontrado.'
+          }
+          loadingLabel={loadingLabel ?? 'Carregando cursos...'}
+          noResultsLabel={noResultsLabel ?? 'Nenhum curso encontrado.'}
+          disabled={disabled}
+          clearable={allowClearSelection}
+          showCreateButton={false}
+          renderOption={({ option, isDisabled }) => (
+            <div
+              className={`flex items-center gap-2 py-0.5 ${isDisabled ? 'opacity-60' : ''}`}
+            >
+              <CourseAvatar
+                fileId={option.logoFileId}
+                title={option.title}
+                className="size-8 shrink-0 rounded-lg"
+                iconSize="size-4"
+              />
+              <div className="min-w-0">
+                <p className="truncate text-sm">{option.title}</p>
+                <p className="truncate text-xs text-muted-foreground">
+                  {option.code ?? '—'} · #{option.id}
+                  {getOfferingTypeLabel(option.offeringType)
+                    ? ` · ${getOfferingTypeLabel(option.offeringType)}`
+                    : ''}
+                  {isDisabled ? ' · indisponivel para turma' : ''}
+                </p>
+              </div>
+            </div>
+          )}
+          isOptionDisabled={isOptionDisabled}
+          renderSelectedValue={({ option, label }) => (
+            <div className="flex items-center gap-2">
+              <CourseAvatar
+                fileId={option?.logoFileId}
+                title={option?.title ?? label}
+                className="size-5 shrink-0 rounded"
+                iconSize="size-3"
+              />
+              <span className="truncate">{option?.title ?? label}</span>
+            </div>
+          )}
+          onChange={(value, option) => {
+            onSelectionChange?.(value, option);
+          }}
+          loadOptions={async ({ page, pageSize: remotePageSize, search }) => {
+            const response = await request<CoursePickerListResponse>({
+              url: searchEndpoint,
+              method: 'GET',
+              params: {
+                page,
+                pageSize: remotePageSize,
+                ...(search.trim() ? { search: search.trim() } : {}),
+                ...(searchExtraParams ?? {}),
+              },
+            });
+
+            return {
+              items: response.data?.data ?? [],
+              hasMore: page < (response.data?.lastPage ?? 1),
+            };
+          }}
+          pageSize={pageSize}
+          getOptionValue={getOptionValue}
+          getOptionLabel={getOptionLabel}
+        />
+      </div>
+
+      {showEditButton ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="h-10 w-10 shrink-0"
+          disabled={disabled || !hasSelectedCourse}
+          onClick={() => {
+            const selectedOption: CoursePickerOption | null = hasSelectedCourse
+              ? {
+                  id: Number(selectedId),
+                  title: selectedCourseTitle ?? '',
+                }
+              : null;
+            onEditClick?.(selectedOption);
+          }}
+          aria-label={editButtonLabel}
+        >
+          <Pencil className="h-4 w-4" />
+        </Button>
+      ) : null}
+
+      {showCreateButton ? (
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="h-10 w-10 shrink-0"
+          disabled={disabled}
+          onClick={onCreateClick}
+          aria-label={createButtonLabel}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/hedhog/frontend/app/_lib/hooks/use-lms-realtime-refresh.ts.ejs

@@ -0,0 +1,58 @@
+import { useQuery } from '@hed-hog/next-app-provider';
+import { useEffect, useRef } from 'react';
+
+export type RequestFn = (input: {
+  url: string;
+  method: string;
+  data?: unknown;
+}) => Promise<{ data: unknown }>;
+
+type LmsRealtimeCursorResponse = {
+  cursor: number;
+  updatedAt: string | null;
+};
+
+async function fetchLms<T>(request: RequestFn, url: string): Promise<T> {
+  const response = await request({ url, method: 'GET' });
+  return response.data as T;
+}
+
+export function useLmsRealtimeRefresh({
+  request,
+  enabled = true,
+  pollIntervalMs = 5000,
+  onRefresh,
+}: {
+  request: RequestFn;
+  enabled?: boolean;
+  pollIntervalMs?: number;
+  onRefresh: () => void | Promise<void>;
+}) {
+  const lastCursorRef = useRef<number | null>(null);
+
+  const { data } = useQuery<LmsRealtimeCursorResponse>({
+    queryKey: ['lms-realtime-cursor'],
+    queryFn: () => fetchLms<LmsRealtimeCursorResponse>(request, '/lms/realtime/cursor'),
+    enabled,
+    refetchInterval: enabled ? pollIntervalMs : false,
+    refetchIntervalInBackground: true,
+    placeholderData: (previous) => previous,
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const cursor = data?.cursor;
+    if (typeof cursor !== 'number') return;
+
+    if (lastCursorRef.current === null) {
+      lastCursorRef.current = cursor;
+      return;
+    }
+
+    if (cursor !== lastCursorRef.current) {
+      lastCursorRef.current = cursor;
+      void onRefresh();
+    }
+  }, [data?.cursor, enabled, onRefresh]);
+}