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

package/addon/components/{citaten-plugin/citations/search-modal.js → citation-plugin/citations/search-modal.ts}

@@ -1,17 +1,26 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { task, timeout } from 'ember-concurrency';
+import { restartableTask, 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';
+  LEGISLATION_TYPES,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legislation-types';
+import {
+  Article,
+  Decision,
+  fetchDecisions,
+} from '../../../plugins/citation-plugin/utils/vlaamse-codex';
+import IntlService from 'ember-intl/services/intl';
+import {
+  Option,
+  unwrap,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
-function getISODate(date) {
+function getISODate(date: Option<Date>): string | null {
   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
@@ -24,27 +33,42 @@ function getISODate(date) {
   }
 }
 
-export default class EditorPluginsCitationsSearchModalComponent extends Component {
-  @service intl;
-  @tracked text;
-  @tracked textAfterTimeout;
+interface Args {
+  selectedDecision: Decision;
+  legislationTypeUri: string;
+  text: string;
+  insertDecisionCitation: (decision: Decision) => void;
+  insertArticleCitation: (decision: Decision, article: Article) => void;
+  closeModal: (legislationTypeUri?: string, text?: string) => void;
+}
+
+export default class EditorPluginsCitationsSearchModalComponent extends Component<Args> {
+  @service declare intl: IntlService;
   // Vlaamse Codex currently doesn't contain captions and content of decisions
   // @tracked isEnabledSearchCaption = false
   // @tracked isEnabledSearchContent = false
-  @tracked legislationTypeUri;
+  @tracked legislationTypeUri: string;
   @tracked pageNumber = 0;
   @tracked pageSize = 5;
-  @tracked totalCount;
+  @tracked totalCount = 0;
   @tracked decisions = [];
-  @tracked error;
-  @tracked selectedDecision;
-  @tracked documentDateFrom = null;
-  @tracked documentDateTo = null;
-  @tracked publicationDateFrom = null;
-  @tracked publicationDateTo = null;
+  @tracked error: unknown;
+  @tracked selectedDecision: Decision | null;
+  @tracked documentDateFrom: Date | null = null;
+  @tracked documentDateTo: Date | null = null;
+  @tracked publicationDateFrom: Date | null = null;
+  @tracked publicationDateTo: Date | null = null;
+  @tracked inputSearchText: string | null = null;
   minDate = new Date('1930-01-01T12:00:00');
   maxDate = new Date(`${new Date().getFullYear() + 10}-01-01T12:00:00`);
 
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+    this.selectedDecision = this.args.selectedDecision;
+    this.legislationTypeUri =
+      this.args.legislationTypeUri || LEGISLATION_TYPES['decreet'];
+  }
+
   get datePickerLocalization() {
     return {
       buttonLabel: this.intl.t('auDatePicker.buttonLabel'),
@@ -62,14 +86,6 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     };
   }
 
-  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);
   }
@@ -78,31 +94,44 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     const found = LEGISLATION_TYPE_CONCEPTS.find(
       (c) => c.value === this.legislationTypeUri
     );
-    return capitalize(found ? found.label : LEGISLATION_TYPE_CONCEPTS[0].label);
+    return capitalize(
+      found ? found.label : unwrap(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,
-  ]);
+  get text() {
+    return this.args.text;
+  }
+
+  get searchText() {
+    return this.inputSearchText ?? this.text;
+  }
+
+  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;
+  }
 
-  @task({ restartable: true })
-  *resourceSearch() {
+  resourceSearch = restartableTask(async () => {
+    await timeout(500);
     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 words = this.searchText.match(/\S+/g) || [];
       const filter = {
         type: this.legislationTypeUri,
         documentDateFrom: getISODate(this.documentDateFrom),
@@ -110,12 +139,11 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
         publicationDateFrom: getISODate(this.publicationDateFrom),
         publicationDateTo: getISODate(this.publicationDateTo),
       };
-      const results = yield fetchDecisions(
+      const results = await fetchDecisions(
         words,
         filter,
         this.pageNumber,
-        this.pageSize,
-        signal
+        this.pageSize
       );
       this.totalCount = results.totalCount;
       return results.decisions;
@@ -128,72 +156,82 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
       //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;
+  decisionResource = trackedTask(this, this.resourceSearch, () => [
+    this.searchText,
+    this.legislationTypeUri,
+    this.pageSize,
+    this.pageNumber,
+    this.documentDateFrom,
+    this.documentDateTo,
+    this.publicationDateFrom,
+    this.publicationDateTo,
+  ]);
+
+  @action
+  setInputSearchText(event: InputEvent) {
+    this.inputSearchText = (event.target as HTMLInputElement).value;
   }
 
   @action
-  selectLegislationType(type) {
+  selectLegislationType(type: string) {
     type = type.toLowerCase();
     const found = LEGISLATION_TYPE_CONCEPTS.find(
       (c) => c.label.toLowerCase() === type
     );
     this.legislationTypeUri = found
       ? found.value
-      : LEGISLATION_TYPE_CONCEPTS[0].value;
+      : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).value;
   }
 
   @action
-  updateDocumentDateFrom(isoDate, date) {
+  updateDocumentDateFrom(_isoDate: unknown, date: Date) {
     this.documentDateFrom = date;
   }
 
   @action
-  updateDocumentDateTo(isoDate, date) {
+  updateDocumentDateTo(_isoDate: unknown, date: Date) {
     this.documentDateTo = date;
   }
 
   @action
-  updatePublicationDateFrom(isoDate, date) {
+  updatePublicationDateFrom(_isoDate: unknown, date: Date) {
     this.publicationDateFrom = date;
   }
 
   @action
-  updatePublicationDateTo(isoDate, date) {
+  updatePublicationDateTo(_isoDate: unknown, date: Date) {
     this.publicationDateTo = date;
   }
 
   @action
-  insertDecisionCitation(decision) {
+  async insertDecisionCitation(decision: Decision) {
     this.args.insertDecisionCitation(decision);
-    this.closeModal();
+    await this.closeModal();
   }
 
   @action
-  insertArticleCitation(decision, article) {
+  async insertArticleCitation(decision: Decision, article: Article) {
     this.args.insertArticleCitation(decision, article);
-    this.closeModal();
+    await this.closeModal();
   }
 
   @action
-  closeModal(legislationTypeUri, text) {
-    this.decisionResource.cancel();
+  async closeModal(legislationTypeUri?: string, text?: string) {
+    await this.decisionResource.cancel();
+    this.inputSearchText = null;
     this.args.closeModal(legislationTypeUri, text);
   }
 
   @action
-  closeDecisionDetail() {
-    this.selectedDecision = null;
+  openDecisionDetail(decision: Decision) {
+    this.selectedDecision = decision;
   }
 
   @action
-  openDecisionDetail(decision) {
-    this.selectedDecision = decision;
+  closeDecisionDetail() {
+    this.selectedDecision = null;
   }
 
   // Pagination
@@ -207,37 +245,26 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
   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;
+function getLocalizedMonths(
+  intl: IntlService,
+  monthFormat: Intl.DateTimeFormatOptions['month'] = '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: IntlService,
+  weekdayFormat: Intl.DateTimeFormatOptions['weekday'] = '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/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 { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import { insertHtml } from '@lblod/ember-rdfa-editor/commands/insert-html-command';
+import {
+  DEFAULT_VARIABLE_TYPES,
+  VariableType,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/insert-variable-plugin/utils/constants';
+import { CodeList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/insert-variable-plugin/utils/fetch-data';
+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 = DEFAULT_VARIABLE_TYPES[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 '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin/commands';
+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;
+    }
+  }
+}