@angular/cdk/collections#SelectionModel TypeScript Examples

/** Open stix list selection window */
    public openStixList() {
        // filter tactic objects by domain
        let tactics = this.allObjects as Tactic[];
        let selectableObjects = tactics.filter(tactic => this.tacticInDomain(tactic));

        let dialogRef = this.dialog.open(AddDialogComponent, {
            maxWidth: "70em",
            maxHeight: "70em",
            data: {
                selectableObjects: selectableObjects,
                select: this.select,
                type: this.type,
                buttonLabel: "OK"
            }
        });

        let selectCopy = new SelectionModel(true, this.select.selected);
        let subscription = dialogRef.afterClosed().subscribe({
            next: (result) => {
                if (result) {
                    let tacticShortnames = this.select.selected.map(id => this.stixIDToShortname(id));
                    this.config.object[this.config.field] = tacticShortnames;

                    // reset tactic selection state
                    this.tacticState = [];
                    let allObjects = this.allObjects as Tactic[];
                    let tactics = this.select.selected.map(tacticID => allObjects.find(tactic => tactic.stixID == tacticID));
                    tactics.forEach(tactic => this.tacticState.push(tactic));
                } else { // user cancel
                    this.select = selectCopy; // reset selection
                }
            },
            complete: () => { subscription.unsubscribe(); }
        });
    }

/** Helper function to create the mutate Object */
  private createMutateObj(
    connection: AssetConnType,
    row: AdGroupRow,
    selArray: SelectionModel<AdGroupRow>
  ) {
    // Check if its added or removed
    let action = selArray.isSelected(row)
      ? MutateAction.ADD
      : MutateAction.REMOVE;

    let assetObj = this.createAssetObj(connection);
    let mutateObj: MutateRecord = {
      account: this._account.id,
      adgroup: row.id,
      action: action,
      asset: assetObj,
    };

    return mutateObj;
  }

public select: SelectionModel<string>;

public selectionModel: SelectionModel<string>;

private initSelectionModel() {
        return new SelectionModel(this.multiple, []);
    }

selection = new SelectionModel<RoomElement>(true, []);

selection = new SelectionModel<PeriodicElement>(true, []);

/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);

// 不要多选
  selectListSelection = new SelectionModel<FlatNode>(false);

selectListSelection: SelectionModel<FlatNode>;

description_sel = new SelectionModel<AdGroupRow>(true, []);

headline_sel = new SelectionModel<AdGroupRow>(true, []);

adgroup_sel = new SelectionModel<AdGroupRow>(true, []);

public selection = new SelectionModel<Employee>(true, []);

/** The selection for checklist */
  checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);

public parsePreview(collectionBundle: any, preview: Collection) {
        this.collectionBundle = collectionBundle; //save for later
        
        //build ID to category lookup
        let idToCategory = {};

        for (let category in preview.import_categories) {
            for (let stixId of preview.import_categories[category]) idToCategory[stixId] = category;
        }
        //build ID to name lookup
        let idToSdo = {};
        for (let object of collectionBundle.objects) {
            if ("id" in object) idToSdo[object.id] = {stix: object}
        }

        for (let object of collectionBundle.objects) {
            // look up the category for the object
            if (!(object.id in idToCategory)) {
                // does not belong to a change category
                this.unchanged_ids.push(object.id);
                continue;
            }
            // track that this object has changed
            this.changed_ids.push(object.id); 
            // determine the change category
            let category = idToCategory[object.id];
            // wrap the object as if it came from the back-end
            let raw: {[key: string]: any} = {stix: object, workspace: {}};
            // parse the object & add it to the appropriate category for rendering
            switch (object.type) {
                case "attack-pattern": //technique
                    this.object_import_categories.technique[category].push(new Technique(raw))
                break;
                case "x-mitre-tactic": //tactic
                    this.object_import_categories.tactic[category].push(new Tactic(raw))
                break;
                case "malware": //software
                case "tool": 
                    this.object_import_categories.software[category].push(new Software(object.type, raw))
                break;
                case "relationship": //relationship
                    if (object.source_ref in idToSdo) raw.source_object = idToSdo[object.source_ref]
                    if (object.target_ref in idToSdo) raw.target_object = idToSdo[object.target_ref]
                    let rel = new Relationship(raw)
                    this.object_import_categories.relationship[category].push(rel)
                break;
                case "course-of-action": //mitigation
                    this.object_import_categories.mitigation[category].push(new Mitigation(raw))
                break;
                case "x-mitre-matrix": //matrix
                    this.object_import_categories.matrix[category].push(new Matrix(raw))
                break;
                case "intrusion-set": //group
                    this.object_import_categories.group[category].push(new Group(raw))
                break;
                case "x-mitre-data-source": // data source
                    this.object_import_categories.data_source[category].push(new DataSource(raw))
                break;
                case "x-mitre-data-component": // data component
                    this.object_import_categories.data_component[category].push(new DataComponent(raw))
                break;
            }
        }
        // set up selection
        this.select =  new SelectionModel(true, this.changed_ids);
        
        this.stepper.next();
    }

