feat: protect ui based on roles

socialappslab · Aug 8, 2024 · f6dd220 · f6dd220
1 parent b32e2d5
commit f6dd220
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 23 deletions.
diff --git a/src/components/list/CityList.tsx b/src/components/list/CityList.tsx
@@ -9,6 +9,8 @@ import { HeadCell } from '../../themed/table/DataTable';
 import FilteredDataTable from './FilteredDataTable';
 import useStateContext from '@/hooks/useStateContext';
 import { IUser } from '@/schemas/auth';
+import ProtectedView from '@/layout/ProtectedView';
+import { CITIES_CREATE, CITIES_EDIT } from '@/constants/permissions';
 
 const headCells: HeadCell<City>[] = [
   {
@@ -45,14 +47,30 @@ export default function RoleList() {
 
   const actions = (row: City, loading?: boolean) => (
     <div className="flex flex-row">
-      <Button
-        primary
-        disabled={loading}
-        component={Link}
-        to={`${row.id}/edit`}
-        label={t('table.actions.edit')}
-        buttonType="cell"
-      />
+      <ProtectedView hasPermission={[CITIES_EDIT]}>
+        <Button
+          primary
+          disabled={loading}
+          component={Link}
+          to={`${row.id}/edit`}
+          label={t('table.actions.edit')}
+          buttonType="cell"
+        />
+      </ProtectedView>
+    </div>
+  );
+
+  const create = () => (
+    <div className="flex flex-row">
+      <ProtectedView hasPermission={[CITIES_CREATE]}>
+        <Button
+          primary={false}
+          variant="outlined"
+          className="justify-start text-md"
+          label={t(`table.create`)}
+          onClick={() => setOpenDialog(true)}
+        />
+      </ProtectedView>
     </div>
   );
 
@@ -67,7 +85,7 @@ export default function RoleList() {
         headCells={headCells}
         title={t('menu.cities')}
         subtitle={t('menu.descriptions.cities')}
-        onCreate={() => setOpenDialog(true)}
+        create={create}
         actions={actions}
         updateControl={updateControl}
       />

diff --git a/src/components/list/FilteredDataTable.tsx b/src/components/list/FilteredDataTable.tsx
@@ -31,7 +31,7 @@ interface FilteredDataTableProps<T> extends Omit<DataTableProps<T>, 'rows'> {
   defaultFilter?: string;
   updateControl?: number;
   actions?: (row: T, loading?: boolean) => JSX.Element;
-  onCreate?: () => void;
+  create?: () => JSX.Element;
 }
 
 interface FilterOptionsObject {
@@ -48,7 +48,7 @@ export default function FilteredDataTable<T>({
   defaultFilter,
   updateControl,
   actions,
-  onCreate,
+  create,
   ...otherDataTableProps
 }: FilteredDataTableProps<T>) {
   const { t } = useTranslation('translation');
@@ -243,17 +243,7 @@ export default function FilteredDataTable<T>({
             onClick={handleSearch}
           />
         </Grid>
-        {onCreate && (
-          <Grid item>
-            <Button
-              primary={false}
-              variant="outlined"
-              className="justify-start text-md"
-              label={t(`table.create`)}
-              onClick={onCreate}
-            />
-          </Grid>
-        )}
+        {create && <Grid item>{create()}</Grid>}
       </Grid>
       <TypedDataTable
         {...otherDataTableProps}

diff --git a/src/components/list/RoleList.tsx b/src/components/list/RoleList.tsx
@@ -5,6 +5,9 @@ import CreateRoleDialog from '@/pages/admin/CreateRoleDialog';
 import { Role } from '../../schemas/entities';
 import { HeadCell } from '../../themed/table/DataTable';
 import FilteredDataTable from './FilteredDataTable';
+import { ROLES_CREATE } from '@/constants/permissions';
+import ProtectedView from '@/layout/ProtectedView';
+import Button from '@/themed/button/Button';
 
 const headCells: HeadCell<Role>[] = [
   {
@@ -37,6 +40,20 @@ export default function RoleList() {
     setUpdateControl((prev) => prev + 1);
   };
 
+  const create = () => (
+    <div className="flex flex-row">
+      <ProtectedView hasPermission={[ROLES_CREATE]}>
+        <Button
+          primary={false}
+          variant="outlined"
+          className="justify-start text-md"
+          label={t(`table.create`)}
+          onClick={() => setOpenDialog(true)}
+        />
+      </ProtectedView>
+    </div>
+  );
+
   return (
     <>
       <Dialog container={rootElement} fullWidth maxWidth="sm" open={openDialog} onClose={handleClose}>
@@ -48,7 +65,7 @@ export default function RoleList() {
         headCells={headCells}
         title={t('menu.roles')}
         subtitle={t('menu.descriptions.roles')}
-        onCreate={() => setOpenDialog(true)}
+        create={create}
         updateControl={updateControl}
       />
     </>