Создание клиентского расширения с реализацией элемента управления

import { $RequestManager } from "@docsvision/webclient/System/$RequestManager";
import { urlStore } from "@docsvision/webclient/System/UrlStore";
import { Models } from "../Controls/RefCases/Data/CaseModel";
import { serviceName } from "@docsvision/webclient/System/ServiceUtils";

export class RefCasesService  {
    constructor(private services: $RequestManager) {
    }

    getYears(rootSectionID?: string): Promise<Models.RefCasesYearModel[]> { (1)
        let url = urlStore.urlResolver.resolveApiUrl("GetYears", "RefCasesOperation");
        url = url + "?rootSectionID=" + rootSectionID;

        return this.services.requestManager.post<Models.RefCasesYearModel[]>(url, "");
    }

    getSections(yearID?: string, rootSectionID?: string): Promise<Models.RefCasesSectionModel[]> { (2)
        let url = urlStore.urlResolver.resolveApiUrl("GetSections", "RefCasesOperation");
        url = url + "?yearID=" + yearID + "&rootSectionID=" + rootSectionID;

        return this.services.requestManager.post<Models.RefCasesSectionModel[]>(url, "");
    }

    getCases(sectionID?: string): Promise<Models.RefCasesCaseModel[]> { (3)
        let url = urlStore.urlResolver.resolveApiUrl("GetCases", "RefCasesOperation");
        url = url + "?sectionID=" + sectionID;

        return this.services.requestManager.post<Models.RefCasesCaseModel[]>(url, "");
    }

    getCaseTitleName(caseID?: string): Promise<string> { (4)
        let url = urlStore.urlResolver.resolveApiUrl("GetCaseDisplayName", "RefCasesOperation");
        url = url + "?caseID=" + caseID;

        return this.services.requestManager.post<string>(url, "");
    }

    searchCase(caseName: string, skipCount: number, maxCount: number, rootSectionID?: string): Promise<Models.CaseSearchResult> { (5)
        let url = urlStore.urlResolver.resolveApiUrl("SearchCase", "RefCasesOperation");
        url = url + "?caseName=" + caseName + "&skipCount=" + skipCount + "&maxCount=" + maxCount + "&rootSectionID=" + rootSectionID;

        return this.services.requestManager.post<Models.CaseSearchResult>(url, "");
    }
}

export type $RefCasesService = { refCasesService: RefCasesService };
export const $RefCasesService = serviceName((s: $RefCasesService) => s.refCasesService);

export class RefCasesParams extends InputBasedControlParams<Models.RefCasesCaseDisplayModel> {

    @r standardCssClass?: string = "ref-cases"; (1)

    @rw rootSection?: string; (2)

    @rw services?: $LayoutDirectoryDesignerController & $EditOperationStore & $LayoutInfo & $RefCasesService; (3)
}

(1)
export interface RefCasesState extends RefCasesParams, InputBasedControlState<Models.RefCasesCaseDisplayModel> {
    binding: IBindingResult<Models.RefCasesCaseDisplayModel>;  (2)

    dialog: ModalWindow; (3)

    requestHelper: RequestHelper; (4)

    inputKeyDown: SimpleEvent<React.KeyboardEvent<any>>(5)
}

export class RefCases extends InputBasedControl<Models.RefCasesCaseDisplayModel, RefCasesParams, RefCasesState>
{
    protected getServices(): $LayoutInfo {
        return this.state.services;
    }

    protected createParams(): RefCasesParams { (1)
        return new RefCasesParams();
    }

    @handler("binding") (2)
    protected set binding(binding: IBindingResult<Models.RefCasesCaseDisplayModel>) {
        this.value = binding && binding.value;
        this.state.canEdit = editOperationAvailable(this.state.services, binding);
        this.state.binding = binding;
    }

    protected getBindings() { (3)
        let binding = cloneObject(this.state.binding);
        return [getBindingResult(binding, this.params.value && this.params.value.id || null, () => at(RefCasesParams).labelText)];
    }

    protected createImpl() { (4)
        return new RefCasesImpl(this.props, this.state);
    }
}

