AppShell Class Reference

Top-level WebComponent which has auth sidebar, search box, and form. More...

Inheritance diagram for AppShell:

Detailed Description

Top-level WebComponent which has auth sidebar, search box, and form.

Properties on this component are used to specify configuration values such as for Google Spreadsheet / Google Drive settings, as well as endpoint URLs.

Field descriptions are loaded dynamically via a Google Apps Script handler which lists the Google Spreadsheet Users sheet columns and validations, and returns a JSON description of metadata for all fields. The fields metadata is provided to the <view-user-form> as an input property.

Public Member Functions
	constructor ()
	render ()
	LitElement lifecycle hook. Re-rendered after any update(). More...
async	updated (changedProperties)
	LitElement lifecycle hook. Called whenever the element's DOM has been updated and rendered. More...
	firstUpdated (changedProperties)
	LitElement lifecycle hook. Called after the element's DOM has been updated the first time, immediately before updated() is called. More...
	handleActivityCallback (data)
	displayDialog (dialogMetadata)
	Update dialog metadata, and open a popup dialog immediately. More...
	populateAuthTokens ()
	Fetch a new OAuth token, valid for 1 hour. More...
async	fetchUserFields ()
	Fetch and parse fields JSON from fieldsUrl (using user's OAuth accessToken). More...
	loginFirebase ()
	Use users OAuth idToken to login to Firebase directly. More...
	handleFirebaseAuthStateChange (user)
	Update currentUser from Firebase User object. More...
async	handleAuthSignIn ()
	Handle sign-in tasks. More...
	handleAuthSignOut ()
	Trigger Firebase sign-out. More...

Static Public Member Functions
static get	properties ()
	WebComponent properties that can be used as HTML attributes. More...

Member Function Documentation

constructor()

AppShell::constructor ( )

inline

Here is the call graph for this function:

displayDialog()

AppShell::displayDialog (   dialogMetadata )

inline

Update dialog metadata, and open a popup dialog immediately.

Parameters

dialogMetadata

Use the following fields for the dialog: {title, helpText, errorText}

fetchUserFields()

async AppShell::fetchUserFields ( )

inline

Fetch and parse fields JSON from fieldsUrl (using user's OAuth accessToken).

firstUpdated()

AppShell::firstUpdated (   changedProperties )

inline

LitElement lifecycle hook. Called after the element's DOM has been updated the first time, immediately before updated() is called.

Parameters

changedProperties

JS Map containing properties which have changed

Setup event listeners:

• When auth element sends currentUser event, handle sign-in/sign-out
• When form component sends reset-form event, clear the search bar
• When form component sends updated-user event, merge new user details into the search bar
• When search component sends search event:
• If item.type is "user":
• Clear Firebase Database machine Activity subscription, if currently running
• Reset form values
• Search for this user by row, and display the values
• If item.type is "machine":
• Unsubscribe from previous Firebase Database path: readers/{machineId}/latestUser
• Subscribe to Firebase Database path: readers/{machineId}/latestUser, if value is updated:

handleActivityCallback()

AppShell::handleActivityCallback (   data )

inline

• Clear form and update with Firebase values immediately
• Fetch full user row to update all form fields

handleAuthSignIn()

async AppShell::handleAuthSignIn ( )

inline

Handle sign-in tasks.

• Fetch new OAuth token (valid for 1 hour)
• Set a timer to renew OAuth token every 20 minutes
• Fetch Google Spreadsheet Users fields JSON
• Subscribe to Firebase Auth state changes to store logged-in user info

handleAuthSignOut()

AppShell::handleAuthSignOut ( )

inline

Trigger Firebase sign-out.

handleFirebaseAuthStateChange()

AppShell::handleFirebaseAuthStateChange (   user )

inline

Update currentUser from Firebase User object.

loginFirebase()

AppShell::loginFirebase ( )

inline

Use users OAuth idToken to login to Firebase directly.

populateAuthTokens()

AppShell::populateAuthTokens ( )

inline

Fetch a new OAuth token, valid for 1 hour.

• Extract the accessToken and idToken.
• Use the idToken to trigger loginFirebase().

properties()

static get AppShell::properties ( )

inlinestatic

WebComponent properties that can be used as HTML attributes.

Parameters

sheetId	Google Apps Sheet ID
machineId	Currently selected machine ID (e.g. Front Desk)
accessToken	OAuth access token (time-limited) for accessing Google Spreadsheets, Drive services on behalf of the logged-in user
idToken	OAuth OIDC ID token (time-limited) for accessing Firebase services on behalf of the logged-in user
oauthClientId	OAuth Application Client ID
oauthScopes	Space-separated list of OAuth scopes / permissions to be requested
fieldsUrl	URL for endpoint which returns Spreadsheet Columns as Fields JSON
nextMakerLabsIdUrl	URL for endpoint which returns next MakerLabs ID (ML___)
fields	Form fields JSON (obtained by querying Users Sheet Columns)
userName	User name of currently selected user
usersSearchColumns	Comma-separated list of Users sheet column letters needed for search
defaultPhotoUrl	Default URL for placeholder image to use for Maker without a profile image
profilePhotosFolderId	Google Drive Folder ID to be used as the parent for uploaded images (defaults to "root")
query	Optional user name to load into form immediately upon loading page
emptyImageData	Default image data to display if no image data is provided (a blank PNG)
dialogMetadata	Optional object describing dialog popup which should be shown (if any)

render()

AppShell::render ( )

inline

LitElement lifecycle hook. Re-rendered after any update().

Returns

LitElement html`` literal, containing desired DOM state.

Here is the call graph for this function:

updated()

async AppShell::updated (   changedProperties )

inline

LitElement lifecycle hook. Called whenever the element's DOM has been updated and rendered.

Parameters

changedProperties

JS Map containing properties which have changed

If the fields property has changed and is non-empty:

• If initial search query was supplied (e.g. in the URL), fetch initial form data by Name or MakerLabs ID
• Query all machines, use as the top entries in the search bar
• Query all users and add to the search bar

---

The documentation for this class was generated from the following file:

• webcomponents/src/app-shell.js