WebComponent which displays Users sheet columns as a dynamic form. More...

Inheritance diagram for ViewUserForm:

Detailed Description

WebComponent which displays Users sheet columns as a dynamic form.

Emits reset-form event when Add User button is clicked.
Emits updated-user event when a new or existing user is saved.

Google Spreadsheet data is accessed via two different APIs:

Google Sheets API is used for updates to Users sheet (inserting new rows and/or modifying data in existing rows)
Google Visualization API is used for queries to the spreadsheet data:
- updateFormFromMakerLabsId(): all columns for a row by MakerLabs ID
- handleUserNameChanged(): all columns for a row by Name
- updateFormFromMostRecentScan(): most recent Signed_In activity
- updateRecentTagIds(): most recent activity without a MakerLabs ID

Public Member Functions
	constructor ()

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

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

	renderSection (section)
	General method to render a collection of form fields in a "panel". More...

	renderField (field)
	General method to render any type of form field. More...

	renderChoiceRadioButton (choice)
	Render a choice name as a `<paper-radio-button>` More...

	renderChoiceItem (choice)
	Render a choice name as a `<paper-item>` More...

get	usersSheetName ()
	Get the Google Spreadsheet user sheet name. More...

get	usersSheetNumHeaders ()
	Get the Google Spreadsheet user sheet number of header rows. More...

get	activitySheetName ()
	Get the Google Spreadsheet activity sheet name. More...

get	activitySheetNumHeaders ()
	Get the Google Spreadsheet activity sheet number of header rows. More...

get	hiddenSectionNames ()
	Get the list of section titles which will skip display on the form. More...

get	usersRowColumn ()
	Get the column letter for the users sheet "Row" column. More...

get	usersNameColumn ()
	Get the column letter for the users sheet "Name" column. More...

get	usersEmailColumn ()
	Get the column letter for the users sheet "Email" column. More...

get	usersMakerLabsIdColumn ()
	Get the column letter for the users sheet "MakerLabs ID" column. More...

get	usersAlertsColumn ()
	Get the column letter for the users sheet "Alerts" column. More...

get	usersTagIdColumn ()
	Get the column letter for the users sheet "Tag ID" column. More...

get	activityTimestampColumn ()
	Get the column letter for the activity sheet "Timestamp" column. More...

get	activityMachineIdColumn ()
	Get the column letter for the activity sheet "Machine ID" column. More...

get	activityTypeColumn ()
	Get the column letter for the activity sheet "Activity Type" column. More...

get	activityTagIdColumn ()
	Get the column letter for the activity sheet "Tag ID" column. More...

get	activityMakerLabsIdColumn ()
	Get the column letter for the activity sheet "MakerLabs ID" column. More...

	sectionIsHidden (section)
	Check whether form field section should be hidden. More...

	fieldIsCheckboxType (field)
	Check whether form field should be rendered as a checkbox. More...

	fieldIsRadioGroupType (field)
	Check whether form field should be rendered as a radio group. More...

	fieldIsDropdownMenuType (field)
	Check whether form field should be rendered as a drop-down menu. More...

	fieldIsDatePickerType (field)
	Check whether form field should be rendered as a date-picker. More...

	fieldIsTextInputType (field)
	Check whether form field should be rendered as a text input. More...

	fieldIsAlertsType (field)
	Check whether form field should be rendered as a special-case "Alerts". More...

	fieldIsTagIdType (field)
	Check whether form field should be rendered as a special-case "Tag ID". More...

	fieldIsImageType (field)
	Check whether form field should be rendered as an image. More...

	usersColumnFromFieldTitle (prefixOrTitle, title)
	Determine column letter for column title (and optional section) More...

async	handleUserNameChanged (newValue, oldValue)
	Property change handler for `userName`. More...

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

async	updateFormFromMostRecentScan ()
	Dynamically update the form when users are signing in to the selected machine. More...

async	updateFormFromMakerLabsId (makerLabsId)
	Query for a specific `MakerLabs ID` and update the form with their details. More...

