Merge pull request #47 from Lemoncode/feature/edit-record-scene

Feature/edit record scene

Author: manudous

src/common/components/sidebar-menu/item.sidebar-menu.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link as RouterLink } from '@tanstack/react-router';
+import { Link as RouterLink, useLocation } from '@tanstack/react-router';
 
 import MuiLink from '@mui/material/Link';
 import ListItem from '@mui/material/ListItem';
@@ -10,18 +10,18 @@ import ListItemText from '@mui/material/ListItemText';
 interface ItemProps {
   text: string;
   IconComponent?: React.ComponentType;
-  // TODO: implement router links with safe types
   linkPath: string;
 }
 
 export const Item: React.FC<ItemProps> = (props: ItemProps) => {
   const { text, IconComponent, linkPath } = props;
+  const location = useLocation();
+  const isSelected = location.pathname === linkPath;
 
   return (
     <MuiLink component={RouterLink} to={linkPath} underline="none" color="textPrimary">
       <ListItem key={text}>
-        {/* TODO: implement 'active path matching' using the router hook. "/users" path is used below just as an example */}
-        <ListItemButton selected={linkPath === '/users'}>
+        <ListItemButton selected={isSelected}>
           {IconComponent && <ListItemIcon>{<IconComponent />}</ListItemIcon>}
           <ListItemText primary={text} />
         </ListItemButton>

src/common/components/sidebar-menu/sidebar-menu.component.tsx

@@ -21,7 +21,7 @@ export const SidebarMenu: React.FC<Props> = props => {
   return (
     <List className={classes.list(theme, isDrawerOpen)}>
       <Item text="Principal" IconComponent={HomeIcon} linkPath={'/'} />
-      <Item text="Expedientes" IconComponent={FolderIcon} linkPath={'/'} />
+      <Item text="Expedientes" IconComponent={FolderIcon} linkPath={'/records'} />
       <Item text="Empresas" IconComponent={ApartmentIcon} linkPath={'/'} />
       <Item text="Informes" IconComponent={LeaderboardIcon} linkPath={'/'} />
       <Divider variant="middle" />

src/core/router/route-tree.ts

@@ -15,9 +15,11 @@ import { Route as LoginImport } from './../../scenes/login';
 import { Route as AuthImport } from './../../scenes/_auth';
 import { Route as IndexImport } from './../../scenes/index';
 import { Route as AuthUsersIndexImport } from './../../scenes/_auth/users/index';
+import { Route as AuthRecordsIndexImport } from './../../scenes/_auth/records/index';
 import { Route as AuthCreateUserIndexImport } from './../../scenes/_auth/create-user/index';
 import { Route as AuthUsersIdImport } from './../../scenes/_auth/users/$id';
 import { Route as AuthEditUserIdImport } from './../../scenes/_auth/edit-user/$id';
+import { Route as AuthEditRecordIdImport } from './../../scenes/_auth/edit-record/$id';
 
 // Create/Update Routes
 
@@ -44,6 +46,12 @@ const AuthUsersIndexRoute = AuthUsersIndexImport.update({
   getParentRoute: () => AuthRoute,
 } as any);
 
+const AuthRecordsIndexRoute = AuthRecordsIndexImport.update({
+  id: '/records/',
+  path: '/records/',
+  getParentRoute: () => AuthRoute,
+} as any);
+
 const AuthCreateUserIndexRoute = AuthCreateUserIndexImport.update({
   id: '/create-user/',
   path: '/create-user/',
@@ -62,6 +70,12 @@ const AuthEditUserIdRoute = AuthEditUserIdImport.update({
   getParentRoute: () => AuthRoute,
 } as any);
 
+const AuthEditRecordIdRoute = AuthEditRecordIdImport.update({
+  id: '/edit-record/$id',
+  path: '/edit-record/$id',
+  getParentRoute: () => AuthRoute,
+} as any);
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -87,6 +101,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LoginImport;
       parentRoute: typeof rootRoute;
     };
+    '/_auth/edit-record/$id': {
+      id: '/_auth/edit-record/$id';
+      path: '/edit-record/$id';
+      fullPath: '/edit-record/$id';
+      preLoaderRoute: typeof AuthEditRecordIdImport;
+      parentRoute: typeof AuthImport;
+    };
     '/_auth/edit-user/$id': {
       id: '/_auth/edit-user/$id';
       path: '/edit-user/$id';
@@ -108,6 +129,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthCreateUserIndexImport;
       parentRoute: typeof AuthImport;
     };
+    '/_auth/records/': {
+      id: '/_auth/records/';
+      path: '/records';
+      fullPath: '/records';
+      preLoaderRoute: typeof AuthRecordsIndexImport;
+      parentRoute: typeof AuthImport;
+    };
     '/_auth/users/': {
       id: '/_auth/users/';
       path: '/users';
@@ -121,16 +149,20 @@ declare module '@tanstack/react-router' {
 // Create and export the route tree
 
 interface AuthRouteChildren {
+  AuthEditRecordIdRoute: typeof AuthEditRecordIdRoute;
   AuthEditUserIdRoute: typeof AuthEditUserIdRoute;
   AuthUsersIdRoute: typeof AuthUsersIdRoute;
   AuthCreateUserIndexRoute: typeof AuthCreateUserIndexRoute;
+  AuthRecordsIndexRoute: typeof AuthRecordsIndexRoute;
   AuthUsersIndexRoute: typeof AuthUsersIndexRoute;
 }
 
 const AuthRouteChildren: AuthRouteChildren = {
+  AuthEditRecordIdRoute: AuthEditRecordIdRoute,
   AuthEditUserIdRoute: AuthEditUserIdRoute,
   AuthUsersIdRoute: AuthUsersIdRoute,
   AuthCreateUserIndexRoute: AuthCreateUserIndexRoute,
+  AuthRecordsIndexRoute: AuthRecordsIndexRoute,
   AuthUsersIndexRoute: AuthUsersIndexRoute,
 };
 
@@ -140,19 +172,23 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute;
   '': typeof AuthRouteWithChildren;
   '/login': typeof LoginRoute;
+  '/edit-record/$id': typeof AuthEditRecordIdRoute;
   '/edit-user/$id': typeof AuthEditUserIdRoute;
   '/users/$id': typeof AuthUsersIdRoute;
   '/create-user': typeof AuthCreateUserIndexRoute;
+  '/records': typeof AuthRecordsIndexRoute;
   '/users': typeof AuthUsersIndexRoute;
 }
 
 export interface FileRoutesByTo {
   '/': typeof IndexRoute;
   '': typeof AuthRouteWithChildren;
   '/login': typeof LoginRoute;
+  '/edit-record/$id': typeof AuthEditRecordIdRoute;
   '/edit-user/$id': typeof AuthEditUserIdRoute;
   '/users/$id': typeof AuthUsersIdRoute;
   '/create-user': typeof AuthCreateUserIndexRoute;
+  '/records': typeof AuthRecordsIndexRoute;
   '/users': typeof AuthUsersIndexRoute;
 }
 
@@ -161,25 +197,47 @@ export interface FileRoutesById {
   '/': typeof IndexRoute;
   '/_auth': typeof AuthRouteWithChildren;
   '/login': typeof LoginRoute;
+  '/_auth/edit-record/$id': typeof AuthEditRecordIdRoute;
   '/_auth/edit-user/$id': typeof AuthEditUserIdRoute;
   '/_auth/users/$id': typeof AuthUsersIdRoute;
   '/_auth/create-user/': typeof AuthCreateUserIndexRoute;
+  '/_auth/records/': typeof AuthRecordsIndexRoute;
   '/_auth/users/': typeof AuthUsersIndexRoute;
 }
 
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath;
-  fullPaths: '/' | '' | '/login' | '/edit-user/$id' | '/users/$id' | '/create-user' | '/users';
+  fullPaths:
+    | '/'
+    | ''
+    | '/login'
+    | '/edit-record/$id'
+    | '/edit-user/$id'
+    | '/users/$id'
+    | '/create-user'
+    | '/records'
+    | '/users';
   fileRoutesByTo: FileRoutesByTo;
-  to: '/' | '' | '/login' | '/edit-user/$id' | '/users/$id' | '/create-user' | '/users';
+  to:
+    | '/'
+    | ''
+    | '/login'
+    | '/edit-record/$id'
+    | '/edit-user/$id'
+    | '/users/$id'
+    | '/create-user'
+    | '/records'
+    | '/users';
   id:
     | '__root__'
     | '/'
     | '/_auth'
     | '/login'
+    | '/_auth/edit-record/$id'
     | '/_auth/edit-user/$id'
     | '/_auth/users/$id'
     | '/_auth/create-user/'
+    | '/_auth/records/'
     | '/_auth/users/';
   fileRoutesById: FileRoutesById;
 }
@@ -215,15 +273,21 @@ export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileT
     "/_auth": {
       "filePath": "_auth.tsx",
       "children": [
+        "/_auth/edit-record/$id",
         "/_auth/edit-user/$id",
         "/_auth/users/$id",
         "/_auth/create-user/",
+        "/_auth/records/",
         "/_auth/users/"
       ]
     },
     "/login": {
       "filePath": "login.tsx"
     },
+    "/_auth/edit-record/$id": {
+      "filePath": "_auth/edit-record/$id.tsx",
+      "parent": "/_auth"
+    },
     "/_auth/edit-user/$id": {
       "filePath": "_auth/edit-user/$id.tsx",
       "parent": "/_auth"
@@ -236,6 +300,10 @@ export const routeTree = rootRoute._addFileChildren(rootRouteChildren)._addFileT
       "filePath": "_auth/create-user/index.tsx",
       "parent": "/_auth"
     },
+    "/_auth/records/": {
+      "filePath": "_auth/records/index.tsx",
+      "parent": "/_auth"
+    },
     "/_auth/users/": {
       "filePath": "_auth/users/index.tsx",
       "parent": "/_auth"

src/modules/records/edit-certifications/edit-certifications.pod.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const EditCertificationsPod: React.FC = () => {
+  return <h2>Certificaciones</h2>;
+};

src/modules/records/edit-certifications/index.ts

@@ -0,0 +1 @@
+export * from './edit-certifications.pod';

src/modules/records/edit-financial-information/edit-financial-information.pod.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const EditFinancialInformationPod: React.FC = () => {
+  return <h2>Datos Económicos</h2>;
+};

src/modules/records/edit-financial-information/index.ts

@@ -0,0 +1 @@
+export * from './edit-financial-information.pod';

src/modules/records/edit-general-information/edit-general-information.pod.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface Props {
+  id: string;
+}
+
+export const EditGeneralInformationPod: React.FC<Props> = props => {
+  const { id } = props;
+
+  return <h2>Datos Generales id: {id}</h2>;
+};

src/modules/records/edit-general-information/index.ts

@@ -0,0 +1 @@
+export * from './edit-general-information.pod';

src/modules/records/edit-notes/edit.notes.pod.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const EditNotesPod: React.FC = () => {
+  return <h2>Notas</h2>;
+};

src/modules/records/edit-notes/index.ts

@@ -0,0 +1 @@
+export * from './edit.notes.pod';

src/modules/records/list/index.ts

@@ -0,0 +1 @@
+export * from './records.pod';

src/modules/records/list/records.pod.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NavigationButton } from '#common/components';
+
+export const RecordsPod: React.FC = () => {
+  return (
+    <NavigationButton
+      text="Editar expediente"
+      path="/edit-record/$id"
+      params={{
+        id: '123456',
+      }}
+    />
+  );
+};

src/scenes/_auth/edit-record/$id.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { EditRecordScene } from './edit-record.scene';
+
+export const Route = createFileRoute('/_auth/edit-record/$id')({
+  component: EditRecordScene,
+});

src/scenes/_auth/edit-record/components/tab-panel.component.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { useWithTheme } from '#core/theme';
+import * as innerClasses from './tab-panel.styles';
+
+interface TabPanelProps {
+  index: number;
+  value: number;
+  children: React.ReactNode;
+}
+
+export const TabPanel = (props: TabPanelProps) => {
+  const { children, value, index } = props;
+  const classes = useWithTheme(innerClasses);
+
+  return value === index && <div className={classes.tabPanel}>{children}</div>;
+};

src/scenes/_auth/edit-record/components/tab-panel.styles.ts

@@ -0,0 +1,6 @@
+import { css } from '@emotion/css';
+import { Theme } from '@mui/material';
+
+export const tabPanel = (theme: Theme) => css`
+  padding-block: ${theme.spacing(2)};
+`;

src/scenes/_auth/edit-record/edit-record.scene.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useParams } from '@tanstack/react-router';
+import { Tabs as MUITabs, Tab, Paper } from '@mui/material/';
+import { EditGeneralInformationPod } from '#modules/records/edit-general-information';
+import { EditFinancialInformationPod } from '#modules/records/edit-financial-information';
+import { EditCertificationsPod } from '#modules/records/edit-certifications';
+import { EditNotesPod } from '#modules/records/edit-notes';
+import { TabPanel } from './components/tab-panel.component';
+import * as innerClasses from './edit-record.styles';
+
+enum TabIndex {
+  GENERAL_INFORMATION,
+  FINANCIAL_INFORMATION,
+  CERTIFICATIONS,
+  NOTES,
+}
+
+export const EditRecordScene: React.FC = () => {
+  const { id } = useParams({ from: '/_auth/edit-record/$id' });
+  const [activeTab, setActiveTab] = React.useState<number>(0);
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => setActiveTab(newValue);
+
+  return (
+    <div className={innerClasses.tabsComponent}>
+      <Paper elevation={0}>
+        <div className={innerClasses.tabsContainer}>
+          <MUITabs value={activeTab} onChange={handleChange}>
+            <Tab label="DATOS GENERALES" />
+            <Tab label="DATOS ECONÓMICOS" />
+            <Tab label="CERTIFICACIONES" />
+            <Tab label="NOTAS" />
+          </MUITabs>
+        </div>
+        <TabPanel value={activeTab} index={TabIndex.GENERAL_INFORMATION}>
+          <EditGeneralInformationPod id={id} />
+        </TabPanel>
+        <TabPanel value={activeTab} index={TabIndex.FINANCIAL_INFORMATION}>
+          <EditFinancialInformationPod />
+        </TabPanel>
+        <TabPanel value={activeTab} index={TabIndex.CERTIFICATIONS}>
+          <EditCertificationsPod />
+        </TabPanel>
+        <TabPanel value={activeTab} index={TabIndex.NOTES}>
+          <EditNotesPod />
+        </TabPanel>
+      </Paper>
+    </div>
+  );
+};

src/scenes/_auth/edit-record/edit-record.styles.ts

@@ -0,0 +1,13 @@
+import { css } from '@emotion/css';
+
+export const tabsComponent = css`
+  display: 'flex';
+  flex-direction: 'column';
+  align-items: 'center';
+  width: 100%;
+`;
+
+export const tabsContainer = css`
+  border-bottom: 1;
+  border-color: 'divider';
+`;

src/scenes/_auth/records/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { RecordsPod } from '#modules/records/list';
+
+export const Route = createFileRoute('/_auth/records/')({
+  component: RecordsPod,
+});