Skip to content

Commit

Permalink
wip: Team page filters and cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianjon3s
ianjon3s committed Jan 9, 2025
1 parent 5088b53 commit 40093f6
Show file tree
Hide file tree
Showing 3 changed files with 160 additions and 21 deletions.
109 changes: 109 additions & 0 deletions editor.planx.uk/src/pages/Filters.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import React from "react";
import ChecklistItem from "ui/shared/ChecklistItem/ChecklistItem";

const FiltersContainer = styled(Box)(({ theme }) => ({
width: "100%",
display: "flex",
flexDirection: "column",
background: "#eee",
margin: theme.spacing(1, 0, 3),
}));

const FiltersHeader = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
padding: theme.spacing(2),
gap: theme.spacing(1),
}));

const FiltersBody = styled(Box)(({ theme }) => ({}));

const FiltersContent = styled(Box)(({ theme }) => ({
borderTop: `1px solid ${theme.palette.border.main}`,
padding: theme.spacing(1.5, 2.5),
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
}));

const FiltersColumn = styled(Box)(({ theme }) => ({
flexBasis: "20%",
}));

const FiltersFooter = styled(Box)(({ theme }) => ({
borderTop: `1px solid ${theme.palette.border.main}`,
padding: theme.spacing(1.5, 2),
}));

const Filters: React.FC = () => {
return (
<FiltersContainer>
<FiltersHeader>
<KeyboardArrowUpIcon />
<Typography variant="h4">Hide filters</Typography>
</FiltersHeader>
<FiltersBody>
<FiltersContent>
<FiltersColumn>
<Typography variant="h5">Online status</Typography>
<ChecklistItem
onChange={() => {}}
label={"Online"}
checked={false}
variant="compact"
/>
<ChecklistItem
onChange={() => {}}
label={"Offline"}
checked={false}
variant="compact"
/>
</FiltersColumn>
<FiltersColumn>
<Typography variant="h5">Application type</Typography>
<ChecklistItem
onChange={() => {}}
label={"Submission"}
checked={false}
variant="compact"
/>
<ChecklistItem
onChange={() => {}}
label={"Guidance"}
checked={false}
variant="compact"
/>
</FiltersColumn>
<FiltersColumn>
<Typography variant="h5">Service type</Typography>
<ChecklistItem
onChange={() => {}}
label={"Statutory"}
checked={false}
variant="compact"
/>
<ChecklistItem
onChange={() => {}}
label={"Discretionary"}
checked={false}
variant="compact"
/>
</FiltersColumn>
</FiltersContent>
<FiltersFooter>
<Button variant="contained" color="primary">
Apply filters
</Button>
</FiltersFooter>
</FiltersBody>
</FiltersContainer>
);
};

