WIP: added import route

app/controllers/import/index.js

@@ -0,0 +1,45 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { dropTask, timeout } from 'ember-concurrency';
+import { service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ImportController extends Controller {
+  @service templateFetcher;
+  @service router;
+  @tracked endpoint = 'https://reglementairebijlagen.lblod.info/';
+  @tracked templateUri;
+  @tracked name;
+  @tracked type;
+  @tracked options;
+  typeOptions = [
+    {
+      uri: 'http://data.lblod.info/vocabularies/gelinktnotuleren/ReglementaireBijlageTemplate',
+      label: 'Reglementaire Bijlage',
+    },
+    {
+      uri: 'http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt',
+      label: 'Besluit',
+    },
+  ];
+
+  @action
+  importUri(uri) {
+    this.router.transitionTo('import.uri', {
+      queryParams: { uri, endpoint: this.endpoint },
+    });
+  }
+
+  @action
+  updateParam(field, event) {
+    this[field] = event.target.value;
+  }
+  connectToEndpoint = dropTask(async () => {
+    await timeout(400);
+    this.options = await this.templateFetcher.fetch.perform({
+      endpoint: this.endpoint,
+      name: this.name,
+      type: this.type?.uri,
+    });
+  });
+}

app/controllers/import/uri.js

@@ -0,0 +1,23 @@
+import Controller from '@ember/controller';
+import { task } from 'ember-concurrency';
+
+export default class ImportUriController extends Controller {
+  saveTemplate = task(async (event) => {
+    console.log('need to make sure to fetch template type first');
+    return;
+    event.preventDefault();
+    await this.editorDocument.save();
+    const folder = await this.store.findRecord(
+      'editor-document-folder',
+      this.templateTypeToCreate.folder,
+    );
+    this.documentContainer.folder = folder;
+    await this.documentContainer.save();
+    this.createTemplateModalIsOpen = false;
+    this.router.transitionTo(
+      'template-management.edit',
+      this.documentContainer.id,
+    );
+  });
+
+}

app/router.js

@@ -32,4 +32,7 @@ Router.map(function () {
       this.route('edit-snippet', { path: '/:snippet_id/edit-snippet' });
     });
   });
+  this.route('import', function () {
+    this.route('uri');
+  });
 });

app/routes/import.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class ImportRoute extends Route {}

app/routes/import/uri.js

@@ -0,0 +1,28 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class ImportUriRoute extends Route {
+  @service templateFetcher;
+  @service store;
+
+  queryParams = {
+    uri: { refreshModel: true },
+    endpoint: { refreshModel: true },
+  };
+
+  async model(params) {
+    const template = await this.templateFetcher.fetchByUri(params);
+    await template.loadBody();
+    const container = this.store.createRecord('document-container');
+    const editorDocument = this.store.createRecord('editor-document', {
+      content: template.body,
+      title: template.title,
+      createdOn: new Date(),
+      updatedOn: new Date(),
+    });
+    console.log(template.body);
+    console.log(editorDocument.content);
+    container.currentVersion = editorDocument;
+    return container;
+  }
+}

app/services/template-fetcher.js

