| /** |
| * @license |
| * Copyright (C) 2016 The Android Open Source Project |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| import '../gr-account-chip/gr-account-chip'; |
| import '../gr-account-entry/gr-account-entry'; |
| import '../../../styles/shared-styles'; |
| import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners'; |
| import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin'; |
| import {PolymerElement} from '@polymer/polymer/polymer-element'; |
| import {htmlTemplate} from './gr-account-list_html'; |
| import {appContext} from '../../../services/app-context'; |
| import {customElement, property} from '@polymer/decorators'; |
| import { |
| ChangeInfo, |
| Suggestion, |
| AccountInfo, |
| GroupInfo, |
| } from '../../../types/common'; |
| import { |
| GrReviewerSuggestionsProvider, |
| SuggestionItem, |
| } from '../../../scripts/gr-reviewer-suggestions-provider/gr-reviewer-suggestions-provider'; |
| import {ReportingService} from '../../../services/gr-reporting/gr-reporting'; |
| import {GrAccountEntry} from '../gr-account-entry/gr-account-entry'; |
| import {GrAccountChip} from '../gr-account-chip/gr-account-chip'; |
| import {PolymerDeepPropertyChange} from '@polymer/polymer/interfaces'; |
| import {PaperInputElementExt} from '../../../types/types'; |
| |
| const VALID_EMAIL_ALERT = 'Please input a valid email.'; |
| |
| declare global { |
| interface HTMLElementTagNameMap { |
| 'gr-account-list': GrAccountList; |
| } |
| } |
| |
| export interface GrAccountList { |
| $: { |
| entry: GrAccountEntry; |
| }; |
| } |
| |
| /** |
| * For item added with account info |
| */ |
| export interface AccountObjectInput { |
| account: AccountInfo; |
| } |
| |
| /** |
| * For item added with group info |
| */ |
| export interface GroupObjectInput { |
| group: GroupInfo; |
| confirm: boolean; |
| } |
| |
| /** Supported input to be added */ |
| export type RawAccountInput = string | AccountObjectInput | GroupObjectInput; |
| |
| // type guards for AccountObjectInput and GroupObjectInput |
| function isAccountObject(x: RawAccountInput): x is AccountObjectInput { |
| return !!(x as AccountObjectInput).account; |
| } |
| |
| function isGroupObjectInput(x: RawAccountInput): x is GroupObjectInput { |
| return !!(x as GroupObjectInput).group; |
| } |
| |
| // Internal input type with account info |
| export interface AccountInfoInput extends AccountInfo { |
| _group?: boolean; |
| _account?: boolean; |
| _pendingAdd?: boolean; |
| confirmed?: boolean; |
| } |
| |
| // Internal input type with group info |
| export interface GroupInfoInput extends GroupInfo { |
| _group?: boolean; |
| _account?: boolean; |
| _pendingAdd?: boolean; |
| confirmed?: boolean; |
| } |
| |
| function isAccountInfoInput(x: AccountInput): x is AccountInfoInput { |
| const input = x as AccountInfoInput; |
| return !!input._account || !!input._account_id || !!input.email; |
| } |
| |
| function isGroupInfoInput(x: AccountInput): x is GroupInfoInput { |
| const input = x as GroupInfoInput; |
| return !!input._group || !!input.id; |
| } |
| |
| type AccountInput = AccountInfoInput | GroupInfoInput; |
| |
| export interface AccountAddition { |
| account?: AccountInfoInput; |
| group?: GroupInfoInput; |
| } |
| |
| @customElement('gr-account-list') |
| export class GrAccountList extends GestureEventListeners( |
| LegacyElementMixin(PolymerElement) |
| ) { |
| static get template() { |
| return htmlTemplate; |
| } |
| |
| /** |
| * Fired when user inputs an invalid email address. |
| * |
| * @event show-alert |
| */ |
| |
| @property({type: Array, notify: true}) |
| accounts: AccountInput[] = []; |
| |
| @property({type: Object}) |
| change?: ChangeInfo; |
| |
| @property({type: Object}) |
| filter?: (input: Suggestion) => boolean; |
| |
| @property({type: String}) |
| placeholder = ''; |
| |
| @property({type: Boolean}) |
| disabled = false; |
| |
| /** |
| * Returns suggestions and convert them to list item |
| */ |
| @property({type: Object}) |
| suggestionsProvider?: GrReviewerSuggestionsProvider; |
| |
| /** |
| * Needed for template checking since value is initially set to null. |
| */ |
| @property({type: Object, notify: true}) |
| pendingConfirmation: GroupObjectInput | null = null; |
| |
| @property({type: Boolean}) |
| readonly = false; |
| |
| /** |
| * When true, allows for non-suggested inputs to be added. |
| */ |
| @property({type: Boolean}) |
| allowAnyInput = false; |
| |
| /** |
| * Array of values (groups/accounts) that are removable. When this prop is |
| * undefined, all values are removable. |
| */ |
| @property({type: Array}) |
| removableValues?: AccountInput[]; |
| |
| @property({type: Number}) |
| maxCount = 0; |
| |
| /** |
| * Returns suggestion items |
| */ |
| @property({type: Object}) |
| _querySuggestions: (input: string) => Promise<SuggestionItem[]>; |
| |
| /** |
| * Set to true to disable suggestions on empty input. |
| */ |
| @property({type: Boolean}) |
| skipSuggestOnEmpty = false; |
| |
| reporting: ReportingService; |
| |
| constructor() { |
| super(); |
| this.reporting = appContext.reportingService; |
| this._querySuggestions = input => this._getSuggestions(input); |
| } |
| |
| /** @override */ |
| created() { |
| super.created(); |
| this.addEventListener('remove', e => |
| this._handleRemove(e as CustomEvent<{account: AccountInput}>) |
| ); |
| } |
| |
| get accountChips() { |
| return Array.from(this.root?.querySelectorAll('gr-account-chip') || []); |
| } |
| |
| get focusStart() { |
| return this.$.entry.focusStart; |
| } |
| |
| _getSuggestions(input: string) { |
| if (this.skipSuggestOnEmpty && !input) { |
| return Promise.resolve([]); |
| } |
| const provider = this.suggestionsProvider; |
| if (!provider) { |
| return Promise.resolve([]); |
| } |
| return provider.getSuggestions(input).then(suggestions => { |
| if (!suggestions) { |
| return []; |
| } |
| if (this.filter) { |
| suggestions = suggestions.filter(this.filter); |
| } |
| return suggestions.map(suggestion => |
| provider.makeSuggestionItem(suggestion) |
| ); |
| }); |
| } |
| |
| _handleAdd(e: CustomEvent<{value: RawAccountInput}>) { |
| this.addAccountItem(e.detail.value); |
| } |
| |
| addAccountItem(item: RawAccountInput) { |
| // Append new account or group to the accounts property. We add our own |
| // internal properties to the account/group here, so we clone the object |
| // to avoid cluttering up the shared change object. |
| let itemTypeAdded = 'unknown'; |
| if (isAccountObject(item)) { |
| const account = {...item.account, _pendingAdd: true}; |
| this.push('accounts', account); |
| itemTypeAdded = 'account'; |
| } else if (isGroupObjectInput(item)) { |
| if (item.confirm) { |
| this.pendingConfirmation = item; |
| return; |
| } |
| const group = {...item.group, _pendingAdd: true, _group: true}; |
| this.push('accounts', group); |
| itemTypeAdded = 'group'; |
| } else if (this.allowAnyInput) { |
| if (!item.includes('@')) { |
| // Repopulate the input with what the user tried to enter and have |
| // a toast tell them why they can't enter it. |
| this.$.entry.setText(item); |
| this.dispatchEvent( |
| new CustomEvent('show-alert', { |
| detail: {message: VALID_EMAIL_ALERT}, |
| bubbles: true, |
| composed: true, |
| }) |
| ); |
| return false; |
| } else { |
| const account = {email: item, _pendingAdd: true}; |
| this.push('accounts', account); |
| itemTypeAdded = 'email'; |
| } |
| } |
| |
| this.reporting.reportInteraction(`Add to ${this.id}`, {itemTypeAdded}); |
| this.pendingConfirmation = null; |
| return true; |
| } |
| |
| confirmGroup(group: GroupInfo) { |
| this.push('accounts', { |
| ...group, |
| confirmed: true, |
| _pendingAdd: true, |
| _group: true, |
| }); |
| this.pendingConfirmation = null; |
| } |
| |
| _computeChipClass(account: AccountInput) { |
| const classes = []; |
| if (account._group) { |
| classes.push('group'); |
| } |
| if (account._pendingAdd) { |
| classes.push('pendingAdd'); |
| } |
| return classes.join(' '); |
| } |
| |
| _accountMatches(a: AccountInput, b: AccountInput) { |
| // TODO(TS): seems a & b always exists ? |
| if (a && b) { |
| // both conditions are checking against AccountInfo |
| // and only check a not b.. typeguard won't work very good without |
| // changing logic, so keep it as inline casting |
| if ((a as AccountInfoInput)._account_id) { |
| return ( |
| (a as AccountInfoInput)._account_id === |
| (b as AccountInfoInput)._account_id |
| ); |
| } |
| if ((a as AccountInfoInput).email) { |
| return (a as AccountInfoInput).email === (b as AccountInfoInput).email; |
| } |
| } |
| return a === b; |
| } |
| |
| _computeRemovable(account: AccountInput, readonly: boolean) { |
| if (readonly) { |
| return false; |
| } |
| if (this.removableValues) { |
| for (let i = 0; i < this.removableValues.length; i++) { |
| if (this._accountMatches(this.removableValues[i], account)) { |
| return true; |
| } |
| } |
| return !!account._pendingAdd; |
| } |
| return true; |
| } |
| |
| _handleRemove(e: CustomEvent<{account: AccountInput}>) { |
| const toRemove = e.detail.account; |
| this.removeAccount(toRemove); |
| this.$.entry.focus(); |
| } |
| |
| removeAccount(toRemove?: AccountInput) { |
| if (!toRemove || !this._computeRemovable(toRemove, this.readonly)) { |
| return; |
| } |
| for (let i = 0; i < this.accounts.length; i++) { |
| let matches; |
| const account = this.accounts[i]; |
| if (toRemove._group) { |
| matches = |
| (toRemove as GroupInfoInput).id === (account as GroupInfoInput).id; |
| } else { |
| matches = this._accountMatches(toRemove, account); |
| } |
| if (matches) { |
| this.splice('accounts', i, 1); |
| this.reporting.reportInteraction(`Remove from ${this.id}`); |
| return; |
| } |
| } |
| console.warn('received remove event for missing account', toRemove); |
| } |
| |
| _getNativeInput(paperInput: PaperInputElementExt) { |
| // In Polymer 2 inputElement isn't nativeInput anymore |
| return (paperInput.$.nativeInput || |
| paperInput.inputElement) as HTMLTextAreaElement; |
| } |
| |
| _handleInputKeydown( |
| e: CustomEvent<{input: PaperInputElementExt; keyCode: number}> |
| ) { |
| const input = this._getNativeInput(e.detail.input); |
| if ( |
| input.selectionStart !== input.selectionEnd || |
| input.selectionStart !== 0 |
| ) { |
| return; |
| } |
| switch (e.detail.keyCode) { |
| case 8: // Backspace |
| this.removeAccount(this.accounts[this.accounts.length - 1]); |
| break; |
| case 37: // Left arrow |
| if (this.accountChips[this.accountChips.length - 1]) { |
| this.accountChips[this.accountChips.length - 1].focus(); |
| } |
| break; |
| } |
| } |
| |
| _handleChipKeydown(e: KeyboardEvent) { |
| const chip = e.target as GrAccountChip; |
| const chips = this.accountChips; |
| const index = chips.indexOf(chip); |
| switch (e.keyCode) { |
| case 8: // Backspace |
| case 13: // Enter |
| case 32: // Spacebar |
| case 46: // Delete |
| this.removeAccount(chip.account); |
| // Splice from this array to avoid inconsistent ordering of |
| // event handling. |
| chips.splice(index, 1); |
| if (index < chips.length) { |
| chips[index].focus(); |
| } else if (index > 0) { |
| chips[index - 1].focus(); |
| } else { |
| this.$.entry.focus(); |
| } |
| break; |
| case 37: // Left arrow |
| if (index > 0) { |
| chip.blur(); |
| chips[index - 1].focus(); |
| } |
| break; |
| case 39: // Right arrow |
| chip.blur(); |
| if (index < chips.length - 1) { |
| chips[index + 1].focus(); |
| } else { |
| this.$.entry.focus(); |
| } |
| break; |
| } |
| } |
| |
| /** |
| * Submit the text of the entry as a reviewer value, if it exists. If it is |
| * a successful submit of the text, clear the entry value. |
| * |
| * @return If there is text in the entry, return true if the |
| * submission was successful and false if not. If there is no text, |
| * return true. |
| */ |
| submitEntryText() { |
| const text = this.$.entry.getText(); |
| if (!text.length) { |
| return true; |
| } |
| const wasSubmitted = this.addAccountItem(text); |
| if (wasSubmitted) { |
| this.$.entry.clear(); |
| } |
| return wasSubmitted; |
| } |
| |
| additions(): AccountAddition[] { |
| return this.accounts |
| .filter(account => account._pendingAdd) |
| .map(account => { |
| if (isGroupInfoInput(account)) { |
| return {group: account}; |
| } else if (isAccountInfoInput(account)) { |
| return {account}; |
| } else { |
| throw new Error('AccountInput must be either Account or Group.'); |
| } |
| }); |
| } |
| |
| _computeEntryHidden( |
| maxCount: number, |
| accountsRecord: PolymerDeepPropertyChange<AccountInput[], AccountInput[]>, |
| readonly: boolean |
| ) { |
| return (maxCount && maxCount <= accountsRecord.base.length) || readonly; |
| } |
| } |