import * as React from 'react' ; import { noop } from 'lodash' ; import { superdeskApi } from '../../apis' ; import { IDesk } from 'superdesk-api' ; import { Autocomplete , Label , Tag } from 'superdesk-ui-framework/react' ; import { FormGroup , FormRow } from '../../ui' ; interface IProps { label ? : string ; value ? : Array < IDesk [ '_id' ] > ; onChange ( value ) : void ; disabled ? : boolean ; } interface IState { desks : Array < IDesk > ; } function searchDesks ( query ) { return superdeskApi . dataApi . query < IDesk > ( 'desks' , 1 , { field : 'name' , direction : 'ascending' } , query ) ; } export class DesksSelectInput extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . state = { desks : [ ] } ; this . onSearch = this . onSearch . bind ( this ) ; this . addDesk = this . addDesk . bind ( this ) ; } componentDidMount ( ) { if ( this . props . value ?. length ) { searchDesks ( { _id : { $in : this . props . value } } ) . then ( ( response ) => { this . setState ( { desks : response . _items } ) ; } ) ; } } onSearch ( searchString , callback ) { let cancelled = false ; const selectedDeskIds = this . state . desks . map ( ( desk ) => desk . _id ) ; searchDesks ( { $and : [ { name : { $regex : searchString , $options : '-i' } } , { _id : { $nin : selectedDeskIds } } , ] , } ) . then ( ( response ) => { if ( cancelled !== true ) { callback ( response . _items ) ; } } ) ; return { cancel : ( ) => { cancelled = true ; } , } ; } addDesk ( desk ) { this . setState ( ( prevState ) => { return { desks : [ ... prevState . desks , desk , ] , } ; } , ( ) => { this . props . onChange ( this . state . desks . map ( ( d ) => d . _id ) ) ; } ) ; } removeDesk ( desk ) { this . setState ( ( prevState ) => { return { desks : prevState . desks . filter ( ( d ) => d . _id !== desk . _id ) , } ; } , ( ) => { this . props . onChange ( this . state . desks . map ( ( d ) => d . _id ) ) ; } ) ; } render ( ) { const { gettext } = superdeskApi . localization ; return ( < React . Fragment > < FormGroup > < FormRow > < Autocomplete key = { ( this . state . desks || [ ] ) . length } label = { this . props . label ?? gettext ( 'Desks' ) } value = { '' } keyValue = "name" items = { [ ] } search = { this . onSearch } onSelect = { this . addDesk } onChange = { noop } disabled = { this . props . disabled } / > < /FormRow> < /FormGroup> { ! this . state . desks . length ? null : ( < FormGroup > < FormRow > { this . state . desks . map ( ( desk ) => ( this . props . disabled ? ( < Label key = { desk . _id } text = { desk . name } style = "translucent" size = "large" / > ) : ( < Tag key = { desk . _id } text = { desk . name } onClick = { this . removeDesk . bind ( this , desk ) } / > ) ) ) } < /FormRow> < /FormGroup>)} < /React.Fragment>); } }