From 992fb7f20f2a3978d51c139ab164e2b965715f07 Mon Sep 17 00:00:00 2001
From: Horia Coman <horia141@gmail.com>
Date: Mon, 17 Jun 2024 00:02:16 +0300
Subject: [PATCH] Merged branch feature/is-done-toggle into develop

---
 .../app/components/infra/section-actions.tsx  | 239 +++++++++++++++---
 .../app/routes/workspace/time-plans/$id.tsx   | 122 +++++++--
 2 files changed, 302 insertions(+), 59 deletions(-)

diff --git a/src/webui/app/components/infra/section-actions.tsx b/src/webui/app/components/infra/section-actions.tsx
index 5d5c7d8f..eab43ab3 100644
--- a/src/webui/app/components/infra/section-actions.tsx
+++ b/src/webui/app/components/infra/section-actions.tsx
@@ -1,9 +1,13 @@
 import type { WorkspaceFeature } from "@jupiter/webapi-client";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import BoltIcon from "@mui/icons-material/Bolt";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import {
+  Autocomplete,
   Button,
   ButtonGroup,
+  Checkbox,
   ClickAwayListener,
   Dialog,
   DialogActions,
@@ -15,6 +19,7 @@ import {
   Paper,
   Popper,
   Stack,
+  TextField,
   useTheme,
 } from "@mui/material";
 import { Link } from "@remix-run/react";
@@ -52,10 +57,19 @@ interface FilterFewOptionsDesc<K> {
   hideIfOneOption?: boolean;
 }
 
+interface FilterManyOptionsDesc<K> {
+  kind: "filter-many-options";
+  title: string;
+  options: Array<FilterOption<K>>;
+  onSelect: (selected: Array<K>) => void;
+  hideIfOneOption?: boolean;
+}
+
 type ActionDesc =
   | NavSingleDesc // A single button, can be a navigation or a callback
   | NavMultipleDesc // A group of buttons, can be a navigation or a callback
-  | FilterFewOptionsDesc<any>; // A group to filter on, can be a navigation or a callback
+  | FilterFewOptionsDesc<any> // A group to filter on, can be a navigation or a callback
+  | FilterManyOptionsDesc<any>; // A group to filter on, with many options
 
 export function NavSingle(
   text: string,
@@ -105,56 +119,40 @@ export function FilterFewOptions<K>(
   };
 }
 
+export function FilterManyOptions<K>(
+  title: string,
+  options: Array<FilterOption<K>>,
+  onSelect: (selected: Array<K>) => void
+): FilterManyOptionsDesc<K> {
+  return {
+    kind: "filter-many-options",
+    title: title,
+    options: options,
+    onSelect: onSelect,
+    hideIfOneOption: true,
+  };
+}
+
 interface SectionActionsProps {
   id: string;
   topLevelInfo: TopLevelInfo;
   inputsEnabled: boolean;
   actions: Array<ActionDesc>;
+  extraActions?: Array<ActionDesc>;
 }
 
 export function SectionActions(props: SectionActionsProps) {
   const isBigScreen = useBigScreen();
 
-  const [showExtraActionsDialog, setShowExtraActionsDialog] = useState(false);
-
   if (!isBigScreen) {
+    const allActions = props.actions.concat(props.extraActions ?? []);
     return (
-      <>
-        <Button
-          disabled={!props.inputsEnabled}
-          variant="outlined"
-          size="medium"
-          color="primary"
-          onClick={() => setShowExtraActionsDialog(true)}
-        >
-          <BoltIcon />
-        </Button>
-
-        <Dialog
-          onClose={() => setShowExtraActionsDialog(false)}
-          open={showExtraActionsDialog}
-        >
-          <DialogTitle>Actions</DialogTitle>
-          <DialogContent>
-            <Stack spacing={2}>
-              {props.actions.map((action, index) => (
-                <ActionView
-                  key={`action-${props.id}-${index}`}
-                  topLevelInfo={props.topLevelInfo}
-                  inputsEnabled={props.inputsEnabled}
-                  orientation="vertical"
-                  action={action}
-                />
-              ))}
-            </Stack>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={() => setShowExtraActionsDialog(false)}>
-              Close
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </>
+      <SectionActionsWithDialog
+        id={props.id}
+        topLevelInfo={props.topLevelInfo}
+        inputsEnabled={props.inputsEnabled}
+        actions={allActions}
+      />
     );
   }
 
@@ -169,10 +167,72 @@ export function SectionActions(props: SectionActionsProps) {
           action={action}
         />
       ))}
