@lblod/ember-rdfa-editor-lblod-plugins 0.3.0 → 0.4.0

package/addon/components/citaten-plugin/citaat-insert.js

@@ -0,0 +1,68 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { LEGISLATION_TYPES } from '../../utils/legislation-types';
+export default class EditorPluginsCitaatInsertComponent extends Component {
+  @tracked disableInsert = false;
+  @tracked showModal = false;
+  @tracked legislationTypeUri = LEGISLATION_TYPES.decreet;
+  @tracked text = '';
+
+  constructor() {
+    super(...arguments);
+    this.args.controller.onEvent(
+      'selectionChanged',
+      this.onSelectionChanged.bind(this)
+    );
+  }
+
+  onSelectionChanged() {
+    const selectedRange = this.args.controller.selection.lastRange;
+    if (!selectedRange) {
+      return;
+    }
+    const limitedDatastore = this.args.controller.datastore.limitToRange(
+      selectedRange,
+      'rangeIsInside'
+    );
+    const motivering = limitedDatastore
+      .match(null, '>http://data.vlaanderen.be/ns/besluit#motivering')
+      .asQuads()
+      .next().value;
+    this.disableInsert = motivering ? false : true;
+  }
+
+  @action
+  openModal() {
+    this.showModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showModal = false;
+  }
+
+  @action
+  insertDecisionCitation(decision) {
+    const type = decision.legislationType.label;
+    const uri = decision.uri;
+    const title = decision.title;
+    const range = this.args.controller.selection.lastRange;
+    const citationHtml = `${
+      type ? type : ''
+    } <a class="annotation" href="${uri}" property="eli:cites" typeof="eli:LegalExpression">${title}</a>&nbsp;`;
+    this.args.controller.executeCommand('insert-html', citationHtml, range);
+  }
+
+  @action
+  insertArticleCitation(decision, article) {
+    const type = decision.legislationType.label;
+    const uri = article.uri;
+    const title = `${decision.title}, ${article.number}`;
+    const range = this.args.controller.selection.lastRange;
+    const citationHtml = `${
+      type ? type : ''
+    } <a class="annotation" href="${uri}" property="eli:cites" typeof="eli:LegalExpression">${title}</a>&nbsp;`;
+    this.args.controller.executeCommand('insert-html', citationHtml, range);
+  }
+}

package/addon/components/citaten-plugin/citations/article-list.hbs

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

package/addon/components/citaten-plugin/citations/article-preview.hbs

@@ -0,0 +1,16 @@
+<div class="au-u-margin" ...attributes>
+  <AuHeading @level="3" @skin="5" class="au-u-margin-bottom-small">
+  {{@article.number}} ({{@article.dateInForce}} - {{if @article.dateNoLongerInForce @article.dateNoLongerInForce "…"}})
+  </AuHeading>
+  <p>
+    {{@article.content}}
+  </p>
+  <AuButton
+    @skin="primary"
+    @icon="plus-text"
+    @iconAlignment="left"
+    class="au-u-margin-top-small"
+    {{on "click" @insertArticleCitation}}>
+    {{t "citaten-plugin.references.refer-article"}}
+  </AuButton>
+</div>

package/addon/components/citaten-plugin/citations/decision-detail.hbs

