From 4aea53bbc75790f3afef1cf187710c0848e6bf74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Eikeland?= <43904393+eikeland@users.noreply.github.com> Date: Wed, 2 Oct 2024 09:58:47 +0200 Subject: [PATCH] Fix/person/select/selectedperson null (#1641) * chore(storybook): person-select story stopp using cem for types * fix(person): fxes issues when clearing and attribute selectedperson isset * docs(person): release changeset --- .changeset/good-kiwis-guess.md | 16 ++++++++++++++ .../src/components/select/controller.ts | 22 +++++-------------- .../src/components/select/element.css.ts | 3 +++ .../person/src/components/select/element.ts | 5 +++-- .../stories/person/person-select.stories.ts | 6 +---- 5 files changed, 29 insertions(+), 23 deletions(-) create mode 100644 .changeset/good-kiwis-guess.md diff --git a/.changeset/good-kiwis-guess.md b/.changeset/good-kiwis-guess.md new file mode 100644 index 000000000..6341fa3e8 --- /dev/null +++ b/.changeset/good-kiwis-guess.md @@ -0,0 +1,16 @@ +--- +"@equinor/fusion-wc-person": patch +--- + +### Changes in `PersonSelectController` + +- Updated the `attrSelectPerson` method to clear `selectedIds` when `personData` or `selectedPerson` is null. +- Updated the `clearInput` method to reset `azureId` and `upn` properties. +- Refactored the `clear` method to use `#firePersonSelectEvent` instead of directly dispatching the event. +- Removed unnecessary comments and cleaned up the code. + +### Changes in `PersonSelectElement` + +- Added a new CSS class `.selected-persons` to hide the text input when a person is selected. +- Updated the `selectedPersonsTemplate` method to be conditionally rendered based on the `selectedIds` size and `isOpen` state. +- Adjusted the `classMap` to include the `selected-persons` class based on the `selectedIds` size and `isOpen` diff --git a/packages/person/src/components/select/controller.ts b/packages/person/src/components/select/controller.ts index 7ae0eef11..373df7bbc 100644 --- a/packages/person/src/components/select/controller.ts +++ b/packages/person/src/components/select/controller.ts @@ -51,7 +51,7 @@ export class PersonSelectController implements ReactiveController { } /** - * Resolve person from selectedPerson property. + * Resolve personInfo task from selectedPerson property. * Runs on host updated when property is changed */ public attrSelectPerson(select: string | null | undefined) { @@ -186,8 +186,9 @@ export class PersonSelectController implements ReactiveController { this.#firePersonSelectEvent(personData); /* clear component if null */ - if (personData === null) { + if (personData === null || this.#host.selectedPerson === null) { this.clearInput(); + this.selectedIds.clear(); } } @@ -206,6 +207,8 @@ export class PersonSelectController implements ReactiveController { this.#host.value = ''; this.#host.search = ''; this.#host.textInputElement.value = ''; + this.#host.azureId = ''; + this.#host.upn = ''; } public clear() { @@ -215,19 +218,8 @@ export class PersonSelectController implements ReactiveController { this.selectedIds.clear(); } - if (this.#host.selectedPerson) { - this.#host.selectedPerson = null; - } - /* Dispatch custom select event with our details */ - this.#host.dispatchEvent( - new PersonSelectEvent({ - detail: { - selected: null, - }, - bubbles: true, - }), - ); + this.#firePersonSelectEvent(null); } /** @@ -312,7 +304,6 @@ export class PersonSelectController implements ReactiveController { if (event.key === 'ArrowDown') { /* focus on the fwc-list' */ if (this._isOpen && this.#host.listItems.length) { - // this.#host.listElement?.focus(); this.#host.listElement?.focusItemAtIndex(0); } return; @@ -324,7 +315,6 @@ export class PersonSelectController implements ReactiveController { } this.timer = setTimeout(() => { const value = target.value.trim().toLowerCase(); - // this.#search = value; this.#host.search = value; this.#host.requestUpdate(); }, 500); diff --git a/packages/person/src/components/select/element.css.ts b/packages/person/src/components/select/element.css.ts index 4404a9481..c1eb90135 100644 --- a/packages/person/src/components/select/element.css.ts +++ b/packages/person/src/components/select/element.css.ts @@ -14,6 +14,9 @@ export const styles: CSSResult[] = [ fwc-person-list-item { --fwc-person-list-item-background: #ffffff; } + .selected-persons fwc-textinput { + opacity: 0; + } #selected-persons { list-style: none; padding: 0; diff --git a/packages/person/src/components/select/element.ts b/packages/person/src/components/select/element.ts index e551a98cc..728bb529b 100644 --- a/packages/person/src/components/select/element.ts +++ b/packages/person/src/components/select/element.ts @@ -180,7 +180,7 @@ export class PersonSelectElement // task is complete and we have the attribute if (this.selectedPerson && this.tasks.info.status === TaskStatus.COMPLETE) { // save result in controller if not already there - if (!this.controllers.element.selectedIds.has(this.tasks.info.value?.azureId as string)) { + if (!this.controllers.element.selectedIds.size) { this.controllers.element.selectPersonInfo(this.tasks.info.value as PersonInfo); } } @@ -305,6 +305,7 @@ export class PersonSelectElement dense: dense == true, 'variant-filled': variant === 'filled', 'variant-outlined': variant === 'outlined', + 'selected-persons': this.controllers.element.selectedIds.size > 0 && !this.controllers.element.isOpen, }; /** Select person by selectedPerson property on info task */ @@ -313,6 +314,7 @@ export class PersonSelectElement return html`
+ ${this.selectedPersonsTemplate()} - ${this.selectedPersonsTemplate()} ${this.controllers.element.selectedIds.size || this.controllers.element.isOpen diff --git a/storybook/stories/person/person-select.stories.ts b/storybook/stories/person/person-select.stories.ts index 076ca045e..0cddb6b53 100644 --- a/storybook/stories/person/person-select.stories.ts +++ b/storybook/stories/person/person-select.stories.ts @@ -2,9 +2,7 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; import type { Meta, StoryObj } from '@storybook/web-components'; -import { setCustomElementsManifest } from '@storybook/web-components'; import PersonSelect, { PersonSelectElementProps, PersonSelectEvent } from '@equinor/fusion-wc-person/select'; -import cem from '@equinor/fusion-wc-person/custom-elements.json'; import { faker } from '@faker-js/faker'; import { personProviderDecorator } from './person-provider'; @@ -13,11 +11,9 @@ PersonSelect; faker.seed(1); -setCustomElementsManifest(cem); - type Story = StoryObj; -const meta: Meta = { +const meta: Meta = { title: 'select', component: 'fwc-person-select', decorators: [personProviderDecorator],