// Selection stuff
    public selection: SelectionModel<string>;

public select: SelectionModel<string>;

/**
     *
     * Add row to the end of ordered list
     */
    public addRow() {
        let uniqueRows: StixObject[] = [];

        // Check if field of global objects is already in ordered list
        uniqueRows = this.config.globalObjects.filter(
        (x) => !this.list.includes(x.stixID)
        );

        if (uniqueRows) {
        // set up selection
        this.select = new SelectionModel(true);

        let prompt = this.dialog.open(AddDialogComponent, {
            maxWidth: '70em',
            maxHeight: '70em',
            data: {
            selectableObjects: uniqueRows,
            select: this.select,
            type: this.config.type,
            },
        });

        let subscription = prompt.afterClosed().subscribe({
            next: (result) => {
            if (result && this.select.selected) {
                for (let stixID of this.select.selected) {
                this.list.push(stixID);
                }
            }
            },
            complete: () => {
            subscription.unsubscribe();
            }, //prevent memory leaks
        });
        }
    }

// selection model (editType: 'stixList')
    public select: SelectionModel<string>;

ngOnInit(): void {
        this.selectControl = new FormControl({value: this.config.object[this.config.field], disabled: this.config.disabled ? this.config.disabled : false});
        this.inputControl = new FormControl(null, this.config.required ? [Validators.required] : undefined);
        if (this.config.field == 'platforms' 
         || this.config.field == 'tactic_type' 
         || this.config.field == 'permissions_required' 
         || this.config.field == 'effective_permissions' 
         || this.config.field == 'impact_type'
         || this.config.field == 'domains'
         || this.config.field == 'collection_layers'
         || this.config.field == 'data_sources') {
            if (!this.dataLoaded) {
                let data$ = this.restAPIConnectorService.getAllAllowedValues();
                this.sub = data$.subscribe({
                    next: (data) => {
                        let stixObject = this.config.object as StixObject;
                        this.allAllowedValues = data.find(obj => { return obj.objectType == stixObject.attackType; });
                        this.dataLoaded = true;
                    },
                    complete: () => { this.sub.unsubscribe(); }
                });
            }
        }
        else if (this.config.field == 'defense_bypassed') { } //any
        else if (this.config.field == 'system_requirements') { } //any
        else if (this.config.field == 'contributors') { } //any
        else if (this.config.field == 'tactics') {
            this.type = 'tactic';
            let subscription = this.restAPIConnectorService.getAllTactics().subscribe({
                next: (tactics) => { 
                    this.allObjects = tactics.data;

                    // retrieve currently selected tactics
                    let object = this.config.object as any;
                    let selectedTactics = this.shortnameToTactic(object.domains);
                    let selectedTacticIDs = selectedTactics.map(tactic => tactic.stixID);

                    // set up domain & tactic tracking
                    this.domainState = [];
                    this.tacticState = [];
                    object.domains.forEach(domain => this.domainState.push(domain));
                    selectedTactics.forEach(tactic => this.tacticState.push(tactic));

                    // set selection model with initial values
                    this.select = new SelectionModel<string>(true, selectedTacticIDs);
                    this.dataLoaded = true;
                },
                complete: () => { subscription.unsubscribe(); }
            })
        }
    }

public select: SelectionModel<string>;

