[#2024-03] Improve address selection UI #84
Conversation
Includes inline docs.
Builder is working great with the most recent config updates. Removing for now to simplify google maps / Places API debugging.
Signed-off-by: delano <delano@cpan.org>
Signed-off-by: delano <delano@cpan.org>
e.g. node_modules, .nuxt and other total rabbit hole Signed-off-by: delano <delano@cpan.org>
Signed-off-by: delano <delano@cpan.org>
See https://localhost/requests/vue3.
This time window.google is loaded implicitly by vue3-googl-maps.
See: https://localhost/requests/new Note: With the provider_location in schema commented out. Looking into this possible solution for Autocomplete error: https://discord.com/channels/787237947635793940/1192044403506814986
The `Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Autocomplete')` errors still apear but the LocationElement is suggestion as you type now! (At least in the stripped down, hard-coded example in new.vue itself.) 
* Removes autocomplete and places related code no longer needed * Switches to simpler text input for address instead * Sets googleMapsIsReady ref when maps API loads * Passes through googleMapsIsReady prop to form * Removes unused vueform examples The removed code and components were initially added while evaluating the Google Maps API but were not being used in the current flow. By cleaning these up, the page is simpler and avoids unnecessary API calls. The text input replaces the autocomplete LocationElement input from Vueform for now. The googleMapsIsReady ref is now set once the maps API Promise resolves. This is passed as a prop to FoodDeliveryForm to enable reintroducing maps functionality later on. Overall this commit refactors the code to be more purposeful and optimized for the current usage, while still allowing maps features to be rebuilt in the future.
- Make address a required field - Replace custom location fields with Google Places autocomplete - Add building type radiogroup - Set autocomplete to strict bounds within Canada - Request only necessary Google Maps libraries
|
PR Description updated to latest commit (9f85270) |
PR Review
|
![joshua-keaton[bot]](https://avatars.githubusercontent.com/in/857594?s=60&v=4){kind=small}
|
|
||
| import { Loader } from "@googlemaps/js-api-loader"; | ||
|
|
||
| const googleAPIKey = 'AIzaSyC_UvqrTnimc1Pc7LDYCqdqUiGMMUgMCWg' |
There was a problem hiding this comment.
Consider using environment variables for the Google Maps API key instead of hardcoding it. This enhances security and makes it easier to manage the key across different environments. [important]
There was a problem hiding this comment.
I want to check if there's a way to sign front-end Google API requests via the backend but it's low-prio. This is just how these keys are used. The security is in how they are restricted from the Credentials section of the GCP console.
|
|
||
| const loader = new Loader({ | ||
| apiKey: googleAPIKey, | ||
| version: 'beta', |
There was a problem hiding this comment.
Optimize the Google Maps API usage by requesting only the necessary libraries and using asynchronous loading to improve page load times and overall performance. [medium]
There was a problem hiding this comment.
You'll notice right below, we're only requesting the Places API : ]
| libraries: ['places'], | ||
| }); | ||
|
|
||
|
|
There was a problem hiding this comment.
Add a cleanup function to properly remove event listeners or other resources associated with the Google Maps API when the component is destroyed. This prevents potential memory leaks. [medium]
There was a problem hiding this comment.
Great idea. Thank you!
PR Agent Walkthrough🤖 Welcome to the PR Agent, an AI-powered tool for automated pull request analysis, feedback, suggestions and more. Here is a list of tools you can use to interact with the PR Agent:
(1) Note that each tool be triggered automatically when a new PR is opened, or called manually by commenting on a PR. (2) Tools marked with [*] require additional parameters to be passed. For example, to invoke the |
…4-03-22-new-tool-config
Signed-off-by: delano <delano@cpan.org>
- Update Django REST Framework to latest main branch - Update drf-registration to latest commit - Update drfpasswordless to latest commit - Update various dependency versions Minor formatting changes All details: The Django REST Framework is updated from the local Git repository to the main branch of the remote repository (git@github.com:delano/django-rest-framework.git@main). The drf-registration package is updated from the local Git repository to a specific commit (git@github.com:delano/drf-registration.git@b6b50ef151473385b2fdc1b3800773545d689e3c). The drfpasswordless package is updated from the local Git repository to a specific branch (git@github.com:delano/django-rest-framework-passwordless.git@delano/20240209-email-context). Dependency version updates: asgiref is updated from 3.7.2 to 3.8.1. coverage is updated from 7.4.3 to 7.4.4. django-unfold is updated from 0.20.5 to 0.21.1. markdown is updated from 3.5.2 to 3.6. packaging is updated from 23.2 to 24.0. phonenumbers is updated from 8.13.31 to 8.13.32. pre-commit is updated from 3.6.2 to 3.7.0. pytest is updated from 8.0.2 to 8.1.1. referencing is updated from 0.33.0 to 0.34.0. traitlets is updated from 5.14.1 to 5.14.2. wheel is updated from 0.42.0 to 0.43.0. These changes are likely to update Django REST Framework and its related dependencies to their latest versions, as well as update other dependencies to their latest compatible versions.
User description
Type
enhancement, documentation, other
Description
Changes walkthrough
6 files
FoodDeliveryForm.vue
Refactor Food Delivery Form with Google Places Integrationapps/ui/components/requests/FoodDeliveryForm.vue
googleMapsIsReadyprop to handle Google Maps API readiness.for clarity.
interactive_addressfield using Google Places autocomplete.elements to the bottom.
new.vue
Integrate Google Maps Places API in New Request Formapps/ui/pages/requests/new.vue
autocomplete.
interactive_addressand changedpreferred contact method to "Email".
loco.vue
Add New Location-Based Search Form Componentapps/ui/pages/requests/loco.vue
search functionality.
vue3.vue
Example Google Maps Integration with Population Circlesapps/ui/pages/requests/vue3.vue
populations.
app.vue
Prepare App Component for Google Maps Integrationapps/ui/app.vue
index.d.ts
Update TypeScript Definitions for Google Maps Integrationapps/ui/types/index.d.ts
FoodDeliveryFormStateinterface.1 files
dashboard.vue
Format Adjustment in Dashboard Layoutapps/ui/layouts/dashboard.vue
6 files
tailwind.config.ts
Update Tailwind Configurationapps/ui/tailwind.config.ts
vueform.config.ts
Comment Out Vueform Builder Plugin Importapps/ui/vueform.config.ts
nuxt.config.ts
Update Nuxt Configurationapps/ui/nuxt.config.ts
.changie.yaml
Add Changie Configuration for Changelog Management.changie.yaml
.continuerc.json
Configure Custom Command for Continuer.continuerc.json
.continueignore
Define Ignore Patterns for Continuer.continueignore
1 files
package.json
Update Package Dependenciesapps/ui/package.json
vue3-google-mappackage.@types/google.mapsfor TypeScript support.2 files
CHANGELOG.md
Initialize Changelog FileCHANGELOG.md
header.tpl.md
Add Changelog Header Template.changes/header.tpl.md