@lblod/ember-rdfa-editor-lblod-plugins 0.4.0 → 1.0.0-alpha.1

package/addon/components/besluit-plugin/besluit-context-card.hbs

@@ -0,0 +1,44 @@
+{{#if this.activeArticle}}
+  <AuCard
+    @shadow={{true}}
+    @size="flush" as |c|>
+    <c.header class="au-u-hidden-visually">
+      <AuHeading @level="3" @skin="6">
+        {{t "besluit-plugin.card.title"}}
+      </AuHeading>
+    </c.header>
+    <c.content class="au-c-content--small">
+      <AuList @divider={{true}} class="au-u-padding-top-tiny au-u-padding-bottom-tiny">
+        <AuList::Item>
+          <AuButton
+            @icon="bin"
+            @iconAlignment="left"
+            @skin="link"
+            {{on 'click' this.deleteArticle}}>
+            {{t "besluit-plugin.action.delete-article"}}
+          </AuButton>
+        </AuList::Item>
+        <AuList::Item>
+          <AuButton
+            @icon="nav-up"
+            @iconAlignment="left"
+            @skin="link"
+            @disabled={{this.disableMoveUp}}
+            {{on 'click' this.moveUpArticle}}>
+            {{t "besluit-plugin.action.article-up"}}
+          </AuButton>
+        </AuList::Item>
+        <AuList::Item>
+          <AuButton
+            @icon="nav-down"
+            @iconAlignment="left"
+            @skin="link"
+            @disabled={{this.disableMoveDown}}
+            {{on 'click' this.moveDownArticle}}>
+            {{t "besluit-plugin.action.article-down"}}
+          </AuButton>
+        </AuList::Item>
+      </AuList>
+    </c.content>
+  </AuCard>
+{{/if}}

package/addon/components/besluit-plugin/besluit-context-card.ts

@@ -0,0 +1,144 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import {
+  moveArticle,
+  recalculateArticleNumbers,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/commands/besluit-plugin';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/plugins/datastore';
+import { DecisionOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-plugin';
+import { ProseController } from '@lblod/ember-rdfa-editor';
+
+interface ContextCardWidgetArgs {
+  options?: DecisionOptions;
+}
+
+interface Args {
+  controller: ProseController;
+  widgetArgs: ContextCardWidgetArgs;
+}
+
+export default class BesluitContextCardComponent extends Component<Args> {
+  @tracked articleElement?: ResolvedPNode;
+
+  constructor(parent: unknown, args: Args) {
+    super(parent, args);
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get doc() {
+    return this.controller.state.doc;
+  }
+  focus() {
+    this.controller.focus();
+  }
+
+  @action
+  deleteArticle() {
+    if (this.activeArticle && this.besluitURI) {
+      const { from, to } = this.activeArticle.range;
+      this.controller.withTransaction((tr) => {
+        return tr.delete(from, to);
+      });
+      this.focus();
+      recalculateArticleNumbers(this.controller, this.besluitURI);
+    }
+  }
+
+  @action
+  moveUpArticle() {
+    if (this.besluitURI && this.activeArticle) {
+      this.controller.doCommand(
+        moveArticle(
+          this.controller,
+          this.besluitURI,
+          this.activeArticle.uri,
+          true
+        )
+      );
+    }
+  }
+
+  @action
+  moveDownArticle() {
+    if (this.besluitURI && this.activeArticle) {
+      this.controller.doCommand(
+        moveArticle(
+          this.controller,
+          this.besluitURI,
+          this.activeArticle.uri,
+          false
+        )
+      );
+    }
+  }
+
+  get disableMoveUp() {
+    if (this.besluitURI && this.activeArticle) {
+      return !this.controller.checkCommand(
+        moveArticle(
+          this.controller,
+          this.besluitURI,
+          this.activeArticle.uri,
+          true
+        )
+      );
+    }
+    return true;
+  }
+
+  get disableMoveDown() {
+    if (this.besluitURI && this.activeArticle) {
+      return !this.controller.checkCommand(
+        moveArticle(
+          this.controller,
+          this.besluitURI,
+          this.activeArticle.uri,
+          false
+        )
+      );
+    }
+    return true;
+  }
+
+  get besluitURI() {
+    const { from, to } = this.controller.state.selection;
+
+    const limitedDatastore = this.controller.datastore.limitToRange(
+      this.controller.state,
+      from,
+      to
+    );
+    return limitedDatastore
+      .match(null, 'a', 'besluit:Besluit')
+      .asQuadResultSet()
+      .first()?.subject.value;
+  }
+
+  get activeArticle() {
+    if (this.besluitURI) {
+      const { from, to } = this.controller.state.selection;
+
+      const limitedDatastore = this.controller.datastore.limitToRange(
+        this.controller.state,
+        from,
+        to
+      );
+      const dsResult = [
+        ...limitedDatastore
+          .match(null, 'a', 'besluit:Artikel')
+          .asSubjectNodeMapping(),
+      ][0];
+      if (dsResult) {
+        return {
+          uri: dsResult.term.value,
+          range: dsResult.nodes[0],
+        };
+      }
+    }
+    return;
+  }
+}

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

@@ -0,0 +1,20 @@
+<AuList::Item>
+  <AuButton
+    @icon="add"
+    @iconAlignment="left"
+    @skin="link"
+    @disabled={{this.hasTitle}}
+    {{on 'click' this.insertTitle}}>
+    {{t "besluit-plugin.insert.decision-title"}}
+  </AuButton>
+</AuList::Item>
+<AuList::Item>
+  <AuButton
+    @icon="add"
+    @iconAlignment="left"
+    @skin="link"
+    @disabled={{this.disableArticleInsert}}
+    {{on "click" this.insertArticle}}>
+    {{t "besluit-plugin.insert.article"}}
+  </AuButton>
+</AuList::Item>

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

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import {
+  insertTitle,
+  insertArticle,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/commands/besluit-plugin';
+import { ProseController } from '@lblod/ember-rdfa-editor';
+
+type Args = {
+  controller: ProseController;
+};
+
+export default class BesluitPluginCardComponent extends Component<Args> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  focus() {
+    this.controller.focus();
+  }
+  @action
+  insertArticle() {
+    this.controller.checkAndDoCommand(insertArticle(this.controller, '', ''));
+    this.focus();
+  }
+
+  @action
+  insertTitle() {
+    this.controller.doCommand(insertTitle(this.controller, ''));
+    this.focus();
+  }
+
+  get hasTitle() {
+    return !this.controller.checkCommand(insertTitle(this.controller, ''));
+  }
+
+  get disableArticleInsert() {
+    return !this.controller.checkCommand(
+      insertArticle(this.controller, '', '')
+    );
+  }
+}

package/addon/components/besluit-type-plugin/{besluit-type-select.js → besluit-type-select.ts}

@@ -1,18 +1,23 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { BesluitType } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/fetchBesluitTypes';
 
-export default class BesluitTypePluginBesluitTypeSelectComponent extends Component {
+type Args = {
+  besluitTypes: BesluitType[];
+};
+
+export default class BesluitTypePluginBesluitTypeSelectComponent extends Component<Args> {
   @tracked besluitTypes;
-  constructor() {
-    super(...arguments);
+  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) {
+  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,3 +1,4 @@
+<div {{did-update this.updateBesluitTypes @controller.state}}>
 {{#if this.showCard}}
   {{#if this.loadDataTaskInstance.isError}}
     <AuPill
@@ -81,3 +82,4 @@
     </Modal.Body>
   </AuModal>
 {{/if}}
+</div>

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

@@ -0,0 +1,216 @@
+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 fetchBesluitTypes, { BesluitType } from '../../utils/fetchBesluitTypes';
+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';
+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}}
+/>