@lblod/ember-rdfa-editor-lblod-plugins 19.1.0 → 19.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 19.2.0
+
+### Minor Changes
+
+- [#427](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/427) [`0de131824462d4297190bc25f8916a70b358e46a`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/0de131824462d4297190bc25f8916a70b358e46a) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Added lmb-plugin to add LMB mandatees to the document
+
+- [#429](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/429) [`db575dea5da9b71c645c5ed5e091a307bb075ba4`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/db575dea5da9b71c645c5ed5e091a307bb075ba4) Thanks [@dkozickis](https://github.com/dkozickis)! - GN-4693: Insert LPDC
+
+- [#431](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/431) [`f3bfdd1caff44d4011fb0aaf7edeef5da7510a35`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/f3bfdd1caff44d4011fb0aaf7edeef5da7510a35) Thanks [@piemonkey](https://github.com/piemonkey)! - Add location plugin
+
+- [#430](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/430) [`e9a92cbf8548bb782c819c95bce44486ce9633eb`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/e9a92cbf8548bb782c819c95bce44486ce9633eb) Thanks [@piemonkey](https://github.com/piemonkey)! - Use OSLO model for addresses in variable-plugin
+
+- [#432](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/432) [`81f82bee3cc2f269f9a92031167000697d72365d`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/81f82bee3cc2f269f9a92031167000697d72365d) Thanks [@piemonkey](https://github.com/piemonkey)! - Move location-plugin address search to a modal
+
+### Patch Changes
+
+- [#428](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/428) [`c21ac34b0fd304ad9126243f9b693d4ce6107c4b`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/c21ac34b0fd304ad9126243f9b693d4ce6107c4b) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Styling fixes
+
+- [#430](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/430) [`b19acda5b1b31bfb289c0f0c0a16e43712ca376f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/b19acda5b1b31bfb289c0f0c0a16e43712ca376f) Thanks [@piemonkey](https://github.com/piemonkey)! - Change format for geodata used by the address plugin to WKT instead of GML to match the OSLO spec
+
+- [#430](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/430) [`def6922e0037dbea6857fc309ac4fdae07fffca6`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/def6922e0037dbea6857fc309ac4fdae07fffca6) Thanks [@piemonkey](https://github.com/piemonkey)! - Correct typo in adres: prefix
+
 ## 19.1.0
 
 ### Minor Changes

package/addon/components/au-native-input.ts

@@ -1,21 +1,20 @@
 import Component from '@glimmer/component';
 import { ComponentLike } from '@glint/template';
 
-interface Args {
-  width?: 'block';
-  iconAlignment?: 'left' | 'right';
-  error?: boolean;
-  warning?: boolean;
-  disabled?: boolean;
-  type?: string;
-  icon?: ComponentLike;
+interface Signature {
+  Args: {
+    width?: 'block';
+    iconAlignment?: 'left' | 'right';
+    error?: boolean;
+    warning?: boolean;
+    disabled?: boolean;
+    type?: string;
+    icon?: ComponentLike;
+  };
+  Element: HTMLInputElement;
 }
 
-export default class AuNativeInput extends Component<Args> {
-  constructor(owner: unknown, args: Args) {
-    super(owner, args);
-  }
-
+export default class AuNativeInput extends Component<Signature> {
   get width() {
     if (this.args.width == 'block') return 'au-c-input--block';
     else return '';

package/addon/components/{worship-plugin → common/sort}/sortable-table-header.hbs

@@ -11,9 +11,7 @@
       {{on 'click' this.changeSort}}
       class='au-c-data-table__sort'
     >
-      <span class='au-u-hidden-visually'>{{t
-          'worship-plugin.modal.sort.asc'
-        }}</span>
+      <span class='au-u-hidden-visually'>{{t 'common.sort.asc'}}</span>
       <AuIcon @icon={{this.NavUpIcon}} />
     </button>
   {{else if (eq this.order 'ASC')}}
@@ -22,9 +20,7 @@
       {{on 'click' this.changeSort}}
       class='au-c-data-table__sort'
     >
-      <span class='au-u-hidden-visually'>{{t
-          'worship-plugin.modal.sort.desc'
-        }}</span>
+      <span class='au-u-hidden-visually'>{{t 'common.sort.desc'}}</span>
       <AuIcon @icon={{this.NavDownIcon}} />
     </button>
   {{else}}
@@ -33,9 +29,7 @@
       {{on 'click' this.changeSort}}
       class='au-c-data-table__sort'
     >
-      <span class='au-u-hidden-visually'>{{t
-          'worship-plugin.modal.sort.sort'
-        }}</span>
+      <span class='au-u-hidden-visually'>{{t 'common.sort.sort'}}</span>
       <AuIcon @icon={{this.NavUpDownIcon}} />
     </button>
   {{/if}}

package/addon/components/{worship-plugin → common/sort}/sortable-table-header.ts

@@ -3,19 +3,16 @@ import Component from '@glimmer/component';
 import { NavUpIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-up';
 import { NavDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-down';
 import { NavUpDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-up-down';
-import {
-  SearchSort,
-  WorshipService,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
 
+type SearchSort = [string, 'ASC' | 'DESC'] | false;
 interface Args {
   label: string;
-  field: keyof WorshipService;
+  field: string;
   sort: SearchSort;
   setSort: (sort: SearchSort) => void;
 }
 
-export default class SnippetInsertComponent extends Component<Args> {
+export default class SortableTableHeaderComponent extends Component<Args> {
   NavUpIcon = NavUpIcon;
   NavDownIcon = NavDownIcon;
   NavUpDownIcon = NavUpDownIcon;

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

@@ -0,0 +1,18 @@
+{{! @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/insert.ts

@@ -0,0 +1,121 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
+
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
+import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
+import { v4 as uuid } from 'uuid';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import {
+  MANDAAT,
+  FOAF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+interface Args {
+  controller: SayController;
+  config: LmbPluginConfig;
+}
+
+export default class LmbPluginInsertComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
+  @tracked showModal = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  openModal() {
+    this.controller.focus();
+    this.showModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showModal = false;
+  }
+
+  @action
+  onInsert(mandatee: Mandatee) {
+    const schema = this.controller.schema;
+    const firstNameUuid = uuid();
+    const firstNameNode = schema.node(
+      'inline_rdfa',
+      {
+        rdfaNodeType: 'literal',
+        __rdfaId: firstNameUuid,
+        backlinks: [
+          {
+            subject: sayDataFactory.literalNode(mandatee.personUri),
+            predicate: FOAF('gebruikteVoornaam').prefixed,
+          },
+        ],
+      },
+      [schema.text(mandatee.firstName)],
+    );
+    const lastNameUuid = uuid();
+    const lastNameNode = schema.node(
+      'inline_rdfa',
+      {
+        rdfaNodeType: 'literal',
+        __rdfaId: lastNameUuid,
+        backlinks: [
+          {
+            subject: sayDataFactory.literalNode(mandatee.personUri),
+            predicate: FOAF('familyName').prefixed,
+          },
+        ],
+      },
+      [schema.text(mandatee.lastName)],
+    );
+
+    const personNode = schema.node(
+      'inline_rdfa',
+      {
+        rdfaNodeType: 'resource',
+        subject: mandatee.personUri,
+        properties: [
+          {
+            predicate: FOAF('gebruikteVoornaam').prefixed,
+            object: sayDataFactory.literalNode(firstNameUuid),
+          },
+          {
+            predicate: FOAF('familyName').prefixed,
+            object: sayDataFactory.literalNode(lastNameUuid),
+          },
+        ],
+        backlinks: [
+          {
+            subject: sayDataFactory.literalNode(mandatee.mandateeUri),
+            predicate: MANDAAT('isBestuurlijkeAliasVan').prefixed,
+          },
+        ],
+      },
+      [firstNameNode, lastNameNode],
+    );
+    const mandateeNode = schema.node(
+      'inline_rdfa',
+      {
+        rdfaNodeType: 'resource',
+        subject: mandatee.mandateeUri,
+        properties: [
+          {
+            predicate: MANDAAT('isBestuurlijkeAliasVan').prefixed,
+            object: sayDataFactory.resourceNode(mandatee.personUri),
+          },
+        ],
+      },
+      [personNode],
+    );
+    this.controller.withTransaction(
+      (tr) => {
+        return tr.replaceSelectionWith(mandateeNode);
+      },
+      { view: this.controller.mainEditorView },
+    );
+    this.closeModal();
+  }
+}

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

@@ -0,0 +1,58 @@
+<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='status'
+          @label={{t 'lmb-plugin.modal.fields.status'}}
+          @sort={{@sort}}
+          @setSort={{@setSort}}
+        />
+      </th>
+      <th>
+        <Common::Sort::SortableTableHeader
+          @field='fractie'
+          @label={{t 'lmb-plugin.modal.fields.fractie'}}
+          @sort={{@sort}}
+          @setSort={{@setSort}}
+        />
+      </th>
+      <th>
+        <Common::Sort::SortableTableHeader
+          @field='role'
+          @label={{t 'lmb-plugin.modal.fields.role'}}
+          @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.fullName}}</td>
+            <td>{{row.status}}</td>
+            <td>{{row.fractie}}</td>
+            <td>{{row.role}}</td>
+            <td class='au-u-text-center'>
+              <AuButton {{on 'click' (fn @insert row)}}>
+                {{t 'lmb-plugin.modal.insert'}}
+              </AuButton>
+            </td>
+          </tr>
+        {{/each}}
+      {{/if}}
+    {{/unless}}
+  </:body>
+</AuTable>

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

@@ -0,0 +1,71 @@
+{{! @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 '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}}
+            />
+          </div>
+        </div>
+      </mc.sidebar>
+      <mc.content @scroll={{true}}>
+        <div class='worship-modal--list-container'>
+          <LmbPlugin::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/lmb-plugin/search-modal.ts

@@ -0,0 +1,173 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { restartableTask } from 'ember-concurrency';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
+
+import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
+import { IBindings } from 'fetch-sparql-endpoint';
+type SearchSort = [keyof Mandatee, 'ASC' | 'DESC'] | false;
+
+interface Args {
+  config: LmbPluginConfig;
+  open: boolean;
+  closeModal: () => void;
+  onInsert: () => void;
+}
+
+interface SparqlResponse {
+  results: {
+    bindings: IBindings[];
+  };
+}
+
+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;
+
+  get config() {
+    return this.args.config;
+  }
+
+  @action
+  async closeModal() {
+    await this.servicesResource.cancel();
+    this.args.closeModal();
+  }
+
+  fetchData = restartableTask(async () => {
+    const endpoint = this.args.config.endpoint;
+    const queryResponse = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        query: `
+        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 foaf: <http://xmlns.com/foaf/0.1/>
+        PREFIX persoon: <http://data.vlaanderen.be/ns/persoon#>
+        PREFIX org: <http://www.w3.org/ns/org#>
+        PREFIX regorg: <https://www.w3.org/ns/regorg#>
+        SELECT DISTINCT ?mandatee ?person ?firstName ?lastName ?statusLabel ?fractieLabel ?roleLabel WHERE { 
+            ?mandatee a mandaat:Mandataris;
+              org:holds ?mandaat;
+              mandaat:status ?status;
+              mandaat:isBestuurlijkeAliasVan ?person;
+              org:hasMembership ?membership.
+            ?person foaf:familyName ?lastName;
+              persoon:gebruikteVoornaam ?firstName.
+            ?status skos:prefLabel ?statusLabel.
+            ?membership org:organisation ?fractie.
+            ?fractie regorg:legalName ?fractieLabel.
+            ?mandaat org:role ?role.
+            ?role skos:prefLabel ?roleLabel.
+            OPTIONAL  {
+              ?mandatee mandaat:einde ?endDate
+            }
+            filter (!bound(?endDate) || ?endDate > now()).
+        }        
+        `,
+      }),
+    });
+    const queryJson: SparqlResponse = await queryResponse.json();
+    const mandatees = queryJson.results.bindings.map(Mandatee.fromBinding);
+    return mandatees;
+  });
+
+  search = restartableTask(async () => {
+    // Can't do what I want, so if the user modifies the filter before resolving the query will run again
+    if (!this.fetchData.lastComplete) {
+      await this.fetchData.perform();
+    }
+
+    if (!this.fetchData.lastComplete?.value) return;
+    let mandatees: Mandatee[] = [...this.fetchData.lastComplete.value];
+
+    if (this.inputSearchText) {
+      mandatees = mandatees?.filter((mandatee: Mandatee) =>
+        mandatee.fullName
+          .toLowerCase()
+          .includes(this.inputSearchText?.toLowerCase() as string),
+      );
+    }
+
+    if (this.sort) {
+      const [key, sortingDirection] = this.sort;
+      mandatees = mandatees.sort((a: Mandatee, b: Mandatee) => {
+        if (key === 'fullName') {
+          if (a.lastName === b.lastName) {
+            if (a.firstName > b.firstName) {
+              return sortingDirection === 'ASC' ? 1 : -1;
+            } else {
+              return sortingDirection === 'ASC' ? -1 : 1;
+            }
+          } else {
+            if (a.lastName > b.lastName) {
+              return sortingDirection === 'ASC' ? 1 : -1;
+            } else {
+              return sortingDirection === 'ASC' ? -1 : 1;
+            }
+          }
+        } else if (a[key] > b[key]) {
+          return sortingDirection === 'ASC' ? 1 : -1;
+        } else {
+          return sortingDirection === 'ASC' ? -1 : 1;
+        }
+      });
+    }
+
+    const totalCount = mandatees?.length;
+
+    mandatees = mandatees?.slice(
+      this.pageSize * this.pageNumber,
+      this.pageSize * (this.pageNumber + 1),
+    );
+    return {
+      results: mandatees,
+      totalCount,
+    };
+  });
+
+  servicesResource = trackedTask(this, this.search, () => [
+    this.inputSearchText,
+    this.sort,
+    this.pageNumber,
+    this.pageSize,
+  ]);
+
+  @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.inputSearchText = event.target.value;
+    this.pageNumber = 0;
+  }
+  @action
+  previousPage() {
+    --this.pageNumber;
+  }
+
+  @action
+  nextPage() {
+    ++this.pageNumber;
+  }
+}

package/addon/components/loading-alert.hbs

@@ -6,7 +6,9 @@
     data-test-alert
     ...attributes
   >
-    <AuLoader />
+    <AuLoader @hideMessage={{true}}>
+      {{t 'common.search.loading'}}
+    </AuLoader>
     <div class='au-c-alert__content'>
       {{#if @title}}
         <p class='au-c-alert__title' data-test-alert-title>{{@title}}</p>