@hed-hog/core 0.0.237 → 0.0.238

package/hedhog/data/route.yaml

@@ -446,12 +446,24 @@
     role:
       - where:
           slug: admin
+- url: /file/open/:token
+  method: GET
+  relations:
+    role:
+      - where:
+          slug: admin
 - url: /file/download/:token
   method: GET
   relations:
     role:
       - where:
           slug: admin
+- url: /file/open/:id
+  method: PUT
+  relations:
+    role:
+      - where:
+          slug: admin
 - url: /file/download/:id
   method: PUT
   relations:
@@ -766,6 +778,12 @@
     role:
       - where:
           slug: admin
+- url: /dashboard-role/batch
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
 - url: /dashboard-role/:id
   method: DELETE
   relations:
@@ -790,6 +808,12 @@
     role:
       - where:
           slug: admin
+- url: /dashboard-component-role/batch
+  method: POST
+  relations:
+    role:
+      - where:
+          slug: admin
 - url: /dashboard-component-role/:id
   method: DELETE
   relations:

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.tsx.ejs

@@ -298,10 +298,28 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
             },
           });
 
+          const fileId = response.data?.id;
+
+          if (!fileId) {
+            throw new Error('File ID not returned');
+          }
+
+          const openResponse: any = await request({
+            url: `/file/open/${fileId}`,
+            method: 'PUT',
+          });
+
+          const openUrl = openResponse?.data?.url;
+
+          if (!openUrl) {
+            throw new Error('Temporary open URL not returned');
+          }
+
           const fileUrl =
