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

package/addon/components/citaten-plugin/citations/search-modal.js

@@ -0,0 +1,244 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { task, timeout } from 'ember-concurrency';
+import { inject as service } from '@ember/service';
+import { capitalize } from '@ember/string';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import {
+  LEGISLATION_TYPES,
+  LEGISLATION_TYPE_CONCEPTS,
+} from '../../../utils/legislation-types';
+import { fetchDecisions } from '../../../utils/vlaamse-codex';
+
+function getISODate(date) {
+  if (date) {
+    // Flatpickr captures the date in local time. Hence date.toISOString() may return the day before the selected date
+    // E.g. selected date 2020-04-15 00:00:00 GMT+0200 will become 2020-04-14 22:00:00 UTC
+    // We will pretend the selected date is UTC because that's what's meant as date for filtering
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    return `${date.getFullYear()}-${month}-${day}`;
+  } else {
+    return null;
+  }
+}
+
+export default class EditorPluginsCitationsSearchModalComponent extends Component {
+  @service intl;
+  @tracked text;
+  @tracked textAfterTimeout;
+  // Vlaamse Codex currently doesn't contain captions and content of decisions
+  // @tracked isEnabledSearchCaption = false
+  // @tracked isEnabledSearchContent = false
+  @tracked legislationTypeUri;
+  @tracked pageNumber = 0;
+  @tracked pageSize = 5;
+  @tracked totalCount;
+  @tracked decisions = [];
+  @tracked error;
+  @tracked selectedDecision;
+  @tracked documentDateFrom = null;
+  @tracked documentDateTo = null;
+  @tracked publicationDateFrom = null;
+  @tracked publicationDateTo = null;
+  minDate = new Date('1930-01-01T12:00:00');
+  maxDate = new Date(`${new Date().getFullYear() + 10}-01-01T12:00:00`);
+
+  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'),
+    };
+  }
+
+  constructor() {
+    super(...arguments);
+    this.selectedDecision = this.args.selectedDecision;
+    this.legislationTypeUri =
+      this.args.legislationTypeUri || LEGISLATION_TYPES['decreet'];
+    this.text = this.args.text;
+  }
+
+  get legislationTypes() {
+    return Object.keys(LEGISLATION_TYPES).map(capitalize);
+  }
+
+  get legislationSelected() {
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.value === this.legislationTypeUri
+    );
+    return capitalize(found ? found.label : LEGISLATION_TYPE_CONCEPTS[0].label);
+  }
+
+  decisionResource = trackedTask(this, this.resourceSearch, () => [
+    this.textAfterTimeout,
+    this.legislationTypeUri,
+    this.pageSize,
+    this.pageNumber,
+    this.documentDateFrom,
+    this.documentDateTo,
+    this.publicationDateFrom,
+    this.publicationDateTo,
+  ]);
+
+  @task({ restartable: true })
+  *resourceSearch() {
+    this.error = null;
+    yield undefined; //To prevent retriggering because of the use of this.text later.
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    try {
+      // Split search string by grouping on non-whitespace characters
+      // This probably needs to be more complex to search on group of words
+      const words =
+        (this.textAfterTimeout || this.text || '').match(/\S+/g) || [];
+      const filter = {
+        type: this.legislationTypeUri,
+        documentDateFrom: getISODate(this.documentDateFrom),
+        documentDateTo: getISODate(this.documentDateTo),
+        publicationDateFrom: getISODate(this.publicationDateFrom),
+        publicationDateTo: getISODate(this.publicationDateTo),
+      };
+      const results = yield fetchDecisions(
+        words,
+        filter,
+        this.pageNumber,
+        this.pageSize,
+        signal
+      );
+      this.totalCount = results.totalCount;
+      return results.decisions;
+    } catch (e) {
+      console.warn(e); // eslint-ignore-line no-console
+      this.totalCount = 0;
+      this.error = e;
+      return [];
+    } finally {
+      //Abort all requests now that this task has either successfully finished or has been cancelled
+      abortController.abort();
+    }
+  }
+
+  @task({ restartable: true })
+  *updateSearch() {
+    yield timeout(500);
+    this.textAfterTimeout = this.text;
+    this.pageNumber = 0;
+  }
+
+  @action
+  selectLegislationType(type) {
+    type = type.toLowerCase();
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.label.toLowerCase() === type
+    );
+    this.legislationTypeUri = found
+      ? found.value
+      : LEGISLATION_TYPE_CONCEPTS[0].value;
+  }
+
+  @action
+  updateDocumentDateFrom(isoDate, date) {
+    this.documentDateFrom = date;
+  }
+
+  @action
+  updateDocumentDateTo(isoDate, date) {
+    this.documentDateTo = date;
+  }
+
+  @action
+  updatePublicationDateFrom(isoDate, date) {
+    this.publicationDateFrom = date;
+  }
+
+  @action
+  updatePublicationDateTo(isoDate, date) {
+    this.publicationDateTo = date;
+  }
+
+  @action
+  insertDecisionCitation(decision) {
+    this.args.insertDecisionCitation(decision);
+    this.closeModal();
+  }
+
+  @action
+  insertArticleCitation(decision, article) {
+    this.args.insertArticleCitation(decision, article);
+    this.closeModal();
+  }
+
+  @action
+  closeModal(legislationTypeUri, text) {
+    this.decisionResource.cancel();
+    this.args.closeModal(legislationTypeUri, text);
+  }
+
+  @action
+  closeDecisionDetail() {
+    this.selectedDecision = null;
+  }
+
+  @action
+  openDecisionDetail(decision) {
+    this.selectedDecision = decision;
+  }
+
+  // Pagination
+
+  @action
+  previousPage() {
+    --this.pageNumber;
+  }
+
+  @action
+  nextPage() {
+    ++this.pageNumber;
+  }
+
+  get rangeStart() {
+    return this.pageNumber * this.pageSize + 1;
+  }
+
+  get rangeEnd() {
+    const end = this.rangeStart + this.pageSize - 1;
+    return end > this.totalCount ? this.totalCount : end;
+  }
+
+  get isFirstPage() {
+    return this.pageNumber == 0;
+  }
+
+  get isLastPage() {
+    return this.rangeEnd == this.totalCount;
+  }
+}
+
+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/citaten-plugin/helpers/alert-load-error.hbs

