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

package/.release-it.json

@@ -10,4 +10,4 @@
     "ignoreVersion": true,
     "allowSameVersion": true
   }
-}
+}

package/.woodpecker/.verify-pr.yml

@@ -16,6 +16,12 @@ steps:
     commands:
       - corepack enable
       - pnpm lint:hbs
+  lint-prettier:
+    image: node:20-slim
+    group: lint
+    commands:
+      - corepack enable
+      - pnpm lint:prettier
   test:
     image: danlynn/ember-cli:4.12.1
     commands:

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 19.1.0
+
+### Minor Changes
+
+- [#426](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/426) [`cb28e40ae4a8b1bf1d2d792788a10986db77aec2`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/cb28e40ae4a8b1bf1d2d792788a10986db77aec2) Thanks [@dkozickis](https://github.com/dkozickis)! - GN-4692: Create a `besluit-topic` (decision topic) plugin
+
+### Patch Changes
+
+- [#425](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/425) [`69da05460e79b8cb4a5601d9d5f4eae3026c4da3`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/69da05460e79b8cb4a5601d9d5f4eae3026c4da3) Thanks [@dkozickis](https://github.com/dkozickis)! - Apply Prettier to the codebase
+
 ## 19.0.0
 
 ### Major Changes

package/README.md

@@ -224,6 +224,27 @@ You need to specify the endpoint from which the plugin will fetch the types in t
 }
 ```
 
+## besluit-topic-plugin
+
+Plugin which allows a user to change the topic of a [besluit](https://data.vlaanderen.be/ns/besluit#Besluit).
+
+This plugin needs to be added to the toolbar as a dropdown with the following syntax:
+
+```hbs
+<BesluitTopicPlugin::BesluitTopicToolbarDropdown
+  @controller={{this.controller}}
+  @options={{this.config.besluitTopic}}
+/>
+```
+
+You need to specify the endpoint from which the plugin will fetch the types in the config object
+
+```js
+{
+  endpoint: 'https://data.vlaanderen.be/sparql',
+}
+```
+
 ## decision-plugin
 
 This plugin provides some warnings to the user if the validation for a besluit fails, it need to be used with the validation plugin as it exports some validation rules for it.

package/addon/components/article-structure-plugin/article-structure-card.hbs

@@ -1,11 +1,16 @@
 {{! @glint-nocheck: not typesafe yet }}
 <div>
   {{#each this.structureTypes as |structureType|}}
-  <li class="au-c-list__item">
-    <AuButton @icon={{this.AddIcon}} @iconAlignment="left" @skin="link" @disabled={{not (this.canInsertStructure structureType)}}
-      {{on 'click' (fn this.insertStructure structureType)}}>
-      {{t structureType.translations.insert}}
-    </AuButton>
-  </li>
+    <li class='au-c-list__item'>
+      <AuButton
+        @icon={{this.AddIcon}}
+        @iconAlignment='left'
+        @skin='link'
+        @disabled={{not (this.canInsertStructure structureType)}}
+        {{on 'click' (fn this.insertStructure structureType)}}
+      >
+        {{t structureType.translations.insert}}
+      </AuButton>
+    </li>
   {{/each}}
 </div>

package/addon/components/article-structure-plugin/structure-card.hbs

@@ -1,28 +1,43 @@
 {{! @glint-nocheck: not typesafe yet }}
 {{#unless this.isOutsideStructure}}
-  <AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
-    <c.header class="au-u-hidden-visually">
-      <AuHeading @level="3" @skin="6">{{t "article-structure-plugin.title.structure-card"}}</AuHeading>
+  <AuCard
+    @flex={{true}}
+    @divided={{true}}
+    @expandable={{false}}
+    @shadow={{true}}
+    @size='flush'
+    as |c|
+  >
+    <c.header class='au-u-hidden-visually'>
+      <AuHeading @level='3' @skin='6'>{{t
+          'article-structure-plugin.title.structure-card'
+        }}</AuHeading>
     </c.header>
-    <c.content class="au-c-content--small">
-      <AuList @divider={{true}} class="au-u-padding-top-tiny au-u-padding-bottom-tiny" as |Item|>
+    <c.content class='au-c-content--small'>
+      <AuList
+        @divider={{true}}
+        class='au-u-padding-top-tiny au-u-padding-bottom-tiny'
+        as |Item|
+      >
         <Item>
           <AuButton
             @icon={{this.ChevronUpIcon}}
-            @iconAlignment="left"
-            @skin="link"
+            @iconAlignment='left'
+            @skin='link'
             @disabled={{not this.canMoveUp}}
-            {{on 'click' (fn this.moveStructure 'up')}}>
+            {{on 'click' (fn this.moveStructure 'up')}}
+          >
             {{t this.currentStructureType.translations.move.up}}
           </AuButton>
         </Item>
         <Item>
           <AuButton
             @icon={{this.ChevronDownIcon}}
-            @iconAlignment="left"
-            @skin="link"
+            @iconAlignment='left'
+            @skin='link'
             @disabled={{not this.canMoveDown}}
-            {{on 'click' (fn this.moveStructure 'down')}}>
+            {{on 'click' (fn this.moveStructure 'down')}}
+          >
             {{t this.currentStructureType.translations.move.down}}
           </AuButton>
         </Item>
@@ -32,23 +47,20 @@
               <:hover as |hover|>
                 <AuButton
                   @icon={{this.BinIcon}}
-                  @iconAlignment="left"
-                  @skin="link"
+                  @iconAlignment='left'
+                  @skin='link'
                   @alert={{true}}
                   @disabled={{not this.canRemoveStructure}}
-                  aria-describedby="remove-tooltip"
+                  aria-describedby='remove-tooltip'
                   {{hover.velcroHook}}
                   {{hover.handleHover}}
-                  {{on 'click' (fn this.removeStructure false)}}>
+                  {{on 'click' (fn this.removeStructure false)}}
+                >
                   {{this.remove}}
                 </AuButton>
               </:hover>
               <:tooltip as |tooltip|>
-                <AuPill
-                  id="remove-tooltip"
-                  role="tooltip"
-                  {{tooltip}}
-                >
+                <AuPill id='remove-tooltip' role='tooltip' {{tooltip}}>
                   {{t 'article-structure-plugin.remove.help-text'}}
                 </AuPill>
               </:tooltip>
@@ -57,22 +69,19 @@
               <:hover as |hover|>
                 <AuButton
                   @icon={{this.BinIcon}}
-                  @iconAlignment="left"
-                  @skin="link"
-                  aria-describedby="remove-content-tooltip"
+                  @iconAlignment='left'
+                  @skin='link'
+                  aria-describedby='remove-content-tooltip'
                   @alert={{true}}
                   {{hover.velcroHook}}
                   {{hover.handleHover}}
-                  {{on 'click' (fn this.removeStructure true)}}>
+                  {{on 'click' (fn this.removeStructure true)}}
+                >
                   {{this.removeWithContent}}
                 </AuButton>
               </:hover>
               <:tooltip as |tooltip|>
-                <AuPill
-                  id="remove-content-tooltip"
-                  role="tooltip"
-                  {{tooltip}}
-                >
+                <AuPill id='remove-content-tooltip' role='tooltip' {{tooltip}}>
                   {{t 'article-structure-plugin.remove-with-content.help-text'}}
                 </AuPill>
               </:tooltip>
@@ -81,7 +90,7 @@
           </AuButtonGroup>
         </Item>
         {{#if this.currentStructureType.getStartNumber}}
-          <Item class="au-u-padding-left-small">
+          <Item class='au-u-padding-left-small'>
             <AuFormRow>
               {{#let (unique-id) as |id|}}
                 <AuLabel for={{id}}>
@@ -90,25 +99,27 @@
                 <AuInput
                   id={{id}}
                   value={{this.startNumberInputValue}}
-                  {{on "change" this.onStartNumberChange}}
-                  placeholder={{t 'article-structure-plugin.start-number.start-number'}}
-                  type="number"
-                  min="1"
+                  {{on 'change' this.onStartNumberChange}}
+                  placeholder={{t
+                    'article-structure-plugin.start-number.start-number'
+                  }}
+                  type='number'
+                  min='1'
                 />
               {{/let}}
             </AuFormRow>
             <AuButton
-              @iconAlignment="left"
-              class="au-u-margin-top-tiny"
+              @iconAlignment='left'
+              class='au-u-margin-top-tiny'
               {{on 'click' this.setStructureStartNumber}}
             >
               {{t 'article-structure-plugin.start-number.set'}}
             </AuButton>
             <AuButton
-              @iconAlignment="left"
-              @skin="secondary"
+              @iconAlignment='left'
+              @skin='secondary'
               @disabled={{not this.structureStartNumber}}
-              class="au-u-margin-top-tiny"
+              class='au-u-margin-top-tiny'
               {{on 'click' this.resetStructureStartNumber}}
             >
               {{t 'article-structure-plugin.start-number.reset'}}

package/addon/components/besluit-topic-plugin/besluit-topic-select.hbs

@@ -0,0 +1,19 @@
+{{! @glint-nocheck: not typesafe yet }}
+<div ...attributes>
+  <PowerSelectMultiple
+    @renderInPlace={{true}}
+    @searchEnabled={{true}}
+    @searchMessage={{t 'besluit-topic-plugin.search-message'}}
+    @noMatchesMessage={{t 'besluit-topic-plugin.no-matches-message'}}
+    @search={{this.search}}
+    @options={{this.besluitTopics}}
+    @selected={{@selected}}
+    @onChange={{@onchange}}
+    as |besluitTopic|
+  >
+    {{besluitTopic.label}}
+  </PowerSelectMultiple>
+  <p class='au-u-muted au-u-margin-tiny au-u-margin-bottom-small'>
+    {{@selected.definition}}
+  </p>
+</div>

package/addon/components/besluit-topic-plugin/besluit-topic-select.ts

@@ -0,0 +1,32 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { BesluitTopic } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/fetchBesluitTopics';
+
+type Args = {
+  besluitTopics: BesluitTopic[];
+};
+
+export default class BesluitTopicSelectComponent extends Component<Args> {
+  AlertTriangleIcon = AlertTriangleIcon;
+
+  @tracked besluitTopics: BesluitTopic[] = [];
+
+  constructor(parent: unknown, args: Args) {
+    super(parent, args);
+
+    this.besluitTopics = this.args.besluitTopics.sort((a, b) =>
+      a.label > b.label ? 1 : -1,
+    );
+  }
+
+  @action
+  search(term: string) {
+    const lowerTerm = term.toLowerCase();
+
+    return this.args.besluitTopics.filter((besluitTopic) =>
+      besluitTopic.label.toLowerCase().includes(lowerTerm),
+    );
+  }
+}

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

@@ -0,0 +1,93 @@
+{{! @glint-nocheck: not typesafe yet }}
+<div
+  {{did-update this.updateBesluitTopic @controller.mainEditorState}}
+  {{did-update this.updateBesluitTopic this.topics.value}}
+>
+  {{#if this.showCard}}
+    {{#if this.topics.isError}}
+      <AuPill
+        @skin='error'
+        @icon={{this.CircleXIcon}}
+        @iconAlignment='left'
+        class='au-c-pill--link besluit-toolbar-pill'
+        {{on 'click' this.toggleCard}}
+        title={{t 'besluit-topic-plugin.insert-dt'}}
+      >
+        {{t 'besluit-topic-plugin.error-short'}}
+      </AuPill>
+    {{else}}
+      {{#if this.besluitTopicsSelected.length}}
+        <AuPill
+          @skin='link'
+          {{on 'click' this.toggleCard}}
+          title={{t 'besluit-topic-plugin.insert-dt'}}
+        >
+          {{t 'besluit-topic-plugin.dt'}}:
+          {{#if (gt this.besluitTopicsSelected.length 1)}}
+            {{t
+              'besluit-topic-plugin.selected'
+              num=this.besluitTopicsSelected.length
+            }}
+          {{else}}
+            {{get this.besluitTopicsSelected '0.label'}}
+          {{/if}}
+        </AuPill>
+      {{else}}
+        <AuPill
+          @icon={{this.AlertTriangleIcon}}
+          @iconAlignment='left'
+          @skin='link'
+          {{on 'click' this.toggleCard}}
+          title={{t 'besluit-topic-plugin.insert-dt'}}
+        >
+          {{t 'besluit-topic-plugin.insert-dt'}}
+        </AuPill>
+      {{/if}}
+    {{/if}}
+  {{/if}}
+  {{#if this.cardExpanded}}
+    <AuModal
+      @title={{t 'besluit-topic-plugin.insert-dt'}}
+      @closeModal={{this.toggleCard}}
+      @modalOpen={{true}}
+      @size='default'
+      class='au-c-modal--overflow'
+      as |Modal|
+    >
+      <Modal.Body>
+        {{#if this.topics.isError}}
+          <AuAlert
+            @title={{t 'besluit-topic-plugin.error-title'}}
+            @skin='error'
+            @icon={{this.CrossIcon}}
+          >
+            <p>
+              {{t 'besluit-topic-plugin.error-first-body'}}
+              {{! template-lint-disable no-bare-strings  }}
+              <AuLinkExternal
+                href='mailto:gelinktnotuleren@vlaanderen.be'
+                @icon={{this.MailIcon}}
+                @iconAlignment='left'
+              >
+                GelinktNotuleren@vlaanderen.be
+              </AuLinkExternal>
+              {{! template-lint-enable no-bare-strings  }}
+              {{t 'besluit-topic-plugin.error-rest-body'}}
+            </p>
+          </AuAlert>
+        {{else}}
+          <BesluitTopicPlugin::BesluitTopicSelect
+            @besluitTopics={{this.topics.value}}
+            @onchange={{this.upsertBesluitTopic}}
+            @selected={{this.besluitTopicsSelected}}
+          />
+        {{/if}}
+      </Modal.Body>
+      <Modal.Footer>
+        <AuButton {{on 'click' this.toggleCard}}>{{t
+            'besluit-topic-plugin.close-modal'
+          }}</AuButton>
+      </Modal.Footer>
+    </AuModal>
+  {{/if}}
+</div>

package/addon/components/besluit-topic-plugin/besluit-topic-toolbar-dropdown.ts

@@ -0,0 +1,151 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
+import { trackedFunction } from 'ember-resources/util/function';
+import { ELI } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
+import { MailIcon } from '@appuniversum/ember-appuniversum/components/icons/mail';
+import { BesluitTopicPluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin';
+import {
+  BesluitTopic,
+  fetchBesluitTopics,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/fetchBesluitTopics';
+import {
+  getCurrentBesluitRange,
+  getCurrentBesluitURI,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import {
+  updateBesluitTopicResource,
+  ELI_SUBJECT,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/commands/update-besluit-topic-resource';
+import { getOutgoingTripleList } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+
+type Args = {
+  controller: SayController;
+  options: BesluitTopicPluginOptions;
+};
+
+export default class BesluitTopicToolbarDropdownComponent extends Component<Args> {
+  MailIcon = MailIcon;
+  CrossIcon = CrossIcon;
+  AlertTriangleIcon = AlertTriangleIcon;
+
+  /**
+   * Actual besluit topic selected
+   */
+  @tracked besluitTopicsSelected?: BesluitTopic[];
+  @tracked previousBesluitTopics?: string[];
+
+  @tracked cardExpanded = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get doc() {
+    return this.controller.mainEditorState.doc;
+  }
+
+  topics = trackedFunction(this, async () => {
+    const result = await fetchBesluitTopics({
+      config: { endpoint: this.args.options.endpoint },
+    });
+
+    return result.topics;
+  });
+
+  findBesluitTopicsByUris(
+    uris: string[],
+    topics = this.topics.value,
+  ): BesluitTopic[] | undefined {
+    if (!uris.length || !topics) return;
+
+    return topics.filter((besluitTopic) => uris.includes(besluitTopic.uri));
+  }
+
+  @action
+  updateBesluitTopic() {
+    const currentBesluitURI = getCurrentBesluitURI(this.controller);
+
+    if (!currentBesluitURI || !this.topics.value) {
+      return;
+    }
+
+    const besluit = findAncestorOfType(
+      this.controller.mainEditorState.selection,
+      this.controller.schema.nodes['besluit'],
+    );
+
+    if (!besluit) {
+      console.warn(
+        `We have a besluit URI (${currentBesluitURI}), but can't find a besluit ancestor`,
+      );
+      return;
+    }
+
+    const outgoingBesluitTopics = getOutgoingTripleList(
+      besluit.node.attrs,
+      ELI(ELI_SUBJECT),
+    );
+
+    const besluitTopicsRelevant = outgoingBesluitTopics.filter(
+      (topic) =>
+        topic.object.termType === 'NamedNode' &&
+        topic.object.value.includes(
+          'https://data.vlaanderen.be/id/concept/BesluitThema/',
+        ),
+    );
+
+    const outgoingUris = besluitTopicsRelevant.map(
+      (topic) => topic.object.value,
+    );
+
+    const besluitTopics = this.findBesluitTopicsByUris(outgoingUris);
+
+    if (besluitTopicsRelevant && besluitTopics) {
+      this.previousBesluitTopics = outgoingUris;
+
+      this.besluitTopicsSelected = besluitTopics;
+    } else {
+      this.besluitTopicsSelected = undefined;
+    }
+  }
+
+  get showCard() {
+    return !!getCurrentBesluitRange(this.controller);
+  }
+
+  @action
+  upsertBesluitTopic(selected: BesluitTopic[]) {
+    this.besluitTopicsSelected = selected;
+
+    const currentBesluitRange = getCurrentBesluitRange(this.controller);
+
+    const resource =
+      (currentBesluitRange &&
+        'node' in currentBesluitRange &&
+        (currentBesluitRange.node.attrs.subject as string)) ||
+      undefined;
+
+    if (this.besluitTopicsSelected && resource) {
+      this.controller.doCommand(
+        updateBesluitTopicResource({
+          resource,
+          previousTopics: this.previousBesluitTopics,
+          newTopics: this.besluitTopicsSelected,
+        }),
+        {
+          view: this.args.controller.mainEditorView,
+        },
+      );
+    }
+  }
+
+  @action
+  toggleCard() {
+    this.cardExpanded = !this.cardExpanded;
+  }
+}

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

