@lblod/ember-rdfa-editor-lblod-plugins 38.3.0 → 39.0.0

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) {

package/addon/plugins/lmb-plugin/utils/fetchElectees.ts

@@ -4,26 +4,30 @@ import { BESTUURSPERIODES } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/c
 import {
   executeQuery,
   sparqlEscapeString,
+  sparqlEscapeUri,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
+import { AdministrativeUnit } from '../../worship-plugin';
 
 export type FetchMandateesArgs = {
   endpoint: string;
   searchString: string;
-  adminUnitSearch: string;
+  administrativeUnit?: AdministrativeUnit;
   page: number;
   pageSize: number;
   sort: SearchSort;
   period: (typeof BESTUURSPERIODES)[keyof typeof BESTUURSPERIODES];
+  abortSignal?: AbortSignal;
 };
 
 export async function countElectees({
   endpoint,
   searchString,
-  adminUnitSearch,
+  administrativeUnit,
   period,
+  abortSignal,
 }: Pick<
   FetchMandateesArgs,
-  'searchString' | 'endpoint' | 'period' | 'adminUnitSearch'
+  'searchString' | 'endpoint' | 'period' | 'administrativeUnit' | 'abortSignal'
 >) {
   const query = /* sparql */ `
       PREFIX besluit: <http://data.vlaanderen.be/ns/besluit#>
@@ -36,15 +40,22 @@ export async function countElectees({
       PREFIX org: <http://www.w3.org/ns/org#>
 
       SELECT (COUNT(DISTINCT ?person) as ?count) WHERE {
-        ?person a person:Person;
-                foaf:familyName ?lastName;
-                persoon:gebruikteVoornaam ?firstName.
+        ?person 
+          a person:Person;
+          foaf:familyName ?lastName;
+          persoon:gebruikteVoornaam ?firstName.
+
+        ?bestuursorgaanIT lmb:heeftBestuursperiode ${sparqlEscapeUri(period)}.
+        ${
+          administrativeUnit
+            ? `?bestuursorgaanIT mandaat:isTijdspecialisatieVan/besluit:bestuurt ${sparqlEscapeUri(administrativeUnit.uri)}.`
+            : ''
+        }
 
-        ?bestuursorgaanIT lmb:heeftBestuursperiode <${period}>;
-                          mandaat:isTijdspecialisatieVan/besluit:bestuurt/skos:prefLabel ?adminUnitName.
         {
           ?verkiezing mandaat:steltSamen ?bestuursorgaanIT.
           ?kandidatenlijst mandaat:behoortTot ?verkiezing.
+          ?kandidatenlijst skos:prefLabel ?kandidatenlijstLabel.
 
           ?verkiezingsresultaat mandaat:isResultaatVoor ?kandidatenlijst.
           ?verkiezingsresultaat mandaat:isResultaatVan ?person.
@@ -55,15 +66,33 @@ export async function countElectees({
                     org:holds ?mandaat;
                     mandaat:isBestuurlijkeAliasVan ?person.
           ?bestuursorgaanIT org:hasPost ?mandaat.
-        }
 
-        ${adminUnitSearch.length ? `FILTER(contains(lcase(?adminUnitName), lcase(${sparqlEscapeString(adminUnitSearch)}) )).` : ''}
-        ${searchString.length ? `FILTER(contains(lcase(concat(?firstName, " ", ?lastName)), lcase(${sparqlEscapeString(searchString)}) )).` : ''}
+          FILTER NOT EXISTS {
+            ?_bestuursorgaanIT lmb:heeftBestuursperiode <${period}>.
+            ?verkiezing mandaat:steltSamen ?_bestuursorgaanIT.
+            ?kandidatenlijst mandaat:behoortTot ?verkiezing.
+            ?kandidatenlijst skos:prefLabel ?kandidatenlijstLabel.
+
+            ?verkiezingsresultaat mandaat:isResultaatVoor ?kandidatenlijst.
+            ?verkiezingsresultaat mandaat:isResultaatVan ?person.
+          }
+        }
+        
+        
+        ${
+          searchString.length
+            ? `
+            BIND(CONCAT(?firstName, " ", ?lastName) AS ?name)
+            FILTER(contains(lcase(?name), lcase(${sparqlEscapeString(searchString)}) )).`
+            : ''
+        }
+        
       }
       `;
   const response = await executeQuery({
     query,
     endpoint,
+    abortSignal,
   });
   return Number(response.results.bindings[0].count.value);
 }
@@ -73,15 +102,17 @@ export async function fetchElectees({
   page,
   pageSize,
   searchString,
-  adminUnitSearch,
+  administrativeUnit,
   sort,
   period,
+  abortSignal,
 }: FetchMandateesArgs) {
   const count = await countElectees({
     endpoint,
     searchString,
     period,
-    adminUnitSearch,
+    administrativeUnit,
+    abortSignal,
   });
   let sortString = '?lastName ?firstName';
   if (sort) {
@@ -116,12 +147,15 @@ export async function fetchElectees({
 
       SELECT DISTINCT ?person ?firstName ?lastName ?kandidatenlijstLabel WHERE {
         ?person a person:Person;
-                  foaf:familyName ?lastName;
-                  persoon:gebruikteVoornaam ?firstName.
-
+          foaf:familyName ?lastName;
+          persoon:gebruikteVoornaam ?firstName.
 
-        ?bestuursorgaanIT lmb:heeftBestuursperiode <${period}>;
-                          mandaat:isTijdspecialisatieVan/besluit:bestuurt/skos:prefLabel ?adminUnitName.
+        ?bestuursorgaanIT lmb:heeftBestuursperiode <${period}>.
+        ${
+          administrativeUnit
+            ? `?bestuursorgaanIT mandaat:isTijdspecialisatieVan/besluit:bestuurt ${sparqlEscapeUri(administrativeUnit.uri)}.`
+            : ''
+        }
         {
           ?verkiezing mandaat:steltSamen ?bestuursorgaanIT.
           ?kandidatenlijst mandaat:behoortTot ?verkiezing.
@@ -148,8 +182,13 @@ export async function fetchElectees({
           }
         }
 
-        ${adminUnitSearch.length ? `FILTER(contains(lcase(?adminUnitName), lcase(${sparqlEscapeString(adminUnitSearch)}) )).` : ''}
-        ${searchString.length ? `FILTER(contains(lcase(concat(?firstName, " ", ?lastName)), lcase(${sparqlEscapeString(searchString)}) )).` : ''}
+        ${
+          searchString.length
+            ? `
+          BIND(CONCAT(?firstName, " ", ?lastName) AS ?name)
+          FILTER(contains(lcase(?name), lcase(${sparqlEscapeString(searchString)}) )).`
+            : ''
+        }
       }
       ORDER BY ${sortString}
       LIMIT ${pageSize} OFFSET ${page * pageSize}
@@ -157,7 +196,80 @@ export async function fetchElectees({
   const response = await executeQuery({
     query,
     endpoint,
+    abortSignal,
   });
   const electees = response.results.bindings.map(Electee.fromBinding);
   return { electees, count };
 }
+
+type FetchAdministrativeUnitsArgs = {
+  endpoint: string;
+  searchString?: string;
+  lmbPeriod?: (typeof BESTUURSPERIODES)[keyof typeof BESTUURSPERIODES];
+  classificationCodes?: string[];
+  limit?: number;
+  abortSignal?: AbortSignal;
+};
+
+/**
+ * Function which fetches an alphabetically ordered series of administrative units (the top-level ones, not the tijdspecialisatie ones)
+ * Additionally allows to filter by period, to only return administrative units which have a tijdsspecialisatie in the given period.
+ */
+export async function fetchAdministrativeUnits({
+  endpoint,
+  searchString,
+  lmbPeriod,
+  classificationCodes,
+  limit,
+  abortSignal,
+}: FetchAdministrativeUnitsArgs) {
+  const query = /* sparql */ `
+  PREFIX besluit: <http://data.vlaanderen.be/ns/besluit#>
+  PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+  PREFIX mandaat: <http://data.vlaanderen.be/ns/mandaat#>
+  PREFIX lmb: <http://lblod.data.gift/vocabularies/lmb/>
+
+  SELECT DISTINCT ?uri ?label WHERE {
+    ?uri 
+      a besluit:Bestuurseenheid;
+      skos:prefLabel ?bestuurseenheidLabel;
+      besluit:classificatie ?classificatie.
+    
+    ?classificatie skos:prefLabel ?classificatieLabel.
+    BIND(CONCAT(?classificatieLabel, " ", ?bestuurseenheidLabel) AS ?label)
+
+    ${
+      classificationCodes?.length
+        ? `
+        VALUES ?classificatie {
+          ${classificationCodes.map(sparqlEscapeUri).join(`\n`)}
+        }
+      `
+        : ''
+    }
+    ${
+      lmbPeriod
+        ? `
+          ?bestuursorgaanIT mandaat:isTijdspecialisatieVan/besluit:bestuurt ?uri.
+          ?bestuursorgaanIT lmb:heeftBestuursperiode <${lmbPeriod}>.
+          `
+        : ''
+    }
+    ${searchString?.length ? `FILTER(contains(lcase(?label), lcase(${sparqlEscapeString(searchString)}) )).` : ''}
+  }
+  ORDER BY ?label
+  ${limit ? `LIMIT ${limit}` : ''}
+  `;
+  const response = await executeQuery({
+    query,
+    endpoint,
+    abortSignal,
+  });
+  const administrativeUnits = response.results.bindings.map<AdministrativeUnit>(
+    (binding) => ({
+      uri: binding.uri.value,
+      label: binding.label.value,
+    }),
+  );
+  return administrativeUnits;
+}

package/addon/plugins/variable-plugin/contextual-actions/person.ts

@@ -75,7 +75,7 @@ function getAsyncSearchActionsGetter(args: LmbPluginConfig) {
       page: 0,
       pageSize: SEARCH_PAGE_SIZE,
       searchString: searchQuery,
-      adminUnitSearch: args.defaultAdminUnit ?? '',
+      administrativeUnit: args.defaultAdminUnit,
       sort: false,
       period:
         args.defaultPeriod ?? Object.values(BESTUURSPERIODES).at(-1) ?? '',

package/declarations/addon/components/lmb-plugin/insert.d.ts

@@ -11,7 +11,7 @@ interface Args {
 export default class LmbPluginInsertComponent extends Component<Args> {
     intl: IntlService;
     AddIcon: import("@ember/component/template-only").TOC<import("@appuniversum/ember-appuniversum/components/icons/add").AddIconSignature>;
-    get showModal(): boolean | undefined;
+    get showModal(): boolean;
     get controller(): SayController;
     openModal(): void;
     closeModal(): void;

package/declarations/addon/components/lmb-plugin/list.d.ts

@@ -1 +1,17 @@
-export {};
+import type { TOC } from '@ember/component/template-only';
+import { SearchSort } from './search-modal';
+import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
+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;
+    };
+}
+declare const List: TOC<Signature>;
+export default List;

package/declarations/addon/components/lmb-plugin/search-modal.d.ts

@@ -3,18 +3,21 @@ import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/
 import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
 import { FetchMandateesArgs } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin/utils/fetchElectees';
 import { BestuursperiodeLabel, BestuursperiodeURI } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import type { AdministrativeUnit } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
 export type SearchSort = [keyof Electee, 'ASC' | 'DESC'] | false;
-interface Args {
-    config: LmbPluginConfig;
-    open: boolean;
-    closeModal: () => void;
-    onInsert: (electee: Electee) => void;
+interface Signature {
+    Args: {
+        config: LmbPluginConfig;
+        open: boolean;
+        closeModal: () => void;
+        onInsert: (electee: Electee) => void;
+    };
 }
 interface AdminPeriodOption {
     label: BestuursperiodeLabel;
     uri: BestuursperiodeURI;
 }
-export default class LmbPluginSearchModalComponent extends Component<Args> {
+export default class SearchModal extends Component<Signature> {
     error: unknown;
     inputSearchText: string | null;
     sort: SearchSort;
@@ -23,18 +26,22 @@ export default class LmbPluginSearchModalComponent extends Component<Args> {
     totalCount: number;
     selectedAdminPeriod: AdminPeriodOption;
     adminPeriods: AdminPeriodOption[];
-    adminUnitSearch: string;
+    selectedAdministrativeUnit?: AdministrativeUnit;
     typing: boolean;
-    constructor(owner: unknown, args: Args);
+    constructor(owner: unknown, args: Signature['Args']);
     get config(): LmbPluginConfig;
     selectAdminPeriod: (value: AdminPeriodOption) => void;
-    setAdminUnitSearch: (event: InputEvent) => void;
     closeModal(): Promise<void>;
-    search: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, ({ endpoint, searchString, page, pageSize, sort, period, adminUnitSearch, }: FetchMandateesArgs) => Promise<{
+    search: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, ({ endpoint, searchString, page, pageSize, sort, period, administrativeUnit, }: FetchMandateesArgs) => Promise<{
         results: Electee[];
         totalCount: number;
     }>>;
-    servicesResource: import("reactiveweb/ember-concurrency").TaskInstance<unknown>;
+    servicesResource: import("reactiveweb/ember-concurrency").TaskInstance<{
+        results: Electee[];
+        totalCount: number;
+    }>;
+    searchAdministrativeUnits: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, (search: string) => Promise<AdministrativeUnit[]>>;
+    selectAdministrativeUnit: (administrativeUnit: AdministrativeUnit) => void;
     setSort(sort: SearchSort): void;
     setInputSearchText(event: InputEvent): void;
     previousPage(): void;

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

@@ -2,10 +2,11 @@ import { SayController } from '@lblod/ember-rdfa-editor';
 import { BestuursperiodeLabel } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { Person } from '../variable-plugin/variables';
 import { ProsePlugin, PluginKey, EditorState, 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 declare function createPersonNode(controller: SayController, person: Person): import("prosemirror-model").Node;
 type PluginState = {

package/declarations/addon/plugins/lmb-plugin/utils/fetchElectees.d.ts

@@ -1,17 +1,33 @@
 import { SearchSort } from '@lblod/ember-rdfa-editor-lblod-plugins/components/lmb-plugin/search-modal';
 import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
 import { BESTUURSPERIODES } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { AdministrativeUnit } from '../../worship-plugin';
 export type FetchMandateesArgs = {
     endpoint: string;
     searchString: string;
-    adminUnitSearch: string;
+    administrativeUnit?: AdministrativeUnit;
     page: number;
     pageSize: number;
     sort: SearchSort;
     period: (typeof BESTUURSPERIODES)[keyof typeof BESTUURSPERIODES];
+    abortSignal?: AbortSignal;
 };
-export declare function countElectees({ endpoint, searchString, adminUnitSearch, period, }: Pick<FetchMandateesArgs, 'searchString' | 'endpoint' | 'period' | 'adminUnitSearch'>): Promise<number>;
-export declare function fetchElectees({ endpoint, page, pageSize, searchString, adminUnitSearch, sort, period, }: FetchMandateesArgs): Promise<{
+export declare function countElectees({ endpoint, searchString, administrativeUnit, period, abortSignal, }: Pick<FetchMandateesArgs, 'searchString' | 'endpoint' | 'period' | 'administrativeUnit' | 'abortSignal'>): Promise<number>;
+export declare function fetchElectees({ endpoint, page, pageSize, searchString, administrativeUnit, sort, period, abortSignal, }: FetchMandateesArgs): Promise<{
     electees: Electee[];
     count: number;
 }>;
+type FetchAdministrativeUnitsArgs = {
+    endpoint: string;
+    searchString?: string;
+    lmbPeriod?: (typeof BESTUURSPERIODES)[keyof typeof BESTUURSPERIODES];
+    classificationCodes?: string[];
+    limit?: number;
+    abortSignal?: AbortSignal;
+};
+/**
+ * Function which fetches an alphabetically ordered series of administrative units (the top-level ones, not the tijdspecialisatie ones)
+ * Additionally allows to filter by period, to only return administrative units which have a tijdsspecialisatie in the given period.
+ */
+export declare function fetchAdministrativeUnits({ endpoint, searchString, lmbPeriod, classificationCodes, limit, abortSignal, }: FetchAdministrativeUnitsArgs): Promise<AdministrativeUnit[]>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "38.3.0",
+  "version": "39.0.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/translations/en-US.yaml

@@ -7,6 +7,7 @@ common:
     error-title: Error while loading results
     error-intro: 'An error occurred while loading results'
     error-outro: In case this problem keeps occurring, please contact
+    type-to-search: Type to search
   sort:
     sort: Sort
     asc: Sort ascending

package/translations/nl-BE.yaml

@@ -7,6 +7,7 @@ common:
     error-title: Probleem bij het laden
     error-intro: 'Er is een fout opgetreden tijdens het laden van de resultaten:'
     error-outro: Moest dit probleem aanhouden, neem contact op met
+    type-to-search: Typ om te zoeken
   sort:
     sort: Sorteren
     asc: Oplopend sorteren

package/addon/components/lmb-plugin/insert.hbs

@@ -1,18 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<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>
-
-<LmbPlugin::SearchModal
-  @open={{this.showModal}}
-  @closeModal={{this.closeModal}}
-  @config={{@config}}
-  @onInsert={{this.onInsert}}
-/>

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

@@ -1,60 +0,0 @@
-<AuTable>
-  <:header>
-    <tr class='au-c-data-table__header-title'>
-      <th>
-        <Common::Sort::SortableTableHeader
-          @field='fullName'
-          @label={{t 'lmb-plugin.modal.fields.name'}}
-          @sort={{@sort}}
-          @setSort={{@setSort}}
-        />
-      </th>
-      <th>
-        <Common::Sort::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>

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

@@ -1,100 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<AuModal
-  class='worship-modal'
-  @modalOpen={{@open}}
-  @closeModal={{this.closeModal}}
-  @title={{t 'lmb-plugin.modal.title'}}
-  @size='large'
-  @padding='none'
-  as |modal|
->
-  <modal.Body>
-    <AuMainContainer
-      @scroll={{true}}
-      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.searchText}}
-              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>
-            <AuNativeInput
-              @type='text'
-              @width='block'
-              id='searchAdminUnit'
-              value={{this.adminUnitSearch}}
-              placeholder={{t 'lmb-plugin.modal.adminUnitSearch.placeholder'}}
-              {{on 'input' this.setAdminUnitSearch}}
-            />
-
-          </div>
-        </div>
-      </mc.sidebar>
-      <mc.content @scroll={{true}}>
-        <div class='worship-modal--list-container'>
-          {{#if this.error}}
-            <Common::Search::AlertLoadError @error={{this.error}} />
-          {{else}}
-            <LmbPlugin::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|
-          }}
-            <Pagination::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>

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

@@ -1,189 +0,0 @@
-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,
-  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';
-export type SearchSort = [keyof Electee, 'ASC' | 'DESC'] | false;
-
-interface Args {
-  config: LmbPluginConfig;
-  open: boolean;
-  closeModal: () => void;
-  onInsert: (electee: Electee) => void;
-}
-interface AdminPeriodOption {
-  label: BestuursperiodeLabel;
-  uri: BestuursperiodeURI;
-}
-
-export default class LmbPluginSearchModalComponent extends Component<Args> {
-  // 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
-  @tracked adminUnitSearch: string;
-  // tracks whether the user has just typed a character
-  // doesn't need to be reactive
-  typing = false;
-  constructor(owner: unknown, args: 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];
-    this.adminUnitSearch = args.config.defaultAdminUnit ?? '';
-  }
-
-  get config() {
-    return this.args.config;
-  }
-  selectAdminPeriod = (value: AdminPeriodOption) => {
-    this.selectedAdminPeriod = value;
-    this.pageNumber = 0;
-  };
-  setAdminUnitSearch = (event: InputEvent) => {
-    this.typing = true;
-    assert(
-      'setAdminUnitSearch must be bound to an input element',
-      event.target instanceof HTMLInputElement,
-    );
-    this.adminUnitSearch = event.target.value;
-    this.pageNumber = 0;
-  };
-
-  @action
-  async closeModal() {
-    this.typing = false;
-    this.inputSearchText = null;
-    this.sort = false;
-    await this.servicesResource.cancel();
-    this.args.closeModal();
-  }
-
-  // TODO Either make this a trackedFunction or do filtering on the query and correctly pass an
-  // AbortController
-  search = restartableTask(
-    async ({
-      endpoint,
-      searchString,
-      page,
-      pageSize,
-      sort,
-      period,
-      adminUnitSearch,
-    }: 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,
-        };
-      }
-
-      try {
-        const result = await fetchElectees({
-          endpoint,
-          searchString,
-          page,
-          pageSize,
-          sort,
-          period,
-          adminUnitSearch,
-        });
-        const { count, electees } = result;
-
-        return {
-          results: electees,
-          totalCount: count,
-        };
-      } catch (err) {
-        console.error('Got an error fetching electees', err);
-        this.error = err;
-      }
-      return {
-        results: [],
-        totalCount: 0,
-      };
-    },
-  );
-
-  servicesResource = trackedTask(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,
-      adminUnitSearch: this.adminUnitSearch,
-    } satisfies Partial<FetchMandateesArgs> & { open: boolean },
-  ]);
-
-  @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();
-  }
-}