72 lines
2.4 KiB
TypeScript

import WithEntityLists from '@datahub/lists/components/with-entity-lists';
// @ts-ignore: Ignore import of compiled template
import template from '../templates/components/toggle-on-list';
import { layout, tagName, classNames, className } from '@ember-decorators/component';
import { computed } from '@ember/object';
import { findEntityInList } from '@datahub/lists/utils';
import { ListToggleCta } from '@datahub/lists/constants/entity/shared';
import { noop } from '@datahub/utils/function/noop';
import { DataModelEntityInstance } from '@datahub/data-models/addon/constants/entity';
export const baseComponentClass = 'entity-list-toggle';
const buttonClass = 'nacho-button nacho-button--secondary nacho-button--small';
/**
* ui component to add or remove an entity from its related list, also indicates if it's
* associated entity is in that entity list
* @export
* @class ToggleOnList
* @extends {WithEntityLists}
*/
@layout(template)
@classNames(baseComponentClass, buttonClass)
@tagName('button')
export default class ToggleOnList extends WithEntityLists {
/**
* An instance of the data model entity to add or remove from the list
*/
entity?: DataModelEntityInstance;
/**
* External action to notify external entity of DataModelInstance toggled on or off
*/
didToggleEntity: (arg?: DataModelEntityInstance) => void = noop;
/**
* Computed flag indicating the associate entity exists in the related entity list
* @readonly
* @type {boolean}
* @memberof ToggleOnList
*/
@className(`${baseComponentClass}--remove`, `${baseComponentClass}--add`)
@computed('entityListTrampoline.list')
get entityExistsInList(): boolean {
const {
entityListTrampoline: { list },
entity
} = this;
return entity && list ? Boolean(findEntityInList([...list])(entity)) : false;
}
/**
* The call to action for the button toggle
* @readonly
*/
@computed('entityExistsInList')
get cta(): ListToggleCta {
return this.entityExistsInList ? ListToggleCta.remove : ListToggleCta.add;
}
/**
* Handles the click event by toggling the associated entity onto or off the related entity list
* Toggle is dependent on presence or absence from the entity list
*/
click(): void {
const { listsManager, entity, entityExistsInList } = this;
if (listsManager && entity) {
entityExistsInList ? listsManager.removeFromList(entity) : listsManager.addToList(entity);
this.didToggleEntity();
}
}
}