@@ -3,12 +3,14 @@
   <PowerSelect
     @renderInPlace={{true}}
     @searchEnabled={{true}}
-    @searchMessage={{t "besluit-type-plugin.search-message"}}
-    @noMatchesMessage={{t "besluit-type-plugin.no-matches-message"}}
+    @searchMessage={{t 'besluit-type-plugin.search-message'}}
+    @noMatchesMessage={{t 'besluit-type-plugin.no-matches-message'}}
     @search={{this.search}}
     @options={{this.besluitTypes}}
     @selected={{@selected}}
-    @onChange={{@onchange}} as |besluitType|>
+    @onChange={{@onchange}}
+    as |besluitType|
+  >
     {{besluitType.label}}
   </PowerSelect>
   <p class='au-u-muted au-u-margin-tiny au-u-margin-bottom-small'>
@@ -18,11 +20,12 @@
     {{#unless @selected}}
       <AuAlert
         @icon={{this.AlertTriangleIcon}}
-        @title={{t "besluit-type-plugin.alert-title"}}
-        @skin="warning"
-        @size="small"
-        class="au-u-margin-bottom-none au-u-margin-top-small">
-      <p>{{t "besluit-type-plugin.alert-body"}}</p>
+        @title={{t 'besluit-type-plugin.alert-title'}}
+        @skin='warning'
+        @size='small'
+        class='au-u-margin-bottom-none au-u-margin-top-small'
+      >
+        <p>{{t 'besluit-type-plugin.alert-body'}}</p>
       </AuAlert>
     {{/unless}}
   {{/if}}

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

@@ -12,10 +12,7 @@
       this.documentText
       this.documentLegislationType
     }}