@@ -0,0 +1,21 @@
+<AuAlert
+  @alertTitle="{{t "citaten-plugin.citaten-plugin.alert.error-title"}}"
+  @alertSkin="error"
+  @alertIcon="alert-triangle"
+  @alertSize="{{if @fullSize "default" "small"}}"
+  @closable={{false}}
+  ...attributes>
+  <p>{{t "citaten-plugin.alert.error-intro"}}</p>
+  <code class="au-u-error citaten--error-code">{{@error}}</code>
+  <p>
+    {{t "citaten-plugin.alert.error-outro"}}
+    <AuLinkExternal
+      href="mailto:Gelinkt-Notuleren@vlaanderen.be"
+      @icon="mail"
+      @iconAlignment="left">
+      {{!-- template-lint-disable no-bare-strings  --}}
+      Gelinkt-Notuleren@vlaanderen.be
+    </AuLinkExternal>.
+  </p>
+</AuAlert>
+

package/addon/components/citaten-plugin/helpers/alert-no-items.hbs

@@ -0,0 +1,10 @@
+<AuAlert
+  @alertTitle="{{t "citaten-plugin.citaten-plugin.alert.no-results"}}"
+  @alertSkin="warning"
+  @alertIcon="cross"
+  @alertSize="{{if @fullSize "default" "small"}}"
+  @closable={{false}}
+  class="{{unless @fullSize "au-u-margin-small"}}"
+  ...attributes>
+</AuAlert>
+

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

