@lblod/ember-rdfa-editor-lblod-plugins 9.1.1 → 11.0.0

package/addon/components/variable-plugin/{number-settings.hbs → number/insert.hbs}

@@ -1,15 +1,20 @@
+
+<AuFormRow>
+  <VariablePlugin::Utils::LabelInput @label={{this.label}} @updateLabel={{this.updateLabel}}/>
+</AuFormRow>
 <div class='number-settings'>
   <AuFormRow>
     {{#let (unique-id) as |id|}}
       <AuLabel for={{id}}>
         {{t 'variable-plugin.number.minimum'}}
       </AuLabel>
-      <AuInput
+      <AuNativeInput
         id={{id}}
-        @value={{@minimumValue}}
+        value={{this.minimumValue}}
+        {{on 'input' this.updateMinimumValue}}
         placeholder={{t 'variable-plugin.number.minimum-placeholder'}}
         @width='block'
-        @type='number'
+        @type="number"
       />
     {{/let}}
   </AuFormRow>
@@ -19,18 +24,24 @@
       <AuLabel for={{id}}>
         {{t 'variable-plugin.number.maximum'}}
       </AuLabel>
-      <AuInput
+      <AuNativeInput
         id={{id}}
-        @value={{@maximumValue}}
+        value={{this.maximumValue}}
+        {{on 'input' this.updateMaximumValue}}
         placeholder={{t 'variable-plugin.number.maximum-placeholder'}}
         @width='block'
-        @type='number'
+        @type="number"
       />
     {{/let}}
   </AuFormRow>
-  {{#if @error}}
+  {{#if this.numberVariableError}}
     <AuHelpText @error={{true}}>
-      {{@error}}
+      {{this.numberVariableError}}
     </AuHelpText>
   {{/if}}
-</div>
+</div>
+<AuButton
+  {{on 'click' this.insert}}
+  @disabled={{this.numberVariableError}}>
+  {{t 'variable-plugin.button'}}
+</AuButton>

package/addon/components/variable-plugin/number/insert.ts

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { v4 as uuidv4 } from 'uuid';
+import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
+import { inject as service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class NumberInsertComponent extends Component<Args> {
+  @service declare intl: IntlService;
+  @tracked label?: string;
+  @tracked minimumValue = '';
+  @tracked maximumValue = '';
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.args.controller.schema;
+  }
+
+  get numberVariableError() {
+    const minVal = this.minimumValue;
+    const maxVal = this.maximumValue;
+    if (
+      isNumber(minVal) &&
+      isNumber(maxVal) &&
+      Number(minVal) > Number(maxVal)
+    ) {
+      return this.intl.t('variable.number.error-min-bigger-than-max');
+    }
+
+    return '';
+  }
+
+  @action
+  updateLabel(event: InputEvent) {
+    this.label = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  updateMinimumValue(event: InputEvent) {
+    this.minimumValue = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  updateMaximumValue(event: InputEvent) {
+    this.maximumValue = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  insert() {
+    if (this.numberVariableError !== '') return;
+
+    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+
+    const node = this.schema.nodes.number.create({
+      label: this.label,
+      value: null,
+      mappingResource,
+      variableInstance,
+      ...(isNumber(this.minimumValue) && {
+        minimumValue: Number(this.minimumValue),
+      }),
+      ...(isNumber(this.maximumValue) && {
+        maximumValue: Number(this.maximumValue),
+      }),
+    });
+
+    this.label = undefined;
+    this.minimumValue = '';
+    this.maximumValue = '';
+
+    this.controller.withTransaction(
+      (tr) => {
+        return tr.replaceSelectionWith(node);
+      },
+      { view: this.controller.mainEditorView },
+    );
+  }
+}

package/addon/components/{variable-number/number.hbs → variable-plugin/number/nodeview.hbs}

@@ -33,8 +33,8 @@
       >
         <card.content>
           {{!-- template-lint-disable no-down-event-binding --}}
-          <AuInput
-            @value={{this.inputNumber}}
+          <AuNativeInput
+            value={{this.inputNumber}}
             placeholder={{t 'variable.number.type-number'}}
             {{did-insert this.focus}}
             {{on 'input' this.onInputNumberChange}}

package/addon/components/{variable-number/number.ts → variable-plugin/number/nodeview.ts}

@@ -11,10 +11,6 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import intlService from 'ember-intl/services/intl';
 import { localCopy } from 'tracked-toolbox';
-import {
-  MAXIMUM_VALUE_PNODE_KEY,
-  MINIMUM_VALUE_PNODE_KEY,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
 import { isBlank } from '@ember/utils';
 import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { numberToWords } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/number-to-words';
@@ -28,7 +24,7 @@ type Args = {
   selected: boolean;
   contentDecorations?: DecorationSource;
 };
-export default class VariableNumberPluginNumberComponent extends Component<Args> {
+export default class NumberNodeviewComponent extends Component<Args> {
   @localCopy('args.node.attrs.value', '') declare inputNumber: string;
   @localCopy('args.node.attrs.writtenNumber', false)
   declare writtenNumber: boolean;
@@ -60,11 +56,11 @@ export default class VariableNumberPluginNumberComponent extends Component<Args>
   }
 
   get minValue() {
-    return this.node.attrs[MINIMUM_VALUE_PNODE_KEY] as number;
+    return this.node.attrs.minimumValue as number;
   }
 
   get maxValue() {
-    return this.node.attrs[MAXIMUM_VALUE_PNODE_KEY] as number;
+    return this.node.attrs.maximumValue as number;
   }
 
   @action onInputNumberChange(event: InputEvent) {

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

@@ -0,0 +1,9 @@
+<AuFormRow>
+  <VariablePlugin::Utils::LabelInput 
+    @label={{this.label}} 
+    @updateLabel={{this.updateLabel}}
+  />
+</AuFormRow>
+<AuButton {{on 'click' this.insert}}>
+  {{t 'variable-plugin.button'}}
+</AuButton>

package/addon/components/variable-plugin/text/insert.ts

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { v4 as uuidv4 } from 'uuid';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class TextVariableInsertComponent extends Component<Args> {
+  @tracked label?: string;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.args.controller.schema;
+  }
+
+  @action
+  updateLabel(event: InputEvent) {
+    this.label = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  insert() {
+    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const node = this.schema.nodes.text_variable.create(
+      {
+        label: this.label,
+        mappingResource,
+        variableInstance,
+      },
+      this.schema.node('placeholder', { placeholderText: 'text' }),
+    );
+
+    this.label = undefined;
+
+    this.controller.withTransaction(
+      (tr) => {
+        return tr.replaceSelectionWith(node);
+      },
+      { view: this.controller.mainEditorView },
+    );
+  }
+}

package/addon/components/variable-plugin/utils/label-input.hbs

@@ -0,0 +1,11 @@
+<AuLabel for='label'>
+  {{t 'variable-plugin.label'}}
+</AuLabel>
+<AuNativeInput
+  id="label"
+  placeholder={{t 'variable-plugin.labelPlaceholder'}}
+  @type='text'
+  @width='block'
+  value={{@label}}
+  {{on 'input' @updateLabel}}
+/>

package/addon/components/variable-plugin/{variable.ts → variable/nodeview.ts}

@@ -11,7 +11,7 @@ type Args = {
   controller: SayController;
 };
 
-export default class VariableComponent extends Component<Args> {
+export default class VariableNodeViewComponent extends Component<Args> {
   @tracked innerView?: SayView;
 
   @action

package/addon/helpers/in-array.ts

@@ -0,0 +1,13 @@
+import { helper } from '@ember/component/helper';
+
+type PositionalParams = [array: unknown[], needle: unknown];
+
+function inArray([theArray, needle]: PositionalParams) {
+  if (!Array.isArray(theArray)) {
+    return false;
+  }
+
+  return theArray.includes(needle);
+}
+
+export default helper<PositionalParams>(inArray);

package/addon/plugins/article-structure-plugin/structures/article-paragraph.ts

@@ -53,7 +53,7 @@ const contentSelector = `span[property~='${SAY('body').prefixed}'],
                          span[property~='${SAY('body').full}']`;
 
 export const article_paragraph: NodeSpec = {
-  content: 'paragraph*',
+  content: 'block*',
   inline: false,
   isolating: true,
   defining: true,

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

@@ -4,7 +4,6 @@ import {
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import {
-  DCT,
   EXT,
   XSD,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
@@ -12,10 +11,20 @@ import { hasRDFaAttribute } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/n
 import { DateOptions } from '..';
 import { formatDate, validateDateFormat } from '../utils';
 import { PNode } from '@lblod/ember-rdfa-editor';
+import {
+  isVariable,
+  parseLabel,
+  parseVariableType,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/attribute-parsers';
+import {
+  mappingSpan,
+  typeSpan,
+} from '../../variable-plugin/utils/dom-constructors';
+import { span } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/dom-output-spec-helpers';
 
 const emberNodeConfig = (options: DateOptions): EmberNodeConfig => ({
   name: 'date',
-  group: 'inline',
+  group: 'inline variable',
   componentPath: 'rdfa-date-plugin/date',
   inline: true,
   selectable: true,
@@ -41,7 +50,7 @@ const emberNodeConfig = (options: DateOptions): EmberNodeConfig => ({
       default: false,
     },
     label: {
-      default: '',
+      default: 'datum',
     },
   },
   leafText: (node: PNode) => {
@@ -77,19 +86,14 @@ const emberNodeConfig = (options: DateOptions): EmberNodeConfig => ({
       ...(!!value && { content: value as string }),
     };
     if (mappingResource) {
-      return [
-        'span',
-        {
-          resource: mappingResource as string,
-          typeof: EXT('Mapping').prefixed,
-          class: 'date',
-          'data-label': label as string,
-        },
-        ['span', { property: DCT('type').prefixed, content: 'date' }],
-        ['span', dateAttrs, humanReadableDate],
-      ];
+      return mappingSpan(
+        mappingResource,
+        { class: 'date', 'data-label': label as string },
+        typeSpan('date'),
+        span(dateAttrs, humanReadableDate),
+      );
     } else {
-      return ['span', { class: 'date', ...dateAttrs }, humanReadableDate];
+      return span({ class: 'date', ...dateAttrs }, humanReadableDate);
     }
   },
   parseDOM: [
@@ -114,50 +118,43 @@ const emberNodeConfig = (options: DateOptions): EmberNodeConfig => ({
     {
       tag: 'span',
       getAttrs: (node: HTMLElement) => {
-        if (hasRDFaAttribute(node, 'typeof', EXT('Mapping'))) {
+        if (isVariable(node) && parseVariableType(node) === 'date') {
           const mappingResource = node.getAttribute('resource');
           if (!mappingResource) {
             return false;
           }
-          const variableType = [...node.children]
-            .find((el) => hasRDFaAttribute(el, 'property', DCT('type')))
-            ?.getAttribute('content');
-          const datatype = [...node.children]
-            .find((el) => hasRDFaAttribute(el, 'property', EXT('content')))
-            ?.getAttribute('datatype');
-          if (variableType === 'date' && datatype) {
-            const onlyDate = !![...node.children].find((el) =>
-              hasRDFaAttribute(el, 'datatype', XSD('date')),
-            );
-            const dateNode = [...node.children].find((el) =>
-              hasRDFaAttribute(el, 'property', EXT('content')),
-            ) as HTMLElement | undefined;
-            let humanReadableDate: string;
-            const value = dateNode?.getAttribute('content');
-            const format = dateNode?.dataset.format;
-            if (value && format) {
-              if (validateDateFormat(format).type === 'ok') {
-                humanReadableDate = formatDate(new Date(value), format);
-              } else {
-                humanReadableDate = 'Ongeldig formaat';
-              }
+          const onlyDate = !![...node.children].find((el) =>
+            hasRDFaAttribute(el, 'datatype', XSD('date')),
+          );
+          const dateNode = [...node.children].find((el) =>
+            hasRDFaAttribute(el, 'property', EXT('content')),
+          ) as HTMLElement | undefined;
+          let humanReadableDate: string;
+          const value = dateNode?.getAttribute('content');
+          const format = dateNode?.dataset.format;
+          if (value && format) {
+            if (validateDateFormat(format).type === 'ok') {
+              humanReadableDate = formatDate(new Date(value), format);
             } else {
-              humanReadableDate = onlyDate
-                ? options.placeholder.insertDate
-                : options.placeholder.insertDateTime;
+              humanReadableDate = 'Ongeldig formaat';
             }
-            const label = node.getAttribute('data-label') || variableType;
-            return {
-              mappingResource,
-              onlyDate,
-              humanReadableDate,
-              value: value,
-              format: format,
-              custom: dateNode?.dataset.custom === 'true',
-              label,
-            };
+          } else {
+            humanReadableDate = onlyDate
+              ? options.placeholder.insertDate
+              : options.placeholder.insertDateTime;
           }
+          const label = parseLabel(node);
+          return {
+            mappingResource,
+            onlyDate,
+            humanReadableDate,
+            value: value,
+            format: format,
+            custom: dateNode?.dataset.custom === 'true',
+            label,
+          };
         }
+
         return false;
       },
     },

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

@@ -25,3 +25,23 @@ export class Snippet {
     this.title = title;
   }
 }
+
+interface SnippetListArgs {
+  id: string | null;
+  label: string | null;
+  createdOn: string | null;
+}
+
+const snippetListBase = 'http://lblod.data.gift/snippet-lists/';
+
+export class SnippetList {
+  id: string | null;
+  label: string | null;
+  createdOn: string | null;
+
+  constructor({ id, label, createdOn }: SnippetListArgs) {
+    this.id = id?.replace(snippetListBase, '') ?? null;
+    this.label = label;
+    this.createdOn = dateValue(createdOn ?? undefined);
+  }
+}

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

@@ -2,35 +2,69 @@ import {
   executeCountQuery,
   executeQuery,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/sparql-helpers';
-import { Snippet } from '../index';
+import { Snippet, SnippetList } from '../index';
 
-type Filter = { name?: string };
+type Filter = { name?: string; assignedSnippetListIds?: string[] };
 type Pagination = { pageNumber: number; pageSize: number };
 
-const buildCountQuery = ({ name }: Filter) => {
+const sparqlEscapeString = (value: string) =>
+  '"""' + value.replace(/[\\"]/g, (match) => '\\' + match) + '"""';
+
+const buildSnippetCountQuery = ({ name, assignedSnippetListIds }: Filter) => {
   return `
       PREFIX schema: <http://schema.org/>
       PREFIX dct: <http://purl.org/dc/terms/>
       PREFIX pav: <http://purl.org/pav/>
       PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
       PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+      PREFIX prov: <http://www.w3.org/ns/prov#>
+      PREFIX mu: <http://mu.semte.ch/vocabularies/core/>
 
       SELECT (COUNT(?publishedSnippetVersion) AS ?count)
       WHERE {
           ?publishedSnippetContainer a ext:PublishedSnippetContainer ;
-                             pav:hasCurrentVersion ?publishedSnippetVersion .
+                             pav:hasCurrentVersion ?publishedSnippetVersion ;
+                             ext:fromSnippetList ?fromSnippetList .
+          ?fromSnippetList mu:uuid ?fromSnippetListId .
           ?publishedSnippetVersion dct:title ?title ;
                ext:editorDocumentContent ?content ;
                pav:createdOn ?createdOn .
           OPTIONAL { ?publishedSnippetVersion schema:validThrough ?validThrough. }
           FILTER(!BOUND(?validThrough) || xsd:dateTime(?validThrough) > now())
-          ${name ? `FILTER (CONTAINS(LCASE(?title), "${name}"))` : ''}
+          ${
+            name
+              ? `FILTER (CONTAINS(LCASE(?title), "${name.toLowerCase()}"))`
+              : ''
+          }
+          ${
+            assignedSnippetListIds && assignedSnippetListIds.length
+              ? `FILTER (?fromSnippetListId IN (${assignedSnippetListIds
+                  .map((from) => sparqlEscapeString(from))
+                  .join(', ')}))`
+              : ''
+          }
       }
       `;
 };
 
-const buildFetchQuery = ({
-  filter: { name },
+const buildSnippetListCountQuery = ({ name }: Filter) => {
+  return `
+      PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+      SELECT (COUNT(?snippetLists) AS ?count)
+      WHERE {
+          ?snippetLists a ext:SnippetList;
+              skos:prefLabel ?label.
+          ${
+            name
+              ? `FILTER (CONTAINS(LCASE(?label), "${name.toLowerCase()}"))`
+              : ''
+          }
+      }
+      `;
+};
+
+const buildSnippetFetchQuery = ({
+  filter: { name, assignedSnippetListIds },
   pagination: { pageSize, pageNumber },
 }: {
   filter: Filter;
@@ -42,15 +76,30 @@ const buildFetchQuery = ({
       PREFIX pav: <http://purl.org/pav/>
       PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
       PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+      PREFIX prov: <http://www.w3.org/ns/prov#>
+      PREFIX mu: <http://mu.semte.ch/vocabularies/core/>
 
       SELECT DISTINCT ?title ?content ?createdOn
       WHERE {
           ?publishedSnippetContainer a ext:PublishedSnippetContainer ;
-                             pav:hasCurrentVersion ?publishedSnippetVersion .
+                             pav:hasCurrentVersion ?publishedSnippetVersion ;
+                             ext:fromSnippetList ?fromSnippetList .
+          ?fromSnippetList mu:uuid ?fromSnippetListId .
           ?publishedSnippetVersion dct:title ?title ;
                ext:editorDocumentContent ?content ;
                pav:createdOn ?createdOn .
-          ${name ? `FILTER (CONTAINS(LCASE(?title), "${name}"))` : ''}
+          ${
+            name
+              ? `FILTER (CONTAINS(LCASE(?title), "${name.toLowerCase()}"))`
+              : ''
+          }
+          ${
+            assignedSnippetListIds && assignedSnippetListIds.length
+              ? `FILTER (?fromSnippetListId IN (${assignedSnippetListIds
+                  .map((from) => sparqlEscapeString(from))
+                  .join(', ')}))`
+              : ''
+          }
           OPTIONAL { ?publishedSnippetVersion schema:validThrough ?validThrough. }
           FILTER(!BOUND(?validThrough) || xsd:dateTime(?validThrough) > now())
       }
@@ -60,6 +109,28 @@ const buildFetchQuery = ({
       `;
 };
 
+const buildSnippetListFetchQuery = ({
+  filter: { name },
+}: {
+  filter: Filter;
+}) => {
+  return `
+        PREFIX pav: <http://purl.org/pav/>
+        PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+        PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+
+        SELECT (?snippetLists as ?id) ?label ?createdOn WHERE {
+          ?snippetLists a ext:SnippetList;
+            skos:prefLabel ?label;
+            pav:createdOn ?createdOn.
+          ${
+            name
+              ? `FILTER (CONTAINS(LCASE(?label), "${name.toLowerCase()}"))`
+              : ''
+          }
+        }`;
+};
+
 export const fetchSnippets = async ({
   endpoint,
   abortSignal,
@@ -71,9 +142,13 @@ export const fetchSnippets = async ({
   filter: Filter;
   pagination: Pagination;
 }) => {
+  if (!filter.assignedSnippetListIds?.length) {
+    return { totalCount: 0, results: [] };
+  }
+
   const totalCount = await executeCountQuery({
     endpoint,
-    query: buildCountQuery(filter),
+    query: buildSnippetCountQuery(filter),
     abortSignal,
   });
 
@@ -87,7 +162,7 @@ export const fetchSnippets = async ({
     content: { value: string };
   }>({
     endpoint,
-    query: buildFetchQuery({ filter, pagination }),
+    query: buildSnippetFetchQuery({ filter, pagination }),
     abortSignal,
   });
 
@@ -102,3 +177,44 @@ export const fetchSnippets = async ({
 
   return { totalCount, results };
 };
+
+export const fetchSnippetLists = async ({
+  endpoint,
+  abortSignal,
+  filter,
+}: {
+  endpoint: string;
+  abortSignal: AbortSignal;
+  filter: Filter;
+}) => {
+  const totalCount = await executeCountQuery({
+    endpoint,
+    query: buildSnippetListCountQuery(filter),
+    abortSignal,
+  });
+
+  if (totalCount === 0) {
+    return { totalCount, results: [] };
+  }
+
+  const queryResult = await executeQuery<{
+    id: { value: string };
+    label: { value: string };
+    createdOn: { value: string };
+  }>({
+    endpoint,
+    query: buildSnippetListFetchQuery({ filter }),
+    abortSignal,
+  });
+
+  const results = queryResult.results.bindings.map(
+    (binding) =>
+      new SnippetList({
+        id: binding.id?.value,
+        label: binding.label?.value,
+        createdOn: binding.createdOn?.value,
+      }),
+  );
+
+  return { totalCount, results };
+};