#292 added ComboBoxListItemPicker

Author: Marcin Wojciechowski

config/karma.config.js

@@ -20,6 +20,9 @@ module.exports = function (config) {
   };
   config.plugins.push(htmlReporter);
 
+  config.set({
+    framework: ['jasmine']
+  })
   // Add the remap-coverage - code coverage for the original files
   config.reporters.push('remap-coverage');
   config.coverageReporter = {

src/common/dal/ListItemRepository.ts

@@ -0,0 +1,34 @@
+import { RequestClient } from "@pnp/common/src/netutil";
+
+export class ListItemRepository {
+    constructor(protected SiteUrl: string, protected SPClient: RequestClient) {
+
+    }
+    /**
+     * 
+     * @param filterText text value of the filter part of oData query 'Id eq 1'
+     * @param listId 
+     * @param internalColumnName 
+     * @param keyInternalColumnName 
+     * @param webUrl 
+     * @param top 
+     */
+    public async getListItemsByFilterClause(filterText: string, listId: string, internalColumnName: string, keyInternalColumnName?: string, webUrl?: string, top?: number): Promise<any[]> {
+        let returnItems: any[];
+        try {
+            const webAbsoluteUrl = !webUrl ? this.SiteUrl : webUrl;
+            const apiUrl = `${webAbsoluteUrl}/_api/web/lists('${listId}')/items?$select=${keyInternalColumnName || 'Id'},${internalColumnName}&$filter=${filterText}`;
+            const data = await this.SPClient.get(apiUrl);
+            if (data.ok) {
+                const results = await data.json();
+                if (results && results.value && results.value.length > 0) {
+                    return results.value;
+                }
+            }
+
+            return [];
+        } catch (error) {
+            return Promise.reject(error);
+        }
+    }
+}

src/common/mocks/RequestClientMock.ts

@@ -0,0 +1,46 @@
+import { RequestClient, FetchOptions } from "@pnp/common/src/netutil";
+
+export class RequestClientMock implements RequestClient {
+    public Requests: { url: string, method: string, options?: FetchOptions, resultString: string }[] = [];
+    public OnRequest: (url: string, method: string, options?: FetchOptions) => void;
+    public fetch(url: string, options?: FetchOptions): Promise<Response> {
+        let mockedResponse = this.Requests.filter(req => req.method === options.method && req.url == url)[0];
+        let response: Response;
+        if (mockedResponse) {
+            response = new Response(mockedResponse.resultString, {
+                status: 200,
+                statusText: "Ok"
+            });
+        }
+        else {
+            response = new Response(null, {
+                status: 404,
+                statusText: "Not fount",
+            });
+        }
+        return Promise.resolve(response);
+    }
+    public fetchRaw(url: string, options?: FetchOptions): Promise<Response> {
+        return this.fetch(url,options);
+    }
+    public get(url: string, options?: FetchOptions): Promise<Response> {
+        options = options || {};
+        options.method = "GET";
+        return this.fetch(url,options);
+    }
+    public post(url: string, options?: FetchOptions): Promise<Response> {
+        options = options || {};
+        options.method = "POST";
+        return this.fetch(url,options);
+    }
+    public patch(url: string, options?: FetchOptions): Promise<Response> {
+        options = options || {};
+        options.method = "PATCH";
+        return this.fetch(url,options);
+    }
+    public delete(url: string, options?: FetchOptions): Promise<Response> {
+        options = options || {};
+        options.method = "DELETE";
+        return this.fetch(url,options);
+    }
+}

src/controls/listItemPicker/ComboBoxListItemPicker.test.tsx

@@ -0,0 +1,184 @@
+/// <reference types="sinon" />
+
+import * as React from 'react';
+import { assert, expect } from 'chai';
+import { mount, ReactWrapper } from 'enzyme';
+import { ComboBoxListItemPicker } from './ComboBoxListItemPicker';
+import { RequestClientMock } from '../../common/mocks/RequestClientMock';
+
+declare const sinon;
+
+let mockHttpClient: RequestClientMock = new RequestClientMock();
+mockHttpClient.Requests.push({
+  url: "/sites/test-site/_api/web/lists('TestId')/items?$select=Id,Title&$filter=Id gt 0",
+  method: "GET",
+  resultString: JSON.stringify({ "odata.metadata": "", "value": [{ "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "9624204a-c049-49a1-8a18-a417872f8883", "odata.etag": "\"2\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(1)", "Id": 1, "ID": 1, "Title": "Test 1" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "8b0e4ce8-f1e4-4b17-8f95-1ea7d63fefd6", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(2)", "Id": 2, "ID": 2, "Title": "Test 2" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "62aea125-e442-44cf-ab08-c555ffdd2798", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(3)", "Id": 3, "ID": 3, "Title": "Test 3" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "a25c55b2-9a4f-4976-8a12-f77393abe437", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(4)", "Id": 4, "ID": 4, "Title": "Test 4" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "8c57be67-a9a8-46c8-8954-6e51d3464be2", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(5)", "Id": 5, "ID": 5, "Title": "Test 5" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "d130664b-4e28-4ae5-b567-a3189f887922", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(6)", "Id": 6, "ID": 6, "Title": "Test 6" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "6e333b93-3f19-40ee-943c-19817193a3de", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(7)", "Id": 7, "ID": 7, "Title": "Test 7" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "a0063d1f-66ab-461b-8032-7dd38d7b8749", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(8)", "Id": 8, "ID": 8, "Title": "Test 8" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "8aca4c7c-4922-45e9-9f03-7d4a4bb6f926", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(9)", "Id": 9, "ID": 9, "Title": "Test 9" }, { "odata.type": "SP.Data.Test_x0020_listListItem", "odata.id": "f352a0c8-711b-47e4-9990-2a7121f961c3", "odata.etag": "\"1\"", "odata.editLink": "Web/Lists(guid'490fae3c-f8cb-4b50-9737-f2c94f6b6727')/Items(10)", "Id": 10, "ID": 10, "Title": "Test 10" }] })
+});
+describe('<ComboBoxListItemPicker />', () => {
+  it("Should render initial data", () => {
+    return new Promise((resolve, error) => {
+      let comboBox = mount(<ComboBoxListItemPicker
+        columnInternalName="Title"
+        spHttpClient={mockHttpClient}
+        webUrl="/sites/test-site"
+        filter="Id gt 0"
+        listId="TestId"
+        itemLimit={20}
+        onInitialized={() => {
+         
+          expect(comboBox.state('availableOptions')).to.have.length(10);
+          resolve();
+        }}
+        onSelectedItem={(item) => { }} />);
+    });
+  });
+  it("Should call onSelectedItem", () => {
+    return new Promise((resolve, error) => {
+      let comboBox = mount(<ComboBoxListItemPicker
+        columnInternalName="Title"
+        spHttpClient={mockHttpClient}
+        webUrl="/sites/test-site"
+        filter="Id gt 0"
+        listId="TestId"
+        itemLimit={20}
+        onInitialized={() => {
+         
+          let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
+          ddBtn.simulate('click');
+          //actual list is not part of the component
+          let checkBoxBtn = document.querySelectorAll('.ms-ComboBox-option')[3];
+          (checkBoxBtn as HTMLButtonElement).click();
+          
+          //ddBtn.simulate('click');
+        }}
+        onSelectedItem={(item) => {
+          expect(item.Id).to.equal(4);
+          
+          resolve();
+        }} />);
+    });
+  });
+  it("Should initialize with default selection (id)", () => {
+    return new Promise((resolve, error) => {
+      let comboBox = mount(<ComboBoxListItemPicker
+        columnInternalName="Title"
+        spHttpClient={mockHttpClient}
+        webUrl="/sites/test-site"
+        defaultSelectedItems={[1]}
+        filter="Id gt 0"
+        listId="TestId"
+        itemLimit={20}
+        onInitialized={() => {
+          let ddInput = comboBox.find('.ms-ComboBox-Input').first();
+          expect((ddInput.getNode() as any).value).to.be.equal("Test 1");
+          
+          resolve();
+        }}
+        onSelectedItem={(item) => {
+        }} />);
+    });
+  });
+  it("Should initialize with default selection (object)", () => {
+    return new Promise((resolve, error) => {
+      let comboBox = mount(<ComboBoxListItemPicker
+        columnInternalName="Title"
+        spHttpClient={mockHttpClient}
+        webUrl="/sites/test-site"
+        defaultSelectedItems={[{Id:1, Title: "Test 1"}]}
+        filter="Id gt 0"
+        listId="TestId"
+        itemLimit={20}
+        onInitialized={() => {
+         
+          let ddInput = comboBox.find('.ms-ComboBox-Input').first();
+          expect((ddInput.getNode() as any).value).to.be.equal("Test 1");
+          
+          resolve();
+        }}
+        onSelectedItem={(item) => {
+        }} />);
+    });
+  });
+  it("Should call onSelectedItem (multi)", () => {
+    return new Promise((resolve, error) => {
+      let comboBox = mount(<ComboBoxListItemPicker
+        columnInternalName="Title"
+        spHttpClient={mockHttpClient}
+        webUrl="/sites/test-site"
+        filter="Id gt 0"
+        listId="TestId"
+        itemLimit={20}
+        multiSelect={true}
+        onInitialized={() => {
+         
+          let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
+          ddBtn.simulate('click');
+          //actual list is not part of the component
+          let checkBoxBtn = document.querySelectorAll('.ms-ComboBox-option')[3];
+          (checkBoxBtn as HTMLButtonElement).click();
+          //ddBtn.simulate('click');
+        }}
+        onSelectedItem={(item) => {
+          expect(item.Id).to.equal(4);
+          expect(item.selected).to.be.equal(true);
+          
+          let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
+          ddBtn.simulate('click');
+          resolve();
+        }} />);
+    });
+  });
+  it("Should initialize with default selection (multi) (object)", () => {
+    return new Promise((resolve, error) => {
+      let comboBox = mount(<ComboBoxListItemPicker
+        columnInternalName="Title"
+        spHttpClient={mockHttpClient}
+        webUrl="/sites/test-site"
+        defaultSelectedItems={[{Id:1, Title: "Test 1"},{ Id:2, Title: "Test 2"}]}
+        filter="Id gt 0"
+        listId="TestId"
+        multiSelect={true}
+        itemLimit={20}
+        onInitialized={() => {
+         
+          let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
+          ddBtn.simulate('click');
+          let checkBoxBtn = document.querySelectorAll('.ms-ComboBox-option')[0];
+          expect(checkBoxBtn.classList.contains("is-checked")).to.be.equal(true);
+          let ddInput = comboBox.find('.ms-ComboBox-Input').first();
+          expect((ddInput.getNode() as any).value).to.be.equal("Test 1, Test 2");
+          ddBtn.simulate('click');
+          resolve();
+        }}
+        onSelectedItem={(item) => {
+        }} />);
+    });
+  });
+  it("Should initialize with default selection (multi) (id)", () => {
+    return new Promise((resolve, error) => {
+      let comboBox = mount(<ComboBoxListItemPicker
+        columnInternalName="Title"
+        spHttpClient={mockHttpClient}
+        webUrl="/sites/test-site"
+        defaultSelectedItems={[1,2]}
+        filter="Id gt 0"
+        listId="TestId"
+        itemLimit={20}
+        multiSelect={true}
+        onInitialized={() => {
+         
+          let ddBtn = comboBox.find('.ms-Button-flexContainer').first();
+          ddBtn.simulate('click');
+          let checkBoxBtn = document.querySelectorAll('.ms-ComboBox-option')[0];
+          expect(checkBoxBtn.classList.contains("is-checked")).to.be.equal(true);
+
+          let ddInput = comboBox.find('.ms-ComboBox-Input').first();
+          expect((ddInput.getNode() as any).value).to.be.equal("Test 1, Test 2");
+          ddBtn.simulate('click');
+          resolve();
+        }}
+        onSelectedItem={(item) => {
+        }} />);
+    });
+  });
+});

src/controls/listItemPicker/ComboBoxListItemPicker.tsx

@@ -0,0 +1,113 @@
+import * as strings from 'ControlStrings';
+import * as React from "react";
+import { Label } from "office-ui-fabric-react/lib/Label";
+import { IComboBoxListItemPickerProps, IComboBoxListItemPickerState } from ".";
+import * as telemetry from '../../common/telemetry';
+import { ComboBox, IComboBoxOption } from "office-ui-fabric-react/lib/ComboBox";
+import { ListItemRepository } from '../../common/dal/ListItemRepository';
+
+
+export class ComboBoxListItemPicker extends React.Component<IComboBoxListItemPickerProps, IComboBoxListItemPickerState> {
+  private _listItemRepo: ListItemRepository;
+  public SelectedItems: any[];
+
+  constructor(props: IComboBoxListItemPickerProps) {
+    super(props);
+
+    telemetry.track('ComboBoxListItemPicker', {});
+
+    // States
+    this.state = {
+      noresultsFoundText: !this.props.noResultsFoundText ? strings.genericNoResultsFoundText : this.props.noResultsFoundText,
+      showError: false,
+      errorMessage: "",
+      suggestionsHeaderText: !this.props.suggestionsHeaderText ? strings.ListItemPickerSelectValue : this.props.suggestionsHeaderText
+    };
+
+    // Get SPService Factory
+    this._listItemRepo = new ListItemRepository(this.props.webUrl, this.props.spHttpClient);
+
+    this.SelectedItems = [];
+    this.loadOptions();
+  }
+
+  protected async loadOptions(): Promise<void> {
+    let query = "";
+    query += this.props.filter || "Id gt 0";
+    let keyColumnName = this.props.keyColumnInternalName || "Id";
+    let listItems = await this._listItemRepo.getListItemsByFilterClause(query,
+      this.props.listId,
+      this.props.columnInternalName,
+      this.props.keyColumnInternalName,
+      this.props.webUrl,
+      this.props.itemLimit || 100);
+
+    let options = listItems.map(option => {
+      return {
+        key: option[keyColumnName],
+        text: option[this.props.columnInternalName || "Id"]
+      };
+    });
+    if (this.props.defaultSelectedItems) {
+      //if passed only ids
+      if (!isNaN(this.props.defaultSelectedItems[0])) {
+        this.SelectedItems = options.filter(opt => this.props.defaultSelectedItems.indexOf(opt.key) >= 0);
+      }
+      else {
+        this.SelectedItems = options.filter(opt => this.props.defaultSelectedItems.map(selected => selected[keyColumnName]).indexOf(opt.key) >= 0);
+      }
+    }
+    this.setState({
+      availableOptions: options
+    });
+    if(this.props.onInitialized){
+      this.props.onInitialized();
+    }
+  }
+
+  public componentDidUpdate(prevProps: IComboBoxListItemPickerProps, prevState: IComboBoxListItemPickerState): void {
+    if (this.props.listId !== prevProps.listId) {
+      this.SelectedItems = [];
+    }
+    //this.loadOptions();
+  }
+
+  /**
+   * Render the field
+   */
+  public render(): React.ReactElement<IComboBoxListItemPickerProps> {
+    const { className, disabled, itemLimit } = this.props;
+
+    return (this.state.availableOptions ? (
+      <div>
+        <ComboBox
+          options={this.state.availableOptions}
+          autoComplete={this.props.autoComplete}
+          comboBoxOptionStyles={this.props.comboBoxOptionStyles}
+          allowFreeform={this.props.allowFreeform}
+          keytipProps={this.props.keytipProps}
+          onMenuDismissed={this.props.onMenuDismiss}
+          onMenuOpen={this.props.onMenuOpen}
+          text={this.props.text}
+          onChanged={this.onChanged.bind(this)}
+          multiSelect={this.props.multiSelect}
+          defaultSelectedKey={this.SelectedItems.map(item=>item.key) || []}
+          className={className}
+          disabled={disabled} />
+
+        <Label style={{ color: '#FF0000' }}> {this.state.errorMessage} </Label>
+      </div>) : <span>Loading...</span>
+    );
+  }
+
+  /**
+   * On Selected Item
+   */
+  private onChanged(option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any): void {
+    this.props.onSelectedItem({
+      [this.props.keyColumnInternalName || "Id"]: option.key,
+      [this.props.columnInternalName]: option.text,
+      selected: option.selected
+    });
+  }
+}