Skip to content

Commit

Permalink
chore: client:format
Browse files Browse the repository at this point in the history
  • Loading branch information
@crhallberg
crhallberg committed Nov 4, 2024
1 parent 14d7280 commit 64fdf67
Show file tree
Hide file tree
Showing 6 changed files with 130 additions and 134 deletions.
40 changes: 20 additions & 20 deletions client/components/edit/ObjectButtonBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,30 @@ import DeleteObjectButton from "./DeleteObjectButton";
import RefreshIcon from "@mui/icons-material/Refresh";

export interface ObjectButtonBarProps {
pid: string;
pid: string;
}

const ObjectButtonBar = ({ pid }: ObjectButtonBarProps): React.ReactElement => {
const {
action: { clearPidFromChildListStorage },
} = useEditorContext();
const {
action: { clearPidFromChildListStorage },
} = useEditorContext();

return (
<div className={styles.objectBar}>
<ObjectStatus pid={pid} />
<EditParentsButton pid={pid} />
<button
type="button"
className={styles.refreshBtn}
onClick={() => clearPidFromChildListStorage(pid)}
title="Refresh children"
>
<RefreshIcon /> Refresh
</button>
<ObjectPreviewButton pid={pid} />
<DeleteObjectButton pid={pid} />
</div>
);
return (
<div className={styles.objectBar}>
<ObjectStatus pid={pid} />
<EditParentsButton pid={pid} />
<button
type="button"
className={styles.refreshBtn}
onClick={() => clearPidFromChildListStorage(pid)}
title="Refresh children"
>
<RefreshIcon /> Refresh
</button>
<ObjectPreviewButton pid={pid} />
<DeleteObjectButton pid={pid} />
</div>
);
};

export default ObjectButtonBar;
24 changes: 10 additions & 14 deletions client/components/edit/ObjectStatus.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,23 @@ import { useGlobalContext } from "../../context/GlobalContext";
import { useEditorContext } from "../../context/EditorContext";
import ObjectLoader from "./ObjectLoader";

import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import ModeStandbyIcon from '@mui/icons-material/ModeStandby';
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import ModeStandbyIcon from "@mui/icons-material/ModeStandby";

export interface ObjectStatusProps {
pid: string;
}

function getStatusIcon(statusText: string) {
switch (statusText) {
case "Active":
return <CheckCircleIcon></CheckCircleIcon>;
case "Inactive":
return <ModeStandbyIcon></ModeStandbyIcon>;

}
return <HelpOutlineIcon></HelpOutlineIcon>;
switch (statusText) {
case "Active":
return <CheckCircleIcon></CheckCircleIcon>;
case "Inactive":
return <ModeStandbyIcon></ModeStandbyIcon>;
}
return <HelpOutlineIcon></HelpOutlineIcon>;
}
const statusIcons = {
"Inactive": ModeStandbyIcon,
};