export default Filters;
16 changes: 9 additions & 7 deletions editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import { gql } from "@apollo/client";
import { getPathForNode, sortFlow } from "@opensystemslab/planx-core";
import {
ComponentType as TYPES,
flatFlags,
FlowGraph,
NodeId,
OrderedFlow,
flatFlags,
} from "@opensystemslab/planx-core/types";
import {
add,
Expand Down Expand Up @@ -137,6 +137,7 @@ export interface FlowSummary {
name: string;
slug: string;
updatedAt: string;
status: string;
operations: {
createdAt: string;
actor: {
Expand Down Expand Up @@ -189,7 +190,7 @@ export interface EditorStore extends Store.Store {
href: string;
}) => void;
getURLForNode: (nodeId: string) => string;
getFlowSchema: () => { nodes?: string[], options?: string[] } | undefined;
getFlowSchema: () => { nodes?: string[]; options?: string[] } | undefined;
}

export const editorStore: StateCreator<
Expand Down Expand Up @@ -382,6 +383,7 @@ export const editorStore: StateCreator<
id
name
slug
status
updatedAt: updated_at
operations(limit: 1, order_by: { created_at: desc }) {
createdAt: created_at
Expand Down Expand Up @@ -614,14 +616,14 @@ export const editorStore: StateCreator<
Object.entries(flow).map(([_id, node]) => {
if (node.data?.fn) {
// Exclude Filter fn value as not exposed to editors
if (node.data?.fn !== "flag") nodes.add(node.data.fn)
};
if (node.data?.fn !== "flag") nodes.add(node.data.fn);
}

if (node.data?.val) {
// Exclude Filter Option flag values as not exposed to editors
const flagVals = flatFlags.map((flag) => flag.value);
if (!flagVals.includes(node.data.val)) options.add(node.data.val)
};
if (!flagVals.includes(node.data.val)) options.add(node.data.val);
}
});

return {
Expand Down
56 changes: 42 additions & 14 deletions editor.planx.uk/src/pages/Team.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Edit from "@mui/icons-material/Edit";
import Visibility from "@mui/icons-material/Visibility";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Chip from "@mui/material/Chip";
import Container from "@mui/material/Container";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
Expand All @@ -11,16 +12,20 @@ import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import { flow } from "lodash";
import React, { useCallback, useEffect, useState } from "react";
import { Link, useNavigation } from "react-navi";
import { FONT_WEIGHT_SEMI_BOLD } from "theme";
import { borderedFocusStyle } from "theme";
import { AddButton } from "ui/editor/AddButton";
import Input from "ui/shared/Input/Input";
import InputRow from "ui/shared/InputRow";
import InputRowItem from "ui/shared/InputRowItem";
import InputRowLabel from "ui/shared/InputRowLabel";
import { slugify } from "utils";

import { client } from "../lib/graphql";
import SimpleMenu from "../ui/editor/SimpleMenu";
import Filters from "./Filters";
import { useStore } from "./FlowEditor/lib/store";
import { FlowSummary } from "./FlowEditor/lib/store/editor";
import { formatLastEditMessage } from "./FlowEditor/utils";
Expand All @@ -29,18 +34,21 @@ const DashboardList = styled("ul")(({ theme }) => ({
padding: theme.spacing(0, 0, 3),
borderBottom: "1px solid #fff",
margin: 0,
display: "grid",
gridAutoRows: "1fr",
gridTemplateColumns: "1fr 1fr 1fr",
gridGap: theme.spacing(2),
}));

const DashboardListItem = styled("li")(({ theme }) => ({
listStyle: "none",
position: "relative",
color: theme.palette.common.white,
margin: theme.spacing(1, 0),
background: theme.palette.text.primary,
display: "flex",
justifyContent: "space-between",
alignItems: "stretch",
borderRadius: "2px",
flexDirection: "column",
borderRadius: "4px",
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.border.main}`,
boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)",
}));

const DashboardLink = styled(Link)(({ theme }) => ({
Expand All @@ -59,11 +67,11 @@ const DashboardLink = styled(Link)(({ theme }) => ({

const StyledSimpleMenu = styled(SimpleMenu)(({ theme }) => ({
display: "flex",
borderLeft: `1px solid ${theme.palette.border.main}`,
marginTop: "auto",
}));

const LinkSubText = styled(Box)(({ theme }) => ({
color: theme.palette.grey[400],
color: theme.palette.text.secondary,
fontWeight: "normal",
paddingTop: "0.5em",
}));
Expand Down Expand Up @@ -111,7 +119,6 @@ interface FlowItemProps {
teamSlug: string;
refreshFlows: () => void;
}

const FlowItem: React.FC<FlowItemProps> = ({
flow,
flows,
Expand Down Expand Up @@ -146,6 +153,10 @@ const FlowItem: React.FC<FlowItemProps> = ({
});
};

const getStatusColor = (status: string) => {
return status === "online" ? "success" : "secondary";
};

return (
<>
{deleting && (
Expand All @@ -162,7 +173,7 @@ const FlowItem: React.FC<FlowItemProps> = ({
)}
<DashboardListItem>
<DashboardLink href={`./${flow.slug}`} prefetch={false}>
<Typography variant="h4" component="h2">
<Typography variant="h3" component="h2">
{flow.name}
</Typography>
<LinkSubText>
Expand All @@ -171,6 +182,11 @@ const FlowItem: React.FC<FlowItemProps> = ({
flow.operations[0]?.actor,
)}
</LinkSubText>
<Chip
label={flow.status}
color={getStatusColor(flow.status)}
size="small"
/>
</DashboardLink>
{useStore.getState().canUserEditTeam(teamSlug) && (
<StyledSimpleMenu
Expand Down Expand Up @@ -327,7 +343,7 @@ const Team: React.FC = () => {
const showAddFlowButton = teamHasFlows && canUserEditTeam(slug);

return (
<Container maxWidth="formWrap">
<Container maxWidth="lg">
<Box
pb={1}
sx={{
Expand All @@ -342,15 +358,27 @@ const Team: React.FC = () => {
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: 2,
}}
>
<Typography variant="h2" component="h1" pr={1}>
Services
</Typography>
{canUserEditTeam(slug) ? <Edit /> : <Visibility />}
{/* {canUserEditTeam(slug) ? <Edit /> : <Visibility />} */}
{showAddFlowButton && <AddFlowButton flows={flows} />}
</Box>
<Box maxWidth={360}>
<InputRow>
<InputRowLabel>
<strong>Search</strong>
</InputRowLabel>
<InputRowItem>
<Input sx={{ borderColor: "black" }} name="search" id="search" />
</InputRowItem>
</InputRow>
</Box>
{showAddFlowButton && <AddFlowButton flows={flows} />}
</Box>
<Filters />
{teamHasFlows && (
<DashboardList>
{flows.map((flow) => (
Expand Down

0 comments on commit 40093f6

Please sign in to comment.