filter stories

packages/datatrak-web/src/components/Icons/FiltersIcon.tsx

@@ -0,0 +1,32 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@material-ui/core';
+
+export const FiltersIcon = ({ htmlColor = 'currentColor', ...props }: SvgIconProps) => {
+  return (
+    <SvgIcon
+      {...props}
+      width="26"
+      height="26"
+      viewBox="0 0 26 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.05406 5.05555H2.96063C3.18926 5.8872 3.67584 6.6194 4.34639 7.14083C5.01695 7.66227 5.83482 7.94443 6.67568 7.94443C7.51654 7.94443 8.33441 7.66227 9.00496 7.14083C9.67552 6.6194 10.1621 5.8872 10.3907 5.05555H24.9459C25.2255 5.05555 25.4936 4.94141 25.6913 4.73825C25.8889 4.53508 26 4.25953 26 3.97222C26 3.6849 25.8889 3.40935 25.6913 3.20618C25.4936 3.00302 25.2255 2.88888 24.9459 2.88888H10.3907C10.1621 2.05723 9.67552 1.32504 9.00496 0.803599C8.33441 0.282163 7.51654 0 6.67568 0C5.83482 0 5.01695 0.282163 4.34639 0.803599C3.67584 1.32504 3.18926 2.05723 2.96063 2.88888H1.05406C0.774503 2.88888 0.5064 3.00302 0.308726 3.20618C0.111052 3.40935 0 3.6849 0 3.97222C0 4.25953 0.111052 4.53508 0.308726 4.73825C0.5064 4.94141 0.774503 5.05555 1.05406 5.05555ZM6.67568 2.16664C7.02313 2.16664 7.36278 2.27254 7.65168 2.47094C7.94057 2.66933 8.16574 2.95132 8.2987 3.28124C8.43166 3.61116 8.46645 3.97419 8.39867 4.32443C8.33089 4.67467 8.16357 4.99639 7.91789 5.2489C7.67221 5.50141 7.35918 5.67337 7.01841 5.74304C6.67763 5.81271 6.32441 5.77696 6.0034 5.64031C5.6824 5.50365 5.40803 5.27223 5.21499 4.97532C5.02196 4.6784 4.91892 4.32932 4.91892 3.97222C4.91946 3.49352 5.10472 3.03459 5.43405 2.6961C5.76339 2.35761 6.20992 2.1672 6.67568 2.16664Z"
+        fill="white"
+      />
+      <path
+        d="M24.9459 11.9167H22.3367C22.108 11.0851 21.6215 10.3529 20.9509 9.83143C20.2803 9.31 19.4625 9.02783 18.6216 9.02783C17.7808 9.02783 16.9629 9.31 16.2923 9.83143C15.6218 10.3529 15.1352 11.0851 14.9066 11.9167H1.05406C0.774503 11.9167 0.5064 12.0309 0.308726 12.234C0.111052 12.4372 0 12.7127 0 13C0 13.2874 0.111052 13.5629 0.308726 13.7661C0.5064 13.9692 0.774503 14.0834 1.05406 14.0834H14.9066C15.1352 14.915 15.6218 15.6472 16.2923 16.1687C16.9629 16.6901 17.7808 16.9723 18.6216 16.9723C19.4625 16.9723 20.2803 16.6901 20.9509 16.1687C21.6215 15.6472 22.108 14.915 22.3367 14.0834H24.9459C25.2255 14.0834 25.4936 13.9692 25.6913 13.7661C25.8889 13.5629 26 13.2874 26 13C26 12.7127 25.8889 12.4372 25.6913 12.234C25.4936 12.0309 25.2255 11.9167 24.9459 11.9167ZM18.6216 14.8056C18.2742 14.8056 17.9345 14.6997 17.6456 14.5013C17.3567 14.3029 17.1316 14.0209 16.9986 13.691C16.8656 13.3611 16.8308 12.998 16.8986 12.6478C16.9664 12.2976 17.1337 11.9758 17.3794 11.7233C17.6251 11.4708 17.9381 11.2989 18.2789 11.2292C18.6197 11.1595 18.9729 11.1953 19.2939 11.3319C19.6149 11.4686 19.8893 11.7 20.0823 11.9969C20.2753 12.2939 20.3784 12.6429 20.3784 13C20.3778 13.4787 20.1926 13.9377 19.8632 14.2761C19.5339 14.6146 19.0874 14.805 18.6216 14.8056Z"
+        fill="white"
+      />
+      <path
+        d="M24.9459 20.9445H10.3907C10.1621 20.1128 9.67552 19.3806 9.00496 18.8592C8.33441 18.3377 7.51654 18.0556 6.67568 18.0556C5.83482 18.0556 5.01695 18.3377 4.34639 18.8592C3.67584 19.3806 3.18926 20.1128 2.96063 20.9445H1.05406C0.774503 20.9445 0.5064 21.0586 0.308726 21.2618C0.111052 21.4649 0 21.7405 0 22.0278C0 22.3151 0.111052 22.5907 0.308726 22.7938C0.5064 22.997 0.774503 23.1111 1.05406 23.1111H2.96063C3.18926 23.9428 3.67584 24.675 4.34639 25.1964C5.01695 25.7178 5.83482 26 6.67568 26C7.51654 26 8.33441 25.7178 9.00496 25.1964C9.67552 24.675 10.1621 23.9428 10.3907 23.1111H24.9459C25.2255 23.1111 25.4936 22.997 25.6913 22.7938C25.8889 22.5907 26 22.3151 26 22.0278C26 21.7405 25.8889 21.4649 25.6913 21.2618C25.4936 21.0586 25.2255 20.9445 24.9459 20.9445ZM6.67568 23.8334C6.32823 23.8334 5.98857 23.7275 5.69968 23.5291C5.41078 23.3307 5.18561 23.0487 5.05265 22.7188C4.91968 22.3888 4.88489 22.0258 4.95268 21.6756C5.02046 21.3253 5.18778 21.0036 5.43347 20.7511C5.67915 20.4986 5.99218 20.3266 6.33295 20.257C6.67373 20.1873 7.02696 20.223 7.34796 20.3597C7.66896 20.4964 7.94333 20.7278 8.13637 21.0247C8.3294 21.3216 8.43243 21.6707 8.43243 22.0278C8.43189 22.5065 8.24662 22.9654 7.91729 23.3039C7.58795 23.6424 7.14143 23.8328 6.67568 23.8334Z"
+        fill="white"
+      />
+    </SvgIcon>
+  );
+};

