Added a button for exporting results from the results page on the UI. (#1644)

Closes
SoftUni-Internal/exam-systems-issues#1719

Author: deyordanov

Servers/UI/OJS.Servers.Ui/ClientApp/src/components/administration/common/tabs/TabsInView.tsx

@@ -22,7 +22,7 @@ const TabsInView = (props: ITabsInViewProps) => {
     return (
         <Slide direction="left" in mountOnEnter unmountOnExit timeout={300}>
             <Box>
-                {form && form()}
+                {form?.()}
                 <Box sx={{ padding: '2rem' }}>
                     <Tabs
                       sx={{ minWidth: '100%', display: 'flex', justifyContent: 'space-around' }}

Servers/UI/OJS.Servers.Ui/ClientApp/src/components/submissions/submission-grid-row/SubmissionGridRow.tsx

@@ -310,7 +310,7 @@ const SubmissionGridRow = ({
                                 </Popover>
                             </td>
                         )
-                        : <td />
+                        : <td aria-hidden="true" />
                     : null
             }
             {

Servers/UI/OJS.Servers.Ui/ClientApp/src/pages/administration-new/contests/AdministrationContests.tsx

@@ -103,6 +103,29 @@ const AdministrationContestsPage = () => {
         }
     }, [ searchParams, hasProcessedParams, setSearchParams ]);
 
+    // Handle query parameters for exporting contest results to excel
+    useEffect(() => {
+        const exportType = searchParams.get('exportType');
+        const contestIdParam = searchParams.get('contestId');
+
+        if (exportType && contestIdParam && !hasProcessedParams) {
+            const parsedId = Number(contestIdParam);
+            const parsedType = exportType === 'compete'
+                ? 0
+                : 1;
+
+            setContestId(parsedId);
+            setExcelExportType(parsedType);
+            exportResults({ id: parsedId, type: parsedType });
+
+            const newSearchParams = new URLSearchParams(searchParams);
+            newSearchParams.delete('exportType');
+            newSearchParams.delete('contestId');
+            setSearchParams(newSearchParams);
+            setHasProcessedParams(true);
+        }
+    }, [ searchParams, hasProcessedParams, setSearchParams, exportResults ]);
+
     const onEditClick = (id: number) => {
         setOpenEditContestModal(true);
         setContestId(id);

Servers/UI/OJS.Servers.Ui/ClientApp/src/pages/contest-results/ContestResultPage.module.scss

@@ -19,3 +19,14 @@
 .paginationControlsLower {
   padding: spacings.$sp-8 0 spacings.$sp-16 0;
 }
+
+.actionsWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.exportResultsButton {
+  margin: 0 0 1.2rem;
+  place-self: end;
+}

Servers/UI/OJS.Servers.Ui/ClientApp/src/pages/contest-results/ContestResultsPage.tsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useMemo } from 'react';
 import { useParams } from 'react-router';
 import isNil from 'lodash/isNil';
+import { CONTESTS_PATH } from 'src/common/urls/administration-urls';
 import BackToTop from 'src/components/common/back-to-top/BackToTop';
+import AdministrationLink from 'src/components/guidelines/buttons/AdministrationLink';
 
 import { ContestParticipationType, ContestResultType } from '../../common/constants';
 import { contestParticipationType } from '../../common/contest-helpers';
@@ -110,30 +112,42 @@ const ContestResultsPage = () => {
                             Results For
                             {' '}
                             <LinkButton
-                              to={getContestsDetailsPageUrl({ contestId: Number(contestId!), contestName: contestResults?.name })}
+                              to={getContestsDetailsPageUrl({
+                                  contestId: Number(contestId!),
+                                  contestName: contestResults?.name,
+                              })}
                               text={contestResults?.name}
                               type={LinkButtonType.plain}
                               className={styles.contestName}
                             />
                         </Heading>
-                        <PaginationControls
-                          isDataFetching={isFetching}
-                          count={contestResults?.pagedResults.pagesCount ?? 0}
-                          page={selectedPage}
-                          onChange={(page:number) => {
-                              searchParams.set('page', page.toString());
-                              setSearchParams(searchParams);
-                          }}
-                          className={`${styles.paginationControlsUpper}`}
-                        />
+                        <div className={styles.actionsWrapper}>
+                            <PaginationControls
+                              isDataFetching={isFetching}
+                              count={contestResults?.pagedResults.pagesCount ?? 0}
+                              page={selectedPage}
+                              onChange={(page: number) => {
+                                  searchParams.set('page', page.toString());
+                                  setSearchParams(searchParams);
+                              }}
+                              className={`${styles.paginationControlsUpper}`}
+                            />
+                            <div className={styles.exportResultsButton}>
+                                <AdministrationLink
+                                  text="Export Results"
+                                  type={LinkButtonType.primary}
+                                  to={`/${CONTESTS_PATH}?exportType=${participationType.toLowerCase()}&contestId=${contestId}`}
+                                />
+                            </div>
+                        </div>
                         <ContestResultsGrid
                           items={contestResults ?? null}
                         />
                         <PaginationControls
                           isDataFetching={isFetching}
                           count={contestResults?.pagedResults.pagesCount ?? 0}
                           page={selectedPage}
-                          onChange={(page:number) => {
+                          onChange={(page: number) => {
                               searchParams.set('page', page.toString());
                               setSearchParams(searchParams);
                           }}