rtercias / foreign-field Goto Github PK

Starting Component: AddressCard

Using service workers, auto-update H2H status without having to refresh the page.

This involves calling the vuex action “address/fetchAddress”, and rendering the updated address data on the card via a service worker.

https://developers.google.com/web/fundamentals/primers/service-workers

https://jakearchibald.github.io/isserviceworkerready/

For non-active addresses, add a toggle button to “activate” the address. This should change the status to “Active”, and remove the corresponding “tag” in the notes field.

needs a corresponding tag... "moved"

The current NH status is seen next to the address. To remove the current status ("NH in the screenshot below), the user clicks on this icon.

We need to warn the user that they are about to remove the status before proceeding.

Use bootstrap's modal to open up a confirmation dialog box.

Allow "canWrite" users (see auth vuex module) to change the order of addresses.

Starting component: Territory.vue

1. add a drag-n-drop icon on Address Card visible only to "canWrite".
2. add drag-n-drop events to Address Card. Save the new position in the address' sort field.

https://drive.google.com/file/d/1nvKWCzB3xAYykE4L8zmYmMWRDqn8jniO/view

Similar to the google maps link, add a new whitepages link to the AddressCard.
The link should look like this:

https://www.whitepages.com/address/315-W-Palisade-Ave/Englewood-NJ

Starting component: new

Create a component listing all DNC address status across all territories. Each address on the list should have a link to the corresponding territory in which the inactive address can be found.

The link for Do Not Call list should be added on the Welcome screen.

The link should be made available only to user roles GO (group overseer) and SO (service overseer).

Starting component: Welcome

Sometimes users share a territory link with one another. Currently, that link is only available to the recipient via text message. When a user visits a territory link that's not checked out to them, we can save that link into their local storage.

Then, on the Welcome dashboard, we can display the links in a "Recently Visited" list.

"Recent" = 2 months long
Links older than 2 months can be dropped off the list.

Stories

1. Add Do Not Call button
2. Add graphql update query to remove address from territory
3. Add a log in activity logs with status = DNC
4. Notify service and group overseers

Dashboard for service overseer.

Add to the Welcome Dashboard page:

• summary of Available, Checked Out, Recently Worked, and All territories

  • clickable to go to existing lists

• S-13 page

  • fix the S-13 component so that it uses graphQL data instead of local json file

• count of addresses per territory

• most/least checked out territories

Add manifest file to the app

https://web.dev/add-manifest/

Follow the instructions on this link to convert the app to a progressive web app:

https://blog.heroku.com/how-to-make-progressive-web-app

Also see linked stories in this epic.

Starting component: new

This report should contain a list of administrative changes made to the territory in the past X days:

X = any given number of days

Addresses:

• addresses marked as Do Not Call
• addresses marked as NF
• addresses marked as "verify"
• all other tags added to an address
• any updates made to an address

Territories:

• checkouts
• check-ins
• new address added

Make this report available in Welcome component

• The new page should list a brief description of available actions on Foreign Field
• There should be a small icon link on the masthead

In the single Territory page, there's a "Reset" button, change the reset button behavior so that it also does a "check-in" of the territory.

Also, rename the button to "Check-in"

This applies to both H2H Activities panel and Address Tags panel.

Optimize addresses in a territory starting from the user's current location.
This is a temporary re-order and should not be saved in the database.

https://openrouteservice.org/dev/#/api-docs/optimization/post

Limitation:
Optimization (50 requests per day @10 requests per minute)

Starting Component: Territory.vue

By default, Territory.vue shows "Active" addresses only.

Add a toggle so that non-Active addresses can be viewed/editied.

The options can be Active, Do Not Calls, Not [Language]

This feature should only be available to the territory servant, group overseers, service overseers, and admin.

Bump up the app’s version number after code is pushed to master.

Use this library: https://github.com/release-it/release-it

In the single Territory view, add a toggle that switches between the current address list view and a map view.
Map view needs to be created using OpenStreetMaps (avoid Google as it is not free).

For non-touchscreens only, add a click event handler for the vertical ellipsis (three vertical dots) button.
This click handler should replicate the swipe-left action on handheld devices.

Design what offline mode could look like.

• how will authentication and authorization work?
• what functions should be available offline?
• what happens when app goes online?

Use service workers to handle offline mode actions.

https://developers.google.com/web/fundamentals/codelabs/offline

https://developers.google.com/web/fundamentals/primers/service-workers

https://jakearchibald.github.io/isserviceworkerready/

On the Masthead and on the Welcome dashboard, we need a quick nav to switch between territories.

Starting component: AddressForm

Wrap AddressForm inside a wizard form.

Wireframe:
https://www.draw.io/#G1i-W6x4fM1fCenLXyac1Xl-wo-a59fZ5w

Wizard Form #1 - Address Form

1. replace manual city/state/zip data entry with a call to an API that provides city/state/zip info
2. verify address is valid and get geocode (lat/lng) using google maps API
   At this point, if user is editing an existing address, allow them to Submit as is, or to Continue with next step.

Wizard Form #2 - Select territory workflow

1. Using Leaflet, plot current address on a map

   • https://leafletjs.com/examples.html
   • https://travishorn.com/interactive-maps-with-vue-leaflet-5430527353c8

2. Also plot nearby addresses as Territory clusters

   • https://github.com/Leaflet/Leaflet.markercluster
   • label each cluster as Territory name, along with count of addresses
   • add click event on each cluster - click to select the territory
   • calc distance for new address and first address of each territory (https://stackoverflow.com/a/18883819)
     https://www.npmjs.com/package/haversine-geolocation

3. Additionally, create a dropdown to manually select a territory

4. Submit the new address

Wizard Form #3 - Finalize

1. Show the new address
2. Show the selected territory
3. Recommend to re-optimize the territory with a link that redirects user to Optimize Territory workflow
   • https://app.zenhub.com/workspace/o/rtercias/foreign-field/issues/107
4. Don't recommend to re-optimize the territory if an existing address is updated but addr1, addr2, city, state, or zip code was not changed.

need a UI similar to Notes, but for each territory. The interface should be similary.

Starting component: Territory.vue

Create a new component similar to AddressCard that supports drag-n-drop. When the territory is in "optimize" or "manual sort" mode, render this new component.

Trigger "manual sort" via the menu. This trigger should only be available to the territory servant or admin.

Wireframe:
https://drive.google.com/file/d/1HHyQbEKh9Pb1oyLT7G-XzJ15ZnXHWuLk/view?usp=sharing

Check out:
https://github.com/SortableJS/Vue.Draggable

Provide the ability to add more user groups, and/or edit existing ones. It's time to create a Territory Groups table.'
Includes schema change: new table with group name, id, overseer

https://drive.google.com/file/d/1nvKWCzB3xAYykE4L8zmYmMWRDqn8jniO/view

https://drive.google.com/file/d/1nvKWCzB3xAYykE4L8zmYmMWRDqn8jniO/view

Here's a list of predefined Address tags/notes:

• day sleeper
• wife Filipina
• no trespassing
• beware of dog
• gated
• intercom

use 3rd party city/state/country api service

Design an icon for the app, and add different flavors needed for PWA.

https://vaadin.com/docs/v14/flow/pwa/tutorial-pwa-icons.html

https://drive.google.com/file/d/1nvKWCzB3xAYykE4L8zmYmMWRDqn8jniO/view