feat: enable feature to show all services when selecting services for…

… new inquiry

packages/distribution/addon/components/cd-inquiry-new-form/group-type.hbs

@@ -0,0 +1,23 @@
+{{! template-lint-disable require-presentational-children }}
+<tr
+  class="uk-background-muted uk-text-bold"
+  role="button"
+  {{on "click" (fn (mut this.isExpanded) (not this.isExpanded))}}
+  data-test-group-type={{@type.name}}
+>
+  <td colspan="3" class="">
+    <div class="uk-flex uk-flex-between">
+      {{t @type.name}}
+      <UkIcon @icon={{if this.isExpanded "chevron-up" "chevron-down"}} />
+    </div>
+  </td>
+</tr>
+{{#if this.isExpanded}}
+  {{#each @type.groups as |group|}}
+    <CdInquiryNewForm::Group
+      @group={{group}}
+      @selectedGroups={{@selectedGroups}}
+      @updateSelectedGroups={{@updateSelectedGroups}}
+    />
+  {{/each}}
+{{/if}}

packages/distribution/addon/components/cd-inquiry-new-form/group-type.js

@@ -0,0 +1,15 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class CdInquiryNewFormGroupTypeComponent extends Component {
+  @tracked _isExpanded = true;
+
+  get isExpanded() {
+    // if we are searching all the groups need to be expanded anyway
+    return this.args.search !== "" ? true : this._isExpanded;
+  }
+
+  set isExpanded(value) {
+    this._isExpanded = value;
+  }
+}

packages/distribution/addon/components/cd-inquiry-new-form/group.hbs

@@ -0,0 +1,25 @@
+{{! template-lint-disable require-presentational-children }}
+<tr
+  role="checkbox"
+  data-test-group={{@group.identifier}}
+  aria-checked={{includes @group.identifier @selectedGroups}}
+  {{on "click" (fn @updateSelectedGroups @group.identifier)}}
+>
+  <td class="uk-padding-remove-right">
+    {{! template-lint-disable require-input-label no-nested-interactive }}
+    <input
+      type="checkbox"
+      class="uk-checkbox"
+      checked={{includes @group.identifier @selectedGroups}}
+    />
+  </td>
+  <td class="uk-width-expand">{{group-name @group.identifier}}</td>
+  <td class="uk-text-right">
+    {{#if @group.config.icon}}
+      <UkIcon
+        @icon={{@group.config.icon}}
+        class="uk-display-block uk-text-{{@group.config.iconColor}}"
+      />
+    {{/if}}
+  </td>
+</tr>

packages/distribution/addon/components/cd-inquiry-new-form/select.hbs

@@ -1,15 +1,17 @@
-<div class="uk-margin-bottom uk-button-group">
-  {{#each-in this.config.new.types as |slug config|}}
-    {{#unless config.disabled}}
-      <UkButton
-        data-test-type={{slug}}
-        @label={{t config.label}}
-        @color={{if (includes slug @selectedTypes) "primary" "default"}}
-        @onClick={{fn this.updateSelectedTypes slug}}
-      />
-    {{/unless}}
-  {{/each-in}}
-</div>
+{{#unless this.showAllServices}}
+  <div class="uk-margin-bottom uk-button-group" data-test-group-toggle-bar>
+    {{#each-in this.config.new.types as |slug config|}}
+      {{#unless config.disabled}}
+        <UkButton
+          data-test-type={{slug}}
+          @label={{t config.label}}
+          @color={{if (includes slug @selectedTypes) "primary" "default"}}
+          @onClick={{fn this.updateSelectedTypes slug}}
+        />
+      {{/unless}}
+    {{/each-in}}
+  </div>
+{{/unless}}
 
 <div class="uk-search uk-search-default uk-width-1-1">
   <span class="uk-search-icon-flip" uk-search-icon></span>
@@ -30,36 +32,30 @@
   </div>
 {{else if this.groups.value.length}}
   <table
-    class="uk-table uk-table-striped uk-table-hover uk-table-small uk-table-middle group-list"
+    class={{concat
+      "uk-table uk-table-hover uk-table-small uk-table-middle group-list "
+      (if this.showAllServices "uk-table-divider" "uk-table-striped")
+    }}
   >
     <tbody>
-      {{#each this.groups.value as |group|}}
-        {{! template-lint-disable require-presentational-children }}
-        <tr
-          role="checkbox"
-          data-test-group={{group.identifier}}
-          aria-checked={{includes group.identifier @selectedGroups}}
-          {{on "click" (fn this.updateSelectedGroups group.identifier)}}
-        >
-          <td class="uk-padding-remove-right">
-            {{! template-lint-disable require-input-label no-nested-interactive }}
-            <input
-              type="checkbox"
-              class="uk-checkbox"
-              checked={{includes group.identifier @selectedGroups}}
-            />
-          </td>
-          <td class="uk-width-expand">{{group-name group.identifier}}</td>
-          <td class="uk-text-right">
-            {{#if group.config.icon}}
-              <UkIcon
-                @icon={{group.config.icon}}
-                class="uk-display-block uk-text-{{group.config.iconColor}}"
-              />
-            {{/if}}
-          </td>
-        </tr>
-      {{/each}}
+      {{#if this.showAllServices}}
+        {{#each this.groupTypes as |type|}}
+          <CdInquiryNewForm::GroupType
+            @type={{type}}
+            @selectedGroups={{@selectedGroups}}
+            @updateSelectedGroups={{this.updateSelectedGroups}}
+            @search={{@search}}
+          />
+        {{/each}}
+      {{else}}
+        {{#each this.groups.value as |group|}}
+          <CdInquiryNewForm::Group
+            @group={{group}}
+            @selectedGroups={{@selectedGroups}}
+            @updateSelectedGroups={{this.updateSelectedGroups}}
+          />
+        {{/each}}
+      {{/if}}
     </tbody>
   </table>
 {{else}}

packages/distribution/addon/components/cd-inquiry-new-form/select.js

@@ -20,8 +20,28 @@ export default class CdInquiryNewFormSelectComponent extends Component {
 
   @config config;
 
+  get showAllServices() {
+    return this.config.ui?.new?.showAllServices;
+  }
+
+  get groupTypes() {
+    return Object.entries(this.config.new.types)
+      .filter(([, { disabled }]) => !disabled)
+      .map(([identifier, group]) => ({
+        identifier,
+        name: group.label,
+        config: group.config,
+        groups: this.groups?.value?.filter(
+          (group) => group.type === identifier,
+        ),
+      }));
+  }
+
   groups = trackedTask(this, this.fetchGroups, () => [
-    this.args.selectedTypes,
+    // if we want to show all services we need to fetch all groups
+    this.showAllServices
+      ? Object.keys(this.config.new.types)
+      : this.args.selectedTypes,
     this.args.search,
   ]);
 
@@ -69,6 +89,7 @@ export default class CdInquiryNewFormSelectComponent extends Component {
           identifier: group[this.calumaOptions.groupIdentifierProperty],
           name: group[this.calumaOptions.groupNameProperty],
           config: this.config.new.types[type],
+          type,
         }));
       })
       .sort((a, b) => a.name.localeCompare(b.name));

packages/distribution/app/components/cd-inquiry-new-form/group-type.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-distribution/components/cd-inquiry-new-form/group-type";

packages/distribution/app/components/cd-inquiry-new-form/group.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-distribution/components/cd-inquiry-new-form/group";

packages/distribution/tests/integration/components/cd-inquiry-new-form-test.js

@@ -29,7 +29,10 @@ module("Integration | Component | cd-inquiry-new-form", function (hooks) {
     this.owner.lookup("service:caluma-options").distribution = {
       new: {
         types: {
-          suggestions: { disabled: true },
+          suggestions: {
+            label: "suggestions",
+            disabled: true,
+          },
           a: { label: "label-a" },
           b: { label: "label-b" },
         },
@@ -195,4 +198,53 @@ module("Integration | Component | cd-inquiry-new-form", function (hooks) {
 
     assert.verifySteps(["redirect"]);
   });
+
+  module("when showAllGroups is on", async function (hooks) {
+    hooks.beforeEach(async function () {
+      const calumaOptions = this.owner.lookup("service:caluma-options");
+      calumaOptions.distribution.ui = {
+        ...calumaOptions.distribution?.ui,
+        new: {
+          ...calumaOptions.distribution?.ui?.new,
+          showAllServices: true,
+        },
+      };
+
+      await render(hbs`<CdInquiryNewForm
+  @selectedTypes={{this.selectedTypes}}
+  @search={{this.search}}
+  @onChangeSelectedTypes={{fn (mut this.selectedTypes)}}
+  @onChangeSearch={{fn (mut this.search)}}
+/>`);
+    });
+
+    test("it doesn't show the group buttons", async function (assert) {
+      assert.dom("[data-test-group-toggle-bar]").isNotVisible();
+    });
+
+    test("it shows all the enabled groups", async function (assert) {
+      assert.dom('[data-test-group-type="suggestions"]').isNotVisible();
+      assert.dom('[data-test-group-type="label-a"]').isVisible();
+      assert.dom('[data-test-group-type="label-b"]').isVisible();
+    });
+
+    test("it allows the toggling of a group", async function (assert) {
+      assert.dom('[data-test-group="2"]').isVisible();
+      assert.dom('[data-test-group="3"]').isVisible();
+
+      await click('[data-test-group-type="label-a"]');
+
+      assert.dom('[data-test-group="2"]').isNotVisible();
+      assert.dom('[data-test-group="3"]').isNotVisible();
+    });
+
+    test("it allows searching for a group and shows all the groups", async function (assert) {
+      await click('[data-test-group-type="label-a"]'); // hide the first group
+
+      await fillIn("[data-test-search]", "2");
+
+      assert.dom('[data-test-group="2"]').isVisible();
+      assert.dom('[data-test-group="3"]').isNotVisible();
+    });
+  });
 });