/**
     * Handle the selection for revoking or un-revoking an object
     * @param event revoke selection
     */
    public revoke(event) {
        if (event.checked) { // revoke object
            // prompt for revoking object
            this.select = new SelectionModel<string>();
            let revokedDialog = this.dialog.open(AddDialogComponent, {
                maxWidth: "70em",
                maxHeight: "70em",
                data: {
                    selectableObjects: this.objects.filter(object => { return object.stixID !== this.editorService.stixId}),
                    type: this.editorService.type,
                    select: this.select,
                    selectionType: 'one',
                    title: "Select the revoking object",
                    buttonLabel: "revoke"
                }
            });
            let revokedSubscription = revokedDialog.afterClosed().subscribe({
                next: (result) => {
                    if (result && this.select.selected.length) { // target object selected
                        let target_id = this.select.selected[0];
                        this.deprecateObjects(true, target_id);
                    } else { // user cancelled or no object selected
                        this.revoked = false;
                    }
                },
                complete: () => { revokedSubscription.unsubscribe(); }
            });
        } else {
            // deprecate the 'revoked-by' relationship
            let revokedRelationships = this.relationships.filter(relationship => relationship.relationship_type == 'revoked-by');
            for (let relationship of revokedRelationships) {
                let other_obj: any;
                if (relationship.source_object.stix.id == this.object.stixID) other_obj = relationship.target_object.stix;
                else other_obj = relationship.source_object.stix;

                if (!this.isDeprecatedOrRevoked(other_obj)) {
                    relationship.deprecated = true;
                    relationship.save(this.restAPIService);
                }
            }
            // un-revoke object
            this.object.revoked = false;
            this.save();
        }
    }

selection = new SelectionModel<Torrent>(true, []);

/** The selection for checklist */
  checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);

