@lblod/ember-rdfa-editor-lblod-plugins 5.0.0 → 6.0.0

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

@@ -1,7 +1,6 @@
 import { tracked } from '@glimmer/tracking';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { getOwner } from '@ember/application';
 import { inject as service } from '@ember/service';
 import {
   addType,
@@ -17,6 +16,7 @@ import fetchBesluitTypes, {
 import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 import { trackedFunction } from 'ember-resources/util/function';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
 
 declare module 'ember__owner' {
   export default interface Owner {
@@ -26,6 +26,7 @@ declare module 'ember__owner' {
 
 type Args = {
   controller: SayController;
+  options: BesluitTypePluginOptions;
 };
 
 export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
@@ -63,10 +64,10 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     // eslint-disable-next-line @typescript-eslint/await-thenable
     const bestuurseenheid = await this.currentSession.get('group');
     const classificatie = await bestuurseenheid.get('classificatie');
-    const ENV = getOwner(this)?.resolveRegistration('config:environment') as {
-      besluitTypePlugin: { endpoint: string };
-    };
-    const types = await fetchBesluitTypes(classificatie.uri, ENV);
+    const types = await fetchBesluitTypes(
+      classificatie.uri,
+      this.args.options.endpoint
+    );
     return types;
   });
 

package/addon/components/{besluit-plugin/besluit-plugin-card.ts → decision-plugin/decision-plugin-card.ts}

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { insertTitle } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-plugin/commands';
+import { insertTitle } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/commands';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { inject as service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
@@ -9,8 +9,12 @@ type Args = {
   controller: SayController;
 };
 
-export default class BesluitPluginCardComponent extends Component<Args> {
+/**
+ * @deprecated
+ */
+export default class DecisionPluginCard extends Component<Args> {
   @service declare intl: IntlService;
+
   get controller() {
     return this.args.controller;
   }
@@ -21,15 +25,25 @@ export default class BesluitPluginCardComponent extends Component<Args> {
 
   @action
   insertTitle() {
-    this.controller.doCommand(insertTitle(this.intl), {
-      view: this.controller.mainEditorView,
-    });
+    this.controller.doCommand(
+      insertTitle({
+        placeholderText: this.intl.t('besluit-plugin.insert.decision-title'),
+      }),
+      {
+        view: this.controller.mainEditorView,
+      }
+    );
     this.focus();
   }
 
   get canInsertTitle() {
-    return this.controller.checkCommand(insertTitle(this.intl), {
-      view: this.controller.mainEditorView,
-    });
+    return this.controller.checkCommand(
+      insertTitle({
+        placeholderText: this.intl.t('besluit-plugin.insert.decision-title'),
+      }),
+      {
+        view: this.controller.mainEditorView,
+      }
+    );
   }
 }

package/addon/components/hover-tooltip.ts

@@ -7,18 +7,21 @@ interface Args {
 }
 
 export default class HoverTooltip extends Component<Args> {
-  hover = modifier((element) => {
-    element.addEventListener('mouseenter', this.showTooltip);
-    element.addEventListener('mouseleave', this.hideTooltip);
-    element.addEventListener('focus', this.showTooltip);
-    element.addEventListener('blur', this.hideTooltip);
-    return () => {
-      element.removeEventListener('mouseenter', this.showTooltip);
-      element.removeEventListener('mouseleave', this.hideTooltip);
-      element.removeEventListener('focus', this.showTooltip);
-      element.removeEventListener('blur', this.hideTooltip);
-    };
-  });
+  hover = modifier(
+    (element) => {
+      element.addEventListener('mouseenter', this.showTooltip);
+      element.addEventListener('mouseleave', this.hideTooltip);
+      element.addEventListener('focus', this.showTooltip);
+      element.addEventListener('blur', this.hideTooltip);
+      return () => {
+        element.removeEventListener('mouseenter', this.showTooltip);
+        element.removeEventListener('mouseleave', this.hideTooltip);
+        element.removeEventListener('focus', this.showTooltip);
+        element.removeEventListener('blur', this.hideTooltip);
+      };
+    },
+    { eager: false }
+  );
 
   @tracked tooltipOpen = false;
 

package/addon/components/roadsign-regulation-plugin/measure-template.ts

@@ -9,21 +9,25 @@ type Args = {
   template: string;
   measure: string;
   annotated: boolean;
+  endpoint: string;
 };
 export default class MeasureTemplateComponent extends Component<Args> {
   @service declare roadsignRegistry: RoadsignRegistryService;
   @tracked template = '';
+  endpoint: string;
 
   constructor(parent: unknown, args: Args) {
     super(parent, args);
     this.template = this.args.template;
     void this.fetchData.perform();
+    this.endpoint = this.args.endpoint;
   }
 
   fetchData = task(async () => {
     const instructions =
       await this.roadsignRegistry.getInstructionsForMeasure.perform(
-        this.args.measure
+        this.args.measure,
+        this.endpoint
       );
     const template = includeInstructions(
       this.args.template,

package/addon/components/roadsign-regulation-plugin/roadsign-regulation-card.hbs

@@ -9,4 +9,4 @@
     Voeg mobiliteitsmaatregel in
   </AuButton>
 </AuList::Item>
-<RoadsignRegulationPlugin::RoadsignsModal @modalOpen={{this.modalOpen}} @closeModal={{this.closeModal}} @controller={{@controller}}/>
+<RoadsignRegulationPlugin::RoadsignsModal @modalOpen={{this.modalOpen}} @closeModal={{this.closeModal}} @controller={{@controller}} @options={{@options}}/>

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.hbs

@@ -85,6 +85,7 @@
           @goToPage={{this.goToPage}}
           @pageSize={{this.pageSize}}
           @pageStart={{this.pageStart}}
+          @options={{@options}}
         />
       </div>
     </div>

package/addon/components/roadsign-regulation-plugin/roadsigns-modal.ts

@@ -2,7 +2,6 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { task } from 'ember-concurrency';
-import { getOwner } from '@ember/application';
 import { v4 as uuid } from 'uuid';
 import { inject as service } from '@ember/service';
 import includeInstructions from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/includeInstructions';
@@ -20,6 +19,7 @@ import { besluitArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/
 import IntlService from 'ember-intl/services/intl';
 import { ProseParser } from '@lblod/ember-rdfa-editor';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { RoadsignRegulationPluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin';
 
 const PAGE_SIZE = 10;
 const SIGN_TYPE_URI =
@@ -43,10 +43,12 @@ type Category = Option;
 type Args = {
   closeModal: () => void;
   controller: SayController;
+  options: RoadsignRegulationPluginOptions;
 };
 
 export default class RoadsignRegulationCard extends Component<Args> {
   endpoint: string;
+  imageBaseUrl: string;
 
   pageSize = PAGE_SIZE;
   @service declare roadsignRegistry: RoadsignRegistryService;
@@ -84,15 +86,10 @@ export default class RoadsignRegulationCard extends Component<Args> {
 
   constructor(parent: unknown, args: Args) {
     super(parent, args);
-    const config = unwrap(getOwner(this)).resolveRegistration(
-      'config:environment'
-    ) as {
-      roadsignRegulationPlugin: {
-        endpoint: string;
-      };
-    };
-    this.endpoint = config.roadsignRegulationPlugin.endpoint;
+    this.endpoint = args.options.endpoint;
+    this.imageBaseUrl = args.options.imageBaseUrl;
     this.search();
+    void this.roadsignRegistry.loadClassifications.perform(this.endpoint);
   }
 
   get schema() {
@@ -176,6 +173,7 @@ export default class RoadsignRegulationCard extends Component<Args> {
       ];
     }
     const codes = await this.roadsignRegistry.searchCode.perform(
+      this.endpoint,
       undefined,
       undefined,
       undefined,
@@ -224,17 +222,21 @@ export default class RoadsignRegulationCard extends Component<Args> {
       codes.push(this.selectedCode);
     }
     const { measures, count } =
-      await this.roadsignRegistry.fetchMeasures.perform({
-        zonality: this.zonalitySelected
-          ? this.zonalitySelected.value
-          : undefined,
-        type: this.typeSelected ? this.typeSelected.value : undefined,
-        codes: codes.length ? codes.map((code) => code.value) : undefined,
-        category: this.categorySelected
-          ? this.categorySelected.value
-          : undefined,
-        pageStart: this.pageStart,
-      });
+      await this.roadsignRegistry.fetchMeasures.perform(
+        this.endpoint,
+        this.imageBaseUrl,
+        {
+          zonality: this.zonalitySelected
+            ? this.zonalitySelected.value
+            : undefined,
+          type: this.typeSelected ? this.typeSelected.value : undefined,
+          codes: codes.length ? codes.map((code) => code.value) : undefined,
+          category: this.categorySelected
+            ? this.categorySelected.value
+            : undefined,
+          pageStart: this.pageStart,
+        }
+      );
     this.tableData = measures;
     this.count = count;
   });
@@ -247,7 +249,8 @@ export default class RoadsignRegulationCard extends Component<Args> {
   ) {
     const instructions =
       await this.roadsignRegistry.fetchInstructionsForMeasure.perform(
-        measure.uri
+        measure.uri,
+        this.endpoint
       );
     const zonality = zonalityValue ? zonalityValue : measure.zonality;
     const html = includeInstructions(

package/addon/components/roadsign-regulation-plugin/roadsigns-table.ts

@@ -1,24 +1,21 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { getOwner } from '@ember/application';
-import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { RoadsignRegulationPluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin';
+
+type Args = {
+  controller: SayController;
+  options: RoadsignRegulationPluginOptions;
+};
 
-type Args = Record<string, never>;
 export default class RoadsignsTable extends Component<Args> {
   @tracked selected?: string;
   imageBaseUrl: string;
 
   constructor(parent: unknown, args: Args) {
     super(parent, args);
-    const config = unwrap(getOwner(this)).resolveRegistration(
-      'config:environment'
-    ) as {
-      roadsignRegulationPlugin: {
-        imageBaseUrl: string;
-      };
-    };
-    this.imageBaseUrl = config.roadsignRegulationPlugin.imageBaseUrl;
+    this.imageBaseUrl = args.options.imageBaseUrl;
   }
 
   @action

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.ts

@@ -83,7 +83,22 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
       const selection = Selection.near(resolvedPos, 1);
       if (selection) {
         tr.setSelection(selection);
-        tr.scrollIntoView();
+        const coords = this.controller.mainEditorView.coordsAtPos(
+          selection.from
+        );
+        const config = this.config[0];
+        if (config.scrollContainer) {
+          const scrollContainer: HTMLElement = config.scrollContainer;
+          const alreadyScrolled = scrollContainer.scrollTop;
+          const MAGIC_NUMBER_TOPBAR_HEIGHT: number =
+            config.scrollingPadding ?? 150;
+          scrollContainer.scrollTo(
+            0,
+            coords.top + alreadyScrolled - MAGIC_NUMBER_TOPBAR_HEIGHT
+          );
+        } else {
+          tr.scrollIntoView();
+        }
       }
       return tr;
     });

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

@@ -0,0 +1,12 @@
+{{#if this.shouldShow}}
+  <AuCard @shadow={{true}} @size="small" as |Card|>
+    <Card.header>
+      <AuHeading @level="2" @skin="4">{{@title}}</AuHeading>
+    </Card.header>
+    <Card.content>
+      {{#each this.results as |result|}}
+        <ValidationPlugin::ValidationItem @controller={{@controller}} @result={{result}}/>
+      {{/each}}
+    </Card.content>
+  </AuCard>
+{{/if}}

package/addon/components/validation-plugin/validation-card.ts

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { ValidationReport } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation';
+
+interface Args {
+  report: ValidationReport;
+  controller?: SayController;
+  title: string;
+}
+
+export default class ValidationCardComponent extends Component<Args> {
+  get shouldShow() {
+    return !this.args.report.conforms;
+  }
+
+  get results() {
+    return this.args.report.results ?? [];
+  }
+}

package/addon/components/validation-plugin/validation-item.hbs

@@ -0,0 +1,2 @@
+<AuAlert @size='small' @icon={{this.icon}} @title={{this.message}} @skin={{this.skin}} @closable={{false}}>
+</AuAlert>

package/addon/components/validation-plugin/validation-item.ts

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { ValidationResult } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation';
+import { inject as service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+
+interface Args {
+  icon?: string;
+  result: ValidationResult;
+
+  controller?: SayController;
+}
+
+export default class ValidationItem extends Component<Args> {
+  @service
+  declare intl: IntlService;
+
+  get result(): ValidationResult {
+    return this.args.result;
+  }
+
+  get message(): string {
+    return this.result.message;
+  }
+
+  get skin() {
+    switch (this.result.severity) {
+      case 'info':
+        return 'info';
+      case 'warning':
+        return 'warning';
+      case 'violation':
+        return 'error';
+      default:
+        return 'info';
+    }
+  }
+
+  get icon() {
+    switch (this.result.severity) {
+      case 'info':
+        return 'info-circle';
+      case 'warning':
+        return 'alert-triangle';
+      case 'violation':
+        return 'cross';
+      default:
+        return 'info-circle';
+    }
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+}

package/addon/components/variable-plugin/template-variable-card.ts

@@ -1,7 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { getOwner } from '@ember/application';
 import { task } from 'ember-concurrency';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import {
@@ -13,9 +12,11 @@ import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 import { NodeSelection, PNode, ProseParser } from '@lblod/ember-rdfa-editor';
 import { ZONAL_URI } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/constants';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { TemplateVariablePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin';
 
 type Args = {
   controller: SayController;
+  options: TemplateVariablePluginOptions;
 };
 export default class EditorPluginsTemplateVariableCardComponent extends Component<Args> {
   @tracked variableOptions: CodeListOption[] = [];
@@ -24,26 +25,6 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
   @tracked showCard = false;
   @tracked multiSelect = false;
   mappingUri?: string;
-  zonalLocationCodelistUri: string;
-  endpoint: string;
-  nonZonalLocationCodelistUri: string;
-
-  constructor(parent: unknown, args: Args) {
-    super(parent, args);
-    const config = getOwner(this)?.resolveRegistration(
-      'config:environment'
-    ) as {
-      templateVariablePlugin: {
-        zonalLocationCodelistUri: string;
-        endpoint: string;
-        nonZonalLocationCodelistUri: string;
-      };
-    };
-    const pluginConfig = config.templateVariablePlugin;
-    this.zonalLocationCodelistUri = pluginConfig.zonalLocationCodelistUri;
-    this.endpoint = pluginConfig.endpoint;
-    this.nonZonalLocationCodelistUri = pluginConfig.nonZonalLocationCodelistUri;
-  }
 
   get controller() {
     return this.args.controller;
@@ -107,13 +88,15 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
         const type = variable.node.attrs.type as string;
         if (type === 'codelist') {
           const source =
-            (variable.node.attrs.source as string | undefined) ?? this.endpoint;
+            (variable.node.attrs.source as string | undefined) ??
+            this.args.options.endpoint;
           const codelistURI = variable.node.attrs.codelistResource as string;
           void this.fetchCodeListOptions.perform(source, codelistURI);
           this.showCard = true;
         } else if (type === 'location') {
           const source =
-            (variable.node.attrs.source as string | undefined) ?? this.endpoint;
+            (variable.node.attrs.source as string | undefined) ??
+            this.args.options.endpoint;
           const roadSignRegulation = findParentNodeOfType(
             this.controller.schema.nodes.roadsign_regulation
           )(selection);
@@ -123,13 +106,13 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
           if (zonalityUri === ZONAL_URI) {
             void this.fetchCodeListOptions.perform(
               source,
-              this.zonalLocationCodelistUri,
+              this.args.options.zonalLocationCodelistUri,
               true
             );
           } else {
             void this.fetchCodeListOptions.perform(
               source,
-              this.nonZonalLocationCodelistUri,
+              this.args.options.nonZonalLocationCodelistUri,
               true
             );
           }

package/addon/plugins/besluit-type-plugin/index.ts

@@ -0,0 +1,3 @@
+export type BesluitTypePluginOptions = {
+  endpoint: string;
+};

package/addon/plugins/besluit-type-plugin/utils/fetchBesluitTypes.ts

@@ -9,11 +9,7 @@ export type BesluitType = {
 };
 export default async function fetchBesluitTypes(
   classificationUri: string,
-  ENV: {
-    besluitTypePlugin: {
-      endpoint: string;
-    };
-  }
+  endpoint: string
 ) {
   const query = `
     PREFIX                    conceptscheme: <https://data.vlaanderen.be/id/conceptscheme/>
@@ -54,7 +50,6 @@ export default async function fetchBesluitTypes(
   const typeFetcher = new SparqlEndpointFetcher({
     method: 'POST',
   });
-  const endpoint = ENV.besluitTypePlugin.endpoint;
   const bindingStream = await typeFetcher.fetchBindings(endpoint, query);
   const validBesluitTriples: IBindings[] = [];
   bindingStream.on('data', (triple: IBindings) => {

package/addon/plugins/decision-plugin/commands/index.ts

@@ -0,0 +1,4 @@
+export { default as insertTitle } from './insert-title';
+export { default as insertArticleContainer } from './insert-article-container';
+export { default as insertDescription } from './insert-description';
+export { default as insertMotivation } from './insert-motivation';

package/addon/plugins/decision-plugin/commands/insert-article-container.ts

@@ -0,0 +1,56 @@
+import {
+  Command,
+  EditorState,
+  NodeSelection,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
+import { v4 as uuid } from 'uuid';
+import { besluitArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/standard-template-plugin/utils/nodes';
+import IntlService from 'ember-intl/services/intl';
+import { isNone } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { transactionCompliesWithShapes } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation/utils/transaction-complies-with-shapes';
+import { findInsertionPosInAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/find-insertion-pos-in-ancestor-of-type';
+
+interface InsertArticleContainerArgs {
+  intl: IntlService;
+  validateShapes?: Set<string>;
+}
+
+export default function insertArticleContainer({
+  intl,
+  validateShapes,
+}: InsertArticleContainerArgs): Command {
+  return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
+    const { selection, schema } = state;
+    const nodeToInsert = schema.node(
+      'article_container',
+      {
+        __rdfaId: uuid(),
+      },
+      besluitArticleStructure.constructor({
+        schema,
+        intl,
+      }).node
+    );
+
+    const insertionPos = findInsertionPosInAncestorOfType(
+      selection,
+      schema.nodes.besluit,
+      nodeToInsert
+    );
+    if (isNone(insertionPos)) {
+      return false;
+    }
+    const tr = state.tr;
+    tr.replaceRangeWith(insertionPos, insertionPos, nodeToInsert);
+
+    if (!transactionCompliesWithShapes(state, tr, validateShapes)) {
+      return false;
+    }
+    if (dispatch) {
+      tr.setSelection(NodeSelection.create(tr.doc, insertionPos + 4));
+      dispatch(tr.scrollIntoView());
+    }
+    return true;
+  };
+}

package/addon/plugins/decision-plugin/commands/insert-description.ts

@@ -0,0 +1,53 @@
+import {
+  EditorState,
+  NodeSelection,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
+import { v4 as uuid } from 'uuid';
+import { isNone } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { transactionCompliesWithShapes } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/validation/utils/transaction-complies-with-shapes';
+import { findInsertionPosInAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/find-insertion-pos-in-ancestor-of-type';
+
+interface InsertDescriptionArgs {
+  placeholderText: string;
+  validateShapes?: Set<string>;
+}
+
+export default function insertDescription({
+  placeholderText,
+  validateShapes,
+}: InsertDescriptionArgs) {
+  return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
+    const { selection, schema } = state;
+    const nodeToInsert = schema.node(
+      'description',
+      { __rdfaId: uuid() },
+      schema.node(
+        'paragraph',
+        null,
+        schema.node('placeholder', {
+          placeholderText,
+        })
+      )
+    );
+    const insertionPos = findInsertionPosInAncestorOfType(
+      selection,
+      schema.nodes.besluit,
+      nodeToInsert
+    );
+    if (isNone(insertionPos)) {
+      return false;
+    }
+    const tr = state.tr;
+
+    tr.replaceRangeWith(insertionPos, insertionPos, nodeToInsert);
+    if (!transactionCompliesWithShapes(state, tr, validateShapes)) {
+      return false;
+    }
+    if (dispatch) {
+      tr.setSelection(NodeSelection.create(tr.doc, insertionPos + 2));
+      dispatch(tr.scrollIntoView());
+    }
+    return true;
+  };
+}