@@ -0,0 +1,17 @@
+{{#each this.snippets as |snippet|}}
+  <AuCard @flex={{true}} @divided={{true}} @expandable={{true}} @shadow={{true}} @isOpenInitially={{true}} @size="small" as |c|>
+    <c.header>
+      <AuHeading @level="3" @skin="6">
+        Document importeren
+      </AuHeading>
+    </c.header>
+    <c.content>
+      <p class="u-spacer--tiny">Er is een <a href="{{snippet.source}}" target="_blank" rel="noopener noreferrer">document</a> beschikbaar</p>
+      <p><strong>Wenst u dit document in te voegen?</strong></p>
+      {{#if this.besluitNode}}
+        <AuButton {{on "click" (fn this.insert snippet 'attachment')}} >Bijlage invoegen</AuButton>
+      {{/if}}
+      <AuButton {{on "click" (fn this.insert snippet)}} >Document invoegen</AuButton>
+    </c.content>
+  </AuCard>
+{{/each}}

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

@@ -0,0 +1,95 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class ImportSnippetPluginCard extends Component {
+  @service importRdfaSnippet;
+  @tracked snippets = [];
+  @tracked besluitNode;
+
+  constructor() {
+    super(...arguments);
+    this.args.controller.onEvent(
+      'selectionChanged',
+      this.selectionChangedHandler
+    );
+  }
+
+  @action
+  selectionChangedHandler() {
+    const { controller } = this.args;
+    const selectedRange = controller.selection.lastRange;
+    if (!selectedRange) {
+      console.info(
+        'Selection did not have a range, skipping handling of the selectionChanged event'
+      );
+      return;
+    }
+    this.snippets = this.importRdfaSnippet.snippetsForType('roadsign');
+    const limitedDatastore = controller.datastore.limitToRange(
+      selectedRange,
+      'rangeIsInside'
+    );
+    const besluit = limitedDatastore
+      .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
+      .asSubjectNodes()
+      .next().value;
+    if (besluit) {
+      this.besluitNode = [...besluit.nodes][0];
+    } else {
+      this.besluitNode = undefined;
+    }
+  }
+
+  @action
+  insert(snippet, type) {
+    const html = this.generateSnippetHtml(snippet, type);
+    let rangeToInsert;
+    if (this.besluitNode) {
+      rangeToInsert = this.args.controller.rangeFactory.fromInNode(
+        this.besluitNode,
+        this.besluitNode.getMaxOffset(),
+        this.besluitNode.getMaxOffset()
+      );
+    } else {
+      rangeToInsert = this.args.controller.selection.lastRange;
+    }
+    if (rangeToInsert) {
+      this.args.controller.executeCommand('insert-html', html, rangeToInsert);
+      this.importRdfaSnippet.removeSnippet(snippet);
+    } else {
+      console.warn('Could not find a range to insert, so we skipped inserting');
+    }
+  }
+
+  generateSnippetHtml(snippet, type) {
+    if (type === 'attachment') {
+      return `
+        <div property="http://lblod.data.gift/vocabularies/editor/isLumpNode">
+          <div
+            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"
+          >
+            Bijlage uit externe bron <a href="${snippet.source}">${
+        new URL(snippet.source).hostname
+      }</a>
+            <div property="http://www.w3.org/ns/prov#value">${
+              snippet.content
+            }</div>
+          </div>
+        </div>
+      `;
+    } else {
+      return `
+        <div property="http://lblod.data.gift/vocabularies/editor/isLumpNode">
+          Bijlage uit externe bron
+          <div property="http://data.europa.eu/eli/ontology#related_to" resource="${snippet.source}">
+              <div property="http://www.w3.org/ns/prov#value">${snippet.content}</div>
+          </div>
+        </div>
+      `;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+{{#if this.showCard}}
+  <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
+    <c.header>
+      <AuHeading @level="3" @skin="6">
+        {{t "insert-variable-plugin.variable"}}
+      </AuHeading>
+    </c.header>
+    <c.content>
+      <PowerSelect
+        @allowClear={{false}}
+        @searchEnabled={{false}}
+        @options={{this.variablesArray}}
+        @selected={{this.selectedVariable}}
+        @onChange={{this.updateSelectedVariable}} as |variable|
+      >
+        {{variable.label}}
+      </PowerSelect>
+      {{#if this.hasSubtype}}
+        <PowerSelect
+          @allowClear={{false}}
+          @searchEnabled={{false}}
+          @options={{this.subtypes}}
+          @selected={{this.selectedSubtype}}
+          @onChange={{this.updateSubtype}} as |subtype|
+        >
+          {{subtype.label}}
+        </PowerSelect>
+      {{/if}}
+      <AuButton {{on 'click' this.insert}} @disabled={{or (not this.selectedVariable) (and this.hasSubtype (not this.selectedSubtype))}}>{{t "insert-variable-plugin.button"}}</AuButton>
+    </c.content>
+  </AuCard>
+{{/if}}
+

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
+    );
+  }
+}