ngOnInit() {
        this.filterOptions = []
        // parse the config
        let controls_before = [] // control columns which occur before the main columns
        let controls_after = []; // control columns which occur after the main columns
        let sticky_allowed = !(this.config.rowAction && this.config.rowAction.position == "start");
        if ("type" in this.config) { 
            // this.filter.push("type." + this.config.type); 
            // set columns according to type
            switch(this.config.type.replace(/_/g, '-')) {
                case "collection":
                case "collection-created":
                    this.addColumn("name", "name", "plain", sticky_allowed, ["name"]);
                    this.addColumn("version", "version", "version");
                    this.addColumn("released?", "release", "plain", null, ["text-label"]);
                    this.addColumn("modified", "modified", "timestamp");
                    this.addColumn("created", "created", "timestamp");
                    this.tableDetail = [{
                        "field": "description",
                        "display": "descriptive"
                    }]
                    break;
                case "collection-imported":
                    this.addColumn("name", "name", "plain", sticky_allowed, ["name"]);
                    this.addColumn("version", "version", "version");
                    this.addColumn("imported", "imported", "timestamp");
                    this.addColumn("modified", "modified", "timestamp");
                    this.tableDetail = [{
                        "field": "description",
                        "display": "descriptive"
                    }]
                    break;
                case "mitigation":
                case "tactic":
                    this.addColumn("", "workflow", "icon");
                    this.addColumn("", "state", "icon");
                    this.addColumn("ID", "attackID", "plain", false);
                    this.addColumn("name", "name", "plain", sticky_allowed, ["name"]);
                    this.addColumn("domain", "domains", "list");
                    this.addColumn("version", "version", "version");
                    this.addColumn("modified","modified", "timestamp");
                    this.addColumn("created", "created", "timestamp");
                    this.tableDetail = [{
                        "field": "description",
                        "display": "descriptive"
                    }]
                    break;
                case "matrix":
                    this.addColumn("", "workflow", "icon");
                    this.addColumn("", "state", "icon");
                    this.addColumn("name", "name", "plain", sticky_allowed, ["name"]);
                    this.addColumn("version", "version", "version");
                    this.addColumn("modified","modified", "timestamp");
                    this.addColumn("created", "created", "timestamp");
                    this.tableDetail = [{
                        "field": "description",
                        "display": "descriptive"
                    }]
                    break;
                case "group":
                    this.addColumn("", "workflow", "icon");
                    this.addColumn("", "state", "icon");
                    this.addColumn("ID", "attackID", "plain", false);
                    this.addColumn("name", "name", "plain", sticky_allowed, ["name"]);
                    this.addColumn("associated groups", "aliases", "list");
                    this.addColumn("version", "version", "version");
                    this.addColumn("modified","modified", "timestamp");
                    this.addColumn("created", "created", "timestamp");
                    this.tableDetail = [{
                        "field": "description",
                        "display": "descriptive"
                    }]
                    break;
                case "software":
                    this.addColumn("", "workflow", "icon");
                    this.addColumn("", "state", "icon");
                    this.addColumn("ID", "attackID", "plain", false);
                    this.addColumn("name", "name", "plain", sticky_allowed, ["name"]);
                    this.addColumn("type", "type", "plain");
                    this.addColumn("domain", "domains", "list");
                    this.addColumn("version", "version", "version");
                    this.addColumn("modified","modified", "timestamp");
                    this.addColumn("created", "created", "timestamp");
                    this.tableDetail = [{
                        "field": "description",
                        "display": "descriptive"
                    }]
                    break;
                case "data-source":
                case "technique":
                    this.addColumn("", "workflow", "icon");
                    this.addColumn("", "state", "icon");
                    this.addColumn("ID", "attackID", "plain", false);
                    this.addColumn("name", "name", "plain", sticky_allowed, ["name"]);
                    this.addColumn("platforms", "platforms", "list");
                    this.addColumn("domain", "domains", "list");
                    this.addColumn("version", "version", "version");
                    this.addColumn("modified","modified", "timestamp");
                    this.addColumn("created", "created", "timestamp");
                    this.tableDetail = [{
                        "field": "description",
                        "display": "descriptive"
                    }]
                    break;
                case "data-component":
                    this.addColumn("name", "name", "plain", sticky_allowed, ["name"]);
                    this.addColumn("domain", "domains", "list");
                    this.addColumn("version", "version", "version");
                    this.addColumn("modified","modified", "timestamp");
                    this.addColumn("created", "created", "timestamp");
                    this.tableDetail = [{
                        "field": "description",
                        "display": "descriptive"
                    }]
                    break;
                case "relationship":
                    this.addColumn("", "state", "icon");
                    if (this.config.relationshipType && this.config.relationshipType !== "detects") {
                        this.addColumn("source", "source_ID", "plain");
                        this.addColumn("", "source_name", "plain", this.config.targetRef? sticky_allowed: false, ["relationship-name"]);// ["name", "relationship-left"]);
                    } else this.addColumn("source", "source_name", "plain", this.config.targetRef? sticky_allowed: false, ["relationship-name"]);
                    this.addColumn("type", "relationship_type", "plain", false, ["text-deemphasis", "relationship-joiner"]);
                    this.addColumn("target", "target_ID", "plain");
                    this.addColumn("", "target_name", "plain", this.config.sourceRef? sticky_allowed: false, ["relationship-name"]);// ["name", "relationship-right"]);
                    if (!(this.config.relationshipType && this.config.relationshipType == "subtechnique-of")) this.addColumn("description", "description", "descriptive", false);
                    // controls_after.push("open-link")
                    break;
                default:
                    this.addColumn("type", "attackType", "plain");
                    this.addColumn("modified","modified", "timestamp");
                    this.addColumn("created", "created", "timestamp");
            }
        }
        else {
            // this.filterOptions.push({
            //     "name": "type", //TODO make more extensible to additional types
            //     "disabled": "type" in this.config,
            //     "values": this.types
            // })
            this.groupBy = ["type"];
            this.addColumn("type", "attackType", "plain");
            this.addColumn("ID", "attackID", "plain", false);
            this.addColumn("name", "name", "plain", true, ["name"]);
            this.addColumn("modified","modified", "timestamp");
            this.addColumn("created", "created", "timestamp");
        }
        
        
        if ("relatedTo" in this.config) {
            
        } 
        if ("query" in this.config) {
            
        }
        //controls cols setup
        //selection setup
        if ("select" in this.config && this.config.select != "disabled") {
            if ("selectionModel" in this.config) {
                this.selection = this.config.selectionModel;
            } else {
                this.selection = new SelectionModel<string>(this.config.select == "many");
            }
            controls_before.unshift("select") // add select column to view
        }
        // open-link icon setup
        if (this.config.clickBehavior && this.config.clickBehavior == "dialog") {
            controls_after.push("open-link")
        }
        // row action setup
        if (this.config.rowAction) {
            if (this.config.rowAction.position == "start") controls_before.push("start-action");
            else controls_after.push("end-action");
        }
        this.tableColumns_controls = controls_before.concat(this.tableColumns, controls_after);
        // filter setup
        this.filterOptions.push({
            "name": "workflow status",
            "disabled": "status" in this.config,
            "values": this.statuses
        })
        this.filterOptions.push({
            "name": "state",
            "disabled": "status" in this.config,
            "values": this.states
        })
        // get data from config (if we are not connecting to back-end)
        if ("stixObjects" in this.config && !(this.config.stixObjects instanceof Observable)) {
            this.totalObjectCount = this.config.stixObjects.length;
            this.applyControls();
        }
    }