async	updateRecentTagIds ()
	Select the 5 most recently scanned `Tag IDs` in the last 2 minutes, update the `Tag ID` drop-down. More...

	getValuesFromDatatable (datatable, limit)
	Convert Google Spreadsheets Query result into JSON array. More...

	getFirstRowValuesFromDatatable (datatable)
	Extract the first row from a Google Visualization query result. More...

	isYesLike (s)
	Check whether a given string represents "yes" ("☑", "t", "y", etc) More...

	isNoLike (s)
	Check whether a given string represents "no" ("☐", "f", "n", etc) More...

	arraysEqual (a, b)
	Perform a shallow-compare of all array elements to check if they content equal contents for all elements. More...

	querySheet (sheetName, query, numHeaders=1)
	Perform a Google Visualization query on a specific sheet. More...

	queryUsers (query)
	Query the Google Spreadsheet `Users` sheet. More...

	queryActivity (query)
	Query the Google Spreadsheet `Activity` sheet. More...

	resetValues ()
	Reset all form values to defaults / empty. More...

	populateNewUser ()
	Clear the form and populate the `MakersLabs ID` field with the next available version not used in the Google Spreadsheet `Users` sheet. More...

	showUserObj (user)
	High-priority `User` fields update (e.g. real-time event from Firebase). More...

	showUserRow (data)
	Display provided `User` details on form. More...

	updateField (field, val)
	Update the value for the provided field, and display the new value. More...

	fieldForColumnId (columnId)
	Extract the field metadata for the provided column letter. More...

async	populateNextMakerLabsId ()
	Request the next available `MakerLabs ID` for the `Users` sheet. More...

async	setIsSaving (isSaving)
	Disable form field inputs if new form data is still being saved. More...

async	handleSubmit ()
	Handle submitting latest form data to Google Spreadsheet, replacing the data for an existing (matching) row, or inserting a new row. More...

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

Member Function Documentation

◆ activityMachineIdColumn()

get ViewUserForm::activityMachineIdColumn ( )

inline

Get the column letter for the activity sheet "Machine ID" column.

Returns: hard-coded "B"

◆ activityMakerLabsIdColumn()

get ViewUserForm::activityMakerLabsIdColumn ( )

inline

Get the column letter for the activity sheet "MakerLabs ID" column.

Returns: hard-coded "F"

◆ activitySheetName()

get ViewUserForm::activitySheetName ( )

inline

Get the Google Spreadsheet activity sheet name.

Returns: hard-coded "Activity"

◆ activitySheetNumHeaders()

get ViewUserForm::activitySheetNumHeaders ( )

inline

Get the Google Spreadsheet activity sheet number of header rows.

Returns: hard-coded 2

◆ activityTagIdColumn()

get ViewUserForm::activityTagIdColumn ( )

inline

Get the column letter for the activity sheet "Tag ID" column.

Returns: hard-coded "E"

◆ activityTimestampColumn()

get ViewUserForm::activityTimestampColumn ( )

inline

Get the column letter for the activity sheet "Timestamp" column.

Returns: hard-coded "A"

◆ activityTypeColumn()

get ViewUserForm::activityTypeColumn ( )

inline

Get the column letter for the activity sheet "Activity Type" column.

Returns: hard-coded "C"

◆ arraysEqual()

ViewUserForm::arraysEqual	(	a,
		b
	)

inline

Perform a shallow-compare of all array elements to check if they content equal contents for all elements.

Parameters

a	Array 1
b	Array 2

Returns: True if the two arrays are equal.

https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript#answer-16436975

◆ constructor()

ViewUserForm::constructor ( )

inline

Here is the call graph for this function:

◆ fieldForColumnId()

ViewUserForm::fieldForColumnId ( columnId )

inline

Extract the field metadata for the provided column letter.

Parameters

columnId Spreadsheet column letter

◆ fieldIsAlertsType()

ViewUserForm::fieldIsAlertsType ( field )

inline

Check whether form field should be rendered as a special-case "Alerts".

Parameters

field Field metadata object.

Returns: True if this field should be rendered with the Alerts widget.

Here is the call graph for this function:

◆ fieldIsCheckboxType()

ViewUserForm::fieldIsCheckboxType ( field )

inline

Check whether form field should be rendered as a checkbox.

Parameters

field Field metadata object.

Returns: True if this field should be rendered as a checkbox.

Here is the call graph for this function:

◆ fieldIsDatePickerType()

ViewUserForm::fieldIsDatePickerType ( field )

inline

Check whether form field should be rendered as a date-picker.

Parameters

field Field metadata object.

Returns: True if this field should be rendered as a date-picker.

◆ fieldIsDropdownMenuType()

ViewUserForm::fieldIsDropdownMenuType ( field )

inline

Check whether form field should be rendered as a drop-down menu.

