@lblod/ember-rdfa-editor-lblod-plugins 0.4.1 → 1.0.0-alpha.2

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,45 @@
+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 '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/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 '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/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;
+  }
+}

package/addon/components/roadsign-regulation-plugin/{roadsigns-modal.js → roadsigns-modal.ts}

@@ -1,16 +1,22 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { restartableTask } from 'ember-concurrency';
+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 '../../utils/roadsign-regulation-plugin/includeInstructions';
+import includeInstructions from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/includeInstructions';
 import {
   NON_ZONAL_URI,
   POTENTIALLY_ZONAL_URI,
   ZONAL_URI,
-} from '../../constants';
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/constants';
+import RoadsignRegistryService from '@lblod/ember-rdfa-editor-lblod-plugins/services/roadsign-registry';
+import { assert } from '@ember/debug';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import Measure from '@lblod/ember-rdfa-editor-lblod-plugins/models/measure';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { insertArticle } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-plugin/commands';
 
 const PAGE_SIZE = 10;
 const SIGN_TYPE_URI =
@@ -20,17 +26,33 @@ const ROAD_MARKING_URI =
 const TRAFFIC_LIGHT_URI =
   'https://data.vlaanderen.be/ns/mobiliteit#Verkeerslichtconcept';
 const measureTypes = [SIGN_TYPE_URI, ROAD_MARKING_URI, TRAFFIC_LIGHT_URI];
