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

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>

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

@@ -0,0 +1,244 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { task, 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,
+} from '../../../utils/legislation-types';
+import { fetchDecisions } from '../../../utils/vlaamse-codex';
+
+function getISODate(date) {
+  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
+    // We will pretend the selected date is UTC because that's what's meant as date for filtering
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    return `${date.getFullYear()}-${month}-${day}`;
+  } else {
+    return null;
+  }
+}
+
+export default class EditorPluginsCitationsSearchModalComponent extends Component {
+  @service intl;
+  @tracked text;
+  @tracked textAfterTimeout;
+  // Vlaamse Codex currently doesn't contain captions and content of decisions
+  // @tracked isEnabledSearchCaption = false
+  // @tracked isEnabledSearchContent = false
+  @tracked legislationTypeUri;
+  @tracked pageNumber = 0;
+  @tracked pageSize = 5;
+  @tracked totalCount;
+  @tracked decisions = [];
+  @tracked error;
+  @tracked selectedDecision;
+  @tracked documentDateFrom = null;
+  @tracked documentDateTo = null;
+  @tracked publicationDateFrom = null;
+  @tracked publicationDateTo = null;
+  minDate = new Date('1930-01-01T12:00:00');
+  maxDate = new Date(`${new Date().getFullYear() + 10}-01-01T12:00:00`);
+
+  get datePickerLocalization() {
+    return {
+      buttonLabel: this.intl.t('auDatePicker.buttonLabel'),
+      selectedDateMessage: this.intl.t('auDatePicker.selectedDateMessage'),
+      prevMonthLabel: this.intl.t('auDatePicker.prevMonthLabel'),
+      nextMonthLabel: this.intl.t('auDatePicker.nextMonthLabel'),
+      monthSelectLabel: this.intl.t('auDatePicker.monthSelectLabel'),
+      yearSelectLabel: this.intl.t('auDatePicker.yearSelectLabel'),
+      closeLabel: this.intl.t('auDatePicker.closeLabel'),
+      keyboardInstruction: this.intl.t('auDatePicker.keyboardInstruction'),
+      calendarHeading: this.intl.t('auDatePicker.calendarHeading'),
+      dayNames: getLocalizedDays(this.intl),
+      monthNames: getLocalizedMonths(this.intl),
+      monthNamesShort: getLocalizedMonths(this.intl, 'short'),
+    };
+  }
+
+  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);
+  }
+
+  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.legislationTypeUri,
+    this.pageSize,
+    this.pageNumber,
+    this.documentDateFrom,
+    this.documentDateTo,
+    this.publicationDateFrom,
+    this.publicationDateTo,
+  ]);
+
+  @task({ restartable: true })
+  *resourceSearch() {
+    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 filter = {
+        type: this.legislationTypeUri,
+        documentDateFrom: getISODate(this.documentDateFrom),
+        documentDateTo: getISODate(this.documentDateTo),
+        publicationDateFrom: getISODate(this.publicationDateFrom),
+        publicationDateTo: getISODate(this.publicationDateTo),
+      };
+      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();
+    }
+  }
+
+  @task({ restartable: true })
+  *updateSearch() {
+    yield timeout(500);
+    this.textAfterTimeout = this.text;
+    this.pageNumber = 0;
+  }
+
+  @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;
+  }
+
+  @action
+  updateDocumentDateFrom(isoDate, date) {
+    this.documentDateFrom = date;
+  }
+
+  @action
+  updateDocumentDateTo(isoDate, date) {
+    this.documentDateTo = date;
+  }
+
+  @action
+  updatePublicationDateFrom(isoDate, date) {
+    this.publicationDateFrom = date;
+  }
+
+  @action
+  updatePublicationDateTo(isoDate, date) {
+    this.publicationDateTo = date;
+  }
+
+  @action
+  insertDecisionCitation(decision) {
+    this.args.insertDecisionCitation(decision);
+    this.closeModal();
+  }
+
+  @action
+  insertArticleCitation(decision, article) {
+    this.args.insertArticleCitation(decision, article);
+    this.closeModal();
+  }
+
+  @action
+  closeModal(legislationTypeUri, text) {
+    this.decisionResource.cancel();
+    this.args.closeModal(legislationTypeUri, text);
+  }
+
+  @action
+  closeDecisionDetail() {
+    this.selectedDecision = null;
+  }
+
+  @action
+  openDecisionDetail(decision) {
+    this.selectedDecision = decision;
+  }
+
+  // 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;
+  }
+}
+
+function getLocalizedMonths(intl, monthFormat = 'long') {
+  let someYear = 2021;
+  return [...Array(12).keys()].map((monthIndex) => {
+    let date = new Date(someYear, monthIndex);
+    return intl.formatDate(date, { month: monthFormat });
+  });
+}
+
+function getLocalizedDays(intl, weekdayFormat = 'long') {
+  let someSunday = new Date('2021-01-03');
+  return [...Array(7).keys()].map((index) => {
+    let weekday = new Date(someSunday.getTime());
+    weekday.setDate(someSunday.getDate() + index);
+    return intl.formatDate(weekday, { weekday: weekdayFormat });
+  });
+}

