@lblod/ember-rdfa-editor-lblod-plugins 8.2.1 → 8.3.0

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

@@ -0,0 +1,27 @@
+import { htmlSafe } from '@ember/template';
+
+import { optionMapOr } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { dateValue } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
+import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
+
+export type SnippetPluginConfig = {
+  endpoint: string;
+};
+
+interface SnippetArgs {
+  title: string | null;
+  createdOn: string | null;
+  content: string | null;
+}
+
+export class Snippet {
+  content: SafeString | null;
+  createdOn: string | null;
+  title: string | null;
+
+  constructor({ title, createdOn, content }: SnippetArgs) {
+    this.content = optionMapOr(null, htmlSafe, content);
+    this.createdOn = dateValue(createdOn ?? undefined);
+    this.title = title;
+  }
+}

package/addon/plugins/snippet-plugin/utils/fetch-data.ts

@@ -0,0 +1,96 @@
+import {
+  executeCountQuery,
+  executeQuery,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
+import { Snippet } from '../index';
+
+type Filter = { name?: string };
+type Pagination = { pageNumber: number; pageSize: number };
+
+const buildCountQuery = ({ name }: Filter) => {
+  return `
+      PREFIX dct: <http://purl.org/dc/terms/>
+      PREFIX pav: <http://purl.org/pav/>
+      PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+
+      SELECT (COUNT(?snippetDocument) AS ?count)
+      WHERE {
+          ?snippetList a ext:SnippetList ;
+              ext:hasSnippet/pav:hasCurrentVersion ?snippetDocument .
+          ?snippetDocument dct:title ?title ;
+              ext:editorDocumentContent ?content ;
+              pav:createdOn ?createdOn .
+          ${name ? `FILTER (CONTAINS(LCASE(?title), "${name}"))` : ''}
+      }
+      `;
+};
+
+const buildFetchQuery = ({
+  filter: { name },
+  pagination: { pageSize, pageNumber },
+}: {
+  filter: Filter;
+  pagination: Pagination;
+}) => {
+  return `
+      PREFIX dct: <http://purl.org/dc/terms/>
+      PREFIX pav: <http://purl.org/pav/>
+      PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+
+      SELECT DISTINCT ?title ?content ?createdOn
+      WHERE {
+          ?snippetList a ext:SnippetList ;
+              ext:hasSnippet/pav:hasCurrentVersion ?snippetDocument .
+          ?snippetDocument dct:title ?title ;
+              ext:editorDocumentContent ?content ;
+              pav:createdOn ?createdOn .
+          ${name ? `FILTER (CONTAINS(LCASE(?title), "${name}"))` : ''}
+      }
+      ORDER BY DESC(?createdOn) LIMIT ${pageSize} OFFSET ${
+    pageNumber * pageSize
+  }
+      `;
+};
+
+export const fetchSnippets = async ({
+  endpoint,
+  abortSignal,
+  filter,
+  pagination,
+}: {
+  endpoint: string;
+  abortSignal: AbortSignal;
+  filter: Filter;
+  pagination: Pagination;
+}) => {
+  const totalCount = await executeCountQuery({
+    endpoint,
+    query: buildCountQuery(filter),
+    abortSignal,
+  });
+
+  if (totalCount === 0) {
+    return { totalCount, results: [] };
+  }
+
+  const queryResult = await executeQuery<{
+    title: { value: string };
+    createdOn: { value: string };
+    content: { value: string };
+  }>({
+    endpoint,
+    query: buildFetchQuery({ filter, pagination }),
+    abortSignal,
+  });
+
+  const results = queryResult.results.bindings.map(
+    (binding) =>
+      new Snippet({
+        title: binding.title?.value,
+        createdOn: binding.createdOn?.value,
+        content: binding.content?.value,
+      })
+  );
+
+  return { totalCount, results };
+};

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

@@ -73,20 +73,19 @@ export const contentToDom = ({
   type,
   node,
 }: {
-  content: string;
+  content: string | null;
   type: string;
   node: PNode;
 }) => {
   if (type === 'number') {
-    if (
-      node.attrs[WRITTEN_NUMBER_PNODE_KEY] ||
-      Number.isNaN(Number(content)) ||
-      content === null ||
-      content === ''
-    ) {
-      return n2words(Number(content), { lang: 'nl' });
+    if (!Number.isNaN(Number(content)) && content !== null && content !== '') {
+      if (node.attrs[WRITTEN_NUMBER_PNODE_KEY]) {
+        return n2words(Number(content), { lang: 'nl' });
+      } else {
+        return content;
+      }
     } else {
-      return content;
+      return 'Voeg getal in';
     }
   } else {
     return content;
@@ -137,7 +136,10 @@ export const parseAttributes = (node: HTMLElement): false | Attrs => {
   return false;
 };
 
-export const attributesToDOM = (node: PNode, content = null): DOMOutputSpec => {
+export const attributesToDOM = (
+  node: PNode,
+  content?: string | null
+): DOMOutputSpec => {
   const {
     mappingResource,
     codelistResource,
@@ -192,7 +194,9 @@ export const attributesToDOM = (node: PNode, content = null): DOMOutputSpec => {
         content: content ? content : '',
         ...(!!datatype && { datatype: datatype as string }),
       },
-      content ? contentToDom({ content, type: type as string, node }) : 0,
+      content !== undefined
+        ? contentToDom({ content, type: type as string, node })
+        : 0,
     ],
   ];
 };

package/addon/plugins/variable-plugin/utils/fetch-data.ts

@@ -43,10 +43,10 @@ export async function fetchCodeListOptions(
   endpoint: string,
   codelistUri: string
 ): Promise<CodeListOptions> {
-  const codelistsOptionsQueryResult = await executeQuery(
+  const codelistsOptionsQueryResult = await executeQuery({
     endpoint,
-    generateCodeListOptionsQuery(codelistUri)
-  );
+    query: generateCodeListOptionsQuery(codelistUri),
+  });
   const options = parseCodelistOptions(codelistsOptionsQueryResult);
   return {
     type:
@@ -95,10 +95,10 @@ export async function fetchCodeListsByPublisher(
   endpoint: string,
   publisher: string
 ): Promise<CodeList[]> {
-  const codelistsOptionsQueryResult = await executeQuery(
+  const codelistsOptionsQueryResult = await executeQuery({
     endpoint,
-    generateCodeListsByPublisherQuery(publisher)
-  );
+    query: generateCodeListsByPublisherQuery(publisher),
+  });
   const bindings = codelistsOptionsQueryResult.results.bindings;
   return bindings.map((binding) => ({
     uri: binding['uri']?.value,

package/addon/utils/sparql-helpers.ts

@@ -1,13 +1,25 @@
 import * as RDF from '@rdfjs/types';
+import { optionMapOr } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
-export type QueryResult = {
+export interface QueryResult<Binding = Record<string, RDF.Term>> {
   results: {
-    bindings: Record<string, RDF.Term>[];
+    bindings: Binding[];
   };
-};
+}
+
+interface QueryConfig {
+  query: string;
+  endpoint: string;
+  abortSignal?: AbortSignal;
+}
 
-export async function executeQuery(endpoint: string, query: string) {
+export async function executeQuery<Binding = Record<string, RDF.Term>>({
+  query,
+  endpoint,
+  abortSignal,
+}: QueryConfig) {
   const encodedQuery = encodeURIComponent(query.trim());
+
   const response = await fetch(endpoint, {
     method: 'POST',
     mode: 'cors',
@@ -16,12 +28,22 @@ export async function executeQuery(endpoint: string, query: string) {
       'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
     },
     body: `query=${encodedQuery}`,
+    signal: abortSignal,
   });
+
   if (response.ok) {
-    return response.json() as unknown as QueryResult;
+    return response.json() as Promise<QueryResult<Binding>>;
   } else {
     throw new Error(
-      `Request to MOW backend was unsuccessful: [${response.status}] ${response.statusText}`
+      `Request to ${endpoint} was unsuccessful: [${response.status}] ${response.statusText}`
     );
   }
 }
+
+export async function executeCountQuery(queryConfig: QueryConfig) {
+  const response = await executeQuery<{ count: { value: string } }>(
+    queryConfig
+  );
+
+  return optionMapOr(0, parseInt, response.results.bindings[0]?.count.value);
+}

package/addon/utils/strings.ts

@@ -0,0 +1,34 @@
+import { warn } from '@ember/debug';
+
+export function escapeValue(value?: string) {
+  if (value) {
+    const shadowDomElement = document.createElement('textarea');
+    shadowDomElement.innerHTML = value;
+    return shadowDomElement.textContent;
+  } else {
+    return null;
+  }
+}
+
+export function dateValue(value?: string): string | null {
+  if (value) {
+    try {
+      return new Intl.DateTimeFormat('nl-BE').format(
+        new Date(Date.parse(value))
+      );
+    } catch (e) {
+      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;
+    }
+  } else {
+    return null;
+  }
+}

package/addon/utils/types.ts

@@ -0,0 +1,3 @@
+import { htmlSafe } from '@ember/template';
+
+export type SafeString = ReturnType<typeof htmlSafe>;

package/app/components/pagination/pagination-view.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/pagination/pagination-view';

package/app/components/snippet-plugin/helpers/alert-load-error.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/helpers/alert-load-error';

package/app/components/snippet-plugin/helpers/alert-no-items.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/helpers/alert-no-items';

package/app/components/snippet-plugin/search-modal.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/search-modal';

package/app/components/snippet-plugin/snippet-insert.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/snippet-insert';

package/app/components/snippet-plugin/snippets/snippet-list.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/snippets/snippet-list';

package/app/components/snippet-plugin/snippets/snippet-preview.js

@@ -0,0 +1 @@
+export { default } from '@lblod/ember-rdfa-editor-lblod-plugins/components/snippet-plugin/snippets/snippet-preview';

package/app/helpers/pagination.js

@@ -0,0 +1,4 @@
+export {
+  default,
+  pagination,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/helpers/pagination';

package/app/styles/snippet-plugin.scss

@@ -0,0 +1,66 @@
+.snippet-modal {
+  &--main-container {
+    height: 100% !important;
+
+    background-color: var(--au-gray-100);
+
+    .au-c-sidebar {
+      border-right: 0;
+    }
+
+    #content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &--list-container {
+    overflow: auto;
+    flex-grow: 1;
+  }
+
+  &--error-code {
+    font-family: var(--au-font-tertiary);
+  }
+}
+
+.snippet-preview {
+  &--container {
+    flex-direction: row;
+  }
+
+  &--article {
+    flex-grow: 1;
+
+    .say-editor__paper,
+    .say-editor__inner {
+      min-height: auto;
+      white-space: inherit;
+    }
+
+    .say-editor,
+    .say-editor__inner {
+      padding: 0;
+    }
+  }
+
+  &--title {
+    color: var(--au-gray-700);
+    font-weight: var(--au-medium);
+  }
+
+  &--button {
+    border-left: 1px solid var(--au-gray-200);
+  }
+
+  &--editor-overlay {
+    position: absolute !important;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &--editor-container {
+    position: relative;
+  }
+}

package/components/besluit-type-plugin/toolbar-dropdown.d.ts

@@ -30,7 +30,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     constructor(parent: unknown, args: Args);
     get controller(): SayController;
     get doc(): import("prosemirror-model").Node;
-    types: import("ember-resources/util/function").State<BesluitType[]>;
+    types: import("ember-resources/util/function").State<Promise<BesluitType[]>>;
     get currentBesluitRange(): ResolvedPNode | undefined;
     get currentBesluitURI(): string | undefined;
     get showCard(): boolean;

package/components/citation-plugin/citations/search-modal.d.ts

@@ -49,10 +49,6 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
         endpoint: string;
     };
     get searchText(): string;
-    get rangeStart(): number;
-    get rangeEnd(): number;
-    get isFirstPage(): boolean;
-    get isLastPage(): boolean;
     resourceSearch: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, () => Promise<Decision[]>>;
     decisionResource: import("ember-resources/util/ember-concurrency").TaskInstance<unknown>;
     setInputSearchText(event: InputEvent): void;

package/components/snippet-plugin/search-modal.d.ts

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+interface Args {
+    config: SnippetPluginConfig;
+    closeModal: () => void;
+}
+export default class SnippetPluginSearchModalComponent extends Component<Args> {
+    inputSearchText: string | null;
+    error: unknown;
+    pageNumber: number;
+    pageSize: number;
+    totalCount: number;
+    get config(): SnippetPluginConfig;
+    get searchText(): string | null;
+    setInputSearchText(event: InputEvent): void;
+    closeModal(): Promise<void>;
+    snippetsSearch: import("ember-concurrency").TaskForAsyncTaskFunction<unknown, () => Promise<import("@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin").Snippet[]>>;
+    snippetsResource: import("ember-resources/util/ember-concurrency").TaskInstance<unknown>;
+    previousPage(): void;
+    nextPage(): void;
+}
+export {};

package/components/snippet-plugin/snippet-insert.d.ts

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+interface Args {
+    controller: SayController;
+    config: SnippetPluginConfig;
+}
+export default class SnippetInsertComponent extends Component<Args> {
+    showModal: boolean;
+    get controller(): SayController;
+    get config(): SnippetPluginConfig;
+    openModal(): void;
+    closeModal(): void;
+    onInsert(content: string): void;
+}
+export {};

package/components/snippet-plugin/snippets/snippet-preview.d.ts

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { Snippet, SnippetPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin';
+interface Args {
+    config: SnippetPluginConfig;
+    snippet: Snippet;
+    onInsert: (content: string) => void;
+}
+export default class SnippetPreviewComponent extends Component<Args> {
+    controller?: SayController;
+    get snippet(): Snippet;
+    onInsert(): void;
+}
+export {};

package/helpers/pagination.d.ts

@@ -0,0 +1,25 @@
+interface PaginationArguments {
+    count: number;
+    pageSize: number;
+    page: number;
+}
+export declare function pagination({ page, count, pageSize, }: PaginationArguments): {
+    count: number;
+    pageSize: number;
+    page: number;
+    totalPages: number;
+    pageStart: number;
+    pageEnd: number;
+    nextPage: number | null;
+    previousPage: number | null;
+    hasPreviousPage: boolean;
+    hasNextPage: boolean;
+};
+declare const _default: import("@ember/component/helper").FunctionBasedHelper<{
+    Args: {
+        Positional: unknown[];
+        Named: PaginationArguments;
+    };
+    Return: unknown;
+}>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -50,8 +50,8 @@
     "ember-concurrency": "^2.3.7",
     "ember-mu-transform-helpers": "^2.0.0",
     "ember-power-select": "^6.0.1",
-    "ember-resources": "^5.6.2",
-    "ember-velcro": "^1.1.0",
+    "ember-resources": "^6.1.1",
+    "ember-velcro": "^2.1.0",
     "fetch-sparql-endpoint": "^3.0.0",
     "n2words": "^1.16.4",
     "process": "0.11.10",
@@ -69,7 +69,7 @@
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@lblod/ember-rdfa-editor": "^3.8.0",
+    "@lblod/ember-rdfa-editor": "^4.0.0",
     "@rdfjs/types": "^1.1.0",
     "@release-it/keep-a-changelog": "^3.1.0",
     "@tsconfig/ember": "^1.0.1",
@@ -148,7 +148,7 @@
   },
   "peerDependencies": {
     "@appuniversum/ember-appuniversum": "^2.4.2",
-    "@lblod/ember-rdfa-editor": "^3.8.0",
+    "@lblod/ember-rdfa-editor": "^3.10.0",
     "ember-concurrency": "^2.3.7"
   },
   "overrides": {

package/plugins/snippet-plugin/index.d.ts

@@ -0,0 +1,16 @@
+import { SafeString } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/types';
+export type SnippetPluginConfig = {
+    endpoint: string;
+};
+interface SnippetArgs {
+    title: string | null;
+    createdOn: string | null;
+    content: string | null;
+}
+export declare class Snippet {
+    content: SafeString | null;
+    createdOn: string | null;
+    title: string | null;
+    constructor({ title, createdOn, content }: SnippetArgs);
+}
+export {};

package/plugins/snippet-plugin/utils/fetch-data.d.ts

@@ -0,0 +1,18 @@
+import { Snippet } from '../index';
+type Filter = {
+    name?: string;
+};
+type Pagination = {
+    pageNumber: number;
+    pageSize: number;
+};
+export declare const fetchSnippets: ({ endpoint, abortSignal, filter, pagination, }: {
+    endpoint: string;
+    abortSignal: AbortSignal;
+    filter: Filter;
+    pagination: Pagination;
+}) => Promise<{
+    totalCount: number;
+    results: Snippet[];
+}>;
+export {};

package/plugins/table-of-contents-plugin/nodes/table-of-contents.d.ts

@@ -2,4 +2,4 @@ import { EmberNodeConfig } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { TableOfContentsConfig } from '..';
 export declare const emberNodeConfig: (config: TableOfContentsConfig) => EmberNodeConfig;
 export declare const table_of_contents: (config: TableOfContentsConfig) => import("prosemirror-model").NodeSpec;
-export declare const tableOfContentsView: (config: TableOfContentsConfig) => (controller: import("@lblod/ember-rdfa-editor/addon").SayController) => import("prosemirror-view").NodeViewConstructor;
+export declare const tableOfContentsView: (config: TableOfContentsConfig) => (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;

package/plugins/variable-plugin/nodes.d.ts

@@ -26,12 +26,12 @@ export declare const getPNodeExtraAttributes: ({ node, type, }: {
     "data-written-number"?: undefined;
 };
 export declare const contentToDom: ({ content, type, node, }: {
-    content: string;
+    content: string | null;
     type: string;
     node: PNode;
-}) => string;
+}) => string | null;
 export declare const parseAttributes: (node: HTMLElement) => false | Attrs;
-export declare const attributesToDOM: (node: PNode, content?: null) => DOMOutputSpec;
+export declare const attributesToDOM: (node: PNode, content?: string | null) => DOMOutputSpec;
 export declare const emberNodeConfig: EmberNodeConfig;
 export declare const variable: import("prosemirror-model").NodeSpec;
 export declare const variableView: (controller: import("@lblod/ember-rdfa-editor").SayController) => import("prosemirror-view").NodeViewConstructor;

package/translations/en-US.yaml

@@ -228,3 +228,26 @@ generic-rdfa-variable:
   modal:
     insert: Insert
     cancel: Cancel
+
+snippet-plugin:
+  insert:
+    title: Insert snippet
+  modal:
+    title: Choose a snippet
+    select: Select
+    search:
+      title: Filter on
+      label: Snippet name
+      placeholder: Type something...
+    alert:
+      loading: Loading…
+      no-results: No results found
+      error-title: Error while loading results
+      error-intro: 'An error occurred while loading results'
+      error-outro: In case this problem keeps occurring, please contact
+
+pagination:
+  next: Next page
+  previous: Previous page
+  of: of
+  results: Results

package/translations/nl-BE.yaml

@@ -197,7 +197,7 @@ variable:
     type-number: typ een nummer...
     error-not-integer: Enkel gehele getallen zijn toegelaten
     error-not-number: Enkel getallen zijn toegelaten
-    error-number-between: Het getal moet tussen {minValue} en {maxValue} liggen 
+    error-number-between: Het getal moet tussen {minValue} en {maxValue} liggen
     error-number-above: Het getal moet groter dan {minValue} zijn
     error-number-below: Het getal moet kleiner dan {maxValue} zijn
     written-number-label: Getal voluit schrijven
@@ -233,3 +233,26 @@ generic-rdfa-variable:
   modal:
     insert: Invoegen
     cancel: Terug
+
+snippet-plugin:
+  insert:
+    title: Fragment invoegen
+  modal:
+    title: Kies een fragment
+    select: Selecteer
+    search:
+      title: Filter op
+      label: Fragmentnaam
+      placeholder: Typ iets...
+    alert:
+      loading: Laden…
+      no-results: Geen resultaten gevonden
+      error-title: Probleem bij het laden
+      error-intro: "Er is een fout opgetreden tijdens het laden van de resultaten:"
+      error-outro: Moest dit probleem aanhouden, neem contact op met
+
+pagination:
+  next: Volgende pagina
+  previous: Vorige pagina
+  of: van
+  results: Resultaten