Add template selection to basic structure of monitoring setup #37hg3wd #861m549y1

This issue is a sub issue of #240+

It's probably a good idea to take a look at #240 first to get some context for this issue.

The goal here is to enable template selection for the Monitoring setup, building on the basic structure laid out in #247+.

Note: There is a bit more going on in figma concerning template selection (like disabling the pull down after selection and enabling the naming of the new SymptomCheck), but that will be the concern of another issue.

What is to be done

• Add an RccPullDownComponent (from #241 (closed)) to the page created in #247 RccMonitoringSetupPageComponent(may have a different name)
• Add templates as options
• When the users selects one of the templates, use a copy of the template as the new SymptomCheck

Templates

Templates are in fact just other SymptomChecks that already come wit the App. Take a look at OpenSessionStoreService.startNewSession() to see how to access them.

// Wait for SymptomCheckMetaStoreService to be ready, 
// to make sure, that all the data has been loaded from the storage:
SymptomCheckMetaStoreService.ready // Promise

// All stores holding SymptomChecks:
SymptomCheckMetaStoreService.stores

// All SymptomChecks accross all stores:
SymptomCheckMetaStoreService.items

// How to create a copy of a SymptomCheck:
const symptomCheckCopy : SymptomCheck = new SymptomCheck(someOtherSymptomCheck.config)

// or:
mySymptomCheck.config = someOtherSymptomCheck.config

On selection replace the SymptomCheck held by RccMonitoringSetupService (see #247) with a copy of the selected template: const copyOfSymptomCheck = new SymptomCheck(anotherSymptomCheck.config)

The existing templates are defined here at CuratedSymptomCheckStoreService

Challenge!

The translations of a the .labels of SymptomChecks used as templates (at CuratedSymptomCheckStoreService) is not working properly. The .labels of SymptomChecks were originally not intended to be translated (because it was either the name of the HCP or a custom line created by the HCP).

The SymptomChecks in the CuratedSymptomCheckStoreService are created ad hoc when the app starts. The label is created at the same time using the active language. But at that time the default language is 'en', because the app was not fast enough to load the language settings and switch to e.g. 'de'.

Ideas to get around this:

• await RccSettingsService.ready (a bit weird because the connection between translation and settings is not at all apparent, also later changes to the language will not effect the labels)
• subscribe to activeLanguageChange$ and change the labels on the fly.(probably the quickest way, but feels a bit too manual and not DRY, since this is the job of the translatePipe)
• allow translation strings in SymptomChecksLabels (i.e. we have to add | translate wherever we use the label of a SymptomCheck). Utilizing the labelTranslator introduced in !184 we could just use (mySymptomCheck | translate)

Requirements

• The pull down menu is present and looks like the layouts below (styles are part of #241 (closed))
• The options from the layouts are present
• Clicking the send button creates a QR code that transfers a SymptomCheck to the PAT with all the questions of the selected template (sending is part of #247)

Where to start

• #240+
• #247+
• online HCP study Version -> create new Session
• OpenSessionStoreService.startNewSession()

Layouts

Here's what the the final screens should look like; This issue is only concerned with the pull down for template selection.

figma

PDF with Annotations