package/addon/components/citaten-plugin/helpers/alert-load-error.hbs

@@ -0,0 +1,21 @@
+<AuAlert
+  @alertTitle="{{t "citaten-plugin.citaten-plugin.alert.error-title"}}"
+  @alertSkin="error"
+  @alertIcon="alert-triangle"
+  @alertSize="{{if @fullSize "default" "small"}}"
+  @closable={{false}}
+  ...attributes>
+  <p>{{t "citaten-plugin.alert.error-intro"}}</p>
+  <code class="au-u-error citaten--error-code">{{@error}}</code>
+  <p>
+    {{t "citaten-plugin.alert.error-outro"}}
+    <AuLinkExternal
+      href="mailto:Gelinkt-Notuleren@vlaanderen.be"
+      @icon="mail"
+      @iconAlignment="left">
+      {{!-- template-lint-disable no-bare-strings  --}}
+      Gelinkt-Notuleren@vlaanderen.be
+    </AuLinkExternal>.
+  </p>
+</AuAlert>
+

package/addon/components/citaten-plugin/helpers/alert-no-items.hbs

@@ -0,0 +1,10 @@
+<AuAlert
+  @alertTitle="{{t "citaten-plugin.citaten-plugin.alert.no-results"}}"
+  @alertSkin="warning"
+  @alertIcon="cross"
+  @alertSize="{{if @fullSize "default" "small"}}"
+  @closable={{false}}
+  class="{{unless @fullSize "au-u-margin-small"}}"
+  ...attributes>
+</AuAlert>
+

package/addon/components/import-snippet-plugin/card.hbs