-            String(process.env.NEXT_PUBLIC_API_BASE_URL) +
-            '/file/open/' +
-            response.data?.id;
+            typeof openUrl === 'string' && openUrl.startsWith('http')
+              ? openUrl
+              : `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}${openUrl}`;
+
           handleChangeValue(formatValue(fileUrl));
           showToastHandler('success', t('fileUploaded'));
         } catch (error) {

package/hedhog/frontend/app/dashboard/management/tabs/components-tab.tsx.ejs

@@ -10,6 +10,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -30,6 +31,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   Table,
   TableBody,
@@ -38,6 +47,11 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import * as TablerIcons from '@tabler/icons-react';
@@ -50,6 +64,7 @@ import {
   IconGlobe,
   IconPlus,
   IconTrash,
+  IconX,
 } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
@@ -74,6 +89,25 @@ interface Component {
     name: string;
     description?: string;
   }>;
+  dashboard_component_role?: Array<{
+    role_id?: number;
+    role: {
+      id?: number;
+      role_id?: number;
+      slug: string;
+      role_locale?: Array<{
+        locale: { code: string };
+        name: string;
+      }>;
+    };
+  }>;
+}
+
+interface RoleOption {
+  id?: number;
+  role_id?: number;
+  slug: string;
+  name?: string;
 }
 
 export function ComponentsTab() {
@@ -87,9 +121,20 @@ export function ComponentsTab() {
   const [componentToDelete, setComponentToDelete] = useState<number | null>(
     null
   );
+  const [removeRoleDialogOpen, setRemoveRoleDialogOpen] = useState(false);
+  const [roleToRemove, setRoleToRemove] = useState<{
+    componentId: number;
+    roleId: number;
+    roleName: string;
+  } | null>(null);
+  const [roleSheetOpen, setRoleSheetOpen] = useState(false);
+  const [componentForRoleSheet, setComponentForRoleSheet] =
+    useState<Component | null>(null);
+  const [selectedRoleIds, setSelectedRoleIds] = useState<number[]>([]);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [searchQuery, setSearchQuery] = useState('');
+  const [roleSearchQuery, setRoleSearchQuery] = useState('');
   const debouncedSearch = useDebounce(searchQuery, 500);
 
   const renderIcon = (iconName?: string) => {
@@ -145,7 +190,23 @@ export function ComponentsTab() {
     },
   });
 
+  const { data: rolesData, isLoading: isLoadingRoles } = useQuery<{
+    data: RoleOption[];
+    total: number;
+  }>({
+    queryKey: ['roles-for-component-sheet', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: RoleOption[]; total: number }>({
+        url: '/role?page=1&pageSize=1000',
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+  });
+
   const components = paginatedData?.data ?? [];
+  const availableRoles = rolesData?.data ?? [];
   const total = paginatedData?.total ?? 0;
   const totalPages = Math.ceil(total / pageSize);
 
@@ -291,6 +352,81 @@ export function ComponentsTab() {
     }
   };
 
+  const handleOpenRoleSheet = (component: Component) => {
+    setComponentForRoleSheet(component);
+    setSelectedRoleIds([]);
+    setRoleSheetOpen(true);
+  };
+
+  const handleRoleSelection = (roleId: number, checked: boolean) => {
+    setSelectedRoleIds((prev) => {
+      if (checked) {
+        if (prev.includes(roleId)) return prev;
+        return [...prev, roleId];
+      }
+
+      return prev.filter((id) => id !== roleId);
+    });
+  };
+
+  const handleAddRolesToComponent = async () => {
+    if (!componentForRoleSheet) return;
+
+    if (selectedRoleIds.length === 0) {
+      toast.error(t('selectRoleRequired'));
+      return;
+    }
+
+    try {
+      await request({
+        url: '/dashboard-component-role/batch',
+        method: 'POST',
+        data: {
+          component_id: componentForRoleSheet.id,
+          role_ids: selectedRoleIds,
+        },
+      });
+
+      toast.success(t('roleAdded'));
+      setRoleSheetOpen(false);
+      setComponentForRoleSheet(null);
+      setSelectedRoleIds([]);
+      refetch();
+    } catch (error: any) {
+      console.error('Erro ao adicionar permissões ao componente:', error);
+      toast.error(t('errorAddingRole'));
+    }
+  };
+
+  const handleRoleRemoveClick = (
+    componentId: number,
+    roleId: number,
+    roleName: string
+  ) => {
+    setRoleToRemove({ componentId, roleId, roleName });
+    setRemoveRoleDialogOpen(true);
+  };
+
+  const handleRoleRemoveConfirm = async () => {
+    if (!roleToRemove) return;
+
+    try {
+      await request({
+        url: `/dashboard-component-role/component/${roleToRemove.componentId}/role/${roleToRemove.roleId}`,
+        method: 'DELETE',
+      });
+
+      toast.success(t('roleDeleted'));
+      refetch();
+    } catch (error) {
+      console.error('Erro ao remover permissão do componente:', error);
+      toast.error(t('errorDeletingRole'));
+    } finally {
+      setRemoveRoleDialogOpen(false);
+      setRoleToRemove(null);
+    }
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex justify-between items-center">
@@ -581,16 +717,16 @@ export function ComponentsTab() {
             <TableRow>
               <TableHead>{t('slug')}</TableHead>
               <TableHead>{t('name')}</TableHead>
-              <TableHead>{t('descriptionLabel')}</TableHead>
               <TableHead>{t('size')}</TableHead>
               <TableHead>{t('resizable')}</TableHead>
+              <TableHead>{t('role')}</TableHead>
               <TableHead className="w-[100px]">{t('actions')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {isLoading ? (
               <TableRow>
-                <TableCell colSpan={7} className="text-center">
+                <TableCell colSpan={6} className="text-center">
                   {t('loading')}
                 </TableCell>
               </TableRow>
@@ -605,19 +741,111 @@ export function ComponentsTab() {
                   (l) => l.locale.code === currentLocaleCode
                 )?.description;
 
+                const roleEntries = (
+                  component.dashboard_component_role?.map((componentRole) => {
+                    const roleId =
+                      componentRole.role_id ??
+                      componentRole.role.role_id ??
+                      componentRole.role.id;
+
+                    if (!roleId) return null;
+
+                    const localeRoleName = componentRole.role.role_locale?.find(
+                      (roleLocale) =>
+                        roleLocale.locale.code === currentLocaleCode
+                    )?.name;
+
+                    return {
+                      id: roleId,
+                      name: localeRoleName || componentRole.role.slug,
+                    };
+                  }) || []
+                ).filter(
+                  (
+                    roleEntry,
+                    index,
+                    array
+                  ): roleEntry is { id: number; name: string } =>
+                    !!roleEntry &&
+                    array.findIndex((item) => item?.id === roleEntry.id) ===
+                      index
+                );
+
                 return (
                   <TableRow key={component.id}>
                     <TableCell className="font-mono">
                       {component.slug}
                     </TableCell>
-                    <TableCell>{name}</TableCell>
-                    <TableCell>{description}</TableCell>
+                    <TableCell>
+                      <div className="flex flex-col">
+                        <span>{name}</span>
+                        {description && (
+                          <span className="text-muted-foreground text-xs">
+                            {description}
+                          </span>
+                        )}
+                      </div>
+                    </TableCell>
                     <TableCell>
                       {component.width}x{component.height}
                     </TableCell>
                     <TableCell>
                       {component.is_resizable ? t('yes') : t('no')}
                     </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap items-center gap-1">
+                        {roleEntries.length > 0 ? (
+                          roleEntries.map((roleEntry) => (
+                            <Badge
+                              key={`${component.id}-${roleEntry.id}`}
+                              variant="outline"
+                              className="gap-1 pr-1"
+                            >
+                              <span>{roleEntry.name}</span>
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    type="button"
+                                    className="rounded-sm p-0.5 hover:bg-muted"
+                                    onClick={() =>
+                                      handleRoleRemoveClick(
+                                        component.id,
+                                        roleEntry.id,
+                                        roleEntry.name
+                                      )
+                                    }
+                                    aria-label={`${t('delete')} ${roleEntry.name}`}
+                                  >
+                                    <IconX className="size-3" />
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  {`${t('delete')} ${roleEntry.name}`}
+                                </TooltipContent>
+                              </Tooltip>
+                            </Badge>
+                          ))
+                        ) : (
+                          <span className="text-muted-foreground text-xs mr-1">
+                            {t('noRoles')}
+                          </span>
+                        )}
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="button"
+                              size="icon"
+                              variant="outline"
+                              className="size-6"
+                              onClick={() => handleOpenRoleSheet(component)}
+                            >
+                              <IconPlus className="size-3" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>{t('addRole')}</TooltipContent>
+                        </Tooltip>
+                      </div>
+                    </TableCell>
                     <TableCell>
                       <div className="flex gap-2">
                         <Button
@@ -641,7 +869,7 @@ export function ComponentsTab() {
               })
             ) : (
               <TableRow>
-                <TableCell colSpan={7} className="text-center">
+                <TableCell colSpan={6} className="text-center">
                   {t('noComponents')}
                 </TableCell>
               </TableRow>
@@ -748,6 +976,117 @@ export function ComponentsTab() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      <Dialog
+        open={removeRoleDialogOpen}
+        onOpenChange={setRemoveRoleDialogOpen}
+      >
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('confirmDelete')}</DialogTitle>
+            <DialogDescription>
+              {roleToRemove
+                ? `${t('deleteDescription')} (${roleToRemove.roleName})`
+                : t('deleteDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setRemoveRoleDialogOpen(false)}
+            >
+              {t('cancel')}
+            </Button>
+            <Button variant="destructive" onClick={handleRoleRemoveConfirm}>
+              {t('delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Sheet
+        open={roleSheetOpen}
+        onOpenChange={(openValue) => {
+          setRoleSheetOpen(openValue);
+          if (!openValue) {
+            setComponentForRoleSheet(null);
+            setSelectedRoleIds([]);
+          }
+        }}
+      >
+        <SheetContent side="right" className="sm:max-w-lg overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>{t('addRole')}</SheetTitle>
+            <SheetDescription>
+              {componentForRoleSheet
+                ? `${t('component')}: ${componentForRoleSheet.slug}`
+                : t('manageComponentRoles')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-3 py-4">
+            {isLoadingRoles ? (
+              <p className="text-sm text-muted-foreground">{t('loading')}</p>
+            ) : availableRoles.length > 0 ? (
+              availableRoles.map((role) => {
+                const roleId = role.role_id ?? role.id;
+                if (!roleId) return null;
+
+                const roleName = role.name || role.slug;
+                const alreadyLinked =
+                  componentForRoleSheet?.dashboard_component_role?.some(
+                    (componentRole) =>
+                      (componentRole.role_id ??
+                        componentRole.role.role_id ??
+                        componentRole.role.id) === roleId
+                  ) ?? false;
+
+                const isSelected = selectedRoleIds.includes(roleId);
+
+                return (
+                  <div
+                    key={`available-role-${roleId}`}
+                    className={`flex items-center gap-3 rounded-md border p-3 transition-colors ${
+                      alreadyLinked
+                        ? 'cursor-not-allowed opacity-70'
+                        : 'cursor-pointer hover:bg-muted/40'
+                    } ${isSelected ? 'border-primary bg-primary/5' : ''}`}
+                    onClick={() => {
+                      if (alreadyLinked) return;
+                      handleRoleSelection(roleId, !isSelected);
+                    }}
+                  >
+                    <div onClick={(event) => event.stopPropagation()}>
+                      <Checkbox
+                        checked={alreadyLinked || isSelected}
+                        onCheckedChange={(checked) =>
+                          handleRoleSelection(roleId, checked === true)
+                        }
+                        disabled={alreadyLinked}
+                      />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium truncate">{roleName}</p>
+                      <p className="text-xs text-muted-foreground truncate">
+                        {role.slug}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })
+            ) : (
+              <p className="text-sm text-muted-foreground">{t('noRoles')}</p>
+            )}
+          </div>
+
+          <SheetFooter>
+            <Button variant="outline" onClick={() => setRoleSheetOpen(false)}>
+              {t('cancel')}
+            </Button>
+            <Button onClick={handleAddRolesToComponent}>{t('save')}</Button>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
     </div>
   );
 }