part of #20 (Plugin'ification)

added two config options, one to set layoutMode to either standalone or plugin mode and another to set initialView to 'questionnaire' to directly start with the questionnaire mode
IPK-BIT · Feb 23, 2024 · dcdcb7c · dcdcb7c
1 parent 66832f6
commit dcdcb7c
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 18 deletions.
diff --git a/config/breedfides/wizard.config.js b/config/breedfides/wizard.config.js
@@ -1,5 +1,11 @@
 window.config = {
 
+    general: {
+        layoutMode: 'plugin', // standalone | plugin
+        initialView: 'questionnaire', // questionnaire
+        showQuestionnaireProgressBar: true,
+    },
+
     prefill: [
         {
             type: 'person',

diff --git a/config/breedfides/wizard.steps.config.js b/config/breedfides/wizard.steps.config.js
@@ -56,7 +56,7 @@ window.steps = [
         title: 'Please provide all Authors of your Dataset and define their Contribution.',
         fields: [
             {
-               // label: 'Project title',
+                label: 'Authors',
                 type: 'people',
                 isaMapping: {
                     entity: 'investigation',

diff --git a/config/miappe/wizard.config.js b/config/miappe/wizard.config.js
@@ -1,6 +1,8 @@
 window.config = {
 
     general: {
+        layoutMode: 'plugin', // standalone | plugin
+        initialView: 'questionnaire', // questionnaire
         showQuestionnaireProgressBar: true,
     },
 

diff --git a/src/App.svelte b/src/App.svelte
@@ -80,6 +80,17 @@ import { CLIENT_ID, CLIENT_SECRET, base_url, gitlab_repsonse } from '@/stores/gi
 
 let showJson = false;
 
+// FIXME: there is same duplicate code in InitView.svelte => needs centralization e.g. via EventBus
+import Schemas from './lib/schemas';
+if (config.general?.initialView === 'questionnaire') {
+    if (Object.keys($isaObj).length == 0) {
+        let emptyInvestigation = Schemas.getMiappeInvestigation(config.prefill);
+        $isaObj = emptyInvestigation;
+    }
+
+    $appstate = appstate.WIZARD;
+}
+
 partialview.subscribe($ => {
     if (typeof($.component) === 'function') {
         $appstate = appstate.LEVEL;
@@ -102,11 +113,13 @@ function showGui() {
     
     {:else}
     
-    <div class="content">
+    <div class="content" class:grid={config.general.layoutMode === 'standalone'}>
 
+        {#if config.general.layoutMode === 'standalone'}
         <div class="header">
             <Header />
         </div>
+       
         
         <div class="leftcol">
 
@@ -131,25 +144,30 @@ function showGui() {
             
 
         </div>
-
+        {/if}
+
         <div class="middlecol">
 
+        
+
             <div class="bbox">
             
-            {#if $appstate === appstate.FORM}
-            <Investigation bind:value={$isaObj} />
-            {:else if $appstate === appstate.WIZARD}
-            <GenericQuestionnaire on:closeWizard={() => {$appstate = appstate.FORM;}} />
-            {:else if $appstate === appstate.LEVEL}
-            <Forms />
-            {:else if $appstate === appstate.GUI}
-            <Gui />
-            {/if}
+                {#if $appstate === appstate.FORM}
+                <Investigation bind:value={$isaObj} />
+                {:else if $appstate === appstate.WIZARD}
+                <GenericQuestionnaire on:closeWizard={() => {$appstate = appstate.FORM;}} />
+                {:else if $appstate === appstate.LEVEL}
+                <Forms />
+                {:else if $appstate === appstate.GUI}
+                <Gui />
+                {/if}
 
             </div>
-
+        
+        
         </div>
             
+        {#if config.general.layoutMode === 'standalone'}
         <div class="rightcol">
             <ManualExplanation />
             <Explanation />
@@ -165,6 +183,8 @@ function showGui() {
             {/if}
         </div>
 
+        {/if}
+
     </div>
     {/if}
 
@@ -208,17 +228,24 @@ main {
     font-family: 'Roboto', sans-serif;
     height: 100vh;
 }
-.content {
+
+div.content {
+
+    padding: 0px 0px;
+    border: 0px solid blue;
+    min-height: 90vh;
+    height: 100vh;
+}
+
+div.content.grid {
     display: grid;
     grid-template-columns: 1fr 3fr 1fr;
     grid-template-rows: 60px auto;
     grid-column-gap: 0px;
     grid-row-gap: 0px;
-    padding: 0px 0px;
-    border: 0px solid blue;
-    min-height: 90vh;
-    height: 100vh;
 }
+
+
 .header {
     grid-area: 1 / 1 / 1 / 4;
     /* background: rgb(80, 80, 100); */