Merge pull request #62 from CWTSLeiden/feature/details-accordion

implement accordion for DetailsCard
CWTSLeiden · Apr 26, 2023 · 75a2b82 · 75a2b82
2 parents 62ddf3f + fcba47b
commit 75a2b82
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 29 deletions.
diff --git a/src/components/details.tsx b/src/components/details.tsx
@@ -1,9 +1,9 @@
-import React, { ReactElement } from "react";
-import { Avatar, Badge, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, Link, ListItem, ListItemAvatar, ListItemText, Skeleton, Stack, Tooltip, Typography, useTheme } from "@mui/material";
+import React, { ReactElement, useState } from "react";
+import { Accordion, AccordionDetails, AccordionSummary, Avatar, Badge, Box, Card, CardContent, CardHeader, Chip, Divider, Grid, IconButton, Link, ListItem, ListItemAvatar, ListItemText, Skeleton, Stack, Tooltip, Typography, useTheme } from "@mui/material";
 import { ld_to_str } from "../query/jsonld_helpers";
 import { labelize } from "../query/labels";
 import { colorize } from "./theme";
-import { Link as LinkIcon } from "@mui/icons-material";
+import { ExpandMore, Link as LinkIcon } from "@mui/icons-material";
 import { useAppSelector } from "../store";
 import { sort_sources_keys } from "./details_sources";
 
@@ -74,28 +74,43 @@ type DetailsCardProps = {
     children?: React.ReactElement | React.ReactElement[];
     loading?: boolean
     infodialog?: React.ReactElement;
+    defaultExpanded?: boolean
 }
