@lblod/ember-rdfa-editor-lblod-plugins 0.3.0 → 0.4.0

package/addon/components/besluit-type-plugin/besluit-type-select.js

@@ -0,0 +1,21 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component {
+  @tracked besluitTypes;
+  constructor() {
+    super(...arguments);
+    this.besluitTypes = this.args.besluitTypes.sort((a, b) =>
+      a.label > b.label ? 1 : -1
+    );
+  }
+
+  @action
+  search(term) {
+    const lowerTerm = term.toLowerCase();
+    return this.args.besluitTypes.filter((besluitType) =>
+      besluitType.label.toLowerCase().includes(lowerTerm)
+    );
+  }
+}

package/addon/components/besluit-type-plugin/toolbar-dropdown.hbs

@@ -0,0 +1,83 @@
+{{#if this.showCard}}
+  {{#if this.loadDataTaskInstance.isError}}
+    <AuPill
+      @skin="error"
+      @icon="circle-x"
+      @iconAlignment="left"
+      class="au-c-pill--link"
+      {{on "click" this.toggleCard}}>
+      {{t "besluit-type-plugin.error-short"}}
+    </AuPill>
+  {{else}}
+    {{#if this.besluit.label}}
+      <AuPill
+        @skin="link"
+        {{on "click" this.toggleCard}}>
+        {{t "besluit-type-plugin.dt"}}: {{this.besluit.label}}
+      </AuPill>
+    {{else}}
+      <AuPill
+        @icon="alert-triangle"
+        @iconAlignment="left"
+        @skin="link"
+        {{on "click" this.toggleCard}}>
+        {{t "besluit-type-plugin.insert-dt"}}
+      </AuPill>
+    {{/if}}
+  {{/if}}
+{{/if}}
+{{#if this.cardExpanded}}
+  <AuModal
+    @title={{t "besluit-type-plugin.insert-dt"}}
+    @closeModal={{this.toggleCard}}
+    @modalOpen={{true}}
+    @size='default'
+    class="au-c-modal--overflow"
+    as |Modal|>
+    <Modal.Body>
+      {{#if this.loadDataTaskInstance.isError}}
+        <AuAlert
+          @title={{t "besluit-type-plugin.error-title"}}
+          @skin="error"
+          @icon="cross">
+          <p>
+            {{t "besluit-type-plugin.error-first-body"}}
+{{!-- template-lint-disable no-bare-strings  --}}
+            <AuLinkExternal
+              href="mailto:gelinktnotuleren@vlaanderen.be"
+              @icon="mail"
+              @iconAlignment="left">
+              GelinktNotuleren@vlaanderen.be
+            </AuLinkExternal>
+{{!-- template-lint-enable no-bare-strings  --}}
+            {{t "besluit-type-plugin.error-rest-body"}}
+          </p>
+        </AuAlert>
+      {{else}}
+        <BesluitTypePlugin::BesluitTypeSelect
+          @besluitTypes={{this.types}}
+          @onchange={{this.updateBesluitType}}
+          @selected={{this.besluit}}
+          @showWarningWhenEmpty={{false}}/>
+        {{#if this.besluit.subTypes.length}}
+          <AuHr @size="large"/>
+          <BesluitTypePlugin::BesluitTypeSelect
+            @besluitTypes={{this.besluit.subTypes}}
+            @onchange={{this.updateBesluitSubType}}
+            @selected={{this.subBesluit}}
+            @showWarningWhenEmpty={{true}}
+            class="au-u-padding-left au-u-padding-right"/>
+        {{/if}}
+        {{#if this.subBesluit.subTypes.length}}
+          <AuHr @size="large"/>
+          <BesluitTypePlugin::BesluitTypeSelect
+            @besluitTypes={{this.subBesluit.subTypes}}
+            @onchange={{this.updateBesluitSubSubType}}
+            @selected={{this.subSubBesluit}}
+            @showWarningWhenEmpty={{true}}
+            class="au-u-padding-left au-u-padding-right"/>
+        {{/if}}
+      {{/if}}
+    </Modal.Body>
+  </AuModal>
+{{/if}}

package/addon/components/besluit-type-plugin/toolbar-dropdown.js

@@ -0,0 +1,188 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { getOwner } from '@ember/application';
+import fetchBesluitTypes from '../../utils/fetchBesluitTypes';
+import { inject as service } from '@ember/service';
+
+export default class BesluitTypePluginToolbarDropdownComponent extends Component {
+  @service currentSession;
+
+  /**
+   * Actual besluit type selected
+   * @property besluitType
+   * @type BesluitType
+   * @private
+   */
+  @tracked besluitType;
+  @tracked previousBesluitType;
+  @tracked types = [];
+
+  //used to update selections since the other vars dont seem to work in octane
+  @tracked besluit;
+  @tracked subBesluit;
+  @tracked subSubBesluit;
+
+  @tracked cardExpanded = false;
+  @tracked showCard = false;
+
+  @tracked loadDataTaskInstance;
+
+  constructor(...args) {
+    super(...args);
+    this.loadDataTaskInstance = this.loadData.perform();
+    this.args.controller.onEvent('selectionChanged', this.getBesluitType);
+  }
+
+  @task
+  *loadData() {
+    const bestuurseenheid = yield this.currentSession.get('group');
+    const classificatie = yield bestuurseenheid.get('classificatie');
+    const ENV = getOwner(this).resolveRegistration('config:environment');
+    const types = yield fetchBesluitTypes(classificatie.uri, ENV);
+    this.types = types;
+  }
+
+  @action
+  getBesluitType() {
+    const selectedRange = this.args.controller.selection.lastRange;
+    if (!selectedRange) {
+      return;
+    }
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      selectedRange,
+      'rangeIsInside'
+    );
+    const besluit = limitedDatastore
+      .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
+      .asQuads()
+      .next().value;
+    if (!besluit) {
+      this.showCard = false;
+      return;
+    }
+    this.showCard = true;
+    const besluitUri = besluit.subject.value;
+    const besluitTypes = limitedDatastore
+      .match(`>${besluitUri}`, 'a', null)
+      .asQuads();
+    const besluitTypesUris = [...besluitTypes].map((quad) => quad.object.value);
+    const besluitTypeRelevant = besluitTypesUris.find((type) =>
+      type.includes('https://data.vlaanderen.be/id/concept/BesluitType/')
+    );
+    this.besluitNode = [
+      ...limitedDatastore
+        .match(`>${besluitUri}`, 'a', null)
+        .asSubjectNodes()
+        .next().value.nodes,
+    ][0];
+    if (besluitTypeRelevant) {
+      this.previousBesluitType = besluitTypeRelevant;
+      const besluitType = this.findBesluitTypeByURI(besluitTypeRelevant);
+
+      const firstAncestor = this.findBesluitTypeParent(besluitType);
+      const secondAncestor = this.findBesluitTypeParent(firstAncestor);
+      if (firstAncestor && secondAncestor) {
+        this.besluit = secondAncestor;
+        this.subBesluit = firstAncestor;
+        this.subSubBesluit = besluitType;
+      } else if (firstAncestor) {
+        this.besluit = firstAncestor;
+        this.subBesluit = besluitType;
+        this.subSubBesluit = undefined;
+      } else {
+        this.besluit = besluitType;
+        this.subBesluit = undefined;
+        this.subSubBesluit = undefined;
+      }
+      this.cardExpanded = false;
+    } else {
+      this.cardExpanded = true;
+      this.besluit = undefined;
+      this.subBesluit = undefined;
+      this.subSubBesluit = undefined;
+    }
+  }
+
+  @action
+  updateBesluitType(selected) {
+    this.besluit = selected;
+    this.besluitType = selected;
+    this.subBesluit = null;
+    this.subSubBesluit = null;
+    if (!selected.subTypes || !selected.subTypes.length) this.insert();
+  }
+
+  @action
+  updateBesluitSubType(selected) {
+    this.subBesluit = selected;
+    this.besluitType = selected;
+    this.subSubBesluit = null;
+    if (!selected.subTypes || !selected.subTypes.length) this.insert();
+  }
+
+  @action
+  updateBesluitSubSubType(selected) {
+    this.subSubBesluit = selected;
+    this.besluitType = selected;
+    if (!selected.subTypes || !selected.subTypes.length) this.insert();
+  }
+
+  findBesluitTypeParent(besluitType, array = this.types, parent = null) {
+    if (!besluitType || !array) {
+      return null;
+    }
+    for (let i = 0; i < array.length; i++) {
+      if (array[i] == besluitType) {
+        return parent;
+      } else if (array[i].subTypes && array[i].subTypes.length) {
+        parent = array[i];
+        return this.findBesluitTypeParent(
+          besluitType,
+          array[i].subTypes,
+          parent
+        );
+      }
+    }
+    return null;
+  }
+
+  findBesluitTypeByURI(uri, types = this.types) {
+    if (uri) {
+      for (const besluitType of types) {
+        if (besluitType.uri === uri) {
+          return besluitType;
+        } else if (besluitType.subTypes && besluitType.subTypes.length) {
+          const subType = this.findBesluitTypeByURI(uri, besluitType.subTypes);
+          if (subType) {
+            return subType;
+          }
+        }
+      }
+    }
+    return null;
+  }
+
+  insert() {
+    this.cardExpanded = false;
+    if (this.previousBesluitType) {
+      this.besluitNode = this.args.controller.executeCommand(
+        'remove-type',
+        this.previousBesluitType,
+        this.besluitNode
+      );
+    }
+
+    this.args.controller.executeCommand(
+      'add-type',
+      this.besluitType.uri,
+      this.besluitNode
+    );
+  }
+
+  @action
+  toggleCard() {
+    this.cardExpanded = !this.cardExpanded;
+  }
+}

package/addon/components/citaten-plugin/citaat-card.hbs

@@ -0,0 +1,76 @@
+{{#if this.showCard}}
+  <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
+    <c.header>
+      <AuHeading @level="3" @skin="6">{{t "citaten-plugin.card.title"}}</AuHeading>
+    </c.header>
+    <c.content>
+      <div class="au-o-flow au-o-flow--small">
+        <AuFormRow>
+          <AuLabel for="typeofdocument" @inline={{false}} @required={{false}} @error={{false}} @warning={{false}}>{{t "citaten-plugin.search.type"}}</AuLabel>
+          <PowerSelect
+            id="typeofdocument"
+            @allowClear={{false}}
+            @disabled={{false}}
+            @searchEnabled={{true}}
+            @loadingMessage="{{t "citaten-plugin.citaten-plugin.alert.loading"}}"
+            @noMatchesMessage="{{t "citaten-plugin.citaten-plugin.alert.no-results"}}"
+            @searchMessage="{{t "citaten-plugin.citaten-plugin.search.placeholder"}}"
+            @options={{this.legislationTypes}}
+            @selected={{this.legislationSelected}}
+            @onChange={{this.selectLegislationType}}
+            class="au-u-1-1"
+            as |type|>
+            {{type}}
+          </PowerSelect>
+        </AuFormRow>
+        <AuFormRow>
+          <AuLabel for="searchterm" @inline={{false}} @required={{false}} @error={{false}} @warning={{false}}>{{t "citaten-plugin.search.term"}}</AuLabel>
+          <AuInput
+            id="searchterm"
+            @type="text"
+            @width="block"
+            @icon="search"
+            @iconAlignment="right"
+            @value={{this.text}}
+            placeholder={{t "citaten-plugin.search.placeholder"}}
+            {{on "input" (perform this.updateSearch)}}/>
+        </AuFormRow>
+        <AuFormRow>
+          <AuButton @skin="link" @icon="search" @iconAlignment="left" {{on "click" this.openSearchModal}}>{{t "citaten-plugin.search.advanced"}}</AuButton>
+        </AuFormRow>
+      </div>
+    </c.content>
+    <c.footer class="au-u-background-gray-100 au-u-padding-none">
+      {{#if this.decisionResource.isRunning}}
+        <AuLoader /><span class="au-u-hidden-visually">{{t "citaten-plugin.alert.loading"}}</span>
+      {{else}}
+        {{#if this.error}}
+          <CitatenPlugin::Helpers::AlertLoadError @fullSize={{false}} @error={{this.error}} />
+        {{else}}
+          <AuToolbar
+            @border="bottom"
+            @skin="none"
+            class="au-u-padding-small" >
+            <AuHeading @skin="6" @level="4">{{t "citaten-plugin.card.suggestions"}}</AuHeading>
+          </AuToolbar>
+          <div class="citaten--decision-list au-u-margin-none au-u-padding-top-tiny au-u-padding-bottom-tiny">
+            <CitatenPlugin::Citations::DecisionList
+              @decisions={{this.decisionResource.value}}
+              @onCitationInsert={{this.insertDecisionCitation}}
+              @onCitationDetails={{this.openDecisionDetailModal}} />
+          </div>
+        {{/if}}
+      {{/if}}
+    </c.footer>
+  </AuCard>
+{{/if}}
+
+{{#if this.showModal}}
+  <CitatenPlugin::Citations::SearchModal
+    @closeModal={{this.closeModal}}
+    @insertDecisionCitation={{this.insertDecisionCitation}}
+    @insertArticleCitation={{this.insertArticleCitation}}
+    @selectedDecision={{this.decision}}
+    @legislationTypeUri={{this.legislationTypeUri}}
+    @text={{this.text}} />
+{{/if}}

package/addon/components/citaten-plugin/citaat-card.js

@@ -0,0 +1,286 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+// import { task } from 'ember-concurrency-decorators';
+import { task, timeout } from 'ember-concurrency';
+import { action } from '@ember/object';
+import { capitalize } from '@ember/string';
+import processMatch from '../../utils/processMatch';
+import { cleanCaches, fetchDecisions } from '../../utils/vlaamse-codex';
+import {
+  LEGISLATION_TYPE_CONCEPTS,
+  LEGISLATION_TYPES,
+} from '../../utils/legislation-types';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+
+const BASIC_MULTIPLANE_CHARACTER = '\u0021-\uFFFF'; // most of the characters used around the world
+
+// Regex nicely structured:
+// (
+//   (
+//     \w*decreet |
+//     omzendbrief |
+//     verdrag |
+//     grondwetswijziging |
+//     samenwerkingsakkoord |
+//     \w*wetboek |
+//     protocol |
+//     besluit[^\S\n]van[^\S\n]de[^\S\n]vlaamse[^\S\n]regering |
+//     geco[öo]rdineerde wetten |
+//     \w*wet |
+//     koninklijk[^\S\n]?besluit |
+//     ministerieel[^\S\n]?besluit |
+//     genummerd[^\S\n]?koninklijk[^\S\n]?besluit
+//   )
+//   [^\S\n]*
+//   (
+//     ([^\S\n] | [\u0021-\uFFFF\d;:'"()&\-_]){3,}
+//   )?
+// )
+const NNWS = '[^\\S\\n]';
+const CITATION_REGEX = new RegExp(
+  `((\\w*decreet|omzendbrief|verdrag|grondwetswijziging|samenwerkingsakkoord|\\w*wetboek|protocol|besluit${NNWS}van${NNWS}de${NNWS}vlaamse${NNWS}regering|geco[öo]rdineerde${NNWS}wetten|\\w*wet|koninklijk${NNWS}?besluit|ministerieel${NNWS}?besluit|genummerd${NNWS}?koninklijk${NNWS}?besluit|\\w*${NNWS}?besluit)${NNWS}*((${NNWS}|[${BASIC_MULTIPLANE_CHARACTER};:'"()&-_]){3,})?)`,
+  'uig'
+);
+
+export default class CitaatCardComponent extends Component {
+  @tracked pageNumber = 0;
+  @tracked pageSize = 5;
+  @tracked totalSize;
+  @tracked decisions = [];
+  @tracked error;
+  @tracked showModal = false;
+  @tracked showCard = false;
+  @tracked decision;
+  @tracked legislationTypeUri;
+  @tracked legislationTypeUriAfterTimeout;
+  @tracked text;
+  @tracked textAfterTimeout;
+  @tracked markSelected;
+  liveHighlights;
+
+  constructor() {
+    super(...arguments);
+    this.liveHighlights = this.args.controller.createLiveMarkSet({
+      datastoreQuery: (datastore) => {
+        const matches = datastore
+          .match(null, '>http://data.vlaanderen.be/ns/besluit#motivering')
+          .searchTextIn('predicate', CITATION_REGEX);
+        const resultMatches = matches.filter((match) => {
+          return (
+            datastore
+              .limitToRange(match.range, {
+                type: 'rangeTouches',
+                includeEndTags: true,
+              })
+              .match(null, '>http://data.europa.eu/eli/ontology#cites').size ===
+            0
+          );
+        });
+        resultMatches.forEach((match) => (match.range = match.groupRanges[1]));
+        return resultMatches;
+      },
+
+      liveMarkSpecs: [
+        {
+          name: 'citaten',
+          attributesBuilder: (textMatch) => {
+            const result = processMatch(textMatch);
+            return {
+              setBy: 'citaten-plugin',
+              text: result.text,
+              legislationTypeUri: result.legislationTypeUri,
+            };
+          },
+        },
+        'highlighted',
+      ],
+    });
+    this.controller.onEvent(
+      'selectionChanged',
+      this.onSelectionChanged.bind(this)
+    );
+  }
+
+  onSelectionChanged() {
+    const range = this.controller.selection.lastRange;
+    if (!range) {
+      return;
+    }
+    const marks = range.getMarks();
+    let selectionMark;
+    for (let mark of marks) {
+      if (mark.name === 'citaten') {
+        selectionMark = mark;
+        break;
+      }
+    }
+    if (selectionMark) {
+      if (this.showCard) {
+        //Card was already shown, update search condition and trigger search debounced
+        this.text = selectionMark.attributes.text;
+        this.legislationTypeUri = selectionMark.attributes.legislationTypeUri;
+        this.markSelected = selectionMark;
+        this.updateSearch.perform();
+      } else {
+        //When card is renderend first time, the resource will automatically trigger, no updateSearch is needed, but make sure to first set the search conditions, before showing the card.
+        //When not first time, but reopened, search terms could not have changed yet, so also no updateSearch needed
+        this.text = selectionMark.attributes.text;
+        this.legislationTypeUri = selectionMark.attributes.legislationTypeUri;
+        if (
+          this.legislationTypeUriAfterTimeout &&
+          (this.legislationTypeUri !== this.legislationTypeUriAfterTimeout ||
+            this.text !== this.textAfterTimeout)
+        ) {
+          //Convoluted, but this is when you switch from one reference insertion to another
+          this.updateSearchImmediate.perform();
+        }
+        this.markSelected = selectionMark;
+        this.showCard = true;
+      }
+    } else {
+      this.showCard = false;
+      //Would be nice, but this triggers way to often causing the cancellation of useful requests
+      //this.decisionResource.cancel();
+    }
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get legislationTypes() {
+    return Object.keys(LEGISLATION_TYPES).map(capitalize);
+  }
+
+  get legislationSelected() {
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.value === this.legislationTypeUri
+    );
+    return capitalize(found ? found.label : LEGISLATION_TYPE_CONCEPTS[0].label);
+  }
+
+  decisionResource = trackedTask(this, this.resourceSearch, () => [
+    this.textAfterTimeout,
+    this.legislationTypeUriAfterTimeout,
+    this.pageNumber,
+    this.pageSize,
+  ]);
+
+  @task({ restartable: true })
+  *updateSearch() {
+    yield timeout(500);
+    this.textAfterTimeout = this.text;
+    this.legislationTypeUriAfterTimeout = this.legislationTypeUri;
+  }
+
+  @task({ restartable: true })
+  *updateSearchImmediate() {
+    this.textAfterTimeout = this.text;
+    this.legislationTypeUriAfterTimeout = this.legislationTypeUri;
+    yield;
+  }
+
+  @task({ restartable: true })
+  *resourceSearch() {
+    this.error = null;
+    yield undefined; //To prevent other variables used below (this.text and this.legislationTypeUri) to trigger a retrigger.
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    try {
+      // Split search string by grouping on non-whitespace characters
+      // This probably needs to be more complex to search on group of words
+      const words =
+        (this.textAfterTimeout || this.text || '').match(/\S+/g) || [];
+      const filter = {
+        type: this.legislationTypeUriAfterTimeout || this.legislationTypeUri,
+      };
+      const results = yield fetchDecisions(
+        words,
+        filter,
+        this.pageNumber,
+        this.pageSize,
+        signal
+      );
+      this.totalCount = results.totalCount;
+      return results.decisions;
+    } catch (e) {
+      console.warn(e); // eslint-ignore-line no-console
+      this.totalCount = 0;
+      this.error = e;
+      return [];
+    } finally {
+      //Abort all requests now that this task has either successfully finished or has been cancelled
+      abortController.abort();
+    }
+  }
+
+  @action
+  selectLegislationType(type) {
+    type = type.toLowerCase();
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.label.toLowerCase() === type
+    );
+    this.legislationTypeUri = found
+      ? found.value
+      : LEGISLATION_TYPE_CONCEPTS[0].value;
+    this.legislationTypeUriAfterTimeout = this.legislationTypeUri;
+  }
+
+  @action
+  openDecisionDetailModal(decision) {
+    this.decision = decision;
+    this.showModal = true;
+  }
+
+  @action
+  openSearchModal() {
+    this.decisionResource.cancel();
+    this.decision = null;
+    this.showModal = true;
+  }
+
+  @action
+  closeModal(lastSearchType, lastSearchTerm) {
+    this.showModal = false;
+    this.decision = null;
+    if (lastSearchType) this.legislationTypeUri = lastSearchType;
+    if (lastSearchTerm) this.text = lastSearchTerm;
+    if (lastSearchType || lastSearchTerm) this.updateSearchImmediate.perform();
+  }
+
+  @action
+  insertDecisionCitation(decision) {
+    const type = decision.legislationType.label;
+    const uri = decision.uri;
+    const title = decision.title;
+    const range = this.controller.rangeFactory.fromAroundNode(
+      this.markSelected.node
+    );
+    const citationHtml = `${
+      type ? type : ''
+    } <a class="annotation" href="${uri}" property="eli:cites" typeof="eli:LegalExpression">${title}</a>&nbsp;`;
+    this.controller.executeCommand('insert-html', citationHtml, range);
+  }
+
+  @action
+  insertArticleCitation(decision, article) {
+    const type = decision.legislationType.label;
+    const uri = article.uri;
+    const title = `${decision.title}, ${article.number}`;
+    const range = this.controller.rangeFactory.fromAroundNode(
+      this.markSelected.node
+    );
+    const citationHtml = `${
+      type ? type : ''
+    } <a class="annotation" href="${uri}" property="eli:cites" typeof="eli:LegalExpression">${title}</a>&nbsp;`;
+    this.controller.executeCommand('insert-html', citationHtml, range);
+  }
+
+  async willDestroy() {
+    // Not necessary as ember-concurrency does this for us.
+    // this.decisionResource.cancel();
+    cleanCaches();
+    this.liveHighlights.destroy();
+    super.willDestroy();
+  }
+}

package/addon/components/citaten-plugin/citaat-insert.hbs

@@ -0,0 +1,20 @@
+<AuList::Item>
+  <AuButton
+    @icon="add"
+    @iconAlignment="left"
+    @skin="link"
+    @disabled={{this.disableInsert}}
+    {{on 'click' this.openModal}}>
+    {{t "citaten-plugin.insert.title"}}
+  </AuButton>
+</AuList::Item>
+
+{{#if this.showModal}}
+  <CitatenPlugin::Citations::SearchModal
+    @closeModal={{this.closeModal}}
+    @insertDecisionCitation={{this.insertDecisionCitation}}
+    @insertArticleCitation={{this.insertArticleCitation}}
+    @legislationTypeUri={{this.legislationTypeUri}}
+    @text={{this.text}}
+  />
+{{/if}}