Parameters

field Field metadata object.

Returns: True if this field should be rendered as a drop-down menu.

◆ fieldIsImageType()

ViewUserForm::fieldIsImageType ( field )

inline

Check whether form field should be rendered as an image.

Parameters

field Field metadata object.

Returns: True if this field should be rendered as an image.

◆ fieldIsRadioGroupType()

ViewUserForm::fieldIsRadioGroupType ( field )

inline

Check whether form field should be rendered as a radio group.

Parameters

field Field metadata object.

Returns: True if this field should be rendered as a radio group.

◆ fieldIsTagIdType()

ViewUserForm::fieldIsTagIdType ( field )

inline

Check whether form field should be rendered as a special-case "Tag ID".

Parameters

field Field metadata object.

Returns: True if this field should be rendered with the Tag ID widet.

Here is the call graph for this function:

◆ fieldIsTextInputType()

ViewUserForm::fieldIsTextInputType ( field )

inline

Check whether form field should be rendered as a text input.

Parameters

field Field metadata object.

Returns: True if this field should be rendered as a text input.

Here is the call graph for this function:

◆ firstUpdated()

async ViewUserForm::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

Search for recently scanned tags, prefill the Tag ID dropdown
Periodically update the Tag ID dropdown with recently scanned tags every 10 seconds

Here is the call graph for this function:

◆ getFirstRowValuesFromDatatable()

ViewUserForm::getFirstRowValuesFromDatatable ( datatable )

inline

Extract the first row from a Google Visualization query result.

Parameters

datatable Google Visualization query result DataTable JSON

Returns: JSON array of first row values only.

Here is the call graph for this function:

◆ getValuesFromDatatable()

ViewUserForm::getValuesFromDatatable	(	datatable,
		limit
	)

inline

Convert Google Spreadsheets Query result into JSON array.

Parameters

datatable	Google Visualisation query result DataTable JSON
limit	Only process the first `limit` rows (if provided)

◆ handleSubmit()

async ViewUserForm::handleSubmit ( )

inline

Handle submitting latest form data to Google Spreadsheet, replacing the data for an existing (matching) row, or inserting a new row.

Extract the values from each form field
If the Google Sheets API is loaded, and the expected number of form fields was provided with a valid MakerLabs ID, then:
Disable form fields before starting to save
If the form fields have an existing row #, update that row
Verify the row data was added successfully
Emit updated-user event with user field names and new values.
If the form fields do not have an existing row #, insert a new row
Verify the row data was added successfully
Emit updated-user event with user field names and new values

Here is the call graph for this function:

◆ handleUserNameChanged()

async ViewUserForm::handleUserNameChanged	(	newValue,
		oldValue
	)

inline

Property change handler for userName.

Parameters

newValue	New `userName`
oldValue	Previous (now outdated) `userName`

Search for user by name (if already entered), display in form

Here is the call graph for this function:

◆ hiddenSectionNames()

get ViewUserForm::hiddenSectionNames ( )

inline

Get the list of section titles which will skip display on the form.

Returns: hard-coded ["Initial", "Hidden", "Private"]

◆ isNoLike()

ViewUserForm::isNoLike ( s )

inline

Check whether a given string represents "no" ("☐", "f", "n", etc)

Parameters

s	Candidate input string

Returns: True if the input represents "no".

◆ isYesLike()

ViewUserForm::isYesLike ( s )

inline

Check whether a given string represents "yes" ("☑", "t", "y", etc)

Parameters

s	Candidate input string

Returns: True if the input represents "yes".

◆ populateNewUser()

ViewUserForm::populateNewUser ( )

inline

Clear the form and populate the MakersLabs ID field with the next available version not used in the Google Spreadsheet Users sheet.

Here is the call graph for this function:

◆ populateNextMakerLabsId()

async ViewUserForm::populateNextMakerLabsId ( )

inline

Request the next available MakerLabs ID for the Users sheet.

Returns: Next MakerLabs ID string (ML___)

Here is the call graph for this function:

◆ properties()

static get ViewUserForm::properties ( )

inlinestatic

WebComponent properties that can be used as HTML attributes.

Parameters

