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

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>

package/addon/components/{citaten-plugin/citations/search-modal.js → citation-plugin/citations/search-modal.ts}

@@ -1,17 +1,26 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { task, timeout } from 'ember-concurrency';
+import { restartableTask, timeout } from 'ember-concurrency';
 import { inject as service } from '@ember/service';
 import { capitalize } from '@ember/string';
 import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
 import {
-  LEGISLATION_TYPES,
   LEGISLATION_TYPE_CONCEPTS,
+  LEGISLATION_TYPES,
 } from '../../../utils/legislation-types';
-import { fetchDecisions } from '../../../utils/vlaamse-codex';
+import {
+  Article,
+  Decision,
+  fetchDecisions,
+} from '../../../plugins/citation-plugin/utils/vlaamse-codex';
+import IntlService from 'ember-intl/services/intl';
+import {
+  Option,
+  unwrap,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
-function getISODate(date) {
+function getISODate(date: Option<Date>): string | null {
   if (date) {
     // Flatpickr captures the date in local time. Hence date.toISOString() may return the day before the selected date
     // E.g. selected date 2020-04-15 00:00:00 GMT+0200 will become 2020-04-14 22:00:00 UTC
@@ -24,27 +33,42 @@ function getISODate(date) {
   }
 }
 
-export default class EditorPluginsCitationsSearchModalComponent extends Component {
-  @service intl;
-  @tracked text;
-  @tracked textAfterTimeout;
+interface Args {
+  selectedDecision: Decision;
+  legislationTypeUri: string;
+  text: string;
+  insertDecisionCitation: (decision: Decision) => void;
+  insertArticleCitation: (decision: Decision, article: Article) => void;
+  closeModal: (legislationTypeUri?: string, text?: string) => void;
+}
+
+export default class EditorPluginsCitationsSearchModalComponent extends Component<Args> {
+  @service declare intl: IntlService;
   // Vlaamse Codex currently doesn't contain captions and content of decisions
   // @tracked isEnabledSearchCaption = false
   // @tracked isEnabledSearchContent = false
-  @tracked legislationTypeUri;
+  @tracked legislationTypeUri: string;
   @tracked pageNumber = 0;
   @tracked pageSize = 5;
-  @tracked totalCount;
+  @tracked totalCount = 0;
   @tracked decisions = [];
-  @tracked error;
-  @tracked selectedDecision;
-  @tracked documentDateFrom = null;
-  @tracked documentDateTo = null;
-  @tracked publicationDateFrom = null;
-  @tracked publicationDateTo = null;
+  @tracked error: unknown;
+  @tracked selectedDecision: Decision | null;
+  @tracked documentDateFrom: Date | null = null;
+  @tracked documentDateTo: Date | null = null;
+  @tracked publicationDateFrom: Date | null = null;
+  @tracked publicationDateTo: Date | null = null;
+  @tracked inputSearchText: string | null = null;
   minDate = new Date('1930-01-01T12:00:00');
   maxDate = new Date(`${new Date().getFullYear() + 10}-01-01T12:00:00`);
 
+  constructor(owner: unknown, args: Args) {
+    super(owner, args);
+    this.selectedDecision = this.args.selectedDecision;
+    this.legislationTypeUri =
+      this.args.legislationTypeUri || LEGISLATION_TYPES['decreet'];
+  }
+
   get datePickerLocalization() {
     return {
       buttonLabel: this.intl.t('auDatePicker.buttonLabel'),
@@ -62,14 +86,6 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     };
   }
 
-  constructor() {
-    super(...arguments);
-    this.selectedDecision = this.args.selectedDecision;
-    this.legislationTypeUri =
-      this.args.legislationTypeUri || LEGISLATION_TYPES['decreet'];
-    this.text = this.args.text;
-  }
-
   get legislationTypes() {
     return Object.keys(LEGISLATION_TYPES).map(capitalize);
   }
@@ -78,31 +94,44 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
     const found = LEGISLATION_TYPE_CONCEPTS.find(
       (c) => c.value === this.legislationTypeUri
     );
-    return capitalize(found ? found.label : LEGISLATION_TYPE_CONCEPTS[0].label);
+    return capitalize(
+      found ? found.label : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).label
+    );
   }
 
-  decisionResource = trackedTask(this, this.resourceSearch, () => [
-    this.textAfterTimeout,
-    this.legislationTypeUri,
-    this.pageSize,
-    this.pageNumber,
-    this.documentDateFrom,
-    this.documentDateTo,
-    this.publicationDateFrom,
-    this.publicationDateTo,
-  ]);
+  get text() {
+    return this.args.text;
+  }
+
+  get searchText() {
+    return this.inputSearchText ?? this.text;
+  }
+
+  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;
+  }
 
-  @task({ restartable: true })
-  *resourceSearch() {
+  resourceSearch = restartableTask(async () => {
+    await timeout(500);
     this.error = null;
-    yield undefined; //To prevent retriggering because of the use of this.text later.
     const abortController = new AbortController();
-    const signal = abortController.signal;
     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.textAfterTimeout || this.text || '').match(/\S+/g) || [];
+      const words = this.searchText.match(/\S+/g) || [];
       const filter = {
         type: this.legislationTypeUri,
         documentDateFrom: getISODate(this.documentDateFrom),
@@ -110,12 +139,11 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
         publicationDateFrom: getISODate(this.publicationDateFrom),
         publicationDateTo: getISODate(this.publicationDateTo),
       };
-      const results = yield fetchDecisions(
+      const results = await fetchDecisions(
         words,
         filter,
         this.pageNumber,
-        this.pageSize,
-        signal
+        this.pageSize
       );
       this.totalCount = results.totalCount;
       return results.decisions;
@@ -128,72 +156,82 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
       //Abort all requests now that this task has either successfully finished or has been cancelled
       abortController.abort();
     }
-  }
+  });
 
-  @task({ restartable: true })
-  *updateSearch() {
-    yield timeout(500);
-    this.textAfterTimeout = this.text;
-    this.pageNumber = 0;
+  decisionResource = trackedTask(this, this.resourceSearch, () => [
+    this.searchText,
+    this.legislationTypeUri,
+    this.pageSize,
+    this.pageNumber,
+    this.documentDateFrom,
+    this.documentDateTo,
+    this.publicationDateFrom,
+    this.publicationDateTo,
+  ]);
+
+  @action
+  setInputSearchText(event: InputEvent) {
+    this.inputSearchText = (event.target as HTMLInputElement).value;
   }
 
   @action
-  selectLegislationType(type) {
+  selectLegislationType(type: string) {
     type = type.toLowerCase();
     const found = LEGISLATION_TYPE_CONCEPTS.find(
       (c) => c.label.toLowerCase() === type
     );
     this.legislationTypeUri = found
       ? found.value
-      : LEGISLATION_TYPE_CONCEPTS[0].value;
+      : unwrap(LEGISLATION_TYPE_CONCEPTS[0]).value;
   }
 
   @action
-  updateDocumentDateFrom(isoDate, date) {
+  updateDocumentDateFrom(_isoDate: unknown, date: Date) {
     this.documentDateFrom = date;
   }
 
   @action
-  updateDocumentDateTo(isoDate, date) {
+  updateDocumentDateTo(_isoDate: unknown, date: Date) {
     this.documentDateTo = date;
   }
 
   @action
-  updatePublicationDateFrom(isoDate, date) {
+  updatePublicationDateFrom(_isoDate: unknown, date: Date) {
     this.publicationDateFrom = date;
   }
 
   @action
-  updatePublicationDateTo(isoDate, date) {
+  updatePublicationDateTo(_isoDate: unknown, date: Date) {
     this.publicationDateTo = date;
   }
 
   @action
-  insertDecisionCitation(decision) {
+  async insertDecisionCitation(decision: Decision) {
     this.args.insertDecisionCitation(decision);
-    this.closeModal();
+    await this.closeModal();
   }
 
   @action
-  insertArticleCitation(decision, article) {
+  async insertArticleCitation(decision: Decision, article: Article) {
     this.args.insertArticleCitation(decision, article);
-    this.closeModal();
+    await this.closeModal();
   }
 
   @action
-  closeModal(legislationTypeUri, text) {
-    this.decisionResource.cancel();
+  async closeModal(legislationTypeUri?: string, text?: string) {
+    await this.decisionResource.cancel();
+    this.inputSearchText = null;
     this.args.closeModal(legislationTypeUri, text);
   }
 
   @action
-  closeDecisionDetail() {
-    this.selectedDecision = null;
+  openDecisionDetail(decision: Decision) {
+    this.selectedDecision = decision;
   }
 
   @action
-  openDecisionDetail(decision) {
-    this.selectedDecision = decision;
+  closeDecisionDetail() {
+    this.selectedDecision = null;
   }
 
   // Pagination
@@ -207,37 +245,26 @@ export default class EditorPluginsCitationsSearchModalComponent extends Componen
   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;
-  }
 }
 
-function getLocalizedMonths(intl, monthFormat = 'long') {
-  let someYear = 2021;
+function getLocalizedMonths(
+  intl: IntlService,
+  monthFormat: Intl.DateTimeFormatOptions['month'] = 'long'
+) {
+  const someYear = 2021;
   return [...Array(12).keys()].map((monthIndex) => {
-    let date = new Date(someYear, monthIndex);
+    const date = new Date(someYear, monthIndex);
     return intl.formatDate(date, { month: monthFormat });
   });
 }
 
-function getLocalizedDays(intl, weekdayFormat = 'long') {
-  let someSunday = new Date('2021-01-03');
+function getLocalizedDays(
+  intl: IntlService,
+  weekdayFormat: Intl.DateTimeFormatOptions['weekday'] = 'long'
+) {
+  const someSunday = new Date('2021-01-03');
   return [...Array(7).keys()].map((index) => {
-    let weekday = new Date(someSunday.getTime());
+    const weekday = new Date(someSunday.getTime());
     weekday.setDate(someSunday.getDate() + index);
     return intl.formatDate(weekday, { weekday: weekdayFormat });
   });