+
+      <SectionActionsWithDialog
+        id={props.id}
+        topLevelInfo={props.topLevelInfo}
+        inputsEnabled={props.inputsEnabled}
+        actions={props.extraActions ?? []}
+      />
     </Stack>
   );
 }
 
+interface SectionActionsWithDialogProps {
+  id: string;
+  topLevelInfo: TopLevelInfo;
+  inputsEnabled: boolean;
+  actions: Array<ActionDesc>;
+}
+
+function SectionActionsWithDialog(props: SectionActionsWithDialogProps) {
+  const [showExtraActionsDialog, setShowExtraActionsDialog] = useState(false);
+
+  if (props.actions.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <Button
+        disabled={!props.inputsEnabled}
+        variant="outlined"
+        size="medium"
+        color="primary"
+        sx={{ margin: "0.25rem" }}
+        onClick={() => setShowExtraActionsDialog(true)}
+      >
+        <BoltIcon />
+      </Button>
+
+      <Dialog
+        onClose={() => setShowExtraActionsDialog(false)}
+        open={showExtraActionsDialog}
+      >
+        <DialogTitle>Actions</DialogTitle>
+        <DialogContent>
+          <Stack spacing={2}>
+            {props.actions.map((action, index) => (
+              <ActionView
+                key={`action-${props.id}-${index}`}
+                topLevelInfo={props.topLevelInfo}
+                inputsEnabled={props.inputsEnabled}
+                orientation="vertical"
+                action={action}
+              />
+            ))}
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setShowExtraActionsDialog(false)}>
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
+
 interface ActionViewProps {
   topLevelInfo: TopLevelInfo;
   inputsEnabled: boolean;
@@ -210,6 +270,16 @@ function ActionView(props: ActionViewProps) {
           action={props.action}
         />
       );
+
+    case "filter-many-options":
+      return (
+        <FilterManyOptionsView
+          topLevelInfo={props.topLevelInfo}
+          inputsEnabled={props.inputsEnabled}
+          orientation={props.orientation}
+          action={props.action}
+        />
+      );
   }
 }
 