-    {{did-update
-      this.update
-      this.activeDecoration
-    }}
+    {{did-update this.update this.activeDecoration}}
     as |c|
   >
     <c.header>

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

@@ -1,5 +1,5 @@
 {{! @glint-nocheck: not typesafe yet }}
-<li class="au-c-list__item">
+<li class='au-c-list__item'>
   <AuButton
     @icon={{this.AddIcon}}
     @iconAlignment='left'

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

@@ -1,13 +1,17 @@
 {{#if @articles.length}}
-  <AuList @direction="vertical" @divider={{true}} as |Item|>
+  <AuList @direction='vertical' @divider={{true}} as |Item|>
     {{#each @articles as |article|}}
       <Item>
         <CitationPlugin::Citations::ArticlePreview
           @insertArticleCitation={{fn @insertArticleCitation article}}
-          @article={{article}} />
+          @article={{article}}
+        />
       </Item>
     {{/each}}
   </AuList>
 {{else}}
-  <Common::Search::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
+  <Common::Search::AlertNoItems
+    @fullSize={{@fullSize}}
+    class={{if @fullSize 'au-u-margin'}}
+  />
 {{/if}}

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

@@ -1,17 +1,21 @@
 {{! @glint-nocheck: not typesafe yet }}
-<div class="au-u-margin" ...attributes>
-  <AuHeading @level="3" @skin="5" class="au-u-margin-bottom-small">
-  {{@article.number}} ({{@article.dateInForce}} - {{if @article.dateNoLongerInForce @article.dateNoLongerInForce "…"}})
+<div class='au-u-margin' ...attributes>
+  <AuHeading @level='3' @skin='5' class='au-u-margin-bottom-small'>
+    {{@article.number}}
+    ({{@article.dateInForce}}
+    -
+    {{if @article.dateNoLongerInForce @article.dateNoLongerInForce '…'}})
   </AuHeading>
   <p>
     {{this.content}}
   </p>
   <AuButton
-    @skin="primary"
+    @skin='primary'
     @icon={{this.PlusTextIcon}}
-    @iconAlignment="left"
-    class="au-u-margin-top-small"
-    {{on "click" @insertArticleCitation}}>
-    {{t "citaten-plugin.references.refer-article"}}
+    @iconAlignment='left'
+    class='au-u-margin-top-small'
+    {{on 'click' @insertArticleCitation}}
+  >
+    {{t 'citaten-plugin.references.refer-article'}}
   </AuButton>
 </div>