Skip to content

Ush 1445 - Phone Input Field (Mobile) #1192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: mobile-development
Choose a base branch
from
Open

Conversation

ushahidlee
Copy link
Contributor

@ushahidlee ushahidlee commented Aug 15, 2024

Issue:

Our users would like a nice field specific to the entry of phone numbers.

Solution:

This PR wraps a widely used Javascript phone input library, with a Typescript Angular component so as to work inside of our ionic mobile app.

IMPORTANT: This PR has been implemented BEFORE the associated backend ticket and cannot be tested on the system at large until the backend ticket has been committed. The testing plan below can be employed until that time.

Testing:

  1. Open the mobile app
  2. Add the deployment berlincalling.ushahidi.io
  3. Create a post using the "Basic Post" survey.
    (The last field in the survey is the mobile input field.)
  4. Create a post with a phone number.
  • Only numbers are accepted.
  • Number length is limited to country standard
  • Country code can be manually (using the dropdown) and automatically selected (by typing + and then the country phone prefix)
  1. Edit the post.
  • Number and Country are maintained.
  • Changes are applied.

@ushahidlee ushahidlee requested a review from Angamanga August 15, 2024 08:34
Copy link
Contributor

@Angamanga Angamanga left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works fine as far as I could test it 👍

@@ -69,7 +69,7 @@ <h2 class="task-label">{{ task.label }}</h2>
>
<!-- title, varchar -->
<ng-container
*ngIf="field.input === 'text' && (field.type === 'title' || field.type === 'varchar')"
*ngIf="field.input === 'text' && (field.type === 'title' || field.type === 'varchar') && field.label !== 'mobile_test'"
>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this for the temporary test-thing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah exactly. The new field will be a 'text' field in the backend, so its a very close simulation of end to end.

@tuxpiper
Copy link
Member

I’ve pulled it up to be based on the latest of mobile-development .

The only conflicts were with packages.json and -lock.json . Those files I overwrote with the latest of mobile-development, so they would need to be reviewed again here if changes need to be re-introduced.

@tuxpiper
Copy link
Member

Changes on package.json after the rebase:

diff --git a/package.json b/package.json
index afdb56558..f79238314 100644
--- a/package.json
+++ b/package.json
@@ -30,25 +30,26 @@
     "@angular/compiler": "~14.2.7",
     "@angular/core": "~14.2.7",
     "@angular/forms": "~14.2.7",
+    "@angular/material": "^14.2.7",
     "@angular/platform-browser": "~14.2.7",
     "@angular/platform-browser-dynamic": "~14.2.7",
     "@angular/router": "~14.2.7",
     "@asymmetrik/ngx-leaflet": "^14.0.1",
     "@asymmetrik/ngx-leaflet-markercluster": "^14.0.1",
-    "@capacitor-community/intercom": "^5.0.1",
-    "@capacitor/android": "^5.7.4",
-    "@capacitor/app": "^5.0.7",
-    "@capacitor/camera": "^5.0.9",
-    "@capacitor/cli": "^5.7.4",
-    "@capacitor/core": "^5.7.4",
-    "@capacitor/device": "^5.0.7",
-    "@capacitor/dialog": "^5.0.7",
-    "@capacitor/filesystem": "^5.2.1",
-    "@capacitor/geolocation": "^5.0.7",
-    "@capacitor/keyboard": "^5.0.8",
-    "@capacitor/network": "^5.0.7",
-    "@capacitor/share": "^5.0.7",
-    "@capacitor/status-bar": "^5.0.7",
+    "@capacitor-community/intercom": "^6.0.0",
+    "@capacitor/android": "^6.1.2",
+    "@capacitor/app": "^6.0.0",
+    "@capacitor/camera": "^6.0.2",
+    "@capacitor/cli": "^6.1.2",
+    "@capacitor/core": "^6.1.2",
+    "@capacitor/device": "^6.0.0",
+    "@capacitor/dialog": "^6.0.0",
+    "@capacitor/filesystem": "^6.0.0",
+    "@capacitor/geolocation": "^6.0.0",
+    "@capacitor/keyboard": "^6.0.1",
+    "@capacitor/network": "^6.0.1",
+    "@capacitor/share": "^6.0.1",
+    "@capacitor/status-bar": "^6.0.0",
     "@ionic/angular": "^7.1.1",
     "@ionic/pwa-elements": "^3.1.1",
     "@ionic/storage-angular": "^4.0.0",
@@ -60,16 +61,15 @@
     "@supy-io/ngx-intercom": "^14.2.12",
     "@swimlane/ngx-charts": "^20.1.2",
     "angular-google-tag-manager": "^1.6.1",
-    "capacitor-native-settings": "^5.0.1",
+    "capacitor-native-settings": "^6.0.1",
     "dayjs": "^1.11.7",
-    "intl-tel-input": "^23.8.1",
     "ion2-calendar": "^3.5.0",
     "ionicons": "^7.1.0",
     "leaflet": "^1.9.3",
     "leaflet-control-geocoder": "^2.4.0",
     "leaflet.markercluster": "^1.5.3",
     "leaflet.offline": "^3.0.0",
-    "libphonenumber-js": "^1.11.5",
+    "locale-codes": "^1.3.1",
     "lodash": "^4.17.21",
     "lottie-web": "^5.10.2",
     "masonry-layout": "^4.2.2",
@@ -78,7 +78,6 @@
     "ngx-custom-tour": "^1.1.2",
     "ngx-lottie": "^9.1.0",
     "ngx-masonry": "^14.0.1",
-    "ngx-mat-intl-tel-input": "^5.0.0",
     "ngx-pagination": "^6.0.3",
     "ngx-quill": "^19.0.1",
     "ngx-sharebuttons": "^11.0.0",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants