@lblod/ember-rdfa-editor-lblod-plugins 38.2.0 → 38.3.0

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

@@ -1,6 +1,13 @@
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { BestuursperiodeLabel } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { Person } from '../variable-plugin/variables';
+import {
+  ProsePlugin,
+  PluginKey,
+  EditorState,
+  EditorView,
+  Command,
+} from '@lblod/ember-rdfa-editor';
 
 export type LmbPluginConfig = {
   endpoint: string;
@@ -21,3 +28,80 @@ export function createPersonNode(controller: SayController, person: Person) {
   );
   return electeeNode;
 }
+
+type PluginState = {
+  modalOpen: boolean;
+};
+
+type LmbModalMeta =
+  | { action: 'open_lmb_modal' }
+  | { action: 'close_lmb_modal' }
+  | undefined;
+
+function isLmbModalMeta(meta: unknown): meta is LmbModalMeta {
+  if (!meta || typeof meta !== 'object') return false;
+  return 'action' in meta;
+}
+
+export const lmbModalsPluginKey = new PluginKey<PluginState>(
+  'LMB_MODALS_PLUGIN',
+);
+
+export function closeLmbModal(view: EditorView) {
+  const tr = view.state.tr;
+  tr.setMeta(lmbModalsPluginKey, { action: 'close_lmb_modal' });
+  view.dispatch(tr);
+}
+
+export function openLmbModal(view: EditorView) {
+  const tr = view.state.tr;
+  tr.setMeta(lmbModalsPluginKey, {
+    action: 'open_lmb_modal',
+  });
+  view.dispatch(tr);
+}
+
+export function openLmbModalCommand(): Command {
+  return function (state, dispatch) {
+    if (!dispatch) {
+      return false;
+    }
+    const tr = state.tr;
+    tr.setMeta(lmbModalsPluginKey, {
+      action: 'open_lmb_modal',
+    });
+    dispatch(tr);
+    return true;
+  };
+}
+
+export function lmbModalsPlugin() {
+  return new ProsePlugin<PluginState>({
+    key: lmbModalsPluginKey,
+    state: {
+      init() {
+        return { modalOpen: false };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(lmbModalsPluginKey);
+        if (!isLmbModalMeta(meta)) return pluginState;
+
+        if (meta?.action === 'open_lmb_modal') {
+          return {
+            modalOpen: true,
+          };
+        } else if (meta?.action === 'close_lmb_modal') {
+          return { modalOpen: false };
+        } else {
+          return pluginState;
+        }
+      },
+    },
+  });
+}
+
+export function getLmbModalsPluginState(
+  state: EditorState,
+): PluginState | undefined {
+  return lmbModalsPluginKey.getState(state);
+}

package/addon/plugins/location-plugin/contextual-actions/index.ts

@@ -3,12 +3,15 @@ import { v4 as uuidv4 } from 'uuid';
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 import { openLocationModalCommand } from '..';
 import { LocationType } from '@lblod/ember-rdfa-editor-lblod-plugins/components/location-plugin/map';
-import getDocumentLocations from '../utils/get-document-locations';
+import { getRankedPNodes } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/get-ranked-pnodes';
 import { replaceLocationCommand } from '../utils/replace-location';
 import { Area, Place } from '../utils/geo-helpers';
 import { Address } from '../utils/address-helpers';
 import { getLocationUri } from '../_private/utils/location-helpers';
-import { ContextualActionGroup } from '@lblod/ember-rdfa-editor/plugins/contextual-actions';
+import {
+  ContextualAction,
+  ContextualActionGroup,
+} from '@lblod/ember-rdfa-editor/plugins/contextual-actions';
 
 const otherElementsGroupId =
   'other-elements-e01f46a0-b323-4add-8035-d81dc2e8578d';
