@lblod/ember-rdfa-editor-lblod-plugins 28.1.0 → 28.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 28.2.0
+
+### Minor Changes
+
+- [#553](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/553) [`50831e0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/50831e01cfa5d8101c72e8cc3d98b304a8b86646) Thanks [@piemonkey](https://github.com/piemonkey)! - Add re-usable component for selecting a decision type
+
+### Patch Changes
+
+- [#553](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/553) [`03f4ce0`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/03f4ce0864550cfc947f8ff7504aeac8b0300ae9) Thanks [@piemonkey](https://github.com/piemonkey)! - Fix undo behaviour when changing decision type
+
 ## 28.1.0
 
 ### Minor Changes

package/addon/components/besluit-type-plugin/besluit-type-form.gts

@@ -0,0 +1,68 @@
+import Component from '@glimmer/component';
+import { type BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+import BesluitTypeSelect from '@lblod/ember-rdfa-editor-lblod-plugins/components/besluit-type-plugin/besluit-type-select';
+import { type BesluitTypeInstance } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/besluit-type-instances';
+
+interface Sig {
+  Args: {
+    types: BesluitType[];
+    selectedType?: BesluitTypeInstance;
+    setType: (selected: BesluitTypeInstance) => void;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Sig> {
+  updateParentType = (selected: BesluitType) => {
+    this.args.setType({ parent: selected });
+  };
+
+  updateSubType = (selected: BesluitType) => {
+    if (this.args.selectedType) {
+      this.args.setType({
+        parent: this.args.selectedType.parent,
+        subType: selected,
+      });
+    }
+  };
+
+  updateSubSubType = (selected: BesluitType) => {
+    if (this.args.selectedType) {
+      this.args.setType({
+        parent: this.args.selectedType.parent,
+        subType: this.args.selectedType.subType,
+        subSubType: selected,
+      });
+    }
+  };
+
+  <template>
+    <div ...attributes>
+      <BesluitTypeSelect
+        @fieldNameTranslation='besluit-type-plugin.dt'
+        @besluitTypes={{@types}}
+        @onchange={{this.updateParentType}}
+        @selected={{@selectedType.parent}}
+        @showWarningWhenEmpty={{false}}
+      />
+      {{#if @selectedType.parent.subTypes.length}}
+        <BesluitTypeSelect
+          @fieldNameTranslation='besluit-type-plugin.sub-type'
+          @besluitTypes={{@selectedType.parent.subTypes}}
+          @onchange={{this.updateSubType}}
+          @selected={{@selectedType.subType}}
+          @showWarningWhenEmpty={{true}}
+        />
+      {{/if}}
+      {{#if @selectedType.subType.subTypes.length}}
+        <BesluitTypeSelect
+          @fieldNameTranslation='besluit-type-plugin.sub-type'
+          @besluitTypes={{@selectedType.subType.subTypes}}
+          @onchange={{this.updateSubSubType}}
+          @selected={{@selectedType.subSubType}}
+          @showWarningWhenEmpty={{true}}
+        />
+      {{/if}}
+    </div>
+  </template>
+}

package/addon/components/besluit-type-plugin/besluit-type-select.gts

@@ -0,0 +1,80 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import t from 'ember-intl/helpers/t';
+import PowerSelect from 'ember-power-select/components/power-select';
+import { v4 as uuidv4 } from 'uuid';
+import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { type BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+
+interface Sig {
+  Args: {
+    fieldNameTranslation: string;
+    besluitTypes: BesluitType[];
+    selected?: BesluitType;
+    showWarningWhenEmpty: boolean;
+    onchange: (selected: BesluitType) => void;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Sig> {
+  @tracked besluitTypes;
+
+  constructor(parent: unknown, args: Sig['Args']) {
+    super(parent, args);
+    this.besluitTypes = this.args.besluitTypes.sort((a, b) =>
+      a.label > b.label ? 1 : -1,
+    );
+  }
+
+  get showWarning() {
+    return this.args.showWarningWhenEmpty && !this.args.selected;
+  }
+
+  search = (term: string) => {
+    const lowerTerm = term.toLowerCase();
+    return this.args.besluitTypes.filter((besluitType) =>
+      besluitType.label.toLowerCase().includes(lowerTerm),
+    );
+  };
+
+  <template>
+    <div ...attributes>
+      {{#let (uuidv4) as |id|}}
+        <AuLabel for={{id}}>
+          {{t @fieldNameTranslation}}
+        </AuLabel>
+        <PowerSelect
+          id={{id}}
+          @renderInPlace={{true}}
+          @searchEnabled={{true}}
+          @searchMessage={{t 'besluit-type-plugin.search-message'}}
+          @noMatchesMessage={{t 'besluit-type-plugin.no-matches-message'}}
+          @search={{this.search}}
+          @options={{this.besluitTypes}}
+          @selected={{@selected}}
+          @onChange={{@onchange}}
+          as |besluitType|
+        >
+          {{besluitType.label}}
+        </PowerSelect>
+      {{/let}}
+      <p class='au-u-muted au-u-margin-tiny au-u-margin-bottom-small'>
+        {{@selected.definition}}
+      </p>
+      {{#if this.showWarning}}
+        <AuAlert
+          @icon={{AlertTriangleIcon}}
+          @title={{t 'besluit-type-plugin.alert-title'}}
+          @skin='warning'
+          @size='small'
+          class='au-u-margin-bottom-none au-u-margin-top-small'
+        >
+          <p>{{t 'besluit-type-plugin.alert-body'}}</p>
+        </AuAlert>
+      {{/if}}
+    </div>
+  </template>
+}

package/addon/components/besluit-type-plugin/toolbar-dropdown.gts

@@ -0,0 +1,191 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+// eslint-disable-next-line ember/no-at-ember-render-modifiers
+import didUpdate from '@ember/render-modifiers/modifiers/did-update';
+import { trackedFunction } from 'reactiveweb/function';
+import t from 'ember-intl/helpers/t';
+import AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
+import AuModal from '@appuniversum/ember-appuniversum/components/au-modal';
+import AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
+import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
+import { MailIcon } from '@appuniversum/ember-appuniversum/components/icons/mail';
+import { CircleXIcon } from '@appuniversum/ember-appuniversum/components/icons/circle-x';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import fetchBesluitTypes from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import {
+  BesluitTypeInstance,
+  checkBesluitTypeInstance,
+  mostSpecificBesluitType,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/besluit-type-instances';
+import BesluitTypeForm from '@lblod/ember-rdfa-editor-lblod-plugins/components/besluit-type-plugin/besluit-type-form';
+import { setBesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/set-besluit-type';
+
+type Args = {
+  controller: SayController;
+  options: BesluitTypePluginOptions;
+};
+
+export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
+  @tracked selectedTypeInstance?: BesluitTypeInstance;
+  @tracked cardExpanded = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  types = trackedFunction(this, async () => {
+    const types = await fetchBesluitTypes(
+      this.args.options.classificatieUri,
+      this.args.options.endpoint,
+    );
+    return types;
+  });
+
+  get currentBesluitRange() {
+    return getCurrentBesluitRange(this.controller);
+  }
+
+  get showCard() {
+    return !!this.currentBesluitRange;
+  }
+
+  get selectedType() {
+    return (
+      this.selectedTypeInstance &&
+      mostSpecificBesluitType(this.selectedTypeInstance)
+    );
+  }
+
+  toggleCard = () => {
+    this.cardExpanded = !this.cardExpanded;
+  };
+
+  setType = (type: BesluitTypeInstance) => {
+    this.selectedTypeInstance = type;
+    this.insertIfValid();
+  };
+
+  updateBesluitTypes = () => {
+    if (!this.types.isFinished || !this.currentBesluitRange) {
+      return;
+    }
+    if (!this.types.value) {
+      console.warn('Request for besluit types failed');
+      return;
+    }
+    const typeInstance = checkBesluitTypeInstance(
+      this.controller.mainEditorState,
+      this.types.value,
+    );
+    if (typeInstance) {
+      this.selectedTypeInstance = typeInstance;
+      this.cardExpanded = false;
+    } else {
+      this.cardExpanded = true;
+    }
+  };
+
+  insertIfValid() {
+    this.controller.doCommand((state, dispatch) => {
+      if (!this.selectedTypeInstance || !dispatch) {
+        return false;
+      }
+      const { result, transaction } = setBesluitType(
+        state,
+        this.selectedTypeInstance,
+      );
+      if (result.every((ok) => ok)) {
+        dispatch(transaction);
+        return true;
+      }
+      return false;
+    });
+  }
+
+  <template>
+    <div
+      {{didUpdate this.updateBesluitTypes @controller.mainEditorState}}
+      {{didUpdate this.updateBesluitTypes this.types.value}}
+    >
+      {{#if this.showCard}}
+        {{#if this.types.isError}}
+          <AuPill
+            @skin='error'
+            @icon={{CircleXIcon}}
+            @iconAlignment='left'
+            class='au-c-pill--link besluit-toolbar-pill'
+            {{on 'click' this.toggleCard}}
+            title={{t 'besluit-type-plugin.insert-dt'}}
+          >
+            {{t 'besluit-type-plugin.error-short'}}
+          </AuPill>
+        {{else}}
+          {{#if this.selectedType.label}}
+            <AuPill
+              @skin='link'
+              {{on 'click' this.toggleCard}}
+              title={{t 'besluit-type-plugin.insert-dt'}}
+            >
+              {{t 'besluit-type-plugin.dt'}}:
+              {{this.selectedType.label}}
+            </AuPill>
+          {{else}}
+            <AuPill
+              @icon={{AlertTriangleIcon}}
+              @iconAlignment='left'
+              @skin='link'
+              {{on 'click' this.toggleCard}}
+              title={{t 'besluit-type-plugin.insert-dt'}}
+            >
+              {{t 'besluit-type-plugin.insert-dt'}}
+            </AuPill>
+          {{/if}}
+        {{/if}}
+      {{/if}}
+      {{#if this.cardExpanded}}
+        <AuModal
+          @title={{t 'besluit-type-plugin.insert-dt'}}
+          @closeModal={{this.toggleCard}}
+          @modalOpen={{true}}
+          class='au-c-modal--overflow'
+          as |Modal|
+        >
+          <Modal.Body>
+            {{#if this.types.isError}}
+              <AuAlert
+                @title={{t 'besluit-type-plugin.error-title'}}
+                @skin='error'
+                @icon={{CrossIcon}}
+              >
+                <p>
+                  {{t 'besluit-type-plugin.error-first-body'}}
+                  {{! template-lint-disable no-bare-strings  }}
+                  <AuLinkExternal
+                    href='mailto:gelinktnotuleren@vlaanderen.be'
+                    @icon={{MailIcon}}
+                    @iconAlignment='left'
+                  >
+                    GelinktNotuleren@vlaanderen.be
+                  </AuLinkExternal>
+                  {{! template-lint-enable no-bare-strings  }}
+                  {{t 'besluit-type-plugin.error-rest-body'}}
+                </p>
+              </AuAlert>
+            {{else if this.types.value}}
+              <BesluitTypeForm
+                @types={{this.types.value}}
+                @selectedType={{this.selectedTypeInstance}}
+                @setType={{this.setType}}
+              />
+            {{/if}}
+          </Modal.Body>
+        </AuModal>
+      {{/if}}
+    </div>
+  </template>
+}

package/addon/plugins/besluit-type-plugin/utils/besluit-type-instances.ts

@@ -0,0 +1,100 @@
+import { type EditorState } from '@lblod/ember-rdfa-editor';
+import { getOutgoingTripleList } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import { RDF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { type BesluitType } from './fetchBesluitTypes';
+import { type NamedNodeTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
+
+export interface BesluitTypeInstance {
+  parent: BesluitType;
+  subType?: BesluitType;
+  subSubType?: BesluitType;
+}
+
+export function extractBesluitTypeUris(editorState: EditorState): string[] {
+  const besluitRange = getCurrentBesluitRange(editorState);
+  if (!besluitRange) {
+    return [];
+  }
+  return getOutgoingTripleList(besluitRange.node.attrs, RDF('type'))
+    .filter(
+      (type) =>
+        type.object.termType === 'NamedNode' &&
+        type.object.value.includes(
+          'https://data.vlaanderen.be/id/concept/BesluitType/',
+        ),
+    )
+    .map((type: NamedNodeTriple) => type?.object.value);
+}
+
+/**
+ * Finds a decision type in the document and checks that it represents a valid decision type
+ * according to the list of types passed in.
+ */
+export function checkBesluitTypeInstance(
+  editorState: EditorState,
+  types: BesluitType[],
+): BesluitTypeInstance | false {
+  const besluitTypes = extractBesluitTypeUris(editorState);
+
+  if (besluitTypes.length === 0) {
+    return false;
+  } else if (besluitTypes.length !== 1) {
+    console.warn(
+      "More than one decision type found for document, we don't support this and will just take the first one",
+      besluitTypes,
+    );
+  }
+  const typeHierarchy = findBesluitTypeHierarchy(types, besluitTypes[0]);
+
+  return (
+    !!typeHierarchy && {
+      parent: typeHierarchy[0],
+      subType: typeHierarchy[1],
+      subSubType: typeHierarchy[2],
+    }
+  );
+}
+
+function findBesluitTypeHierarchy(
+  types: BesluitType[],
+  uri: string,
+): BesluitType[] | undefined {
+  for (const type of types) {
+    if (type.uri === uri) {
+      return [type];
+    } else if (type.subTypes?.length) {
+      const subTypes = findBesluitTypeHierarchy(type.subTypes, uri);
+      if (subTypes) {
+        return [type, ...subTypes];
+      }
+    }
+  }
+  return;
+}
+
+/**
+ * Checks that the passed type instance has all of the necessary sub-types selected (and no more)
+ */
+export function isValidTypeChoice({
+  parent,
+  subType,
+  subSubType,
+}: BesluitTypeInstance) {
+  if (!parent.subTypes || parent.subTypes.length === 0) {
+    return !subType && !subSubType;
+  }
+  if (!subType) {
+    return false;
+  }
+  if (!subType.subTypes || subType.subTypes.length === 0) {
+    return !subSubType;
+  }
+  return !!subSubType;
+}
+
+export function mostSpecificBesluitType(
+  typeInstance: BesluitTypeInstance,
+): BesluitType {
+  return typeInstance.subSubType ?? typeInstance.subType ?? typeInstance.parent;
+}

package/addon/plugins/besluit-type-plugin/utils/set-besluit-type.ts

@@ -0,0 +1,57 @@
+import { type EditorState } from '@lblod/ember-rdfa-editor';
+import {
+  transactionCombinator,
+  type TransactionCombinatorResult,
+} from '@lblod/ember-rdfa-editor/utils/transaction-utils';
+import {
+  addPropertyToNode,
+  removePropertyFromNode,
+} from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import { getCurrentBesluitURI } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import {
+  extractBesluitTypeUris,
+  isValidTypeChoice,
+  mostSpecificBesluitType,
+  type BesluitTypeInstance,
+} from './besluit-type-instances';
+import { RDF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+export function setBesluitType(
+  initialState: EditorState,
+  typeInstance: BesluitTypeInstance,
+): TransactionCombinatorResult<boolean> {
+  const transaction = initialState.tr;
+
+  const resource = getCurrentBesluitURI(initialState);
+  if (!resource || !isValidTypeChoice(typeInstance)) {
+    return {
+      result: [false],
+      initialState,
+      transaction,
+      transactions: [transaction],
+    };
+  }
+  const existingTypeUris = extractBesluitTypeUris(initialState);
+  const monads = existingTypeUris.map((existingUri) => {
+    return removePropertyFromNode({
+      resource,
+      property: {
+        predicate: RDF('type').full,
+        object: sayDataFactory.namedNode(existingUri),
+      },
+    });
+  });
+  monads.push(
+    addPropertyToNode({
+      resource,
+      property: {
+        predicate: RDF('type').full,
+        object: sayDataFactory.namedNode(
+          mostSpecificBesluitType(typeInstance).uri,
+        ),
+      },
+    }),
+  );
+  return transactionCombinator<boolean>(initialState)(monads);
+}

package/app/components/besluit-type-plugin/besluit-type-form.js

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

package/declarations/addon/components/besluit-type-plugin/besluit-type-form.d.ts

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { type BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+import { type BesluitTypeInstance } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/besluit-type-instances';
+interface Sig {
+    Args: {
+        types: BesluitType[];
+        selectedType?: BesluitTypeInstance;
+        setType: (selected: BesluitTypeInstance) => void;
+    };
+    Element: HTMLDivElement;
+}
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Sig> {
+    updateParentType: (selected: BesluitType) => void;
+    updateSubType: (selected: BesluitType) => void;
+    updateSubSubType: (selected: BesluitType) => void;
+}
+export {};

package/declarations/addon/components/besluit-type-plugin/besluit-type-select.d.ts

@@ -1,12 +1,19 @@
 import Component from '@glimmer/component';
-import { BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
-type Args = {
-    besluitTypes: BesluitType[];
-};
-export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Args> {
-    AlertTriangleIcon: import("@ember/component/template-only").TOC<import("@appuniversum/ember-appuniversum/components/icons/alert-triangle").AlertTriangleIconSignature>;
+import { type BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+interface Sig {
+    Args: {
+        fieldNameTranslation: string;
+        besluitTypes: BesluitType[];
+        selected?: BesluitType;
+        showWarningWhenEmpty: boolean;
+        onchange: (selected: BesluitType) => void;
+    };
+    Element: HTMLDivElement;
+}
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Sig> {
     besluitTypes: BesluitType[];
-    constructor(parent: unknown, args: Args);
-    search(term: string): BesluitType[];
+    constructor(parent: unknown, args: Sig['Args']);
+    get showWarning(): boolean;
+    search: (term: string) => BesluitType[];
 }
 export {};

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

@@ -1,42 +1,22 @@
 import Component from '@glimmer/component';
 import { SayController } from '@lblod/ember-rdfa-editor';
-import { BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
 import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
+import { BesluitTypeInstance } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/besluit-type-instances';
 type Args = {
     controller: SayController;
     options: BesluitTypePluginOptions;
 };
 export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
-    CircleIcon: import("@ember/component/template-only").TOC<import("@appuniversum/ember-appuniversum/components/icons/circle-x").CircleXIconSignature>;
-    MailIcon: import("@ember/component/template-only").TOC<import("@appuniversum/ember-appuniversum/components/icons/mail").MailIconSignature>;
-    CrossIcon: import("@ember/component/template-only").TOC<import("@appuniversum/ember-appuniversum/components/icons/cross").CrossIconSignature>;
-    AlertTriangleIcon: import("@ember/component/template-only").TOC<import("@appuniversum/ember-appuniversum/components/icons/alert-triangle").AlertTriangleIconSignature>;
-    /**
-     * Actual besluit type selected
-     * @property besluitType
-     * @type BesluitType
-     * @private
-     */
-    besluitType?: BesluitType;
-    previousBesluitType?: string;
-    besluit?: BesluitType;
-    subBesluit?: BesluitType;
-    subSubBesluit?: BesluitType;
+    selectedTypeInstance?: BesluitTypeInstance;
     cardExpanded: boolean;
-    constructor(parent: unknown, args: Args);
     get controller(): SayController;
-    get doc(): import("prosemirror-model").Node;
-    types: import("reactiveweb/function").State<Promise<BesluitType[]>>;
+    types: import("reactiveweb/function").State<Promise<import("@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes").BesluitType[]>>;
     get currentBesluitRange(): import("@lblod/ember-rdfa-editor/plugins/datastore").ElementPNode | undefined;
-    get currentBesluitURI(): string | undefined;
     get showCard(): boolean;
-    updateBesluitTypes(): void;
-    updateBesluitType(selected: BesluitType): void;
-    updateBesluitSubType(selected: BesluitType): void;
-    updateBesluitSubSubType(selected: BesluitType): void;
-    findBesluitTypeParent(besluitType?: BesluitType, array?: BesluitType[] | null, parent?: BesluitType): BesluitType | undefined;
-    findBesluitTypeByURI(uri: string, types?: BesluitType[] | null): BesluitType | undefined;
-    insert(): void;
-    toggleCard(): void;
+    get selectedType(): import("@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes").BesluitType | undefined;
+    toggleCard: () => void;
+    setType: (type: BesluitTypeInstance) => void;
+    updateBesluitTypes: () => void;
+    insertIfValid(): void;
 }
 export {};

package/declarations/addon/plugins/besluit-type-plugin/utils/besluit-type-instances.d.ts

@@ -0,0 +1,18 @@
+import { type EditorState } from '@lblod/ember-rdfa-editor';
+import { type BesluitType } from './fetchBesluitTypes';
+export interface BesluitTypeInstance {
+    parent: BesluitType;
+    subType?: BesluitType;
+    subSubType?: BesluitType;
+}
+export declare function extractBesluitTypeUris(editorState: EditorState): string[];
+/**
+ * Finds a decision type in the document and checks that it represents a valid decision type
+ * according to the list of types passed in.
+ */
+export declare function checkBesluitTypeInstance(editorState: EditorState, types: BesluitType[]): BesluitTypeInstance | false;
+/**
+ * Checks that the passed type instance has all of the necessary sub-types selected (and no more)
+ */
+export declare function isValidTypeChoice({ parent, subType, subSubType, }: BesluitTypeInstance): boolean;
+export declare function mostSpecificBesluitType(typeInstance: BesluitTypeInstance): BesluitType;

package/declarations/addon/plugins/besluit-type-plugin/utils/set-besluit-type.d.ts

@@ -0,0 +1,4 @@
+import { type EditorState } from '@lblod/ember-rdfa-editor';
+import { type TransactionCombinatorResult } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
+import { type BesluitTypeInstance } from './besluit-type-instances';
+export declare function setBesluitType(initialState: EditorState, typeInstance: BesluitTypeInstance): TransactionCombinatorResult<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "28.1.0",
+  "version": "28.2.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/translations/en-US.yaml

@@ -89,6 +89,7 @@ citaten-plugin:
 
 besluit-type-plugin:
   dt: 'Decision type'
+  sub-type: 'Sub type'
   insert-dt: 'Select a decision type'
   search-message: 'Type to search'
   no-matches-message: 'No results'

package/translations/nl-BE.yaml

@@ -89,6 +89,7 @@ citaten-plugin:
 
 besluit-type-plugin:
   dt: 'Besluittype'
+  sub-type: 'Subtype'
   insert-dt: 'Selecteer een besluittype'
   search-message: 'Typ om te zoeken'
   no-matches-message: 'Geen resultaten'

package/addon/components/besluit-type-plugin/besluit-type-select.hbs

@@ -1,32 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<div ...attributes>
-  <PowerSelect
-    @renderInPlace={{true}}
-    @searchEnabled={{true}}
-    @searchMessage={{t 'besluit-type-plugin.search-message'}}
-    @noMatchesMessage={{t 'besluit-type-plugin.no-matches-message'}}
-    @search={{this.search}}
-    @options={{this.besluitTypes}}
-    @selected={{@selected}}
-    @onChange={{@onchange}}
-    as |besluitType|
-  >
-    {{besluitType.label}}
-  </PowerSelect>
-  <p class='au-u-muted au-u-margin-tiny au-u-margin-bottom-small'>
-    {{@selected.definition}}
-  </p>
-  {{#if @showWarningWhenEmpty}}
-    {{#unless @selected}}
-      <AuAlert
-        @icon={{this.AlertTriangleIcon}}
-        @title={{t 'besluit-type-plugin.alert-title'}}
-        @skin='warning'
-        @size='small'
-        class='au-u-margin-bottom-none au-u-margin-top-small'
-      >
-        <p>{{t 'besluit-type-plugin.alert-body'}}</p>
-      </AuAlert>
-    {{/unless}}
-  {{/if}}
-</div>

package/addon/components/besluit-type-plugin/besluit-type-select.ts

@@ -1,29 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-import { BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
-import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
-
-type Args = {
-  besluitTypes: BesluitType[];
-};
-
-export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Args> {
-  AlertTriangleIcon = AlertTriangleIcon;
-
-  @tracked besluitTypes;
-  constructor(parent: unknown, args: Args) {
-    super(parent, args);
-    this.besluitTypes = this.args.besluitTypes.sort((a, b) =>
-      a.label > b.label ? 1 : -1,
-    );
-  }
-
-  @action
-  search(term: string) {
-    const lowerTerm = term.toLowerCase();
-    return this.args.besluitTypes.filter((besluitType) =>
-      besluitType.label.toLowerCase().includes(lowerTerm),
-    );
-  }
-}

package/addon/components/besluit-type-plugin/toolbar-dropdown.hbs

@@ -1,102 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<div
-  {{did-update this.updateBesluitTypes @controller.mainEditorState}}
-  {{did-update this.updateBesluitTypes this.types.value}}
->
-  {{#if this.showCard}}
-    {{#if this.types.isError}}
-      <AuPill
-        @skin='error'
-        @icon={{this.CircleXIcon}}
-        @iconAlignment='left'
-        class='au-c-pill--link besluit-toolbar-pill'
-        {{on 'click' this.toggleCard}}
-        title={{t 'besluit-type-plugin.insert-dt'}}
-      >
-        {{t 'besluit-type-plugin.error-short'}}
-      </AuPill>
-    {{else}}
-      {{#if this.besluit.label}}
-        <AuPill
-          @skin='link'
-          {{on 'click' this.toggleCard}}
-          title={{t 'besluit-type-plugin.insert-dt'}}
-        >
-          {{t 'besluit-type-plugin.dt'}}:
-          {{this.besluit.label}}
-        </AuPill>
-      {{else}}
-        <AuPill
-          @icon={{this.AlertTriangleIcon}}
-          @iconAlignment='left'
-          @skin='link'
-          {{on 'click' this.toggleCard}}
-          title={{t 'besluit-type-plugin.insert-dt'}}
-        >
-          {{t 'besluit-type-plugin.insert-dt'}}
-        </AuPill>
-      {{/if}}
-    {{/if}}
-  {{/if}}
-  {{#if this.cardExpanded}}
-    <AuModal
-      @title={{t 'besluit-type-plugin.insert-dt'}}
-      @closeModal={{this.toggleCard}}
-      @modalOpen={{true}}
-      @size='default'
-      class='au-c-modal--overflow'
-      as |Modal|
-    >
-      <Modal.Body>
-        {{#if this.types.isError}}
-          <AuAlert
-            @title={{t 'besluit-type-plugin.error-title'}}
-            @skin='error'
-            @icon={{this.CrossIcon}}
-          >
-            <p>
-              {{t 'besluit-type-plugin.error-first-body'}}
-              {{! template-lint-disable no-bare-strings  }}
-              <AuLinkExternal
-                href='mailto:gelinktnotuleren@vlaanderen.be'
-                @icon={{this.MailIcon}}
-                @iconAlignment='left'
-              >
-                GelinktNotuleren@vlaanderen.be
-              </AuLinkExternal>
-              {{! template-lint-enable no-bare-strings  }}
-              {{t 'besluit-type-plugin.error-rest-body'}}
-            </p>
-          </AuAlert>
-        {{else}}
-          <BesluitTypePlugin::BesluitTypeSelect
-            @besluitTypes={{this.types.value}}
-            @onchange={{this.updateBesluitType}}
-            @selected={{this.besluit}}
-            @showWarningWhenEmpty={{false}}
-          />
-          {{#if this.besluit.subTypes.length}}
-            <AuHr @size='large' />
-            <BesluitTypePlugin::BesluitTypeSelect
-              @besluitTypes={{this.besluit.subTypes}}
-              @onchange={{this.updateBesluitSubType}}
-              @selected={{this.subBesluit}}
-              @showWarningWhenEmpty={{true}}
-              class='au-u-padding-left au-u-padding-right'
-            />
-          {{/if}}
-          {{#if this.subBesluit.subTypes.length}}
-            <AuHr @size='large' />
-            <BesluitTypePlugin::BesluitTypeSelect
-              @besluitTypes={{this.subBesluit.subTypes}}
-              @onchange={{this.updateBesluitSubSubType}}
-              @selected={{this.subSubBesluit}}
-              @showWarningWhenEmpty={{true}}
-              class='au-u-padding-left au-u-padding-right'
-            />
-          {{/if}}
-        {{/if}}
-      </Modal.Body>
-    </AuModal>
-  {{/if}}
-</div>

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

@@ -1,223 +0,0 @@
-import { tracked } from '@glimmer/tracking';
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { addProperty, removeProperty } from '@lblod/ember-rdfa-editor/commands';
-import { SayController } from '@lblod/ember-rdfa-editor';
-import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
-import fetchBesluitTypes, {
-  BesluitType,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
-import { trackedFunction } from 'reactiveweb/function';
-import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
-import { RDF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import { getOutgoingTripleList } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
-import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
-import { MailIcon } from '@appuniversum/ember-appuniversum/components/icons/mail';
-import { CircleXIcon } from '@appuniversum/ember-appuniversum/components/icons/circle-x';
-import {
-  getCurrentBesluitRange,
-  getCurrentBesluitURI,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
-
-type Args = {
-  controller: SayController;
-  options: BesluitTypePluginOptions;
-};
-
-export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
-  CircleIcon = CircleXIcon;
-  MailIcon = MailIcon;
-  CrossIcon = CrossIcon;
-  AlertTriangleIcon = AlertTriangleIcon;
-  /**
-   * Actual besluit type selected
-   * @property besluitType
-   * @type BesluitType
-   * @private
-   */
-  @tracked besluitType?: BesluitType;
-  @tracked previousBesluitType?: string;
-
-  //used to update selections since the other vars dont seem to work in octane
-  @tracked besluit?: BesluitType;
-  @tracked subBesluit?: BesluitType;
-  @tracked subSubBesluit?: BesluitType;
-
-  @tracked cardExpanded = false;
-
-  constructor(parent: unknown, args: Args) {
-    super(parent, args);
-  }
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get doc() {
-    return this.controller.mainEditorState.doc;
-  }
-
-  types = trackedFunction(this, async () => {
-    const types = await fetchBesluitTypes(
-      this.args.options.classificatieUri,
-      this.args.options.endpoint,
-    );
-    return types;
-  });
-
-  get currentBesluitRange() {
-    return getCurrentBesluitRange(this.controller);
-  }
-
-  get currentBesluitURI() {
-    return getCurrentBesluitURI(this.controller);
-  }
-
-  get showCard() {
-    return !!this.currentBesluitRange;
-  }
-
-  @action
-  updateBesluitTypes() {
-    if (!this.types.isFinished || !this.currentBesluitRange) {
-      return;
-    }
-    if (!this.types.value) {
-      console.warn('Request for besluit types failed');
-      return;
-    }
-    const besluit = this.currentBesluitRange;
-    const besluitTypes = getOutgoingTripleList(besluit.node.attrs, RDF('type'));
-    const besluitTypeRelevant = besluitTypes.find(
-      (type) =>
-        type.object.termType === 'NamedNode' &&
-        type.object.value.includes(
-          'https://data.vlaanderen.be/id/concept/BesluitType/',
-        ),
-    )?.object.value;
-
-    if (besluitTypeRelevant) {
-      this.previousBesluitType = besluitTypeRelevant;
-      const besluitType = this.findBesluitTypeByURI(besluitTypeRelevant);
-
-      const firstAncestor = this.findBesluitTypeParent(besluitType);
-      const secondAncestor = this.findBesluitTypeParent(firstAncestor);
-      if (firstAncestor && secondAncestor) {
-        this.besluit = secondAncestor;
-        this.subBesluit = firstAncestor;
-        this.subSubBesluit = besluitType;
-      } else if (firstAncestor) {
-        this.besluit = firstAncestor;
-        this.subBesluit = besluitType;
-        this.subSubBesluit = undefined;
-      } else {
-        this.besluit = besluitType;
-        this.subBesluit = undefined;
-        this.subSubBesluit = undefined;
-      }
-      this.cardExpanded = false;
-    } else {
-      this.cardExpanded = true;
-      this.besluit = undefined;
-      this.subBesluit = undefined;
-      this.subSubBesluit = undefined;
-    }
-  }
-
-  @action
-  updateBesluitType(selected: BesluitType) {
-    this.besluit = selected;
-    this.besluitType = selected;
-    this.subBesluit = undefined;
-    this.subSubBesluit = undefined;
-    if (!selected.subTypes || !selected.subTypes.length) this.insert();
-  }
-
-  @action
-  updateBesluitSubType(selected: BesluitType) {
-    this.subBesluit = selected;
-    this.besluitType = selected;
-    this.subSubBesluit = undefined;
-    if (!selected.subTypes || !selected.subTypes.length) this.insert();
-  }
-
-  @action
-  updateBesluitSubSubType(selected: BesluitType) {
-    this.subSubBesluit = selected;
-    this.besluitType = selected;
-    if (!selected.subTypes || !selected.subTypes.length) this.insert();
-  }
-
-  findBesluitTypeParent(
-    besluitType?: BesluitType,
-    array: BesluitType[] | null = this.types.value,
-    parent?: BesluitType,
-  ): BesluitType | undefined {
-    if (!besluitType || !array) {
-      return;
-    }
-    for (const type of array) {
-      if (type == besluitType) {
-        return parent;
-      } else if (type.subTypes?.length) {
-        parent = type;
-        return this.findBesluitTypeParent(besluitType, type.subTypes, parent);
-      }
-    }
-    return;
-  }
-
-  findBesluitTypeByURI(
-    uri: string,
-    types = this.types.value,
-  ): BesluitType | undefined {
-    if (uri && types) {
-      for (const besluitType of types) {
-        if (besluitType.uri === uri) {
-          return besluitType;
-        } else if (besluitType.subTypes && besluitType.subTypes.length) {
-          const subType = this.findBesluitTypeByURI(uri, besluitType.subTypes);
-          if (subType) {
-            return subType;
-          }
-        }
-      }
-    }
-    return;
-  }
-
-  insert() {
-    const resource = this.currentBesluitURI;
-    if (this.besluitType && resource) {
-      this.cardExpanded = false;
-      if (this.previousBesluitType) {
-        this.controller.doCommand(
-          removeProperty({
-            resource,
-            property: {
-              predicate: RDF('type').full,
-              object: sayDataFactory.namedNode(this.previousBesluitType),
-            },
-          }),
-          { view: this.controller.mainEditorView },
-        );
-      }
-      this.controller.doCommand(
-        addProperty({
-          resource,
-          property: {
-            predicate: RDF('type').full,
-            object: sayDataFactory.namedNode(this.besluitType.uri),
-          },
-        }),
-        { view: this.controller.mainEditorView },
-      );
-    }
-  }
-
-  @action
-  toggleCard() {
-    this.cardExpanded = !this.cardExpanded;
-  }
-}