Delete and move articles

addon/besluit-plugin.js

@@ -1,5 +1,6 @@
 import InsertArticleCommand from './commands/insert-article-command';
 import InsertTitleCommand from './commands/insert-title-command';
+import MoveArticleCommand from './commands/move-article-command';
 /**
  * Entry point for BesluitPlugin
  *
@@ -37,6 +38,9 @@ export default class BesluitPlugin {
     controller.registerCommand(
       new InsertTitleCommand(controller._rawEditor._model)
     );
+    controller.registerCommand(
+      new MoveArticleCommand(controller._rawEditor._model)
+    );
     controller.registerWidget({
       componentName: 'besluit-plugin-card',
       identifier: 'besluit-plugin/card',

addon/commands/move-article-command.js

@@ -0,0 +1,60 @@
+export default class InsertArticleCommand {
+  name = 'move-article';
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  canExecute() {
+    return true;
+  }
+
+  execute(controller, besluitUri, articleElement, moveUp) {
+    const subjectNodes = controller.datastore
+      .match(`>${besluitUri}`, 'prov:value', null)
+      .asSubjectNodes()
+      .next().value;
+    const besluitNode = [...subjectNodes.nodes][0];
+    let articleContainerElement;
+    for (let child of besluitNode.children) {
+      if (child.getAttribute('property') === 'prov:value') {
+        articleContainerElement = child;
+      }
+    }
+    const articles = articleContainerElement.children.filter(
+      (child) => child.modelNodeType === 'ELEMENT'
+    );
+    if (articles.length > 1) {
+      const articleIndex = articles.findIndex(
+        (article) => article === articleElement
+      );
+      if (moveUp) {
+        if (articleIndex > 0) {
+          const temporalVariable = articles[articleIndex - 1];
+          articles[articleIndex - 1] = articles[articleIndex];
+          articles[articleIndex] = temporalVariable;
+          this.replaceArticles(controller, articleContainerElement, articles);
+        }
+      } else {
+        if (articleIndex < articles.length - 1) {
+          const temporalVariable = articles[articleIndex + 1];
+          articles[articleIndex + 1] = articles[articleIndex];
+          articles[articleIndex] = temporalVariable;
+          this.replaceArticles(controller, articleContainerElement, articles);
+        }
+      }
+    }
+  }
+  replaceArticles(controller, articleContainerElement, articles) {
+    const range = controller.rangeFactory.fromInNode(
+      articleContainerElement,
+      0,
+      articleContainerElement.getMaxOffset()
+    );
+    const articleHtml = articles.reduce(
+      (html, article) => (html += article.boundNode.outerHTML),
+      ''
+    );
+    controller.executeCommand('insert-html', articleHtml, range);
+  }
+}

addon/components/besluit-plugin-card.hbs

@@ -15,6 +15,20 @@
       <AuButton {{on "click" this.insertArticle}} @icon="plus-text" @iconAlignment="left" @skin="link-secondary">
         Voeg artikel in
       </AuButton>
+      {{#if this.articleElement}}
+        <br />
+        <AuButton {{on 'click' this.deleteArticle}} @icon="plus-text" @iconAlignment="left" @skin="link-secondary">
+          Artikel verwijderen
+        </AuButton>
+        <br />
+        <AuButton {{on 'click' this.moveUpArticle}} @icon="plus-text" @iconAlignment="left" @skin="link-secondary">
+          Artikel over omhoog gaan
+        </AuButton>
+        <br />
+        <AuButton {{on 'click' this.moveDownArticle}} @icon="plus-text" @iconAlignment="left" @skin="link-secondary">
+          Artikel naar beneden verplaatsen
+        </AuButton>
+      {{/if}}
     </c.content>
   </AuCard>
 {{/if}}

addon/components/besluit-plugin-card.js

@@ -5,6 +5,7 @@ import { action } from '@ember/object';
 export default class EditorPluginsTemplateVariableCardComponent extends Component {
   @tracked showCard = false;
   @tracked hasTitle = true;
+  @tracked articleElement;
 
   constructor() {
     super(...arguments);
@@ -24,6 +25,37 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
     this.args.controller.executeCommand('insert-title', this.args.controller);
   }
 
+  @action
+  deleteArticle() {
+    const range = this.args.controller.rangeFactory.fromAroundNode(
+      this.articleElement
+    );
+    this.args.controller.selection.selectRange(range);
+    this.args.controller.executeCommand('delete-selection');
+  }
+
+  @action
+  moveUpArticle() {
+    this.args.controller.executeCommand(
+      'move-article',
+      this.args.controller,
+      this.besluitUri,
+      this.articleElement,
+      true
+    );
+  }
+
+  @action
+  moveDownArticle() {
+    this.args.controller.executeCommand(
+      'move-article',
+      this.args.controller,
+      this.besluitUri,
+      this.articleElement,
+      false
+    );
+  }
+
   @action
   modelWrittenHandler() {
     const limitedDatastore = this.args.controller.datastore.limitToRange(
@@ -35,6 +67,13 @@ export default class EditorPluginsTemplateVariableCardComponent extends Componen
       .asQuads()
       .next().value;
     if (besluit) {
+      const articleSubjectNodes = limitedDatastore
+        .match(null, 'a', '>http://data.vlaanderen.be/ns/besluit#Artikel')
+        .asSubjectNodes()
+        .next().value;
+      if (articleSubjectNodes) {
+        this.articleElement = [...articleSubjectNodes.nodes][0];
+      }
       const hasTitle = Boolean(
         this.getTitle(besluit.subject.value, limitedDatastore)
       );