Rearrange export page sections into one page

csmberkeley · Jan 28, 2024 · cd6fb67 · cd6fb67
1 parent 6947a9f
commit cd6fb67
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 70 deletions.
diff --git a/csm_web/frontend/src/components/data_export/DataExport.tsx b/csm_web/frontend/src/components/data_export/DataExport.tsx
@@ -8,15 +8,25 @@ export const DataExport = () => {
 
   return (
     <div className="data-export-container">
-      {dataExportType === null ? (
-        <ExportSelector
-          onContinue={(exportType: ExportType) => {
-            setDataExportType(exportType);
-          }}
-        />
-      ) : (
-        <ExportPage dataExportType={dataExportType} onBack={() => setDataExportType(null)} />
-      )}
+      <div className="data-export-header">
+        <h2 className="data-export-page-title">Export Data</h2>
+      </div>
+      <div className="data-export-body">
+        <div className="data-export-sidebar">
+          <ExportSelector
+            onSelect={(exportType: ExportType) => {
+              setDataExportType(exportType);
+            }}
+          />
+        </div>
+        <div className="data-export-content">
+          {dataExportType === null ? (
+            <div>Select export type to start.</div>
+          ) : (
+            <ExportPage dataExportType={dataExportType!} />
+          )}
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/csm_web/frontend/src/components/data_export/DataExportTypes.tsx b/csm_web/frontend/src/components/data_export/DataExportTypes.tsx
@@ -12,10 +12,10 @@ export enum ExportType {
  * Object for displaying export types in the UI
  */
 export const EXPORT_TYPE_DATA = new Map<ExportType, string>([
-  [ExportType.STUDENT_DATA, "Student data"],
-  [ExportType.ATTENDANCE_DATA, "Attendance data"],
-  [ExportType.SECTION_DATA, "Section data"],
-  [ExportType.COURSE_DATA, "Course data"]
+  [ExportType.STUDENT_DATA, "Student"],
+  [ExportType.ATTENDANCE_DATA, "Attendance"],
+  [ExportType.SECTION_DATA, "Section"],
+  [ExportType.COURSE_DATA, "Course"]
 ]);
 
 export const EXPORT_COLUMNS: {

diff --git a/csm_web/frontend/src/components/data_export/ExportPage.tsx b/csm_web/frontend/src/components/data_export/ExportPage.tsx
@@ -11,10 +11,9 @@ import RefreshIcon from "../../../static/frontend/img/refresh.svg";
 
 interface ExportPageProps {
   dataExportType: ExportType;
-  onBack: () => void;
 }
 
-export const ExportPage = ({ dataExportType, onBack }: ExportPageProps) => {
+export const ExportPage = ({ dataExportType }: ExportPageProps) => {
   const { data: profiles, isSuccess: profilesLoaded, isError: profilesError } = useProfiles();
   const [includedCourses, setIncludedCourses] = useState<number[]>([]);
   const [includedFields, setIncludedFields] = useState<string[]>(
@@ -30,6 +29,10 @@ export const ExportPage = ({ dataExportType, onBack }: ExportPageProps) => {
     }
   }, [profilesLoaded, profiles]);
 
+  useEffect(() => {
+    setIncludedFields(Array.from(Object.keys(EXPORT_COLUMNS[dataExportType].optional)));
+  }, [dataExportType]);
+
   if (profilesError) {
     return <h3>Profiles not found</h3>;
   } else if (!profilesLoaded) {
@@ -121,12 +124,6 @@ export const ExportPage = ({ dataExportType, onBack }: ExportPageProps) => {
 
   return (
     <div className="export-page-container">
-      <div className="export-page-header">
-        <h3 className="page-title">Export Data</h3>
-        <button className="secondary-btn" onClick={onBack}>
-          Back
-        </button>
-      </div>
       <div className="export-page-config">
         <div className="export-page-sidebar sidebar-left">{courseSelection}</div>
         <div className="export-page-sidebar sidebar-right">{columnSelection}</div>

diff --git a/csm_web/frontend/src/components/data_export/ExportSelector.tsx b/csm_web/frontend/src/components/data_export/ExportSelector.tsx
@@ -5,47 +5,35 @@ import { ExportType, EXPORT_TYPE_DATA } from "./DataExportTypes";
 import "../../css/data-export.scss";
 
 interface ExportSelectorProps {
-  onContinue: (exportType: ExportType) => void;
+  onSelect: (exportType: ExportType) => void;
 }
 
 /**
  * Component for selecting the courses to include in the export,
  * along with the export data config selection.
  */
-export const ExportSelector = ({ onContinue }: ExportSelectorProps) => {
-  const [dataExportType, setDataExportType] = useState<ExportType>(ExportType.ATTENDANCE_DATA);
+export const ExportSelector = ({ onSelect }: ExportSelectorProps) => {
+  const [dataExportType, setDataExportType] = useState<ExportType | null>(null);
 
-  const handleContinue = () => {
-    onContinue(dataExportType);
+  const handleSelect = (exportType: ExportType) => {
+    onSelect(exportType);
+    setDataExportType(exportType);
   };
 
   return (
     <div className="export-selector-container">
-      <div className="export-selector-section">
-        <h3 className="page-title center-title">Select Export Data</h3>
-        <div className="export-selector-data-type-container">
-          <div className="export-selector-data-type-options">
-            {Array.from(EXPORT_TYPE_DATA.entries())
-              .sort()
-              .map(([exportType, description]) => (
-                <label key={exportType} className="export-selector-data-type-label">
-                  <input
-                    className="export-selector-data-type-input"
-                    name="export-data-type"
-                    type="radio"
-                    checked={dataExportType === exportType}
-                    onChange={() => setDataExportType(exportType)}
-                  />
-                  {description}
-                </label>
-              ))}
-          </div>
-        </div>
-      </div>
-      <div className="export-selector-footer">
-        <div className="primary-btn" onClick={handleContinue}>
-          Continue
-        </div>
+      <div className="export-selector-data-type-options">
+        {Array.from(EXPORT_TYPE_DATA.entries())
+          .sort()
+          .map(([exportType, description]) => (
+            <div
+              key={exportType}
+              className={`export-selector-data-type-label ${dataExportType === exportType ? "active" : ""}`}
+              onClick={() => handleSelect(exportType)}
+            >
+              {description}
+            </div>
+          ))}
       </div>
     </div>
   );

diff --git a/csm_web/frontend/src/css/data-export.scss b/csm_web/frontend/src/css/data-export.scss
@@ -4,38 +4,40 @@
 .data-export-container {
   display: flex;
   flex-direction: column;
-  gap: 40px;
   align-items: stretch;
   justify-content: center;
+
+  padding-right: 16px;
 }
 
-.export-selector-container {
+.data-export-body {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 
-  gap: 50px;
+  gap: 40px;
 }
 
-.export-selector-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.data-export-sidebar {
+  min-width: 150px;
 }
 
-.export-selector-section,
-.export-page-section {
+.data-export-content {
+  flex: 1;
+}
+
+.export-selector-container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: 50px;
+
+  padding-left: 24px;
+  margin-top: 16px;
 }
 
-.export-selector-data-type-container {
+.export-selector-footer {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-
-  padding-top: 15px;
 }
 
 .export-page-sidebar-container {
@@ -52,7 +54,7 @@
 .export-selector-data-type-options {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 24px;
   align-items: flex-start;
   justify-content: center;
 
@@ -64,18 +66,27 @@
   max-height: 25%;
 }
 
-.export-selector-data-type-label,
-.export-page-input-label {
+.export-selector-data-type-label {
   display: block;
   width: 100%;
+
+  font-size: 1.1rem;
+
   white-space: nowrap;
+
+  cursor: pointer;
   user-select: none;
+
+  &.active {
+    color: $csm-green-darkened;
+  }
 }
 
 .export-page-container {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  align-items: stretch;
 }
 
 .export-page-config {
@@ -160,7 +171,7 @@
 }
 
 .export-preview-table-container {
-  max-width: 90vw;
+  max-width: 80vw;
   overflow-x: auto;
 }