@@ -349,7 +419,7 @@ function NavMultipleCompactView(props: NavMultipleViewProps) {
       <Popper
         sx={{
           zIndex: theme.zIndex.appBar + 20,
-          backgroundColor: theme.palette.background.paper
+          backgroundColor: theme.palette.background.paper,
         }}
         open={open}
         anchorEl={anchorRef.current}
@@ -396,6 +466,25 @@ interface FilterFewOptionsViewProps<K> {
 function FilterFewOptionsView<K>(props: FilterFewOptionsViewProps<K>) {
   const [selected, setSelected] = useState<K>(props.action.defaultOption);
 
+  const realOptions: FilterOption<K>[] = [];
+  for (const option of props.action.options) {
+    if (option.gatedOn) {
+      const workspace = props.topLevelInfo.workspace;
+      if (!isWorkspaceFeatureAvailable(workspace, option.gatedOn)) {
+        continue;
+      }
+    }
+    realOptions.push(option);
+  }
+
+  if (realOptions.length === 0) {
+    return <></>;
+  }
+
+  if (props.action.hideIfOneOption && realOptions.length === 1) {
+    return <></>;
+  }
+
   return (
     <ButtonGroup orientation={props.orientation}>
       {props.action.options.map((option, index) => {
@@ -428,3 +517,73 @@ function FilterFewOptionsView<K>(props: FilterFewOptionsViewProps<K>) {
     </ButtonGroup>
   );
 }
+
+interface FilterManyOptionsViewProps<K> {
+  topLevelInfo: TopLevelInfo;
+  inputsEnabled: boolean;
+  orientation: "horizontal" | "vertical";
+  action: FilterManyOptionsDesc<K>;
+}
+
+function FilterManyOptionsView<K>(props: FilterManyOptionsViewProps<K>) {
+  const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+  const checkedIcon = <CheckBoxIcon fontSize="small" />;
+
+  const [selected, setSelected] = useState<FilterOption<K>[]>([]);
+
+  const realOptions: FilterOption<K>[] = [];
+  for (const option of props.action.options) {
+    if (option.gatedOn) {
+      const workspace = props.topLevelInfo.workspace;
+      if (!isWorkspaceFeatureAvailable(workspace, option.gatedOn)) {
+        continue;
+      }
+    }
+    realOptions.push(option);
+  }
+
+  if (realOptions.length === 0) {
+    return <></>;
+  }
+
+  if (props.action.hideIfOneOption && realOptions.length === 1) {
+    return <></>;
+  }
+
+  return (
+    <Autocomplete
+      multiple
+      disableCloseOnSelect
+      size="small"
+      options={realOptions}
+      limitTags={2}
+      getOptionLabel={(option) => option.text}
+      value={selected}
+      onChange={(_, selected) => {
+        setSelected(selected);
+        props.action.onSelect(selected.map((option) => option.value));
+      }}
+      isOptionEqualToValue={(option, value) => option.value === value.value}
+      renderOption={(props, option, { selected }) => (
+        <li {...props}>
+          <Checkbox
+            icon={icon}
+            checkedIcon={checkedIcon}
+            style={{ marginRight: 8 }}
+            checked={selected}
+          />
+          {option.text}
+        </li>
+      )}
+      style={{ minWidth: "180px" }}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          multiline={false}
+          label={props.action.title}
+          placeholder={props.action.title}
+        />
+      )}
+    />
+  );
+}
diff --git a/src/webui/app/routes/workspace/time-plans/$id.tsx b/src/webui/app/routes/workspace/time-plans/$id.tsx
index a9bc567f..f9e969d6 100644
--- a/src/webui/app/routes/workspace/time-plans/$id.tsx
+++ b/src/webui/app/routes/workspace/time-plans/$id.tsx
@@ -8,6 +8,8 @@ import type {
 import {
   ApiError,
   RecurringTaskPeriod,
+  TimePlanActivityFeasability,
+  TimePlanActivityKind,
   TimePlanActivityTarget,
   WorkspaceFeature,
 } from "@jupiter/webapi-client";
@@ -52,6 +54,7 @@ import { BranchPanel } from "~/components/infra/layout/branch-panel";
 import { NestingAwareBlock } from "~/components/infra/layout/nesting-aware-block";
 import {
   FilterFewOptions,
+  FilterManyOptions,
   NavMultipleCompact,
   NavSingle,
   SectionActions,
@@ -225,10 +228,21 @@ export default function TimePlanView() {
   const [selectedView, setSelectedView] = useState(
     inferDefaultSelectedView(topLevelInfo.workspace, loaderData.timePlan)
   );
+  const [selectedKinds, setSelectedKinds] = useState<TimePlanActivityKind[]>(
+    []
+  );
+  const [selectedFeasabilities, setSelectedFeasabilities] = useState<
+    TimePlanActivityFeasability[]
+  >([]);
+  const [selectedDoneness, setSelectedDoneness] = useState<boolean[]>([]);
+
   useEffect(() => {
     setSelectedView(
       inferDefaultSelectedView(topLevelInfo.workspace, loaderData.timePlan)
     );
+    setSelectedKinds([]);
+    setSelectedFeasabilities([]);
+    setSelectedDoneness([]);
   }, [topLevelInfo, loaderData]);
 
   const sortedProjects = sortProjectsByTreeOrder(loaderData.allProjects || []);
@@ -243,7 +257,6 @@ export default function TimePlanView() {
       enableArchiveButton={inputsEnabled}
       returnLocation="/workspace/time-plans"
     >
-
       <Form method="post">
         <NestingAwareBlock shouldHide={shouldShowALeaf}>
           <GlobalError actionResult={actionData} />
@@ -355,6 +368,45 @@ export default function TimePlanView() {
                     (selected) => setSelectedView(selected)
                   ),
                 ]}
+                extraActions={[
+                  FilterManyOptions(
+                    "Kind",
+                    [
+                      { value: TimePlanActivityKind.FINISH, text: "Finish" },
+                      {
+                        value: TimePlanActivityKind.MAKE_PROGRESS,
+                        text: "Make Progress",
+                      },
+                    ],
+                    setSelectedKinds
+                  ),
+                  FilterManyOptions(
+                    "Feasability",
+                    [
+                      {
+                        value: TimePlanActivityFeasability.MUST_DO,
+                        text: "Must Do",
+                      },
+                      {
+                        value: TimePlanActivityFeasability.NICE_TO_HAVE,
+                        text: "Nice to Have",
+                      },
+                      {
+                        value: TimePlanActivityFeasability.STRETCH,
+                        text: "Stretch",
+                      },
+                    ],
+                    setSelectedFeasabilities
+                  ),
+                  FilterManyOptions(
+                    "Done",
+                    [
+                      { value: true, text: "Done" },
+                      { value: false, text: "Not Done" },
+                    ],
+                    setSelectedDoneness
+                  ),
+                ]}
               />
             }
           >
@@ -366,6 +418,9 @@ export default function TimePlanView() {
                 inboxTasksByRefId={targetInboxTasksByRefId}
                 bigPlansByRefId={targetBigPlansByRefId}
                 activityDoneness={loaderData.activityDoneness}
+                filterKind={selectedKinds}
+                filterFeasability={selectedFeasabilities}
+                filterDoneness={selectedDoneness}
               />
             )}
 
@@ -411,6 +466,9 @@ export default function TimePlanView() {
                         inboxTasksByRefId={targetInboxTasksByRefId}
                         bigPlansByRefId={targetBigPlansByRefId}
                         activityDoneness={loaderData.activityDoneness}
+                        filterKind={selectedKinds}
+                        filterFeasability={selectedFeasabilities}
+                        filterDoneness={selectedDoneness}
                       />
                     </Box>
                   );
@@ -479,7 +537,7 @@ export default function TimePlanView() {
           )}
         </NestingAwareBlock>
       </Form>
-    
+
       <AnimatePresence mode="wait" initial={false}>
         <Outlet />
       </AnimatePresence>
@@ -503,6 +561,9 @@ interface ActivityListProps {
   inboxTasksByRefId: Map<string, InboxTask>;
   bigPlansByRefId: Map<string, BigPlan>;
   activityDoneness: Record<string, boolean>;
+  filterKind: TimePlanActivityKind[];
+  filterFeasability: TimePlanActivityFeasability[];
+  filterDoneness: boolean[];
 }
 
 function ActivityList(props: ActivityListProps) {
@@ -514,23 +575,46 @@ function ActivityList(props: ActivityListProps) {
 
   return (
     <EntityStack>
-      {sortedActivities.map((entry) => (
-        <TimePlanActivityCard
-          key={`time-plan-activity-${entry.ref_id}`}
-          topLevelInfo={props.topLevelInfo}
-          timePlan={props.timePlan}
-          activity={entry}
-          indent={
-            entry.target === TimePlanActivityTarget.INBOX_TASK &&
-            props.inboxTasksByRefId.get(entry.target_ref_id)?.big_plan_ref_id
-              ? 2
-              : 0
-          }
-          inboxTasksByRefId={props.inboxTasksByRefId}
-          bigPlansByRefId={props.bigPlansByRefId}
-          activityDoneness={props.activityDoneness}
-        />
-      ))}
+      {sortedActivities.map((entry) => {
+        if (
+          props.filterKind.length > 0 &&
+          !props.filterKind.includes(entry.kind)
+        ) {
+          return null;
+        }
+
+        if (
+          props.filterFeasability.length > 0 &&
+          !props.filterFeasability.includes(entry.feasability)
+        ) {
+          return null;
+        }
+
+        if (
+          props.filterDoneness.length > 0 &&
+          !props.filterDoneness.includes(props.activityDoneness[entry.ref_id])
+        ) {
+          return null;
+        }
+
+        return (
+          <TimePlanActivityCard
+            key={`time-plan-activity-${entry.ref_id}`}
+            topLevelInfo={props.topLevelInfo}
+            timePlan={props.timePlan}
+            activity={entry}
+            indent={
+              entry.target === TimePlanActivityTarget.INBOX_TASK &&
+              props.inboxTasksByRefId.get(entry.target_ref_id)?.big_plan_ref_id
+                ? 2
+                : 0
+            }
+            inboxTasksByRefId={props.inboxTasksByRefId}
+            bigPlansByRefId={props.bigPlansByRefId}
+            activityDoneness={props.activityDoneness}
+          />
+        );
+      })}
     </EntityStack>
   );
 }