packages/datatrak-web/src/components/Icons/index.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
 export { Coconut } from './Coconut';
+export { FiltersIcon } from './FiltersIcon';
 export { Pig } from './Pig';
 export { SurveyIcon } from './SurveyIcon';
 export { SurveyFolderIcon } from './SurveyFolderIcon';

packages/datatrak-web/src/features/Tasks/TasksTable/MobileTaskFilters.tsx

@@ -0,0 +1,176 @@
+/**
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { TransitionProps } from '@material-ui/core/transitions';
+import Slide from '@material-ui/core/Slide';
+import { Tabs, Tab, Fab, Typography } from '@material-ui/core';
+import { FiltersIcon, Modal, Button } from '../../../components';
+
+const FilterButton = styled(Fab).attrs({ color: 'primary' })`
+  position: absolute;
+  bottom: 1rem;
+  right: 2rem;
+`;
+
+const StyledModal = styled(Modal)`
+  .MuiDialog-scrollPaper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+  .MuiPaper-root {
+    max-height: 600px;
+
+    > div {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+`;
+
+const StyledTabs = styled(Tabs)`
+  border: 1px solid ${({ theme }) => theme.palette.primary.main};
+  border-radius: 5px;
+  margin-block-start: 1.5rem;
+
+  .MuiTabs-indicator {
+    display: none;
+  }
+
+  .MuiTab-root {
+    border-right: 1px solid ${({ theme }) => theme.palette.primary.main};
+    color: ${({ theme }) => theme.palette.text.primary};
+
+    &.Mui-selected {
+      background: rgba(50, 141, 229, 0.1);
+    }
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+`;
+
+const Panel = styled.div`
+  padding: 1rem 0;
+  flex: 1;
+`;
+
+const SelectList = styled.div`
+    h100%;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+`;
+
+const DialogActions = styled.div`
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Title = styled(Typography).attrs({
+  variant: 'h2',
+})`
+  font-size: 1.125rem;
+`;
+
+/**
+ * Taken from [Material UI's example](https://v4.mui.com/components/dialogs/#full-screen-dialogs) to make the dialog slide up from the bottom
+ */
+export const SlideTransition = React.forwardRef(function Transition(
+  props: TransitionProps & { children?: React.ReactElement },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+const TabPanel = ({ children, value, index, ...props }) => {
+  if (value !== index) {
+    return null;
+  }
+
+  return (
+    <Panel
+      role="tabpanel"
+      id={`full-width-tabpanel-${index}`}
+      aria-labelledby={`full-width-tab-${index}`}
+      {...props}
+    >
+      {children}
+    </Panel>
+  );
+};
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export const MobileTaskFilters = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [value, setValue] = useState(0);
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  const openFilters = () => {
+    setIsOpen(true);
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <FilterButton onClick={openFilters}>
+        <FiltersIcon />
+      </FilterButton>
+      <StyledModal
+        open={isOpen}
+        onClose={onClose}
+        disablePortal={false}
+        fullScreen
+        TransitionComponent={SlideTransition}
+      >
+        <Title>Filter by</Title>
+        <StyledTabs
+          value={value}
+          onChange={handleChange}
+          indicatorColor="primary"
+          textColor="primary"
+          variant="fullWidth"
+          aria-label="full width tabs example"
+        >
+          <Tab label="Survey" {...a11yProps(0)} />
+          <Tab label="Entity" {...a11yProps(1)} />
+          <Tab label="Assignee" {...a11yProps(2)} />
+        </StyledTabs>
+        <TabPanel value={value} index={0}>
+          <SelectList>Survey options</SelectList>
+        </TabPanel>
+        <TabPanel value={value} index={1}>
+          <SelectList>Entity options</SelectList>
+        </TabPanel>
+        <TabPanel value={value} index={2}>
+          <SelectList>Assignee options</SelectList>
+        </TabPanel>
+        <DialogActions>
+          <Button variant="text" color="default">
+            Clear filters
+          </Button>
+          <Button>Apply</Button>
+        </DialogActions>
+      </StyledModal>
+    </>
+  );
+};

packages/datatrak-web/src/features/Tasks/TasksTable/TasksTable.tsx

@@ -20,6 +20,7 @@ import { StatusFilter } from './StatusFilter';
 import { ActionButton } from './ActionButton';
 import { FilterToolbar } from './FilterToolbar';
 import { RepeatScheduleFilter } from './RepeatScheduleFilter';
+import { MobileTaskFilters } from './MobileTaskFilters';
 
 const Container = styled.div`
   display: flex;
@@ -259,6 +260,7 @@ export const TasksTable = () => {
         noDataMessage="No tasks to display. Click the ‘+ Create task’ button above to add a new task."
         isLoading={isLoading}
       />
+      <MobileTaskFilters />
     </Container>
   );
 };

packages/datatrak-web/stories/mobileTaskFilters.stories.tsx

@@ -0,0 +1,37 @@
+/*
+ * Tupaia
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import styled from 'styled-components';
+import { MobileTaskFilters } from '../src/features/Tasks/TasksTable/MobileTaskFilters';
+
+const Container = styled.div`
+  position: relative;
+  background: #f0f0f0;
+  border-radius: 10px;
+  width: 500px;
+  height: 800px;
+  max-height: 90vh;
+  max-width: 90vw;
+`;
+
+const meta: Meta<typeof MobileTaskFilters> = {
+  title: 'components/MobileTaskFilters',
+  component: MobileTaskFilters,
+  decorators: [
+    Story => (
+      <Container>
+        <Story />
+      </Container>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MobileTaskFilters>;
+
+export const Simple: Story = {
+  render: () => <MobileTaskFilters />,
+};