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

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 {
+  LEGISLATION_TYPE_CONCEPTS,
+  LEGISLATION_TYPES,
+} from '../../utils/legislation-types';
+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';
+
+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 { LEGISLATION_TYPES } from '../../utils/legislation-types';
+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';
+
+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}}

package/addon/components/{citaten-plugin → citation-plugin}/citations/decision-detail.hbs

@@ -14,7 +14,7 @@
           {{@decision.publicationDate}}
         </AuPill>
       {{/if}}
-      <br />
+      <br/>
       <AuButton
         @skin="primary"
         @icon="plus-text"
@@ -32,21 +32,24 @@
         {{t "citaten-plugin.references.lookup-codex"}}
       </AuLinkExternal>
       {{! Search field }}
-      <AuLabel class="au-u-margin-top-small au-margin-bottom-small" for="searchCodex" @inline={{true}} @required={{false}} @error={{false}} @warning={{false}}>{{t "citaten-plugin.search.article"}}</AuLabel>
-      <AuInput id="searchCodex" placeholder="{{t "citaten-plugin.citaten-plugin.search.article-placeholder"}}" @type="text" @width="default" @icon="search" @iconAlignment="right" @value={{this.articleFilter}} {{on "input" (perform this.updateArticleFilter)}}/>
+      <AuLabel class="au-u-margin-top-small au-margin-bottom-small" for="searchCodex" @inline={{true}}
+               @required={{false}} @error={{false}} @warning={{false}}>{{t "citaten-plugin.search.article"}}</AuLabel>
+      <AuInput id="searchCodex" placeholder="{{t "citaten-plugin.search.article-placeholder"}}" @type="text"
+               @width="default" @icon="search" @iconAlignment="right" @value={{this.articleFilter}} {{on "input"
+                                                                                                         (perform this.updateArticleFilter)}}/>
     </div>
     {{! Search results }}
     <div>
       {{#if this.articleResource.isRunning}}
         <div class="au-o-box">
-          <AuLoader @padding="large" />
+          <AuLoader @padding="large"/>
           <span class="au-u-hidden-visually">{{t "citaten-plugin.alert.loading"}}</span>
         </div>
       {{else}}
         {{#if this.error}}
-          <CitatenPlugin::Helpers::AlertLoadError @fullSize={{true}} @error={{this.error}} class="au-o-box" />
+          <CitationPlugin::Helpers::AlertLoadError @fullSize={{true}} @error={{this.error}} class="au-o-box"/>
         {{else}}
-          <CitatenPlugin::Citations::ArticleList
+          <CitationPlugin::Citations::ArticleList
             @insertArticleCitation={{fn @insertArticleCitation @decision}}
             @articles={{this.articleResource.value}}
             @fullSize={{true}}/>

package/addon/components/{citaten-plugin/citations/decision-detail.js → citation-plugin/citations/decision-detail.ts}

@@ -1,49 +1,42 @@
 import Component from '@glimmer/component';
-import { timeout } from 'ember-concurrency';
+import { restartableTask, timeout } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { fetchArticles } from '../../../utils/vlaamse-codex';
-import { task } from 'ember-concurrency';
+import {
+  Decision,
+  fetchArticles,
+} from '../../../plugins/citation-plugin/utils/vlaamse-codex';
 import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
 
-export default class EditorPluginsCitationsDecisionDetailComponent extends Component {
-  @tracked error;
+interface Args {
+  decision: Decision;
+  close: () => void;
+}
+
+export default class EditorPluginsCitationsDecisionDetailComponent extends Component<Args> {
+  @tracked error: unknown;
   @tracked pageNumber = 0;
   @tracked pageSize = 5;
-  @tracked totalCount;
+  @tracked totalCount = 0;
   @tracked articles = [];
-  @tracked articleFilter;
-  @tracked articleFilterAfterTimeout;
+  @tracked articleFilter = '';
+  @tracked articleFilterAfterTimeout = '';
 
-  constructor() {
-    super(...arguments);
-  }
-
-  @task({ restartable: true })
-  *updateArticleFilter() {
-    yield timeout(500);
+  updateArticleFilter = restartableTask(async () => {
+    await timeout(500);
     this.pageNumber = 0;
     this.articleFilterAfterTimeout = this.articleFilter;
-  }
-
-  articleResource = trackedTask(this, this.resourceSearch, () => [
-    this.pageNumber,
-    this.pageSize,
-    this.articleFilterAfterTimeout,
-  ]);
+  });
 
-  @task({ restartable: true })
-  *resourceSearch() {
+  resourceSearch = restartableTask(async () => {
     this.error = null;
     const abortController = new AbortController();
-    const signal = abortController.signal;
     try {
-      const results = yield fetchArticles(
+      const results = await fetchArticles(
         this.args.decision.uri,
         this.pageNumber,
         this.pageSize,
-        this.articleFilterAfterTimeout,
-        signal
+        this.articleFilterAfterTimeout
       );
       this.totalCount = results.totalCount;
       return results.articles;
@@ -55,11 +48,17 @@ export default class EditorPluginsCitationsDecisionDetailComponent extends Compo
     } finally {
       abortController.abort();
     }
-  }
+  });
+
+  articleResource = trackedTask(this, this.resourceSearch, () => [
+    this.pageNumber,
+    this.pageSize,
+    this.articleFilterAfterTimeout,
+  ]);
 
   @action
-  close() {
-    this.articleResource.cancel();
+  async close() {
+    await this.articleResource.cancel();
     this.args.close();
   }
 

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

@@ -2,7 +2,7 @@
   <AuList @direction="vertical" @divider={{true}}>
     {{#each @decisions as |decision|}}
       <AuList::Item class="au-u-padding-left-small au-u-padding-right-small">
-        <CitatenPlugin::Citations::DecisionPreview
+        <CitationPlugin::Citations::DecisionPreview
           @decision={{decision}}
           @onCitationInsert={{fn @onCitationInsert decision}}
           @onCitationDetails={{fn @onCitationDetails decision}}
@@ -11,5 +11,5 @@
     {{/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}}