-export const DetailsCard = ({title, children, loading, infodialog}: DetailsCardProps) => {
+export const DetailsCard = ({title, children, loading, infodialog, defaultExpanded}: DetailsCardProps) => {
+    const [state, setState] = useState(defaultExpanded == null ? true : defaultExpanded)
+    const toggle = () => setState(!state)
     const sources_disabled = useAppSelector(s => s.details.sources_disabled)
     const loading_component = [<DetailsListItemSkeleton key="0" />]
     const hidden_component = [<DetailsListItem key="0" primary="Hidden" secondary="Expand source filter" disabled />]
     const missing_component = [<DetailsListItem key="0" primary="No data" disabled />]
     return (
         <Card>
-            <CardHeader title={title} action={infodialog} titleTypographyProps={{variant: 'h6'}} />
-            <Divider />
-            <CardContent>
-                <Stack direction="column" spacing={1}>
-                    <DetailsSwitch
-                        items={children}
-                        filter={filter_children_src(sources_disabled)}
-                        loading={loading}
-                        loading_component={loading_component}
-                        missing_component={missing_component}
-                        hidden_component={hidden_component}
-                    />
-                </Stack>
-            </CardContent>
+            <Accordion expanded={state} disableGutters>
+                <CardContent sx={{p: 0}}>
+                    <AccordionSummary expandIcon={<ExpandMore onClick={toggle} />}>
+                        <Box sx={{ width: "100%", display: "flex", alignItems: "center" }}>
+                            <Typography variant="h6" onClick={toggle} >{title}</Typography>
+                            {infodialog}
+                            <Box sx={{ flex: 1 }} onClick={toggle} >&nbsp;</Box>
+                        </Box>
+                    </AccordionSummary>
+                </CardContent>
+                <Divider />
+                <CardContent>
+                    <AccordionDetails sx={{m: 0, p: 0}}>
+                        <Stack direction="column" spacing={1}>
+                            <DetailsSwitch
+                                items={children}
+                                filter={filter_children_src(sources_disabled)}
+                                loading={loading}
+                                loading_component={loading_component}
+                                missing_component={missing_component}
+                                hidden_component={hidden_component}
+                            />
+                        </Stack>
+                    </AccordionDetails>
+                </CardContent>
+            </Accordion>
         </Card>
 )}
 

diff --git a/src/components/details_elsewhere_policy.tsx b/src/components/details_elsewhere_policy.tsx
@@ -28,7 +28,7 @@ const policy_ordering = ([policy1,]: [object], [policy2,]: [object]) => {
     return Math.sign(Object.keys(policy1).length - Object.keys(policy2).length)
 }
 
-export const PlatformElsewherePolicies = () => {
+export const PlatformElsewherePolicies = ({ expanded }: { expanded?: boolean }) => {
     const padStore = useContext(PadContext)
     const [policies, setPolicies] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -49,6 +49,7 @@ export const PlatformElsewherePolicies = () => {
             title="Preprinting/self-archiving policies"
             loading={loading}
             infodialog={<AnnotationDialog property="publication-elsewhere-policies-title" text={info["publication-elsewhere-policies-text"]} />}
+            defaultExpanded={expanded}
         >
             {policies.sort(policy_ordering).map(render_policy)}
         </DetailsCard>

diff --git a/src/components/details_evaluation_policy.tsx b/src/components/details_evaluation_policy.tsx
@@ -10,7 +10,7 @@ import * as summary from "./details_policy_summary"
 import { AnnotationDialog } from "./info";
 import info from "../strings/info.json";
 
-export const PlatformEvaluationPolicies = () => {
+export const PlatformEvaluationPolicies = ({ expanded }: { expanded?: boolean }) => {
     const padStore = useContext(PadContext)
     const [policies, setPolicies] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -29,6 +29,7 @@ export const PlatformEvaluationPolicies = () => {
             title="Evaluation policies"
             loading={loading}
             infodialog={<AnnotationDialog property="evaluation-policies-title" text={info["evaluation-policies-text"]} />}
+            defaultExpanded={expanded}
         >
             {policies.map(([p, s]) => (
                 <PlatformEvaluationPolicy key={p["@id"]} policy={p} src={s} />

diff --git a/src/components/details_identifiers.tsx b/src/components/details_identifiers.tsx
@@ -14,7 +14,7 @@ const links = {
     "fabio:hasIssnL": "https://portal.issn.org/resource/ISSN/"
 }
 
-export const PlatformIdentifiers = () => {
+export const PlatformIdentifiers = ({ expanded }: { expanded?: boolean }) => {
     const labels = useContext(LabelContext)
     const padStore = useContext(PadContext)
     const [identifiers, setIdentifiers] = useState([]);
@@ -37,7 +37,7 @@ export const PlatformIdentifiers = () => {
     }
 
     return (
-        <DetailsCard title="Identifiers" loading={loading}>
+        <DetailsCard title="Identifiers" loading={loading} defaultExpanded={expanded}>
             {identifiers.map(([p, n, s]) => (
                 <SourceWrapper key={p + n} src={s}>
                     <DetailsListItem

diff --git a/src/components/details_names.tsx b/src/components/details_names.tsx
@@ -5,7 +5,7 @@ import { Quadstore } from "quadstore";
 import { first, ld_cons_src, ld_to_str } from "../query/jsonld_helpers";
 import { DetailsCard, DetailsListItem, SourceWrapper } from "./details";
 
-export const PlatformNames = () => {
+export const PlatformNames = ({ expanded }: { expanded?: boolean }) => {
     const padStore = useContext(PadContext)
     const [names, setNames] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -18,7 +18,7 @@ export const PlatformNames = () => {
         padStore ? render() : null
     }, [padStore]);
     return (
-        <DetailsCard title="Names" loading={loading}>
+        <DetailsCard title="Names" loading={loading} defaultExpanded={expanded}>
             {names.map(([n, s]) => (
                 <SourceWrapper key={ld_to_str(n["@id"])} src={s} >
                     <DetailsListItem

diff --git a/src/components/details_publication_policy.tsx b/src/components/details_publication_policy.tsx
@@ -19,7 +19,7 @@ const policy_ordering = ([policy1,]: [object], [policy2,]: [object]) => {
     return Math.sign(Object.keys(policy1).length - Object.keys(policy2).length)
 }
 
-export const PlatformPubPolicies = () => {
+export const PlatformPubPolicies = ({ expanded }: { expanded?: boolean }) => {
     const padStore = useContext(PadContext)
     const [policies, setPolicies] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -40,6 +40,7 @@ export const PlatformPubPolicies = () => {
             title="Publication policies"
             loading={loading}
             infodialog={<AnnotationDialog property="publication-policies-title" text={info["publication-policies-text"]} />}
+            defaultExpanded={expanded}
         >
             {policies.sort(policy_ordering).map(render_policy)}
         </DetailsCard>

diff --git a/src/components/details_publishers.tsx b/src/components/details_publishers.tsx
@@ -7,7 +7,7 @@ import { DetailsCard, DetailsListItem, SourceWrapper } from "./details";
 import { labelize } from "../query/labels";
 import { CorporateFare } from "@mui/icons-material";
 
-export const PlatformPublishers = () => {
+export const PlatformPublishers = ({ expanded }: { expanded?: boolean }) => {
     const labels = useContext(LabelContext)
     const padStore = useContext(PadContext)
     const [publishers, setPublishers] = useState([]);
@@ -23,7 +23,7 @@ export const PlatformPublishers = () => {
     }, [padStore]);
 
     return (
-        <DetailsCard title="Publishers" loading={loading}>
+        <DetailsCard title="Publishers" loading={loading} defaultExpanded={expanded}>
             {publishers.map(([p, s]) => (
                 <SourceWrapper key={p["@id"]} src={s}>
                     <DetailsListItem

diff --git a/src/pages/details.tsx b/src/pages/details.tsx
@@ -63,8 +63,8 @@ function DetailsComponent() {
                     </Grid>
                     <Grid item xs={12} sm={12} md={8} lg={9} component="main" container spacing={2} sx={{pb: 2}}>
                         <Grid item xs={12}><PlatformKeywords /></Grid>
-                        <Grid item xs={12}><PlatformNames /></Grid>
-                        <Grid item xs={12}><PlatformIdentifiers /></Grid>
+                        <Grid item xs={12}><PlatformNames expanded={false} /></Grid>
+                        <Grid item xs={12}><PlatformIdentifiers expanded={false} /></Grid>
                         <Grid item xs={12}><PlatformPublishers /></Grid>
                         <Grid item xs={12}><PlatformPubPolicies /></Grid>
                         <Grid item xs={12}><PlatformElsewherePolicies /></Grid>