From bc1b0039cf788b8dcd99b68d9d0885111b7b496b Mon Sep 17 00:00:00 2001
From: HO <93981322+VWSCoronaDashboard19@users.noreply.github.com>
Date: Thu, 17 Nov 2022 18:42:57 +0100
Subject: [PATCH] Set header and clean up old unused data on measures page in
Sanity (#4495)
* feat(measures): add consistent header with icon to page
* feat(measures): Clean up old unused data on measures page in Sanity
* fix: revert agegroup change
* feat: updated logic for icons and Sanity
* feat: cleanup code and optimize better naming
* fix: removed redundant code as its already removed
* fix: remove redundant code comment
* feat: updated query for measuresItems
* fix: fixed Sanity bug by filtering keyless docs
* fix: cleaned up css formatting
---
.../src/domain/measures/measures-table.tsx | 123 +++++++++
packages/app/src/domain/measures/types.ts | 5 +
.../domain/restrictions/lockdown-table.tsx | 233 ------------------
.../domain/restrictions/restriction-icons.ts | 81 ------
.../vaccine/components/age-group-select.tsx | 26 +-
.../src/pages/landelijk/geldende-adviezen.tsx | 86 +++----
.../[code]/geldende-adviezen.tsx | 88 +++----
packages/app/src/types/cms.d.ts | 34 +--
packages/cms/src/components/index.ts | 1 -
.../src/components/restriction-icon/index.ts | 2 -
.../restriction-icon-input.tsx | 96 --------
.../restriction-icon/restriction-icons.ts | 102 --------
packages/cms/src/dashboard-config.tsx | 7 +-
packages/cms/src/desk-structure.ts | 8 +-
packages/cms/src/schemas/measures/index.ts | 3 +
.../schemas/measures/measures-collection.ts | 43 ++++
.../cms/src/schemas/measures/measures-item.ts | 37 +++
packages/cms/src/schemas/measures/measures.ts | 35 +++
.../cms/src/schemas/restrictions/index.ts | 3 -
.../cms/src/schemas/restrictions/lockdown.ts | 31 ---
.../restriction-group-lockdown.tsx | 52 ----
.../src/schemas/restrictions/restriction.tsx | 42 ----
packages/cms/src/schemas/schema.ts | 4 +-
23 files changed, 342 insertions(+), 800 deletions(-)
create mode 100644 packages/app/src/domain/measures/measures-table.tsx
create mode 100644 packages/app/src/domain/measures/types.ts
delete mode 100644 packages/app/src/domain/restrictions/lockdown-table.tsx
delete mode 100644 packages/app/src/domain/restrictions/restriction-icons.ts
delete mode 100644 packages/cms/src/components/restriction-icon/index.ts
delete mode 100644 packages/cms/src/components/restriction-icon/restriction-icon-input.tsx
delete mode 100644 packages/cms/src/components/restriction-icon/restriction-icons.ts
create mode 100644 packages/cms/src/schemas/measures/index.ts
create mode 100644 packages/cms/src/schemas/measures/measures-collection.ts
create mode 100644 packages/cms/src/schemas/measures/measures-item.ts
create mode 100644 packages/cms/src/schemas/measures/measures.ts
delete mode 100644 packages/cms/src/schemas/restrictions/index.ts
delete mode 100644 packages/cms/src/schemas/restrictions/lockdown.ts
delete mode 100644 packages/cms/src/schemas/restrictions/restriction-group-lockdown.tsx
delete mode 100644 packages/cms/src/schemas/restrictions/restriction.tsx
diff --git a/packages/app/src/domain/measures/measures-table.tsx b/packages/app/src/domain/measures/measures-table.tsx
new file mode 100644
index 0000000000..24e2f5b1b8
--- /dev/null
+++ b/packages/app/src/domain/measures/measures-table.tsx
@@ -0,0 +1,123 @@
+import { css } from '@styled-system/css';
+import { Fragment } from 'react';
+import { Box } from '~/components/base';
+import { Cell, Row, Table, TableBody } from '~/components/table';
+import { BoldText } from '~/components/typography';
+import { space } from '~/style/theme';
+import { Measures } from '~/types/cms';
+import { useBreakpoints } from '~/utils/use-breakpoints';
+import DynamicIcon from '~/components/get-icon-by-name';
+import { TopicalIcon as MeasuresIcon } from '@corona-dashboard/common/src/types';
+import { getFilenameToIconName } from '~/utils';
+import styled from 'styled-components';
+import { colors } from '@corona-dashboard/common';
+import { Dot } from '@corona-dashboard/icons';
+
+interface MeasuresTableProps {
+ data: Measures;
+}
+
+export function MeasuresTable(props: MeasuresTableProps) {
+ const { data } = props;
+
+ const breakpoints = useBreakpoints(true);
+
+ if (breakpoints.lg) {
+ return ;
+ }
+
+ return ;
+}
+
+const MobileMeasuresTable = (props: MeasuresTableProps) => {
+ const { data } = props;
+
+ return (
+
+
+ {data.measuresCollection.map((collection, index) => {
+ return (
+
+
+
+ {collection.title}
+ |
+
+
+
+
+ {collection.measuresItems.map((measuresItem, index) => {
+ return (
+
+ {measuresItem.icon ? : }
+
+ {measuresItem.title}
+
+ );
+ })}
+
+ |
+
+
+ );
+ })}
+
+
+ );
+};
+
+const DesktopMeasuresTable = (props: MeasuresTableProps) => {
+ const { data } = props;
+
+ return (
+
+
+ {data.measuresCollection.map((collection, index) => {
+ return (
+
+
+ {collection.title}
+ |
+
+
+ {collection.measuresItems.map((measuresItem, index) => {
+ return (
+
+ {measuresItem.icon ? : }
+
+ {measuresItem.title}
+
+
+ );
+ })}
+
+ |
+
+ );
+ })}
+
+
+ );
+};
+
+const StyledIconWrapper = styled.span`
+ display: flex;
+ flex-shrink: 0;
+ margin-right: ${space[2]};
+ width: 36px;
+ height: 36px;
+ align-items: center;
+ justify-content: center;
+ color: ${colors.blue8};
+ svg {
+ height: ${space[4]};
+ width: ${space[4]};
+ }
+`;
diff --git a/packages/app/src/domain/measures/types.ts b/packages/app/src/domain/measures/types.ts
new file mode 100644
index 0000000000..eebc2a642a
--- /dev/null
+++ b/packages/app/src/domain/measures/types.ts
@@ -0,0 +1,5 @@
+import { Measures } from '~/types/cms';
+
+export interface GeldendeAdviezenData {
+ measures: Measures;
+};
\ No newline at end of file
diff --git a/packages/app/src/domain/restrictions/lockdown-table.tsx b/packages/app/src/domain/restrictions/lockdown-table.tsx
deleted file mode 100644
index ef84a6add9..0000000000
--- a/packages/app/src/domain/restrictions/lockdown-table.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { css } from '@styled-system/css';
-import { Fragment } from 'react';
-import { Box } from '~/components/base';
-import { Cell, Row, Table, TableBody } from '~/components/table';
-import { BoldText } from '~/components/typography';
-import { LockdownData } from '~/types/cms';
-import { useBreakpoints } from '~/utils/use-breakpoints';
-import { restrictionIcons } from './restriction-icons';
-
-type EscalationLevelType = 1 | 2 | 3;
-
-type LockdownTableProps = {
- data: LockdownData;
- level: EscalationLevelType;
-};
-
-export function LockdownTable(props: LockdownTableProps) {
- const { data, level } = props;
-
- const breakpoints = useBreakpoints(true);
-
- if (breakpoints.lg) {
- return ;
- }
-
- return ;
-}
-
-/**
- * This function returns a css filter to change an image from black to the desired escalation level color
- * We can't use fill or currentColor because we're loading the SVG's as images to save on bundle size
- * The colors are pre-calculated though this URL: https://codepen.io/sosuke/pen/Pjoqqp
- */
-function getEscalationFilter(escalationLevel: EscalationLevelType) {
- switch (escalationLevel) {
- // #F291BC
- case 1:
- return 'invert(64%) sepia(40%) saturate(490%) hue-rotate(286deg) brightness(99%) contrast(91%)';
- // #D95790
- case 2:
- return 'invert(52%) sepia(21%) saturate(3993%) hue-rotate(302deg) brightness(91%) contrast(86%)';
- // #A11050
- case 3:
- return 'invert(15%) sepia(48%) saturate(4967%) hue-rotate(317deg) brightness(92%) contrast(101%)';
- default:
- return;
- }
-}
-
-type LockdownTableData = {
- data: LockdownData;
- escalationLevel: EscalationLevelType;
-};
-
-function MobileLockdownTable(props: LockdownTableData) {
- const { data, escalationLevel } = props;
- const filter = getEscalationFilter(escalationLevel);
-
- return (
-
-
- {data.groups.map((group) => {
- return (
-
-
-
- {group.title}
- |
-
-
-
-
- {group.restrictions.map((restriction) => {
- return (
-
-
- {restriction.icon ? (
-
- ) : (
-
- )}
-
- {restriction.text}
-
- );
- })}
-
- |
-
-
- );
- })}
-
-
- );
-}
-
-function DesktopLockdownTable(props: LockdownTableData) {
- const { data, escalationLevel } = props;
-
- const filter = getEscalationFilter(escalationLevel);
-
- return (
-
-
- {data.groups.map((group) => {
- return (
-
-
- {group.title}
- |
-
-
- {group.restrictions.map((restriction) => {
- return (
-
-
- {restriction.icon &&
- restrictionIcons[restriction.icon] ? (
-
- ) : (
-
- )}
-
-
- {restriction.text}
-
-
- );
- })}
-
- |
-
- );
- })}
-
-
- );
-}
diff --git a/packages/app/src/domain/restrictions/restriction-icons.ts b/packages/app/src/domain/restrictions/restriction-icons.ts
deleted file mode 100644
index c620d87804..0000000000
--- a/packages/app/src/domain/restrictions/restriction-icons.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-export const restrictionIcons: Record = {
- '0_algemeen_18': 'onderwijs-en-kinderopvang_op-afstand.svg',
- '0_algemeen_19': 'basisregels_afstand.svg',
- '0_algemeen_20': 'basisregels_drukte.svg',
- '0_algemeen_21': 'basisregels_handenwassen.svg',
- '0_algemeen_22': 'basisregels_elleboog.svg',
- '0_algemeen_23': 'basisregels_mondkapje.svg',
- '0_algemeen_42': 'basisregels_blijf-thuis.svg',
- '0_algemeen_43': 'basisregels_testen.svg',
- '0_algemeen_44': 'basisregels_geen-bezoek.svg',
- '41_bezoek_24': 'thuis.svg',
- '41_er_op_uit_25': 'groepen.svg',
- '41_samenkomst_26': 'publiek-toegankelijke-locaties.svg',
- '41_horeca_27': 'horeca-en-evenementen_etendrinken.svg',
- '41_horeca_28': 'horeca-en-evenementen_bestellen.svg',
- '41_horeca_29': 'horeca-en-evenementen_evenementen.svg',
- '41_winkels_30': 'publiek-toegankelijke-locaties.svg',
- '41_winkels_31': 'winkelen-en-boodschappen_open.svg',
- '41_winkels_32': 'winkelen-en-boodschappen_alcohol.svg',
- '41_contactberoep_33': 'contactberoepen.svg',
- '41_sport_34': 'sport_buiten.svg',
- '41_sport_35': 'sport_binnensportlocaties.svg',
- '41_sport_36': 'sport_wedstrijden.svg',
- '41_ov_37': 'vervoer-en-reizen_blijfthuis.svg',
- '41_ov_38': 'vervoer-en-reizen_buitenland.svg',
- '41_ov_45': 'vervoer-en-reizen_ov.svg',
- '41_onderwijs_39': 'onderwijs-en-kinderopvang_op-afstand.svg',
- '41_onderwijs_40': 'onderwijs-en-kinderopvang_kinderopvang.svg',
- '41_onderwijs_41': 'onderwijs-en-kinderopvang_noodopvang.svg',
- avondklok: 'avondklok.svg',
- bezoek: 'bezoek.svg',
- lopend: 'lopend.svg',
- eenPersoonDoorgestreept: 'een-persoon-doorgestreept.svg',
- gedeeltelijkOpenRugzak: 'gedeeltelijk-open-rugzak.svg',
- geenWedstrijden: 'geen-wedstrijden.svg',
- sporterMetZweetband: 'sporter-met-zweetband.svg',
- 'stap_1-horeca_max': 'stap_1-horeca_max.svg',
- 'stap_1-horeca_per_tafel': 'stap_1-horeca_pertafel.svg',
- 'stap_1-horeca_reserveren': 'stap_1-horeca_reserveren.svg',
- 'stap_1-horeca_sportaccomodaties': 'stap_1-horeca_sportaccomodaties.svg',
- 'stap_1-horeca_terras': 'stap_1-horeca_terras.svg',
- 'stap_1-horeca_verplaatsen': 'stap_1-horeca_verplaatsen.svg',
- 'stap_1-onderwijs_bibliotheek': 'stap_1-onderwijs_bibliotheek.svg',
- 'stap_1-onderwijs_open': 'stap_1-onderwijs_open.svg',
- 'stap_1-theorie': 'stap_1-theorie.svg',
- 'stap_1-thuisbezoek': 'stap_1-thuisbezoek.svg',
- 'stap_1-uitvaarten': 'stap_1-uitvaarten.svg',
- 'stap_1-winkels_alleen': 'stap_1-winkels_alleen.svg',
- 'stap_1-winkels_markten': 'stap_1-winkels_markten.svg',
- 'stap_1-winkels_max': 'stap_1-winkels_max.svg',
- 'stap_1-winkels_open': 'stap_1-winkels_open.svg',
- 'stap-1_avondklok': 'stap-1_avondklok.svg',
- testbewijs: 'testbewijs.svg',
- reizen: 'reizen.svg',
- recreatie: 'recreatie.svg',
- binnensporten: 'binnensporten.svg',
- bibliotheken: 'bibliotheken.svg',
- horeca_evenementen: 'horeca_evenementen.svg',
- kunstcultuur_musea: 'kunstcultuur_musea.svg',
- ontmoetingen_bezoek: 'ontmoetingen_bezoek.svg',
- alcohol_verkoop: 'alcohol-verkoop.svg',
- max_aantal_bezoekers: 'max-aantal-bezoekers.svg',
- meerdaagse_evenementen: 'meerdaagse-evenementen.svg',
- openingstijden: 'openingstijden.svg',
- toegangsbewijzen: 'toegangsbewijzen.svg',
- klok_2100: 'klok-2100.svg',
- geen_entertainment: 'geen-entertainment.svg',
- frisse_lucht: 'frisse_lucht.svg',
- binnen_met_zitplaats: 'binnen-met-zitplaats.svg',
- binnen_zonder_zitplaats: 'binnen-zonder-zitplaats.svg',
- geen_max_aantal_bezoekers: 'geen-max-aantal-bezoekers.svg',
- kunst_cultuur: 'kunst-cultuur.svg',
- taxi: 'taxi.svg',
- vliegen: 'vliegen.svg',
- doorstroomevenementen: 'doorstroomevenementen.svg',
- afstand_sporten: 'afstand-sporten.svg',
- georganiseerdeKunstEnCultuurbeoefeningen:
- 'georganiseerde-kunst-en-cultuurbeoefening.svg',
- openbaarVervoer: 'openbaar-vervoer.svg',
- binnensportlocaties: 'binnensportlocaties.svg',
-};
diff --git a/packages/app/src/domain/vaccine/components/age-group-select.tsx b/packages/app/src/domain/vaccine/components/age-group-select.tsx
index 15d9e9a629..19a2ea5798 100644
--- a/packages/app/src/domain/vaccine/components/age-group-select.tsx
+++ b/packages/app/src/domain/vaccine/components/age-group-select.tsx
@@ -39,39 +39,23 @@ export function AgeGroupSelect(props: AgeGroupSelectProps) {
const options: Option[] = useMemo(
() =>
AGE_GROUPS.map((ageGroupAndRange) => {
- const birthyearRange = parseBirthyearRange(
- ageGroupAndRange.birthyearRange
- );
+ const birthyearRange = parseBirthyearRange(ageGroupAndRange.birthyearRange);
if (isPresent(birthyearRange)) {
- if (
- shownAgeGroups &&
- shownAgeGroups.includes(ageGroupAndRange.ageGroup)
- ) {
+ if (shownAgeGroups && shownAgeGroups.includes(ageGroupAndRange.ageGroup)) {
return {
value: ageGroupAndRange.ageGroup,
label: commonTexts.common.age_groups[ageGroupAndRange.ageGroup],
content: (
-
- {commonTexts.common.age_groups[ageGroupAndRange.ageGroup]}
-
-
- {replaceVariablesInText(
- commonTexts.common.birthyear_ranges[birthyearRange.type],
- birthyearRange
- )}
-
+ {commonTexts.common.age_groups[ageGroupAndRange.ageGroup]}
+ {replaceVariablesInText(commonTexts.common.birthyear_ranges[birthyearRange.type], birthyearRange)}
),
};
}
}
}).filter(isPresent),
- [
- commonTexts.common.age_groups,
- commonTexts.common.birthyear_ranges,
- shownAgeGroups,
- ]
+ [commonTexts.common.age_groups, commonTexts.common.birthyear_ranges, shownAgeGroups]
);
return (
diff --git a/packages/app/src/pages/landelijk/geldende-adviezen.tsx b/packages/app/src/pages/landelijk/geldende-adviezen.tsx
index 16c823fc55..bcb3947eaf 100644
--- a/packages/app/src/pages/landelijk/geldende-adviezen.tsx
+++ b/packages/app/src/pages/landelijk/geldende-adviezen.tsx
@@ -1,89 +1,77 @@
+import { TopicalIcon as PageIcon } from '@corona-dashboard/common/src/types';
import { Box } from '~/components/base/box';
import { RichContent } from '~/components/cms/rich-content';
import { TileList } from '~/components/tile-list';
import { Heading } from '~/components/typography';
+import { Header } from '~/components/page-information-block/components/header';
import { Layout } from '~/domain/layout/layout';
import { NlLayout } from '~/domain/layout/nl-layout';
-import { LockdownTable } from '~/domain/restrictions/lockdown-table';
+import { MeasuresTable } from '~/domain/measures/measures-table';
import { Languages, SiteText } from '~/locale';
-import {
- createGetStaticProps,
- StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
- createGetContent,
- getLastGeneratedDate,
- getLokalizeTexts,
-} from '~/static-props/get-data';
-import { LockdownData, RoadmapData } from '~/types/cms';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { createGetContent, getLastGeneratedDate, getLokalizeTexts } from '~/static-props/get-data';
import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
-
-type GeldendeAdviezenData = {
- lockdown: LockdownData;
- roadmap?: RoadmapData;
-};
+import { getFilenameToIconName } from '~/utils';
+import { useIntl } from '~/intl';
+import DynamicIcon from '~/components/get-icon-by-name';
+import { GeldendeAdviezenData } from '~/domain/measures/types';
const selectLokalizeTexts = (siteText: SiteText) => ({
metadataTexts: siteText.pages.topical_page.nl.nationaal_metadata,
textNl: siteText.pages.measures_page.nl,
});
-type LokalizeTexts = ReturnType;
-
export const getStaticProps = createGetStaticProps(
- ({ locale }: { locale: keyof Languages }) =>
- getLokalizeTexts(selectLokalizeTexts, locale),
+ ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale),
getLastGeneratedDate,
createGetContent((context) => {
const { locale } = context;
return `
{
- 'lockdown': *[_type == 'lockdown']{
- ...,
- "message": {
- ...message,
- "description": {
- ...message.description,
- "${locale}": [
- ...message.description.${locale}[]
- {
- ...,
- "asset": asset->
- },
- ]
+ 'measures': *[
+ _type == 'measures' && !(_id in path("drafts.**"))
+ ][0] {
+ icon,
+ 'measuresCollection': measuresCollection[]->{
+ 'title': title.${locale},
+ icon,
+ 'measuresItems': measuresItems[]->{
+ 'title': title.${locale},
+ icon
+ }
},
- }
- }[0],
- // We will need the roadmap when lockdown is disabled in the CMS.
- // 'roadmap': *[_type == 'roadmap'][0]
+ 'title':title.${locale},
+ 'description': description.${locale}
+ },
}`;
})
);
const NationalRestrictions = (props: StaticProps) => {
const { pageText, content, lastGenerated } = props;
- const { metadataTexts, textNl } = useDynamicLokalizeTexts(
- pageText,
- selectLokalizeTexts
- );
-
- const { lockdown } = content;
+ const { metadataTexts } = useDynamicLokalizeTexts(pageText, selectLokalizeTexts);
+ const { commonTexts } = useIntl();
+ const { measures } = content;
return (
- {textNl.titel}
- {lockdown.message.description ? (
+ }
+ title={measures.title}
+ category={commonTexts.sidebar.categories.actions_to_take.title}
+ />
+ {measures.description && (
-
+
- ) : null}
+ )}
- {lockdown.title}
-
+ {measures.title}
+
diff --git a/packages/app/src/pages/veiligheidsregio/[code]/geldende-adviezen.tsx b/packages/app/src/pages/veiligheidsregio/[code]/geldende-adviezen.tsx
index 4c0003cdb2..a48646f8c8 100644
--- a/packages/app/src/pages/veiligheidsregio/[code]/geldende-adviezen.tsx
+++ b/packages/app/src/pages/veiligheidsregio/[code]/geldende-adviezen.tsx
@@ -1,44 +1,32 @@
import { useRouter } from 'next/router';
+import { TopicalIcon as PageIcon } from '@corona-dashboard/common/src/types';
import { AnchorTile } from '~/components/anchor-tile';
import { Box } from '~/components/base';
import { RichContent } from '~/components/cms/rich-content';
import { TileList } from '~/components/tile-list';
import { Heading } from '~/components/typography';
+import { Header } from '~/components/page-information-block/components/header';
+import DynamicIcon from '~/components/get-icon-by-name';
import { Layout } from '~/domain/layout/layout';
import { VrLayout } from '~/domain/layout/vr-layout';
-import { LockdownTable } from '~/domain/restrictions/lockdown-table';
+import { MeasuresTable } from '~/domain/measures/measures-table';
import { useIntl } from '~/intl';
import { Languages, SiteText } from '~/locale';
-import {
- createGetStaticProps,
- StaticProps,
-} from '~/static-props/create-get-static-props';
-import {
- createGetContent,
- getLastGeneratedDate,
- selectVrData,
- getLokalizeTexts,
-} from '~/static-props/get-data';
-import { LockdownData, RoadmapData } from '~/types/cms';
+import { createGetStaticProps, StaticProps } from '~/static-props/create-get-static-props';
+import { createGetContent, getLastGeneratedDate, selectVrData, getLokalizeTexts } from '~/static-props/get-data';
import { replaceVariablesInText } from '~/utils/replace-variables-in-text';
import { useDynamicLokalizeTexts } from '~/utils/cms/use-dynamic-lokalize-texts';
+import { getFilenameToIconName } from '~/utils';
+import { GeldendeAdviezenData } from '~/domain/measures/types';
const selectLokalizeTexts = (siteText: SiteText) => ({
textVr: siteText.pages.measures_page.vr,
});
-type LokalizeTexts = ReturnType;
-
export { getStaticPaths } from '~/static-paths/vr';
-type GeldendeAdviezenData = {
- lockdown: LockdownData;
- roadmap?: RoadmapData;
-};
-
export const getStaticProps = createGetStaticProps(
- ({ locale }: { locale: keyof Languages }) =>
- getLokalizeTexts(selectLokalizeTexts, locale),
+ ({ locale }: { locale: keyof Languages }) => getLokalizeTexts(selectLokalizeTexts, locale),
getLastGeneratedDate,
selectVrData(),
createGetContent((context) => {
@@ -46,24 +34,21 @@ export const getStaticProps = createGetStaticProps(
return `
{
- 'lockdown': *[_type == 'lockdown']{
- ...,
- "message": {
- ...message,
- "description": {
- ...message.description,
- "${locale}": [
- ...message.description.${locale}[]
- {
- ...,
- "asset": asset->
- },
- ]
+ 'measures': *[
+ _type == 'measures' && !(_id in path("drafts.**"))
+ ][0] {
+ icon,
+ 'measuresCollection': measuresCollection[]->{
+ 'title': title.${locale},
+ icon,
+ 'measuresItems': measuresItems[]->{
+ 'title': title.${locale},
+ icon
+ }
},
- }
- }[0],
- // We will need the roadmap when lockdown is disabled in the CMS.
- // 'roadmap': *[_type == 'roadmap'][0]
+ 'title':title.${locale},
+ 'description': description.${locale}
+ },
}`;
})
);
@@ -72,13 +57,10 @@ const RegionalRestrictions = (props: StaticProps) => {
const { pageText, content, vrName, lastGenerated } = props;
const { commonTexts } = useIntl();
- const { textVr } = useDynamicLokalizeTexts(
- pageText,
- selectLokalizeTexts
- );
+ const { textVr } = useDynamicLokalizeTexts(pageText, selectLokalizeTexts);
type VRCode = keyof typeof textVr.urls;
- const { lockdown } = content;
+ const { measures } = content;
const router = useRouter();
const code = router.query.code as unknown as VRCode;
@@ -100,21 +82,21 @@ const RegionalRestrictions = (props: StaticProps) => {
-
- {replaceVariablesInText(textVr.titel, {
- safetyRegionName: vrName,
- })}
-
- {lockdown.message.description ? (
+ }
+ title={measures.title}
+ category={commonTexts.sidebar.categories.actions_to_take.title}
+ />
+ {measures.description && (
-
+
- ) : null}
+ )}
- {lockdown.title}
-
+ {measures.title}
+
void;
-}
-export function RestrictionIconInput(props: RestrictionIconInputProps) {
- const [isOpen, setIsOpen] = useState(false);
- const onClose = useCallback(() => setIsOpen(false), []);
- const onOpen = useCallback(() => setIsOpen(true), []);
-
- const { type, value, onChange } = props;
-
- const allIcons = Object.entries(restrictionIcons)
- // hide empty icons
- .filter((entry) => entry[1]) as [string, TIcon][];
-
- const TheIcon = restrictionIcons[value] as TIcon;
-
- return (
-
-
-
- {type.title}
-
- {value === undefined ? (
- Er is geen icoon geselecteerd
- ) : (
-
-
-
- )}
-
-
-
-
-
- {isOpen && (
-
- )}
-
- );
-}
diff --git a/packages/cms/src/components/restriction-icon/restriction-icons.ts b/packages/cms/src/components/restriction-icon/restriction-icons.ts
deleted file mode 100644
index 3ceca32f9f..0000000000
--- a/packages/cms/src/components/restriction-icon/restriction-icons.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as Icons from '@corona-dashboard/icons';
-
-export type RestrictionIconKey = keyof typeof restrictionIcons;
-
-export const restrictionIcons = {
- '41_er_op_uit_1': null,
- '41_er_op_uit_2': null,
- '41_samenkomst_3': null,
- '41_horeca_4': null,
- '41_horeca_5': null,
- '41_horeca_6': null,
- '41_bezoek_7': null,
- '41_bezoek_8': null,
- '41_winkels_9': null,
- '41_winkels_10': null,
- '41_winkels_11': null,
- '41_ov_12': null,
- '41_ov_13': null,
- '41_sport_14': null,
- '41_sport_15': null,
- '41_sport_16': null,
- '41_sport_17': null,
- '0_algemeen_18': Icons.OnderwijsEnKinderopvangOpAfstand,
- '0_algemeen_19': Icons.BasisregelsAfstand,
- '0_algemeen_20': Icons.BasisregelsDrukte,
- '0_algemeen_21': Icons.BasisregelsHandenwassen,
- '0_algemeen_22': Icons.BasisregelsElleboog,
- '0_algemeen_23': Icons.BasisregelsMondkapje,
- '0_algemeen_42': Icons.Klachten,
- '0_algemeen_43': Icons.BasisregelsTesten,
- '0_algemeen_44': Icons.BasisregelsGeenBezoek,
- '41_bezoek_24': Icons.Stap1Thuisbezoek,
- '41_er_op_uit_25': Icons.Groepen,
- '41_samenkomst_26': Icons.HorecaEnEvenementenEtendrinken,
- '41_horeca_27': Icons.HorecaEnEvenementenEtendrinken,
- '41_horeca_28': Icons.HorecaEnEvenementenBestellen,
- '41_horeca_29': Icons.HorecaEnEvenementenEvenementen,
- '41_winkels_30': Icons.HorecaEnEvenementenEtendrinken,
- '41_winkels_31': Icons.WinkelenEnBoodschappenOpen,
- '41_winkels_32': Icons.WinkelenEnBoodschappenAlcohol,
- '41_contactberoep_33': Icons.ContactBeroepen,
- '41_sport_34': Icons.SportBuiten,
- '41_sport_35': Icons.HorecaEnEvenementenEtendrinken,
- '41_sport_36': Icons.SportWedstrijden,
- '41_ov_37': Icons.Elderly,
- '41_ov_38': Icons.VervoerEnReizenBuitenland,
- '41_ov_45': Icons.VervoerEnReizenOv,
- '41_onderwijs_39': Icons.OnderwijsEnKinderopvangOpAfstand,
- '41_onderwijs_40': Icons.HorecaEnEvenementenEtendrinken,
- '41_onderwijs_41': Icons.OnderwijsEnKinderopvangNoodopvang,
- avondklok: Icons.Avondklok,
- bezoek: Icons.Bezoek,
- lopend: Icons.Lopend,
- eenPersoonDoorgestreept: Icons.EenPersoonDoorgestreept,
- gedeeltelijkOpenRugzak: Icons.GedeeltelijkOpenRugzak,
- geenWedstrijden: Icons.GeenWedstrijden,
- sporterMetZweetband: Icons.SportMetZweetband,
- 'stap_1-horeca_max': Icons.Stap1HorecaMax,
- 'stap_1-horeca_per_tafel': Icons.Stap1HorecaPertafel,
- 'stap_1-horeca_reserveren': Icons.Maatregelen,
- 'stap_1-horeca_sportaccomodaties': Icons.HorecaEnEvenementenEtendrinken,
- 'stap_1-horeca_terras': Icons.Hospitality,
- 'stap_1-horeca_verplaatsen': Icons.Stap1HorecaVerplaatsen,
- 'stap_1-onderwijs_bibliotheek': Icons.Stap1OnderwijsBibliotheek,
- 'stap_1-onderwijs_open': Icons.Stap1OnderwijsOpen,
- 'stap_1-theorie': Icons.Stap1Theorie,
- 'stap_1-thuisbezoek': Icons.Stap1Thuisbezoek,
- 'stap_1-uitvaarten': Icons.Stap1Uitvaarten,
- 'stap_1-winkels_alleen': Icons.Stap1WinkelsAlleen,
- 'stap_1-winkels_markten': Icons.Stap1WinkelsMarkten,
- 'stap_1-winkels_max': Icons.Groepen,
- 'stap_1-winkels_open': Icons.Stap1WinkelsOpen,
- 'stap-1_avondklok': Icons.Avondklok,
- testbewijs: Icons.Testbewijs,
- reizen: Icons.Reizen,
- recreatie: Icons.Recreatie,
- binnensporten: Icons.Binnensporten,
- bibliotheken: Icons.Bibliotheek,
- horeca_evenementen: Icons.HorecaEvenementen,
- kunstcultuur_musea: Icons.KunstcultuurMusea,
- ontmoetingen_bezoek: Icons.OntmoetingenBezoek,
- alcohol_verkoop: Icons.AlcoholVerkoop,
- max_aantal_bezoekers: Icons.MaxAantalBezoekers,
- meerdaagse_evenementen: Icons.MeerdaagseEvenementen,
- openingstijden: Icons.Openingstijden,
- toegangsbewijzen: Icons.Toegangsbewijzen,
- klok_2100: Icons.Klok210001,
- geen_entertainment: Icons.GeenEntertainment,
- frisse_lucht: Icons.FrisseLucht,
- binnen_met_zitplaats: Icons.BinnenMetZitplaats,
- binnen_zonder_zitplaats: Icons.BinnenZonderZitplaats,
- geen_max_aantal_bezoekers: Icons.GeenMaxAantalBezoekers,
- kunst_cultuur: Icons.KunstCultuur,
- taxi: Icons.Taxi,
- vliegen: Icons.Vliegen,
- doorstroomevenementen: Icons.DoorstroomEvenementen,
- afstand_sporten: Icons.AfstandSporten,
- georganiseerdeKunstEnCultuurbeoefeningen:
- Icons.GeorganiseerdeKunstEnCultuurbeoefening,
- openbaarVervoer: Icons.OpenbaarVervoer,
- binnensportlocaties: Icons.Binnensportlocaties,
-} as const;
diff --git a/packages/cms/src/dashboard-config.tsx b/packages/cms/src/dashboard-config.tsx
index b34ed3daac..b19e371561 100644
--- a/packages/cms/src/dashboard-config.tsx
+++ b/packages/cms/src/dashboard-config.tsx
@@ -10,8 +10,7 @@ export default {
name: 'document-list',
options: {
title: 'Niet-gepubliceerde documenten',
- query:
- '*[_id in path("drafts.**") && (defined(text))] | order(_updatedAt desc)',
+ query: '*[_id in path("drafts.**") && (defined(text))] | order(_updatedAt desc)',
},
},
{
@@ -19,11 +18,9 @@ export default {
options: {
title: 'Recent gepubliceerde documenten',
limit: 30,
- query:
- '*[!(_id in path("drafts.**")) && (defined(text))] | order(_publishedAt desc)',
+ query: '*[!(_id in path("drafts.**")) && (defined(text)) && (defined(key))] | order(_publishedAt desc)',
},
},
- // { name: 'deploy' },
],
},
{
diff --git a/packages/cms/src/desk-structure.ts b/packages/cms/src/desk-structure.ts
index 2144f55727..4b0fdf9b85 100644
--- a/packages/cms/src/desk-structure.ts
+++ b/packages/cms/src/desk-structure.ts
@@ -1,5 +1,5 @@
import { StructureBuilder as S } from '@sanity/structure';
-import { BsCardChecklist, BsFillFileBarGraphFill, BsFillPuzzleFill, BsLockFill, BsMap, BsHouseFill, BsThermometer, BsGearFill } from 'react-icons/bs';
+import { BsCardChecklist, BsCardList, BsFillFileBarGraphFill, BsFillPuzzleFill, BsMap, BsHouseFill, BsThermometer, BsGearFill } from 'react-icons/bs';
import { GrCircleInformation } from 'react-icons/gr';
import { MdQuestionAnswer } from 'react-icons/md';
import { RiPagesFill } from 'react-icons/ri';
@@ -25,7 +25,7 @@ const hiddenDocTypes = [
'faqQuestion',
'kpi',
'kpiConfiguration',
- 'lockdown',
+ 'measures',
'lokalizeString',
'lokalizeSubject',
'lokalizeText',
@@ -70,7 +70,7 @@ export default () =>
pagePartListItem(),
lokalizeListItem(),
elementsListItem(),
- addListItem(BsLockFill, 'Lockdown', 'lockdown'),
+ addListItem(BsCardChecklist, 'Maatregelen', 'measures'),
addListItem(GrCircleInformation, 'Over dit dashboard', 'overDitDashboard'),
addListItem(BsMap, 'Over de risiconiveaus', 'overRisicoNiveausNew'),
S.listItem()
@@ -89,7 +89,7 @@ export default () =>
S.listItem()
.id('cijferverantwoording')
.title('Cijferverantwoording')
- .icon(BsCardChecklist)
+ .icon(BsCardList)
.child(
S.list()
.title('Groepen en Vragen')
diff --git a/packages/cms/src/schemas/measures/index.ts b/packages/cms/src/schemas/measures/index.ts
new file mode 100644
index 0000000000..6ab1ae9340
--- /dev/null
+++ b/packages/cms/src/schemas/measures/index.ts
@@ -0,0 +1,3 @@
+export * from './measures';
+export * from './measures-item';
+export * from './measures-collection';
diff --git a/packages/cms/src/schemas/measures/measures-collection.ts b/packages/cms/src/schemas/measures/measures-collection.ts
new file mode 100644
index 0000000000..8f509507e1
--- /dev/null
+++ b/packages/cms/src/schemas/measures/measures-collection.ts
@@ -0,0 +1,43 @@
+import { BsCollection } from 'react-icons/bs';
+import { KpiIconInput as MeasuresIconInput } from '../../components/portable-text/kpi-configuration/kpi-icon-input';
+
+export const measuresCollection = {
+ title: 'Maatregelen groep',
+ name: 'measuresCollection',
+ type: 'document',
+ fields: [
+ {
+ title: 'Maatregel groep',
+ description: 'Waar gaat deze maatregel groep over?',
+ name: 'title',
+ type: 'localeString',
+ },
+ {
+ title: 'Icoon',
+ description: 'Welk icoon moet er naast de maatregelen groep staan?',
+ name: 'icon',
+ type: 'string',
+ inputComponent: MeasuresIconInput,
+ },
+ {
+ title: 'Maatregel',
+ name: 'measuresItems',
+ type: 'array',
+ of: [{ type: 'reference', to: { type: 'measuresItem' } }],
+ },
+ ],
+ preview: {
+ select: {
+ title: 'title.nl',
+ icon: 'icon',
+ },
+ prepare(selection: { title: string }) {
+ const { title } = selection;
+
+ return {
+ title: title,
+ media: BsCollection,
+ };
+ },
+ },
+};
diff --git a/packages/cms/src/schemas/measures/measures-item.ts b/packages/cms/src/schemas/measures/measures-item.ts
new file mode 100644
index 0000000000..3c20d4642e
--- /dev/null
+++ b/packages/cms/src/schemas/measures/measures-item.ts
@@ -0,0 +1,37 @@
+import { BsViewList } from 'react-icons/bs';
+import { KpiIconInput as MeasuresIconInput } from '../../components/portable-text/kpi-configuration/kpi-icon-input';
+
+export const measuresItem = {
+ type: 'document',
+ title: 'Maatregel',
+ name: 'measuresItem',
+ fields: [
+ {
+ title: 'Maatregel',
+ description: 'Beschrijf de maatregel voor deze categorie',
+ name: 'title',
+ type: 'localeString',
+ },
+ {
+ title: 'Icoon',
+ description: 'Welk icoon moet er naast de maatregel staan?',
+ name: 'icon',
+ type: 'string',
+ inputComponent: MeasuresIconInput,
+ },
+ ],
+ preview: {
+ select: {
+ title: 'title.nl',
+ icon: 'icon',
+ },
+ prepare(selection: { title: string }) {
+ const { title } = selection;
+
+ return {
+ title: title,
+ media: BsViewList,
+ };
+ },
+ },
+};
diff --git a/packages/cms/src/schemas/measures/measures.ts b/packages/cms/src/schemas/measures/measures.ts
new file mode 100644
index 0000000000..cfda9098ab
--- /dev/null
+++ b/packages/cms/src/schemas/measures/measures.ts
@@ -0,0 +1,35 @@
+import { KpiIconInput as MeasuresIconInput } from '../../components/portable-text/kpi-configuration/kpi-icon-input';
+import { REQUIRED } from '../../validation';
+
+export const measures = {
+ type: 'document',
+ title: 'Geldende adviezen',
+ name: 'measures',
+ fields: [
+ {
+ title: 'Pagina icoon',
+ name: 'icon',
+ type: 'string',
+ inputComponent: MeasuresIconInput,
+ validation: REQUIRED,
+ },
+ {
+ title: 'Titel van de pagina',
+ name: 'title',
+ type: 'localeString',
+ validation: REQUIRED,
+ },
+ {
+ title: 'Omschrijving van de pagina',
+ name: 'description',
+ type: 'localeRichContentBlock',
+ },
+ {
+ title: 'Groepen',
+ description: 'De maatregelen zijn onderverdeeld in groepen',
+ name: 'measuresCollection',
+ type: 'array',
+ of: [{ type: 'reference', to: { type: 'measuresCollection'} }],
+ },
+ ],
+};
diff --git a/packages/cms/src/schemas/restrictions/index.ts b/packages/cms/src/schemas/restrictions/index.ts
deleted file mode 100644
index dc2280a4f1..0000000000
--- a/packages/cms/src/schemas/restrictions/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './lockdown';
-export * from './restriction';
-export * from './restriction-group-lockdown';
diff --git a/packages/cms/src/schemas/restrictions/lockdown.ts b/packages/cms/src/schemas/restrictions/lockdown.ts
deleted file mode 100644
index b06791cdf3..0000000000
--- a/packages/cms/src/schemas/restrictions/lockdown.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export const lockdown = {
- name: 'lockdown',
- type: 'document',
- title: 'Lockdown',
- __experimental_actions: ['create', 'update', 'publish'],
- fields: [
- {
- title: 'Titel van de lockdown',
- name: 'title',
- type: 'localeString',
- },
- {
- title: 'Lockdown boodschap',
- name: 'message',
- description:
- 'Als de knop aanstaat tonen wij deze waarschuwing op de landingspagina',
- type: 'object',
- fields: [
- { title: 'Titel', name: 'title', type: 'localeString' },
- { title: 'Lopende tekst', name: 'description', type: 'localeBlock' },
- ],
- },
- {
- title: 'Lockdown groepen',
- description: 'De maatregelen zijn onderverdeeld in groepen',
- name: 'groups',
- type: 'array',
- of: [{ type: 'restrictionGroupLockdown' }],
- },
- ],
-};
diff --git a/packages/cms/src/schemas/restrictions/restriction-group-lockdown.tsx b/packages/cms/src/schemas/restrictions/restriction-group-lockdown.tsx
deleted file mode 100644
index 7cb60af915..0000000000
--- a/packages/cms/src/schemas/restrictions/restriction-group-lockdown.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Icon as TIcon } from '@corona-dashboard/icons';
-import React from 'react';
-import {
- RestrictionIconInput,
- RestrictionIconKey,
- restrictionIcons,
-} from '../../components/restriction-icon';
-
-export const restrictionGroupLockdown = {
- title: 'Lockdown groep',
- name: 'restrictionGroupLockdown',
- type: 'object',
- fields: [
- {
- title: 'Maatregel groep',
- description: 'Waar gaat deze maatregel groep over?',
- name: 'title',
- type: 'localeString',
- },
- {
- title: 'Icoon',
- description: 'Welk icoon moet er naast de maatregelen groep staan?',
- name: 'icon',
- type: 'string',
- inputComponent: RestrictionIconInput,
- },
- {
- name: 'restrictions',
- type: 'array',
- of: [{ type: 'restriction' }],
- },
- ],
- preview: {
- select: {
- title: 'title.nl',
- icon: 'icon',
- },
- prepare(selection: { icon: RestrictionIconKey; title: string }) {
- const { title, icon } = selection;
-
- const TheIcon = restrictionIcons[icon] as TIcon;
-
- return {
- title: title,
-
- // `media` takes a function, string or React element
- // Remember to import React from 'react' if you are rendering React components like below
- media: icon ? : null,
- };
- },
- },
-};
diff --git a/packages/cms/src/schemas/restrictions/restriction.tsx b/packages/cms/src/schemas/restrictions/restriction.tsx
deleted file mode 100644
index b50d3f12d7..0000000000
--- a/packages/cms/src/schemas/restrictions/restriction.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Icon as TIcon } from '@corona-dashboard/icons';
-import React from 'react';
-import {
- RestrictionIconInput,
- RestrictionIconKey,
- restrictionIcons,
-} from '../../components/restriction-icon';
-
-export const restriction = {
- type: 'object',
- title: 'Maatregel',
- name: 'restriction',
- fields: [
- {
- title: 'Maatregel',
- description: 'Beschrijf de maatregel voor deze categorie',
- name: 'text',
- type: 'localeString',
- },
- {
- title: 'Icoon',
- description: 'Welk icoon moet er naast de maatregel staan?',
- name: 'icon',
- type: 'string',
- inputComponent: RestrictionIconInput,
- },
- ],
- preview: {
- select: {
- title: 'text.nl',
- icon: 'icon',
- },
- prepare({ title, icon }: { icon: RestrictionIconKey; title: string }) {
- const TheIcon = restrictionIcons[icon] as TIcon;
-
- return {
- title: title,
- media: icon ? : null,
- };
- },
- },
-};
diff --git a/packages/cms/src/schemas/schema.ts b/packages/cms/src/schemas/schema.ts
index 4ed3c3a2c3..3ce670d084 100644
--- a/packages/cms/src/schemas/schema.ts
+++ b/packages/cms/src/schemas/schema.ts
@@ -9,7 +9,7 @@ import * as elements from '../elements/schemas';
import * as documents from './documents';
import * as locale from './locale';
import * as objects from './objects';
-import * as restrictions from './restrictions';
+import * as measures from './measures';
import * as topicalPageConfig from './topical';
// Then we give our schema to the builder and provide the result to Sanity
@@ -20,7 +20,7 @@ export default createSchema({
// to the ones provided by any plugins that are installed
types: schemaTypes.concat(
...Object.values(documents),
- ...Object.values(restrictions),
+ ...Object.values(measures),
...Object.values(objects),
...Object.values(locale),
...Object.values(elements),