@lblod/ember-rdfa-editor-lblod-plugins 38.3.0 → 39.0.0-dev.6a3569a13725aa2d7abe9f04a28855273f0788e2

package/.changeset/clean-trains-punch.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Fix variable serialization to include label

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 39.0.0
+
+### Major Changes
+
+- [#682](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/682) [`370378d`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/370378d9718bf1d757e5026134eecce579280503) Thanks [@elpoelma](https://github.com/elpoelma)! - LMB-plugin: breaking change to the `LMBPluginConfig` interface:
+  the `defaultAdminUnit` now expects an object of the shape
+
+  ```ts
+  {
+    uri: string;
+    label: string;
+  }
+  ```
+
+  The administrative unit input field of the `lmb-plugin` `SearchModal` component is now implement through a dynamic `PowerSelect` component rather than a free-text input field.
+
+### Minor Changes
+
+- [#682](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/682) [`370378d`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/370378d9718bf1d757e5026134eecce579280503) Thanks [@elpoelma](https://github.com/elpoelma)! - LMB-plugin: improve SPARQL query performance
+
+### Patch Changes
+
+- [#679](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/679) [`e08902b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e08902b088d4e649abe0f4396341e581d8949fa2) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Fix floating window position on date variable
+
 ## 38.3.0
 
 ### Minor Changes

package/addon/components/lmb-plugin/{insert.ts → insert.gts}

@@ -15,6 +15,10 @@ import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { Person } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
 import { createPersonVariable } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/actions/create-person-variable';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import SearchModal from './search-modal';
+import { on } from '@ember/modifier';
+import t from 'ember-intl/helpers/t';
 
 interface Args {
   controller: SayController;
@@ -27,7 +31,10 @@ export default class LmbPluginInsertComponent extends Component<Args> {
   AddIcon = AddIcon;
 
   get showModal() {
-    return getLmbModalsPluginState(this.controller.mainEditorState)?.modalOpen;
+    return (
+      getLmbModalsPluginState(this.controller.mainEditorState)?.modalOpen ??
+      false
+    );
   }
 
   get controller() {
@@ -66,4 +73,24 @@ export default class LmbPluginInsertComponent extends Component<Args> {
       view: this.controller.mainEditorView,
     });
   }
+
+  <template>
+    <li class='au-c-list__item'>
+      <AuButton
+        @icon={{this.AddIcon}}
+        @iconAlignment='left'
+        @skin='link'
+        {{on 'click' this.openModal}}
+      >
+        {{t 'lmb-plugin.insert.title'}}
+      </AuButton>
+    </li>
+
+    <SearchModal
+      @open={{this.showModal}}
+      @closeModal={{this.closeModal}}
+      @config={{@config}}
+      @onInsert={{this.onInsert}}
+    />
+  </template>
 }

package/addon/components/lmb-plugin/list.gts

@@ -0,0 +1,85 @@
+import type { TOC } from '@ember/component/template-only';
+import AuTable from '@appuniversum/ember-appuniversum/components/au-table';
+import SortableTableHeader from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/sort/sortable-table-header';
+import { SearchSort } from './search-modal';
+import t from 'ember-intl/helpers/t';
+import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
+import { TaskInstance } from 'reactiveweb/ember-concurrency';
+
+interface Signature {
+  Args: {
+    sort: SearchSort;
+    setSort: (sort: SearchSort) => void;
+    services: TaskInstance<{ results: Electee[]; totalCount: number }>;
+    insert: (electee: Electee) => unknown;
+  };
+}
+
+const List: TOC<Signature> = <template>
+  <AuTable>
+    <:header>
+      <tr class='au-c-data-table__header-title'>
+        <th>
+          <SortableTableHeader
+            @field='fullName'
+            @label={{t 'lmb-plugin.modal.fields.name'}}
+            @sort={{@sort}}
+            @setSort={{@setSort}}
+          />
+        </th>
+        <th>
+          <SortableTableHeader
+            @field='kandidatenlijst'
+            @label={{t 'lmb-plugin.modal.fields.kandidatenlijst'}}
+            @sort={{@sort}}
+            @setSort={{@setSort}}
+          />
+        </th>
+        <th />
+      </tr>
+    </:header>
+    <:body>
+      {{#if @services.isRunning}}
+        <tr>
+          <td colspan='100%'>
+            <AuLoader @centered={{true}}>
+              {{t 'common.search.loading'}}
+            </AuLoader>
+          </td>
+        </tr>
+      {{else}}
+        {{#if @services.value.totalCount}}
+          {{#each @services.value.results as |row|}}
+            <tr>
+              <td>{{row.fullName}}</td>
+              <td>
+                {{#if row.kandidatenlijst}}
+                  {{row.kandidatenlijst}}
+                {{else}}
+                  <span class='au-u-italic'>{{t 'common.not-applicable'}}</span>
+                {{/if}}
+              </td>
+              <td class='au-u-text-center'>
+                <AuButton {{on 'click' (fn @insert row)}}>
+                  {{t 'lmb-plugin.modal.insert'}}
+                </AuButton>
+              </td>
+            </tr>
+          {{/each}}
+        {{else}}
+          <tr>
+            <td colspan='100%'>
+              {{t 'common.search.no-results'}}
+            </td>
+          </tr>
+        {{/if}}
+      {{/if}}
+    </:body>
+  </AuTable>
+</template>;
+
+export default List;

package/addon/components/lmb-plugin/search-modal.gts

@@ -0,0 +1,347 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { restartableTask, timeout } from 'ember-concurrency';
+import { task as trackedTask } from 'reactiveweb/ember-concurrency';
+import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
+
+import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
+import {
+  FetchMandateesArgs,
+  fetchAdministrativeUnits,
+  fetchElectees,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin/utils/fetchElectees';
+import {
+  BESTUURSPERIODES,
+  BestuursperiodeLabel,
+  BestuursperiodeURI,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { isSome } from '@lblod/ember-rdfa-editor/utils/_private/option';
+import type { AdministrativeUnit } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import { localCopy } from 'tracked-toolbox';
+import AuMainContainer from '@appuniversum/ember-appuniversum/components/au-main-container';
+import AuModal from '@appuniversum/ember-appuniversum/components/au-modal';
+import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+import AuNativeInput from '../au-native-input';
+import PowerSelect from 'ember-power-select/components/power-select';
+import perform from 'ember-concurrency/helpers/perform';
+import List from './list';
+import pagination from '@lblod/ember-rdfa-editor-lblod-plugins/helpers/pagination';
+import PaginationView from '../pagination/pagination-view';
+import { not } from 'ember-truth-helpers';
+import t from 'ember-intl/helpers/t';
+import AlertLoadError from '../common/search/alert-load-error';
+import { on } from '@ember/modifier';
+export type SearchSort = [keyof Electee, 'ASC' | 'DESC'] | false;
+
+interface Signature {
+  Args: {
+    config: LmbPluginConfig;
+    open: boolean;
+    closeModal: () => void;
+    onInsert: (electee: Electee) => void;
+  };
+}
+
+interface AdminPeriodOption {
+  label: BestuursperiodeLabel;
+  uri: BestuursperiodeURI;
+}
+
+export default class SearchModal extends Component<Signature> {
+  // Display
+  @tracked error: unknown;
+  @tracked inputSearchText: string | null = null;
+  @tracked sort: SearchSort = false;
+
+  // Pagination
+  @tracked pageNumber = 0;
+  @tracked pageSize = 20;
+  @tracked totalCount = 0;
+
+  // Admin periods
+  @tracked selectedAdminPeriod: AdminPeriodOption;
+  adminPeriods: AdminPeriodOption[];
+  // Admin units
+  @localCopy('args.config.defaultAdminUnit')
+  selectedAdministrativeUnit?: AdministrativeUnit;
+  // tracks whether the user has just typed a character
+  // doesn't need to be reactive
+  typing = false;
+  constructor(owner: unknown, args: Signature['Args']) {
+    super(owner, args);
+    this.adminPeriods = Object.entries(BESTUURSPERIODES).map(
+      ([key, value]: [BestuursperiodeLabel, BestuursperiodeURI]) => ({
+        label: key,
+        uri: value,
+      }),
+    );
+    this.selectedAdminPeriod =
+      this.adminPeriods.find(
+        (entry) =>
+          isSome(args.config.defaultPeriod) &&
+          entry.label === args.config.defaultPeriod,
+      ) ?? this.adminPeriods[this.adminPeriods.length - 1];
+  }
+
+  get config() {
+    return this.args.config;
+  }
+  selectAdminPeriod = (value: AdminPeriodOption) => {
+    this.selectedAdminPeriod = value;
+    this.pageNumber = 0;
+  };
+
+  @action
+  async closeModal() {
+    this.typing = false;
+    this.inputSearchText = null;
+    this.sort = false;
+    await this.servicesResource.cancel();
+    this.args.closeModal();
+  }
+
+  search = restartableTask(
+    async ({
+      endpoint,
+      searchString,
+      page,
+      pageSize,
+      sort,
+      period,
+      administrativeUnit,
+    }: FetchMandateesArgs) => {
+      // debounce, but only when the input fields are being used
+      if (this.typing) {
+        this.typing = false;
+        await timeout(250);
+      }
+
+      if (!this.args.open) {
+        return {
+          results: [],
+          totalCount: 0,
+        };
+      }
+
+      const abortController = new AbortController();
+
+      try {
+        const result = await fetchElectees({
+          endpoint,
+          searchString,
+          page,
+          pageSize,
+          sort,
+          period,
+          administrativeUnit,
+          abortSignal: abortController.signal,
+        });
+        const { count, electees } = result;
+
+        return {
+          results: electees,
+          totalCount: count,
+        };
+      } catch (err) {
+        console.error('Got an error fetching electees', err);
+        this.error = err;
+      } finally {
+        abortController.abort();
+      }
+      return {
+        results: [],
+        totalCount: 0,
+      };
+    },
+  );
+
+  servicesResource = trackedTask<{ results: Electee[]; totalCount: number }>(
+    this,
+    this.search,
+    () => [
+      {
+        endpoint: this.args.config.endpoint,
+        searchString: this.inputSearchText ?? '',
+        sort: this.sort,
+        page: this.pageNumber,
+        pageSize: this.pageSize,
+        open: this.args.open,
+        period: this.selectedAdminPeriod.uri,
+        administrativeUnit: this.selectedAdministrativeUnit,
+      } satisfies Partial<FetchMandateesArgs> & { open: boolean },
+    ],
+  );
+
+  searchAdministrativeUnits = restartableTask(async (search: string) => {
+    await timeout(200);
+
+    const abortController = new AbortController();
+    try {
+      const units = await fetchAdministrativeUnits({
+        endpoint: this.config.endpoint,
+        searchString: search,
+        lmbPeriod: this.selectedAdminPeriod.uri,
+        abortSignal: abortController.signal,
+      });
+
+      return units;
+    } catch (err) {
+      // ember-power-select doesn't seem to have a way to display errors.
+      console.error(
+        'Error occurred when searching for administrative units',
+        err,
+      );
+      // We just re-throw to keep TS happy, ember-concurrency just swallows it.
+      throw err;
+    } finally {
+      abortController.abort();
+    }
+  });
+
+  selectAdministrativeUnit = (administrativeUnit: AdministrativeUnit) => {
+    this.selectedAdministrativeUnit = administrativeUnit;
+    this.pageNumber = 0;
+  };
+
+  @action
+  setSort(sort: SearchSort) {
+    this.sort = sort;
+  }
+  @action
+  setInputSearchText(event: InputEvent) {
+    assert(
+      'inputSearchText must be bound to an input element',
+      event.target instanceof HTMLInputElement,
+    );
+    this.typing = true;
+
+    this.inputSearchText = event.target.value;
+    this.pageNumber = 0;
+  }
+  @action
+  previousPage() {
+    --this.pageNumber;
+  }
+
+  @action
+  nextPage() {
+    ++this.pageNumber;
+  }
+  @action
+  async onInsert(electee: Electee) {
+    this.args.onInsert(electee);
+    await this.closeModal();
+  }
+
+  <template>
+    <AuModal
+      class='worship-modal'
+      @modalOpen={{@open}}
+      @closeModal={{this.closeModal}}
+      @title={{t 'lmb-plugin.modal.title'}}
+      @size='large'
+      @padding='none'
+      as |modal|
+    >
+      <modal.Body>
+        <AuMainContainer class='worship-modal--main-container' as |mc|>
+          <mc.sidebar>
+            <div class='au-c-sidebar'>
+              <div class='au-c-sidebar__content au-u-padding'>
+                <AuHeading
+                  @level='3'
+                  @skin='4'
+                  class='au-u-padding-bottom-small'
+                >
+                  {{t 'lmb-plugin.modal.search.title'}}
+                </AuHeading>
+                <AuLabel class='au-margin-bottom-small' for='searchTerm'>
+                  {{t 'lmb-plugin.modal.fields.name'}}
+                </AuLabel>
+                <AuNativeInput
+                  @type='text'
+                  @width='block'
+                  id='searchTerm'
+                  value={{this.inputSearchText}}
+                  placeholder={{t 'lmb-plugin.modal.nameSearch.placeholder'}}
+                  {{on 'input' this.setInputSearchText}}
+                />
+                <AuLabel class='au-margin-bottom-small' for='periodSelect'>
+                  {{t 'lmb-plugin.modal.fields.period'}}
+                </AuLabel>
+                <PowerSelect
+                  @allowClear={{false}}
+                  @searchEnabled={{false}}
+                  @options={{this.adminPeriods}}
+                  @selected={{this.selectedAdminPeriod}}
+                  @onChange={{this.selectAdminPeriod}}
+                  as |period|
+                >
+                  {{period.label}}
+                </PowerSelect>
+
+                <AuLabel class='au-margin-bottom-small' for='searchAdminUnit'>
+                  {{t 'lmb-plugin.modal.fields.adminUnit'}}
+                </AuLabel>
+                <PowerSelect
+                  @allowClear={{true}}
+                  @searchEnabled={{true}}
+                  @search={{perform this.searchAdministrativeUnits}}
+                  @selected={{this.selectedAdministrativeUnit}}
+                  @onChange={{this.selectAdministrativeUnit}}
+                  @loadingMessage={{t 'common.search.loading'}}
+                  @placeholder={{t
+                    'lmb-plugin.modal.adminUnitSearch.placeholder'
+                  }}
+                  @searchMessage={{t 'common.search.type-to-search'}}
+                  as |unit|
+                >
+                  {{unit.label}}
+                </PowerSelect>
+
+              </div>
+            </div>
+          </mc.sidebar>
+          <mc.content @scroll={{true}}>
+            <div class='worship-modal--list-container'>
+              {{#if this.error}}
+                <AlertLoadError @error={{this.error}} />
+              {{else}}
+                <List
+                  @services={{this.servicesResource}}
+                  @sort={{this.sort}}
+                  @setSort={{this.setSort}}
+                  @insert={{this.onInsert}}
+                />
+              {{/if}}
+            </div>
+            {{#if this.servicesResource.value.totalCount}}
+              {{#let
+                (pagination
+                  page=this.pageNumber
+                  pageSize=this.pageSize
+                  count=this.servicesResource.value.totalCount
+                )
+                as |pg|
+              }}
+                <PaginationView
+                  @totalCount={{pg.count}}
+                  @rangeStart={{pg.pageStart}}
+                  @rangeEnd={{pg.pageEnd}}
+                  @onNextPage={{this.nextPage}}
+                  @onPreviousPage={{this.previousPage}}
+                  @isFirstPage={{not pg.hasPreviousPage}}
+                  @isLastPage={{not pg.hasNextPage}}
+                />
+              {{/let}}
+            {{/if}}
+
+          </mc.content>
+        </AuMainContainer>
+      </modal.Body>
+    </AuModal>
+  </template>
+}

package/addon/components/variable-plugin/date/floating-date-container.gts

@@ -36,7 +36,7 @@ export default class FloatingDateContainer extends Component<Signature> {
 
     return NodeSelection.create(
       this.editorState.doc,
-      this.selectedDateNode.pos - 1,
+      this.selectedDateNode.pos,
     );
   }
 

package/addon/plugins/lmb-plugin/index.ts

@@ -8,11 +8,12 @@ import {
   EditorView,
   Command,
 } from '@lblod/ember-rdfa-editor';
+import type { AdministrativeUnit } from '../worship-plugin';
 
 export type LmbPluginConfig = {
   endpoint: string;
   defaultPeriod?: BestuursperiodeLabel;
-  defaultAdminUnit?: string;
+  defaultAdminUnit?: AdministrativeUnit;
 };
 
 export function createPersonNode(controller: SayController, person: Person) {