@lblod/ember-rdfa-editor-lblod-plugins 16.3.0 → 16.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 16.4.0
+
+### Minor Changes
+
+- [#404](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/404) [`9382c7f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/9382c7f3e1c0e9495e2d9a7c21a58505653693b4) Thanks [@piemonkey](https://github.com/piemonkey)! - Add plugin to handle inserting worship services (erediensten)
+
 ## 16.3.0
 
 ### Minor Changes

package/addon/components/citation-plugin/citation-card.hbs

@@ -86,7 +86,7 @@
           }}</span>
       {{else}}
         {{#if this.error}}
-          <CitationPlugin::Helpers::AlertLoadError
+          <Common::Search::AlertLoadError
             @fullSize={{false}}
             @error={{this.error}}
           />

package/addon/components/citation-plugin/citations/article-list.hbs

@@ -9,5 +9,5 @@
     {{/each}}
   </AuList>
 {{else}}
-  <CitationPlugin::Helpers::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
-{{/if}}
+  <Common::Search::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
+{{/if}}

package/addon/components/citation-plugin/citations/legal-document-detail.hbs

@@ -47,7 +47,7 @@
         </div>
       {{else}}
         {{#if this.error}}
-          <CitationPlugin::Helpers::AlertLoadError @fullSize={{true}} @error={{this.error}} class="au-o-box"/>
+          <Common::Search::AlertLoadError @fullSize={{true}} @error={{this.error}} class="au-o-box"/>
         {{else}}
           <CitationPlugin::Citations::ArticleList
             @insertArticleCitation={{fn @insertArticleCitation @legalDocument}}
@@ -110,4 +110,4 @@
       </AuToolbar>
     </div>
   </div>
-</div>
+</div>

package/addon/components/citation-plugin/citations/legal-document-list.hbs

@@ -11,5 +11,5 @@
     {{/each}}
   </AuList>
 {{else}}
-  <CitationPlugin::Helpers::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
-{{/if}}
+  <Common::Search::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
+{{/if}}

package/addon/components/citation-plugin/citations/search-modal.hbs

@@ -1,4 +1,5 @@
 <AuModal
+  class="citaten-modal"
   @modalOpen={{@open}}
   @closeModal={{fn this.closeModal this.legislationTypeUri this.text}}
   @title={{t 'citaten-plugin.card.title'}}
@@ -197,14 +198,11 @@
         <mc.content>
           {{#if this.legalDocumentResource.isRunning}}
             <div class='au-u-margin'>
-              <AuLoader @padding='large' />
-              <span class='au-u-hidden-visually'>{{t
-                  'citaten-plugin.alert.loading'
-                }}</span>
+              <Common::Search::Loading />
             </div>
           {{else}}
             {{#if this.error}}
-              <CitationPlugin::Helpers::AlertLoadError
+              <Common::Search::AlertLoadError
                 @fullSize={{true}}
                 @error={{this.error}}
                 class='au-u-margin'
@@ -222,7 +220,7 @@
                   />
                 </div>
               {{else}}
-                <CitationPlugin::Helpers::AlertNoItems
+                <Common::Search::AlertNoItems
                   @fullSize={{true}}
                   class='au-u-margin'
                 />

package/addon/components/{snippet-plugin/helpers → common/search}/alert-load-error.hbs

@@ -1,15 +1,16 @@
 <AuAlert
-  @title='{{t "snippet-plugin.modal.alert.error-title"}}'
+  @title={{t 'common.search.error-title'}}
   @skin='error'
   @icon='alert-triangle'
   @closable={{false}}
-  class='au-u-margin au-u-margin-top-none'
+  @size={{if @fullSize 'default' 'small'}}
+  class='au-u-margin'
   ...attributes
 >
-  <p>{{t 'snippet-plugin.modal.alert.error-intro'}}</p>
-  <code class='au-u-error snippet-modal--error-code'>{{@error}}</code>
+  <p>{{t 'common.search.error-intro'}}</p>
+  <code class='au-u-error error-code'>{{@error}}</code>
   <p>
-    {{t 'snippet-plugin.modal.alert.error-outro'}}
+    {{t 'common.search.error-outro'}}
     <AuLinkExternal
       href='mailto:gelinktnotuleren@vlaanderen.be'
       @icon='mail'

package/addon/components/common/search/alert-no-items.hbs

@@ -0,0 +1,9 @@
+<AuAlert
+  @title={{t 'common.search.no-results'}}
+  @skin='warning'
+  @icon='cross'
+  @size={{if @fullSize 'default' 'small'}}
+  @closable={{false}}
+  class={{unless @fullSize 'au-u-margin-small'}}
+  ...attributes
+/>

package/addon/components/common/search/loading.hbs

@@ -0,0 +1,4 @@
+<AuLoader @padding='large' />
+<span class='au-u-hidden-visually'>
+  {{t 'common.search.loading'}}
+</span>

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

@@ -1,4 +1,5 @@
 <AuModal
+  class="snippet-modal"
   @modalOpen={{@open}}
   @closeModal={{this.closeModal}}
   @title={{t 'snippet-plugin.modal.title'}}
@@ -39,14 +40,11 @@
         <div class='au-u-padding-top snippet-modal--list-container'>
           {{#if this.snippetsResource.isRunning}}
             <div class='au-u-margin'>
-              <AuLoader @padding='large' />
-              <span class='au-u-hidden-visually'>
-                {{t 'snippet-plugin.alert.loading'}}
-              </span>
+              <Common::Search::Loading />
             </div>
           {{else}}
             {{#if this.error}}
-              <SnippetPlugin::Helpers::AlertLoadError @error={{this.error}} />
+              <Common::Search::AlertLoadError @error={{this.error}} />
             {{else}}
               {{#if this.snippetsResource.value.length}}
                 <SnippetPlugin::Snippets::SnippetList
@@ -54,7 +52,7 @@
                   @onInsert={{@onInsert}}
                 />
               {{else}}
-                <SnippetPlugin::Helpers::AlertNoItems />
+                <Common::Search::AlertNoItems />
               {{/if}}
             {{/if}}
           {{/if}}

package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.hbs

@@ -39,14 +39,11 @@
         <div class='au-u-padding-top snippet-modal--list-container'>
           {{#if this.snippetListResource.isRunning}}
             <div class='au-u-margin'>
-              <AuLoader @padding='large' />
-              <span class='au-u-hidden-visually'>
-                {{t 'snippet-plugin.alert.loading'}}
-              </span>
+              <Common::Search::Loading />
             </div>
           {{else}}
             {{#if this.error}}
-              <SnippetPlugin::Helpers::AlertLoadError @error={{this.error}} />
+              <Common::Search::AlertLoadError @error={{this.error}} class="au-u-margin-top-none" />
             {{else}}
               {{#if this.snippetListResource.value.length}}
                 <SnippetPlugin::SnippetList::SnippetListView
@@ -55,7 +52,7 @@
                   @onChange={{this.onChange}}
                 />
               {{else}}
-                <SnippetPlugin::Helpers::AlertNoItems />
+                <Common::Search::AlertNoItems />
               {{/if}}
             {{/if}}
           {{/if}}

package/addon/components/worship-plugin/administrative-unit-picker.hbs

@@ -0,0 +1,15 @@
+<PowerSelect
+  @loadingMessage={{t 'common.search.loading'}}
+  @searchMessage={{t 'worship-plugin.modal.search.search'}}
+  @noMatchesMessage={{t 'worship-plugin.modal.search.no-results'}}
+  @placeholderMessage={{t 'worship-plugin.modal.fields.admin-unit'}}
+  @allowClear={{true}}
+  @renderInPlace={{true}}
+  @searchEnabled={{true}}
+  @search={{perform this.searchUnits}}
+  @selected={{@selectedUnit}}
+  @onChange={{@onSelectUnit}}
+  ...attributes
+  as |unit|>
+  {{unit.label}}
+</PowerSelect>

package/addon/components/worship-plugin/administrative-unit-picker.ts

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { restartableTask, timeout } from 'ember-concurrency';
+import { AdministrativeUnit } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import { fetchAdministrativeUnits } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchAdministrativeUnits';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+
+interface Args {
+  config: WorshipPluginConfig;
+  selectedUnit?: AdministrativeUnit;
+  onSelectUnit: (unit: AdministrativeUnit) => void;
+}
+
+export default class AdministrativeUnitPickerComponent extends Component<Args> {
+  searchUnits = restartableTask(async (search: string) => {
+    await timeout(200);
+
+    const abortController = new AbortController();
+    try {
+      const units = await fetchAdministrativeUnits({
+        search,
+        config: this.args.config,
+        abortSignal: abortController.signal,
+      });
+
+      return units;
+    } catch (err) {
+      // ember-power-select doesn't seem to have a way to display errors.
+      console.error(
+        'Error occured when searching for administrative units',
+        err,
+      );
+      // We just re-throw to keep TS happy, ember-concurrency just swallows it.
+      throw err;
+    } finally {
+      abortController.abort();
+    }
+  });
+}

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

@@ -0,0 +1,17 @@
+<li class='au-c-list__item'>
+  <AuButton
+    @icon='add'
+    @iconAlignment='left'
+    @skin='link'
+    {{on 'click' this.openModal}}
+  >
+    {{t 'worship-plugin.insert.title'}}
+  </AuButton>
+</li>
+
+<WorshipPlugin::SearchModal
+  @open={{this.showModal}}
+  @closeModal={{this.closeModal}}
+  @config={{@config}}
+  @onInsert={{this.onInsert}}
+/>

package/addon/components/worship-plugin/insert.ts

@@ -0,0 +1,38 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import { WorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+import { insertWorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/insertWorshipService';
+
+interface Args {
+  controller: SayController;
+  config: WorshipPluginConfig;
+}
+
+export default class WorshipPluginInsertComponent extends Component<Args> {
+  @tracked showModal = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  openModal() {
+    this.controller.focus();
+    this.showModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showModal = false;
+  }
+
+  @action
+  onInsert(service: WorshipService) {
+    insertWorshipService(this.controller, service);
+    this.closeModal();
+  }
+}

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

@@ -0,0 +1,46 @@
+<AuTable>
+  <:header>
+    <tr class='au-c-data-table__header-title'>
+      <th>
+        <WorshipPlugin::SortableTableHeader
+          @field='label'
+          @label={{t 'worship-plugin.modal.fields.name'}}
+          @sort={{@sort}}
+          @setSort={{@setSort}}
+        />
+      </th>
+      <th />
+    </tr>
+  </:header>
+  <:body>
+    {{#unless (or @services.isRunning @error)}}
+      {{#if @services.value.totalCount}}
+        {{#each @services.value.results as |row|}}
+          <tr>
+            <td>{{row.label}}</td>
+            <td class='au-u-text-center'>
+              <AuButton
+                {{on 'click' (fn @insert row)}}
+              >
+                {{t 'worship-plugin.modal.insert'}}
+              </AuButton>
+            </td>
+          </tr>
+        {{/each}}
+      {{/if}}
+    {{/unless}}
+  </:body>
+</AuTable>
+{{#if @services.isRunning}}
+  <div class='au-u-margin'>
+    <Common::Search::Loading />
+  </div>
+{{else}}
+  {{#if @error}}
+    <Common::Search::AlertLoadError @error={{@error}} />
+  {{else}}
+    {{#unless @services.value.totalCount}}
+      <Common::Search::AlertNoItems />
+    {{/unless}}
+  {{/if}}
+{{/if}}

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

@@ -0,0 +1,78 @@
+<AuModal
+  class='worship-modal'
+  @modalOpen={{@open}}
+  @closeModal={{this.closeModal}}
+  @title={{t 'worship-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 'worship-plugin.modal.search.title'}}
+            </AuHeading>
+            <AuLabel
+              class='au-margin-bottom-small'
+              for='searchTerm'
+            >
+              {{t 'worship-plugin.modal.fields.name'}}
+            </AuLabel>
+            <AuNativeInput
+              @type='text'
+              @width='block'
+              id='searchTerm'
+              value={{this.searchText}}
+              placeholder={{t 'worship-plugin.modal.search.placeholder'}}
+              {{on 'input' this.setInputSearchText}}
+            />
+            <AuLabel
+              class='au-margin-bottom-small'
+              for='admin-unit-select'
+            >
+              {{t 'worship-plugin.modal.fields.admin-unit'}}
+            </AuLabel>
+            <WorshipPlugin::AdministrativeUnitPicker
+              id='admin-unit-select'
+              @config={{@config}}
+              @selectedUnit={{this.administrativeUnit}}
+              @onSelectUnit={{this.setAdministrativeUnit}}
+            />
+          </div>
+        </div>
+      </mc.sidebar>
+      <mc.content @scroll={{true}}>
+        <div class='worship-modal--list-container'>
+          <WorshipPlugin::List
+            @error={{this.error}}
+            @services={{this.servicesResource}}
+            @sort={{this.sort}}
+            @setSort={{this.setSort}}
+            @insert={{@onInsert}}
+          />
+        </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/worship-plugin/search-modal.ts

@@ -0,0 +1,129 @@
+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 'ember-resources/util/ember-concurrency';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import {
+  fetchWorshipServices,
+  SearchSort,
+  WorshipService,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+import { AdministrativeUnit } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+
+interface Args {
+  config: WorshipPluginConfig;
+  open: boolean;
+  closeModal: () => void;
+  onInsert: (service: WorshipService) => void;
+}
+
+export default class WorshipPluginSearchModalComponent extends Component<Args> {
+  // Filtering
+  @tracked sort: SearchSort = false;
+  @tracked inputSearchText: string | null = null;
+  @tracked administrativeUnit: AdministrativeUnit | undefined =
+    this.args.config.defaultAdministrativeUnit;
+
+  // Display
+  @tracked error: unknown;
+
+  // Pagination
+  @tracked pageNumber = 0;
+  @tracked pageSize = 20;
+  @tracked totalCount = 0;
+
+  get config() {
+    return this.args.config;
+  }
+
+  get searchText() {
+    return this.inputSearchText;
+  }
+
+  @action
+  setInputSearchText(event: InputEvent) {
+    assert(
+      'inputSearchText must be bound to an input element',
+      event.target instanceof HTMLInputElement,
+    );
+
+    this.inputSearchText = event.target.value;
+  }
+
+  @action
+  setAdministrativeUnit(unit: AdministrativeUnit) {
+    this.administrativeUnit = unit;
+  }
+
+  @action
+  async closeModal() {
+    await this.servicesResource.cancel();
+    this.args.closeModal();
+  }
+
+  search = restartableTask(async () => {
+    await timeout(500);
+
+    const abortController = new AbortController();
+
+    try {
+      const queryResult = await fetchWorshipServices({
+        administrativeUnitURI: this.administrativeUnit?.uri,
+        config: this.args.config,
+        searchMeta: {
+          abortSignal: abortController.signal,
+          filter: {
+            label: this.inputSearchText ?? undefined,
+          },
+          sort: this.sort,
+          page: this.pageNumber,
+          pageSize: this.pageSize,
+        },
+      });
+      this.error = undefined;
+
+      // Reset to first page if there are no results for this one e.g. when changing search
+      if (
+        this.pageNumber !== 0 &&
+        this.pageNumber * this.pageSize >= queryResult.totalCount
+      ) {
+        this.pageNumber = 0;
+      }
+
+      return queryResult;
+    } catch (error) {
+      this.error = error;
+      return {
+        results: [],
+        totalCount: 0,
+      };
+    } finally {
+      abortController.abort();
+    }
+  });
+
+  servicesResource = trackedTask(this, this.search, () => [
+    this.inputSearchText,
+    this.administrativeUnit,
+    this.pageNumber,
+    this.pageSize,
+    this.sort,
+  ]);
+
+  @action
+  setSort(sort: SearchSort) {
+    this.sort = sort;
+  }
+
+  @action
+  previousPage() {
+    --this.pageNumber;
+  }
+
+  @action
+  nextPage() {
+    ++this.pageNumber;
+  }
+}

package/addon/components/worship-plugin/sortable-table-header.hbs

@@ -0,0 +1,35 @@
+{{!-- Based on au-data-table-th-sortable from ember-appuniversum and using the same classes --}}
+<span
+  class='au-c-data-table__header-title au-c-data-table__header-title--sortable
+    {{if this.order ' is-active'}}'
+>
+  {{@label}}
+  {{#if (eq this.order 'DESC')}}
+    <button
+      type='button'
+      {{on 'click' this.changeSort}}
+      class='au-c-data-table__sort'
+    >
+      <span class='au-u-hidden-visually'>{{t 'worship-plugin.modal.sort.asc'}}</span>
+      <AuIcon @icon='nav-up' />
+    </button>
+  {{else if (eq this.order 'ASC')}}
+    <button
+      type='button'
+      {{on 'click' this.changeSort}}
+      class='au-c-data-table__sort'
+    >
+      <span class='au-u-hidden-visually'>{{t 'worship-plugin.modal.sort.desc'}}</span>
+      <AuIcon @icon='nav-down' />
+    </button>
+  {{else}}
+    <button
+      type='button'
+      {{on 'click' this.changeSort}}
+      class='au-c-data-table__sort'
+    >
+      <span class='au-u-hidden-visually'>{{t 'worship-plugin.modal.sort.sort'}}</span>
+      <AuIcon @icon='nav-up-down' />
+    </button>
+  {{/if}}
+</span>

package/addon/components/worship-plugin/sortable-table-header.ts

@@ -0,0 +1,38 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import {
+  SearchSort,
+  WorshipService,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+
+interface Args {
+  label: string;
+  field: keyof WorshipService;
+  sort: SearchSort;
+  setSort: (sort: SearchSort) => void;
+}
+
+export default class SnippetInsertComponent extends Component<Args> {
+  get order() {
+    if (this.args.sort) {
+      const [sortedField, order] = this.args.sort;
+      if (sortedField === this.args.field) {
+        return order;
+      }
+    }
+    return false;
+  }
+
+  @action changeSort() {
+    const order = this.order;
+    let newSort: SearchSort;
+    if (!order) {
+      newSort = [this.args.field, 'ASC'];
+    } else if (order === 'ASC') {
+      newSort = [this.args.field, 'DESC'];
+    } else {
+      newSort = false;
+    }
+    this.args.setSort(newSort);
+  }
+}

package/addon/plugins/snippet-plugin/utils/fetch-data.ts

@@ -1,15 +1,13 @@
 import {
   executeCountQuery,
   executeQuery,
+  sparqlEscapeString,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
 import { Snippet, SnippetList } from '../index';
 
 type Filter = { name?: string; assignedSnippetListIds?: string[] };
 type Pagination = { pageNumber: number; pageSize: number };
 
-const sparqlEscapeString = (value: string) =>
-  '"""' + value.replace(/[\\"]/g, (match) => '\\' + match) + '"""';
-
 const buildSnippetCountQuery = ({ name, assignedSnippetListIds }: Filter) => {
   return `
       PREFIX schema: <http://schema.org/>

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

@@ -0,0 +1,9 @@
+export type AdministrativeUnit = {
+  uri: string;
+  label: string;
+};
+
+export type WorshipPluginConfig = {
+  endpoint: string;
+  defaultAdministrativeUnit?: AdministrativeUnit;
+};

package/addon/plugins/worship-plugin/utils/fetchAdministrativeUnits.ts

@@ -0,0 +1,52 @@
+import {
+  type BindingObject,
+  executeQuery,
+  sparqlEscapeString,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
+import { AdministrativeUnit, WorshipPluginConfig } from '../';
+
+export interface FetchAdministrativeUnitsArgs {
+  config: WorshipPluginConfig;
+  search: string;
+  abortSignal?: AbortSignal;
+}
+
+const emptyUnit: AdministrativeUnit = {
+  uri: '',
+  label: '',
+};
+const selectUnit = Object.keys(emptyUnit)
+  .map((key) => `?${key}`)
+  .join(' ');
+
+export async function fetchAdministrativeUnits({
+  config: { endpoint },
+  search,
+  abortSignal,
+}: FetchAdministrativeUnitsArgs): Promise<AdministrativeUnit[]> {
+  const filterQuery = !search
+    ? ''
+    : `FILTER(CONTAINS(LCASE(?label), LCASE(${sparqlEscapeString(search)})))`;
+
+  const query = `
+    PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+    PREFIX erediensten: <http://data.lblod.info/vocabularies/erediensten/>
+
+    SELECT DISTINCT ${selectUnit} WHERE {
+    ?uri erediensten:betrokkenBestuur ?targetUri;
+      skos:prefLabel ?label.
+    ${filterQuery}
+    }
+  `;
+
+  const queryResult = await executeQuery<BindingObject<AdministrativeUnit>>({
+    endpoint,
+    query,
+    abortSignal,
+  });
+
+  return queryResult.results.bindings.map<AdministrativeUnit>((binding) => ({
+    uri: binding.uri.value,
+    label: binding.label.value,
+  }));
+}

package/addon/plugins/worship-plugin/utils/fetchWorshipServices.ts

@@ -0,0 +1,109 @@
+import RSVP from 'rsvp';
+import {
+  type BindingObject,
+  executeCountQuery,
+  executeQuery,
+  sparqlEscapeString,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
+import { WorshipPluginConfig } from '../';
+
+export type WorshipService = {
+  uri: string;
+  label: string;
+};
+export interface WorshipServiceResponse {
+  results: WorshipService[];
+  totalCount: number;
+}
+export type SearchSort = [keyof WorshipService, 'ASC' | 'DESC'] | false;
+export interface SearchMeta {
+  filter?: Partial<WorshipService>;
+  sort?: SearchSort;
+  pageSize: number;
+  page: number;
+  abortSignal: AbortSignal;
+}
+export interface FetchWorshipServicesArgs {
+  administrativeUnitURI?: string;
+  searchMeta: SearchMeta;
+  config: WorshipPluginConfig;
+}
+
+const emptyWorshipService: WorshipService = {
+  uri: '',
+  label: '',
+};
+const selectWorshipService = Object.keys(emptyWorshipService)
+  .map((key) => `?${key}`)
+  .join(' ');
+
+export async function fetchWorshipServices({
+  administrativeUnitURI,
+  config: { endpoint },
+  searchMeta: { abortSignal, filter, pageSize, page, sort },
+}: FetchWorshipServicesArgs): Promise<WorshipServiceResponse> {
+  const unitQuery = !administrativeUnitURI
+    ? ''
+    : `<${administrativeUnitURI}> erediensten:betrokkenBestuur/org:organization ?uri.`;
+  const sortQuery = !sort ? '' : `ORDER BY ${sort[1]}(?${sort[0]})`;
+  const filterQuery = !filter
+    ? ''
+    : Object.entries(filter)
+        .map(([field, search]) =>
+          search?.length > 0
+            ? `FILTER(CONTAINS(LCASE(?${field}), LCASE(${sparqlEscapeString(
+                search,
+              )})))`
+            : undefined,
+        )
+        .filter(Boolean)
+        .join('; ');
+
+  const query = `
+    PREFIX org: <http://www.w3.org/ns/org#>
+    PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+    PREFIX erediensten: <http://data.lblod.info/vocabularies/erediensten/>
+
+    SELECT ${selectWorshipService} WHERE {
+      ?uri a erediensten:BestuurVanDeEredienst;
+          skos:prefLabel ?label.
+      ${unitQuery}
+      ${filterQuery}
+    }
+    ${sortQuery} LIMIT ${pageSize} OFFSET ${page * pageSize}
+  `;
+  const countQuery = `
+    PREFIX org: <http://www.w3.org/ns/org#>
+    PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+    PREFIX erediensten: <http://data.lblod.info/vocabularies/erediensten/>
+
+    SELECT (count(?uri) as ?count) WHERE {
+      ?uri a erediensten:BestuurVanDeEredienst;
+          skos:prefLabel ?label.
+      ${unitQuery}
+      ${filterQuery}
+    }
+  `;
+
+  const totalCountPromise = executeCountQuery({
+    endpoint,
+    query: countQuery,
+    abortSignal,
+  });
+
+  const resultsPromise = executeQuery<BindingObject<WorshipService>>({
+    endpoint,
+    query,
+    abortSignal,
+  }).then((queryResult) =>
+    queryResult.results.bindings.map<WorshipService>((binding) => ({
+      uri: binding.uri.value,
+      label: binding.label.value,
+    })),
+  );
+
+  return RSVP.hash({
+    results: resultsPromise,
+    totalCount: totalCountPromise,
+  });
+}

package/addon/plugins/worship-plugin/utils/insertWorshipService.ts

@@ -0,0 +1,16 @@
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { WorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+
+export function insertWorshipService(
+  controller: SayController,
+  worshipService: WorshipService,
+) {
+  const node = controller.schema.text(worshipService.label);
+
+  controller.withTransaction(
+    (tr) => {
+      return tr.replaceSelectionWith(node);
+    },
+    { view: controller.mainEditorView },
+  );
+}

package/addon/utils/sparql-helpers.ts

@@ -1,6 +1,11 @@
 import * as RDF from '@rdfjs/types';
 import { optionMapOr } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
+export type BindingObject<Obj extends Record<string, string>> = Record<
+  keyof Obj,
+  { value: string }
+>;
+
 export interface QueryResult<Binding = Record<string, RDF.Term>> {
   results: {
     bindings: Binding[];
@@ -13,6 +18,9 @@ interface QueryConfig {
   abortSignal?: AbortSignal;
 }
 
+export const sparqlEscapeString = (value: string) =>
+  '"""' + value.replace(/[\\"]/g, (match) => '\\' + match) + '"""';
+
 export async function executeQuery<Binding = Record<string, RDF.Term>>({
   query,
   endpoint,

package/app/components/{citation-plugin/helpers/alert-no-items.js → common/search/alert-load-error.js}

@@ -1 +1 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/citation-plugin/helpers/alert-no-items';
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/alert-load-error';

package/app/components/{snippet-plugin/helpers → common/search}/alert-no-items.js

@@ -1 +1 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/helpers/alert-no-items';
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/alert-no-items';

package/app/components/{snippet-plugin/helpers/alert-load-error.js → common/search/loading.js}

@@ -1 +1 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/helpers/alert-load-error';
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/common/search/loading';

package/app/components/worship-plugin/administrative-unit-picker.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/worship-plugin/administrative-unit-picker';

package/app/components/{citation-plugin/helpers/alert-load-error.js → worship-plugin/insert.js}

@@ -1 +1 @@
-export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/citation-plugin/helpers/alert-load-error';
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/worship-plugin/insert';

package/app/components/worship-plugin/list.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/worship-plugin/list';

package/app/components/worship-plugin/search-modal.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/worship-plugin/search-modal';

package/app/components/worship-plugin/sortable-table-header.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/worship-plugin/sortable-table-header';

package/app/styles/citaten-plugin.scss

@@ -43,7 +43,7 @@
   overflow: auto;
 }
 
-.citaten--error-code {
+.citaten-modal .error-code {
   font-family: var(--au-font-tertiary);
 }
 

package/app/styles/snippet-plugin.scss

@@ -19,7 +19,7 @@
     flex-grow: 1;
   }
 
-  &--error-code {
+  .error-code {
     font-family: var(--au-font-tertiary);
   }
 }

package/app/styles/worship-plugin.scss

@@ -0,0 +1,19 @@
+.worship-modal {
+  &--main-container {
+    height: 100% !important;
+
+    #content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &--list-container {
+    overflow: auto;
+    flex-grow: 1;
+  }
+
+  .error-code {
+    font-family: var(--au-font-tertiary);
+  }
+}

package/components/worship-plugin/administrative-unit-picker.d.ts

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { AdministrativeUnit } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+interface Args {
+    config: WorshipPluginConfig;
+    selectedUnit?: AdministrativeUnit;
+    onSelectUnit: (unit: AdministrativeUnit) => void;
+}
+export default class AdministrativeUnitPickerComponent extends Component<Args> {
+    searchUnits: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, (search: string) => Promise<AdministrativeUnit[]>>;
+}
+export {};

package/components/worship-plugin/insert.d.ts

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import { WorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+interface Args {
+    controller: SayController;
+    config: WorshipPluginConfig;
+}
+export default class WorshipPluginInsertComponent extends Component<Args> {
+    showModal: boolean;
+    get controller(): SayController;
+    openModal(): void;
+    closeModal(): void;
+    onInsert(service: WorshipService): void;
+}
+export {};

package/components/worship-plugin/search-modal.d.ts

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import { SearchSort, WorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+import { AdministrativeUnit } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+interface Args {
+    config: WorshipPluginConfig;
+    open: boolean;
+    closeModal: () => void;
+    onInsert: (service: WorshipService) => void;
+}
+export default class WorshipPluginSearchModalComponent extends Component<Args> {
+    sort: SearchSort;
+    inputSearchText: string | null;
+    administrativeUnit: AdministrativeUnit | undefined;
+    error: unknown;
+    pageNumber: number;
+    pageSize: number;
+    totalCount: number;
+    get config(): WorshipPluginConfig;
+    get searchText(): string | null;
+    setInputSearchText(event: InputEvent): void;
+    setAdministrativeUnit(unit: AdministrativeUnit): void;
+    closeModal(): Promise<void>;
+    search: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, () => Promise<import("@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices").WorshipServiceResponse>>;
+    servicesResource: import("ember-resources/util/ember-concurrency").TaskInstance<unknown>;
+    setSort(sort: SearchSort): void;
+    previousPage(): void;
+    nextPage(): void;
+}
+export {};

package/components/worship-plugin/sortable-table-header.d.ts

@@ -0,0 +1,13 @@
+import Component from '@glimmer/component';
+import { SearchSort, WorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+interface Args {
+    label: string;
+    field: keyof WorshipService;
+    sort: SearchSort;
+    setSort: (sort: SearchSort) => void;
+}
+export default class SnippetInsertComponent extends Component<Args> {
+    get order(): false | "ASC" | "DESC";
+    changeSort(): void;
+}
+export {};

package/package.json

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

package/plugins/worship-plugin/index.d.ts

@@ -0,0 +1,8 @@
+export type AdministrativeUnit = {
+    uri: string;
+    label: string;
+};
+export type WorshipPluginConfig = {
+    endpoint: string;
+    defaultAdministrativeUnit?: AdministrativeUnit;
+};

package/plugins/worship-plugin/utils/fetchAdministrativeUnits.d.ts

@@ -0,0 +1,7 @@
+import { AdministrativeUnit, WorshipPluginConfig } from '../';
+export interface FetchAdministrativeUnitsArgs {
+    config: WorshipPluginConfig;
+    search: string;
+    abortSignal?: AbortSignal;
+}
+export declare function fetchAdministrativeUnits({ config: { endpoint }, search, abortSignal, }: FetchAdministrativeUnitsArgs): Promise<AdministrativeUnit[]>;

package/plugins/worship-plugin/utils/fetchWorshipServices.d.ts

@@ -0,0 +1,23 @@
+import { WorshipPluginConfig } from '../';
+export type WorshipService = {
+    uri: string;
+    label: string;
+};
+export interface WorshipServiceResponse {
+    results: WorshipService[];
+    totalCount: number;
+}
+export type SearchSort = [keyof WorshipService, 'ASC' | 'DESC'] | false;
+export interface SearchMeta {
+    filter?: Partial<WorshipService>;
+    sort?: SearchSort;
+    pageSize: number;
+    page: number;
+    abortSignal: AbortSignal;
+}
+export interface FetchWorshipServicesArgs {
+    administrativeUnitURI?: string;
+    searchMeta: SearchMeta;
+    config: WorshipPluginConfig;
+}
+export declare function fetchWorshipServices({ administrativeUnitURI, config: { endpoint }, searchMeta: { abortSignal, filter, pageSize, page, sort }, }: FetchWorshipServicesArgs): Promise<WorshipServiceResponse>;

package/plugins/worship-plugin/utils/insertWorshipService.d.ts

@@ -0,0 +1,3 @@
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { WorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+export declare function insertWorshipService(controller: SayController, worshipService: WorshipService): void;

package/translations/en-US.yaml

@@ -1,3 +1,11 @@
+common:
+  search:
+    loading: Loading…
+    no-results: No results found
+    error-title: Error while loading results
+    error-intro: 'An error occurred while loading results'
+    error-outro: In case this problem keeps occurring, please contact
+
 article-structure-plugin:
   insert:
     paragraph: Insert paragraph
@@ -103,12 +111,6 @@ citaten-plugin:
     lookup-publicatie-short: Publicatie
     publicatie-non-available: Full content not public
     publicatie-non-available-short: Not public
-  alert:
-    loading: Loading…
-    no-results: No results found
-    error-title: Error while loading results
-    error-intro: 'An error occured while loading results from the Flemish Codex:'
-    error-outro: In case this problem keeps occuring, please contact
 
 besluit-type-plugin:
   dt: 'Decision type'
@@ -267,12 +269,6 @@ snippet-plugin:
       title: Filter on
       label: Snippet name
       placeholder: Type something...
-    alert:
-      loading: Loading…
-      no-results: No results found
-      error-title: Error while loading results
-      error-intro: 'An error occurred while loading results'
-      error-outro: In case this problem keeps occurring, please contact
   snippet-list:
     open-modal: Manage snippet lists
     modal:
@@ -383,3 +379,22 @@ editor-plugins:
 
 confidentiality-plugin:
   redact: Redact
+
+worship-plugin:
+  insert:
+    title: Insert worship service
+  modal:
+    title: Choose a worship service
+    insert: Insert
+    search:
+      title: Filter on
+      placeholder: Type something...
+      search: search
+      no results: nothing found
+    fields:
+      name: Name
+      admin-unit: Administrative Unit
+    sort:
+      sort: Sort
+      asc: Sort ascending
+      desc: Sort descending

package/translations/nl-BE.yaml

@@ -1,3 +1,11 @@
+common:
+  search:
+    loading: Laden…
+    no-results: Geen resultaten gevonden
+    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
+
 article-structure-plugin:
   insert:
     paragraph: Paragraaf invoegen
@@ -104,12 +112,6 @@ citaten-plugin:
     lookup-publicatie-short: Publicatie
     publicatie-non-available: Volledige inhoud niet publiek
     publicatie-non-available-short: Niet publiek
-  alert:
-    loading: Laden…
-    no-results: Geen resultaten gevonden
-    error-title: Probleem bij het laden
-    error-intro: "Er heeft zich een fout voorgedaan bij het zoeken in de Vlaamse Codex:"
-    error-outro: Moest dit probleem aanhouden, neem contact op met
 
 
 besluit-type-plugin:
@@ -271,12 +273,6 @@ snippet-plugin:
       title: Filter op
       label: Fragmentnaam
       placeholder: Typ iets...
-    alert:
-      loading: Laden…
-      no-results: Geen resultaten gevonden
-      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
   snippet-list:
     open-modal: Fragmentlijsten beheren
     modal:
@@ -387,3 +383,22 @@ editor-plugins:
 
 confidentiality-plugin:
   redact: Redigeren
+
+worship-plugin:
+  insert:
+    title: Erediensten invoegen
+  modal:
+    title: Kies een erediensten
+    insert: Invoegen
+    search:
+      title: Filter op
+      placeholder: Typ iets...
+      search: zoeken
+      no results: niets gevonden
+    fields:
+      name: Naam
+      admin-unit: Bestuurseenheid
+    sort:
+      sort: Sorteren
+      asc: Oplopend sorteren
+      desc: Aflopend sorteren

package/utils/sparql-helpers.d.ts

@@ -1,4 +1,7 @@
 import * as RDF from '@rdfjs/types';
+export type BindingObject<Obj extends Record<string, string>> = Record<keyof Obj, {
+    value: string;
+}>;
 export interface QueryResult<Binding = Record<string, RDF.Term>> {
     results: {
         bindings: Binding[];
@@ -9,6 +12,7 @@ interface QueryConfig {
     endpoint: string;
     abortSignal?: AbortSignal;
 }
+export declare const sparqlEscapeString: (value: string) => string;
 export declare function executeQuery<Binding = Record<string, RDF.Term>>({ query, endpoint, abortSignal, }: QueryConfig): Promise<QueryResult<Binding>>;
 export declare function executeCountQuery(queryConfig: QueryConfig): Promise<number>;
 export {};

package/addon/components/citation-plugin/helpers/alert-load-error.hbs

@@ -1,21 +0,0 @@
-<AuAlert
-  @title="{{t "citaten-plugin.alert.error-title"}}"
-  @skin="error"
-  @icon="alert-triangle"
-  @size="{{if @fullSize "default" "small"}}"
-  @closable={{false}}
-  ...attributes>
-  <p>{{t "citaten-plugin.alert.error-intro"}}</p>
-  <code class="au-u-error citaten--error-code">{{@error}}</code>
-  <p>
-    {{t "citaten-plugin.alert.error-outro"}}
-    <AuLinkExternal
-      href="mailto:gelinktnotuleren@vlaanderen.be"
-      @icon="mail"
-      @iconAlignment="left">
-      {{!-- template-lint-disable no-bare-strings  --}}
-      gelinktnotuleren@vlaanderen.be
-    </AuLinkExternal>.
-  </p>
-</AuAlert>
-

package/addon/components/citation-plugin/helpers/alert-no-items.hbs

@@ -1,10 +0,0 @@
-<AuAlert
-  @title="{{t "citaten-plugin.alert.no-results"}}"
-  @skin="warning"
-  @icon="cross"
-  @size="{{if @fullSize "default" "small"}}"
-  @closable={{false}}
-  class="{{unless @fullSize "au-u-margin-small"}}"
-  ...attributes>
-</AuAlert>
-

package/addon/components/snippet-plugin/helpers/alert-no-items.hbs

@@ -1,8 +0,0 @@
-<AuAlert
-  @title={{t 'snippet-plugin.modal.alert.no-results'}}
-  @skin='warning'
-  @icon='cross'
-  @closable={{false}}
-  class='au-u-margin au-u-margin-top-none'
-  ...attributes
-/>