Add initial version of copying parts of a decision

.changeset/bright-dingos-watch.md

@@ -0,0 +1,5 @@
+---
+'frontend-gelinkt-notuleren': minor
+---
+
+Add functionality to copy parts of a decision from the meeting copy-parts page

app/components/decision-copy-parts.gjs

@@ -0,0 +1,113 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { htmlSafe } from '@ember/template';
+import { on } from '@ember/modifier';
+import { task } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
+import t from 'ember-intl/helpers/t';
+import { trackedReset } from 'tracked-toolbox';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+
+class DownloadButton extends Component {
+  get isSuccess() {
+    return this.copyToClipboard.last?.isSuccessful;
+  }
+  get icon() {
+    return this.isSuccess ? 'circle-check' : undefined;
+  }
+
+  copyToClipboard = task(async () => {
+    await navigator.clipboard.writeText(this.args.section.content.trim());
+  });
+
+  <template>
+    <AuButton
+      @skin='link'
+      @icon={{this.icon}}
+      @loading={{this.copyToClipboard.isRunning}}
+      @loadingMessage={{t 'copy-options.copying'}}
+      class={{if this.isSuccess 'download-meeting-part-downloaded'}}
+      {{on 'click' (perform this.copyToClipboard)}}
+      ...attributes
+    >
+      {{#if this.isSuccess}}
+        {{t 'copy-options.part-copied' part=(t @section.label)}}
+      {{else}}
+        {{t 'copy-options.copy-part' part=(t @section.label)}}
+      {{/if}}
+    </AuButton>
+  </template>
+}
+
+const SECTIONS = [
+  {
+    label: 'copy-options.section.title',
+    selector: '[property="http://data.europa.eu/eli/ontology#title"]',
+  },
+  {
+    label: 'copy-options.section.description',
+    selector: '[property="http://data.europa.eu/eli/ontology#description"]',
+  },
+  {
+    label: 'copy-options.section.motivation',
+    selector: '[property="http://data.vlaanderen.be/ns/besluit#motivering"]',
+  },
+  {
+    label: 'copy-options.section.ruling',
+    selector:
+      '[property="http://www.w3.org/1999/02/22-rdf-syntax-ns#type"][resource="http://data.vlaanderen.be/ns/besluit#Artikel"]',
+    callback: (selected) => selected.parentElement?.parentElement,
+  },
+];
+
+function htmlSafer(text) {
+  return htmlSafe(text);
+}
+
+// This method of looking for query selectors is error-prone as it assumes that the document follows
+// the current DOM output specs. This is not necessarily true of historic or future documents. It
+// would be better to either use an RDFa parser that can also return the elements associated with
+// relations or a headless prosemirror instance.
+function update(component) {
+  console.warn('content processing!');
+  const parser = new DOMParser();
+  const parsed = parser.parseFromString(
+    component.args.decision.content,
+    'text/html',
+  );
+  return SECTIONS.flatMap(({ label, selector, callback = (a) => a }) => {
+    const elements = Array.from(parsed.querySelectorAll(selector));
+    return elements.map((element) => ({
+      label,
+      content: callback(element).outerHTML,
+    }));
+  });
+}
+
+export default class DecisionCopyParts extends Component {
+  @service intl;
+
+  @trackedReset({
+    memo: 'decision.content',
+    update,
+  })
+  sections = update(this);
+
+  <template>
+    <div class='au-o-flow--small'>
+      {{#each this.sections as |section|}}
+        <div class='au-u-flex'>
+          <div class='say-structure'>
+            <div class='say-structure__header'>
+              {{t section.label}}
+            </div>
+            <div class='say-structure__content'>
+              {{(htmlSafer section.content)}}
+            </div>
+          </div>
+          <DownloadButton @section={{section}} />
+        </div>
+      {{/each}}
+    </div>
+  </template>
+}

app/components/meeting-form.hbs

@@ -80,8 +80,12 @@
           <DeleteMeeting @meeting={{@zitting}} />
         {{/unless}}
       </AuDropdown>
-      {{#if this.isComplete}}
-        <AuButton @skin='secondary' {{on 'click' this.goToPublish}}>
+      {{#if (or this.isComplete this.isLoading)}}
+        <AuButton
+          @skin='secondary'
+          @loading={{this.isLoading}}
+          {{on 'click' this.goToPublish}}
+        >
           {{t 'meeting-form.publish-button'}}
         </AuButton>
       {{else}}

app/components/meeting-form.js

@@ -75,6 +75,9 @@ export default class MeetingForm extends Component {
     return this.zitting instanceof InstallatieVergaderingModel;
   }
 
+  get isLoading() {
+    return this.fetchTreatments.isRunning;
+  }
   get isComplete() {
     return !this.zitting?.isNew && this.behandelingen?.length > 0;
   }

app/templates/meetings/download/copy.hbs

@@ -55,17 +55,7 @@
     <div
       class='au-u-flex au-u-flex--column au-u-flex--vertical-center au-u-margin-bottom-large'
     >
-      <AuPanel @active={{true}} class='au-u-3-5' as |Panel|>
-        <Panel>
-          <AuHeading
-            @level={{4}}
-            @skin={{4}}
-          >{{@model.document.title}}</AuHeading>
-        </Panel>
-        <Panel>
-          {{this.previewDocument}}
-        </Panel>
-      </AuPanel>
+      <DecisionCopyParts @decision={{@model.document}} />
     </div>
   </m.content>
 </AuMainContainer>

app/templates/mock-login.hbs

@@ -34,7 +34,7 @@
 
         <MockLogin as |login|>
           {{#if this.queryStore.isRunning}}
-            <AuLoader @padding='small' />
+            <AuLoader @padding='small'>{{t 'application.loading'}}</AuLoader>
           {{else}}
             {{#if this.login.errorMessage}}
               <AuAlert

translations/en-us.yaml

@@ -807,3 +807,10 @@ copy-options:
   copy-all: Copy full decision
   copying: copying
   completed: copied
+  copy-part: 'Copy {part}'
+  part-copied: '{part} copied'
+  section:
+    title: Title
+    description: Description
+    motivation: Motivation
+    ruling: Ruling

translations/nl-BE.yaml

@@ -811,3 +811,10 @@ copy-options:
   copy-all: Volledig besluit kopieren
   copying: kopiëren
   completed: gekopieerd
+  copy-part: 'Kopieer {part}'
+  part-copied: '{part} gekopieerd'
+  section:
+    title: Titel
+    description: Beschrijving
+    motivation: Motivering
+    ruling: Beslissing