@lblod/ember-rdfa-editor-lblod-plugins 0.3.1 → 0.4.0

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

@@ -0,0 +1,125 @@
+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 { INVISIBLE_SPACE } from '@lblod/ember-rdfa-editor/model/util/constants';
+import { defaultVariableTypes } from '../../utils/variable-plugins/default-variable-types';
+
+export default class EditorPluginsInsertCodelistCardComponent extends Component {
+  @tracked variablesArray;
+  @tracked selectedVariable;
+  @tracked showCard = true;
+  @tracked hasSubtype = false;
+  @tracked selectedSubtype;
+  @tracked subtypes;
+
+  constructor() {
+    super(...arguments);
+    const { publisher, variableTypes, defaultEndpoint } =
+      this.args.widgetArgs.options || {};
+    this.publisher = publisher;
+    this.endpoint = defaultEndpoint;
+    let variableTypesSelectedByUser = variableTypes ?? [
+      'text',
+      'number',
+      'date',
+      'location',
+      'codelist',
+    ];
+
+    const variablesArray = [];
+    for (let type of variableTypesSelectedByUser) {
+      if (typeof type === 'string') {
+        const defaultVariable = defaultVariableTypes[type];
+        if (defaultVariable) {
+          variablesArray.push(defaultVariable);
+        } else {
+          console.warn(
+            `Template Variable Plugin: variable type ${type} not found in the default variable types`
+          );
+        }
+      } else {
+        variablesArray.push(type);
+      }
+    }
+    this.variablesArray = variablesArray;
+    this.args.controller.onEvent('selectionChanged', this.selectionChanged);
+  }
+
+  @action
+  insert() {
+    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>
+    `;
+    this.args.controller.executeCommand(
+      'insert-html',
+      htmlToInsert,
+      this.args.controller.selection.lastRange
+    );
+    this.args.controller.executeCommand(
+      'insert-text',
+      INVISIBLE_SPACE,
+      this.args.controller.selection.lastRange
+    );
+    this.selectedVariableType = undefined;
+    this.selectedCodelist = undefined;
+    this.isCodelist = false;
+  }
+
+  @action
+  updateSelectedVariable(variable) {
+    this.selectedVariable = variable;
+    if (variable.fetchSubtypes) {
+      this.fetchSubtypes.perform(variable.fetchSubtypes);
+      this.hasSubtype = true;
+    } else {
+      this.hasSubtype = false;
+    }
+  }
+
+  @task
+  *fetchSubtypes(fetchFunction) {
+    const subtypes = yield fetchFunction(this.endpoint, this.publisher);
+    this.subtypes = subtypes;
+  }
+
+  @action
+  updateSubtype(subtype) {
+    this.selectedSubtype = subtype;
+  }
+
+  @action
+  selectionChanged() {
+    const currentSelection = this.args.controller.selection.lastRange;
+    if (!currentSelection) {
+      return;
+    }
+    this.showCard = false;
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      currentSelection,
+      'rangeIsInside'
+    );
+    const mapping = limitedDatastore
+      .match(null, 'a', 'ext:Mapping')
+      .asQuads()
+      .next().value;
+    if (mapping) {
+      this.showCard = false;
+    } else {
+      this.showCard = true;
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+{{#if this.showCard}}
+  <AuCard @shadow={{true}} @size="flush" as |c|>
+    <c.header class="au-u-hidden-visually">
+      <AuHeading @level="3" @skin="6">{{t "date-plugin.card.title"}}</AuHeading>
+    </c.header>
+    <c.content class="au-o-box au-o-box--small">
+      <div class="au-o-flow au-o-flow--small">
+        <RdfaDatePlugin::RdfaDateTimePicker
+          @onChange={{this.changeDate}}
+          @value={{this.dateValue}}
+          @onlyDate={{this.onlyDate}}/>
+        {{#unless this.dateInDocument}}
+          <AuFormRow class="au-u-margin-top">
+            <AuButton {{on 'click' this.modifyDate}}>
+              {{if this.onlyDate (t "date-plugin.card.insert-date") (t "date-plugin.card.insert-datetime")}}
+            </AuButton>
+          </AuFormRow>
+        {{/unless}}
+      </div>
+    </c.content>
+  </AuCard>
+{{/if}}

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

@@ -0,0 +1,64 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class RdfaDatePluginCardComponent extends Component {
+  @tracked showCard = false;
+  @tracked dateValue;
+  @tracked dateElement;
+  @tracked dateInDocument;
+  @tracked onlyDate;
+
+  constructor() {
+    super(...arguments);
+    this.args.controller.onEvent(
+      'selectionChanged',
+      this.selectionChangedHandler
+    );
+  }
+
+  @action
+  modifyDate() {
+    this.args.controller.executeCommand(
+      'modify-date',
+      this.args.controller,
+      this.dateElement,
+      this.dateValue,
+      this.onlyDate
+    );
+  }
+
+  @action
+  changeDate(date) {
+    this.dateValue = date;
+    if (this.dateInDocument) this.modifyDate();
+  }
+
+  @action
+  selectionChangedHandler() {
+    const selectedRange = this.args.controller.selection.lastRange;
+    if (!selectedRange) {
+      return;
+    }
+    const selectionParent = selectedRange.start.parent;
+    const datatype = selectionParent.attributeMap.get('datatype');
+    if (datatype === 'xsd:dateTime') {
+      this.showCard = true;
+      this.dateElement = selectionParent;
+      const dateContent = selectionParent.attributeMap.get('content');
+      this.dateValue = dateContent ? new Date(dateContent) : new Date();
+      this.dateInDocument = !!dateContent;
+      this.onlyDate = false;
+    } else if (datatype === 'xsd:date') {
+      this.showCard = true;
+      this.dateElement = selectionParent;
+      const dateContent = selectionParent.attributeMap.get('content');
+      this.dateValue = dateContent ? new Date(dateContent) : new Date();
+      this.dateInDocument = !!dateContent;
+      this.onlyDate = true;
+    } else {
+      this.showCard = false;
+      this.dateElement = undefined;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+<AuList::Item>
+  <AuButton
+    @icon="add"
+    @iconAlignment="left"
+    @skin="link"
+    {{on 'click' this.insertDate}}>
+    {{t "date-plugin.insert.date"}}
+  </AuButton>
+</AuList::Item>
+<AuList::Item>
+  <AuButton
+    @icon="add"
+    @iconAlignment="left"
+    @skin="link"
+    {{on 'click' this.insertDateTime}}>
+    {{t "date-plugin.insert.datetime"}}
+  </AuButton>
+</AuList::Item>

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

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class RdfaDatePluginInsertComponent extends Component {
+  @action
+  insertDate() {
+    const selection = this.args.controller.selection.lastRange;
+    this.args.controller.executeCommand(
+      'insert-html',
+      '<span datatype="xsd:date" property="ext:content">${date}</span>',
+      selection
+    );
+  }
+
+  @action
+  insertDateTime() {
+    const selection = this.args.controller.selection.lastRange;
+    this.args.controller.executeCommand(
+      'insert-html',
+      '<span datatype="xsd:dateTime" property="ext:content">${date and time}</span>',
+      selection
+    );
+  }
+}

package/addon/components/rdfa-date-plugin/rdfa-date-time-picker.hbs

@@ -0,0 +1,21 @@
+<AuFormRow>
+  <AuDatePicker
+    @onChange={{this.onChangeDate}}
+    @value={{this.date}}
+    @label={{t "date-plugin.card.label"}}
+    @localization={{this.datePickerLocalization}}/>
+</AuFormRow>
+{{#unless @onlyDate}}
+  <AuFormRow>
+    <AuTimePicker
+      @hoursLabel={{t "date-plugin.card.hours"}}
+      @minutesLabel={{t "date-plugin.card.minutes"}}
+      @nowLabel={{t "date-plugin.card.now"}}
+      @hours={{this.hours}}
+      @minutes={{this.minutes}}
+      @showSeconds={{false}}
+      @showNow={{true}}
+      @onChange={{this.onChangeTime}}
+      />
+  </AuFormRow>
+{{/unless}}

package/addon/components/rdfa-date-plugin/rdfa-date-time-picker.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { localCopy } from 'tracked-toolbox';
+
+export default class RdfaDateTimePicker extends Component {
+  @service intl;
+  @localCopy('args.value') date;
+
+  get hours() {
+    return this.date.getHours();
+  }
+
+  get minutes() {
+    return this.date.getMinutes();
+  }
+
+  get datePickerLocalization() {
+    return {
+      buttonLabel: this.intl.t('auDatePicker.buttonLabel'),
+      selectedDateMessage: this.intl.t('auDatePicker.selectedDateMessage'),
+      prevMonthLabel: this.intl.t('auDatePicker.prevMonthLabel'),
+      nextMonthLabel: this.intl.t('auDatePicker.nextMonthLabel'),
+      monthSelectLabel: this.intl.t('auDatePicker.monthSelectLabel'),
+      yearSelectLabel: this.intl.t('auDatePicker.yearSelectLabel'),
+      closeLabel: this.intl.t('auDatePicker.closeLabel'),
+      keyboardInstruction: this.intl.t('auDatePicker.keyboardInstruction'),
+      calendarHeading: this.intl.t('auDatePicker.calendarHeading'),
+      dayNames: getLocalizedDays(this.intl),
+      monthNames: getLocalizedMonths(this.intl),
+      monthNamesShort: getLocalizedMonths(this.intl, 'short'),
+    };
+  }
+
+  @action
+  onChangeDate(isoDate, date) {
+    let wasDateInputCleared = !date;
+    if (!wasDateInputCleared) {
+      if (!this.date) {
+        this.date = new Date();
+      }
+      this.date.setDate(date.getDate());
+      this.date.setMonth(date.getMonth());
+      this.date.setFullYear(date.getFullYear());
+      this.args.onChange(this.date);
+    }
+  }
+
+  @action
+  onChangeTime(timeObject) {
+    if (!this.date) this.date = new Date();
+    this.date.setHours(timeObject.hours);
+    this.date.setMinutes(timeObject.minutes);
+    this.args.onChange(this.date);
+  }
+}
+
+function getLocalizedMonths(intl, monthFormat = 'long') {
+  let someYear = 2021;
+  return [...Array(12).keys()].map((monthIndex) => {
+    let date = new Date(someYear, monthIndex);
+    return intl.formatDate(date, { month: monthFormat });
+  });
+}
+
+function getLocalizedDays(intl, weekdayFormat = 'long') {
+  let someSunday = new Date('2021-01-03');
+  return [...Array(7).keys()].map((index) => {
+    let weekday = new Date(someSunday.getTime());
+    weekday.setDate(someSunday.getDate() + index);
+    return intl.formatDate(weekday, { weekday: weekdayFormat });
+  });
+}

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

@@ -0,0 +1,44 @@
+<tr class="au-c-data-table__detail">
+  <td colspan="5" class="au-o-flow au-o-flow--small">
+    <AuHeading @level="6" @skin="6">Voeg maatregel in:</AuHeading>
+    <p>
+      <AuPill>
+        <RoadsignRegulationPlugin::MeasureTemplate @measure={{@measure.uri}} @template={{@measure.template}} />
+      </AuPill>
+    </p>
+    {{#if this.isPotentiallyZonal}}
+      <AuHeading @level="6" @skin="6">Selecteer zonale geldigheid:</AuHeading>
+      <div class="au-c-form">
+        <ul>
+          <li>
+            <AuControlRadio @label="Zonaal" @name="zonal" @value={{this.ZONAL_URI}} @identifier="zonal" {{on 'change' this.changeZonality}} />
+          </li>
+          <li>
+            <AuControlRadio @label="Niet zonaal" @name="zonal" @value={{this.NON_ZONAL_URI}} @identifier="non-zonal" {{on 'change' this.changeZonality}} />
+          </li>
+        </ul>
+      </div>
+    {{/if}}
+    {{#if @measure.temporal}}
+      <AuHeading @level="6" @skin="6">Variabele signalisatie:</AuHeading>
+      <div class="au-c-form">
+        <ul>
+          <li>
+            <AuControlRadio @label="Variabel" @name="temporal" @value={{true}} @identifier="true" {{on 'change' this.changeTemporality}} />
+          </li>
+          <li>
+            <AuControlRadio @label="Niet variabel" @name="temporal" @value={{false}} @identifier="false" {{on 'change' this.changeTemporality}} />
+          </li>
+        </ul>
+      </div>
+    {{/if}}
+    <AuButtonGroup>
+      <AuButton {{on 'click' this.insert}} @disabled={{this.insertButtonDisabled}}>
+        Voeg in
+      </AuButton>
+      <AuButton @skin="secondary" {{on "click" this.unselectRow }}>
+        Annuleer
+      </AuButton>
+    </AuButtonGroup>
+  </td>
+</tr>

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

@@ -0,0 +1,38 @@
+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';
+
+export default class ExpandedMeasureComponent extends Component {
+  @tracked zonalityValue;
+  @tracked temporalValue;
+  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(e) {
+    this.zonalityValue = e.target.value;
+  }
+  @action
+  changeTemporality(e) {
+    this.temporalValue = e.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.hbs

@@ -0,0 +1,5 @@
+{{#if @limitText}}
+  {{limit-text this.template}}
+{{else}}
+  {{this.template}}
+{{/if}}

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

@@ -0,0 +1,30 @@
+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';
+
+export default class MeasureTemplateComponent extends Component {
+  @service roadsignRegistry;
+  @tracked template = '';
+
+  constructor() {
+    super(...arguments);
+    this.template = this.args.template;
+    this.fetchData.perform();
+  }
+
+  @task
+  *fetchData() {
+    const instructions =
+      yield this.roadsignRegistry.getInstructionsForMeasure.perform(
+        this.args.measure
+      );
+    let template = includeInstructions(
+      this.args.template,
+      instructions,
+      this.args.annotated
+    );
+    this.template = template;
+  }
+}

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

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

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

@@ -0,0 +1,101 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+/**
+ * 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',
+];
+
+export default class RoadsignRegulationCard extends Component {
+  @tracked modalOpen;
+  @tracked showCard = false;
+
+  constructor() {
+    super(...arguments);
+    this.args.controller.onEvent('selectionChanged', this.selectionChanged);
+  }
+
+  @action
+  toggleModal() {
+    this.modalOpen = !this.modalOpen;
+  }
+
+  @action
+  insert(html) {
+    const selectedRange = this.args.controller.selection.lastRange;
+    if (!selectedRange) {
+      return;
+    }
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      selectedRange,
+      'rangeIsInside'
+    );
+    const besluit = limitedDatastore
+      .match(null, 'a')
+      .transformDataset((dataset, termConverter) => {
+        return dataset.filter((quad) =>
+          acceptedTypes
+            .map((type) => termConverter(type).value)
+            .includes(quad.object.value)
+        );
+      })
+      .asSubjectNodes()
+      .next().value;
+    const besluitNode = [...besluit.nodes][0];
+    let articleContainerNode;
+    for (let child of besluitNode.children) {
+      if (child.attributeMap.get('property') === 'prov:value') {
+        articleContainerNode = child;
+        break;
+      }
+    }
+    const range = this.args.controller.rangeFactory.fromInNode(
+      articleContainerNode,
+      articleContainerNode.getMaxOffset(),
+      articleContainerNode.getMaxOffset()
+    );
+    this.args.controller.executeCommand('insert-html', html, range);
+  }
+
+  @action
+  selectionChanged() {
+    const selectedRange = this.args.controller.selection.lastRange;
+    if (!selectedRange) {
+      return;
+    }
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      selectedRange,
+      'rangeIsInside'
+    );
+    const besluit = limitedDatastore
+      .match(null, 'a')
+      .transformDataset((dataset, termConverter) => {
+        return dataset.filter((quad) =>
+          acceptedTypes
+            .map((type) => termConverter(type).value)
+            .includes(quad.object.value)
+        );
+      })
+      .asQuads()
+      .next().value;
+    if (besluit) {
+      this.showCard = true;
+      this.besluitUri = besluit.subject.value;
+    } else {
+      this.showCard = false;
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+<AuModal
+  class="au-c-modal--flush"
+  @size="large"
+  @modalTitle="Mobiliteitsmaatregel toevoegen"
+  @modalOpen={{@modalOpen}}
+  @closeModal={{this.closeModal}} as |Modal| >
+  <Modal.Body>
+    <div class="au-c-body-container">
+      <div class="au-o-box au-u-background-gray-100">
+        <div class="au-o-grid au-o-grid--tiny au-o-grid--bottom">
+          <div class="au-o-grid__item au-u-1-4">
+            <AuLabel>
+              Filter op type
+            </AuLabel>
+            <PowerSelect
+              @renderInPlace={{true}}
+              @options={{this.typeOptions}}
+              @verticalPosition="below"
+              @searchEnabled={{true}}
+              @selected={{or this.typeSelected this.categorySelected}}
+              @allowClear={{true}}
+              @onChange={{this.selectTypeOrCategory}}
+              as |option|>
+              {{option.label}}
+            </PowerSelect>
+          </div>
+          <div class="au-o-grid__item au-u-1-4">
+            <AuLabel>
+              Filter op code
+            </AuLabel>
+            <PowerSelect
+              @renderInPlace={{true}}
+              @verticalPosition="below"
+              @searchEnabled={{true}}
+              @search={{this.searchCodes}}
+              @selected={{this.selectedCode}}
+              @allowClear={{true}}
+              @onChange={{this.changeCode}}
+              as |option|>
+              {{option.label}}
+            </PowerSelect>
+          </div>
+            <div class="au-o-grid__item au-u-1-4">
+            <AuLabel>
+              Combineer met code
+            </AuLabel>
+            <PowerSelectMultiple
+              @renderInPlace={{true}}
+              @verticalPosition="below"
+              @searchEnabled={{true}}
+              @searchField="label"
+              @selected={{this.selectedCodeCombination}}
+              @allowClear={{true}}
+              @onChange={{this.changeCodeCombination}}
+              @options={{this.codeCombinationOptions}}
+              @disabled={{not this.selectedCode}}
+            as |option|>
+              {{option.label}}
+            </PowerSelectMultiple>
+          </div>
+          <div class="au-o-grid__item au-u-1-4">
+            <AuLabel>
+              Filter op zonale geldigheid
+            </AuLabel>
+            <PowerSelect
+              @renderInPlace={{true}}
+              @options={{this.zonalityOptions}}
+              @verticalPosition="below"
+              @searchEnabled={{false}}
+              @selected={{this.zonalitySelected}}
+              @allowClear={{true}}
+              @onChange={{this.selectZonality}}
+              as |option|>
+              {{option.label}}
+            </PowerSelect>
+          </div>
+        </div>
+      </div>
+      <div class="au-c-body-container">
+        <RoadsignRegulationPlugin::RoadsignsTable
+          @content={{this.tableData}}
+          @isLoading={{this.fetchSigns.isRunning}}
+          @insert={{this.insertHtml}}
+          @count={{this.count}}
+          @goToPage={{this.goToPage}}
+          @pageSize={{this.pageSize}}
+          @pageStart={{this.pageStart}}
+        />
+      </div>
+    </div>
+  </Modal.Body>
+</AuModal>