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

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.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}}

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

@@ -0,0 +1,254 @@
+<AuModal
+  @modalOpen={{@open}}
+  @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>
+      <CitationPlugin::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>
+              <AuNativeInput
+                @icon='search'
+                @type='text'
+                @width='block'
+                @iconAlignment='right'
+                id='searchtermexpanded'
+                value={{this.searchText}}
+                placeholder={{t 'citaten-plugin.search.placeholder'}}
+                {{on 'input' this.setInputSearchText}}
+              />
+
+              <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}}
+              <CitationPlugin::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'
+                >
+                  <CitationPlugin::Citations::DecisionList
+                    @decisions={{this.decisionResource.value}}
+                    @onCitationInsert={{this.insertDecisionCitation}}
+                    @onCitationDetails={{this.openDecisionDetail}}
+                    @fullSize={{true}}
+                  />
+                </div>
+              {{else}}
+                <CitationPlugin::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>