@lblod/ember-rdfa-editor-lblod-plugins 0.4.0 → 1.0.0-alpha.1

package/addon/components/import-snippet-plugin/card.ts

@@ -0,0 +1,119 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { ProseParser } from '@lblod/ember-rdfa-editor';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import ImportRdfaSnippet from '@lblod/ember-rdfa-editor-lblod-plugins/services/import-rdfa-snippet';
+import { RdfaSnippet } from '@lblod/ember-rdfa-editor-lblod-plugins/services/import-rdfa-snippet';
+
+type Args = {
+  controller: ProseController;
+};
+export default class ImportSnippetPluginCard extends Component<Args> {
+  @service declare importRdfaSnippet: ImportRdfaSnippet;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get snippets(): RdfaSnippet[] {
+    return this.importRdfaSnippet.snippetsForType('roadsign');
+  }
+
+  get insertRange() {
+    const selection = this.controller.state.selection;
+    const besluitRange = [
+      ...this.controller.datastore
+        .limitToRange(this.controller.state, selection.from, selection.to)
+        .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
+        .asSubjectNodeMapping()
+        .nodes(),
+    ][0];
+    if (besluitRange) {
+      const { to } = besluitRange;
+      return {
+        from: to - 1,
+        to: to - 1,
+      };
+    } else {
+      return selection;
+    }
+  }
+
+  @action
+  insert(snippet: RdfaSnippet, type: string) {
+    const insertRange = this.insertRange;
+    if (insertRange) {
+      const node = this.generateSnippetHtml(snippet, type);
+      this.controller.withTransaction((tr) => {
+        return tr.replaceRangeWith(insertRange.from, insertRange.to, node);
+      });
+      this.importRdfaSnippet.removeSnippet(snippet);
+    } else {
+      console.warn('Could not find a range to insert, so we skipped inserting');
+    }
+  }
+
+  @action
+  generateSnippetHtml(snippet: RdfaSnippet, type: string) {
+    const domParser = new DOMParser();
+    const contentFragment = ProseParser.fromSchema(
+      this.controller.schema
+    ).parse(domParser.parseFromString(snippet.content, 'text/html')).content;
+    const { schema } = this.controller;
+    if (type === 'attachment') {
+      return schema.node(
+        'block_rdfa',
+        { property: 'http://lblod.data.gift/vocabularies/editor/isLumpNode' },
+        [
+          schema.node(
+            'block_rdfa',
+            {
+              resource: snippet.source,
+              property: 'http://data.europa.eu/eli/ontology#related_to',
+              typeof:
+                'http://xmlns.com/foaf/0.1/Document http://lblod.data.gift/vocabularies/editor/SnippetAttachment',
+            },
+            [
+              schema.node('paragraph', {}, [
+                schema.text('Bijlage uit externe bron '),
+                schema.text(new URL(snippet.source).hostname, [
+                  schema.mark('link'),
+                ]),
+              ]),
+              schema.node(
+                'block_rdfa',
+                { property: 'http://www.w3.org/ns/prov#value' },
+                contentFragment
+              ),
+            ]
+          ),
+        ]
+      );
+    } else {
+      return schema.node(
+        'block_rdfa',
+        { property: 'http://lblod.data.gift/vocabularies/editor/isLumpNode' },
+        [
+          schema.node('paragraph', {}, [
+            schema.text('Bijlage uit externe bron'),
+          ]),
+          schema.node(
+            'block_rdfa',
+            {
+              property: 'http://data.europa.eu/eli/ontology#related_to',
+              resource: snippet.source,
+            },
+            [
+              schema.node(
+                'block_rdfa',
+                { property: 'http://www.w3.org/ns/prov#value' },
+                contentFragment
+              ),
+            ]
+          ),
+        ]
+      );
+    }
+  }
+}

package/addon/components/insert-variable-plugin/insert-variable-card.hbs