@@ -0,0 +1,110 @@
+<div class="citaten--main-container au-u-flex au-u-flex--column au-u-flex--between">
+  <div class="citaten--container-content">
+    {{! Heading with title and actions }}
+    <div class="citaten--container-header au-u-background-gray-100 au-o-box">
+      <AuHeading @level="2" @skin="4">
+        {{capitalize @decision.fullTitle}}
+      </AuHeading>
+      {{#if @decision.publicationDate}}
+        <AuPill
+          class="au-u-margin-top-small au-u-margin-bottom-small"
+          @skin="border"
+          @icon="calendar"
+          @iconAlignment="left">
+          {{@decision.publicationDate}}
+        </AuPill>
+      {{/if}}
+      <br />
+      <AuButton
+        @skin="primary"
+        @icon="plus-text"
+        @iconAlignment="left"
+        class="au-u-margin-right"
+        {{on "click" (fn @insertDecisionCitation @decision)}}>
+        {{t "citaten-plugin.references.refer-whole"}}
+      </AuButton>
+      <AuLinkExternal
+        @skin="primary"
+        @icon="link-external"
+        @iconAlignment="left"
+        href={{@decision.uri}}
+        rel="noreferrer noopener">
+        {{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)}}/>
+    </div>
+    {{! Search results }}
+    <div>
+      {{#if this.articleResource.isRunning}}
+        <div class="au-o-box">
+          <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" />
+        {{else}}
+          <CitatenPlugin::Citations::ArticleList
+            @insertArticleCitation={{fn @insertArticleCitation @decision}}
+            @articles={{this.articleResource.value}}
+            @fullSize={{true}}/>
+        {{/if}}
+      {{/if}}
+    </div>
+  </div>
+  {{! Footer }}
+  <div>
+    <div class="citaten--container-footer au-u-background-gray-100">
+      <AuToolbar
+        @border="top"
+        @size="large"
+        @nowrap={{true}}>
+        <div class="au-c-pagination">
+          {{! Always shown, back to main dialog }}
+          <div class="au-c-pagination__list-item">
+            <AuButton
+              @skin="link"
+              @icon="hierarchical-back"
+              @iconAlignment="left"
+              {{on "click" this.close}}>
+              {{t "citaten-plugin.search.back"}}
+            </AuButton>
+          </div>
+          {{! Pagination of articles }}
+          {{#if this.articleResource.value.length}}
+            <p>
+              <span class="au-u-hidden-visually">{{t "citaten-plugin.search.results"}}</span>
+              <strong>
+                {{this.rangeStart}} - {{this.rangeEnd}}
+              </strong>
+              {{t "citaten-plugin.pagination.of"}}
+              {{this.totalCount}}
+            </p>
+            <div class="au-c-pagination__list-item">
+              {{#unless this.isFirstPage}}
+                <AuButton
+                  @skin="link"
+                  @icon="nav-left"
+                  @iconAlignment="left"
+                  {{on "click" this.previousPage}}>
+                  {{t "citaten-plugin.pagination.previous"}}
+                </AuButton>
+              {{/unless}}
+              {{#unless this.isLastPage}}
+                <AuButton
+                  @skin="link"
+                  @icon="nav-right"
+                  @iconAlignment="right"
+                  {{on "click" this.nextPage}}>
+                  {{t "citaten-plugin.pagination.next"}}
+                </AuButton>
+              {{/unless}}
+            </div>
+          {{/if}}
+        </div>
+      </AuToolbar>
+    </div>
+  </div>
+</div>

package/addon/components/citaten-plugin/citations/decision-detail.js

@@ -0,0 +1,94 @@
+import Component from '@glimmer/component';
+import { 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 { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+
+export default class EditorPluginsCitationsDecisionDetailComponent extends Component {
+  @tracked error;
+  @tracked pageNumber = 0;
+  @tracked pageSize = 5;
+  @tracked totalCount;
+  @tracked articles = [];
+  @tracked articleFilter;
+  @tracked articleFilterAfterTimeout;
+
+  constructor() {
+    super(...arguments);
+  }
+
+  @task({ restartable: true })
+  *updateArticleFilter() {
+    yield timeout(500);
+    this.pageNumber = 0;
+    this.articleFilterAfterTimeout = this.articleFilter;
+  }
+
+  articleResource = trackedTask(this, this.resourceSearch, () => [
+    this.pageNumber,
+    this.pageSize,
+    this.articleFilterAfterTimeout,
+  ]);
+
+  @task({ restartable: true })
+  *resourceSearch() {
+    this.error = null;
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    try {
+      const results = yield fetchArticles(
+        this.args.decision.uri,
+        this.pageNumber,
+        this.pageSize,
+        this.articleFilterAfterTimeout,
+        signal
+      );
+      this.totalCount = results.totalCount;
+      return results.articles;
+    } catch (e) {
+      console.warn(e); // eslint-ignore-line no-console
+      this.totalCount = 0;
+      this.error = e;
+      return [];
+    } finally {
+      abortController.abort();
+    }
+  }
+
+  @action
+  close() {
+    this.articleResource.cancel();
+    this.args.close();
+  }
+
+  // Pagination
+
+  @action
+  previousPage() {
+    --this.pageNumber;
+  }
+
+  @action
+  nextPage() {
+    ++this.pageNumber;
+  }
+
+  get rangeStart() {
+    return this.pageNumber * this.pageSize + 1;
+  }
+
+  get rangeEnd() {
+    const end = this.rangeStart + this.pageSize - 1;
+    return end > this.totalCount ? this.totalCount : end;
+  }
+
+  get isFirstPage() {
+    return this.pageNumber == 0;
+  }
+
+  get isLastPage() {
+    return this.rangeEnd == this.totalCount;
+  }
+}

package/addon/components/citaten-plugin/citations/decision-list.hbs

@@ -0,0 +1,15 @@
+{{#if @decisions.length}}
+  <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
+          @decision={{decision}}
+          @onCitationInsert={{fn @onCitationInsert decision}}
+          @onCitationDetails={{fn @onCitationDetails decision}}
+          @fullSize={{@fullSize}} />
+      </AuList::Item>
+    {{/each}}
+  </AuList>
+{{else}}
+  <CitatenPlugin::Helpers::AlertNoItems @fullSize={{@fullSize}} class={{if @fullSize "au-u-margin"}}/>
+{{/if}}

package/addon/components/citaten-plugin/citations/decision-preview.hbs

@@ -0,0 +1,53 @@
+<div class="citaten--decision-list-item {{if @fullSize "au-u-padding-small"}}" ...attributes>
+  <p class="citaten--decision-title {{if @fullSize "au-u-h6 au-u-medium" "au-u-h-functional"}}">
+    {{if @fullSize (capitalize @decision.fullTitle) @decision.title}}
+  </p>
+  {{#if (and @fullSize @decision.publicationDate)}}
+    <AuPill
+      class="au-u-margin-top-small au-u-margin-bottom-small"
+      @skin="border"
+      @icon="calendar"
+      @iconAlignment="left">
+      {{@decision.publicationDate}}
+    </AuPill>
+  {{/if}}
+  {{#if @fullSize}}
+    <div>
+      <AuButtonGroup @inline={{false}}>
+        <AuButton
+          @skin="primary"
+          @icon="plus-text"
+          @iconAlignment="left"
+          {{on "click" @onCitationInsert}}>
+          {{t "citaten-plugin.references.insert"}}
+        </AuButton>
+        <AuButton
+          @skin="secondary"
+          @icon="manual"
+          @iconAlignment="left"
+          {{on "click" @onCitationDetails}}>
+          {{t "citaten-plugin.references.details"}}
+        </AuButton>
+      </AuButtonGroup>
+    </div>
+  {{else}}
+    <div class="au-u-flex au-u-flex--row au-u-flex--no-wrap au-u-flex--between au-u-margin-top-tiny">
+      <AuButton
+        @skin="link-secondary"
+        @icon="plus-text"
+        @iconAlignment="left"
+        class="au-u-h-functional"
+        {{on "click" @onCitationInsert}}>
+        {{t "citaten-plugin.references.insert"}}
+      </AuButton>
+      <AuButton
+        @skin="link"
+        @icon="manual"
+        @iconAlignment="left"
+        class="au-u-h-functional"
+        {{on "click" @onCitationDetails}}>
+        {{t "citaten-plugin.references.details"}}
+      </AuButton>
+    </div>
+  {{/if}}
+</div>

package/addon/components/citaten-plugin/citations/search-modal.hbs

@@ -0,0 +1,175 @@
+<AuModal
+  @modalOpen={{true}}
+  @closeModal={{fn this.closeModal this.legislationTypeUri this.text}}
+  @title={{t "citaten-plugin.card.title"}}
+  @size="large"
+  @padding="none" as |modal|>
+  {{#if this.selectedDecision}}
+    <modal.Body>
+      <CitatenPlugin::Citations::DecisionDetail
+        @insertDecisionCitation={{this.insertDecisionCitation}}
+        @insertArticleCitation={{this.insertArticleCitation}}
+        @close={{this.closeDecisionDetail}}
+        @decision={{this.selectedDecision}} />
+    </modal.Body>
+  {{else}}
+    <modal.Body>
+      <AuMainContainer class="citaten--main-container" as |mc|>
+      <mc.sidebar class="citaten--sidebar" @scroll={{true}}>
+        <div class="au-c-sidebar">
+          <div class="au-c-sidebar__content au-u-padding">
+            <AuLabel class="au-margin-bottom-small" for="typeofdocumentexpanded" @inline={{false}} @required={{false}} @error={{false}} @warning={{false}}>{{t "citaten-plugin.search.type"}}</AuLabel>
+            <PowerSelect
+              id="typeofdocumentexpanded"
+              @renderInPlace={{true}}
+              @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.legislationSelected}}
+              @onChange={{this.selectLegislationType}}
+              as |type|>
+              {{type}}
+            </PowerSelect>
+            <AuLabel class="au-u-margin-top au-margin-bottom-small" for="searchtermexpanded" @inline={{false}} @required={{false}} @error={{false}} @warning={{false}}>{{t "citaten-plugin.search.term"}}</AuLabel>
+            <AuInput
+              id="searchtermexpanded"
+              @type="text"
+              @width="block"
+              @icon="search"
+              @iconAlignment="right"
+              @value={{this.text}}
+              placeholder={{t "citaten-plugin.search.placeholder"}}
+              {{on "input" (perform this.updateSearch)}}/>
+            <AuHr @size="large" />
+            {{! Date of document }}
+            <AuLabel class="au-u-margin-top au-u-margin-bottom-small" for="search-codex-datum-document-van" @inline={{false}}>{{t "citaten-plugin.search.date-document"}}</AuLabel>
+            {{! From }}
+            <AuFormRow @alignment="pre" class="au-u-margin-bottom-tiny">
+              <AuLabel for="search-codex-datum-document-van" class="au-u-hidden-visually">{{t "citaten-plugin.search.date-document-from"}}</AuLabel>
+              <AuLabel for="search-codex-datum-document-van" aria-hidden="true" class="au-u-1-4" @inline={{true}}>{{t "citaten-plugin.search.from"}}</AuLabel>
+              <AuDatePicker
+                @id="search-codex-datum-document-van"
+                @alignment="top"
+                @onChange={{this.updateDocumentDateFrom}}
+                @value={{this.documentDateFrom}}
+                @min={{this.minDate}}
+                @max={{this.maxDate}}
+                @localization={{this.datePickerLocalization}} />
+            </AuFormRow>
+            {{! To }}
+            <AuFormRow @alignment="pre">
+              <AuLabel for="search-codex-datum-document-tot" class="au-u-hidden-visually">{{t "citaten-plugin.search.date-document-to"}}</AuLabel>
+              <AuLabel for="search-codex-datum-document-tot" aria-hidden="true" class="au-u-1-4" @inline={{true}}>{{t "citaten-plugin.search.to"}}</AuLabel>
+              <AuDatePicker
+                @id="search-codex-datum-document-tot"
+                @alignment="top"
+                @onChange={{this.updateDocumentDateTo}}
+                @value={{this.documentDateTo}}
+                @min={{this.minDate}}
+                @max={{this.maxDate}}
+                @localization={{this.datePickerLocalization}} />
+            </AuFormRow>
+
+            {{! Date of staatsblad }}
+            <AuLabel class="au-u-margin-top au-u-margin-bottom-small" for="search-codex-datum-staatsblad-van" @inline={{false}}>{{t "citaten-plugin.search.date-publication"}}</AuLabel>
+            {{! From }}
+            <AuFormRow @alignment="pre" class="au-u-margin-bottom-tiny">
+              <AuLabel for="search-codex-datum-staatsblad-van" class="au-u-hidden-visually">{{t "citaten-plugin.search.date-publication-from"}}</AuLabel>
+              <AuLabel for="search-codex-datum-staatsblad-van" aria-hidden="true" class="au-u-1-4" @inline={{true}}>{{t "citaten-plugin.search.from"}}</AuLabel>
+              <AuDatePicker
+                @id="search-codex-datum-staatsblad-van"
+                @alignment="top"
+                @onChange={{this.updatePublicationDateFrom}}
+                @value={{this.publicationDateFrom}}
+                @min={{this.minDate}}
+                @max={{this.maxDate}}
+                @localization={{this.datePickerLocalization}} />
+            </AuFormRow>
+            {{! To }}
+            <AuFormRow @alignment="pre">
+              <AuLabel for="search-codex-datum-staatsblad-tot" class="au-u-hidden-visually">{{t "citaten-plugin.search.date-publication-to"}}</AuLabel>
+              <AuLabel for="search-codex-datum-staatsblad-tot" aria-hidden="true" class="au-u-1-4" @inline={{true}}>{{t "citaten-plugin.search.to"}}</AuLabel>
+              <AuDatePicker
+                @id="search-codex-datum-staatsblad-tot"
+                @alignment="top"
+                @onChange={{this.updatePublicationDateTo}}
+                @value={{this.publicationDateTo}}
+                @min={{this.minDate}}
+                @max={{this.maxDate}}
+                @localization={{this.datePickerLocalization}} />
+            </AuFormRow>
+          </div>
+        </div>
+        </mc.sidebar>
+        <mc.content>
+          {{#if this.decisionResource.isRunning}}
+            <div class="au-u-margin">
+              <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-u-margin"/>
+            {{else}}
+              {{#if this.decisionResource.value.length}}
+                <div class="citaten--container-content au-u-padding-top-small au-u-padding-bottom-small">
+                  <CitatenPlugin::Citations::DecisionList
+                    @decisions={{this.decisionResource.value}}
+                    @onCitationInsert={{this.insertDecisionCitation}}
+                    @onCitationDetails={{this.openDecisionDetail}}
+                    @fullSize={{true}} />
+                </div>
+              {{else}}
+                <CitatenPlugin::Helpers::AlertNoItems @fullSize={{true}} class="au-u-margin" />
+              {{/if}}
+            {{/if}}
+          {{/if}}
+          {{#if this.decisionResource.value.length}}
+            {{! Pagination in the footer of the dialog }}
+            <div class="citaten--container-footer au-u-background-gray-100">
+              <AuToolbar
+                @border="top"
+                @size="large"
+                @nowrap={{true}}>
+                <div class="au-c-pagination">
+                  <p>
+                  <span class="au-u-hidden-visually">{{t "citaten-plugin.search.results"}}</span>
+                    <strong>
+                      {{this.rangeStart}} - {{this.rangeEnd}}
+                    </strong>
+                    {{t "citaten-plugin.pagination.of"}}
+                    {{this.totalCount}}
+                  </p>
+                  <div class="au-c-pagination__list-item">
+                    {{#unless this.isFirstPage}}
+                      <AuButton
+                        @skin="link"
+                        @icon="nav-left"
+                        @iconAlignment="left"
+                        {{on "click" this.previousPage}}>
+                        {{t "citaten-plugin.pagination.previous"}}
+                      </AuButton>
+                    {{/unless}}
+                    {{#unless this.isLastPage}}
+                      <AuButton
+                        @skin="link"
+                        @icon="nav-right"
+                        @iconAlignment="right"
+                        {{on "click" this.nextPage}}>
+                        {{t "citaten-plugin.pagination.next"}}
+                      </AuButton>
+                    {{/unless}}
+                  </div>
+                </div>
+              </AuToolbar>
+            </div>
+          {{/if}}
+        </mc.content>
+      </AuMainContainer>
+    </modal.Body>
+  {{/if}}
+</AuModal>