(1)
export class RefCasesImpl extends InputBasedControlImpl<Models.RefCasesCaseDisplayModel, RefCasesParams, RefCasesState>
{
    constructor(props: RefCasesParams, state: RefCasesState) {
        super(props, state);

        this.state.requestHelper = new RequestHelper(() => this.forceUpdate()); (2)

        this.state.inputKeyDown = new SimpleEvent<React.KeyboardEvent<any>>(this);

        this.findItems = this.findItems.bind(this);
        this.showDictionary = this.showDictionary.bind(this);
        this.onSelected = this.onSelected.bind(this);
        this.attachTypeahead = this.attachTypeahead.bind(this); (3)
    }


    protected renderInputWithPlaceholder(): React.ReactNode { (4)

        let buttons: IBoxWithButtonsButtonInfo[] = [ (5)
            {
                onClick: this.showDictionary,
                name: "open-dictionary",
                iconClassName: "open-dictionary-button-icon dv-ico dv-ico-dictionary",
                visible: this.editAvailable,
                title: resources.RefCases_SelectFromDirectory,
                disabled: !this.editAvailable,
                tabIndex: this.getTabIndex(),
            }
        ];

        return ( (6)
            <Typeahead className={"universal-directory-box"} extraButtons={buttons}
                findItems={this.findItems}
                clearButton={this.hasValue()}
                searchText={this.state.inputText}
                afterOpenCallback={() => this.afterOpenCallback()}
                popoverClassName={this.state.standardCssClass}
                popoverAttributes={{ "data-control-name": this.state.name }}
                inputKeyDown={this.state.inputKeyDown}
                onSelected={this.onSelected}
                disabled={!this.editAvailable}
                ref={this.attachTypeahead}>
                {super.renderInputWithPlaceholder()}
            </Typeahead>
        );
    }

    async showDictionary() { (7)
        if (this.state.dialog && this.state.dialog.IsOpened) {
            return;
        }

        let controlInModal: RefCasesSelectDialog; (8)

        let params = new ModalWindowParams(); (9)
        params.headerText = resources.RefCases_SelectFromDirectory;
        params.content = "";
        params.buttonOkShow = true;
        params.buttonOkText = resources.Navigator_ButtonSelect;

        let okFunction = () => { (10)
            let selectedCase = cloneObject(controlInModal.selectedCase);

            if (selectedCase) { (11)
                this.state.services.refCasesService.getCaseTitleName(selectedCase.uniqueId).then((title) => {

                    let displayValue = {
                        id: selectedCase.uniqueId,
                        name: title
                    } as Models.RefCasesCaseDisplayModel;

                    this.setValue(displayValue, true);
                });

                if (this.state.dialog) {
                    this.state.dialog.Hide();
                    this.state.dialog = null;
                }
            }
        };

        params.buttonOkFunction = okFunction; (12)

        const value = this.getValue(); (13)
        this.state.dialog = new ModalWindow(params);

        renderModalContent(this.state.dialog, ( (14)
            <RefCasesSelectDialog key={this.state.name + "_Modal"} ref={(el) => controlInModal = el}
                rootSectionId={this.state.rootSection}
                services={this.state.services}

                nodeSelected={(node) => { (15)
                    if (this.state.dialog) {
                        if (node) this.state.dialog.OkButtonElement.classList.remove("disabled");
                        else this.state.dialog.OkButtonElement.classList.add("disabled");
                    }
                }}

                nodeAccepted={okFunction} /> (16)
        ));

        this.state.dialog.Show();
        this.state.dialog.OkButtonElement.classList.add("disabled");
    }

    protected findItems(typeaheadQuery: ITypeaheadSearchQuery): Promise<ITypeaheadSearchResult> { (17)
        return new Promise<ITypeaheadSearchResult>((resolve, reject) => {
            this.state.services.refCasesService.searchCase(typeaheadQuery.searchText, typeaheadQuery.skipCount, typeaheadQuery.maxCount, this.state.rootSection).then(response => {
                let result = {
                    items: response.items.map(item => new CaseTypeaheadVariant(item)), (18)

                    hasMore: response.hasMore (19)
                } as ITypeaheadSearchResult;
                resolve(result);
            }).catch(reject);
        });
    }
}

export class RefCasesSelectDialog extends React.Component<IRefCasesSelectDialogProps, IRefCasesSelectDialogState> {

    (1)
    state: IRefCasesSelectDialogState;

