MOBILE-3514 choice: Show available spaces if enabled

scripts/langindex.json

@@ -463,6 +463,7 @@
   "addon.mod_choice.errorgetchoice": "local_moodlemobileapp",
   "addon.mod_choice.expired": "choice",
   "addon.mod_choice.full": "choice",
+  "addon.mod_choice.limita": "choice",
   "addon.mod_choice.modulenameplural": "choice",
   "addon.mod_choice.noresultsviewable": "choice",
   "addon.mod_choice.notopenyet": "choice",
@@ -476,6 +477,7 @@
   "addon.mod_choice.publishinfonever": "choice",
   "addon.mod_choice.removemychoice": "choice",
   "addon.mod_choice.responses": "choice",
+  "addon.mod_choice.responsesa": "choice",
   "addon.mod_choice.responsesresultgraphdescription": "local_moodlemobileapp",
   "addon.mod_choice.responsesresultgraphheader": "choice",
   "addon.mod_choice.resultsnotsynced": "local_moodlemobileapp",

src/addon/mod/choice/components/index/addon-mod-choice-index.html

@@ -43,13 +43,17 @@
     <ion-card *ngIf="options && options.length">
         <ng-container *ngIf="choice.allowmultiple">
             <ion-item text-wrap *ngFor="let option of options">
-                <ion-label><core-format-text [text]="option.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text> <span *ngIf="choice.limitanswers && option.countanswers >= option.maxanswers">{{ 'addon.mod_choice.full' | translate }}</span></ion-label>
+                <ion-label>
+                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
+                </ion-label>
                 <ion-checkbox item-end [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit"></ion-checkbox>
             </ion-item>
         </ng-container>
         <ng-container *ngIf="!choice.allowmultiple">
             <ion-item text-wrap *ngFor="let option of options" radio-group [(ngModel)]="selectedOption.id">
-                <ion-label><core-format-text [text]="option.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text> <span *ngIf="choice.limitanswers && option.countanswers >= option.maxanswers">{{ 'addon.mod_choice.full' | translate }}</span></ion-label>
+                <ion-label>
+                    <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}"></ng-container>
+                </ion-label>
                 <ion-radio color="primary" [value]="option.id" [disabled]="option.disabled || !canEdit"></ion-radio>
             </ion-item>
         </ng-container>
@@ -81,6 +85,7 @@
                         <ion-item-divider text-wrap>
                             <h2><core-format-text [text]="result.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text></h2>
                             <p>{{ 'addon.mod_choice.numberofuser' | translate }}: {{ result.numberofuser }} ({{ 'core.percentagenumber' | translate: {$a: result.percentageamountfixed} }})</p>
+                            <p *ngIf="choice.limitanswers && choice.showavailable">{{ 'addon.mod_choice.limita' | translate:{$a: result.maxanswer} }}</p>
                         </ion-item-divider>
                         <a ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseid" [userId]="user.userid" [title]="user.fullname" text-wrap>
                             <ion-avatar core-user-avatar [user]="user" item-start [courseId]="courseid"></ion-avatar>
@@ -95,3 +100,14 @@
         <p>{{ 'addon.mod_choice.noresultsviewable' | translate }}</p>
     </ion-card>
 </core-loading>
+
+<!-- Template to render a choice option label. -->
+<ng-template #optionLabelTemplate let-option="option">
+    <p>
+        <core-format-text [text]="option.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId"></core-format-text> <span *ngIf="choice.limitanswers && option.countanswers >= option.maxanswers">{{ 'addon.mod_choice.full' | translate }}</span>
+    </p>
+    <ng-container *ngIf="choice.limitanswers && choice.showavailable">
+        <p>{{ 'addon.mod_choice.responsesa' | translate:{$a: option.countanswers} }}</p>
+        <p>{{ 'addon.mod_choice.limita' | translate:{$a: option.maxanswers} }}</p>
+    </ng-container>
+</ng-template>

src/addon/mod/choice/lang/en.json

@@ -4,6 +4,7 @@
     "errorgetchoice": "Error getting choice data.",
     "expired": "This activity closed on {{$a}}.",
     "full": "(Full)",
+    "limita": "Limit: {{$a}}",
     "modulenameplural": "Choices",
     "noresultsviewable": "The results are not currently viewable.",
     "notopenyet": "This activity is not available until {{$a}}.",
@@ -17,6 +18,7 @@
     "publishinfonever": "The results of this activity will not be published after you answer.",
     "removemychoice": "Remove my choice",
     "responses": "Responses",
+    "responsesa": "Responses: {{$a}}",
     "responsesresultgraphdescription": "{{number}}% of the users chose the option: {{text}}.",
     "responsesresultgraphheader": "Graph display",
     "resultsnotsynced": "Your last response must be synchronised before it is included in the results.",

src/assets/lang/en.json

@@ -463,6 +463,7 @@
     "addon.mod_choice.errorgetchoice": "Error getting choice data.",
     "addon.mod_choice.expired": "This activity closed on {{$a}}.",
     "addon.mod_choice.full": "(Full)",
+    "addon.mod_choice.limita": "Limit: {{$a}}",
     "addon.mod_choice.modulenameplural": "Choices",
     "addon.mod_choice.noresultsviewable": "The results are not currently viewable.",
     "addon.mod_choice.notopenyet": "This activity is not available until {{$a}}.",
@@ -476,6 +477,7 @@
     "addon.mod_choice.publishinfonever": "The results of this activity will not be published after you answer.",
     "addon.mod_choice.removemychoice": "Remove my choice",
     "addon.mod_choice.responses": "Responses",
+    "addon.mod_choice.responsesa": "Responses: {{$a}}",
     "addon.mod_choice.responsesresultgraphdescription": "{{number}}% of the users chose the option: {{text}}.",
     "addon.mod_choice.responsesresultgraphheader": "Graph display",
     "addon.mod_choice.resultsnotsynced": "Your last response must be synchronised before it is included in the results.",