@lblod/ember-rdfa-editor-lblod-plugins 16.3.0 → 17.0.0-dev.f473cdfb5868261b49cdae52ea2558970c082d01

package/addon/components/worship-plugin/search-modal.ts

@@ -0,0 +1,131 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { restartableTask, timeout } from 'ember-concurrency';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import {
+  fetchWorshipServices,
+  SearchSort,
+  WorshipService,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+import { AdministrativeUnit } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+
+interface Args {
+  config: WorshipPluginConfig;
+  open: boolean;
+  closeModal: () => void;
+  onInsert: (service: WorshipService) => void;
+}
+
+export default class WorshipPluginSearchModalComponent extends Component<Args> {
+  // Filtering
+  @tracked sort: SearchSort = false;
+  @tracked inputSearchText: string | null = null;
+  // We're deliberately using the arg to set the initial value
+  // eslint-disable-next-line ember/no-tracked-properties-from-args
+  @tracked administrativeUnit: AdministrativeUnit | undefined =
+    this.args.config.defaultAdministrativeUnit;
+
+  // Display
+  @tracked error: unknown;
+
+  // Pagination
+  @tracked pageNumber = 0;
+  @tracked pageSize = 20;
+  @tracked totalCount = 0;
+
+  get config() {
+    return this.args.config;
+  }
+
+  get searchText() {
+    return this.inputSearchText;
+  }
+
+  @action
+  setInputSearchText(event: InputEvent) {
+    assert(
+      'inputSearchText must be bound to an input element',
+      event.target instanceof HTMLInputElement,
+    );
+
+    this.inputSearchText = event.target.value;
+  }
+
+  @action
+  setAdministrativeUnit(unit: AdministrativeUnit) {
+    this.administrativeUnit = unit;
+  }
+
+  @action
+  async closeModal() {
+    await this.servicesResource.cancel();
+    this.args.closeModal();
+  }
+
+  search = restartableTask(async () => {
+    await timeout(500);
+
+    const abortController = new AbortController();
+
+    try {
+      const queryResult = await fetchWorshipServices({
+        administrativeUnitURI: this.administrativeUnit?.uri,
+        config: this.args.config,
+        searchMeta: {
+          abortSignal: abortController.signal,
+          filter: {
+            label: this.inputSearchText ?? undefined,
+          },
+          sort: this.sort,
+          page: this.pageNumber,
+          pageSize: this.pageSize,
+        },
+      });
+      this.error = undefined;
+
+      // Reset to first page if there are no results for this one e.g. when changing search
+      if (
+        this.pageNumber !== 0 &&
+        this.pageNumber * this.pageSize >= queryResult.totalCount
+      ) {
+        this.pageNumber = 0;
+      }
+
+      return queryResult;
+    } catch (error) {
+      this.error = error;
+      return {
+        results: [],
+        totalCount: 0,
+      };
+    } finally {
+      abortController.abort();
+    }
+  });
+
+  servicesResource = trackedTask(this, this.search, () => [
+    this.inputSearchText,
+    this.administrativeUnit,
+    this.pageNumber,
+    this.pageSize,
+    this.sort,
+  ]);
+
+  @action
+  setSort(sort: SearchSort) {
+    this.sort = sort;
+  }
+
+  @action
+  previousPage() {
+    --this.pageNumber;
+  }
+
+  @action
+  nextPage() {
+    ++this.pageNumber;
+  }
+}

package/addon/components/worship-plugin/sortable-table-header.hbs

@@ -0,0 +1,36 @@
+{{! @glint-nocheck: not typesafe yet }}
+{{!-- Based on au-data-table-th-sortable from ember-appuniversum and using the same classes --}}
+<span
+  class='au-c-data-table__header-title au-c-data-table__header-title--sortable
+    {{if this.order ' is-active'}}'
+>
+  {{@label}}
+  {{#if (eq this.order 'DESC')}}
+    <button
+      type='button'
+      {{on 'click' this.changeSort}}
+      class='au-c-data-table__sort'
+    >
+      <span class='au-u-hidden-visually'>{{t 'worship-plugin.modal.sort.asc'}}</span>
+      <AuIcon @icon={{this.NavUpIcon}} />
+    </button>
+  {{else if (eq this.order 'ASC')}}
+    <button
+      type='button'
+      {{on 'click' this.changeSort}}
+      class='au-c-data-table__sort'
+    >
+      <span class='au-u-hidden-visually'>{{t 'worship-plugin.modal.sort.desc'}}</span>
+      <AuIcon @icon={{this.NavDownIcon}} />
+    </button>
+  {{else}}
+    <button
+      type='button'
+      {{on 'click' this.changeSort}}
+      class='au-c-data-table__sort'
+    >
+      <span class='au-u-hidden-visually'>{{t 'worship-plugin.modal.sort.sort'}}</span>
+      <AuIcon @icon={{this.NavUpDownIcon}} />
+    </button>
+  {{/if}}
+</span>

package/addon/components/worship-plugin/sortable-table-header.ts

@@ -0,0 +1,45 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { NavUpIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-up';
+import { NavDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-down';
+import { NavUpDownIcon } from '@appuniversum/ember-appuniversum/components/icons/nav-up-down';
+import {
+  SearchSort,
+  WorshipService,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+
+interface Args {
+  label: string;
+  field: keyof WorshipService;
+  sort: SearchSort;
+  setSort: (sort: SearchSort) => void;
+}
+
+export default class SnippetInsertComponent extends Component<Args> {
+  NavUpIcon = NavUpIcon;
+  NavDownIcon = NavDownIcon;
+  NavUpDownIcon = NavUpDownIcon;
+
+  get order() {
+    if (this.args.sort) {
+      const [sortedField, order] = this.args.sort;
+      if (sortedField === this.args.field) {
+        return order;
+      }
+    }
+    return false;
+  }
+
+  @action changeSort() {
+    const order = this.order;
+    let newSort: SearchSort;
+    if (!order) {
+      newSort = [this.args.field, 'ASC'];
+    } else if (order === 'ASC') {
+      newSort = [this.args.field, 'DESC'];
+    } else {
+      newSort = false;
+    }
+    this.args.setSort(newSort);
+  }
+}

package/addon/plugins/article-structure-plugin/commands/insert-structure.ts

@@ -1,14 +1,69 @@
 import {
   Command,
+  EditorState,
   Fragment,
   NodeSelection,
   TextSelection,
+  Transaction,
 } from '@lblod/ember-rdfa-editor';
+import { getNodeByRdfaId } from '@lblod/ember-rdfa-editor/plugins/rdfa-info';
+import { addProperty } from '@lblod/ember-rdfa-editor/commands';
+import { isRdfaAttrs } from '@lblod/ember-rdfa-editor/core/schema';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import recalculateStructureNumbers from './recalculate-structure-numbers';
 import { StructureSpec } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin';
 import wrapStructureContent from './wrap-structure-content';
 import IntlService from 'ember-intl/services/intl';
 import { findInsertionRange } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/_private/find-insertion-range';
+import { SAY } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+const addPropertyToContainer = ({
+  state,
+  transaction,
+  structureSpec,
+  insertionRange,
+  newResource,
+}: {
+  state: EditorState;
+  transaction: Transaction;
+  structureSpec: StructureSpec;
+  insertionRange: Exclude<ReturnType<typeof findInsertionRange>, null>;
+  newResource: string;
+}) => {
+  if (!insertionRange) {
+    return transaction;
+  }
+
+  const containerAttrs = insertionRange.containerNode.attrs;
+
+  if (!isRdfaAttrs(containerAttrs)) {
+    return transaction;
+  }
+
+  const incoming = containerAttrs.backlinks;
+  const subject = incoming?.find((backlink) =>
+    SAY('body').matches(backlink.predicate),
+  )?.subject;
+
+  if (!subject) {
+    return transaction;
+  }
+
+  const newState = state.apply(transaction);
+  addProperty({
+    resource: subject.value,
+    property: {
+      predicate: (structureSpec.relationshipPredicate ?? SAY('hasPart'))
+        .prefixed,
+      object: sayDataFactory.resourceNode(newResource),
+    },
+    transaction,
+  })(newState, (newTransaction) => {
+    transaction = newTransaction;
+  });
+
+  return transaction;
+};
 
 const insertStructure = (
   structureSpec: StructureSpec,
@@ -31,28 +86,40 @@ const insertStructure = (
       return false;
     }
     if (dispatch) {
-      const { node: newStructureNode, selectionConfig } =
-        structureSpec.constructor({ schema, intl, content, state });
-      const transaction = state.tr;
+      const {
+        node: newStructureNode,
+        selectionConfig,
+        newResource,
+      } = structureSpec.constructor({ schema, intl, content, state });
+      let transaction = state.tr;
 
       transaction.replaceWith(
         insertionRange.from,
         insertionRange.to,
         newStructureNode,
       );
-      const newSelection =
-        selectionConfig.type === 'node'
-          ? NodeSelection.create(
-              transaction.doc,
-              insertionRange.from + selectionConfig.relativePos,
-            )
-          : TextSelection.create(
-              transaction.doc,
-              insertionRange.from + selectionConfig.relativePos,
-            );
-      transaction.setSelection(newSelection);
+      const target = getNodeByRdfaId(
+        state.apply(transaction),
+        selectionConfig.rdfaId,
+      );
+      if (target) {
+        const newSelection =
+          selectionConfig.type === 'node'
+            ? NodeSelection.create(transaction.doc, target.pos)
+            : TextSelection.create(transaction.doc, target.pos + 1);
+        transaction.setSelection(newSelection);
+      }
+
       transaction.scrollIntoView();
-      recalculateStructureNumbers(transaction, structureSpec);
+      recalculateStructureNumbers(transaction, schema, structureSpec);
+      transaction = addPropertyToContainer({
+        state,
+        transaction,
+        structureSpec,
+        insertionRange,
+        newResource,
+      });
+
       dispatch(transaction);
     }
     return true;

package/addon/plugins/article-structure-plugin/commands/move-selected-structure.ts

@@ -15,6 +15,7 @@ import IntlService from 'ember-intl/services/intl';
 import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
+
 const moveSelectedStructure = (
   options: ArticleStructurePluginOptions,
   direction: 'up' | 'down',
@@ -77,7 +78,7 @@ const moveSelectedStructure = (
         : TextSelection.create(transaction.doc, newSelectionPos);
       transaction.setSelection(newSelection);
       transaction.scrollIntoView();
-      recalculateStructureNumbers(transaction, currentStructureSpec);
+      recalculateStructureNumbers(transaction, schema, currentStructureSpec);
       dispatch(transaction);
     }
     return true;

package/addon/plugins/article-structure-plugin/commands/recalculate-structure-numbers.ts

@@ -1,15 +1,69 @@
-import { PNode, Transaction } from '@lblod/ember-rdfa-editor';
+import { PNode, Schema, Transaction } from '@lblod/ember-rdfa-editor';
+import { findNodeByRdfaId } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
+import { isRdfaAttrs } from '@lblod/ember-rdfa-editor/core/schema';
+import type { Resource } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { ELI } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { StructureSpec } from '..';
 
+type UpdateNumberProps = {
+  transaction: Transaction;
+  schema: Schema;
+  node: PNode;
+  number: string;
+  numberPredicate?: Resource;
+};
+
+function updateNumber({
+  transaction,
+  schema,
+  node,
+  number,
+  numberPredicate,
+}: UpdateNumberProps) {
+  const { attrs } = node;
+
+  if (isRdfaAttrs(attrs) && attrs.rdfaNodeType === 'resource') {
+    const properties = attrs.properties;
+    const numberProp = properties.find((prop) =>
+      (numberPredicate ?? ELI('number')).matches(prop.predicate),
+    );
+    const numberRdfaId =
+      numberProp?.object.termType === 'LiteralNode' && numberProp.object.value;
+    const numberNode =
+      numberRdfaId && findNodeByRdfaId(transaction.doc, numberRdfaId);
+
+    if (numberNode) {
+      transaction.replaceWith(
+        numberNode.pos + 1,
+        numberNode.pos + numberNode.value.nodeSize - 1,
+        schema.text(number),
+      );
+    }
+  }
+}
+
 export default function recalculateStructureNumbers(
   transaction: Transaction,
+  schema: Schema,
   ...structureSpecs: StructureSpec[]
 ) {
   const doc = transaction.doc;
   const indices = new Array<number>(structureSpecs.length).fill(1);
+
   const contexts: (PNode | null)[] = new Array<PNode | null>(
     structureSpecs.length,
   ).fill(null);
+
+  /**
+   * Recording all calls to `updateNumber` in an array to run them all
+   * _after_ we've run all the `setNumber` calls.
+   *
+   * This is necessary because `updateNumber` calls can change positions of the nodes
+   * in the document, and the calls to `setNumber` are dependent on the correct position
+   * before the change.
+   */
+  const updateNumberCalls: UpdateNumberProps[] = [];
+
   doc.descendants((node, pos, parent) => {
     structureSpecs.forEach((spec, i) => {
       if (node.type.name === spec.name) {
@@ -24,10 +78,24 @@ export default function recalculateStructureNumbers(
           indices[i] = startNumber;
         }
 
-        spec.updateNumber({ number: indices[i], pos, transaction });
+        spec.setNumber({ transaction, pos, number: indices[i] });
+
+        if ('convertNumber' in spec.numberConfig) {
+          updateNumberCalls.push({
+            transaction,
+            schema,
+            node,
+            number: spec.numberConfig.convertNumber(indices[i]),
+            numberPredicate: spec.numberConfig.numberPredicate,
+          });
+        }
+
         indices[i] += 1;
       }
     });
   });
+
+  updateNumberCalls.forEach(updateNumber);
+
   return transaction;
 }

package/addon/plugins/article-structure-plugin/commands/remove-structure.ts

@@ -11,7 +11,7 @@ const removeStructure = (
       const { pos, node } = structure;
       const transaction = state.tr;
       transaction.replace(pos, pos + node.nodeSize);
-      recalculateStructureNumbers(transaction, ...options);
+      recalculateStructureNumbers(transaction, state.schema, ...options);
       dispatch(transaction);
     }
     return true;

package/addon/plugins/article-structure-plugin/commands/set-structure-start-number.ts

@@ -1,26 +1,17 @@
-import { Command } from '@lblod/ember-rdfa-editor';
+import { Command, PNode } from '@lblod/ember-rdfa-editor';
 
-import { findAncestorOfType } from '../utils/structure';
 import type { ArticleStructurePluginOptions } from '..';
 import recalculateStructureNumbers from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/commands/recalculate-structure-numbers';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 const setStructureStartNumber = (
+  structure: { pos: number; node: PNode },
   options: ArticleStructurePluginOptions,
   startNumber: number | null,
 ): Command => {
   return (state, dispatch) => {
-    const { selection, schema } = state;
-
-    const structureSpecs = options.map((type) => schema.nodes[type.name]);
-    const currentStructure = findAncestorOfType(selection, ...structureSpecs);
-
-    if (!currentStructure || currentStructure.pos === -1) {
-      return false;
-    }
-
     const currentStructureSpec = unwrap(
-      options.find((spec) => spec.name === currentStructure.node.type.name),
+      options.find((spec) => spec.name === structure.node.type.name),
     );
 
     if (dispatch) {
@@ -28,11 +19,11 @@ const setStructureStartNumber = (
 
       currentStructureSpec.setStartNumber({
         number: startNumber,
-        pos: currentStructure.pos,
+        pos: structure.pos,
         transaction,
       });
 
-      recalculateStructureNumbers(transaction, ...options);
+      recalculateStructureNumbers(transaction, state.schema, ...options);
 
       dispatch(transaction);
     }

package/addon/plugins/article-structure-plugin/commands/unwrap-structure.ts

@@ -30,7 +30,7 @@ const unwrapStructure = (
     if (dispatch) {
       const transaction = state.tr;
       transaction.replaceWith(pos, pos + node.nodeSize, contentToUnwrap);
-      recalculateStructureNumbers(transaction, ...options);
+      recalculateStructureNumbers(transaction, state.schema, ...options);
       dispatch(transaction);
     }
     return true;