syinpoSlicer/src/managers/selectorManager.ts

"Use strict";
import "../../node_modules/bootstrap/dist/css/bootstrap.css";
import "../../node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css";
import powerbi from "powerbi-visuals-api";
import {ISelectorManager,ISelectorManagerConstructor, IFilterManager} from "../visual/visualInterfaces";
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
/*
负责页面上选择器的展示
*/
export class SelectorManager implements ISelectorManager{
    public selectorContainer : Selection<HTMLElement>;
    private selector:ISelector;
    public filterManager:IFilterManager;
    private categories: powerbi.DataViewCategoryColumn;
    private defaultSelect: powerbi.DataViewValueColumn;
    private defaultStart: powerbi.DataViewValueColumn;
    private defaultEnd: powerbi.DataViewValueColumn;
    constructor(selectorContainer:Selection<HTMLElement>,filterManager:IFilterManager){
        console.debug("selectorManager constructor start");
        this.selectorContainer=selectorContainer;
        this.filterManager=filterManager;
    }
    public switchSelector<T extends ISelector>(classSelector:new ()=>T){
        let newSelector=new classSelector();
        this.selector?.dispose();
        this.selector=newSelector;
    }
    updateData(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn){


        if(!this.selector){
            let fieldType=categories.source.type;
            if(fieldType.text){
                this.selector=new DropDownSelector(this);
            }else if(fieldType.numeric){
                this.selector=new DropDownSelector(this);
            }else if(fieldType.dateTime){
                this.selector=new CalendarSelector(this);
            }else{
                throw "only receive text/num/datetime field";
            }
        }
        

        this.selector.update(categories, defaultSelect, defaultStart, defaultEnd);
    };
    public filterStringField(selection:string[]){

    };
}

interface ISelector{
    update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn);
    dispose():void;
}

abstract class Selector implements ISelector{
    constructor(manager: ISelectorManager){
        console.debug("Abstract selector:","constructor start");
        this.manager=manager;
        this.createView();
    }
    protected abstract createView():void;
    public abstract dispose():void;
    protected readonly manager:ISelectorManager;
    public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
}
class DropDownSelector extends Selector{
    private dropDown:Selection<HTMLElement>;
    protected createView() {
        console.debug('dropDownViewManager','createView start');
        
        this.dropDown=this.manager.selectorContainer.append('div').classed('dropDown-selector',true)
            .append('select').attr('id','dropDown-select').attr('multiple','true');
        console.debug('dropDownViewManager','createView end');
    }
    public dispose(){
        this.dropDown.remove();
    }
    public update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
        console.debug('dropDownViewManager','update start');
        let filterManager:IFilterManager=this.manager.filterManager;
        
        $('#dropDown-select').multiselect({
            onChange:function(){
                let selectedValues:string[]=[];
                $('option:selected').map(function(a,item){
                    selectedValues.push(item.textContent);
                    console.debug('item:',item.textContent);
                    filterManager.filterStringField(selectedValues);
                });
            },
            maxHeight:200,
            includeSelectAllOption:true
        });
        let options=[];
        field.values.map((item)=>{
            options.push({
                label:item.toString()
            });
        });
        $('#dropDown-select').multiselect('dataprovider',options);
        $('.dropDown-selector').css('overflow','visible').css('z-index',1000).css('position','relative');
        $('.dropdown-menu').css('overflow','flow').css('z-index',1000).css('position','relative');
        //$('#dropDown-select').multiselect('rebuild');

        console.debug("dropDown:",this.dropDown);
        
        console.debug('dropDownViewManager','update end');
    }
}
class ListSelector extends Selector{
    public dispose() {
        throw new Error("Method not implemented.");
    }
    protected createView() {
        throw new Error("Method not implemented.");
    }
    public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
        console.debug('ListSelector','updateView');
        let dropDownSelector=this.manager.selectorContainer.append("select").classed("listSelector");
    }
}
class CalendarSelector extends Selector{
    public dispose() {
        throw new Error("Method not implemented.");
    }
    protected createView() {
        throw new Error("Method not implemented.");
    }
    public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
        console.debug('calendarViewManager','updateView');
        let dropDownSelector=this.manager.selectorContainer.append("select").classed("listSelector");
    }
}