diff --git a/editor.planx.uk/src/pages/Filters.tsx b/editor.planx.uk/src/pages/Filters.tsx new file mode 100644 index 0000000000..0b88b11306 --- /dev/null +++ b/editor.planx.uk/src/pages/Filters.tsx @@ -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 ( + + + + Hide filters + + + + + Online status + {}} + label={"Online"} + checked={false} + variant="compact" + /> + {}} + label={"Offline"} + checked={false} + variant="compact" + /> + + + Application type + {}} + label={"Submission"} + checked={false} + variant="compact" + /> + {}} + label={"Guidance"} + checked={false} + variant="compact" + /> + + + Service type + {}} + label={"Statutory"} + checked={false} + variant="compact" + /> + {}} + label={"Discretionary"} + checked={false} + variant="compact" + /> + + + + + + + + ); +}; + +export default Filters; diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts index c55a0eae06..145707a758 100644 --- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts +++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts @@ -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, @@ -137,6 +137,7 @@ export interface FlowSummary { name: string; slug: string; updatedAt: string; + status: string; operations: { createdAt: string; actor: { @@ -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< @@ -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 @@ -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 { diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx index 37c10d6d37..5342a1efd4 100644 --- a/editor.planx.uk/src/pages/Team.tsx +++ b/editor.planx.uk/src/pages/Team.tsx @@ -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"; @@ -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"; @@ -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 }) => ({ @@ -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", })); @@ -111,7 +119,6 @@ interface FlowItemProps { teamSlug: string; refreshFlows: () => void; } - const FlowItem: React.FC = ({ flow, flows, @@ -146,6 +153,10 @@ const FlowItem: React.FC = ({ }); }; + const getStatusColor = (status: string) => { + return status === "online" ? "success" : "secondary"; + }; + return ( <> {deleting && ( @@ -162,7 +173,7 @@ const FlowItem: React.FC = ({ )} - + {flow.name} @@ -171,6 +182,11 @@ const FlowItem: React.FC = ({ flow.operations[0]?.actor, )} + {useStore.getState().canUserEditTeam(teamSlug) && ( { const showAddFlowButton = teamHasFlows && canUserEditTeam(slug); return ( - + { display: "flex", flexDirection: "row", alignItems: "center", + gap: 2, }} > Services - {canUserEditTeam(slug) ? : } + {/* {canUserEditTeam(slug) ? : } */} + {showAddFlowButton && } + + + + + Search + + + + + - {showAddFlowButton && } + {teamHasFlows && ( {flows.map((flow) => (