Jhork/where custom select

packages/soql-builder-ui/src/modules/querybuilder/customSelect/customSelect.css

@@ -38,8 +38,7 @@ main.custom-select {
 
 .select__input {
   width: 90%;
-  height: 1em;
-  padding: 4px;
+  height: 1.25em;
   margin-left: 24px;
   border: none;
 }

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

@@ -336,7 +336,6 @@ describe('Tooling Model Service', () => {
     });
   });
 
-
   it('Receive SOQL Text from editor (with comments)', () => {
     const soqlText =
       '// This is a comment\n\n\n// Another comment\n\nSELECT Id FROM Foo';
@@ -370,5 +369,4 @@ describe('Tooling Model Service', () => {
       '// This is a comment\n\n\n// Another comment\n\n'
     );
   });
-
 });

packages/soql-builder-ui/src/modules/querybuilder/whereModifierGroup/whereModifierGroup.css

@@ -19,24 +19,6 @@
 .modifier__item {
   margin-right: 4px;
 }
-/*
-setting a width will
-prevent select el from
-expanding to fit content
- */
-.modifier__fields {
-  width: 100%;
-  flex-grow: 2;
-}
-
-.modifier__operator {
-  flex-grow: 1;
-}
-
-.modifier__criteria {
-  padding-left: 4px;
-  flex-grow: 1;
-}
 
 .modifier__operator.tooltip--error select,
 .modifier__criteria.tooltip--error input {

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

@@ -1,24 +1,14 @@
 <template>
   <div class="modifier__group">
     <!-- FIELDS -->
-    <select
-      class="modifier__item modifier__fields"
-      name="fields"
-      onchange={handleSelectionEvent}
-      data-el-where-field
-    >
-      <template if:true={hasSelectedField}>
-        <option value={_selectedField}>{_selectedField}</option>
-      </template>
-      <template if:false={hasSelectedField}>
-        <option value="" class="placeholder" data-el-default-option>
-          {defaultFieldOptionText}
-        </option>
-      </template>
-      <template for:each={filteredFields} for:item="field">
-        <option key={field} value={field}>{field}</option>
-      </template>
-    </select>
+    <div class="modifier__item">
+      <querybuilder-custom-select
+        is-loading={isLoading}
+        all-options={allFields}
+        selected-options={_selectedField}
+        placeholder-text={selectPlaceHolderText}
+      ></querybuilder-custom-select>
+    </div>
     <!-- OPERATORS -->
     <span
       data-text={operatorErrorMessage}

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

@@ -22,8 +22,8 @@ describe('WhereModifierGroup should', () => {
   let modifierGroup;
 
   function getModifierElements() {
-    const selectFieldEl: HTMLSelectElement = modifierGroup.shadowRoot.querySelector(
-      '[data-el-where-field]'
+    const selectFieldEl = modifierGroup.shadowRoot.querySelector(
+      'querybuilder-custom-select'
     );
     const selectOperatorEl: HTMLSelectElement = modifierGroup.shadowRoot.querySelector(
       '[data-el-where-operator-input]'
@@ -40,21 +40,25 @@ describe('WhereModifierGroup should', () => {
   }
 
   function setModifiersToHaveAValue(scope: string) {
-    const { selectFieldEl, selectOperatorEl, criteriaInputEl } = getModifierElements();
+    const {
+      selectFieldEl,
+      selectOperatorEl,
+      criteriaInputEl
+    } = getModifierElements();
 
     switch (scope) {
       case 'all':
-        selectFieldEl.value = 'foo';
+        selectFieldEl.selectedOptions = ['foo'];
         selectOperatorEl.value = 'EQ';
         criteriaInputEl.value = 'test';
         break;
       case 'some':
-        selectFieldEl.value = 'foo';
+        selectFieldEl.selectedOptions = ['foo'];
         selectOperatorEl.value = undefined;
         criteriaInputEl.value = null;
         break;
       case 'none':
-        selectFieldEl.value = undefined;
+        selectFieldEl.selectedOptions = [];
         selectOperatorEl.value = undefined;
         criteriaInputEl.value = null;
         break;
@@ -158,21 +162,6 @@ describe('WhereModifierGroup should', () => {
     expect(selectOperatorEl.children[0].innerHTML).toContain('<');
   });
 
-  it('alert the user when loading', async () => {
-    document.body.appendChild(modifierGroup);
-    expect(modifierGroup.isLoading).toEqual(false);
-
-    let defaultOption = modifierGroup.shadowRoot.querySelector(
-      '[data-el-default-option]'
-    );
-    expect(defaultOption.innerHTML).toContain('Select');
-
-    modifierGroup.isLoading = true;
-    return Promise.resolve().then(() => {
-      expect(defaultOption.innerHTML.toLowerCase()).toContain('loading');
-    });
-  });
-
   it('display the correct criteria value for strings', async () => {
     modifierGroup.condition = {
       field: { fieldName: 'foo' },
@@ -189,7 +178,7 @@ describe('WhereModifierGroup should', () => {
     modifierGroup.condition = {
       field: { fieldName: 'foo' },
       operator: '=',
-      compareValue: { type: 'BOOLEAN', value: "TRUE" }
+      compareValue: { type: 'BOOLEAN', value: 'TRUE' }
     };
     document.body.appendChild(modifierGroup);
 
@@ -207,9 +196,9 @@ describe('WhereModifierGroup should', () => {
       fields: [{ name: 'foo', type: 'string' }]
     };
     let resultingCriteria;
-    const handler = (e => {
+    const handler = (e) => {
       resultingCriteria = e.detail.condition.compareValue;
-    });
+    };
     modifierGroup.addEventListener('modifiergroupselection', handler);
 
     document.body.appendChild(modifierGroup);
@@ -225,15 +214,15 @@ describe('WhereModifierGroup should', () => {
     modifierGroup.condition = {
       field: { fieldName: 'foo' },
       operator: '=',
-      compareValue: { type: 'BOOLEAN', value: "TRUE" }
+      compareValue: { type: 'BOOLEAN', value: 'TRUE' }
     };
     modifierGroup.sobjectMetadata = {
       fields: [{ name: 'foo', type: 'boolean' }]
     };
     let resultingCriteria;
-    const handler = (e => {
+    const handler = (e) => {
       resultingCriteria = e.detail.condition.compareValue;
-    });
+    };
     modifierGroup.addEventListener('modifiergroupselection', handler);
     document.body.appendChild(modifierGroup);
 
@@ -248,17 +237,15 @@ describe('WhereModifierGroup should', () => {
     modifierGroup.condition = {
       field: { fieldName: 'foo' },
       operator: 'IN',
-      values: [
-        { type: 'BOOLEAN', value: "TRUE" }
-      ]
+      values: [{ type: 'BOOLEAN', value: 'TRUE' }]
     };
     modifierGroup.sobjectMetadata = {
       fields: [{ name: 'foo', type: 'boolean' }]
     };
     let resultingCriteria;
-    const handler = (e => {
+    const handler = (e) => {
       resultingCriteria = e.detail.condition.values;
-    });
+    };
     modifierGroup.addEventListener('modifiergroupselection', handler);
     document.body.appendChild(modifierGroup);
 
@@ -276,7 +263,7 @@ describe('WhereModifierGroup should', () => {
     modifierGroup.condition = {
       field: { fieldName: 'foo' },
       operator: '<',
-      compareValue: { type: 'BOOLEAN', value: "TRUE" }
+      compareValue: { type: 'BOOLEAN', value: 'TRUE' }
     };
     modifierGroup.sobjectMetadata = {
       fields: [{ name: 'foo', type: 'boolean' }]
@@ -300,7 +287,7 @@ describe('WhereModifierGroup should', () => {
     modifierGroup.condition = {
       field: { fieldName: 'foo' },
       operator: '=',
-      compareValue: { type: 'BOOLEAN', value: "TRUE" }
+      compareValue: { type: 'BOOLEAN', value: 'TRUE' }
     };
     modifierGroup.sobjectMetadata = {
       fields: [{ name: 'foo', type: 'boolean' }]