Merge pull request #61 from molit-institute/fix-summary-buttons

fix summary buttons
molit-institute · Nov 24, 2021 · f9a4fe9 · f9a4fe9
2 parents 1c2c69f + e37e7a2
commit f9a4fe9
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@molit/questionnaire-renderer",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "description": "Stencil Component for questionnaire-renderer",
   "main": "dist/index.cjs.js",

diff --git a/src/components/questionnaire-renderer/questionnaire-renderer.tsx b/src/components/questionnaire-renderer/questionnaire-renderer.tsx
@@ -629,7 +629,7 @@ export class QuestionnaireRenderer {
    */
   async filterItemList() {
     let newList = [];
-    if (this.currentQuestionnaireResponse && this.questionnaire) {
+    if (this.currentQuestionnaireResponse && this.currentQuestionnaire) {
       newList = await questionnaireController.handleEnableWhen(this.currentQuestionnaireResponse, this.currentQuestionnaire.item);
     }
     this.filteredItemList = newList;

diff --git a/src/components/questionnaire-summary/questionnaire-summary.tsx b/src/components/questionnaire-summary/questionnaire-summary.tsx
@@ -349,7 +349,7 @@ export class QuestionnaireSummary {
             </div>
           )}
         </div>
-        <div class="qr-summary-buttonContainer">
+        <div class="qr-summary-buttonContainer" v-if="editable">
           <button type="button" class="btn button btn-outline-primary btn-lg qr-button-outline-primary" onClick={() => this.returnToQuestionnaire()}>
             {this.strings.back}
           </button>

diff --git a/src/components/questionnaire/stepper-questionnaire/stepper-questionnaire.css b/src/components/questionnaire/stepper-questionnaire/stepper-questionnaire.css
@@ -7,6 +7,9 @@
   margin-top: -4px;
   color: #6a6a6a;
 }
+.qr-question-hidden {
+  visibility: hidden;
+}
 .center-vertical {
   flex: 1;
   display: flex;

diff --git a/src/components/questionnaire/stepper-questionnaire/stepper-questionnaire.tsx b/src/components/questionnaire/stepper-questionnaire/stepper-questionnaire.tsx
@@ -225,13 +225,13 @@ export class StepperQuestionnaire {
     } else if (this.count === this.filteredItemList.length - 1 && !this.disabled && !this.editMode) {
       if (!this.enableSummary) {
         this.finish.emit('finish');
-      }else{
+      } else {
         this.summary.emit('summary');
       }
     } else if (this.startCount !== null && this.editMode) {
       if (!this.enableSummary) {
         this.finish.emit('finish');
-      }else{
+      } else {
         this.summary.emit('summary');
       }
     }
@@ -278,6 +278,12 @@ export class StepperQuestionnaire {
       }
     }
   }
+  /**
+   *
+   */
+  isGroupQuestion() {
+    return this.filteredItemList[this.count].type === "group";
+  }
 
   /* Lifecycle Methods */
   componentDidUpdate() {
@@ -327,11 +333,18 @@ export class StepperQuestionnaire {
           <div class="qr-stepperQuestionnaire-progress-container">
             {/* PROGRESS */}
             <div class="progress qr-stepperQuestionnaire-progress">
-              <div class="progress-bar qr-stepperQuestionnaire-progress-progressBar" role="progressbar" aria-valuenow={this.questionCount} aria-valuemin="1" aria-valuemax={this.numberOfQuestions()} style={{ width: (this.questionCount / this.numberOfQuestions()) * 100 + '%' }}></div>
+              <div
+                class="progress-bar qr-stepperQuestionnaire-progress-progressBar"
+                role="progressbar"
+                aria-valuenow={this.questionCount}
+                aria-valuemin="1"
+                aria-valuemax={this.numberOfQuestions()}
+                style={{ width: (this.questionCount / this.numberOfQuestions()) * 100 + '%' }}
+              ></div>
             </div>
             {/* Progress Counter */}
             {this.strings ? (
-              <div class="progress-counter qr-stepperQuestionnaire-title">
+              <div class={this.isGroupQuestion() ? 'qr-question-hidden progress-counter qr-stepperQuestionnaire-title' : 'progress-counter qr-stepperQuestionnaire-title'}>
                 <span style={{ color: this.primary }}>
                   {this.strings.question} {this.questionCount} &nbsp;
                 </span>