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

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

@@ -1,7 +1,7 @@
 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';
@@ -11,6 +11,12 @@ import {
   POTENTIALLY_ZONAL_URI,
   ZONAL_URI,
 } from '../../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/commands/besluit-plugin';
 
 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>

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

@@ -0,0 +1,75 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import instantiateUuids from '../../utils/instantiate-uuids';
+import StandardTemplatePluginService from '@lblod/ember-rdfa-editor-lblod-plugins/services/standard-template-plugin';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import TemplateModel from '@lblod/ember-rdfa-editor-lblod-plugins/models/template';
+import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
+
+type Args = {
+  controller: ProseController;
+};
+export default class TemplateProviderComponent extends Component<Args> {
+  @service declare standardTemplatePlugin: StandardTemplatePluginService;
+
+  get busy() {
+    return this.standardTemplatePlugin.fetchTemplates.isRunning;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get hasApplicableTemplates() {
+    return this.applicableTemplates.length > 0;
+  }
+
+  get applicableTemplates() {
+    return (
+      this.standardTemplatePlugin.fetchTemplates.last?.value?.filter(
+        (template) => this.templateIsApplicable(template)
+      ) || []
+    );
+  }
+
+  templateIsApplicable(template: TemplateModel) {
+    const containsTypes = this.controller.datastore
+      .match(null, 'a')
+      .dataset.some((quad) => {
+        return template.contexts.includes(quad.object.value);
+      });
+
+    const containsDisabledTypes = this.controller.datastore
+      .match(null, 'a')
+      .dataset.some((quad) =>
+        template.disabledInContexts.includes(quad.object.value)
+      );
+
+    return containsTypes && !containsDisabledTypes;
+  }
+
+  @action
+  async insert(template: TemplateModel) {
+    await template.reload();
+    const selection = this.controller.state.selection;
+    let insertRange: { from: number; to: number } = selection;
+    const { $from, $to } = selection;
+    if (
+      $from.parent.type === this.controller.schema.nodes['placeholder'] &&
+      $from.sameParent($to)
+    ) {
+      insertRange = {
+        from: $from.start($from.depth - 1),
+        to: $from.end($from.depth - 1),
+      };
+    }
+    this.controller.doCommand(
+      insertHtml(
+        instantiateUuids(template.body),
+        insertRange.from,
+        insertRange.to
+      )
+    );
+  }
+}

package/addon/components/table-of-contents-plugin/card.hbs

@@ -1,5 +1,16 @@
 <AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
   <c.content class="au-c-content--small">
-    <AuToggleSwitch @label={{t "table-of-contents-plugin.toggle" }} @checked={{this.toggled}} @onChange={{this.toggle}} />
+    <label
+      class="au-c-toggle-switch"
+    >
+      <input
+        type="checkbox"
+        checked={{this.toggled}}
+        class="au-c-toggle-switch__input au-u-hidden-visually"
+        {{on "input" this.toggle}}
+      />
+      <span class="au-c-toggle-switch__toggle"></span>
+      <span class="au-c-toggle-switch__label">{{t "table-of-contents-plugin.toggle" }}</span>
+    </label>
   </c.content>
 </AuCard>

package/addon/components/table-of-contents-plugin/card.ts

@@ -0,0 +1,60 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import {
+  TableOfContentsConfig,
+  TABLE_OF_CONTENTS_DEFAULT_CONFIG,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/constants';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+
+type Args = {
+  controller: ProseController;
+  widgetArgs: {
+    config: TableOfContentsConfig;
+  };
+};
+
+export default class TableOfContentsCardComponent extends Component<Args> {
+  get toggled() {
+    return !!this.tableOfContentsRange;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get tableOfContentsRange() {
+    let result: { from: number; to: number } | undefined;
+    this.controller.state.doc.descendants((node, pos) => {
+      if (node.type === this.controller.schema.nodes['tableOfContents']) {
+        result = { from: pos, to: pos + node.nodeSize };
+      }
+      return !result;
+    });
+    return result;
+  }
+
+  get config() {
+    return this.args.widgetArgs.config ?? TABLE_OF_CONTENTS_DEFAULT_CONFIG;
+  }
+
+  @action
+  toggle() {
+    if (this.tableOfContentsRange) {
+      const { from, to } = this.tableOfContentsRange;
+      this.controller.withTransaction((tr) => {
+        return tr.deleteRange(from, to);
+      });
+    } else {
+      const { schema } = this.controller;
+      this.controller.withTransaction((tr) => {
+        return tr.replaceRangeWith(
+          0,
+          0,
+          schema.node('tableOfContents', {
+            config: this.config,
+          })
+        );
+      });
+    }
+  }
+}

package/addon/components/table-of-contents-plugin/{inline-components → ember-nodes}/outline.hbs

@@ -6,12 +6,12 @@
         {{! template-lint-disable no-capital-arguments }}
         @block={{true}}
         @skin='link-secondary'
-        onclick={{fn @onEntryClick outlineEntry.node}}
+        onclick={{(fn @onEntryClick outlineEntry.pos)}}
       >
         {{outlineEntry.content}}
       </AuButton>
       {{#if outlineEntry.children}}
-        <TableOfContentsPlugin::InlineComponents::Outline
+        <TableOfContentsPlugin::EmberNodes::Outline
           @entries={{outlineEntry.children}}
           @onEntryClick={{@onEntryClick}}
         />

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

@@ -0,0 +1,9 @@
+<div class='au-u-background-gray-100 au-u-padding-tiny table-of-contents'>
+  <h3>{{t "table-of-contents-plugin.title"}}</h3>
+  {{#if this.outline}}
+    <TableOfContentsPlugin::EmberNodes::Outline
+      @entries={{this.outline.entries}}
+      @onEntryClick={{this.moveToPosition}}
+    />
+  {{/if}}
+</div>

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

@@ -0,0 +1,95 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { TableOfContentsConfig } from '../../../constants';
+import { PNode } from '@lblod/ember-rdfa-editor';
+import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { Selection } from '@lblod/ember-rdfa-editor';
+import { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+type OutlineEntry = {
+  content: string;
+  pos: number;
+  children?: OutlineEntry[];
+};
+export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
+  get config() {
+    return this.args.node.attrs['config'] as TableOfContentsConfig;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get outline() {
+    const entries = this.extractOutline({
+      node: this.controller.state.doc,
+      pos: -1,
+    });
+    return {
+      entries,
+    };
+  }
+
+  extractOutline({ node, pos }: { node: PNode; pos: number }): OutlineEntry[] {
+    let result: OutlineEntry[] = [];
+    let parent: OutlineEntry | undefined;
+    const properties = getRdfaAttribute(node, 'property').pop();
+    const resource = getRdfaAttribute(node, 'resource').pop();
+    if (properties && resource) {
+      for (const tocConfigEntry of this.config) {
+        if (
+          tocConfigEntry.sectionPredicate.some((pred) =>
+            properties.includes(pred)
+          )
+        ) {
+          if (typeof tocConfigEntry.value === 'string') {
+            parent = { content: tocConfigEntry.value, pos };
+            break;
+          } else {
+            const range = [
+              ...this.args.controller.datastore
+                .match(`>${resource}`, `>${tocConfigEntry.value.predicate}`)
+                .asPredicateNodeMapping()
+                .nodes(),
+            ][0];
+            if (range) {
+              const node = unwrap(this.controller.state.doc.nodeAt(range.from));
+              parent = {
+                content: node.textContent,
+                pos: range.from,
+              };
+              break;
+            }
+          }
+        }
+      }
+    }
+    const subResults: OutlineEntry[] = [];
+    node.forEach((child, offset) => {
+      subResults.push(
+        ...this.extractOutline({ node: child, pos: pos + 1 + offset })
+      );
+    });
+    if (parent) {
+      parent.children = subResults;
+      result = [parent];
+    } else {
+      result = subResults;
+    }
+    return result;
+  }
+
+  @action
+  moveToPosition(pos: number) {
+    this.controller.withTransaction((tr) => {
+      const resolvedPos = tr.doc.resolve(pos);
+      const selection = Selection.near(resolvedPos, 1);
+      if (selection) {
+        tr.setSelection(selection);
+        tr.scrollIntoView();
+      }
+      return tr;
+    });
+    this.controller.focus();
+  }
+}

package/addon/components/template-variable-plugin/template-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>
@@ -31,4 +32,4 @@
     </c.content>
   </AuCard>
 {{/if}}
-
+</div>