fix skills form

codelittinc · Dec 5, 2024 · 19acd57 · 19acd57
1 parent e005b42
commit 19acd57
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 79 deletions.
diff --git a/src/app/_presenters/controllers/useSkillsController.ts b/src/app/_presenters/controllers/useSkillsController.ts
@@ -13,11 +13,11 @@ import { useAppStore } from "../data/store/store";
 import { getUserSkills, updateUserSkills } from "../data/userSkills";
 
 const defaultUserSkill: UserSkill = {
-  lastAppliedYear: 2010,
+  lastAppliedYear: 2024,
   level: skillLevelKeys.Beginner,
   yearsOfExperience: 0,
-  skillId: undefined,
-  userId: undefined,
+  skillId: "",
+  userId: "",
 };
 
 const useSkillsController = (id: number | string) => {
@@ -62,7 +62,7 @@ const useSkillsController = (id: number | string) => {
 
   const { fields, append, remove, replace } = useFieldArray({
     control,
-    name: 'userSkills',
+    name: "userSkills",
   });
 
   const onSubmit = (data: { userSkills: UserSkill[] }) => {
@@ -77,6 +77,9 @@ const useSkillsController = (id: number | string) => {
     if (userSkills?.length) {
       reset({ userSkills });
       replace(userSkills);
+    } else {
+      reset({ userSkills: [defaultUserSkill] });
+      replace([defaultUserSkill]);
     }
   }, [userSkills, replace, reset]);
 
@@ -89,7 +92,7 @@ const useSkillsController = (id: number | string) => {
     handleSubmit,
     fields,
     remove,
-    control
+    control,
   };
 };
 

diff --git a/src/app/_presenters/data/userSkills/parser.ts b/src/app/_presenters/data/userSkills/parser.ts
@@ -1,9 +1,10 @@
-import { UserSkill } from '@/app/_domain/interfaces/Skill';
+import { UserSkill } from "@/app/_domain/interfaces/Skill";
 
 export const fromApiParser = (data: any): UserSkill => {
+  console.log("data", data);
   return {
     id: data.id,
-    skillId: data.skill_id,
+    skillId: data.skill.id,
     userId: data.user_id,
     yearsOfExperience: data.years_of_experience,
     lastAppliedYear: data.last_applied_in_year,

diff --git a/...senters/components/UserForm/_presenters/Skills/_presenters/components/SkillForm/index.tsx b/...senters/components/UserForm/_presenters/Skills/_presenters/components/SkillForm/index.tsx
@@ -1,14 +1,14 @@
-import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
-import { Container, Grid, IconButton } from '@mui/material';
-import { UseFieldArrayRemove } from 'react-hook-form';
+import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
+import { Container, Grid, IconButton } from "@mui/material";
+import { UseFieldArrayRemove } from "react-hook-form";
 
-import { Skill, UserSkill } from '@/app/_domain/interfaces/Skill';
-import AutocompleteController from '@/components/Form/FieldControllers/AutocompleteController';
-import TextInputController from '@/components/Form/FieldControllers/TextInputController';
-import Loading from '@/components/Loading';
+import { Skill, UserSkill } from "@/app/_domain/interfaces/Skill";
+import AutocompleteController from "@/components/Form/FieldControllers/AutocompleteController";
+import TextInputController from "@/components/Form/FieldControllers/TextInputController";
+import Loading from "@/components/Loading";
 
-import useSkillFormController from '../../controllers/useSkillFormController';
-import { LAST_APPLIED_YEARS, LEVEL_LIST } from '../../data/utils';
+import useSkillFormController from "../../controllers/useSkillFormController";
+import { LAST_APPLIED_YEARS, LEVEL_LIST } from "../../data/utils";
 
 interface Props {
   control: any;
@@ -29,18 +29,20 @@ function SkillForm({
     skills,
     userSkill,
   });
+
+  console.log(selectedSkill, skills, userSkill);
   if (!skills) {
     return <Loading />;
   }
   return (
-    <Container sx={{ width: '100%', display: 'flex', paddingBottom: '5px' }}>
+    <Container sx={{ width: "100%", display: "flex", paddingBottom: "5px" }}>
       <Grid container rowSpacing={1} columnSpacing={1} sx={{ marginLeft: 0 }}>
         <Grid item xs={11} sm={3} md={3}>
           <AutocompleteController
             name={`userSkills.${index}.skillId`}
             control={control}
             defaultValue={selectedSkill || null}
-            label='Technology'
+            label="Technology"
             options={
               skills as {
                 id: number | string;
@@ -55,7 +57,7 @@ function SkillForm({
           <AutocompleteController
             name={`userSkills.${index}.lastAppliedYear`}
             control={control}
-            label='Last Applied Year'
+            label="Last Applied Year"
             options={LAST_APPLIED_YEARS}
             required
             getOptionLabel={(option: Number) => {
@@ -65,18 +67,18 @@ function SkillForm({
         </Grid>
         <Grid item xs={12} sm={3} md={3}>
           <TextInputController
-            label='Year of Experience'
+            label="Year of Experience"
             name={`userSkills.${index}.yearsOfExperience`}
             required
             control={control}
-            type='number'
+            type="number"
           />
         </Grid>
         <Grid item xs={8} sm={3} md={3}>
           <AutocompleteController
             name={`userSkills.${index}.level`}
             control={control}
-            label='Level'
+            label="Level"
             options={LEVEL_LIST}
             required
             getOptionLabel={(option: String) => {
@@ -87,18 +89,18 @@ function SkillForm({
       </Grid>
       <div
         style={{
-          width: '45px',
-          display: 'flex',
-          justifyContent: 'flex-end',
-          alignItems: 'center',
-          paddingTop: '8px',
+          width: "45px",
+          display: "flex",
+          justifyContent: "flex-end",
+          alignItems: "center",
+          paddingTop: "8px",
         }}
       >
         <IconButton
-          aria-label='remove skill form'
-          color='primary'
+          aria-label="remove skill form"
+          color="primary"
           onClick={() => remove(index)}
-          sx={{ justifyContent: 'flex-end', padding: 0 }}
+          sx={{ justifyContent: "flex-end", padding: 0 }}
         >
           <RemoveCircleIcon />
         </IconButton>

diff --git a/src/app/users/_presenters/components/UserForm/_presenters/Skills/index.tsx b/src/app/users/_presenters/components/UserForm/_presenters/Skills/index.tsx
@@ -1,46 +1,40 @@
-import AddCircleIcon from '@mui/icons-material/AddCircle';
-import { Box, Card, Grid, IconButton, Typography } from '@mui/material';
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import { Box, Card, Grid, IconButton, Typography } from "@mui/material";
 
-import useSkillsController from '@/app/_presenters/controllers/useSkillsController';
-import Button from '@/components/Button';
-import Form from '@/components/Form';
-import Loading from '@/components/Loading';
+import useSkillsController from "@/app/_presenters/controllers/useSkillsController";
+import Button from "@/components/Button";
+import Form from "@/components/Form";
+import Loading from "@/components/Loading";
 
-import SkillForm from './_presenters/components/SkillForm';
-import SkillModal from './_presenters/components/SkillModal';
+import SkillForm from "./_presenters/components/SkillForm";
+import SkillModal from "./_presenters/components/SkillModal";
 
 interface Props {
   userId: string | number;
 }
 
 function Skills({ userId }: Props): JSX.Element {
   const {
-    skills, 
-    isLoading, 
+    skills,
+    isLoading,
     addNewSkillForm,
     onSubmit,
     handleSubmit,
     fields,
     remove,
-    control
+    control,
   } = useSkillsController(userId);
   return (
-    <Card id='skill-info' sx={{ overflow: 'visible' }}>
+    <Card id="skill-info" sx={{ overflow: "visible" }}>
       <Box
         p={3}
-        display='flex'
-        justifyContent='space-between'
-        alignItems='center'
+        display="flex"
+        justifyContent="space-between"
+        alignItems="center"
         marginBottom={3}
       >
-        <Typography variant='h5'>Skills</Typography>
-        <IconButton
-          aria-label='add new skill form'
-          color="success"
-          onClick={addNewSkillForm}
-        >
-          <AddCircleIcon />
-        </IconButton>
+        <Typography variant="h5">Skills</Typography>
+        <SkillModal />
       </Box>
       {isLoading || !skills ? (
         <Loading />
@@ -49,7 +43,7 @@ function Skills({ userId }: Props): JSX.Element {
           <Grid container spacing={0.5} rowSpacing={2}>
             {fields.map((us, index) => (
               <SkillForm
-                key={us.skillId}
+                key={`${us.skillId}-${index}`}
                 userSkill={us}
                 skills={skills}
                 control={control}
@@ -58,14 +52,26 @@ function Skills({ userId }: Props): JSX.Element {
               />
             ))}
           </Grid>
-          <Grid item xs={6} display={'flex'} justifyContent={'flex-start'} pt={3}>
-            <SkillModal />
+          <Grid
+            item
+            xs={6}
+            display={"flex"}
+            justifyContent={"flex-start"}
+            pt={3}
+          >
+            <IconButton
+              aria-label="add new skill form"
+              color="success"
+              onClick={addNewSkillForm}
+            >
+              <AddCircleIcon /> <Box pl={1}>add new skill</Box>
+            </IconButton>
           </Grid>
-          <Grid item xs={6} display={'flex'} justifyContent={'flex-end'} pt={3}>
+          <Grid item xs={6} display={"flex"} justifyContent={"flex-end"} pt={3}>
             <Button
-              variant='gradient'
-              color='info'
-              size='small'
+              variant="gradient"
+              color="info"
+              size="small"
               onClick={() => handleSubmit(onSubmit)()}
             >
               Save

diff --git a/src/app/users/reports/page.tsx b/src/app/users/reports/page.tsx
@@ -1,13 +1,14 @@
 "use client";
 import { Grid, Typography } from "@mui/material";
 
-import HorizontalBarChart from '@/components/Charts/HorizontalBarChart';
+import HorizontalBarChart from "@/components/Charts/HorizontalBarChart";
 import Loading from "@/components/Loading";
 
 import Footer from "./presenters/components/Footer";
-import SkillsSearch from './presenters/components/SkillsSearch';
-import UsersTable from './presenters/components/UsersTable';
+import SkillsSearch from "./presenters/components/SkillsSearch";
+import UsersTable from "./presenters/components/UsersTable";
 import useReportsController from "./presenters/controllers/useReportsController";
+import VerticalBarChart from "@/components/Charts/VerticalBarChart";
 
 const UsersDashboard = () => {
   const {
@@ -21,7 +22,7 @@ const UsersDashboard = () => {
     userSkills,
     onKeyPress,
     onChangeSearch,
-    skillsAnalytics
+    skillsAnalytics,
   } = useReportsController();
 
   if (isLoading) {
@@ -47,11 +48,16 @@ const UsersDashboard = () => {
             />
           </Grid>
         </Grid>
-        <Grid xs={12} md={6} style={{ marginTop: "32px" }}>
-          <HorizontalBarChart
+        <Grid xs={12} md={12} style={{ marginTop: "32px" }}>
+          <VerticalBarChart
             title="Skills Analytics"
             chart={skillsAnalytics}
-            labelFormatter={skillsAnalytics.formatter}
+            valueType="number"
+            formatter={(value: number) => {
+              if (value == 0) return "";
+
+              return value.toFixed(0);
+            }}
           />
         </Grid>
         <Grid container justifyContent={"space-around"} display="flex" mt={5}>