-export default class RoadsignRegulationCard extends Component {
-  endpoint;
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+type Zonality = Option;
+type TypeOption = Option;
+type Code = Option;
+type Category = Option;
+
+type Args = {
+  closeModal: () => void;
+  controller: ProseController;
+};
+
+export default class RoadsignRegulationCard extends Component<Args> {
+  endpoint: string;
 
   pageSize = PAGE_SIZE;
-  @service roadsignRegistry;
+  @service declare roadsignRegistry: RoadsignRegistryService;
 
-  @tracked typeSelected;
+  @tracked typeSelected?: TypeOption;
 
-  @tracked categorySelected;
+  @tracked categorySelected?: Category;
 
-  @tracked zonalityOptions = [
+  @tracked zonalityOptions: Zonality[] = [
     {
       label: 'Zonaal',
       value: ZONAL_URI,
@@ -40,13 +62,15 @@ export default class RoadsignRegulationCard extends Component {
       value: NON_ZONAL_URI,
     },
   ];
-  @tracked zonalitySelected;
+  @tracked zonalitySelected?: Zonality;
 
-  @tracked selectedCode;
-  @tracked selectedCodeCombination;
-  @tracked codeCombinationOptions;
-  @tracked tableData = [];
-  @tracked count;
+  descriptionFilter?: string;
+
+  @tracked selectedCode?: Code;
+  @tracked selectedCodeCombination?: Code[];
+  @tracked codeCombinationOptions: Code[] = [];
+  @tracked tableData: Measure[] = [];
+  @tracked count?: number;
   @tracked pageStart = 0;
 
   get isNotTypeSign() {
@@ -54,15 +78,21 @@ export default class RoadsignRegulationCard extends Component {
     return this.typeSelected.value !== SIGN_TYPE_URI;
   }
 
-  constructor() {
-    super(...arguments);
-    const config = getOwner(this).resolveRegistration('config:environment');
+  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.search();
   }
 
   @action
-  selectTypeOrCategory(option) {
+  selectTypeOrCategory(option: Option) {
     if (!option) {
       this.typeSelected = undefined;
       this.categorySelected = undefined;
@@ -81,34 +111,38 @@ export default class RoadsignRegulationCard extends Component {
   }
 
   @action
-  changeCode(value) {
+  changeCode(value: Code) {
     this.selectedCode = value;
     this.selectedCodeCombination = undefined;
-    this.fetchCodeCombinations();
+    void this.fetchCodeCombinations();
     this.search();
   }
 
   @action
-  changeCodeCombination(value) {
+  changeCodeCombination(value: Code[]) {
     this.selectedCodeCombination = value;
-    this.fetchCodeCombinations();
+    void this.fetchCodeCombinations();
     this.search();
   }
 
   @action
-  changeDescription(e) {
-    this.descriptionFilter = e.target.value;
+  changeDescription(event: InputEvent) {
+    assert(
+      'changeDescriptionValue must be bound to an input element',
+      event.target instanceof HTMLInputElement
+    );
+    this.descriptionFilter = event.target.value;
     this.search();
   }
 
   @action
-  selectCategory(value) {
+  selectCategory(value: Category) {
     this.categorySelected = value;
     this.search();
   }
 
   @action
-  selectZonality(value) {
+  selectZonality(value: Zonality) {
     this.zonalitySelected = value;
     this.search();
   }
@@ -118,19 +152,18 @@ export default class RoadsignRegulationCard extends Component {
     this.args.closeModal();
   }
   @action
-  searchCodes(term) {
-    const category = this.categorySelected
-      ? this.categorySelected.value
-      : undefined;
-    const type = this.typeSelected ? this.typeSelected.value : undefined;
+  searchCodes(term: string) {
+    const category = this.categorySelected?.value;
+    const type = this.typeSelected?.value;
     return this.roadsignRegistry.searchCode.perform(term, category, type);
   }
 
   async fetchCodeCombinations() {
-    let signs = [this.selectedCode.value];
+    const selectedCodeValue = unwrap(this.selectedCode?.value);
+    let signs: string[] = [selectedCodeValue];
     if (this.selectedCodeCombination) {
       signs = [
-        this.selectedCode.value,
+        selectedCodeValue,
         ...this.selectedCodeCombination.map((s) => s.value),
       ];
     }
@@ -143,7 +176,10 @@ export default class RoadsignRegulationCard extends Component {
     this.codeCombinationOptions = codes;
   }
 
-  get typeOptions() {
+  get typeOptions(): {
+    groupName: string;
+    options: TypeOption[];
+  }[] {
     return [
       {
         groupName: 'Types',
@@ -171,9 +207,8 @@ export default class RoadsignRegulationCard extends Component {
     ];
   }
 
-  @restartableTask
-  *fetchSigns() {
-    let codes = [];
+  fetchSigns = task({ restartable: true }, async () => {
+    const codes: Code[] = [];
     if (this.selectedCodeCombination) {
       codes.push(...this.selectedCodeCombination);
     }
@@ -181,7 +216,7 @@ export default class RoadsignRegulationCard extends Component {
       codes.push(this.selectedCode);
     }
     const { measures, count } =
-      yield this.roadsignRegistry.fetchMeasures.perform({
+      await this.roadsignRegistry.fetchMeasures.perform({
         zonality: this.zonalitySelected
           ? this.zonalitySelected.value
           : undefined,
@@ -194,10 +229,14 @@ export default class RoadsignRegulationCard extends Component {
       });
     this.tableData = measures;
     this.count = count;
-  }
+  });
 
   @action
-  async insertHtml(measure, zonalityValue, temporalValue) {
+  async insertHtml(
+    measure: Measure,
+    zonalityValue: string,
+    temporalValue: string
+  ) {
     const instructions =
       await this.roadsignRegistry.fetchInstructionsForMeasure.perform(
         measure.uri
@@ -211,7 +250,8 @@ export default class RoadsignRegulationCard extends Component {
     const signsHTML = measure.signs
       .map((sign) => {
         const roadSignUri = 'http://data.lblod.info/verkeerstekens/' + uuid();
-        return `<li style="margin-bottom:1rem;"><span property="mobiliteit:wordtAangeduidDoor" resource=${roadSignUri} typeof="mobiliteit:Verkeersbord-Verkeersteken">
+        return `<li style="margin-bottom:1rem;">
+        <span property="mobiliteit:wordtAangeduidDoor" resource=${roadSignUri} typeof="mobiliteit:Verkeersbord-Verkeersteken">
         <span property="mobiliteit:heeftVerkeersbordconcept" resource="${
           sign.uri
         }" typeof="mobiliteit:Verkeersbordconcept" style="display:flex;align-items:center;">
@@ -229,40 +269,37 @@ export default class RoadsignRegulationCard extends Component {
       </li>`;
       })
       .join('\n');
+    const regulationHTML = `<div property="mobiliteit:heeftVerkeersmaatregel" typeof="mobiliteit:Mobiliteitsmaatregel" resource="http://data.lblod.info/mobiliteitsmaatregels/${uuid()}">
+    <span style="display:none;" property="prov:wasDerivedFrom" resource="${
+      measure.uri
+    }">&nbsp;</span>
+    <span style="display:none;" property="ext:zonality" resource="${zonality}"></span>
+    <span style="display:none;" property="ext:temporal" value="${measure.temporal.toString()}"></span>
+      <div property="dct:description">
+        ${html}
+        <p>Dit wordt aangeduid door verkeerstekens:</p>
+        <ul style="list-style:none;">
+          ${signsHTML}
+        </ul>
+        ${temporalValue === 'true' ? 'Deze signalisatie is dynamisch.' : ''}
+      </div>
+    </div>
+  `;
 
-    this.args.controller.executeCommand(
-      'insert-article',
-      this.args.controller,
-      `<div property="mobiliteit:heeftVerkeersmaatregel" typeof="mobiliteit:Mobiliteitsmaatregel" resource="http://data.lblod.info/mobiliteitsmaatregels/${uuid()}">
-        <span style="display:none;" property="prov:wasDerivedFrom" resource="${
-          measure.uri
-        }">&nbsp;</span>
-        <span style="display:none;" property="ext:zonality" resource="${zonality}"></span>
-        <span style="display:none;" property="ext:temporal" value="${
-          measure.temporal
-        }"></span>
-          <div property="dct:description">
-            ${html}
-            <p>Dit wordt aangeduid door verkeerstekens:</p>
-            <ul style="list-style:none;">
-              ${signsHTML}
-            </ul>
-            ${temporalValue === 'true' ? 'Deze signalisatie is dynamisch.' : ''}
-          </div>
-        </div>
-      `
+    this.args.controller.doCommand(
+      insertArticle(this.args.controller, regulationHTML)
     );
     this.args.closeModal();
   }
 
   @action
-  goToPage(pageStart) {
+  goToPage(pageStart: number) {
     this.pageStart = pageStart;
-    this.fetchSigns.perform();
+    void this.fetchSigns.perform();
   }
   @action
   search() {
     this.pageStart = 0;
-    this.fetchSigns.perform();
+    void this.fetchSigns.perform();
   }
 }

package/addon/components/roadsign-regulation-plugin/{roadsigns-pagination.js → roadsigns-pagination.ts}

@@ -2,7 +2,12 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-export default class RoadsignsPagination extends Component {
+type Args = {
+  count: number;
+  pageSize: number;
+  goToPage: (n: number) => void;
+};
+export default class RoadsignsPagination extends Component<Args> {
   @tracked actualPageStart = 0;
   @tracked actualPageEnd = 10;
 
@@ -31,8 +36,7 @@ export default class RoadsignsPagination extends Component {
   }
 
   @action
-  onUpdateCount(_element, params) {
-    const pageStart = params[1];
+  onUpdateCount(_element: HTMLElement, [_, pageStart]: [number, number]) {
     this.actualPageStart = pageStart;
     this.actualPageEnd = pageStart + this.args.pageSize;
   }

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

@@ -0,0 +1,32 @@
+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/utils/option';
+
+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;
+  }
+
+  @action
+  selectRow(id: string) {
+    if (this.selected === id) {
+      this.selected = undefined;
+    } else {
+      this.selected = id;
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+
+type Args = {
+  controller: ProseController;
+};
+export default class StandardTemplatePluginCardComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+}

package/addon/components/standard-template-plugin/template-provider.hbs

@@ -1,6 +1,8 @@
+<div {{did-insert (perform this.standardTemplatePlugin.fetchTemplates)}}>
 {{yield (hash
           applicableTemplates=this.applicableTemplates
           hasApplicableTemplates=this.hasApplicableTemplates
           busy=this.busy
           insert=this.insert
-        )}}
+        )}}
+</div>