@@ -1,3 +1,4 @@
+<div {{did-update this.selectionChanged @controller.state}}>
 {{#if this.showCard}}
   <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
     <c.header>
@@ -30,4 +31,4 @@
     </c.content>
   </AuCard>
 {{/if}}
-
+</div>

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

@@ -0,0 +1,134 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  defaultVariableTypes,
+  VariableType,
+} from '../../utils/variable-plugins/default-variable-types';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { CodeList } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/variable-plugins/fetch-data';
+import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
+type Args = {
+  controller: ProseController;
+  widgetArgs: {
+    options: {
+      publisher: string;
+      variableTypes: (VariableType | string)[];
+      defaultEndpoint: string;
+    };
+  };
+};
+
+export default class EditorPluginsInsertCodelistCardComponent extends Component<Args> {
+  @tracked variablesArray: VariableType[];
+  @tracked selectedVariable?: VariableType;
+  @tracked showCard = true;
+  @tracked hasSubtype = false;
+  @tracked selectedSubtype?: CodeList;
+  @tracked subtypes?: CodeList[];
+  publisher: string;
+  endpoint: string;
+
+  constructor(parent: unknown, args: Args) {
+    super(parent, args);
+    const { publisher, variableTypes, defaultEndpoint } =
+      this.args.widgetArgs.options || {};
+    this.publisher = publisher;
+    this.endpoint = defaultEndpoint;
+    const variableTypesSelectedByUser = variableTypes ?? [
+      'text',
+      'number',
+      'date',
+      'location',
+      'codelist',
+    ];
+
+    const variablesArray: VariableType[] = [];
+    for (const type of variableTypesSelectedByUser) {
+      if (typeof type === 'string') {
+        const variableType = defaultVariableTypes[type];
+        if (variableType) {
+          variablesArray.push(variableType);
+        } else {
+          console.warn(
+            `Template Variable Plugin: variable type ${type} not found in the default variable types`
+          );
+        }
+      } else {
+        variablesArray.push(type);
+      }
+    }
+    this.variablesArray = variablesArray;
+  }
+
+  @action
+  insert() {
+    if (!this.selectedVariable) {
+      return;
+    }
+    const uri = `http://data.lblod.info/mappings/${uuidv4()}`;
+    let variableContent;
+    if (typeof this.selectedVariable.template === 'function') {
+      variableContent = this.selectedVariable.template(
+        this.endpoint,
+        this.selectedSubtype
+      );
+    } else {
+      variableContent = this.selectedVariable.template;
+    }
+    const htmlToInsert = `<span resource="${uri}" typeof="ext:Mapping">${variableContent}</span>`;
+    const { from, to } = this.args.controller.state.selection;
+    this.args.controller.doCommand(insertHtml(htmlToInsert, from, to));
+  }
+
+  @action
+  updateSelectedVariable(variable: VariableType) {
+    this.selectedVariable = variable;
+    if (variable.fetchSubtypes) {
+      void this.fetchSubtypes.perform(variable.fetchSubtypes);
+      this.hasSubtype = true;
+    } else {
+      this.hasSubtype = false;
+    }
+  }
+
+  fetchSubtypes = task(
+    async (
+      fetchFunction: (
+        endpoint: string,
+        publisher: string
+      ) => Promise<CodeList[]>
+    ) => {
+      const subtypes = await fetchFunction(this.endpoint, this.publisher);
+      this.subtypes = subtypes;
+    }
+  );
+
+  @action
+  updateSubtype(subtype: CodeList) {
+    this.selectedSubtype = subtype;
+  }
+
+  @action
+  selectionChanged() {
+    const currentSelection = this.args.controller.state.selection;
+    this.showCard = false;
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      this.args.controller.state,
+      currentSelection.from,
+      currentSelection.to
+    );
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const quad = limitedDatastore
+      .match(null, 'a', 'ext:Mapping')
+      .asQuadResultSet()
+      .first();
+    if (quad) {
+      this.showCard = false;
+    } else {
+      this.showCard = true;
+    }
+  }
+}