sheetId	Google Apps Sheet ID
nextMakerLabsIdUrl	URL for endpoint which returns next MakerLabs ID (ML___)
machineId	Currently selected machine ID (e.g. Front Desk)
accessToken	OAuth access token (time-limited) for accessing Google and Firebase services on behalf of the logged-in user
fields	Form fields JSON (obtained by querying Users Sheet Columns)
userName	User name of currently selected user
query	Optional user name to load into form immediately upon loading page
defaultPhotoUrl	Default URL for placeholder image to use for Maker without a profile image
profilePhotosFolderId	Google Drive folder ID where new Maker profile images should be uploaded

◆ queryActivity()

ViewUserForm::queryActivity ( query )

inline

Query the Google Spreadsheet Activity sheet.

Parameters

query Text to use as Google Visualization query

Returns: Parsed JSON DataTable result of query (or null for invalid query)

Here is the call graph for this function:

◆ querySheet()

ViewUserForm::querySheet	(	sheetName,
		query,
		numHeaders = `1`
	)

inline

Perform a Google Visualization query on a specific sheet.

Parameters

sheetName	Specific sheet name of Google Spreadsheet
query	Text to use as Google Visualization query
numHeaders	Number of header rows used in the target sheet

Returns: Parsed JSON DataTable result of query (or null for invalid query)

◆ queryUsers()

ViewUserForm::queryUsers ( query )

inline

Query the Google Spreadsheet Users sheet.

Parameters

query Text to use as Google Visualization query

Returns: Parsed JSON DataTable result of query (or null for invalid query)

Here is the call graph for this function:

◆ render()

ViewUserForm::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:

◆ renderChoiceItem()

ViewUserForm::renderChoiceItem ( choice )

inline

Render a choice name as a <paper-item>

Parameters

choice String name of choice.

◆ renderChoiceRadioButton()

ViewUserForm::renderChoiceRadioButton ( choice )

inline

Render a choice name as a <paper-radio-button>

Parameters

choice String name of choice.

◆ renderField()

ViewUserForm::renderField ( field )

inline

General method to render any type of form field.

Parameters

field Object representing a specific type of form field, its metadata will be used to determine how to render it.

Different types of form fields supported:

checkbox
radio / radio group
drop-down
date-picker
image (supports Google Drive file upload)
text input
Alerts column with red highlight
Tag ID column with recent tags drop-down.

Here is the call graph for this function:

◆ renderSection()

ViewUserForm::renderSection ( section )

inline

General method to render a collection of form fields in a "panel".

Parameters

section Object with a title and array of fields[].

Here is the call graph for this function:

◆ resetValues()

ViewUserForm::resetValues ( )

inline

Reset all form values to defaults / empty.

Here is the call graph for this function:

◆ sectionIsHidden()

ViewUserForm::sectionIsHidden ( section )

inline

Check whether form field section should be hidden.

Parameters

section Object representing the section and its fields

Returns: True if the section title matches an well-known value to hide.

Here is the call graph for this function:

◆ setIsSaving()

async ViewUserForm::setIsSaving ( isSaving )

inline

Disable form field inputs if new form data is still being saved.

Parameters

isSaving Boolean whether form fields should be disabled.

◆ showUserObj()

ViewUserForm::showUserObj ( user )

inline

High-priority User fields update (e.g. real-time event from Firebase).

Parameters

user	Object with important `User` fields from Firebase

If the Alerts column is set on the user, play a beep sound.
Then update the rest of the form fields.

Here is the call graph for this function:

◆ showUserRow()

ViewUserForm::showUserRow ( data )

inline

Display provided User details on form.

Parameters

data	Array of all column values for the `User`

Here is the call graph for this function:

◆ updated()

ViewUserForm::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:

Iterate through all vaadin-date-picker elements, force them to be yyyy-mm-dd
(also make them clear the calendar popup after changing the value)

◆ updateField()

ViewUserForm::updateField	(	field,
		val
	)

inline

Update the value for the provided field, and display the new value.

Parameters

field	Field metadata
val	New value for field

Here is the call graph for this function:

◆ updateFormFromMakerLabsId()

async ViewUserForm::updateFormFromMakerLabsId ( makerLabsId )

inline

Query for a specific MakerLabs ID and update the form with their details.

Parameters

makerLabsId MakerLabs ID string (ML___)

Returns: True if a matching user row was returned.

Here is the call graph for this function:

◆ updateFormFromMostRecentScan()

async ViewUserForm::updateFormFromMostRecentScan ( )

inline

Dynamically update the form when users are signing in to the selected machine.

