(feat) Add form navigation links

openmrs · Jan 15, 2024 · 5b3606e · 5b3606e
1 parent 5b0965a
commit 5b3606e
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 91 deletions.
diff --git a/projects/ngx-formentry/src/components/ngx-tabset/components/tab.component.css b/projects/ngx-formentry/src/components/ngx-tabset/components/tab.component.css
@@ -2,6 +2,7 @@ h4 {
   padding-left: 1rem;
   margin-bottom: 0.5rem;
 }
+
 h4:after {
   content: '';
   display: block;

diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.html
@@ -16,6 +16,38 @@
         [labelMap]="labelMap"
       >
       </ofe-form-renderer>
+
+      <!-- Buttons for navigating between tabs -->
+      <div class="cds--btn-set button-set">
+        <button
+          class="cds--btn cds--btn--ghost nav-button"
+          [disabled]="i === 0"
+          type="button"
+        >
+          <a *ngIf="i > 0" (click)="tabSelected(i - 1)" class="nav-link">
+            <label>{{ 'previous' | translate }}</label>
+            <span class="nav-label">{{
+              node.question.questions[i - 1].label
+            }}</span>
+          </a>
+        </button>
+        <button
+          class="cds--btn cds--btn--ghost nav-button"
+          [disabled]="i === node.question.questions.length - 1"
+          type="button"
+        >
+          <a
+            *ngIf="i < node.question.questions.length - 1"
+            (click)="tabSelected(i + 1)"
+            class="nav-link"
+          >
+            <label>{{ 'next' | translate }}</label>
+            <span class="nav-label">{{
+              node.question.questions[i + 1].label
+            }}</span>
+          </a>
+        </button>
+      </div>
     </ofe-tab>
     <div *ngIf="showErrors()" class="container">
       <div

diff --git a/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss b/projects/ngx-formentry/src/form-entry/form-renderer/form-renderer.component.scss
@@ -1,8 +1,29 @@
-a {
-  color: white;
-  text-decoration: none;
-  font-size: 12px;
-  text-transform: uppercase;
+@use '@carbon/styles/scss/type';
+
+.button-set {
+  margin-top: 1rem;
+}
+
+.nav-button {
+  border-top: 1px solid #dde1e6;
+  height: 5rem;
+  max-width: 50%;
+  min-width: 50% !important;
+  padding-block: 0.25rem !important;
+}
+
+.nav-link {
+  min-width: 100%;
+  @include type.type-style('heading-03');
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  flex-direction: column;
+}
+
+.nav-label {
+  margin-top: 0.25rem;
+  @include type.type-style('label-01');
 }
 
 ul {

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -17,20 +17,20 @@
   "weeks": "Weeks",
   "selectWeeks": "Select Weeks",
   "enterMoreCharacters": "Please enter 2 or more characters",
-  "addSecond":"Add a second",
-  "minusSecond":"Minus a second",
-  "addMinute":"Add a minute",
-  "minusMinute":"Minus a minute",
-  "addHour":"Add a hour",
-  "minusHour":"Minus a hour",
-  "previousMonth":"Previous month",
-  "nextMonth":"Next month",
-  "previousYear":"Previous year",
-  "nextYear":"Next year",
-  "previous21Years":"Previous 21 years",
-  "next21Years":"Next 21 years",
-  "changeToMonthView":"Change to month view",
-  "chooseMonthAndYear":"Choose month and year",
+  "addSecond": "Add a second",
+  "minusSecond": "Minus a second",
+  "addMinute": "Add a minute",
+  "minusMinute": "Minus a minute",
+  "addHour": "Add a hour",
+  "minusHour": "Minus a hour",
+  "previousMonth": "Previous month",
+  "nextMonth": "Next month",
+  "previousYear": "Previous year",
+  "nextYear": "Next year",
+  "previous21Years": "Previous 21 years",
+  "next21Years": "Next 21 years",
+  "changeToMonthView": "Change to month view",
+  "chooseMonthAndYear": "Choose month and year",
   "aFewSecondsAgo": "a few seconds ago",
   "aMinuteAgo": "a minute ago",
   "minutesAgo": " minutes ago",
@@ -42,12 +42,14 @@
   "monthsAgo": " months ago",
   "aYearAgo": "a year ago",
   "yearsAgo": " years ago",
-  "cancel":"Cancel",
-  "set":"Set",
-  "from":"From",
-  "to":"To",
+  "cancel": "Cancel",
+  "set": "Set",
+  "from": "From",
+  "to": "To",
   "fix": "Fix",
   "clearEntry": "Are you sure you want to clear this entry?",
   "deleteEntry": "Are you sure you want to delete this item?",
-  "maxEntries": "Cannot have more than {max} entries"
+  "maxEntries": "Cannot have more than {max} entries",
+  "next": "Next",
+  "previous": "Previous"
 }
diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -49,5 +49,7 @@
   "fix": "Corriger",
   "clearEntry": "Êtes-vous sûr(e) de vouloir effacer cette entrée ?",
   "deleteEntry": "Êtes-vous sûr(e) de vouloir supprimer cet élément ?",
-  "maxEntries":"Vous ne pouvez pas avoir plus de {max} entrées"
+  "maxEntries": "Vous ne pouvez pas avoir plus de {max} entrées",
+  "next": "Suivant",
+  "previous": "Précédent"
 }
diff --git a/src/translations/km.json b/src/translations/km.json
@@ -1,67 +1,68 @@
 {
-    "aDayAgo": "មួយថ្ងៃមុន",
-    "aFewSecondsAgo": "ប៉ុន្មានវិនាទីមុន",
-    "aMinuteAgo": "មួយនាទីមុន",
-    "aMonthAgo": "មួយខែមុន",
-    "aYearAgo": "មួយឆ្នាំមុន",
-    "add": "បន្ថែម",
-    "addHour": "បន្ថែមមួយម៉ោង",
-    "addMinute": "បន្ថែមមួយនាទី",
-    "addSecond": "បន្ថែមមួយវិនាទី",
-    "anHourAgo": "មួយម៉ោងមុន",
-    "cancel": "បោះបង់",
-    "changeToMonthView": "ប្តូរទម្រង់ទៅជាខែ",
-    "chooseMonthAndYear": "ជ្រើសរើសខែ និងឆ្នាំ",
-    "clearEntry": "តើអ្នកពិតជាចង់សម្អាតធាតុនេះ?",
-    "closeThisPanel": "បិទប្រអប់នេះ",
-    "componentLoadingFailed": "ការចម្លងទិន្នន័យបរាជ័យ...",
-    "daysAgo": " ថ្ងៃមុន",
-    "deleteEntry": "តើអ្នកពិតជាចង់លុបធាតុនេះទេ?",
-    "discardButton": "បោះបង់",
-    "enterMoreCharacters": "សូមបញ្ចូលតួអក្សរ ២ ឬច្រើន។",
-    "errorFetchingFormData": "ការទាញយកទិន្នន័យពីទម្រង់មិនដំណើរការ។ ព័ត៌មានលម្អិត៖ {detail}",
-    "errorLoadingForm": "ទម្រង់ចម្លងទិន្នន័យមិនដំណើរការ",
-    "errorWithForm": "ទម្រង់នេះមិនដំណើរការ",
-    "fix": "ជួសជុល",
-    "formSubmissionFailed": "ការបញ្ជូនទម្រង់ទិន្នន័យមិនដំណើរការ។ បញ្ហាមិនដំណើរការ៖ {error}",
-    "formSubmittedSuccessfully": "Tទម្រង់ទិន្នន័យបានបញ្ជូនដោយជោគជ័យ",
-    "from": "ពី",
-    "futureDateRestriction": "មិនអនុញ្ញាតិឱ្យបញ្ចូលកាលបរិច្ឆេទអនាគត!",
-    "hoursAgo": " ច្រើនម៉ោងកន្លងទៅ",
-    "invalidDate": "កាលបរិច្ឆេទដែលបំពេញមិនត្រឹមត្រូវ!",
-    "loading": "កំពុងចម្លង...",
-    "loadingComponent": "កំពុងចម្លងទិន្នន័យ...",
-    "max": "តម្លៃអតិបរមាគួរតែមាន {max}",
-    "maxDate": "កាលបរិច្ឆេទអតិបរមាគួរតែមាន {maxDate}",
-    "maxEntries": "មិនអាចមានធាតុច្រើនជាង {max} ទេ",
-    "maxLength": "ចំនួនអក្សរអតិបរមាគួរតែមាន {maxLength}",
-    "min": "តម្លៃអប្បបរមាគួរតែមាន {min}",
-    "minDate": "កាលបរិច្ឆេទអប្បបរមាគួរតែមាន {minDate}",
-    "minLength": "ចំនួនអក្សរអប្បបរមាគួរតែមាន {minLength}",
-    "minusHour": "ដកមួយម៉ោង",
-    "minusMinute": "ដកមួយនាទី",
-    "minusSecond": "ដកមួយវិនាទី",
-    "minutesAgo": " ប៉ុន្មាននាទីមុន",
-    "monthsAgo": " ច្រើនខែកន្លងមក",
-    "next21Years": "២១ ឆ្នាំក្រោយ",
-    "nextMonth": "ខែក្រោយ",
-    "nextYear": "ឆ្នាំក្រោយ",
-    "patientIdentifierDuplication": "ស្ទួនលេខកូដអត្តសញ្ញាណអ្នកជំងឺ",
-    "patientIdentifierDuplicationDescription": "លេខកូដអត្តសញ្ញាណដែលបានបញ្ចូល សម្រាប់អ្នកជំងឺមានរួចហើយ។ សូមពិនិត្យមើលលេខកូដអត្តសញ្ញាណ ហើយព្យាយាមម្តងទៀត",
-    "previous21Years": "២១ ឆ្នាំមុន",
-    "previousMonth": "ខែមុន",
-    "previousValue": "តម្លៃពីមុន",
-    "previousYear": "ឆ្នាំមុន",
-    "remove": "ដកចេញ",
-    "requiredField": "ប្រអប់នេះត្រូវតែបំពេញ!",
-    "saveAndCloseButton": "រក្សាទុក និងបិទ",
-    "selectWeeks": "ជ្រើសរើសសប្តាហ៍",
-    "set": "កំណត់",
-    "submitting": "បញ្ជូន",
-    "to": "ទៅ",
-    "tryOpeningAnotherForm": "ព្យាយាមបើកទម្រង់ផ្សេងទៀត",
-    "useValue": "ប្រើតម្លៃ",
-    "weeks": "សប្តាហ៍",
-    "yearsAgo": " ឆ្នាំមុន"
-  }
-
+  "aDayAgo": "មួយថ្ងៃមុន",
+  "aFewSecondsAgo": "ប៉ុន្មានវិនាទីមុន",
+  "aMinuteAgo": "មួយនាទីមុន",
+  "aMonthAgo": "មួយខែមុន",
+  "aYearAgo": "មួយឆ្នាំមុន",
+  "add": "បន្ថែម",
+  "addHour": "បន្ថែមមួយម៉ោង",
+  "addMinute": "បន្ថែមមួយនាទី",
+  "addSecond": "បន្ថែមមួយវិនាទី",
+  "anHourAgo": "មួយម៉ោងមុន",
+  "cancel": "បោះបង់",
+  "changeToMonthView": "ប្តូរទម្រង់ទៅជាខែ",
+  "chooseMonthAndYear": "ជ្រើសរើសខែ និងឆ្នាំ",
+  "clearEntry": "តើអ្នកពិតជាចង់សម្អាតធាតុនេះ?",
+  "closeThisPanel": "បិទប្រអប់នេះ",
+  "componentLoadingFailed": "ការចម្លងទិន្នន័យបរាជ័យ...",
+  "daysAgo": " ថ្ងៃមុន",
+  "deleteEntry": "តើអ្នកពិតជាចង់លុបធាតុនេះទេ?",
+  "discardButton": "បោះបង់",
+  "enterMoreCharacters": "សូមបញ្ចូលតួអក្សរ ២ ឬច្រើន។",
+  "errorFetchingFormData": "ការទាញយកទិន្នន័យពីទម្រង់មិនដំណើរការ។ ព័ត៌មានលម្អិត៖ {detail}",
+  "errorLoadingForm": "ទម្រង់ចម្លងទិន្នន័យមិនដំណើរការ",
+  "errorWithForm": "ទម្រង់នេះមិនដំណើរការ",
+  "fix": "ជួសជុល",
+  "formSubmissionFailed": "ការបញ្ជូនទម្រង់ទិន្នន័យមិនដំណើរការ។ បញ្ហាមិនដំណើរការ៖ {error}",
+  "formSubmittedSuccessfully": "Tទម្រង់ទិន្នន័យបានបញ្ជូនដោយជោគជ័យ",
+  "from": "ពី",
+  "futureDateRestriction": "មិនអនុញ្ញាតិឱ្យបញ្ចូលកាលបរិច្ឆេទអនាគត!",
+  "hoursAgo": " ច្រើនម៉ោងកន្លងទៅ",
+  "invalidDate": "កាលបរិច្ឆេទដែលបំពេញមិនត្រឹមត្រូវ!",
+  "loading": "កំពុងចម្លង...",
+  "loadingComponent": "កំពុងចម្លងទិន្នន័យ...",
+  "max": "តម្លៃអតិបរមាគួរតែមាន {max}",
+  "maxDate": "កាលបរិច្ឆេទអតិបរមាគួរតែមាន {maxDate}",
+  "maxEntries": "មិនអាចមានធាតុច្រើនជាង {max} ទេ",
+  "maxLength": "ចំនួនអក្សរអតិបរមាគួរតែមាន {maxLength}",
+  "min": "តម្លៃអប្បបរមាគួរតែមាន {min}",
+  "minDate": "កាលបរិច្ឆេទអប្បបរមាគួរតែមាន {minDate}",
+  "minLength": "ចំនួនអក្សរអប្បបរមាគួរតែមាន {minLength}",
+  "minusHour": "ដកមួយម៉ោង",
+  "minusMinute": "ដកមួយនាទី",
+  "minusSecond": "ដកមួយវិនាទី",
+  "minutesAgo": " ប៉ុន្មាននាទីមុន",
+  "monthsAgo": " ច្រើនខែកន្លងមក",
+  "next": "បន្ត",
+  "next21Years": "២១ ឆ្នាំក្រោយ",
+  "nextMonth": "ខែក្រោយ",
+  "nextYear": "ឆ្នាំក្រោយ",
+  "patientIdentifierDuplication": "ស្ទួនលេខកូដអត្តសញ្ញាណអ្នកជំងឺ",
+  "patientIdentifierDuplicationDescription": "លេខកូដអត្តសញ្ញាណដែលបានបញ្ចូល សម្រាប់អ្នកជំងឺមានរួចហើយ។ សូមពិនិត្យមើលលេខកូដអត្តសញ្ញាណ ហើយព្យាយាមម្តងទៀត",
+  "previous": "មុន",
+  "previous21Years": "២១ ឆ្នាំមុន",
+  "previousMonth": "ខែមុន",
+  "previousValue": "តម្លៃពីមុន",
+  "previousYear": "ឆ្នាំមុន",
+  "remove": "ដកចេញ",
+  "requiredField": "ប្រអប់នេះត្រូវតែបំពេញ!",
+  "saveAndCloseButton": "រក្សាទុក និងបិទ",
+  "selectWeeks": "ជ្រើសរើសសប្តាហ៍",
+  "set": "កំណត់",
+  "submitting": "បញ្ជូន",
+  "to": "ទៅ",
+  "tryOpeningAnotherForm": "ព្យាយាមបើកទម្រង់ផ្សេងទៀត",
+  "useValue": "ប្រើតម្លៃ",
+  "weeks": "សប្តាហ៍",
+  "yearsAgo": " ឆ្នាំមុន"
+}