@@ -29,14 +32,17 @@ function getLocationSuggestionOptions(state: EditorState) {
     | Area
     | undefined;
 
-  return getDocumentLocations(state)
+  return getRankedPNodes(state, 'oslo_location', (node) =>
+    getLocationUri(node.attrs.value),
+  )
+    .map((rankedNode) => rankedNode.node.value.attrs.value)
     .filter(
       (location) =>
         !selectedLocation ||
         getLocationUri(selectedLocation) !== getLocationUri(location),
     )
     .slice(0, SUGGESTION_AMOUNT)
-    .map((location) => ({
+    .map((location: Address | Area | Place) => ({
       label: location.formatted,
       id: uuidv4(),
       group: recentLocationsGroupId,
@@ -87,7 +93,7 @@ function getOtherElementsOptions(state: EditorState) {
 
 export function getContextualActions(type: 'suggestions' | 'other_elements') {
   return function (state: EditorState, searchQuery?: string) {
-    const options =
+    const options: ContextualAction[] =
       type === 'suggestions'
         ? getLocationSuggestionOptions(state)
         : getOtherElementsOptions(state);

package/addon/plugins/location-plugin/utils/replace-location.ts

@@ -1,41 +1,13 @@
 import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 import { Address } from './address-helpers';
 import { Area, Place } from './geo-helpers';
-import {
-  EditorState,
-  Transaction,
-  NodeSelection,
-  TextSelection,
-  PNode,
-  Selection,
-  Command,
-} from '@lblod/ember-rdfa-editor';
+import { EditorState, Transaction, Command } from '@lblod/ember-rdfa-editor';
 import type { FullTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
 import { PROV } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { SayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
 import { updateSubject } from '@lblod/ember-rdfa-editor/plugins/rdfa-info/utils';
-
-function moveNodeSelectionForward(selection: Selection, doc: PNode) {
-  if (!(selection instanceof NodeSelection)) {
-    return selection;
-  }
-
-  const $from = selection.$from;
-
-  const index = $from.index();
-  const parent = $from.parent;
-
-  if (index + 1 < parent.childCount) {
-    const nextPos = selection.from + selection.node.nodeSize;
-
-    return NodeSelection.create(doc, nextPos);
-  } else {
-    const posAfter = selection.to;
-
-    return TextSelection.create(doc, posAfter);
-  }
-}
+import { moveNodeSelectionForward } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/move-node-selection-forward';
 
 export function replaceLocationCommand(
   node: ResolvedPNode,

package/addon/plugins/variable-plugin/contextual-actions/person.ts

@@ -0,0 +1,140 @@
+import { EditorState, NodeSelection } from '@lblod/ember-rdfa-editor';
+import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
+import { getRankedPNodes } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/get-ranked-pnodes';
+import { ContextualActionGroup } from '@lblod/ember-rdfa-editor/plugins/contextual-actions';
+import { getPersonFromPNode } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables/person';
+import { v4 as uuidv4 } from 'uuid';
+import { replacePersonCommand } from '../utils/replace-person';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+import { type ContextualAction } from '@lblod/ember-rdfa-editor/plugins/contextual-actions/index';
+import { LmbPluginConfig, openLmbModalCommand } from '../../lmb-plugin';
+import { fetchElectees } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin/utils/fetchElectees';
+import { BESTUURSPERIODES } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+const PERSON_SUGGESTIONS_GROUP_ID =
+  'person-suggestions-9cc92bb6-de78-41cf-824c-ed391b206764';
+
+const OTHER_ELEMENTS_GROUP_ID =
+  'person-other-elements-5c66b28f-22ff-4f0a-bd24-4f90cdc5a64a';
+
+const ASYNC_SEARCH_GROUP_ID =
+  'person-async-search-5545e1fa-aa23-4a77-8c5d-b97481d58fc4';
+
+const SUGGESTION_AMOUNT = 15;
+const SEARCH_PAGE_SIZE = 20;
+
+function getOtherElementsActions(state: EditorState) {
+  const translate = getTranslationFunction(state);
+  return [
+    {
+      label: translate(
+        'variable-plugin.person.advanced-search',
+        'Geavanceerd zoeken',
+      ),
+      id: uuidv4(),
+      group: OTHER_ELEMENTS_GROUP_ID,
+      command: openLmbModalCommand(),
+      icon: 'search',
+    },
+  ];
+}
+
+function getSuggestionsActions(state: EditorState) {
+  const selectedNode = getSelectedPersonNode(state);
+  if (!selectedNode) return [];
+  return getRankedPNodes(state, 'person_variable', (node) => node.attrs.subject)
+    .map((rankedNode) => rankedNode.node)
+    .filter(
+      (node) => selectedNode.value.attrs.subject !== node.value.attrs.subject,
+    )
+    .slice(0, SUGGESTION_AMOUNT)
+    .flatMap((node) => {
+      const person = getPersonFromPNode(node.value);
+      if (!person) return [];
+      return [
+        {
+          label: person.fullName,
+          id: uuidv4(),
+          group: PERSON_SUGGESTIONS_GROUP_ID,
+          command: replacePersonCommand(selectedNode, person),
+        },
+      ];
+    });
+}
+
+function getAsyncSearchActionsGetter(args: LmbPluginConfig) {
+  return async function getAsyncSearchActions(
+    state: EditorState,
+    searchQuery?: string,
+  ) {
+    const selectedNode = getSelectedPersonNode(state);
+    if (!searchQuery || !selectedNode) return [];
+
+    const persons = await fetchElectees({
+      endpoint: args.endpoint,
+      page: 0,
+      pageSize: SEARCH_PAGE_SIZE,
+      searchString: searchQuery,
+      adminUnitSearch: args.defaultAdminUnit ?? '',
+      sort: false,
+      period:
+        args.defaultPeriod ?? Object.values(BESTUURSPERIODES).at(-1) ?? '',
+    });
+    return persons.electees.map((person) => ({
+      label: person.fullName,
+      id: uuidv4(),
+      group: ASYNC_SEARCH_GROUP_ID,
+      command: replacePersonCommand(selectedNode, person),
+    }));
+  };
+}
+
+function makeSearchable(
+  actionGetter: (state: EditorState) => ContextualAction[],
+) {
+  return function (state: EditorState, searchQuery?: string) {
+    return actionGetter(state).filter(
+      (option) =>
+        !searchQuery ||
+        option.label.toLocaleLowerCase().includes(searchQuery.toLowerCase()),
+    );
+  };
+}
+
+function getSelectedPersonNode(state: EditorState): ResolvedPNode | null {
+  const { selection } = state;
+  return selection instanceof NodeSelection &&
+    selection.node.type === selection.node.type.schema.nodes['person_variable']
+    ? { value: selection.node, pos: selection.from }
+    : null;
+}
+
+export function getPersonActionGroups(args: LmbPluginConfig) {
+  return function (state: EditorState): ContextualActionGroup[] {
+    const selectedNode = getSelectedPersonNode(state);
+    if (!selectedNode) return [];
+    const t = getTranslationFunction(state);
+    return [
+      {
+        id: PERSON_SUGGESTIONS_GROUP_ID,
+        label: t('variable-plugin.person.suggestions', 'Suggesties'),
+        getActions: makeSearchable(getSuggestionsActions),
+      },
+      {
+        id: OTHER_ELEMENTS_GROUP_ID,
+        getActions: getOtherElementsActions,
+        sticky: 'bottom',
+      },
+      {
+        id: ASYNC_SEARCH_GROUP_ID,
+        priority: 10,
+        getActions: getAsyncSearchActionsGetter(args),
+        searchDebounceMs: 300,
+        loadingMessage: t(
+          'variable-plugin.person.searching',
+          'Aan het zoeken…',
+        ),
+      },
+    ];
+  };
+}

package/addon/plugins/variable-plugin/utils/replace-person.ts

@@ -0,0 +1,64 @@
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
+import { EditorState, Transaction, Command } from '@lblod/ember-rdfa-editor';
+import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
+import {
+  addPropertyToNode,
+  updateSubject,
+} from '@lblod/ember-rdfa-editor/plugins/rdfa-info/utils';
+import { FOAF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import { moveNodeSelectionForward } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/move-node-selection-forward';
+import { Person } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables/person';
+
+export function getReplacePersonTransaction(
+  state: EditorState,
+  personNode: ResolvedPNode,
+  newPerson: Person,
+) {
+  return transactionCombinator(state)([
+    updateSubject({
+      pos: personNode.pos,
+      targetSubject: newPerson.uri,
+      keepBacklinks: true,
+      keepProperties: false,
+      keepExternalTriples: true,
+    }),
+    addPropertyToNode({
+      resource: newPerson.uri,
+      property: {
+        predicate: FOAF('givenName').full,
+        object: sayDataFactory.literal(newPerson.firstName),
+      },
+    }),
+    addPropertyToNode({
+      resource: newPerson.uri,
+      property: {
+        predicate: FOAF('familyName').full,
+        object: sayDataFactory.literal(newPerson.lastName),
+      },
+    }),
+  ]);
+}
+
+export function replacePersonCommand(
+  node: ResolvedPNode,
+  newPerson: Person,
+): Command {
+  return function (state: EditorState, dispatch?: (tr: Transaction) => void) {
+    const { transaction, result } = getReplacePersonTransaction(
+      state,
+      node,
+      newPerson,
+    );
+    if (dispatch) {
+      const newSelection = moveNodeSelectionForward(
+        state.selection.map(transaction.doc, transaction.mapping),
+        transaction.doc,
+      );
+      transaction.setSelection(newSelection);
+      dispatch(transaction);
+    }
+
+    return result.every((res) => res);
+  };
+}

package/addon/plugins/variable-plugin/variables/person.ts

@@ -24,7 +24,10 @@ import {
   getOutgoingTriple,
   hasOutgoingNamedNodeTriple,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import { renderRdfaAware } from '@lblod/ember-rdfa-editor/core/schema';
+import {
+  isRdfaAttrs,
+  renderRdfaAware,
+} from '@lblod/ember-rdfa-editor/core/schema';
 import { getTranslationFunction } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/translation';
 import { createPersonVariableAttrs } from '../actions/create-person-variable';
 
@@ -156,6 +159,32 @@ const serialize = (node: PNode, state: EditorState): DOMOutputSpec => {
   });
 };
 
+export function getPersonFromPNode(
+  node: PNode,
+): (Person & { fullName: string }) | null {
+  if (
+    node.type !== node.type.schema.nodes['person_variable'] ||
+    !isRdfaAttrs(node.attrs) ||
+    node.attrs.rdfaNodeType !== 'resource'
+  )
+    return null;
+
+  const { subject, properties } = node.attrs;
+  const firstName = properties.find((property) =>
+    FOAF('givenName').matches(property.predicate),
+  )?.object.value;
+  const lastName = properties.find((property) =>
+    FOAF('familyName').matches(property.predicate),
+  )?.object.value;
+  const fullName = firstName || lastName ? [firstName, lastName].join(' ') : '';
+  return {
+    uri: subject,
+    firstName: firstName ?? '',
+    lastName: lastName ?? '',
+    fullName,
+  };
+}
+
 const emberNodeConfig: EmberNodeConfig = {
   name: 'person-variable',
   component: PersonNodeViewComponent as unknown as ComponentLike,

package/addon/{plugins/location-plugin/utils/get-document-locations.ts → utils/get-ranked-pnodes.ts}

@@ -1,18 +1,11 @@
-import { EditorState } from '@lblod/ember-rdfa-editor';
-import { Area, Place } from './geo-helpers';
-import { Address } from './address-helpers';
-import { getLocationUri } from '../_private/utils/location-helpers';
+import { EditorState, type PNode } from '@lblod/ember-rdfa-editor';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 
-type LocationsWithDistanceType = {
-  location: Place | Address | Area;
-  distance: number;
-};
-
-type LocationMetadataType = {
-  [locationUri: string]: {
+type NodeMetadataType = {
+  [uri: string]: {
+    node: ResolvedPNode;
     occurrences: number;
     distance: number;
-    location: Address | Place | Area;
   };
 };
 
@@ -50,60 +43,67 @@ function getSuggestionScore(
   return score;
 }
 
-export default function getDocumentLocations(state: EditorState) {
+export function getRankedPNodes(
+  state: EditorState,
+  nodeType: string,
+  getUri: (node: PNode) => string,
+): {
+  node: ResolvedPNode;
+  score: number;
+}[] {
   const doc = state.doc;
-  const locationsWithDistance: LocationsWithDistanceType[] = [];
+  const nodesWithDistance: { node: ResolvedPNode; distance: number }[] = [];
   const selection = state.selection;
   doc.descendants((node, pos) => {
-    if (node.type.name === 'oslo_location') {
+    if (node.type.name === nodeType) {
       const distance = Math.abs(pos - selection.from);
-      locationsWithDistance.push({
-        location: node.attrs.value,
+      nodesWithDistance.push({
+        node: { value: node, pos },
         distance: distance,
       });
       return false;
     }
     return true;
   });
-  const locationMetadata: LocationMetadataType = {};
-  for (const locationWithDistance of locationsWithDistance) {
-    const { location, distance } = locationWithDistance;
-    if (!location) {
+  const nodeMetadata: NodeMetadataType = {};
+  for (const nodeWithDistance of nodesWithDistance) {
+    const { node, distance } = nodeWithDistance;
+    const uri = getUri(node.value);
+    if (!uri) {
       continue;
     }
-    const uri = getLocationUri(location);
-    if (!locationMetadata[uri]) {
-      locationMetadata[uri] = {
-        location,
+    if (!nodeMetadata[uri]) {
+      nodeMetadata[uri] = {
+        node,
         occurrences: 1,
         distance,
       };
     } else {
-      locationMetadata[uri].occurrences++;
-      if (distance < locationMetadata[uri].distance) {
-        locationMetadata[uri].distance = distance;
+      nodeMetadata[uri].occurrences++;
+      if (distance < nodeMetadata[uri].distance) {
+        nodeMetadata[uri].distance = distance;
       }
     }
   }
 
-  const maxOccurence = Object.values(locationMetadata).reduce(
+  const maxOccurence = Object.values(nodeMetadata).reduce(
     (acc, { occurrences: ocurrences }) =>
       acc >= ocurrences ? acc : ocurrences,
     1,
   );
 
-  const scoredLocations = Object.values(locationMetadata).map(
-    ({ location, occurrences, distance }) => ({
-      location,
+  const scoredNodes = Object.values(nodeMetadata).map(
+    ({ node, occurrences, distance }) => ({
+      node,
       score: getSuggestionScore(occurrences, maxOccurence, distance),
       occurrences,
       distance,
     }),
   );
 
-  scoredLocations.sort(({ score: scoreA }, { score: scoreB }) => {
+  scoredNodes.sort(({ score: scoreA }, { score: scoreB }) => {
     return scoreB - scoreA;
   });
 
-  return scoredLocations.map(({ location }) => location);
+  return scoredNodes;
 }

package/addon/utils/move-node-selection-forward.ts

@@ -0,0 +1,27 @@
+import {
+  Selection,
+  type PNode,
+  NodeSelection,
+  TextSelection,
+} from '@lblod/ember-rdfa-editor';
+
+export function moveNodeSelectionForward(selection: Selection, doc: PNode) {
+  if (!(selection instanceof NodeSelection)) {
+    return selection;
+  }
+
+  const $from = selection.$from;
+
+  const index = $from.index();
+  const parent = $from.parent;
+
+  if (index + 1 < parent.childCount) {
+    const nextPos = selection.from + selection.node.nodeSize;
+
+    return NodeSelection.create(doc, nextPos);
+  } else {
+    const posAfter = selection.to;
+
+    return TextSelection.create(doc, posAfter);
+  }
+}

package/app/styles/variable-plugin.scss

@@ -172,3 +172,13 @@
   background-color: var(--au-orange-300);
   font-style: italic;
 }
+
+#say-date-edit-info-modal-button {
+  border: 0.1rem solid var(--au-gray-300);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+#say-date-edit-scrollable-part {
+  overflow-y: auto;
+}

package/declarations/addon/components/lmb-plugin/insert.d.ts

@@ -11,7 +11,7 @@ interface Args {
 export default class LmbPluginInsertComponent extends Component<Args> {
     intl: IntlService;
     AddIcon: import("@ember/component/template-only").TOC<import("@appuniversum/ember-appuniversum/components/icons/add").AddIconSignature>;
-    showModal: boolean;
+    get showModal(): boolean | undefined;
     get controller(): SayController;
     openModal(): void;
     closeModal(): void;

package/declarations/addon/components/variable-plugin/date/date-picker.d.ts

@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+import Intl from 'ember-intl/services/intl';
+type Sig = {
+    Args: {
+        value?: Date | null;
+        onChange: (date: Date) => void;
+    };
+};
+export default class DatePickerComponent extends Component<Sig> {
+    intl: Intl;
+    date?: Date;
+    get datePickerLocalization(): {
+        buttonLabel: string;
+        selectedDateMessage: string;
+        prevMonthLabel: string;
+        nextMonthLabel: string;
+        monthSelectLabel: string;
+        yearSelectLabel: string;
+        closeLabel: string;
+        calendarHeading: string;
+        dayNames: DayNames;
+        monthNames: MonthNames;
+        monthNamesShort: MonthNames;
+        placeholder: string;
+        locale: string;
+    };
+    onChangeDate(_isoDate: unknown | null, date: Date | null): void;
+}
+type MonthNames = [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string
+];
+type DayNames = [string, string, string, string, string, string, string];
+export {};