Adapt mobile code to ionic 7 (#581)

* Mobile app: Create ionic5 templates duplicating latest * Mobile app: Remove ionic3 templates * Mobile app: Update questions templates to Ionic 7 * Mobile app: Stop using deprecated module-description
PoetOS · Aug 27, 2024 · 154d3ff · 154d3ff
1 parent 852486f
commit 154d3ff
Show file tree

Hide file tree

Showing 19 changed files with 230 additions and 185 deletions.
diff --git a/classes/output/mobile.php b/classes/output/mobile.php
@@ -40,7 +40,7 @@ public static function mobile_view_activity($args) {
 
         $args = (object) $args;
 
-        $versionname = $args->appversioncode >= 3950 ? 'latest' : 'ionic3';
+        $versionname = $args->appversioncode >= 44000 ? 'latest' : 'ionic5';
         $cmid = $args->cmid;
         $rid = isset($args->rid) ? $args->rid : 0;
         $action = isset($args->action) ? $args->action : 'index';

diff --git a/...l/mobile/ionic3/boolean_question.mustache → ...l/mobile/ionic5/boolean_question.mustache b/...l/mobile/ionic3/boolean_question.mustache → ...l/mobile/ionic5/boolean_question.mustache
@@ -43,11 +43,11 @@
     }
 }}
 {{=<% %>=}}
-<ion-list radio-group [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
+<ion-radio-group [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
     <%#choices%>
-    <ion-item>
+    <ion-item class="ion-text-wrap">
         <ion-label><core-format-text text="<%content%>"></core-format-text></ion-label>
-        <ion-radio<%#completed%> disabled="true"<%#value%> checked="true"<%/value%><%/completed%> value="<%id%>"></ion-radio>
+        <ion-radio slot="end"<%#completed%> disabled="true"<%#value%> checked="true"<%/value%><%/completed%> [value]="<%id%>"></ion-radio>
     </ion-item>
     <%/choices%>
-</ion-list>
+</ion-radio-group>
diff --git a/.../mobile/ionic3/checkbox_question.mustache → .../mobile/ionic5/checkbox_question.mustache b/.../mobile/ionic3/checkbox_question.mustache → .../mobile/ionic5/checkbox_question.mustache
@@ -44,27 +44,19 @@
     }
 }}
 {{=<% %>=}}
-<ion-list radio-group>
+<ion-list>
     <%#choices%>
-    <ion-grid no-padding>
-        <ion-row>
-            <ion-col>
-                <ion-item>
-                    <ion-label><core-format-text text="<%content%>"></core-format-text></ion-label>
-                    <ion-checkbox <%#value%> checked="true"<%/value%> value="<%id%>"
-                    <%#completed%> disabled="true"<%/completed%>
-                    [(ngModel)]="CONTENT_OTHERDATA.<%choicefieldkey%>"></ion-checkbox>
-                </ion-item>
-            </ion-col>
-            <%#otherchoicekey%>
-            <ion-col>
-                <ion-item>
-                    <ion-input placeholder="Enter: " [(ngModel)]="CONTENT_OTHERDATA.<%otherchoicekey%>"
-                    <%#completed%> disabled="true"<%/completed%>></ion-input>
-                </ion-item>
-            </ion-col>
-            <%/otherchoicekey%>
-        </ion-row>
-    </ion-grid>
+        <ion-item>
+            <ion-label><core-format-text text="<%content%>"></core-format-text></ion-label>
+            <ion-checkbox <%#value%> checked="true"<%/value%> value="<%id%>"
+            <%#completed%> disabled="true"<%/completed%>
+            [(ngModel)]="CONTENT_OTHERDATA.<%choicefieldkey%>"></ion-checkbox>
+        </ion-item>
+        <%#otherchoicekey%>
+            <ion-item>
+                <ion-input placeholder="Enter: " [(ngModel)]="CONTENT_OTHERDATA.<%otherchoicekey%>"
+                <%#completed%> disabled="true"<%/completed%>></ion-input>
+            </ion-item>
+        <%/otherchoicekey%>
     <%/choices%>
 </ion-list>
diff --git a/...ocal/mobile/ionic3/date_question.mustache → ...ocal/mobile/ionic5/date_question.mustache b/...ocal/mobile/ionic3/date_question.mustache → ...ocal/mobile/ionic5/date_question.mustache
@@ -31,10 +31,12 @@
 }}
 {{=<% %>=}}
 <ion-item>
