Feature/cor 1285 sanity thermometer timeline events (#4540)

* feat: converted level field to dropdown, added description to the toolTip Label, removed thermometerTimelineEvent title and description from sanity * fesmall adjustment to logic * fix: edited events titles at sanity Co-authored-by: VWSCoronaDashboard27 <[email protected]>
minvws · Dec 19, 2022 · be19fbc · be19fbc
1 parent 99978f0
commit be19fbc
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 43 deletions.
diff --git a/...src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx b/...src/components/severity-indicator-tile/components/timeline/components/tooltip-content.tsx
@@ -73,7 +73,11 @@ export const TimelineTooltipContent = ({ config, hasMultipleEvents, onNext, onPr
           <BoldText>{config.title}</BoldText>
         </Box>
 
-        <Text variant="label1">{config.description}</Text>
+        <Text variant="label1">
+          {replaceVariablesInText(config.description.split('**').join(''), {
+            label: config.title.toLowerCase(),
+          })}
+        </Text>
 
         {currentEstimationLabel && (
           <Box textVariant="label1">

diff --git a/packages/app/src/pages/index.tsx b/packages/app/src/pages/index.tsx
@@ -98,7 +98,7 @@ const Home = (props: StaticProps<typeof getStaticProps>) => {
   const currentSeverityLevel = thermometer.currentLevel as unknown as SeverityLevels;
   const currentSeverityLevelTexts = thermometer.thermometerLevels.find((thermometerLevel) => thermometerLevel.level === currentSeverityLevel);
 
-  const thermometerEvents = getThermometerEvents(thermometer.timeline.ThermometerTimelineEvents);
+  const thermometerEvents = getThermometerEvents(thermometer.timeline.ThermometerTimelineEvents, thermometer.thermometerLevels);
 
   const { startDate, endDate } = getTimelineRangeDates(thermometerEvents);
 

diff --git a/packages/app/src/queries/get-topical-structure-query.ts b/packages/app/src/queries/get-topical-structure-query.ts
@@ -1,5 +1,6 @@
-import { ThermometerTimelineEvent } from './query-types';
+import { ThermometerLevel, ThermometerTimelineEvent } from './query-types';
 import { SeverityIndicatorTimelineEventConfig } from '~/components/severity-indicator-tile/components/timeline/timeline';
+import { SeverityLevel } from '~/components/severity-indicator-tile/types';
 
 export function getTopicalStructureQuery(locale: string) {
   const query = `// groq
@@ -106,14 +107,15 @@ export function getTopicalStructureQuery(locale: string) {
   return query;
 }
 
-export const getThermometerEvents = (thermometerEvents: ThermometerTimelineEvent[]) => {
-  return thermometerEvents.map<SeverityIndicatorTimelineEventConfig>((thermometerEvent) => {
+export const getThermometerEvents = (thermometerEvents: ThermometerTimelineEvent[], thermometerLevels: ThermometerLevel[]) =>
+  thermometerEvents.map<SeverityIndicatorTimelineEventConfig>((thermometerEvent) => {
+    const levelDetails = thermometerLevels.find((thermometerLevel) => thermometerLevel.level === (thermometerEvent.level as SeverityLevel)) as ThermometerLevel;
+
     return {
-      title: thermometerEvent.title,
-      description: thermometerEvent.description,
-      level: thermometerEvent.level,
+      title: levelDetails.label,
+      description: levelDetails.description,
+      level: levelDetails.level,
       start: new Date(thermometerEvent.date).getTime() / 1000,
       end: new Date(thermometerEvent.dateEnd).getTime() / 1000,
     };
   });
-};
diff --git a/packages/app/src/queries/query-types.ts b/packages/app/src/queries/query-types.ts
@@ -43,7 +43,7 @@ export interface ThermometerTimelineEvent {
   dateEnd: number;
 }
 
-interface ThermometerLevel {
+export interface ThermometerLevel {
   level: SeverityLevel;
   label: string;
   description: string;

diff --git a/packages/cms/src/schemas/topical/thermometer-level.ts b/packages/cms/src/schemas/topical/thermometer-level.ts
@@ -1,7 +1,5 @@
-import { Rule } from '~/sanity';
-import { THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE } from './thermometer';
 import { SEVERITY_LEVELS_LIST } from '@corona-dashboard/app/src/components/severity-indicator-tile/constants';
-import { REQUIRED, REQUIRED_MIN_MAX } from '../../validation';
+import { REQUIRED } from '../../validation';
 import { BsFillFileBarGraphFill } from 'react-icons/bs';
 
 export const thermometerLevel = {
@@ -18,7 +16,7 @@ export const thermometerLevel = {
         list: SEVERITY_LEVELS_LIST,
         layout: 'dropdown',
       },
-      validation: (rule: Rule) => REQUIRED_MIN_MAX(rule, THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE),
+      validation: REQUIRED,
     },
     {
       title: 'Stand naam',

diff --git a/packages/cms/src/schemas/topical/thermometer-timeline-event.ts b/packages/cms/src/schemas/topical/thermometer-timeline-event.ts
@@ -1,10 +1,6 @@
+import { SEVERITY_LEVELS_LIST } from '@corona-dashboard/app/src/components/severity-indicator-tile/constants';
 import { isDefined } from 'ts-is-present';
-import { Rule } from '~/sanity';
-import { localeStringValidation } from '../../language/locale-validation';
-
-import { REQUIRED, REQUIRED_MIN_MAX } from '../../validation';
-
-import { THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE } from './thermometer';
+import { REQUIRED } from '../../validation';
 
 const DATE_FORMAT = 'YYYY-MM-DD';
 
@@ -13,23 +9,15 @@ export const thermometerTimelineEvent = {
   type: 'document',
   title: 'Thermometer tijdlijn gebeurtenis',
   fields: [
-    {
-      title: 'Titel',
-      name: 'title',
-      type: 'localeString',
-      validation: localeStringValidation((rule) => rule.required().max(60).error('Titels zijn gelimiteerd tot maximaal 60 tekens')),
-    },
-    {
-      title: 'Omschrijving',
-      name: 'description',
-      type: 'localeText',
-      validation: REQUIRED,
-    },
     {
       title: 'Level',
       name: 'level',
       type: 'number',
-      validation: (rule: Rule) => REQUIRED_MIN_MAX(rule, THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE),
+      options: {
+        list: SEVERITY_LEVELS_LIST,
+        layout: 'dropdown',
+      },
+      validation: REQUIRED,
     },
     {
       title: 'Datum',
@@ -52,14 +40,18 @@ export const thermometerTimelineEvent = {
   ],
   preview: {
     select: {
-      title: 'title.nl',
+      title: 'level',
       date: 'date',
       dateEnd: 'dateEnd',
     },
-    prepare(x: { title: string; date: string; dateEnd?: string }) {
+    prepare(selection: { title: number; date: string; dateEnd?: string }) {
+      // Construct a custom start date
+      const day = selection.date.slice(8);
+      const month = selection.date.slice(5, -3);
+
       return {
-        title: x.title,
-        subtitle: [x.date, x.dateEnd].filter(isDefined).join(' tot '),
+        title: `${day}/${month}: level ${selection.title}`,
+        subtitle: [selection.date, selection.dateEnd].filter(isDefined).join(' tot '),
       };
     },
   },

diff --git a/packages/cms/src/schemas/topical/thermometer-timeline.ts b/packages/cms/src/schemas/topical/thermometer-timeline.ts
@@ -27,6 +27,7 @@ export const thermometerTimeline = {
     },
     {
       title: 'Tooltip label',
+      description: 'Extra beschrijving voor in de laatste gebeurtenis in de tijdlijn',
       name: 'tooltipCurrentEstimationLabel',
       type: 'localeText',
       validation: REQUIRED,

diff --git a/packages/cms/src/schemas/topical/thermometer.ts b/packages/cms/src/schemas/topical/thermometer.ts
@@ -1,11 +1,7 @@
-import { Rule } from '~/sanity';
 import { SEVERITY_LEVELS_LIST } from '@corona-dashboard/app/src/components/severity-indicator-tile/constants';
-import { REQUIRED, REQUIRED_MIN_MAX } from '../../validation';
+import { REQUIRED } from '../../validation';
 import { KpiIconInput } from '../../components/portable-text/kpi-configuration/kpi-icon-input';
 
-export const THERMOMETER_MIN_VALUE = Math.min(...SEVERITY_LEVELS_LIST);
-export const THERMOMETER_MAX_VALUE = Math.max(...SEVERITY_LEVELS_LIST);
-
 export const thermometer = {
   type: 'object',
   title: 'Thermometer',
@@ -72,7 +68,7 @@ export const thermometer = {
         list: SEVERITY_LEVELS_LIST,
         layout: 'dropdown',
       },
-      validation: (rule: Rule) => REQUIRED_MIN_MAX(rule, THERMOMETER_MIN_VALUE, THERMOMETER_MAX_VALUE),
+      validation: REQUIRED,
     },
     {
       title: 'Standen',