@@ -0,0 +1,187 @@
+import Service, { service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task } from 'ember-concurrency';
+
+export default class TemplateFetcher extends Service {
+  @service session;
+  @service store;
+
+  @tracked account;
+  @tracked user;
+  @tracked group;
+  @tracked roles = [];
+
+  fetchByUri = async ({ uri, endpoint }) => {
+    const fileEndpoint = `${endpoint}/files`;
+    const sparqlEndpoint = `${endpoint}/sparql`;
+
+    const sparqlQuery = `
+      PREFIX mu: <http://mu.semte.ch/vocabularies/core/>
+      PREFIX pav: <http://purl.org/pav/>
+      PREFIX dct: <http://purl.org/dc/terms/>
+      PREFIX schema: <http://schema.org/>
+      PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+      SELECT
+        ?template_version
+        ?title
+        ?fileId
+        (GROUP_CONCAT(?context;SEPARATOR="|") as ?contexts)
+        (GROUP_CONCAT(?disabledInContext;SEPARATOR="|") as ?disabledInContexts)
+      WHERE {
+        <${uri}> mu:uuid ?uuid;
+          pav:hasCurrentVersion ?template_version.
+        ?template_version mu:uuid ?fileId;
+                          dct:title ?title.
+        OPTIONAL {
+          ?template_version schema:validThrough ?validThrough.
+        }
+        OPTIONAL {
+          ?template_version ext:context ?context.
+        }
+        OPTIONAL {
+          ?template_version ext:disabledInContext ?disabledInContext.
+        }
+        FILTER( ! BOUND(?validThrough) || ?validThrough > NOW())
+      }
+      GROUP BY ?template_version ?title ?fileId
+      ORDER BY LCASE(REPLACE(STR(?title), '^ +| +$', ''))
+    `;
+
+    const response = await this.sendQuery(sparqlEndpoint, sparqlQuery);
+    if (response.status === 200) {
+      const json = await response.json();
+      const bindings = json.results.bindings;
+      const templates = bindings.map(this.bindingToTemplate(fileEndpoint));
+      return templates[0];
+    } else {
+      return null;
+    }
+  };
+
+  fetch = task(async ({ endpoint, name, type }) => {
+    const fileEndpoint = `${endpoint}/files`;
+    const sparqlEndpoint = `${endpoint}/sparql`;
+    const sparqlQuery = `
+      PREFIX mu: <http://mu.semte.ch/vocabularies/core/>
+      PREFIX pav: <http://purl.org/pav/>
+      PREFIX dct: <http://purl.org/dc/terms/>
+      PREFIX schema: <http://schema.org/>
+      PREFIX ext: <http://mu.semte.ch/vocabularies/ext/>
+      SELECT DISTINCT
+        ?template
+        ?template_version
+        ?title
+        ?fileId
+        ?type
+        (GROUP_CONCAT(?context;SEPARATOR="|") as ?contexts)
+        (GROUP_CONCAT(?disabledInContext;SEPARATOR="|") as ?disabledInContexts)
+      WHERE {
+        VALUES ?type {
+${
+  type
+    ? `<${type}>`
+    : `
+          <http://data.lblod.info/vocabularies/gelinktnotuleren/ReglementaireBijlageTemplate>
+          <http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt>
+    `
+}
+}
+        ?template a ?type;
+          mu:uuid ?uuid;
+          pav:hasCurrentVersion ?template_version.
+          ?template_version dct:title ?title.
+          ${name ? `FILTER (CONTAINS(?title,"${name}"))` : ''}
+          ?template_version mu:uuid ?fileId.
+        OPTIONAL {
+          ?template_version schema:validThrough ?validThrough.
+        }
+        OPTIONAL {
+          ?template_version ext:context ?context.
+        }
+        OPTIONAL {
+          ?template_version ext:disabledInContext ?disabledInContext.
+        }
+        FILTER( ! BOUND(?validThrough) || ?validThrough > NOW())
+      }
+      GROUP BY ?template ?template_version ?title ?fileId ?type
+      ORDER BY LCASE(REPLACE(STR(?title), '^ +| +$', ''))
+    `;
+    const response = await this.sendQuery(sparqlEndpoint, sparqlQuery);
+    if (response.status === 200) {
+      const json = await response.json();
+      const bindings = json.results.bindings;
+      const templates = bindings.map(this.bindingToTemplate(fileEndpoint));
+      return templates;
+    } else {
+      return [];
+    }
+  });
+
+  /**
+   * @param {string} sparqlQuery
+   * @returns {string}
+   */
+  queryToFormBody(sparqlQuery) {
+    const details = {
+      query: sparqlQuery,
+      format: 'application/json',
+    };
+    let formBody = [];
+    for (const property in details) {
+      const encodedKey = encodeURIComponent(property);
+      const encodedValue = encodeURIComponent(details[property]);
+      formBody.push(encodedKey + '=' + encodedValue);
+    }
+    formBody = formBody.join('&');
+    return formBody;
+  }
+  bindingToTemplate(fileEndpoint) {
+    return (binding) => {
+      let type;
+      if (
+        binding.type?.value ===
+        'http://data.lblod.info/vocabularies/gelinktnotuleren/ReglementaireBijlageTemplate'
+      )
+        type = 'Reglementaire Bijlage';
+      else if (
+        binding.type?.value ===
+        'http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt'
+      )
+        type = 'Behandeling van Agendapunt';
+      else type = binding.type?.value;
+      return {
+        title: binding.title?.value,
+        type,
+        uri: binding.template?.value,
+        loadBody: async function () {
+          const response = await fetch(
+            `${fileEndpoint}/${binding.fileId.value}/download`,
+          );
+          this.body = await response.text();
+        },
+        contexts: binding.contexts.value
+          ? binding.contexts.value.split('|')
+          : [],
+        disabledInContexts: binding.disabledInContexts.value
+          ? binding.disabledInContexts.value.split('|')
+          : [],
+      };
+    };
+  }
+  /**
+   * @param {string} endpoint
+   * @param {string} sparqlQuery
+   * @returns {Promise<Response>}
+   */
+  async sendQuery(endpoint, sparqlQuery) {
+    const formBody = this.queryToFormBody(sparqlQuery);
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+      },
+      body: formBody,
+    });
+    return response;
+  }
+}

