Merge pull request #4 from InfinityTwo/grading-filterable-columns

Switch branch names as changes are more than just filterable columns

Author: InfinityTwo

src/commons/application/ApplicationTypes.ts

@@ -410,6 +410,9 @@ export const defaultWorkspaceManager: WorkspaceManagerState = {
     submissionsTableFilters: {
       columnFilters: []
     },
+    columnVisiblity: {
+      columns: []
+    },
     currentSubmission: undefined,
     currentQuestion: undefined,
     hasUnsavedChanges: false

src/commons/grading/GradingFlex.tsx

@@ -0,0 +1,56 @@
+declare const twJustifyContentValues: readonly ["justify-start", "justify-end", "justify-center", "justify-between", "justify-around", "justify-evenly"];
+declare type JustifyContent = typeof twJustifyContentValues[number];
+declare const twAlignItemsValues: readonly ["items-start", "items-end", "items-center", "items-baseline", "items-stretch"];
+declare type AlignItems = typeof twAlignItemsValues[number];
+declare const twFlexDirectionValues: readonly ["row", "column"];
+declare type FlexDirection = typeof twFlexDirectionValues[number];
+
+type GradingFlexProps = {
+    justifyContent?: JustifyContent;
+    alignItems?: AlignItems;
+    flexDirection?: FlexDirection;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>;
+
+const GradingFlex: React.FC<GradingFlexProps> = ({ justifyContent, alignItems, flexDirection, children, style, className, }: GradingFlexProps) => {
+  const defaultStyle: React.CSSProperties = {
+    display: "flex",
+    justifyContent: 
+      (justifyContent === "justify-start"
+        ? "flex-start"
+        : justifyContent === "justify-end"
+        ? "flex-end"
+        : justifyContent === "justify-center"
+        ? "center"
+        : justifyContent === "justify-between"
+        ? "space-between"
+        : justifyContent === "justify-around"
+        ? "space-around"
+        : justifyContent === "justify-evenly"
+        ? "space-evenly"
+        : ""
+      ),
+    alignItems: 
+      (alignItems === "items-start"
+        ? "start"
+        : alignItems === "items-end"
+        ? "end"
+        : alignItems === "items-center"
+        ? "center"
+        : alignItems === "items-baseline"
+        ? "baseline"
+        : ""
+      ),
+    flexDirection: flexDirection,
+  };
+
+  return (
+    <div className={className} style={{...defaultStyle, ...style}}>
+      {children}
+    </div>
+  );
+}
+
+export default GradingFlex;

src/commons/grading/GradingText.tsx

@@ -0,0 +1,26 @@
+import { Text } from "@blueprintjs/core";
+
+type GradingTextProps = {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  secondaryText?: boolean;
+  className?: string;
+} & React.RefAttributes<HTMLDivElement>;
+
+const GradingText: React.FC<GradingTextProps> = ({ children, style, secondaryText, className = "", }: GradingTextProps) => {
+  const defaultStyle: React.CSSProperties = {
+    width: "max-content",
+    margin: "auto 0"
+  };
+
+  return (
+    <Text 
+      className={"bp5-ui-text " + className + (secondaryText ? " bp5-text-muted" : "")} 
+      style={{...defaultStyle, ...style}}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export default GradingText;

src/commons/workspace/WorkspaceActions.ts

@@ -34,6 +34,7 @@ import {
   EVAL_EDITOR_AND_TESTCASES,
   EVAL_REPL,
   EVAL_TESTCASE,
+  GradingColumnVisibility,
   MOVE_CURSOR,
   NAV_DECLARATION,
   PLAYGROUND_EXTERNAL_SELECT,
@@ -63,6 +64,7 @@ import {
   UPDATE_CURRENTSTEP,
   UPDATE_EDITOR_BREAKPOINTS,
   UPDATE_EDITOR_VALUE,
+  UPDATE_GRADING_COLUMN_VISIBILITY,
   UPDATE_HAS_UNSAVED_CHANGES,
   UPDATE_REPL_VALUE,
   UPDATE_STEPSTOTAL,
@@ -398,6 +400,11 @@ export const updateSubmissionsTableFilters = createAction(
   (filters: SubmissionsTableFilters) => ({ payload: { filters } })
 );
 
+export const updateGradingColumnVisibility = createAction(
+  UPDATE_GRADING_COLUMN_VISIBILITY,
+  (filters: GradingColumnVisibility) => ({ payload: { filters } })
+);
+
 export const updateCurrentAssessmentId = createAction(
   UPDATE_CURRENT_ASSESSMENT_ID,
   (assessmentId: number, questionId: number) => ({ payload: { assessmentId, questionId } })

src/commons/workspace/WorkspaceReducer.ts

@@ -76,6 +76,7 @@ import {
   UPDATE_CURRENTSTEP,
   UPDATE_EDITOR_BREAKPOINTS,
   UPDATE_EDITOR_VALUE,
+  UPDATE_GRADING_COLUMN_VISIBILITY,
   UPDATE_HAS_UNSAVED_CHANGES,
   UPDATE_REPL_VALUE,
   UPDATE_STEPSTOTAL,
@@ -631,6 +632,14 @@ const oldWorkspaceReducer: Reducer<WorkspaceManagerState> = (
           submissionsTableFilters: action.payload.filters
         }
       };
+    case UPDATE_GRADING_COLUMN_VISIBILITY:
+      return {
+        ...state,
+        grading: {
+          ...state.grading,
+          columnVisiblity: action.payload.filters
+        }
+      };
     case UPDATE_CURRENT_ASSESSMENT_ID:
       return {
         ...state,

src/commons/workspace/WorkspaceTypes.ts

@@ -41,6 +41,7 @@ export const TOGGLE_USING_SUBST = 'TOGGLE_USING_SUBST';
 export const TOGGLE_USING_CSE = 'TOGGLE_USING_CSE';
 export const TOGGLE_UPDATE_CSE = 'TOGGLE_UPDATE_CSE';
 export const UPDATE_SUBMISSIONS_TABLE_FILTERS = 'UPDATE_SUBMISSIONS_TABLE_FILTERS';
+export const UPDATE_GRADING_COLUMN_VISIBILITY = 'UPDATE_GRADING_COLUMN_VISIBILITY';
 export const UPDATE_CURRENT_ASSESSMENT_ID = 'UPDATE_CURRENT_ASSESSMENT_ID';
 export const UPDATE_CURRENT_SUBMISSION_ID = 'UPDATE_CURRENT_SUBMISSION_ID';
 export const TOGGLE_FOLDER_MODE = 'TOGGLE_FOLDER_MODE';
@@ -77,6 +78,7 @@ type AssessmentWorkspaceState = AssessmentWorkspaceAttr & WorkspaceState;
 
 type GradingWorkspaceAttr = {
   readonly submissionsTableFilters: SubmissionsTableFilters;
+  readonly columnVisiblity: GradingColumnVisibility;
   readonly currentSubmission?: number;
   readonly currentQuestion?: number;
   readonly hasUnsavedChanges: boolean;
@@ -166,3 +168,7 @@ export type DebuggerContext = {
 export type SubmissionsTableFilters = {
   columnFilters: { id: string; value: unknown }[];
 };
+
+export type GradingColumnVisibility = {
+  columns: string[];
+};

src/pages/academy/grading/subcomponents/GradingActions.tsx

@@ -1,20 +1,23 @@
 import { Icon as BpIcon } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Flex, Icon } from '@tremor/react';
+import { Icon } from '@tremor/react';
+import React from 'react';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import {
   reautogradeSubmission,
   unsubmitSubmission
 } from 'src/commons/application/actions/SessionActions';
+import GradingFlex from 'src/commons/grading/GradingFlex';
 import { showSimpleConfirmDialog } from 'src/commons/utils/DialogHelper';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 
 type GradingActionsProps = {
   submissionId: number;
+  style?: React.CSSProperties;
 };
 
-const GradingActions: React.FC<GradingActionsProps> = ({ submissionId }) => {
+const GradingActions: React.FC<GradingActionsProps> = ({ submissionId, style }) => {
   const dispatch = useDispatch();
   const courseId = useTypedSelector(store => store.session.courseId);
 
@@ -46,7 +49,7 @@ const GradingActions: React.FC<GradingActionsProps> = ({ submissionId }) => {
   };
 
   return (
-    <Flex justifyContent="justify-start" spaceX="space-x-2">
+    <GradingFlex justifyContent="justify-start" style={{columnGap: "5px", ...style}}>
       <Link to={`/courses/${courseId}/grading/${submissionId}`}>
         <Icon tooltip="Grade" icon={() => <BpIcon icon={IconNames.EDIT} />} variant="light" />
       </Link>
@@ -62,7 +65,7 @@ const GradingActions: React.FC<GradingActionsProps> = ({ submissionId }) => {
       <button type="button" style={{ padding: 0 }} onClick={handleUnsubmitClick}>
         <Icon tooltip="Unsubmit" icon={() => <BpIcon icon={IconNames.UNDO} />} variant="simple" />
       </button>
-    </Flex>
+    </GradingFlex>
   );
 };
 

src/pages/academy/grading/subcomponents/GradingBadges.tsx

@@ -95,4 +95,32 @@ const FilterBadge: React.FC<FilterBadgeProps> = ({ filter, onRemove }) => {
   );
 };
 
-export { AssessmentTypeBadge, FilterBadge, GradingStatusBadge, SubmissionStatusBadge };
+type ColumnFilterBadgeProps = {
+  filter: string;
+  onRemove: (toRemove: string) => void;
+  filtersName: string;
+};
+
+const ColumnFilterBadge: React.FC<ColumnFilterBadgeProps> = ({ filter, onRemove, filtersName }) => {
+  return (
+    <button
+      type="button"
+      className="grading-overview-filterable-btns"
+      onClick={() => onRemove(filter)}
+    >
+      <Badge
+        text={filtersName}
+        icon={() => <Icon icon={IconNames.CROSS} style={{ marginRight: '0.25rem' }} />}
+        color={getBadgeColorFromLabel(filter)}
+      />
+    </button>
+  );
+};
+
+export {
+  AssessmentTypeBadge,
+  ColumnFilterBadge,
+  FilterBadge,
+  GradingStatusBadge,
+  SubmissionStatusBadge
+};

src/pages/academy/grading/subcomponents/GradingColumnFilters.tsx

@@ -0,0 +1,28 @@
+import { ColumnFilterBadge } from './GradingBadges';
+
+type GradingSubmissionFiltersProps = {
+  filters: string[];
+  onFilterRemove: (toRemove: string) => void;
+  filtersName: string[];
+};
+
+const GradingColumnFilters: React.FC<GradingSubmissionFiltersProps> = ({
+  filters,
+  onFilterRemove,
+  filtersName
+}) => {
+  return (
+    <div>
+      {filters.map((filter, index) => (
+        <ColumnFilterBadge
+          filter={filter}
+          filtersName={filtersName[index]}
+          onRemove={onFilterRemove}
+          key={filter}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default GradingColumnFilters;