    constructor(props: IRefCasesSelectDialogProps) {
        super(props);

        this.state = {} as IRefCasesSelectDialogState;
        this.state.requestHelper = new RequestHelper(() => this.forceUpdate());


        this.collectYearsList = this.collectYearsList.bind(this);
        this.loadSectionsTree = this.loadSectionsTree.bind(this);
        this.loadCasesTree = this.loadCasesTree.bind(this);

        this.onSectionNodeSelected = this.onSectionNodeSelected.bind(this);
        this.onCaseNodeSelected = this.onCaseNodeSelected.bind(this);
        this.onCaseNodeAccepted = this.onCaseNodeAccepted.bind(this); (2)

        this.collectYearsList(); (3)
    }

    protected collectYearsList() { (4)
        this.props.services.refCasesService.getYears(this.props.rootSectionId).then((items) => { (5)
            this.state.years = items.map(x => ({
                id: x.id,
                title: x.displayValue
            } as IComboBoxElement));

            this.setState({ showYearsList: true }); (6)
        });
    }

    protected loadSectionsTree(): Promise<IDynamicTreeNodeData[]> { (7)
        return new Promise<IDynamicTreeNodeData[]>((resolve, reject) => {
            this.state.requestHelper.send(
                () => this.props.services.refCasesService.getSections(this.state.selectedYearID, this.props.rootSectionId),
                items => {
                    let nodes = RefCasesSectionTreeNode.Create(items);
                    resolve(nodes);
                },
                reject);
        });
    }

    protected loadCasesTree(): Promise<IDynamicTreeNodeData[]> { (8)
        return new Promise<IDynamicTreeNodeData[]>((resolve, reject) => {
            this.state.requestHelper.send(
                () => this.props.services.refCasesService.getCases(this.state.selectedSectionID),
                items => {
                    let nodes = RefCasesCaseTreeNode.Create(items);
                    resolve(nodes);
                },
                reject);
        });
    }

    protected onSectionNodeSelected(node: TreeNode) { (9)
        this.state.selectedSectionID = node.uniqueId;

        this.state.selectedCaseNode = null;
        this.props.nodeSelected && this.props.nodeSelected(null);

        this.setState({ showCasesTree: false }, () => this.setState({ showCasesTree: true }));
    }

    protected onCaseNodeSelected(node: TreeNode) { (10)
        this.state.selectedCaseNode = node.data as RefCasesCaseTreeNode;
        this.props.nodeSelected && this.props.nodeSelected(node.data as RefCasesCaseTreeNode);
    }

    protected onCaseNodeAccepted(node: TreeNode) { (11)
        this.state.selectedCaseNode = node.data as RefCasesCaseTreeNode;
        this.props.nodeAccepted && this.props.nodeAccepted(node.data as RefCasesCaseTreeNode);
    }

    render(): React.ReactNode { (12)

        let yearsList = <div>{resources.RefCases_Years} (13)
            <CommonComboBox elements={this.state.years} selectedID={this.state.selectedYearID}
            onChange={(selectedElement: IComboBoxElement) => { (14)
                this.setState({ selectedYearID: selectedElement.id });
                this.setState({ showSectionsTree: false }, () => this.setState({ showSectionsTree: true })); (15)
                this.setState({ showCasesTree: false });
                this.forceUpdate();
            }}

            renderElementList={(elements, expanded) =>
                <PopoverComboBoxBodyContent mode={PopoverMode.BottomDropdown} isOpen={expanded} className="combobox-helper">
                    {elements}
                </PopoverComboBoxBodyContent>
            } />
            </div>;

        let sectionsTree = <div className={"ref-cases-dialog__tree"}> (16)
            <div className="tree-block">{resources.RefCases_Sections}
                <DynamicTree loadNodes={this.loadSectionsTree} treeHeight={300}
                nodeSelected={this.onSectionNodeSelected} > (17)
                </DynamicTree>
            </div>
        </div>;

        let casesTree = <div className={"ref-cases-dialog__tree"}> (18)
            <div className="tree-block">{resources.RefCases_Cases}
                <DynamicTree loadNodes={this.loadCasesTree} treeHeight={300}
                nodeSelected={this.onCaseNodeSelected} nodeAccepted={this.onCaseNodeAccepted} > (19)
                </DynamicTree>
            </div>
        </div>;

        return (
            <div>
                {this.state.showYearsList && yearsList}
                {this.state.showSectionsTree && sectionsTree}
                {this.state.showCasesTree && casesTree}
            </div>
        );
    }
}

.ref-cases-dialog__tree {
    border-bottom: 1px solid lightgray;
    padding-top: 10px;
    display: inline-block;
    width: 50%;
}