+    <ion-label>
+        <%#completed%>
+        <core-format-text text="{{ CONTENT_OTHERDATA.<%fieldkey%> }}"></core-format-text>
+        <%/completed%>
+    </ion-label>
     <%^completed%>
     <ion-datetime displayFormat="DD/MM/YYYY" max="2100-12-31" [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>"></ion-datetime>
     <%/completed%>
-    <%#completed%>
-    <ion-note><core-format-text text="{{ CONTENT_OTHERDATA.<%fieldkey%> }}"></core-format-text></ion-note>
-    <%/completed%>
 </ion-item>
diff --git a/...al/mobile/ionic3/main_index_page.mustache → ...al/mobile/ionic5/main_index_page.mustache b/...al/mobile/ionic3/main_index_page.mustache → ...al/mobile/ionic5/main_index_page.mustache
@@ -92,16 +92,16 @@
     <ion-card>
         <ion-card-content>
             <%#resume%>
-            <button ion-button core-site-plugins-new-content component="mod_questionnaire" method="mobile_view_activity"
-                    [args]="{cmid: <%cmid%>, action: 'resume'}">
+            <ion-button expand="block" core-site-plugins-new-content component="mod_questionnaire"
+                    method="mobile_view_activity" [args]="{cmid: <%cmid%>, action: 'resume'}">
                 {{ 'plugin.mod_questionnaire.resumesurvey' | translate }}
-            </button>
+            </ion-button>
             <%/resume%>
             <%^resume%>
-            <button ion-button core-site-plugins-new-content component="mod_questionnaire" method="mobile_view_activity"
-                    [args]="{cmid: <%cmid%>, action: 'respond'}">
+            <ion-button expand="block" core-site-plugins-new-content component="mod_questionnaire"
+                    method="mobile_view_activity" [args]="{cmid: <%cmid%>, action: 'respond'}">
                 {{ 'plugin.mod_questionnaire.answerquestions' | translate }}
-            </button>
+            </ion-button>
             <%/resume%>
         </ion-card-content>
     </ion-card>
@@ -110,10 +110,12 @@
     <ion-card>
         <ion-card-content>
             <%#submissions%>
-            <a ion-item core-site-plugins-new-content component="mod_questionnaire" method="mobile_view_activity"
+            <ion-item button core-site-plugins-new-content component="mod_questionnaire" method="mobile_view_activity"
                 [args]="{cmid: <%cmid%>, action: 'review', submissionid: <%submissionid%>}">
-                {{ 'plugin.mod_questionnaire.submitted' | translate }} <%submissiondate%>
-            </a>
+                <ion-label>
+                    {{ 'plugin.mod_questionnaire.submitted' | translate }} <%submissiondate%>
+                </ion-label>
+            </ion-item>
             <%/submissions%>
         </ion-card-content>
     </ion-card>

diff --git a/...l/mobile/ionic3/numeric_question.mustache → ...l/mobile/ionic5/numeric_question.mustache b/...l/mobile/ionic3/numeric_question.mustache → ...l/mobile/ionic5/numeric_question.mustache
@@ -31,10 +31,12 @@
 }}
 {{=<% %>=}}
 <ion-item>
+    <ion-label>
+        <%#completed%>
+        <core-format-text text="{{ CONTENT_OTHERDATA.<%fieldkey%> }}"></core-format-text>
+        <%/completed%>
+    </ion-label>
     <%^completed%>
     <ion-input type="number" [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>"></ion-input>
     <%/completed%>
-    <%#completed%>
-    <ion-note><core-format-text text="{{ CONTENT_OTHERDATA.<%fieldkey%> }}"></core-format-text></ion-note>
-    <%/completed%>
 </ion-item>
diff --git a/...cal/mobile/ionic3/radio_question.mustache → ...cal/mobile/ionic5/radio_question.mustache b/...cal/mobile/ionic3/radio_question.mustache → ...cal/mobile/ionic5/radio_question.mustache
@@ -43,27 +43,19 @@
     }
 }}
 {{=<% %>=}}
