Merge pull request #46 from Lemoncode/feature/#36_Front-End_Build-layout_editar-usuario

Add edit-user layout

Author: manudous

src/core/api/lookups/unidad-rol/api/unidad-rol.api-model.ts

@@ -0,0 +1,6 @@
+import { Lookup } from '#common/models';
+
+export interface UnidadRolList {
+  roles: Lookup[];
+  unidades: Lookup[];
+}

src/core/api/lookups/unidad-rol/api/unidad-rol.api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+import { UnidadRolList } from './unidad-rol.api-model';
+
+export const getUnidadRolList = async (): Promise<UnidadRolList> => {
+  const response = await axios.get<UnidadRolList>('/api/lookup/unidad-rol');
+  return response.data;
+};

src/core/api/lookups/unidad-rol/index.ts

@@ -0,0 +1,4 @@
+export * from './unidad-rol-vm';
+export * from './unidad-rol.mapper';
+export * from './unidad-rol.repository';
+export * from './use-unidad_rol-list.hook';

src/core/api/lookups/unidad-rol/unidad-rol-vm.ts

@@ -0,0 +1,11 @@
+import { Lookup } from '#common/models';
+
+export interface UnidadRolList {
+  roles: Lookup[];
+  unidades: Lookup[];
+}
+
+export const createEmptyUnidadRolList = (): UnidadRolList => ({
+  roles: [],
+  unidades: [],
+});

src/core/api/lookups/unidad-rol/unidad-rol.mapper.ts

@@ -0,0 +1,21 @@
+import { mapToCollection } from '#common/mappers/collection.mapper.ts';
+import { Lookup } from '#common/models/lookup.model.ts';
+import * as apiModel from './api/unidad-rol.api-model';
+
+import * as viewModel from './unidad-rol-vm';
+
+export const mapUnidadFromApiToVm = (unidad: Lookup): Lookup => ({
+  id: unidad.id,
+  nombre: unidad.nombre,
+  code: unidad.code,
+});
+
+export const mapRolFromApiToVm = (rol: Lookup): Lookup => ({
+  id: rol.id,
+  nombre: rol.nombre,
+});
+
+export const mapUnidadRolListFromApiToVm = (unidadRolList: apiModel.UnidadRolList): viewModel.UnidadRolList => ({
+  unidades: mapToCollection(unidadRolList.unidades, mapUnidadFromApiToVm),
+  roles: mapToCollection(unidadRolList.roles, mapRolFromApiToVm),
+});

src/core/api/lookups/unidad-rol/unidad-rol.repository.ts

@@ -0,0 +1,11 @@
+import { mapUnidadRolListFromApiToVm } from './unidad-rol.mapper';
+import * as vm from './unidad-rol-vm';
+import * as api from './api/unidad-rol.api';
+
+export const getUnidadRolListRepository = async (): Promise<vm.UnidadRolList> => {
+  const unidadRolListApi = await api.getUnidadRolList();
+
+  const unidadRolListVm: vm.UnidadRolList = mapUnidadRolListFromApiToVm(unidadRolListApi);
+
+  return unidadRolListVm;
+};

src/core/api/lookups/unidad-rol/use-unidad_rol-list.hook.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { commonQueryKeys } from '#core/react-query';
+import { getUnidadRolListRepository } from './unidad-rol.repository';
+import { createEmptyUnidadRolList, UnidadRolList } from './unidad-rol-vm';
+
+interface UseUnidadRolQueryResult {
+  unidadRolList: UnidadRolList;
+  isLoading: boolean;
+}
+
+export const useUnidadRolList = (): UseUnidadRolQueryResult => {
+  const { data: unidadRolList = createEmptyUnidadRolList(), isLoading } = useQuery({
+    queryKey: commonQueryKeys.unidadRolList(),
+    queryFn: () => getUnidadRolListRepository(),
+  });
+
+  return {
+    unidadRolList,
+    isLoading,
+  };
+};

src/modules/users/create/api/create.api-model.ts