Determine the most recent Signed_In activity on the currently selected machineId
Check whether the MakerLabs ID field is present and non-empty
Update the form with this details of this MakerLabs ID

Here is the call graph for this function:

◆ updateRecentTagIds()

async ViewUserForm::updateRecentTagIds ( )

inline

Select the 5 most recently scanned Tag IDs in the last 2 minutes, update the Tag ID drop-down.

Here is the call graph for this function:

◆ usersAlertsColumn()

get ViewUserForm::usersAlertsColumn ( )

inline

Get the column letter for the users sheet "Alerts" column.

Returns: hard-coded "Membership Info / Alerts"

Here is the call graph for this function:

◆ usersColumnFromFieldTitle()

ViewUserForm::usersColumnFromFieldTitle	(	prefixOrTitle,
		title
	)

inline

Determine column letter for column title (and optional section)

Parameters

prefixOrTitle	Section title (Row 1)
title	Field title (Row 2)

Returns: Column letter of matching column.

◆ usersEmailColumn()

get ViewUserForm::usersEmailColumn ( )

inline

Get the column letter for the users sheet "Email" column.

Returns: hard-coded "Maker Info / Email"

Here is the call graph for this function:

◆ usersMakerLabsIdColumn()

get ViewUserForm::usersMakerLabsIdColumn ( )

inline

Get the column letter for the users sheet "MakerLabs ID" column.

Returns: hard-coded "Membership Info / MakerLabs ID"

Here is the call graph for this function:

◆ usersNameColumn()

get ViewUserForm::usersNameColumn ( )

inline

Get the column letter for the users sheet "Name" column.

Returns: hard-coded "Maker Info / Name"

Here is the call graph for this function:

◆ usersRowColumn()

get ViewUserForm::usersRowColumn ( )

inline

Get the column letter for the users sheet "Row" column.

Returns: hard-coded "Hidden / Row"

Here is the call graph for this function:

◆ usersSheetName()

get ViewUserForm::usersSheetName ( )

inline

Get the Google Spreadsheet user sheet name.

Returns: hard-coded "Users"

◆ usersSheetNumHeaders()

get ViewUserForm::usersSheetNumHeaders ( )

inline

Get the Google Spreadsheet user sheet number of header rows.

Returns: hard-coded 2

◆ usersTagIdColumn()

get ViewUserForm::usersTagIdColumn ( )

inline

Get the column letter for the users sheet "Tag ID" column.

Returns: hard-coded "Access & Studio / Tag ID"

Here is the call graph for this function:

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

webcomponents/src/view-user-form.js

Detailed Description

Public Member Functions

Static Public Member Functions

Member Function Documentation

◆ activityMachineIdColumn()

◆ activityMakerLabsIdColumn()

◆ activitySheetName()

◆ activitySheetNumHeaders()

◆ activityTagIdColumn()

◆ activityTimestampColumn()

◆ activityTypeColumn()

◆ arraysEqual()

◆ constructor()

◆ fieldForColumnId()

◆ fieldIsAlertsType()

◆ fieldIsCheckboxType()

◆ fieldIsDatePickerType()

◆ fieldIsDropdownMenuType()

◆ fieldIsImageType()

◆ fieldIsRadioGroupType()

◆ fieldIsTagIdType()

◆ fieldIsTextInputType()

◆ firstUpdated()

◆ getFirstRowValuesFromDatatable()

◆ getValuesFromDatatable()

◆ handleSubmit()

◆ handleUserNameChanged()

◆ hiddenSectionNames()

◆ isNoLike()

◆ isYesLike()

◆ populateNewUser()

◆ populateNextMakerLabsId()

◆ properties()

◆ queryActivity()

◆ querySheet()

◆ queryUsers()

◆ render()

◆ renderChoiceItem()

◆ renderChoiceRadioButton()

◆ renderField()

◆ renderSection()

◆ resetValues()

◆ sectionIsHidden()

◆ setIsSaving()

◆ showUserObj()

◆ showUserRow()

◆ updated()

◆ updateField()

◆ updateFormFromMakerLabsId()

◆ updateFormFromMostRecentScan()

◆ updateRecentTagIds()

◆ usersAlertsColumn()

◆ usersColumnFromFieldTitle()

◆ usersEmailColumn()

◆ usersMakerLabsIdColumn()

◆ usersNameColumn()

◆ usersRowColumn()

◆ usersSheetName()

◆ usersSheetNumHeaders()

◆ usersTagIdColumn()