fix(dashboard): Refactor subjects carousel and review all Swipers

- Refactor the subjects carousel on the dashboard. - Review and update all Swiper carousels across the platform. fix(academic-portfolio): Remove Subjects title from Subjects Carousel on Dashboard - Remove the "Subjects" title from the subjects carousel on the dashboard. fix(academic-portfolio): Refactor getSubjectGroupCourseNamesFromClassData - Extract subject ID from the subject property. - Create new properties: subjectId and subjectWithId. --------- Ticket: task/Dashboards-134 Reviewed-by: @MIGUELez11 Refs: #500
leemonade · Jun 29, 2024 · 5857b81 · 5857b81
1 parent 7a37826
commit 5857b81
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 136 deletions.
diff --git a/...plugin-academic-portfolio/frontend/src/helpers/getSubjectGroupCourseNamesFromClassData.js b/...plugin-academic-portfolio/frontend/src/helpers/getSubjectGroupCourseNamesFromClassData.js
@@ -30,15 +30,19 @@ const getSubjectGroupCourseNamesFromClassData = (classData) => {
   // Orden curso - customId si hay - alias
   const data = {
     subject: '',
+    subjectId: '',
+    subjectWithId: '',
     group: '',
     displayNameforClass: '',
     course: '',
     courseAndGroupParsed: '',
   };
   const subjectName = classData?.subject?.name;
-  const subjectId = classData?.subject?.internalId && `- ${classData?.subject?.internalId}`;
+  const subjectId = classData?.subject?.internalId && `${classData?.subject?.internalId}`;
 
-  data.subject = `${subjectName} ${subjectId || ''}`;
+  data.subject = `${subjectName}`;
+  data.subjectId = subjectId;
+  data.subjectWithId = `${subjectName} ${subjectId ? `- ${subjectId}` : ''}`;
 
   const hasGroup = !!classData?.groups;
   if (hasGroup) {

diff --git a/plugins/leemons-plugin-academic-portfolio/frontend/src/widgets/user-classes-swiper/index.js b/plugins/leemons-plugin-academic-portfolio/frontend/src/widgets/user-classes-swiper/index.js
@@ -18,7 +18,6 @@ import { useHistory } from 'react-router-dom';
 import { addErrorAlert } from '@layout/alert';
 import getSubjectGroupCourseNamesFromClassData from '@academic-portfolio/helpers/getSubjectGroupCourseNamesFromClassData';
 import { listSessionClassesRequest } from '../../request';
-import { getClassImage } from '../../helpers/getClassImage';
 import { getClassIcon } from '../../helpers/getClassIcon';
 
 const Styles = createStyles((theme) => ({
@@ -29,24 +28,6 @@ const Styles = createStyles((theme) => ({
   cardContainer: {
     backgroundColor: theme.colors.ui02,
   },
-  imageContainer: {
-    position: 'relative',
-    paddingRight: theme.spacing[2],
-  },
-  image: {
-    height: '48px',
-    width: '48px',
-    borderRadius: '50%',
-    backgroundPosition: '50% 50%',
-    backgroundSize: 'cover',
-    backgroundColor: theme.colors.ui02,
-    fontSize: '24px',
-    fontWeight: 600,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: '#FFFFFF',
-  },
   cardWrapper: {
     padding: 2,
     paddingRight: 0,
@@ -59,29 +40,11 @@ const Styles = createStyles((theme) => ({
     textAlign: 'center',
     transitionDuration: '100ms',
   },
-  colorIcon: {
-    position: 'absolute',
-    width: '25px',
-    height: '25px',
-    borderRadius: '50%',
-    right: '0px',
-    bottom: '-2px',
-    backgroundColor: theme.colors.uiBackground02,
-    border: '2px solid',
-    borderColor: theme.colors.uiBackground01,
-    color: theme.colors.text07,
-    img: {
-      filter: 'brightness(0) invert(1)',
-    },
+  cardText: {
+    maxWidth: 200,
+    textAlign: 'left',
   },
-  icon: {
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-    width: '16px',
-    height: '16px',
-    color: theme.colors.text07,
+  colorIcon: {
     img: {
       filter: 'brightness(0) invert(1)',
     },
@@ -122,33 +85,13 @@ function UserClassesSwiperWidget({ program }) {
 
   return (
     <Box className={styles.root}>
-      <Box
-        sx={(theme) => ({
-          fontSize: '20px',
-          fontWeight: 600,
-          lineHeight: '28px',
-          marginBottom: theme.spacing[4],
-        })}
-      >
-        {t('subjects')}
-      </Box>
+
       <Swiper
-        breakAt={{
-          1800: { slidesPerView: 8, spaceBetween: 2 },
-          1600: { slidesPerView: 7, spaceBetween: 2 },
-          1200: { slidesPerView: 6, spaceBetween: 2 },
-          940: { slidesPerView: 5, spaceBetween: 2 },
-          520: { slidesPerView: 4, spaceBetween: 2 },
-          360: { slidesPerView: 3, spaceBetween: 2 },
-        }}
+        slidesPerView={'auto'}
       >
         {store.classes.map((classe, index) => {
           const dataLabels = getSubjectGroupCourseNamesFromClassData(classe);
 
-          const imageStyle = getClassImage(classe)
-            ? { backgroundImage: `url(${getClassImage(classe)})` }
-            : {};
-
           let nameFirstLetters = null;
           const nameArray = classe.subject.name.split(' ');
           if (nameArray.length > 1) {
@@ -165,42 +108,27 @@ function UserClassesSwiperWidget({ program }) {
               <Stack
                 className={styles.card}
                 alignItems="center"
-                direction="column"
                 spacing={4}
                 fullWidth
                 onClick={() => goClassDashboard(classe)}
               >
-                <Box className={styles.imageContainer}>
-                  <Box
-                    style={
-                      classe.color ? { backgroundColor: classe.color, ...imageStyle } : imageStyle
-                    }
-                    className={styles.image}
-                  >
-                    {!imageStyle && nameFirstLetters}
-                  </Box>
 
                   {classe.color || classe.icon ? (
                     <Box className={styles.colorIcon}>
-                      <AvatarSubject color={classe.color} icon={getClassIcon(classe)} size="md" />
+                      <AvatarSubject name={classe.subject.name} color={classe.color} icon={getClassIcon(classe)} size="xxlg" />
                     </Box>
                   ) : null}
-                </Box>
-                <Stack direction="column" spacing={2}>
-                  <Box>
-                    <TextClamp lines={2} showTooltip>
+                <Stack direction="column" spacing={0} justifyContent='start' alignItems='start' className={styles.cardText}>
+                    <TextClamp lines={1} showTooltip>
                       <Text color="primary" strong>
                         {dataLabels?.subject}
                       </Text>
                     </TextClamp>
-                  </Box>
-                  <Box>
                     <TextClamp lines={1} showTooltip>
-                      <Text size="sm" strong>
+                      <Text size="sm" >
                         {dataLabels?.courseAndGroupParsed}
                       </Text>
                     </TextClamp>
-                  </Box>
                 </Stack>
               </Stack>
             </Box>

diff --git a/plugins/leemons-plugin-assignables/frontend/src/components/NYACard/NYACard.styles.js b/plugins/leemons-plugin-assignables/frontend/src/components/NYACard/NYACard.styles.js
@@ -20,7 +20,7 @@ export const NYACardStyles = createStyles((theme, { clickable }) => {
       overflow: 'hidden',
       position: 'relative',
       width: '100%',
-      minWidth: pxToRem(264),
+      minWidth: pxToRem(330),
       maxWidth: pxToRem(330),
       minHeight: pxToRem(480),
       '&:hover': {

diff --git a/...mons-plugin-assignables/frontend/src/widgets/dashboard/nya/components/ActivityCarousel.js b/...mons-plugin-assignables/frontend/src/widgets/dashboard/nya/components/ActivityCarousel.js
@@ -3,10 +3,8 @@ import PropTypes from 'prop-types';
 import { Loader } from '@bubbles-ui/components';
 import { Swiper } from '@bubbles-ui/extras';
 import { useLocation } from 'react-router-dom';
-import { useIsTeacher } from '@academic-portfolio/hooks';
 import NYACard from '../../../../components/NYACard';
 import EmptyState from './EmptyState';
-import { useNyaStyles } from '../hooks';
 
 export default function ActivityCarousel({
   localizations,
@@ -15,36 +13,12 @@ export default function ActivityCarousel({
   isLoading,
   classData,
 }) {
-  const { theme } = useNyaStyles();
-  const isTeacher = useIsTeacher();
   const location = useLocation();
   const isStudentDashboard = location.pathname.includes('private/dashboard/class');
 
   const swiperProps = {
-    selectable: true,
-    deselectable: false,
-    disableSelectedStyles: true,
-    slidesPerView: 2,
-    spaceBetween: 60,
-    breakAt: {
-      [theme.breakpoints.xs]: {
-        slidesPerView: 1,
-        spaceBetween: theme.spacing[4],
-      },
-      [theme.breakpoints.sm]: {
-        slidesPerView: 2,
-        spaceBetween: theme.spacing[4],
-      },
-      [theme.breakpoints.lg]: {
-        slidesPerView: 3,
-        spaceBetween: theme.spacing[4],
-      },
-    },
-    slideStyles: {
-      height: 'auto',
-      minWidth: isTeacher ? '468px !important' : '264px !important',
-      maxWidth: isTeacher ? '468px !important' : '330px !important',
-    },
+    slidesPerView: 'auto',
+    spaceBetween: 24,
   };
 
   if (isLoading) {

diff --git a/...s-plugin-assignables/frontend/src/widgets/dashboard/nya/components/EvaluationsCarousel.js b/...s-plugin-assignables/frontend/src/widgets/dashboard/nya/components/EvaluationsCarousel.js
@@ -17,29 +17,8 @@ export default function EvaluationsCarousel({
   const { theme } = useNyaStyles();
 
   const swiperProps = {
-    selectable: true,
-    deselectable: false,
-    disableSelectedStyles: true,
-    spaceBetween: 60,
-    breakAt: {
-      [theme.breakpoints.xs]: {
-        slidesPerView: 1,
-        spaceBetween: theme.spacing[4],
-      },
-      [theme.breakpoints.sm]: {
-        slidesPerView: 2,
-        spaceBetween: theme.spacing[4],
-      },
-      [theme.breakpoints.lg]: {
-        slidesPerView: 3,
-        spaceBetween: theme.spacing[4],
-      },
-    },
-    slideStyles: {
-      height: 'auto',
-      maxWidth: '468px',
-      minWidth: '468px',
-    },
+    slidesPerView: 'auto',
+    spaceBetween: 24,
   };
 
   if (isLoading) {
@@ -50,6 +29,7 @@ export default function EvaluationsCarousel({
     return <EmptyState label={localizations?.evaluationsEmptyState} />;
   }
 
+
   return (
     <Swiper {...swiperProps}>
       {activities.map((activity, i) => (
@@ -60,6 +40,7 @@ export default function EvaluationsCarousel({
           classData={classData[i]?.data}
         />
       ))}
+
     </Swiper>
   );
 }

diff --git a/plugins/leemons-plugin-dashboard/frontend/src/pages/private/ClassDashboard/index.js b/plugins/leemons-plugin-dashboard/frontend/src/pages/private/ClassDashboard/index.js
@@ -298,6 +298,7 @@ export default function ClassDashboard({ session }) {
     }
   }
 
+
   return (
     <>
       {store.loading ? <LoadingOverlay visible /> : null}
-Original file line number
+Diff line change
@@ Expand Up / @@ -298,6 +298,7 @@ export default function ClassDashboard({ session }) { @@
         }
       }
       return (
         <>
           {store.loading ? <LoadingOverlay visible /> : null}
@@ Expand Down @@