export const ObjectStatus = ({ pid }: ObjectStatusProps): React.ReactElement => {
const {
Expand Down
28 changes: 6 additions & 22 deletions client/components/edit/children/Child.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,27 +38,16 @@ export const Child = ({
state: { objectDetailsStorage },
} = useEditorContext();
const [expanded, setExpanded] = useState<boolean>(false);
const loaded = Object.prototype.hasOwnProperty.call(
objectDetailsStorage,
pid,
);
const loaded = Object.prototype.hasOwnProperty.call(objectDetailsStorage, pid);
const details = loaded ? objectDetailsStorage[pid] : {};

const title = !loaded
? initialTitle
: extractFirstMetadataValue(details?.metadata ?? {}, "dc:title", "-");
const title = !loaded ? initialTitle : extractFirstMetadataValue(details?.metadata ?? {}, "dc:title", "-");
const expandControl = (
<span onClick={() => setExpanded(!expanded)}>
{expanded ? (
<IndeterminateCheckBox
titleAccess="Collapse Tree"
className={styles.childlist__expandicon}
/>
<IndeterminateCheckBox titleAccess="Collapse Tree" className={styles.childlist__expandicon} />
) : (
<AddBox
titleAccess="Expand Tree"
className={styles.childlist__expandicon}
/>
<AddBox titleAccess="Expand Tree" className={styles.childlist__expandicon} />
)}
</span>
);
Expand All @@ -83,12 +72,7 @@ export const Child = ({
<div className={styles.childlist__item}>
<Grid container spacing={2} alignItems="center">
<Grid item xs>
{expandControl}{" "}
{loaded && parentPid ? (
<ChildPosition pid={pid} parentPid={parentPid} />
) : (
""
)}
{expandControl} {loaded && parentPid ? <ChildPosition pid={pid} parentPid={parentPid} /> : ""}
<Link href={"/edit/object/" + pid}>{title || "(no title)"}</Link>
</Grid>
<Grid item xs={1} className={styles.childlist__pid}>
Expand All @@ -97,7 +81,7 @@ export const Child = ({
<Grid item xs={1}>
<CopyPidButton pid={pid} />
</Grid>
<Grid item xs="auto" style={{textAlign:"right"}}>
<Grid item xs="auto" style={{ textAlign: "right" }}>
{loaded ? <ObjectButtonBar pid={pid} /> : ""}
<ObjectLoader pid={pid} />
</Grid>
Expand Down
20 changes: 12 additions & 8 deletions client/components/edit/children/ChildList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,7 @@ export const ChildList = ({
// Use session storage to remember the last page viewed across pages/history:
const pageStorageKey = "child_page_" + pid;
const initialPage: string | null =
typeof sessionStorage !== "undefined"
? sessionStorage.getItem(pageStorageKey)
: null;
typeof sessionStorage !== "undefined" ? sessionStorage.getItem(pageStorageKey) : null;
const [page, setPage] = useState<number>(parseInt(initialPage ?? "1"));
if (typeof sessionStorage !== "undefined") {
sessionStorage.setItem(pageStorageKey, page.toString());
Expand Down Expand Up @@ -134,24 +132,30 @@ export const ChildList = ({
const paginatorLabel =
children.numFound > 1 ? (
<p>
Showing {startNumber} -{" "}
{children.numFound < endNumber ? children.numFound : endNumber} of{" "}
Showing {startNumber} - {children.numFound < endNumber ? children.numFound : endNumber} of{" "}
{children.numFound}
</p>
) : null;
return (
<div className={styles.childlist}>
<Grid container sx={{ spacing: 2, alignItems: "center" }}>
<Grid item xs="auto">
{thumbsButton}
</Grid>
<Grid item xs="auto">
{modelsButton}
</Grid>
<Grid item xs="auto">
{childButton}
</Grid>
<Grid item xs="auto">
{paginatorLabel}
</Grid>
<Grid item xs="auto">
{paginator}
</Grid>
</Grid>
<ul className={styles.childlist__list}>
{contents.length ? contents : <em>Empty.</em>}
</ul>
<ul className={styles.childlist__list}>{contents.length ? contents : <em>Empty.</em>}</ul>
</div>
);
};
Expand Down
38 changes: 22 additions & 16 deletions client/components/paginate/JobPaginator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,28 @@ const JobPaginator = ({ initialCategory, initialJob }: JobPaginatorProps): React
}, []);

return (
<>
<ul className="breadcrumbs" style={{ marginBlockEnd: 0 }}>
<li><Link href="/">Main Menu</Link></li>
<li><Link href="/paginate">Paginator</Link></li>
<li>{category}{" "}{job}</li>
</ul>
<Grid container id="paginator">
<Grid item xs={6}>
<JobPaginatorZoomToggle />
</Grid>
<Grid item xs={6}>
<PaginatorControls />
<PaginatorList />
</Grid>
</Grid>
</>
<>
<ul className="breadcrumbs" style={{ marginBlockEnd: 0 }}>
<li>
<Link href="/">Main Menu</Link>
</li>
<li>
<Link href="/paginate">Paginator</Link>
</li>
<li>
{category} {job}
</li>
</ul>
<Grid container id="paginator">
<Grid item xs={6}>
<JobPaginatorZoomToggle />
</Grid>
<Grid item xs={6}>
<PaginatorControls />
<PaginatorList />
</Grid>
</Grid>
</>
);
};

Expand Down
114 changes: 60 additions & 54 deletions client/components/paginate/PaginatorControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import MagicLabeler from "../../util/MagicLabeler";
import PaginatorControlGroup from "./PaginatorControlGroup";
import ZoomToggleButton from "./ZoomToggleButton";

import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";

const PaginatorControls = (): React.ReactElement => {
const {
Expand Down Expand Up @@ -41,41 +41,46 @@ const PaginatorControls = (): React.ReactElement => {
return pageCount > 0 ? (
<div className="controls">
<div className="top-row">
<div className="top-row__left">
<input type="text" value={getLabel(currentPage) ?? ""} id="page" onChange={updateCurrentPageLabel} />
<button onClick={prevPage}>Prev</button>
<button
onClick={() => {
approveCurrentPageLabel();
nextPage();
}}
>
Next
</button>
<div className="status"></div>
</div>
<div className="top-row__left">
<input
type="text"
value={getLabel(currentPage) ?? ""}
id="page"
onChange={updateCurrentPageLabel}
/>
<button onClick={prevPage}>Prev</button>
<button
onClick={() => {
approveCurrentPageLabel();
nextPage();
}}
>
Next
</button>
<div className="status"></div>
</div>

<div className="top-row__right">
<ZoomToggleButton toggleZoom={toggleZoom} zoom={zoom} />
<button
className="btn-primary"
onClick={() => {
approveCurrentPageLabel();
save(false);
}}
>
Save
</button>
<button
className="btn-primary"
onClick={() => {
approveCurrentPageLabel();
save(true);
}}
>
Save and Publish
</button>
</div>
<div className="top-row__right">
<ZoomToggleButton toggleZoom={toggleZoom} zoom={zoom} />
<button
className="btn-primary"
onClick={() => {
approveCurrentPageLabel();
save(false);
}}
>
Save
</button>
<button
className="btn-primary"
onClick={() => {
approveCurrentPageLabel();
save(true);
}}
>
Save and Publish
</button>
</div>
</div>
<PaginatorControlGroup callback={setLabelPrefix} label="prefixes">
{MagicLabeler.prefixes}
Expand All @@ -87,24 +92,25 @@ const PaginatorControls = (): React.ReactElement => {
{MagicLabeler.suffixes}
</PaginatorControlGroup>
<div className="group">
<div className="toggles">
<button onClick={toggleBrackets} title="Toggle Brackets">
[ ]
</button>
<button onClick={toggleCase} title="Toggle Case">
Aa
</button>
<button onClick={toggleRoman} title="Toggle Roman Numerals">
4<CompareArrowsIcon />IV
</button>
<button onClick={autonumberFollowingPages} title="Autonumber Following Pages">
<AutoFixHighIcon />
</button>
</div>
<div className="toggles">
<button onClick={toggleBrackets} title="Toggle Brackets">
[ ]
</button>
<button onClick={toggleCase} title="Toggle Case">
Aa
</button>
<button onClick={toggleRoman} title="Toggle Roman Numerals">
4<CompareArrowsIcon />
IV
</button>
<button onClick={autonumberFollowingPages} title="Autonumber Following Pages">
<AutoFixHighIcon />
</button>
</div>

<button className="delete-btn" onClick={deletePage} title="Delete Current Page">
<DeleteForeverIcon /> Delete Current Page
</button>
<button className="delete-btn" onClick={deletePage} title="Delete Current Page">
<DeleteForeverIcon /> Delete Current Page
</button>
</div>
</div>
) : (
Expand Down

0 comments on commit 64fdf67

Please sign in to comment.