Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Removed unnecessary cards, and page improvements #481

Merged
merged 3 commits into from
Jul 16, 2024
Merged

Removed unnecessary cards, and page improvements #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b17d202
Removed unnecessary cards, and page improvements
bbrands02 Jul 16, 2024
5768d04
undo
bbrands02 Jul 16, 2024
29a15ab
Feedback fixes and unused code removed
bbrands02 Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,7 @@
}

.cardsContainer {
display: grid;
grid-template-columns: 1fr 1fr;
}

Expand Down Expand Up @@ -292,7 +293,7 @@
}

.cardsContainer {
display: flex;
display: grid;
gap: var(--web-app-size-xl);
}

Expand Down
225 changes: 29 additions & 196 deletions pwa/src/templates/publicationDetail/PublicationsDetailTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
} from "@utrecht/component-library-react/dist/css-module";
import {
Container,
InfoCard,
Tabs,
TabList,
Tab,
Expand All @@ -28,16 +27,13 @@ import {
HorizontalOverflowWrapper,
} from "@conduction/components";
import { navigate } from "gatsby";
import { IconExternalLink, IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
import { IconExternalLink, IconArrowLeft } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { Table, TableBody, TableCell, TableRow } from "@utrecht/component-library-react/dist/css-module";
import { QueryClient } from "react-query";
import { useComponent } from "../../hooks/components";
import { RatingIndicatorTemplate } from "../templateParts/ratingIndicator/RatingIndicatorTemplate";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faMinus,
faArrowDown,
faArrowLeft,
faCircle,
faGear,
Expand All @@ -56,12 +52,11 @@ import { DependenciesTemplate } from "../templateParts/dependenciesTemplates/Com
import { useResultDisplayLayoutContext } from "../../context/resultDisplayLayout";
import { ComponentCardsAccordionTemplate } from "../templateParts/componentCardsAccordion/ComponentCardsAccordionTemplate";
import { DownloadTemplate } from "../templateParts/download/DownloadTemplate";
import { RatingOverview } from "../templateParts/ratingOverview/RatingOverview";
import { IDisplaySwitchButton } from "@conduction/components/lib/components/displaySwitch/DisplaySwitch";
import { ExpandableLeadParagraph } from "../../components/expandableLeadParagraph/ExpandableLeadParagraph";
import { TOOLTIP_ID } from "../../layout/Layout";
import { getStatusColor } from "../../services/getStatusColor";
import { ApplicationCard, ComponentCard } from "../../components";
import { ComponentCard } from "../../components";
import { getCommongroundRating } from "../../services/getCommongroundRating";
import {
CommongroundRatingGold,
Expand All @@ -85,14 +80,11 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp

const [tabIndex, setTabIndex] = React.useState(0);

const NotificationPopUpController = _NotificationPopUp.controller;
const NotificationPopUp = _NotificationPopUp.NotificationPopUp;

const { filters, setFilters } = useFiltersContext();
const { pagination, setPagination } = usePaginationContext();

const { isVisible, show, hide } = NotificationPopUpController();

const tabsRef: any = React.useRef();
const viewTabs = () => {
tabsRef.current.scrollIntoView({ behavior: "smooth", inline: "start" });
Expand All @@ -117,9 +109,6 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
const _getPublication = _usePublication.getOne(publicationId);

const getConfigComponents = _useComponent.getAllConfig(_getComponent.data?.name);
const getApplicationComponent = _useComponent.getApplicationComponent(
_getComponent?.data?.embedded?.applicationSuite?.name,
);

const getMaintenanceType = (maintenanceType: string) => {
const _maintenanceType = maintenanceTypes.find((__maintenanceType) => {
Expand All @@ -129,18 +118,12 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
return _maintenanceType?.label ?? "";
};

const rating = _getComponent.data?.embedded?.rating;

const gemma = _getComponent.data?.embedded?.nl?.embedded?.gemma;
const publicationData = _getPublication.data?.data?.data;

if (_getComponent.isError) return <>Something went wrong...</>;

const organisation = _getPublication?.data?.data?.organization;
const application = _getComponent?.data?.embedded?.applicationSuite;
const applicationComponent = getApplicationComponent?.data?.results[0];

const [isMetaDataVisible, setMetaDataIsVisible] = React.useState(false);

const imageHasValidSource = (src: string): boolean => {
try {
Expand Down Expand Up @@ -188,8 +171,6 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
}, 300); // Give the modal some time to finish animating
};

const ratingFilter = window.sessionStorage.getItem("FILTER_RATING");

const getCommongroundImage = (rating: number) => {
switch (rating) {
case 0:
Expand Down Expand Up @@ -225,12 +206,12 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
<div className={styles.headingContainer}>
<div className={styles.headingContent}>
<Heading level={1} className={styles.componentName}>
{_getPublication?.data?.data?.title}
{_getPublication?.data?.title}
</Heading>

<ExpandableLeadParagraph
description={
_getPublication?.data?.data?.summary ?? t("No description available")
_getPublication?.data?.description ?? t("No description available")
}
/>

Expand Down Expand Up @@ -416,46 +397,6 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
</DataBadge>
))}
</div>


{_getPublication.data?.metaData &&
<div>
<Button onClick={() => {setMetaDataIsVisible(!isMetaDataVisible)}}>
<FontAwesomeIcon icon={isMetaDataVisible ? faMinus : faArrowDown } />
{isMetaDataVisible ? t("Hide metadata") : t("Show metadata")}
</Button>
{isMetaDataVisible &&
<Table>
<TableBody>
{_getPublication.data.metaData?.title &&
<TableRow>
<TableCell>{t("Title")}</TableCell>
<TableCell>{_getPublication.data.metaData.title}</TableCell>
</TableRow>
}
{_getPublication.data.metaData?.version &&
<TableRow>
<TableCell>{t("Version")}</TableCell>
<TableCell>{_getPublication.data.metaData.version}</TableCell>
</TableRow>
}
{_getPublication.data.metaData?.description &&
<TableRow>
<TableCell>{t("Description")}</TableCell>
<TableCell>{_getPublication.data.metaData.description}</TableCell>
</TableRow>
}
{_getPublication.data.metaData?.properties &&
<TableRow>
<TableCell>{t("Properties")}</TableCell>
<TableCell>{_getPublication.data.metaData.properties}</TableCell>
</TableRow>
}
</TableBody>
</Table>
}
</div>
}
</div>

<div className={styles.addToCatalogusContainer}>
Expand Down Expand Up @@ -646,64 +587,35 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
</div>

<div className={styles.cardsHeaderContainer}>
<Heading3 className={styles.cardsHeading}>{t("Application")}</Heading3>
<Heading3 className={styles.cardsHeading}>MetaData</Heading3>
<Heading3 className={styles.cardsHeading}>{t("Organization")}</Heading3>
<Heading3 className={styles.cardsHeading}>{t("Rating")}</Heading3>
</div>

<div className={styles.cardsContainer}>
{getApplicationComponent.isLoading && (
<div className={styles.organizationCardContainer}>
<Skeleton height="232px" />
</div>
)}
{getApplicationComponent.isSuccess &&
(applicationComponent && applicationComponent.name !== _getPublication.data?.data?.name ? (
<ComponentCard
key={applicationComponent._self?.id}
title={{
label: applicationComponent.name,
href: `/components/${applicationComponent.id ?? applicationComponent._self.id}`,
}}
description={applicationComponent.embedded?.description?.shortDescription}
layer={applicationComponent.embedded?.nl?.embedded?.commonground?.layerType ?? "Unknown"}
categories={applicationComponent.categories}
tags={{
rating: {
rating: applicationComponent.embedded?.rating?.rating,
maxRating: applicationComponent.embedded?.rating?.maxRating,
},
ratingCommonground: {
rating: applicationComponent.embedded?.nl?.embedded?.commonground?.rating,
},
status: applicationComponent.developmentStatus,
installations: applicationComponent.usedBy?.length.toString() ?? "0",
organization: {
name: applicationComponent.embedded?.url?.embedded?.organisation?.name,
website: applicationComponent.embedded?.url?.embedded?.organisation?.website,
},
licence: applicationComponent.embedded?.legal?.license,
githubLink: applicationComponent.embedded?.url?.url,
}}
layoutClassName={styles.organizationCardContainer}
/>
) : (
application && (
<ApplicationCard
key={application._self.id}
title={{ label: application.name, href: `/applications/${application._self.id}` }}
description={application.shortDescription}
tags={{
organization: application?.embedded?.owner?.fullName,
githubLink: application?.demoUrl,
}}
layoutClassName={styles.organizationCardContainer}
/>
)
))}
{!getApplicationComponent.isLoading && !_getPublication?.data?.data?.embedded?.applicationSuite && (
<span className={styles.noOrganizationCardAvailable}>{t("No application found")}</span>
)}
{_getPublication.data?.metaData &&
<Table>
<TableBody>
{_getPublication.data.metaData?.title &&
<TableRow>
<TableCell>{t("Title")}</TableCell>
<TableCell>{_getPublication.data.metaData.title ?? t("No title known")}</TableCell>
</TableRow>
}
{_getPublication.data.metaData?.version &&
<TableRow>
<TableCell>{t("Version")}</TableCell>
<TableCell>{_getPublication.data.metaData.version ?? t("No version known") }</TableCell>
</TableRow>
}
{_getPublication.data.metaData?.description &&
<TableRow>
<TableCell>{t("Description")}</TableCell>
<TableCell>{_getPublication.data.metaData.description ?? t("No description known") }</TableCell>
</TableRow>
}
</TableBody>
</Table>
}

{organisation && (
<OrganizationCard
Expand All @@ -729,86 +641,7 @@ export const PublicationsDetailTemplate: React.FC<PublicationsDetailTemplateProp
{!_getPublication?.data?.data?.organization && (
<span className={styles.noOrganizationCardAvailable}>{t("No organization found")}</span>
)}
<InfoCard
title=""
content={
<>
{(ratingFilter === "OpenCatalogi" || ratingFilter === "false") && (
<>
{_getPublication.data?.data?.embedded?.rating && (
<>
<RatingIndicatorTemplate
layoutClassName={styles.ratingIndicatorContainer}
maxRating={rating.maxRating}
rating={rating.rating}
/>
<span className={styles.link}>
<Link
onClick={(e) => {
e.preventDefault(), openModal(() => show());
}}
href={`${_getPublication.data?.data?.id}/?openratingpopup`}
>
<Icon>
<IconArrowRight />
</Icon>
{t("Rating")}
</Link>
</span>
</>
)}
{!rating && <div className={styles.noRatingStyle}>{t("No rating available")}</div>}
</>
)}
{ratingFilter === "Commonground" && (
<>
<div
className={clsx(
styles[
_.camelCase(
t(
`${getCommongroundRating(
_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? "0",
)} rating`,
),
)
],
styles.commongroundRating,
)}
>
{getCommongroundImage(
_getPublication.data?.data?.embedded?.nl?.embedded?.commonground?.rating ?? "0",
)}
</div>
</>
)}
</>
}
layoutClassName={clsx(styles.infoCard, ratingFilter === "Commonground" && styles.infoCardCommonground)}
/>

{isVisible && (
<div className={styles.overlay}>
<NotificationPopUp
{...{ hide, isVisible }}
title={`${t("Rating")} (${rating?.rating}/${rating?.maxRating})`}
customContent={<RatingOverview {...{ rating }} />}
primaryButton={{
label: t("Score calculation"),
handleClick: () => {
navigate("/documentation/about#score-calculation");
},
}}
secondaryButton={{
label: t("Close"),
icon: <FontAwesomeIcon icon={faArrowLeft} />,
href: `${_getPublication.data?.data?.id}`,
handleClick: () => ({}),
}}
layoutClassName={styles.popup}
/>
</div>
)}
</div>
{(_getPublication.data?.data?.embedded?.dependsOn?.embedded?.open ||
getConfigComponents.data?.results?.length > 0 ||
Expand Down
4 changes: 2 additions & 2 deletions pwa/src/templates/templateParts/publicationsTable/PublicationsTableTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ export const PublicationsTableTemplate: React.FC<PublicationsTableTemplateProps>
onClick={() => navigate(`/publications/${publication.id}`)}
>
<TableCell>
<span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={publication?.data?.title} className={styles.name}>
{publication?.data?.title}
<span data-tooltip-id={TOOLTIP_ID} data-tooltip-content={publication?.title} className={styles.name}>
{publication?.title}
</span>
</TableCell>

Expand Down
3 changes: 3 additions & 0 deletions pwa/src/translations/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@ export const en = {
"Show metadata": "Show metadata",
"Access url": "Access url",
"Hide metadata": "Hide metadata",
"No title known": "No title known",
"No description known": "No description known",
"No version known": "No version known",
"One central place for reuse of information technology within the government":
"One central place for reuse of information technology within the government",
"No components found with active filters": "No components found with active filters",
Expand Down
3 changes: 3 additions & 0 deletions pwa/src/translations/nl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,9 @@ export const nl = {
"View all components": "Bekijk alle componenten",
"Show metadata": "Toon metadata",
"Hide metadata": "Verberg metadata",
"No title known": "Geen titel bekend",
"No description known": "Geen description bekend",
"No version known": "Geen version bekend",
"Access url": "Toegangsurl",
"One central place for reuse of information technology within the government":
"Eén centrale plek voor hergebruik van informatietechnologie binnen de overheid",
Expand Down
Loading