package/addon/components/rdfa-date-plugin/{rdfa-date-plugin-card.hbs → card.hbs}

@@ -1,3 +1,4 @@
+<div {{did-update this.onSelectionChanged @controller.state}}>
 {{#if this.showCard}}
   <AuCard @shadow={{true}} @size="flush" as |c|>
     <c.header class="au-u-hidden-visually">
@@ -5,7 +6,7 @@
     </c.header>
     <c.content class="au-o-box au-o-box--small">
       <div class="au-o-flow au-o-flow--small">
-        <RdfaDatePlugin::RdfaDateTimePicker
+        <RdfaDatePlugin::DateTimePicker
           @onChange={{this.changeDate}}
           @value={{this.dateValue}}
           @onlyDate={{this.onlyDate}}/>
@@ -20,3 +21,4 @@
     </c.content>
   </AuCard>
 {{/if}}
+</div>

package/addon/components/rdfa-date-plugin/card.ts

@@ -0,0 +1,72 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import modifyDate from '../../commands/modify-date-command';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
+type Args = {
+  controller: ProseController;
+};
+export default class RdfaDatePluginCardComponent extends Component<Args> {
+  @tracked dateValue?: Date;
+  @tracked dateRange?: { from: number; to: number };
+  @tracked dateInDocument = false;
+  @tracked onlyDate = false;
+  @tracked showCard = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  modifyDate() {
+    if (this.dateValue && this.dateRange) {
+      this.controller.checkAndDoCommand(
+        modifyDate(
+          this.dateRange.from,
+          this.dateRange.to,
+          this.dateValue,
+          this.onlyDate
+        )
+      );
+    }
+  }
+
+  @action
+  changeDate(date: Date) {
+    this.dateValue = date;
+    if (this.dateInDocument) this.modifyDate();
+  }
+
+  @action
+  onSelectionChanged() {
+    const selection = this.controller.state.selection;
+    const from = selection.$from;
+    const currentNode = from.parent.maybeChild(from.index());
+    if (!currentNode) {
+      return;
+    }
+    const datatype = getRdfaAttribute(currentNode, 'datatype').pop();
+    if (!datatype) {
+      this.showCard = false;
+      this.dateRange = undefined;
+      return;
+    }
+    // const { node: selectionParent, pos: parentPos } = ancestor;
+
+    if (datatype === 'xsd:dateTime' || datatype === 'xsd:date') {
+      this.dateRange = {
+        from: from.pos - from.textOffset,
+        to: from.pos - from.textOffset + currentNode.nodeSize,
+      };
+      const dateContent = getRdfaAttribute(currentNode, 'content').pop();
+      this.dateValue = dateContent ? new Date(dateContent) : new Date();
+      this.dateInDocument = !!dateContent;
+      this.onlyDate = datatype === 'xsd:date';
+      this.showCard = true;
+    } else {
+      this.dateRange = undefined;
+      this.showCard = false;
+    }
+  }
+}

package/addon/components/rdfa-date-plugin/{rdfa-date-time-picker.js → date-time-picker.ts}

@@ -1,11 +1,19 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { localCopy } from 'tracked-toolbox';
+import Intl from 'ember-intl/services/intl';
+type Args = {
+  value: Date;
+  onChange: (date: Date) => void;
+};
 
-export default class RdfaDateTimePicker extends Component {
-  @service intl;
-  @localCopy('args.value') date;
+export default class RdfaDatePluginDateTimePicker extends Component<Args> {
+  @service declare intl: Intl;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  @localCopy('args.value') declare date: Date;
 
   get hours() {
     return this.date.getHours();
@@ -33,8 +41,8 @@ export default class RdfaDateTimePicker extends Component {
   }
 
   @action
-  onChangeDate(isoDate, date) {
-    let wasDateInputCleared = !date;
+  onChangeDate(_isoDate: unknown, date: Date) {
+    const wasDateInputCleared = !date;
     if (!wasDateInputCleared) {
       if (!this.date) {
         this.date = new Date();
@@ -47,7 +55,7 @@ export default class RdfaDateTimePicker extends Component {
   }
 
   @action
-  onChangeTime(timeObject) {
+  onChangeTime(timeObject: { hours: number; minutes: number }) {
     if (!this.date) this.date = new Date();
     this.date.setHours(timeObject.hours);
     this.date.setMinutes(timeObject.minutes);
@@ -55,18 +63,24 @@ export default class RdfaDateTimePicker extends Component {
   }
 }
 
-function getLocalizedMonths(intl, monthFormat = 'long') {
-  let someYear = 2021;
+function getLocalizedMonths(
+  intl: Intl,
+  monthFormat: 'long' | 'numeric' | '2-digit' | 'short' | 'narrow' = 'long'
+) {
+  const someYear = 2021;
   return [...Array(12).keys()].map((monthIndex) => {
-    let date = new Date(someYear, monthIndex);
+    const date = new Date(someYear, monthIndex);
     return intl.formatDate(date, { month: monthFormat });
   });
 }
 
-function getLocalizedDays(intl, weekdayFormat = 'long') {
-  let someSunday = new Date('2021-01-03');
+function getLocalizedDays(
+  intl: Intl,
+  weekdayFormat: 'long' | 'short' | 'narrow' = 'long'
+) {
+  const someSunday = new Date('2021-01-03');
   return [...Array(7).keys()].map((index) => {
-    let weekday = new Date(someSunday.getTime());
+    const weekday = new Date(someSunday.getTime());
     weekday.setDate(someSunday.getDate() + index);
     return intl.formatDate(weekday, { weekday: weekdayFormat });
   });

package/addon/components/rdfa-date-plugin/insert.ts

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+
+type Args = {
+  controller: ProseController;
+};
+
+export default class RdfaDatePluginInsertComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.controller.schema;
+  }
+  @action
+  insertDate() {
+    this.controller.withTransaction((tr) => {
+      const dateNode = this.schema.text('${date}', [
+        this.schema.mark('inline_rdfa', {
+          datatype: 'xsd:date',
+          property: 'ext:content',
+        }),
+      ]);
+      return tr.replaceSelectionWith(dateNode, false);
+    });
+  }
+
+  @action
+  insertDateTime() {
+    this.controller.withTransaction((tr) => {
+      return tr.replaceSelectionWith(
+        this.schema.text('${date and time}', [
+          this.schema.mark('inline_rdfa', {
+            datatype: 'xsd:dateTime',
+            property: 'ext:content',
+          }),
+        ]),
+        false
+      );
+    });
+  }
+}

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

@@ -0,0 +1,58 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import {
+  NON_ZONAL_URI,
+  POTENTIALLY_ZONAL_URI,
+  ZONAL_URI,
+} from '../../constants';
+import Measure from '@lblod/ember-rdfa-editor-lblod-plugins/models/measure';
+import { assert } from '@ember/debug';
+
+type Args = {
+  measure: Measure;
+  selectRow: (uri: string) => void;
+  insert: (
+    measure: Measure,
+    zonalityValue?: string,
+    temporalValue?: string
+  ) => void;
+};
+
+export default class ExpandedMeasureComponent extends Component<Args> {
+  @tracked zonalityValue?: string;
+  @tracked temporalValue?: string;
+  ZONAL_URI = ZONAL_URI;
+  NON_ZONAL_URI = NON_ZONAL_URI;
+  get isPotentiallyZonal() {
+    return this.args.measure.zonality === POTENTIALLY_ZONAL_URI;
+  }
+  get insertButtonDisabled() {
+    return this.isPotentiallyZonal && !this.zonalityValue;
+  }
+
+  @action
+  changeZonality(event: InputEvent) {
+    assert(
+      'changeZonalityValue must be bound to an input element',
+      event.target instanceof HTMLInputElement
+    );
+    this.zonalityValue = event.target.value;
+  }
+  @action
+  changeTemporality(event: InputEvent) {
+    assert(
+      'changeTemporality must be bound to an input element',
+      event.target instanceof HTMLInputElement
+    );
+    this.temporalValue = event.target.value;
+  }
+  @action
+  insert() {
+    this.args.insert(this.args.measure, this.zonalityValue, this.temporalValue);
+  }
+  @action
+  unselectRow() {
+    this.args.selectRow(this.args.measure.uri);
+  }
+}

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

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
+import includeInstructions from '../../utils/roadsign-regulation-plugin/includeInstructions';
+import RoadsignRegistryService from '@lblod/ember-rdfa-editor-lblod-plugins/services/roadsign-registry';
+
+type Args = {
+  template: string;
+  measure: string;
+  annotated: boolean;
+};
+export default class MeasureTemplateComponent extends Component<Args> {
+  @service declare roadsignRegistry: RoadsignRegistryService;
+  @tracked template = '';
+
+  constructor(parent: unknown, args: Args) {
+    super(parent, args);
+    this.template = this.args.template;
+    void this.fetchData.perform();
+  }
+
+  fetchData = task(async () => {
+    const instructions =
+      await this.roadsignRegistry.getInstructionsForMeasure.perform(
+        this.args.measure
+      );
+    const template = includeInstructions(
+      this.args.template,
+      instructions,
+      this.args.annotated
+    );
+    this.template = template;
+  });
+}

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

@@ -3,10 +3,10 @@
     @skin="link"
     @icon="add"
     @iconAlignment="left"
-    @disabled={{if this.showCard false true}}
+    @disabled={{not this.showCard}}
     {{on "click" this.toggleModal}}
   >
     Voeg mobiliteitsmaatregel in
   </AuButton>
 </AuList::Item>
-<RoadsignRegulationPlugin::RoadsignsModal @modalOpen={{this.modalOpen}} @closeModal={{this.toggleModal}} @controller={{@controller}} @insert={{this.insert}}/>
+<RoadsignRegulationPlugin::RoadsignsModal @modalOpen={{this.modalOpen}} @closeModal={{this.toggleModal}} @controller={{@controller}}/>

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

@@ -0,0 +1,60 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+
+/**
+ * Card displaying a hint of the Date plugin
+ *
+ * @module editor-roadsign-regulation-plugin
+ * @class RoadsignRegulationCard
+ * @extends Ember.Component
+ */
+const acceptedTypes = [
+  '>https://data.vlaanderen.be/id/concept/BesluitType/4d8f678a-6fa4-4d5f-a2a1-80974e43bf34',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/7d95fd2e-3cc9-4a4c-a58e-0fbc408c2f9b',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/3bba9f10-faff-49a6-acaa-85af7f2199a3',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/0d1278af-b69e-4152-a418-ec5cfd1c7d0b',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/e8afe7c5-9640-4db8-8f74-3f023bec3241',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/256bd04a-b74b-4f2a-8f5d-14dda4765af9',
+  '>https://data.vlaanderen.be/id/concept/BesluitType/67378dd0-5413-474b-8996-d992ef81637a',
+];
+
+type Args = {
+  controller: ProseController;
+};
+
+export default class RoadsignRegulationCard extends Component<Args> {
+  @tracked modalOpen = false;
+
+  @action
+  toggleModal() {
+    this.modalOpen = !this.modalOpen;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get showCard() {
+    const selection = this.controller.state.selection;
+    const limitedDatastore = this.controller.datastore.limitToRange(
+      this.controller.state,
+      selection.from,
+      selection.to
+    );
+    const besluit = [
+      ...limitedDatastore
+        .match(undefined, 'a')
+        .transformDataset((dataset, termConverter) => {
+          return dataset.filter((quad) =>
+            acceptedTypes
+              .map((type) => termConverter(type).value)
+              .includes(quad.object.value)
+          );
+        })
+        .asQuadResultSet(),
+    ][0];
+    return !!besluit;
+  }
+}