@lblod/ember-rdfa-editor-lblod-plugins 0.4.1 → 1.0.0-alpha.2

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

@@ -0,0 +1,218 @@
+import { tracked } from '@glimmer/tracking';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { getOwner } from '@ember/application';
+import { inject as service } from '@ember/service';
+import {
+  addType,
+  removeType,
+} from '@lblod/ember-rdfa-editor/commands/type-commands';
+import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
+import CurrentSessionService from '@lblod/frontend-gelinkt-notuleren/services/current-session';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/plugins/datastore';
+import { unwrap } from '@lblod/ember-rdfa-editor/utils/option';
+import { getRdfaAttribute } from '@lblod/ember-rdfa-editor/utils/rdfa-utils';
+import fetchBesluitTypes, {
+  BesluitType,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
+declare module 'ember__owner' {
+  export default interface Owner {
+    resolveRegistration(name: string): unknown;
+  }
+}
+
+type Args = {
+  controller: ProseController;
+};
+
+export default class EditorPluginsToolbarDropdownComponent extends Component<Args> {
+  @service declare currentSession: CurrentSessionService;
+
+  /**
+   * Actual besluit type selected
+   * @property besluitType
+   * @type BesluitType
+   * @private
+   */
+  @tracked besluitType?: BesluitType;
+  @tracked previousBesluitType?: string;
+  @tracked types: BesluitType[] = [];
+
+  //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;
+  @tracked loadDataTaskInstance;
+
+  constructor(parent: unknown, args: Args) {
+    super(parent, args);
+    this.loadDataTaskInstance = this.loadData.perform();
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get doc() {
+    return this.controller.state.doc;
+  }
+
+  loadData = task(async () => {
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    const bestuurseenheid = await this.currentSession.get('group');
+    const classificatie = await bestuurseenheid.get('classificatie');
+    const ENV = getOwner(this)?.resolveRegistration('config:environment') as {
+      besluitTypePlugin: { endpoint: string };
+    };
+    const types = await fetchBesluitTypes(classificatie.uri, ENV);
+    this.types = types;
+  });
+
+  get currentBesluitRange(): ResolvedPNode | undefined {
+    const selection = this.controller.state.selection;
+    const currentBesluitRange = [
+      ...this.controller.datastore
+        .limitToRange(this.controller.state, selection.from, selection.to)
+        .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
+        .asSubjectNodeMapping()
+        .nodes(),
+    ][0];
+    return currentBesluitRange;
+  }
+
+  get currentBesluitURI() {
+    if (this.currentBesluitRange) {
+      const node = unwrap(this.doc.nodeAt(this.currentBesluitRange.from));
+      return getRdfaAttribute(node, 'resource').pop();
+    }
+    return;
+  }
+
+  get showCard() {
+    return !!this.currentBesluitRange;
+  }
+
+  @action
+  updateBesluitTypes() {
+    if (!this.currentBesluitURI) {
+      return;
+    }
+    const besluitTypes = this.controller.datastore
+      .match(`>${this.currentBesluitURI}`, 'a', undefined)
+      .asQuads();
+    const besluitTypesUris = [...besluitTypes].map((quad) => quad.object.value);
+    const besluitTypeRelevant = besluitTypesUris.find((type) =>
+      type.includes('https://data.vlaanderen.be/id/concept/BesluitType/')
+    );
+    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[] = this.types,
+    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
+  ): BesluitType | undefined {
+    if (uri) {
+      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() {
+    if (this.besluitType && this.currentBesluitRange) {
+      this.cardExpanded = false;
+      this.controller.checkAndDoCommand(
+        addType(this.currentBesluitRange.from, this.besluitType.uri)
+      );
+      if (this.previousBesluitType) {
+        this.controller.checkAndDoCommand(
+          removeType(this.currentBesluitRange.from, this.previousBesluitType)
+        );
+      }
+    }
+  }
+
+  @action
+  toggleCard() {
+    this.cardExpanded = !this.cardExpanded;
+  }
+}

package/addon/components/citation-plugin/citation-card.hbs

@@ -0,0 +1,118 @@
+{{#if this.showCard}}
+  <AuCard
+    @flex={{true}}
+    @divided={{true}}
+    @isOpenInitially={{true}}
+    @expandable={{true}}
+    @shadow={{true}}
+    @size='small'
+    {{did-update
+      this.resetToDocumentState
+      this.documentText
+      this.documentLegislationType
+    }}
+    as |c|
+  >
+    <c.header>
+      <AuHeading @level='3' @skin='6'>{{t
+          'citaten-plugin.card.title'
+        }}</AuHeading>
+    </c.header>
+    <c.content>
+      <div class='au-o-flow au-o-flow--small'>
+        <AuFormRow>
+          <AuLabel
+            for='typeofdocument'
+            @inline={{false}}
+            @required={{false}}
+            @error={{false}}
+            @warning={{false}}
+          >{{t 'citaten-plugin.search.type'}}</AuLabel>
+          <PowerSelect
+            id='typeofdocument'
+            @allowClear={{false}}
+            @disabled={{false}}
+            @searchEnabled={{true}}
+            @loadingMessage='{{t "citaten-plugin.alert.loading"}}'
+            @noMatchesMessage='{{t "citaten-plugin.alert.no-results"}}'
+            @searchMessage='{{t "citaten-plugin.search.placeholder"}}'
+            @options={{this.legislationTypes}}
+            @selected={{this.selectedLegislationTypeLabel}}
+            @onChange={{this.selectLegislationType}}
+            class='au-u-1-1'
+            as |type|
+          >
+            {{type}}
+          </PowerSelect>
+        </AuFormRow>
+        <AuFormRow>
+          <AuLabel
+            for='searchterm'
+            @inline={{false}}
+            @required={{false}}
+            @error={{false}}
+            @warning={{false}}
+          >{{t 'citaten-plugin.search.term'}}</AuLabel>
+          <AuNativeInput
+            @icon='search'
+            @type='text'
+            @width='block'
+            @iconAlignment='right'
+            id='searchterm'
+            value={{this.searchText}}
+            placeholder={{t 'citaten-plugin.search.placeholder'}}
+            {{on 'input' this.onCardTextChange}}
+          />
+        </AuFormRow>
+        <AuFormRow>
+          <AuButton
+            @skin='link'
+            @icon='search'
+            @iconAlignment='left'
+            {{on 'click' this.openSearchModal}}
+          >{{t 'citaten-plugin.search.advanced'}}</AuButton>
+        </AuFormRow>
+      </div>
+    </c.content>
+    <c.footer class='au-u-background-gray-100 au-u-padding-none'>
+      {{#if this.decisionResource.isRunning}}
+        <AuLoader />
+        <span class='au-u-hidden-visually'>{{t
+            'citaten-plugin.alert.loading'
+          }}</span>
+      {{else}}
+        {{#if this.error}}
+          <CitationPlugin::Helpers::AlertLoadError
+            @fullSize={{false}}
+            @error={{this.error}}
+          />
+        {{else}}
+          <AuToolbar @border='bottom' @skin='none' class='au-u-padding-small'>
+            <AuHeading @skin='6' @level='4'>{{t
+                'citaten-plugin.card.suggestions'
+              }}</AuHeading>
+          </AuToolbar>
+          <div
+            class='citaten--decision-list au-u-margin-none au-u-padding-top-tiny au-u-padding-bottom-tiny'
+          >
+            <CitationPlugin::Citations::DecisionList
+              @decisions={{this.decisionResource.value}}
+              @onCitationInsert={{this.insertDecisionCitation}}
+              @onCitationDetails={{this.openDecisionDetailModal}}
+            />
+          </div>
+        {{/if}}
+      {{/if}}
+    </c.footer>
+  </AuCard>
+{{/if}}
+
+<CitationPlugin::Citations::SearchModal
+  @open={{this.showModal}}
+  @closeModal={{this.closeModal}}
+  @insertDecisionCitation={{this.insertDecisionCitation}}
+  @insertArticleCitation={{this.insertArticleCitation}}
+  @selectedDecision={{this.decision}}
+  @legislationTypeUri={{this.legislationTypeUri}}
+  @text={{this.searchText}}
+/>

package/addon/components/citation-plugin/citation-card.ts

@@ -0,0 +1,230 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { restartableTask, timeout } from 'ember-concurrency';
+import { action } from '@ember/object';
+import { capitalize } from '@ember/string';
+import {
+  Article,
+  cleanCaches,
+  Decision,
+  fetchDecisions,
+} from '../../plugins/citation-plugin/utils/vlaamse-codex';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import {
+  Option,
+  unwrap,
+  unwrapOr,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import {
+  CitationDecoration,
+  CitationPlugin,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
+import { ProseController, Transaction } from '@lblod/ember-rdfa-editor';
+import { citedText } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/cited-text';
+import {
+  LEGISLATION_TYPES,
+  LEGISLATION_TYPE_CONCEPTS,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legislation-types';
+
+interface Args {
+  controller: ProseController;
+  widgetArgs: {
+    plugin: CitationPlugin;
+  };
+}
+
+export default class CitationCardComponent extends Component<Args> {
+  @tracked pageNumber = 0;
+  @tracked pageSize = 5;
+  @tracked totalSize = 0;
+  @tracked totalCount = 0;
+  @tracked decisions = [];
+  @tracked error: unknown;
+  @tracked showModal = false;
+  @tracked decision: Decision | null = null;
+  @tracked cardText: string | null = null;
+  @tracked cardLegislationType: string | null = null;
+
+  get controller(): ProseController {
+    return this.args.controller;
+  }
+
+  get showCard() {
+    return this.activeDecoration;
+  }
+
+  get plugin() {
+    return this.args.widgetArgs.plugin;
+  }
+
+  get decorations() {
+    return this.plugin.getState(this.controller.state)?.highlights;
+  }
+
+  get activeDecoration(): Option<CitationDecoration> {
+    const { from, to } = this.controller.state.selection;
+    return this.decorations?.find(from, to)[0];
+  }
+
+  get documentLegislationType(): Option<string> {
+    return this.activeDecoration?.spec.legislationTypeUri;
+  }
+
+  get documentText(): Option<string> {
+    return this.activeDecoration?.spec.searchText;
+  }
+
+  get searchText(): string {
+    return (this.cardText ?? this.documentText) || '';
+  }
+
+  get legislationTypes() {
+    return Object.keys(LEGISLATION_TYPES).map(capitalize);
+  }
+
+  get selectedLegislationType() {
+    const type = this.cardLegislationType || this.documentLegislationType;
+    const found = LEGISLATION_TYPE_CONCEPTS.find((c) => c.value === type);
+    return found || unwrap(LEGISLATION_TYPE_CONCEPTS[0]);
+  }
+
+  get selectedLegislationTypeLabel(): string {
+    return capitalize(this.selectedLegislationType.label);
+  }
+
+  get selectedLegislationTypeUri(): string {
+    return this.selectedLegislationType.value;
+  }
+
+  @action resetToDocumentState(): void {
+    this.cardText = null;
+    this.cardLegislationType = null;
+  }
+
+  @action onCardTextChange(event: InputEvent): void {
+    this.cardText = (event.target as HTMLInputElement).value;
+  }
+
+  resourceSearch = restartableTask(async () => {
+    await timeout(100);
+    this.error = null;
+    const abortController = new AbortController();
+    try {
+      // Split search string by grouping on non-whitespace characters
+      // This probably needs to be more complex to search on group of words
+      const words = this.searchText.match(/\S+/g) || [];
+      const filter = {
+        type: unwrapOr('', this.selectedLegislationTypeUri),
+      };
+      const results = await fetchDecisions(
+        words,
+        filter,
+        this.pageNumber,
+        this.pageSize
+      );
+      this.totalCount = results.totalCount;
+      return results.decisions;
+    } catch (e) {
+      console.warn(e); // eslint-ignore-line no-console
+      this.totalCount = 0;
+      this.error = e;
+      return [];
+    } finally {
+      //Abort all requests now that this task has either successfully finished or has been cancelled
+      abortController.abort();
+    }
+  });
+
+  decisionResource = trackedTask(this, this.resourceSearch, () => [
+    this.searchText,
+    this.selectedLegislationType,
+    this.pageNumber,
+    this.pageSize,
+  ]);
+
+  @action
+  selectLegislationType(type: string) {
+    type = type.toLowerCase();
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.label.toLowerCase() === type
+    );
+    this.cardLegislationType = found
+      ? found.value
+      : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).value;
+  }
+
+  @action
+  openDecisionDetailModal(decision: Decision): void {
+    this.decision = decision;
+    /** why focus? see {@link EditorPluginsCitationInsertComponent.openModal } */
+    this.focus();
+    this.showModal = true;
+  }
+
+  @action
+  async openSearchModal(): Promise<void> {
+    await this.decisionResource.cancel();
+    this.decision = null;
+    this.focus();
+    this.showModal = true;
+  }
+
+  @action
+  closeModal(lastSearchType: string, lastSearchTerm: string): void {
+    this.showModal = false;
+    this.decision = null;
+    if (lastSearchType) {
+      this.cardLegislationType = lastSearchType;
+    }
+    if (lastSearchTerm) {
+      this.cardText = lastSearchTerm;
+    }
+  }
+
+  @action
+  insertDecisionCitation(decision: Decision): void {
+    const uri = decision.uri;
+    const title = decision.title ?? '';
+    const { from, to } = unwrap(this.activeDecoration);
+    this.controller.withTransaction((tr: Transaction) =>
+      tr
+        .replaceRangeWith(
+          from,
+          to,
+          citedText(this.controller.schema, title, uri)
+        )
+        .scrollIntoView()
+    );
+  }
+
+  @action
+  insertArticleCitation(decision: Decision, article: Article): void {
+    const uri = article.uri;
+    let title = '';
+    if (decision.title) {
+      title = `${decision.title}, ${article.number || ''}`;
+    }
+    const { from, to } = unwrap(this.activeDecoration);
+    this.controller.withTransaction((tr: Transaction) =>
+      tr
+        .replaceRangeWith(
+          from,
+          to,
+          citedText(this.controller.schema, title, uri)
+        )
+        .scrollIntoView()
+    );
+  }
+
+  @action
+  focus(): void {
+    this.controller.focus();
+  }
+
+  willDestroy(): void {
+    // Not necessary as ember-concurrency does this for us.
+    // this.decisionResource.cancel();
+    cleanCaches();
+    super.willDestroy();
+  }
+}

package/addon/components/citation-plugin/citation-insert.hbs

@@ -0,0 +1,20 @@
+<AuList::Item>
+  <AuButton
+    @icon='add'
+    @iconAlignment='left'
+    @skin='link'
+    @disabled={{this.disableInsert}}
+    {{on 'click' this.openModal}}
+  >
+    {{t 'citaten-plugin.insert.title'}}
+  </AuButton>
+</AuList::Item>
+
+<CitationPlugin::Citations::SearchModal
+  @open={{this.showModal}}
+  @closeModal={{this.closeModal}}
+  @insertDecisionCitation={{this.insertDecisionCitation}}
+  @insertArticleCitation={{this.insertArticleCitation}}
+  @legislationTypeUri={{this.legislationTypeUri}}
+  @text={{this.text}}
+/>

package/addon/components/citation-plugin/citation-insert.ts

@@ -0,0 +1,102 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import {
+  Fragment,
+  ProseController,
+  Slice,
+  Transaction,
+} from '@lblod/ember-rdfa-editor';
+import {
+  Article,
+  Decision,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/vlaamse-codex';
+import { citedText } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/cited-text';
+import { CitationPlugin } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin';
+import { LEGISLATION_TYPES } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/citation-plugin/utils/legislation-types';
+
+interface Args {
+  controller: ProseController;
+  widgetArgs: { plugin: CitationPlugin };
+}
+
+export default class EditorPluginsCitationInsertComponent extends Component<Args> {
+  @tracked showModal = false;
+  @tracked legislationTypeUri = LEGISLATION_TYPES.decreet;
+  @tracked text = '';
+
+  get disableInsert() {
+    if (!this.activeRanges) {
+      return true;
+    }
+    const { from } = this.controller.state.selection;
+    return !this.activeRanges.some(
+      ([start, end]) => from > start && from < end
+    );
+  }
+
+  get plugin() {
+    return this.args.widgetArgs.plugin;
+  }
+
+  get activeRanges() {
+    return this.plugin.getState(this.controller.state)?.activeRanges;
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  openModal() {
+    // we focus BEFORE openening the modal, since the modal uses ember-focus-trap
+    // that takes control of the focus, and gives it back when disabled
+    // so we have to reset the focus to the editor before opening (because
+    // we lost it upon clicking the button)
+    this.controller.focus();
+    this.showModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showModal = false;
+  }
+
+  @action
+  insertDecisionCitation(decision: Decision) {
+    const type = decision.legislationType?.label || '';
+    const uri = decision.uri;
+    const title = decision.title ?? '';
+    this.controller.withTransaction((tr: Transaction) =>
+      tr
+        .replaceSelection(
+          new Slice(
+            Fragment.fromArray([
+              this.controller.schema.text(`${type} `),
+              citedText(this.controller.schema, title, uri),
+            ]),
+            0,
+            0
+          )
+        )
+        .scrollIntoView()
+    );
+  }
+
+  @action
+  insertArticleCitation(decision: Decision, article: Article) {
+    const type = decision.legislationType?.label || '';
+    const uri = article.uri;
+    let title = '';
+    if (decision.title) {
+      title = `${decision.title}, ${article.number ?? ''}`;
+    }
+    const { from, to } = this.args.controller.state.selection;
+    this.controller.withTransaction((tr: Transaction) =>
+      tr.replaceWith(from, to, [
+        this.controller.schema.text(`${type} `),
+        citedText(this.controller.schema, title, uri),
+      ])
+    );
+  }
+}

package/addon/components/{citaten-plugin → citation-plugin}/citations/article-list.hbs

@@ -2,12 +2,12 @@
   <AuList @direction="vertical" @divider={{true}}>
     {{#each @articles as |article|}}
       <AuList::Item>
-        <CitatenPlugin::Citations::ArticlePreview
+        <CitationPlugin::Citations::ArticlePreview
           @insertArticleCitation={{fn @insertArticleCitation article}}
           @article={{article}} />
       </AuList::Item>
     {{/each}}
   </AuList>
 {{else}}
-  <CitatenPlugin::Helpers::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
+  <CitationPlugin::Helpers::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
 {{/if}}