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

package/addon/{utils/vlaamse-codex.js → plugins/citation-plugin/utils/vlaamse-codex.ts}

@@ -1,21 +1,42 @@
-import { LEGISLATION_TYPE_CONCEPTS } from './legislation-types';
-const SPARQL_ENDPOINT = '/codex/sparql/';
+import { LEGISLATION_TYPE_CONCEPTS } from '../../../utils/legislation-types';
 import { warn } from '@ember/debug';
 import { htmlSafe } from '@ember/template';
+import {
+  Option,
+  optionMapOr,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import Ember from 'ember';
+import SafeString = Ember.Handlebars.SafeString;
+
+const SPARQL_ENDPOINT = '/codex/sparql/';
 
 //const SPARQL_ENDPOINT = 'https://codex.opendata.api.vlaanderen.be:8888/sparql';
 
-class Decision {
+interface DecisionArgs {
+  uri: string;
+  legislationTypeUri: Option<string>;
+  title: string | null;
+  publicationDate: string | null;
+  documentDate: string | null;
+}
+
+export class Decision {
+  uri: string;
+  legislationType: { label: string; value: string } | undefined;
+  title: string | null;
+  publicationDate: string | null;
+  documentDate: string | null;
+
   constructor({
     uri,
     legislationTypeUri,
     title,
     publicationDate,
     documentDate,
-  }) {
+  }: DecisionArgs) {
     this.uri = uri;
     this.legislationType = LEGISLATION_TYPE_CONCEPTS.find(
-      (t) => t.value == legislationTypeUri
+      (t) => t.value === legislationTypeUri
     );
     this.title = title;
     this.publicationDate = publicationDate;
@@ -23,15 +44,35 @@ class Decision {
   }
 
   get fullTitle() {
-    return `${this.legislationType.label} ${this.title}`;
+    return `${this.legislationType?.label ?? ''} ${this.title ?? ''}`;
   }
 }
 
-class Article {
-  constructor({ uri, number, content, dateInForce, dateNoLongerInForce }) {
+interface ArticleArgs {
+  uri: string;
+  number?: number;
+  content: string | null;
+  dateInForce: string | null;
+  dateNoLongerInForce: string | null;
+}
+
+export class Article {
+  uri: string;
+  number?: number;
+  content: SafeString | null;
+  dateInForce: string | null;
+  dateNoLongerInForce: string | null;
+
+  constructor({
+    uri,
+    number,
+    content,
+    dateInForce,
+    dateNoLongerInForce,
+  }: ArticleArgs) {
     this.uri = uri;
     this.number = number;
-    this.content = htmlSafe(content);
+    this.content = optionMapOr(null, htmlSafe, content);
     this.dateInForce = dateInForce;
     this.dateNoLongerInForce = dateNoLongerInForce;
   }
@@ -41,12 +82,12 @@ class Article {
  * flemish codex encodes certain characters as a html character, which breaks our search
  * this is an ugly work around
  */
-function replaceDiacriticsInWord(word) {
+function replaceDiacriticsInWord(word: string): string {
   const characters =
     'Ë À Ì Â Í Ã Î Ä Ï Ç Ò È Ó É Ô Ê Õ Ö ê Ù ë Ú î Û ï Ü ô Ý õ â û ã ÿ ç'.split(
       ' '
     );
-  for (let char of characters) {
+  for (const char of characters) {
     word = word.replace(new RegExp(`${char}`, 'g'), `&#${char.charCodeAt(0)};`);
   }
   return word;
@@ -55,11 +96,19 @@ function replaceDiacriticsInWord(word) {
 //Attempt to memoise on the fetching by stringifying the arguments. This could spare a few fetches.
 //If memoising fails, at least a normal fetch is performed.
 
-const fetchDecisionsMemory = new Map();
+const fetchDecisionsMemory = new Map<string, DecisionCollection>();
+
+export interface QueryFilter {
+  type: string;
+  documentDateFrom?: Option<string>;
+  documentDateTo?: Option<string>;
+  publicationDateFrom?: Option<string>;
+  publicationDateTo?: Option<string>;
+}
 
 async function fetchDecisions(
-  words,
-  filter,
+  words: string[],
+  filter: QueryFilter,
   pageNumber = 0,
   pageSize = 5
   /*abortSignal*/
@@ -83,19 +132,29 @@ async function fetchDecisions(
   if (results) {
     return results;
   } else {
-    const newResults = await fetchDecisionsMemd(...arguments);
+    const newResults = await fetchDecisionsMemo(
+      words,
+      filter,
+      pageNumber,
+      pageSize
+    );
     fetchDecisionsMemory.set(stringArguments, newResults);
     return newResults;
   }
 }
 
-async function fetchDecisionsMemd(
-  words,
-  filter,
+interface DecisionCollection {
+  totalCount: number;
+  decisions: Decision[];
+}
+
+async function fetchDecisionsMemo(
+  words: string[],
+  filter: QueryFilter,
   pageNumber = 0,
   pageSize = 5,
-  abortSignal
-) {
+  abortSignal?: AbortSignal
+): Promise<DecisionCollection> {
   // TBD/NOTE: in the context of a <http://data.europa.eu/eli/ontology#LegalResource>
   // the eli:cites can have either a <http://xmlns.com/foaf/0.1/Document> or <http://data.europa.eu/eli/ontology#LegalResource>
   // as range (see AP https://data.vlaanderen.be/doc/applicatieprofiel/besluit-publicatie/#Rechtsgrond),
@@ -165,7 +224,7 @@ async function fetchDecisionsMemd(
   );
 
   if (totalCount > 0) {
-    const response = await executeQuery(
+    const response = await executeQuery<DecisionBinding>(
       `PREFIX eli: <http://data.europa.eu/eli/ontology#>
 
         SELECT DISTINCT ?expressionUri as ?uri ?title ?publicationDate ?documentDate
@@ -219,15 +278,26 @@ async function fetchDecisionsMemd(
   }
 }
 
-const fetchArticlesMemory = new Map();
+interface Binding<A> {
+  value: A;
+}
+
+interface DecisionBinding {
+  uri: Binding<string>;
+  title: Binding<string>;
+  publicationDate: Binding<string>;
+  documentDate: Binding<string>;
+}
+
+const fetchArticlesMemory = new Map<string, ArticleCollection>();
 
 async function fetchArticles(
-  legalExpression,
-  pageNumber,
-  pageSize,
-  articleFilter
+  legalExpression: string,
+  pageNumber: number,
+  pageSize: number,
+  articleFilter: string
   /*abortSignal*/
-) {
+): Promise<ArticleCollection> {
   //Simpler here, only one way arguments are set up
   const stringArguments = JSON.stringify({
     legalExpression,
@@ -239,19 +309,56 @@ async function fetchArticles(
   if (results) {
     return results;
   } else {
-    const newResults = await fetchArticlesMemd(...arguments);
+    const newResults = await fetchArticlesMemo(
+      legalExpression,
+      pageNumber,
+      pageSize,
+      articleFilter
+    );
     fetchArticlesMemory.set(stringArguments, newResults);
     return newResults;
   }
 }
 
-async function fetchArticlesMemd(
-  legalExpression,
+interface ArticleBinding {
+  count: {
+    value: string;
+  };
+  content?: {
+    value: string;
+  };
+  dateInForce?: {
+    value: string;
+  };
+  dateNoLongerInForce?: {
+    value: string;
+  };
+  article: {
+    value: string;
+  };
+  number?: {
+    value: number;
+  };
+}
+
+interface QueryResponse<B> {
+  results: {
+    bindings: B[];
+  };
+}
+
+interface ArticleCollection {
+  totalCount: number;
+  articles: Article[];
+}
+
+async function fetchArticlesMemo(
+  legalExpression: string,
   pageNumber = 0,
   pageSize = 10,
-  articleFilter,
-  abortSignal
-) {
+  articleFilter: string,
+  abortSignal?: AbortSignal
+): Promise<ArticleCollection> {
   const numberFilter = articleFilter
     ? `FILTER( !BOUND(?number) || CONTAINS(?number, "${articleFilter}"))`
     : '';
@@ -280,7 +387,7 @@ async function fetchArticlesMemd(
   if (totalCount > 0) {
     // ?number has format like "Artikel 12." We parse the number from the string for ordering
     // Second degree ordering on ?numberStr to make sure "Artikel 3/1." comes after "Artikel 3."
-    const response = await executeQuery(
+    const response = await executeQuery<ArticleBinding>(
       `PREFIX eli: <http://data.europa.eu/eli/ontology#>
       PREFIX prov: <http://www.w3.org/ns/prov#>
       PREFIX dct: <http://purl.org/dc/terms/>
@@ -343,7 +450,7 @@ function cleanCaches() {
   fetchArticlesMemory.clear();
 }
 
-function escapeValue(value) {
+function escapeValue(value?: string) {
   if (value) {
     const shadowDomElement = document.createElement('textarea');
     shadowDomElement.innerHTML = value;
@@ -353,14 +460,20 @@ function escapeValue(value) {
   }
 }
 
-function dateValue(value) {
+function dateValue(value?: string): string | null {
   if (value) {
     try {
       return new Intl.DateTimeFormat('nl-BE').format(
         new Date(Date.parse(value))
       );
     } catch (e) {
-      warn(`Error parsing date ${value}: ${e.message}`, {
+      let message: string;
+      if (e instanceof Error) {
+        message = e.message;
+      } else {
+        message = e as string;
+      }
+      warn(`Error parsing date ${value}: ${message}`, {
         id: 'date-parsing-error',
       });
       return null;
@@ -370,12 +483,18 @@ function dateValue(value) {
   }
 }
 
-async function executeCountQuery(query, abortSignal) {
-  const response = await executeQuery(query, abortSignal);
-  return parseInt(response.results.bindings[0].count.value);
+async function executeCountQuery(query: string, abortSignal?: AbortSignal) {
+  const response = await executeQuery<{ count: { value: string } }>(
+    query,
+    abortSignal
+  );
+  return optionMapOr(0, parseInt, response.results.bindings[0]?.count.value);
 }
 
-async function executeQuery(query, abortSignal) {
+async function executeQuery<A>(
+  query: string,
+  abortSignal?: AbortSignal
+): Promise<QueryResponse<A>> {
   const encodedQuery = encodeURIComponent(query.trim());
   const endpoint = `${SPARQL_ENDPOINT}`;
   const response = await fetch(endpoint, {
@@ -389,7 +508,7 @@ async function executeQuery(query, abortSignal) {
   });
 
   if (response.ok) {
-    return response.json();
+    return response.json() as Promise<QueryResponse<A>>;
   } else {
     throw new Error(
       `Request to Vlaamse Codex was unsuccessful: [${response.status}] ${response.statusText}`

package/addon/plugins/import-snippet-plugin.ts

@@ -0,0 +1,6 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor';
+
+export const importSnippetWidget: WidgetSpec = {
+  componentName: 'import-snippet-plugin/card',
+  desiredLocation: 'sidebar',
+};

package/addon/plugins/insert-variable-plugin.ts

@@ -0,0 +1,11 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor';
+
+export function insertVariableWidget(options?: unknown): WidgetSpec {
+  return {
+    componentName: 'insert-variable-plugin/insert-variable-card',
+    desiredLocation: 'sidebar',
+    widgetArgs: {
+      options,
+    },
+  };
+}

package/addon/plugins/rdfa-date-plugin.ts

@@ -0,0 +1,11 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor';
+
+export const rdfaDateCardWidget: WidgetSpec = {
+  componentName: 'rdfa-date-plugin/card',
+  desiredLocation: 'sidebar',
+};
+
+export const rdfaDateInsertWidget: WidgetSpec = {
+  componentName: 'rdfa-date-plugin/insert',
+  desiredLocation: 'insertSidebar',
+};

package/addon/plugins/roadsign-regulation-plugin.ts

@@ -0,0 +1,6 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor';
+
+export const roadSignRegulationWidget: WidgetSpec = {
+  componentName: 'roadsign-regulation-plugin/roadsign-regulation-card',
+  desiredLocation: 'insertSidebar',
+};

package/addon/plugins/standard-template-plugin.ts

@@ -0,0 +1,6 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor';
+
+export const standardTemplateWidget: WidgetSpec = {
+  desiredLocation: 'insertSidebar',
+  componentName: 'standard-template-plugin/card',
+};

package/addon/plugins/table-of-contents-plugin.ts

@@ -0,0 +1,14 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor';
+import { TableOfContentsConfig } from '../constants';
+
+export function tableOfContentsWidget(
+  config?: TableOfContentsConfig
+): WidgetSpec {
+  return {
+    componentName: 'table-of-contents-plugin/card',
+    desiredLocation: 'sidebar',
+    widgetArgs: {
+      config,
+    },
+  };
+}

package/addon/plugins/template-variable-plugin.ts

@@ -0,0 +1,6 @@
+import { WidgetSpec } from '@lblod/ember-rdfa-editor';
+
+export const templateVariableWidget: WidgetSpec = {
+  componentName: 'template-variable-plugin/template-variable-card',
+  desiredLocation: 'sidebar',
+};

package/addon/services/{import-rdfa-snippet.js → import-rdfa-snippet.ts}

@@ -1,25 +1,32 @@
 import Service from '@ember/service';
-import { A } from '@ember/array';
 import ContextScanner from '@lblod/marawa/rdfa-context-scanner';
+import RdfaBlock from '@lblod/marawa/rdfa-block';
+import { tracked } from 'tracked-built-ins';
 
+type RequestParams = {
+  source: string;
+  uri?: string;
+  omitCredentials: boolean | string;
+  mock: boolean | string;
+};
 /*
  * @module editor-import-snippet-plugin
  * @class ImportRdfaSnippet
  * @constructor
  */
-class RdfaSnippet {
-  constructor(source, type, content, blocks) {
-    this.source = source;
-    this.content = content;
-    this.blocks = blocks;
-    this.type = type;
-  }
-
-  get resourceTypeString() {
-    return (this.resourceTypes || []).join(', ');
-  }
+export class RdfaSnippet {
+  constructor(
+    readonly source: string,
+    readonly type: string,
+    readonly content: string,
+    readonly blocks: RdfaBlock[]
+  ) {}
 }
 
+type Error = {
+  source: string;
+  details: string;
+};
 /**
  * Service responsible for fetching and storing a snippet
  *
@@ -33,14 +40,17 @@ class RdfaSnippet {
  * @extends EmberService
  */
 export default class ImportRdfaSnippet extends Service {
-  errors;
+  @tracked errors: Error[];
 
-  snippets;
+  @tracked snippets: RdfaSnippet[];
+
+  contextScanner: ContextScanner;
 
   constructor() {
+    // eslint-disable-next-line prefer-rest-params
     super(...arguments);
-    this.snippets = A();
-    this.errors = A();
+    this.snippets = tracked([]);
+    this.errors = tracked([]);
     this.contextScanner = new ContextScanner();
   }
 
@@ -51,7 +61,7 @@ export default class ImportRdfaSnippet extends Service {
    * @return {String}
    * @public
    */
-  async downloadSnippet(params) {
+  async downloadSnippet(params: RequestParams) {
     const data = await this.getSnippet(params);
     if (data) await this.processSnippet(params, data);
   }
@@ -59,11 +69,10 @@ export default class ImportRdfaSnippet extends Service {
   /**
    * Remove a snippet from the store, typically after using it
    * @method removeSnippet
-   * @param {RdfaSnippet} snippet
    * @return void
    * @public
    */
-  removeSnippet(snippet) {
+  removeSnippet(snippet: RdfaSnippet) {
     const index = this.snippets.indexOf(snippet);
     if (index >= 0) {
       this.snippets.splice(index, 1);
@@ -76,7 +85,7 @@ export default class ImportRdfaSnippet extends Service {
    * @params {String} type
    * @return {Array} array of RdfaSnippets
    */
-  snippetsForType(type) {
+  snippetsForType(type: string) {
     return this.snippets.filter((snippet) => snippet.type === type);
   }
 
@@ -88,7 +97,7 @@ export default class ImportRdfaSnippet extends Service {
    * @result {Response} result from ember fetch call
    * @private
    */
-  async getSnippet(params) {
+  async getSnippet(params: RequestParams): Promise<Response | null> {
     let data = null;
     try {
       const credentials = params.omitCredentials ? 'omit' : 'include';
@@ -98,15 +107,15 @@ export default class ImportRdfaSnippet extends Service {
       });
 
       if (!data) {
-        this.errors.pushObject({
+        this.errors.push({
           source: params.source,
-          details: `No data found for ${params.uri}`,
+          details: `No data found for ${params.uri ?? ''}`,
         });
       }
     } catch (err) {
-      this.errors.pushObject({
+      this.errors.push({
         source: params.source,
-        details: `Error fetching data ${params.uri}: ${err}`,
+        details: `Error fetching data ${params.uri ?? ''}: ${err as string}`,
       });
     }
     return data;
@@ -117,7 +126,7 @@ export default class ImportRdfaSnippet extends Service {
    * currently just a very basic check if a type exists in the snippet.
    * @method determineType
    */
-  determineType(params, snippet, rdfaBlocks) {
+  determineType(rdfaBlocks: RdfaBlock[]): string {
     const triples = rdfaBlocks
       .map((block) => block.context)
       .reduce((prevValue, next) => [...prevValue, ...next])
@@ -140,23 +149,21 @@ export default class ImportRdfaSnippet extends Service {
   /**
    * Processes and stores snippet
    * @method processSnippet
-   * @param {Object} { source }
-   * @param {Object} { text } (result from ember fetch call)
    * @private
    */
-  async processSnippet(params, data) {
+  async processSnippet(params: RequestParams, data: Response) {
     try {
       const snippet = await data.text();
       const snippetElements = this.htmlToElements(snippet);
       const rdfaBlocks = snippetElements
         .map((e) => this.contextScanner.analyse(e))
         .reduce((acc, blocks) => [...acc, ...blocks], []);
-      const type = this.determineType(params, snippet, rdfaBlocks);
+      const type = this.determineType(rdfaBlocks);
       this.storeSnippet(params.source, type, snippet, rdfaBlocks);
-    } catch (err) {
-      this.errors.pushObject({
+    } catch (err: unknown) {
+      this.errors.push({
         source: params.source,
-        details: `Error fetching data ${params.uri}: ${err}`,
+        details: `Error fetching data ${params.uri ?? ''}: ${err as string}`,
       });
     }
   }
@@ -168,7 +175,7 @@ export default class ImportRdfaSnippet extends Service {
    * @return {Object}
    * @private
    */
-  htmlToElements(html) {
+  htmlToElements(html: string): Element[] {
     const template = document.createElement('template');
     template.innerHTML = html;
     return [...template.content.children];
@@ -182,7 +189,12 @@ export default class ImportRdfaSnippet extends Service {
    * @param {Array} block array of richnodes representing the content of the snippet
    * @private
    */
-  storeSnippet(source, type, content, blocks) {
-    this.snippets.pushObject(new RdfaSnippet(source, type, content, blocks));
+  storeSnippet(
+    source: string,
+    type: string,
+    content: string,
+    blocks: RdfaBlock[]
+  ): void {
+    this.snippets.push(new RdfaSnippet(source, type, content, blocks));
   }
 }