-<ion-list radio-group [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
+<ion-radio-group [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
     <%#choices%>
-    <ion-grid no-padding>
-        <ion-row>
-            <ion-col>
-                <ion-item>
-                    <ion-label><core-format-text text="<%content%>"></core-format-text></ion-label>
-                    <ion-radio<%#value%> checked="true"<%/value%>
-                    value="<%id%>"
-                    <%#completed%> disabled="true"<%/completed%>></ion-radio>
-                </ion-item>
-            </ion-col>
-            <%#otherchoicekey%>
-            <ion-col>
-                <ion-item>
-                    <ion-input placeholder="Enter: " [(ngModel)]="CONTENT_OTHERDATA.<%otherchoicekey%>"
-                    <%#completed%> disabled="true"<%/completed%>></ion-input>
-                </ion-item>
-            </ion-col>
-            <%/otherchoicekey%>
-        </ion-row>
-    </ion-grid>
+        <ion-item class="ion-text-wrap">
+            <ion-label><core-format-text text="<%content%>"></core-format-text></ion-label>
+            <ion-radio<%#value%> checked="true"<%/value%>
+            value="<%id%>"
+            <%#completed%> disabled="true"<%/completed%>></ion-radio>
+        </ion-item>
+        <%#otherchoicekey%>
+            <ion-item class="ion-text-wrap">
+                <ion-input placeholder="Enter: " [(ngModel)]="CONTENT_OTHERDATA.<%otherchoicekey%>"
+                <%#completed%> disabled="true"<%/completed%>></ion-input>
+            </ion-item>
+        <%/otherchoicekey%>
     <%/choices%>
-</ion-list>
+</ion-radio-group>
diff --git a/...ocal/mobile/ionic3/rate_question.mustache → ...ocal/mobile/ionic5/rate_question.mustache b/...ocal/mobile/ionic3/rate_question.mustache → ...ocal/mobile/ionic5/rate_question.mustache
@@ -60,7 +60,7 @@
 {{=<% %>=}}
 <ion-list>
     <ion-grid>
-        <ion-row justify-content-center align-items-center text-center>
+        <ion-row class="ion-align-items-center ion-justify-content-center ion-text-center">
             <%#choices.0%>
             <%#leftlabel%>
             <ion-col></ion-col>
@@ -84,33 +84,37 @@
         </ion-row>
         <%#choices%>
         <ion-row><ion-col>
-            <ion-list-header style="margin-bottom: 0; border-top-style: none;">
-                <core-format-text text="<%content%>"></core-format-text>
-                <ion-badge item-end>{{ CONTENT_OTHERDATA.<%fieldkey%> }}</ion-badge>
-            </ion-list-header>
+            <ion-item style="margin-bottom: 0; border-top-style: none;" class="ion-text-wrap" lines="none">
+                <ion-label>
+                    <core-format-text text="<%content%>"></core-format-text>
+                </ion-label>
+                <ion-badge slot="end">{{ CONTENT_OTHERDATA.<%fieldkey%> }}</ion-badge>
+            </ion-item>
         </ion-col></ion-row>
-        <ion-row radio-group [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>" justify-content-center align-items-center text-center>
-            <%#leftlabel%>
-            <ion-col>
-                <%leftlabel%>
-            </ion-col>
-            <%/leftlabel%>
-            <%#rates%>
-            <ion-col>
-                <ion-radio value="<%label%>" <%#completed%> disabled="true"<%/completed%>></ion-radio>
-            </ion-col>
-            <%/rates%>
-            <%#hasnacolumn%>
-            <ion-col>
-                <ion-radio value="<%value%>" <%#completed%> disabled="true"<%/completed%>></ion-radio>
-            </ion-col>
-            <%/hasnacolumn%>
-            <%#rightlabel%>
-            <ion-col>
-                <%rightlabel%>
-            </ion-col>
-            <%/rightlabel%>
-        </ion-row>
+        <ion-radio-group [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
+            <ion-row class="ion-align-items-center ion-justify-content-center ion-text-center">
+                <%#leftlabel%>
+                <ion-col>
+                    <%leftlabel%>
+                </ion-col>
+                <%/leftlabel%>
+                <%#rates%>
+                <ion-col>
+                    <ion-radio value="<%label%>" <%#completed%> disabled="true"<%/completed%>></ion-radio>
+                </ion-col>
+                <%/rates%>
+                <%#hasnacolumn%>
+                <ion-col>
+                    <ion-radio value="<%value%>" <%#completed%> disabled="true"<%/completed%>></ion-radio>
+                </ion-col>
+                <%/hasnacolumn%>
+                <%#rightlabel%>
+                <ion-col>
+                    <%rightlabel%>
+                </ion-col>
+                <%/rightlabel%>
+            </ion-row>
+        </ion-radio-group>
         <%/choices%>
     </ion-grid>
 </ion-list>
diff --git a/...al/mobile/ionic3/select_question.mustache → ...al/mobile/ionic5/select_question.mustache b/...al/mobile/ionic3/select_question.mustache → ...al/mobile/ionic5/select_question.mustache
@@ -28,13 +28,11 @@
         "fieldkey": 985,
         "choices": [
             {
-                "id": 200,
                 "content": "Red",
                 "completed": 0,
                 "value": 1
             },
             {
-                "id": 201,
                 "content": "Blue",
                 "completed": 0,
                 "value": 0
@@ -43,8 +41,11 @@
     }
 }}
 {{=<% %>=}}
-<ion-select [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
-    <%#choices%>
-    <ion-option<%#completed%> disabled="true"<%/completed%><%#value%> selected="true"<%/value%> value="<%id%>"><%content%></ion-option>
-    <%/choices%>
-</ion-select>
+<ion-item>
+    <ion-label></ion-label>
+    <ion-select [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
+        <%#choices%>
+        <ion-select-option<%#completed%> disabled="true"<%/completed%><%#value%> selected="true"<%/value%> value="<%id%>"><%content%></ion-select-option>
+        <%/choices%>
+    </ion-select>
+</ion-item>
diff --git a/...al/mobile/ionic3/slider_question.mustache → ...al/mobile/ionic5/slider_question.mustache b/...al/mobile/ionic3/slider_question.mustache → ...al/mobile/ionic5/slider_question.mustache
@@ -27,27 +27,31 @@
     {
         "fieldkey": 985,
         "extradata": {
-            "minrange" : 1,
-            "maxrange" : 10,
-            "startingvalue" : 5,
-            "stepvalue" : 1,
-            "leftlabel" : "left label",
-            "rightlabel" :  "right label",
+            "minrange" : 1
+            "maxrange" : 10
+            "startingvalue" : 5
+            "stepvalue" : 1
+            "leftlabel" : "left label"
+            "rightlabel" :  "right label"
             "centerlabel": "center label"
         },
-        "completed": 0
+         "completed": 0
     }
+
 }}
 {{=<% %>=}}
 <%#extradata%>
-<ion-item class="mod_questionnaire_slider">
-    <ion-range <%#completed%> disabled="true"<%/completed%>
-            min="<%extradata.minrange%>" max="<%extradata.maxrange%>"
-            pin="true" step="<%extradata.stepvalue%>"
-            [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
-        <ion-label range-left><%extradata.leftlabel%></ion-label>
-        <ion-label range-right><%extradata.rightlabel%></ion-label>
+<ion-item class="mod_questionnaire_slider" lines="none">
+    <ion-range
+    <%#completed%> disabled="true"<%/completed%>
+    min="<%extradata.minrange%>" max="<%extradata.maxrange%>"
+    pin="true" step="<%extradata.stepvalue%>"
+    [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>">
+    <ion-label slot="start"><%extradata.leftlabel%></ion-label>
+    <ion-label slot="end"><%extradata.rightlabel%></ion-label>
     </ion-range>
 </ion-item>
-<ion-label text-center><%extradata.centerlabel%></ion-label>
+<ion-label <%#completed%> class="disabled"<%/completed%>>
+    <core-format-text class="ion-text-center" text="<%extradata.centerlabel%>"></core-format-text>
+</ion-label>
 <%/extradata%>
diff --git a/...ocal/mobile/ionic3/text_question.mustache → ...ocal/mobile/ionic5/text_question.mustache b/...ocal/mobile/ionic3/text_question.mustache → ...ocal/mobile/ionic5/text_question.mustache
@@ -31,11 +31,13 @@
 }}
 {{=<% %>=}}
 <ion-item>
+    <ion-label>
+        <%#completed%>
+        <core-format-text text="{{ CONTENT_OTHERDATA.<%fieldkey%> }}"></core-format-text>
+        <%/completed%>
+    </ion-label>
     <%^completed%>
     <ion-textarea aria-multiline="true" [(ngModel)]="CONTENT_OTHERDATA.<%fieldkey%>"
                   core-auto-rows></ion-textarea>
     <%/completed%>
-    <%#completed%>
-    <ion-note><core-format-text text="{{ CONTENT_OTHERDATA.<%fieldkey%> }}"></core-format-text></ion-note>
-    <%/completed%>
 </ion-item>