@@ -0,0 +1,17 @@
+{{#each this.snippets as |snippet|}}
+  <AuCard @flex={{true}} @divided={{true}} @expandable={{true}} @shadow={{true}} @isOpenInitially={{true}} @size="small" as |c|>
+    <c.header>
+      <AuHeading @level="3" @skin="6">
+        Document importeren
+      </AuHeading>
+    </c.header>
+    <c.content>
+      <p class="u-spacer--tiny">Er is een <a href="{{snippet.source}}" target="_blank" rel="noopener noreferrer">document</a> beschikbaar</p>
+      <p><strong>Wenst u dit document in te voegen?</strong></p>
+      {{#if this.besluitNode}}
+        <AuButton {{on "click" (fn this.insert snippet 'attachment')}} >Bijlage invoegen</AuButton>
+      {{/if}}
+      <AuButton {{on "click" (fn this.insert snippet)}} >Document invoegen</AuButton>
+    </c.content>
+  </AuCard>
+{{/each}}

package/addon/components/import-snippet-plugin/card.js

@@ -0,0 +1,95 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class ImportSnippetPluginCard extends Component {
+  @service importRdfaSnippet;
+  @tracked snippets = [];
+  @tracked besluitNode;
+
+  constructor() {
+    super(...arguments);
+    this.args.controller.onEvent(
+      'selectionChanged',
+      this.selectionChangedHandler
+    );
+  }
+
+  @action
+  selectionChangedHandler() {
+    const { controller } = this.args;
+    const selectedRange = controller.selection.lastRange;
+    if (!selectedRange) {
+      console.info(
+        'Selection did not have a range, skipping handling of the selectionChanged event'
+      );
+      return;
+    }
+    this.snippets = this.importRdfaSnippet.snippetsForType('roadsign');
+    const limitedDatastore = controller.datastore.limitToRange(
+      selectedRange,
+      'rangeIsInside'
+    );
+    const besluit = limitedDatastore
+      .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Besluit')
+      .asSubjectNodes()
+      .next().value;
+    if (besluit) {
+      this.besluitNode = [...besluit.nodes][0];
+    } else {
+      this.besluitNode = undefined;
+    }
+  }
+
+  @action
+  insert(snippet, type) {
+    const html = this.generateSnippetHtml(snippet, type);
+    let rangeToInsert;
+    if (this.besluitNode) {
+      rangeToInsert = this.args.controller.rangeFactory.fromInNode(
+        this.besluitNode,
+        this.besluitNode.getMaxOffset(),
+        this.besluitNode.getMaxOffset()
+      );
+    } else {
+      rangeToInsert = this.args.controller.selection.lastRange;
+    }
+    if (rangeToInsert) {
+      this.args.controller.executeCommand('insert-html', html, rangeToInsert);
+      this.importRdfaSnippet.removeSnippet(snippet);
+    } else {
+      console.warn('Could not find a range to insert, so we skipped inserting');
+    }
+  }
+
+  generateSnippetHtml(snippet, type) {
+    if (type === 'attachment') {
+      return `
+        <div property="http://lblod.data.gift/vocabularies/editor/isLumpNode">
+          <div
+            resource="${snippet.source}"
+            property="http://data.europa.eu/eli/ontology#related_to"
+            typeof="http://xmlns.com/foaf/0.1/Document http://lblod.data.gift/vocabularies/editor/SnippetAttachment"
+          >
+            Bijlage uit externe bron <a href="${snippet.source}">${
+        new URL(snippet.source).hostname
+      }</a>
+            <div property="http://www.w3.org/ns/prov#value">${
+              snippet.content
+            }</div>
+          </div>
+        </div>
+      `;
+    } else {
+      return `
+        <div property="http://lblod.data.gift/vocabularies/editor/isLumpNode">
+          Bijlage uit externe bron
+          <div property="http://data.europa.eu/eli/ontology#related_to" resource="${snippet.source}">
+              <div property="http://www.w3.org/ns/prov#value">${snippet.content}</div>
+          </div>
+        </div>
+      `;
+    }
+  }
+}

package/addon/components/insert-variable-plugin/insert-variable-card.hbs

@@ -0,0 +1,33 @@
+{{#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 "insert-variable-plugin.variable"}}
+      </AuHeading>
+    </c.header>
+    <c.content>
+      <PowerSelect
+        @allowClear={{false}}
+        @searchEnabled={{false}}
+        @options={{this.variablesArray}}
+        @selected={{this.selectedVariable}}
+        @onChange={{this.updateSelectedVariable}} as |variable|
+      >
+        {{variable.label}}
+      </PowerSelect>
+      {{#if this.hasSubtype}}
+        <PowerSelect
+          @allowClear={{false}}
+          @searchEnabled={{false}}
+          @options={{this.subtypes}}
+          @selected={{this.selectedSubtype}}
+          @onChange={{this.updateSubtype}} as |subtype|
+        >
+          {{subtype.label}}
+        </PowerSelect>
+      {{/if}}
+      <AuButton {{on 'click' this.insert}} @disabled={{or (not this.selectedVariable) (and this.hasSubtype (not this.selectedSubtype))}}>{{t "insert-variable-plugin.button"}}</AuButton>
+    </c.content>
+  </AuCard>
+{{/if}}
+