@lblod/ember-rdfa-editor-lblod-plugins 0.3.1 → 0.4.1

package/addon/components/citaten-plugin/citaat-card.hbs

@@ -0,0 +1,76 @@
+{{#if this.showCard}}
+  <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" 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.legislationSelected}}
+            @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>
+          <AuInput
+            id="searchterm"
+            @type="text"
+            @width="block"
+            @icon="search"
+            @iconAlignment="right"
+            @value={{this.text}}
+            placeholder={{t "citaten-plugin.search.placeholder"}}
+            {{on "input" (perform this.updateSearch)}}/>
+        </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}}
+          <CitatenPlugin::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">
+            <CitatenPlugin::Citations::DecisionList
+              @decisions={{this.decisionResource.value}}
+              @onCitationInsert={{this.insertDecisionCitation}}
+              @onCitationDetails={{this.openDecisionDetailModal}} />
+          </div>
+        {{/if}}
+      {{/if}}
+    </c.footer>
+  </AuCard>
+{{/if}}
+
+{{#if this.showModal}}
+  <CitatenPlugin::Citations::SearchModal
+    @closeModal={{this.closeModal}}
+    @insertDecisionCitation={{this.insertDecisionCitation}}
+    @insertArticleCitation={{this.insertArticleCitation}}
+    @selectedDecision={{this.decision}}
+    @legislationTypeUri={{this.legislationTypeUri}}
+    @text={{this.text}} />
+{{/if}}

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

@@ -0,0 +1,286 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+// import { task } from 'ember-concurrency-decorators';
+import { task, timeout } from 'ember-concurrency';
+import { action } from '@ember/object';
+import { capitalize } from '@ember/string';
+import processMatch from '../../utils/processMatch';
+import { cleanCaches, fetchDecisions } from '../../utils/vlaamse-codex';
+import {
+  LEGISLATION_TYPE_CONCEPTS,
+  LEGISLATION_TYPES,
+} from '../../utils/legislation-types';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+
+const BASIC_MULTIPLANE_CHARACTER = '\u0021-\uFFFF'; // most of the characters used around the world
+
+// Regex nicely structured:
+// (
+//   (
+//     \w*decreet |
+//     omzendbrief |
+//     verdrag |
+//     grondwetswijziging |
+//     samenwerkingsakkoord |
+//     \w*wetboek |
+//     protocol |
+//     besluit[^\S\n]van[^\S\n]de[^\S\n]vlaamse[^\S\n]regering |
+//     geco[öo]rdineerde wetten |
+//     \w*wet |
+//     koninklijk[^\S\n]?besluit |
+//     ministerieel[^\S\n]?besluit |
+//     genummerd[^\S\n]?koninklijk[^\S\n]?besluit
+//   )
+//   [^\S\n]*
+//   (
+//     ([^\S\n] | [\u0021-\uFFFF\d;:'"()&\-_]){3,}
+//   )?
+// )
+const NNWS = '[^\\S\\n]';
+const CITATION_REGEX = new RegExp(
+  `((\\w*decreet|omzendbrief|verdrag|grondwetswijziging|samenwerkingsakkoord|\\w*wetboek|protocol|besluit${NNWS}van${NNWS}de${NNWS}vlaamse${NNWS}regering|geco[öo]rdineerde${NNWS}wetten|\\w*wet|koninklijk${NNWS}?besluit|ministerieel${NNWS}?besluit|genummerd${NNWS}?koninklijk${NNWS}?besluit|\\w*${NNWS}?besluit)${NNWS}*((${NNWS}|[${BASIC_MULTIPLANE_CHARACTER};:'"()&-_]){3,})?)`,
+  'uig'
+);
+
+export default class CitaatCardComponent extends Component {
+  @tracked pageNumber = 0;
+  @tracked pageSize = 5;
+  @tracked totalSize;
+  @tracked decisions = [];
+  @tracked error;
+  @tracked showModal = false;
+  @tracked showCard = false;
+  @tracked decision;
+  @tracked legislationTypeUri;
+  @tracked legislationTypeUriAfterTimeout;
+  @tracked text;
+  @tracked textAfterTimeout;
+  @tracked markSelected;
+  liveHighlights;
+
+  constructor() {
+    super(...arguments);
+    this.liveHighlights = this.args.controller.createLiveMarkSet({
+      datastoreQuery: (datastore) => {
+        const matches = datastore
+          .match(null, '>http://data.vlaanderen.be/ns/besluit#motivering')
+          .searchTextIn('predicate', CITATION_REGEX);
+        const resultMatches = matches.filter((match) => {
+          return (
+            datastore
+              .limitToRange(match.range, {
+                type: 'rangeTouches',
+                includeEndTags: true,
+              })
+              .match(null, '>http://data.europa.eu/eli/ontology#cites').size ===
+            0
+          );
+        });
+        resultMatches.forEach((match) => (match.range = match.groupRanges[1]));
+        return resultMatches;
+      },
+
+      liveMarkSpecs: [
+        {
+          name: 'citaten',
+          attributesBuilder: (textMatch) => {
+            const result = processMatch(textMatch);
+            return {
+              setBy: 'citaten-plugin',
+              text: result.text,
+              legislationTypeUri: result.legislationTypeUri,
+            };
+          },
+        },
+        'highlighted',
+      ],
+    });
+    this.controller.onEvent(
+      'selectionChanged',
+      this.onSelectionChanged.bind(this)
+    );
+  }
+
+  onSelectionChanged() {
+    const range = this.controller.selection.lastRange;
+    if (!range) {
+      return;
+    }
+    const marks = range.getMarks();
+    let selectionMark;
+    for (let mark of marks) {
+      if (mark.name === 'citaten') {
+        selectionMark = mark;
+        break;
+      }
+    }
+    if (selectionMark) {
+      if (this.showCard) {
+        //Card was already shown, update search condition and trigger search debounced
+        this.text = selectionMark.attributes.text;
+        this.legislationTypeUri = selectionMark.attributes.legislationTypeUri;
+        this.markSelected = selectionMark;
+        this.updateSearch.perform();
+      } else {
+        //When card is renderend first time, the resource will automatically trigger, no updateSearch is needed, but make sure to first set the search conditions, before showing the card.
+        //When not first time, but reopened, search terms could not have changed yet, so also no updateSearch needed
+        this.text = selectionMark.attributes.text;
+        this.legislationTypeUri = selectionMark.attributes.legislationTypeUri;
+        if (
+          this.legislationTypeUriAfterTimeout &&
+          (this.legislationTypeUri !== this.legislationTypeUriAfterTimeout ||
+            this.text !== this.textAfterTimeout)
+        ) {
+          //Convoluted, but this is when you switch from one reference insertion to another
+          this.updateSearchImmediate.perform();
+        }
+        this.markSelected = selectionMark;
+        this.showCard = true;
+      }
+    } else {
+      this.showCard = false;
+      //Would be nice, but this triggers way to often causing the cancellation of useful requests
+      //this.decisionResource.cancel();
+    }
+  }
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get legislationTypes() {
+    return Object.keys(LEGISLATION_TYPES).map(capitalize);
+  }
+
+  get legislationSelected() {
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.value === this.legislationTypeUri
+    );
+    return capitalize(found ? found.label : LEGISLATION_TYPE_CONCEPTS[0].label);
+  }
+
+  decisionResource = trackedTask(this, this.resourceSearch, () => [
+    this.textAfterTimeout,
+    this.legislationTypeUriAfterTimeout,
+    this.pageNumber,
+    this.pageSize,
+  ]);
+
+  @task({ restartable: true })
+  *updateSearch() {
+    yield timeout(500);
+    this.textAfterTimeout = this.text;
+    this.legislationTypeUriAfterTimeout = this.legislationTypeUri;
+  }
+
+  @task({ restartable: true })
+  *updateSearchImmediate() {
+    this.textAfterTimeout = this.text;
+    this.legislationTypeUriAfterTimeout = this.legislationTypeUri;
+    yield;
+  }
+
+  @task({ restartable: true })
+  *resourceSearch() {
+    this.error = null;
+    yield undefined; //To prevent other variables used below (this.text and this.legislationTypeUri) to trigger a retrigger.
+    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 filter = {
+        type: this.legislationTypeUriAfterTimeout || this.legislationTypeUri,
+      };
+      const results = yield fetchDecisions(
+        words,
+        filter,
+        this.pageNumber,
+        this.pageSize,
+        signal
+      );
+      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();
+    }
+  }
+
+  @action
+  selectLegislationType(type) {
+    type = type.toLowerCase();
+    const found = LEGISLATION_TYPE_CONCEPTS.find(
+      (c) => c.label.toLowerCase() === type
+    );
+    this.legislationTypeUri = found
+      ? found.value
+      : LEGISLATION_TYPE_CONCEPTS[0].value;
+    this.legislationTypeUriAfterTimeout = this.legislationTypeUri;
+  }
+
+  @action
+  openDecisionDetailModal(decision) {
+    this.decision = decision;
+    this.showModal = true;
+  }
+
+  @action
+  openSearchModal() {
+    this.decisionResource.cancel();
+    this.decision = null;
+    this.showModal = true;
+  }
+
+  @action
+  closeModal(lastSearchType, lastSearchTerm) {
+    this.showModal = false;
+    this.decision = null;
+    if (lastSearchType) this.legislationTypeUri = lastSearchType;
+    if (lastSearchTerm) this.text = lastSearchTerm;
+    if (lastSearchType || lastSearchTerm) this.updateSearchImmediate.perform();
+  }
+
+  @action
+  insertDecisionCitation(decision) {
+    const type = decision.legislationType.label;
+    const uri = decision.uri;
+    const title = decision.title;
+    const range = this.controller.rangeFactory.fromAroundNode(
+      this.markSelected.node
+    );
+    const citationHtml = `${
+      type ? type : ''
+    } <a class="annotation" href="${uri}" property="eli:cites" typeof="eli:LegalExpression">${title}</a>&nbsp;`;
+    this.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.controller.rangeFactory.fromAroundNode(
+      this.markSelected.node
+    );
+    const citationHtml = `${
+      type ? type : ''
+    } <a class="annotation" href="${uri}" property="eli:cites" typeof="eli:LegalExpression">${title}</a>&nbsp;`;
+    this.controller.executeCommand('insert-html', citationHtml, range);
+  }
+
+  async willDestroy() {
+    // Not necessary as ember-concurrency does this for us.
+    // this.decisionResource.cancel();
+    cleanCaches();
+    this.liveHighlights.destroy();
+    super.willDestroy();
+  }
+}

package/addon/components/citaten-plugin/citaat-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>
+
+{{#if this.showModal}}
+  <CitatenPlugin::Citations::SearchModal
+    @closeModal={{this.closeModal}}
+    @insertDecisionCitation={{this.insertDecisionCitation}}
+    @insertArticleCitation={{this.insertArticleCitation}}
+    @legislationTypeUri={{this.legislationTypeUri}}
+    @text={{this.text}}
+  />
+{{/if}}

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