Jhork/custom select order by

packages/soql-builder-ui/src/modules/querybuilder/orderBy/orderBy.html

@@ -20,12 +20,11 @@
       >
     </div>
     <div class="section_selection-container">
-      <select name="orderby-select" class="select-long" data-el-orderby-field>
-        <option value="" class="placeholder" data-el-default-option>{defaultOptionText}</option>
-        <template for:each={orderByFields} for:item="field">
-          <option key={field} value={field}>{field}</option>
-        </template>
-      </select>
+      <querybuilder-custom-select
+        is-loading={isLoading}
+        all-options={orderByFields}
+        placeholder-text={selectPlaceHolderText}
+      ></querybuilder-custom-select>
       <div class="group-orderby-modifiers">
         <span class="group-orderby-order">
           <select id="orderby-order" name="orderby-order" data-el-orderby-order>

packages/soql-builder-ui/src/modules/querybuilder/orderBy/orderBy.test.ts

@@ -32,16 +32,16 @@ describe('OrderBy should', () => {
     const handler = jest.fn();
     orderBy.addEventListener('orderbyselected', handler);
     const selectField = orderBy.shadowRoot.querySelector(
-      '[data-el-orderby-field]'
+      'querybuilder-custom-select'
     );
-    selectField.value = 'foo';
+    selectField.selectedOptions = ['foo'];
     const button = orderBy.shadowRoot.querySelector('[data-el-add-button]');
 
     // make the magic happen
     button.click();
 
     expect(handler).toHaveBeenCalled();
-    expect(handler.mock.calls[0][0].detail.field).toEqual(selectField.value);
+    expect(handler.mock.calls[0][0].detail.field).toEqual(selectField.value[0]);
     expect(handler.mock.calls[0][0].detail.order).toEqual('');
     expect(handler.mock.calls[0][0].detail.nulls).toEqual('');
   });
@@ -52,9 +52,9 @@ describe('OrderBy should', () => {
     const handler = jest.fn();
     orderBy.addEventListener('orderbyselected', handler);
     const selectField = orderBy.shadowRoot.querySelector(
-      '[data-el-orderby-field]'
+      'querybuilder-custom-select'
     );
-    selectField.value = 'foo';
+    selectField.selectedOptions = ['foo'];
     const selectOrder = orderBy.shadowRoot.querySelector(
       '[data-el-orderby-order]'
     );
@@ -69,7 +69,7 @@ describe('OrderBy should', () => {
     button.click();
 
     expect(handler).toHaveBeenCalled();
-    expect(handler.mock.calls[0][0].detail.field).toEqual(selectField.value);
+    expect(handler.mock.calls[0][0].detail.field).toEqual(selectField.value[0]);
     expect(handler.mock.calls[0][0].detail.order).toEqual(selectOrder.value);
     expect(handler.mock.calls[0][0].detail.nulls).toEqual(selectNulls.value);
   });
@@ -80,9 +80,9 @@ describe('OrderBy should', () => {
     const handler = jest.fn();
     orderBy.addEventListener('orderbyselected', handler);
     const selectField = orderBy.shadowRoot.querySelector(
-      '[data-el-orderby-field]'
+      'querybuilder-custom-select'
     );
-    selectField.value = '';
+    selectField.selectedOptions = [''];
     const button = orderBy.shadowRoot.querySelector('[data-el-add-button]');
 
     // make the magic happen
@@ -117,31 +117,11 @@ describe('OrderBy should', () => {
     orderBy.selectedOrderByFields = [{ field: 'foo' }];
 
     return Promise.resolve().then(() => {
-      selectedFieldEl = orderBy.shadowRoot.querySelectorAll(
-        '.selected-field'
-      );
+      selectedFieldEl = orderBy.shadowRoot.querySelectorAll('.selected-field');
       expect(selectedFieldEl.length).toBe(1);
     });
   });
 
-  it('alert user when loading', async () => {
-    orderBy.selectedFields = [];
-    orderBy.fields = [];
-    document.body.appendChild(orderBy);
-    expect(orderBy.isLoading).toEqual(false);
-    let defaultOption = orderBy.shadowRoot.querySelector(
-      '[data-el-default-option]'
-    );
-    expect(defaultOption.innerHTML).toContain('Select');
-    orderBy.isLoading = true;
-    return Promise.resolve().then(() => {
-      defaultOption = orderBy.shadowRoot.querySelector(
-        '[data-el-default-option]'
-      );
-      expect(defaultOption.innerHTML.toLowerCase()).toContain('loading');
-    });
-  });
-
   it('alert user when error', async () => {
     document.body.appendChild(orderBy);
     expect(orderBy.hasError).toEqual(false);

packages/soql-builder-ui/src/modules/querybuilder/orderBy/orderBy.ts

@@ -13,6 +13,7 @@ export default class OrderBy extends LightningElement {
   @api selectedOrderByFields: JsonMap[] = [];
   @api hasError = false; // currently not used, no specific order by errors
   @api isLoading = false;
+  selectPlaceHolderText = 'Search fields...'; //i18n
 
   get defaultOptionText() {
     // TODO: i18n
@@ -21,13 +22,19 @@ export default class OrderBy extends LightningElement {
 
   handleOrderBySelected(e) {
     e.preventDefault();
-    const orderbyEl = this.template.querySelector('[data-el-orderby-field]');
+    const orderbyFieldEl = this.template.querySelector(
+      'querybuilder-custom-select'
+    );
     const orderEl = this.template.querySelector('[data-el-orderby-order]');
     const nullsEl = this.template.querySelector('[data-el-orderby-nulls]');
-    if (orderbyEl && orderbyEl.value && orderbyEl.value.length) {
+    if (
+      orderbyFieldEl &&
+      orderbyFieldEl.value[0] &&
+      orderbyFieldEl.value.length
+    ) {
       const orderBySelectedEvent = new CustomEvent('orderbyselected', {
         detail: {
-          field: orderbyEl.value,
+          field: orderbyFieldEl.value[0],
           order: orderEl.value,
           nulls: nullsEl.value
         }