@@ -1,10 +1,3 @@
-import { Lookup } from '#common/models';
-
-export interface UnidadRolList {
-  roles: Lookup[];
-  unidades: Lookup[];
-}
-
 export interface Usuario {
   nombre: string;
   apellido: string;

src/modules/users/create/api/create.api.ts

@@ -1,10 +1,5 @@
 import axios from 'axios';
-import { UnidadRolList, Usuario } from './create.api-model';
-
-export const getUnidadRolList = async (): Promise<UnidadRolList> => {
-  const response = await axios.get<UnidadRolList>('/api/lookup/unidad-rol');
-  return response.data;
-};
+import { Usuario } from './create.api-model';
 
 export const saveUser = async (user: Usuario): Promise<boolean> => {
   const response = await axios.post<boolean>('/api/user', user);

src/modules/users/create/components/user-details.component.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { IconButton, Typography } from '@mui/material';
 import { Visibility, VisibilityOff, ContentCopy } from '@mui/icons-material';
 import { SelectForm, TextFieldForm } from '#common/components';
+import { UnidadRolList } from '#core/api/lookups/unidad-rol';
 import { useWithTheme } from '#core/theme';
 import { usePassword } from '../use-password.hook';
-import { UnidadRolList } from '../create.vm';
 import { handleCopyPassword } from '../create.business';
 import * as innerClasses from '../create.styles';
 

src/modules/users/create/create.component.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { Form, Formik } from 'formik';
 import { Button, Typography } from '@mui/material';
 import { NavigationButton } from '#common/components';
+import { UnidadRolList } from '#core/api/lookups/unidad-rol';
 import { useWithTheme } from '#core/theme';
 import { AditionalPermissions, UserDetails } from './components';
 import { formValidation } from './validations';
-import { createEmptyUsuario, UnidadRolList, Usuario } from './create.vm';
+import { createEmptyUsuario, Usuario } from './create.vm';
 import * as innerClasses from './create.styles';
 
 interface Props {

src/modules/users/create/create.mapper.ts

@@ -1,24 +1,6 @@
-import { mapToCollection } from '#common/mappers/collection.mapper.ts';
-import { Lookup } from '#common/models/lookup.model.ts';
 import * as apiModel from './api';
 import * as viewModel from './create.vm';
 
-export const mapUnidadFromApiToVm = (unidad: Lookup): Lookup => ({
-  id: unidad.id,
-  nombre: unidad.nombre,
-  code: unidad.code,
-});
-
-export const mapRolFromApiToVm = (rol: Lookup): Lookup => ({
-  id: rol.id,
-  nombre: rol.nombre,
-});
-
-export const mapUnidadRolListFromApiToVm = (unidadRolList: apiModel.UnidadRolList): viewModel.UnidadRolList => ({
-  unidades: mapToCollection(unidadRolList.unidades, mapUnidadFromApiToVm),
-  roles: mapToCollection(unidadRolList.roles, mapRolFromApiToVm),
-});
-
 export const mapUserFromVmToApi = (user: viewModel.Usuario): apiModel.Usuario => ({
   nombre: user.nombre,
   apellido: user.apellido,

src/modules/users/create/create.pod.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Spinner } from '#common/components';
+import { useUnidadRolList } from '#core/api/lookups/unidad-rol';
 import { CreateUser } from './create.component';
-import { useSaveUserMutation, useUnidadRolList } from './create.query.hook';
+import { useSaveUserMutation } from './create.query.hook';
 import { Usuario } from './create.vm';
 
 export const CreateUserPod: React.FC = () => {

src/modules/users/create/create.query.hook.ts

@@ -1,27 +1,10 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
-import { commonQueryKeys, queryClient } from '#core/react-query';
-import { getUnidadRolListRepository, saveUserRepository } from './create.repository';
-import { createEmptyUnidadRolList, UnidadRolList, Usuario } from './create.vm';
+import { queryClient } from '#core/react-query';
+import { saveUserRepository } from './create.repository';
+import { Usuario } from './create.vm';
 import { usersQueryKeys } from '../users-keys';
 
-interface UseUnidadRolQueryResult {
-  unidadRolList: UnidadRolList;
-  isLoading: boolean;
-}
-
-export const useUnidadRolList = (): UseUnidadRolQueryResult => {
-  const { data: unidadRolList = createEmptyUnidadRolList(), isLoading } = useQuery({
-    queryKey: commonQueryKeys.unidadRolList(),
-    queryFn: () => getUnidadRolListRepository(),
-  });
-
-  return {
-    unidadRolList,
-    isLoading,
-  };
-};
-
 interface UseSaveUserMutationResult {
   saveUser: (user: Usuario) => void;
   isPending: boolean;

src/modules/users/create/create.repository.ts

@@ -1,15 +1,7 @@
 import * as api from './api';
-import { mapUnidadRolListFromApiToVm, mapUserFromVmToApi } from './create.mapper';
+import { mapUserFromVmToApi } from './create.mapper';
 import * as vm from './create.vm';
 
-export const getUnidadRolListRepository = async (): Promise<vm.UnidadRolList> => {
-  const unidadRolListApi = await api.getUnidadRolList();
-
-  const unidadRolListVm: vm.UnidadRolList = mapUnidadRolListFromApiToVm(unidadRolListApi);
-
-  return unidadRolListVm;
-};
-
 export const saveUserRepository = async (user: vm.Usuario): Promise<boolean> => {
   const isSaved = await api.saveUser(mapUserFromVmToApi(user));
 

src/modules/users/create/create.vm.ts

@@ -1,4 +1,3 @@
-import { Lookup } from '#common/models';
 import { generateRandomPassword } from './create.business';
 
 export interface Usuario {
@@ -28,13 +27,3 @@ export const createEmptyUsuario = (): Usuario => ({
   esProponente: false,
   esAutorizante: false,
 });
-
-export interface UnidadRolList {
-  roles: Lookup[];
-  unidades: Lookup[];
-}
-
-export const createEmptyUnidadRolList = (): UnidadRolList => ({
-  roles: [],
-  unidades: [],
-});

src/modules/users/edit-user-sheet/components/aditional-permissions.component.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import { CheckboxForm } from '#common/components';
+import { useWithTheme } from '#core/theme';
+import * as innerClasses from '../edit.styles';
+
+export const AditionalPermissions: React.FC = () => {
+  const classes = useWithTheme(innerClasses);
+
+  return (
+    <div className={classes.sectionContainer}>
+      <Typography variant="h6" fontWeight={600}>
+        Permisos adicionales
+      </Typography>
+      <div className={classes.checkboxContainer}>
+        <CheckboxForm name="esResponsable" label="Responsable" fullWidth={false} />
+        <CheckboxForm name="esProponente" label="Proponente" fullWidth={false} />
+        <CheckboxForm name="esAutorizante" label="Autorizante" fullWidth={false} />
+      </div>
+    </div>
+  );
+};

src/modules/users/edit-user-sheet/components/index.ts

@@ -0,0 +1,2 @@
+export * from './user-details.component';
+export * from './aditional-permissions.component';

src/modules/users/edit-user-sheet/components/user-details.component.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import { SelectForm, TextFieldForm } from '#common/components';
+import { useWithTheme } from '#core/theme';
+import { UnidadRolList } from '#core/api/lookups/unidad-rol';
+import * as innerClasses from '../edit.styles';
+
+interface Props {
+  unidadRolList: UnidadRolList;
+  contraseña?: string;
+}
+
+export const UserDetails: React.FC<Props> = props => {
+  const { unidadRolList } = props;
+  const classes = useWithTheme(innerClasses);
+
+  return (
+    <div className={classes.sectionContainer}>
+      <Typography variant="h6" fontWeight={600}>
+        Datos
+      </Typography>
+      <div className={classes.row}>
+        <TextFieldForm name="nombre" label="Nombre" />
+        <TextFieldForm name="apellido" label="Apellidos" className={classes.apellidos} />
+        <TextFieldForm name="email" label="Email" />
+      </div>
+      <div className={classes.row}>
+        <TextFieldForm name="telefono" label="Teléfono fijo" />
+        <TextFieldForm name="movil" label="Teléfono móvil" />
+        <TextFieldForm name="institucional" label="Teléfono Institucional" />
+        <SelectForm label="Unidad" name="unidad" options={unidadRolList.unidades} />
+        <SelectForm label="Rol" name="rol" options={unidadRolList.roles} />
+      </div>
+    </div>
+  );
+};

src/modules/users/edit-user-sheet/edit-user-sheet.pod.tsx

@@ -1,10 +1,22 @@
 import React from 'react';
+import { Spinner } from '#common/components/';
+import { useUnidadRolList } from '#core/api/lookups/unidad-rol';
+import { EditUser } from './edit.component';
 
 interface Props {
   id: string;
 }
 
 export const EditUserSheet: React.FC<Props> = props => {
   const { id } = props;
-  return <h3>User id: {id}</h3>;
+  const { unidadRolList, isLoading } = useUnidadRolList();
+  const handleSubmit = () => true;
+
+  return (
+    <>
+      <h3>User id: {id}</h3>
+      <Spinner isSpinnerShowing={isLoading} />
+      <EditUser unidadRolList={unidadRolList} onSubmit={handleSubmit} />
+    </>
+  );
 };

src/modules/users/edit-user-sheet/edit.component.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { Form, Formik } from 'formik';
+import { useWithTheme } from '#core/theme';
+import { UnidadRolList } from '#core/api/lookups/unidad-rol';
+import { Usuario, createEmptyUsuario } from './edit.vm';
+import { Button } from '@mui/material';
+import { AditionalPermissions, UserDetails } from './components';
+import { NavigationButton } from '#common/components';
+import * as innerClasses from './edit.styles';
+
+interface Props {
+  unidadRolList: UnidadRolList;
+  onSubmit: (values: Usuario) => void;
+}
+
+export const EditUser: React.FC<Props> = (props: Props) => {
+  const { unidadRolList, onSubmit } = props;
+  const classes = useWithTheme(innerClasses);
+  return (
+    <>
+      <div className={classes.root}>
+        <Formik
+          initialValues={createEmptyUsuario()}
+          enableReinitialize={true}
+          /* TODO: implement Formik form Validation in the next steps */
+          onSubmit={onSubmit}
+        >
+          {({ values }) => (
+            <Form className={classes.form}>
+              <UserDetails unidadRolList={unidadRolList} contraseña={values.contraseña} />
+              <AditionalPermissions />
+              <div className={classes.buttonContainer}>
+                <Button type="submit" variant="contained">
+                  Guardar
+                </Button>
+                <NavigationButton path="/users" text="Cancelar" variant="text" />
+              </div>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </>
+  );
+};