Skip to content

Commit

Permalink
Merge pull request #481 from OpenCatalogi/feature/DIMOC-30/DCAT-objec…
Browse files Browse the repository at this point in the history 
…t-display

Removed unnecessary cards, and page improvements
  • Loading branch information
@bbrands02
bbrands02 authored Jul 16, 2024
2 parents cb04403 + 29a15ab commit f654b4b
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 199 deletions.
3 changes: 2 additions & 1 deletion pwa/src/templates/publicationDetail/PublicationsDetailTemplate.module.css
View file
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
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
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
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
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

0 comments on commit f654b4b

Please sign in to comment.