app/templates/import.hbs

@@ -0,0 +1 @@
+{{outlet}}

app/templates/import/index.hbs

@@ -0,0 +1,85 @@
+{{page-title "Import"}}
+<BreadcrumbsItem>
+  Import
+</BreadcrumbsItem>
+<div class="au-c-body-container au-c-body-container--scroll">
+  <div class="au-o-box">
+    <div class="au-c-content au-u-margin-bottom">
+      <AuHeading @skin="2">
+        Import manager
+      </AuHeading>
+    </div>
+    <form class="au-c-form">
+      <AuFormRow @alignment="inline">
+        <AuLabel for="endpoint" @required={{true}} @inline={{true}}  class="au-u-1-6">
+          Endpoint
+        </AuLabel>
+          <AuInput
+            value={{this.endpoint}}
+            name="endpoint"
+            {{on "input" (fn this.updateParam 'endpoint')}}
+          />
+      </AuFormRow>
+      <AuFormRow @alignment="inline">
+        <AuLabel @required={{true}} @inline={{true}}  class="au-u-1-6">
+          Template Type
+        </AuLabel>
+        <PowerSelect
+          class="au-u-3-5"
+          @allowClear={{true}}
+          @searchEnabled={{false}}
+          @options={{this.typeOptions}}
+          @selected={{this.type}}
+          @onChange={{fn (mut this.type)}}
+          as |singleselect|>
+          {{singleselect.label}}
+        </PowerSelect>
+      </AuFormRow>
+      <AuFormRow @alignment="inline">
+        <AuLabel for="name" @required={{true}} @inline={{true}}  class="au-u-1-6">
+          Template Name
+        </AuLabel>
+        <AuInput
+          value={{this.name}}
+          name="name"
+          {{on "input" (fn this.updateParam 'name')}}
+        />
+      </AuFormRow>
+      <AuFormRow>
+        <div class="au-u-flex au-u-flex--vertical-center ">
+          <AuButton
+            {{on "click" (perform this.connectToEndpoint)}}
+            disabled={{this.connectToEndpoint.isRunning}}
+            @loading={{this.connectToEndpoint.isRunning}}
+          >
+            Search
+          </AuButton>
+        </div>
+      </AuFormRow>
+
+      {{#if this.options.length}}
+        <AuTable>
+          <:header>
+            <tr><th>Title</th><th>Type</th></tr>
+          </:header>
+          <:body>
+            {{#each this.options as |option|}}
+              <tr>
+                <td>
+                  <AuButton
+                    @skin="link"
+                    {{on "click"  (fn this.importUri option.uri)}}
+                    >
+                    {{option.title}}<br>
+                    <AuHelpText>{{option.uri}}</AuHelpText>
+                  </AuButton>
+                </td>
+                <td>{{option.type}}</td>
+                </tr>
+            {{/each}}
+          </:body>
+        </AuTable>
+      {{/if}}
+    </form>
+  </div>
+</div>