improved flow for creating agendapoints

app/components/document-creator.hbs

@@ -0,0 +1,28 @@
+{{#if this.ensureTemplates.isRunning}}
+  {{yield (hash
+    form=(component "au-loader")
+    create=this.create
+    rollback=this.rollback
+    isSaving=this.isSaving
+    errorSaving=this.errorSaving
+    )
+  }}
+{{else}}
+  {{yield (hash
+    form=
+    (component
+    "document-creator/form"
+    title=this.title
+    invalidTitle=this.invalidTitle
+    updateTitle=this.updateTitle
+    selectedTemplate=this.template
+    options=this.templateOptions
+    onSelectTemplate=this.onSelectTemplate
+    )
+    create=this.create
+    rollback=this.rollback
+    isSaving=this.isSaving
+    errorSaving=this.errorSaving
+    )
+  }}
+{{/if}}

app/components/document-creator.js

@@ -0,0 +1,116 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { task, waitForProperty } from "ember-concurrency";
+import { DRAFT_FOLDER_ID, DRAFT_STATUS_ID } from 'frontend-gelinkt-notuleren/utils/constants';
+import instantiateUuids from '@lblod/ember-rdfa-editor-standard-template-plugin/utils/instantiate-uuids';
+
+export default class DocumentCreatorComponent extends Component {
+  @tracked title = "";
+  @tracked type;
+  @tracked template
+  @tracked templateOptions = [];
+  @tracked invalidTitle;
+  @tracked errorSaving;
+
+  @service store;
+  @service rdfaEditorStandardTemplatePlugin;
+  @service currentSession;
+
+  constructor() {
+    super(...arguments);
+    this.ensureTemplates.perform();
+  }
+
+  @action
+  rollback() {
+    this.title = "";
+    this.invalidTitle = false;
+    this.template = null;
+    if (this.args.onRollback) {
+      this.args.onRollback();
+    }
+  }
+
+  @action
+  updateTitle(event) {
+    this.title = event.target.value;
+    this.validateTitle();
+  }
+
+  @action
+  onSelectTemplate(template) {
+    this.template = template;
+  }
+
+  get isSaving() {
+    return this.persistDocument.isRunning;
+  }
+
+  validateTitle() {
+    if (this.title?.length > 0) {
+      this.invalidTitle = false;
+    }
+    else {
+      this.invalidTitle = true;
+    }
+  }
+
+  validateForm() {
+    this.validateTitle();
+    return ! this.invalidTitle;
+  }
+
+  @action
+  async create() {
+    if (this.validateForm()) {
+      const container = await this.persistDocument.perform();
+      if (this.args.onCreate) {
+        this.args.onCreate(container);
+      }
+    }
+  }
+
+  @task
+  *ensureTemplates() {
+    yield waitForProperty(this.rdfaEditorStandardTemplatePlugin, 'templates');
+    const templates = this.rdfaEditorStandardTemplatePlugin.templates;
+    this.templateOptions = this.rdfaEditorStandardTemplatePlugin.templatesForContext(templates, ['http://data.vlaanderen.be/ns/besluit#BehandelingVanAgendapunt']);
+  }
+
+  async buildTemplate() {
+    if (this.template) {
+      await this.template.reload(); // templatesForContext does not return body of template
+      return instantiateUuids(this.template.body);
+    }
+    else
+      return "";
+  }
+
+  @task
+  *persistDocument() {
+    try {
+      this.errorSaving=null;
+      const creationDate = new Date();
+      const generatedTemplate = yield this.buildTemplate();
+      const editorDocument = this.store.createRecord('editor-document', {
+        createdOn: creationDate,
+        updatedOn: creationDate,
+        content: generatedTemplate,
+        title: this.title
+      });
+      yield editorDocument.save();
+      const container = this.store.createRecord('document-container');
+      container.status = yield this.store.findRecord('concept', DRAFT_STATUS_ID);
+      container.folder = yield this.store.findRecord('editor-document-folder', DRAFT_FOLDER_ID);
+      container.publisher = this.currentSession.group;
+      container.currentVersion = editorDocument;
+      yield container.save();
+      return container;
+    }
+    catch(e) {
+      this.errorSaving = e.message;
+    }
+  }
+}

app/components/document-creator/form.hbs

@@ -0,0 +1,26 @@
+<form class="au-o-flow">
+  <div>
+    {{#let (unique-id) as |id|}}
+      <AuLabel @error={{@invalidTitle}} for="{{this.id}}">
+        {{t "documentCreator.titleField"}}
+        <RequiredField />
+      </AuLabel>
+      <AuTextarea @error={{@invalidTitle}}  @width="block"  type="text" value={{@title}} id="{{this.id}}" {{on "blur" @updateTitle}} {{on "input" @updateTitle}} />
+    {{/let}}
+  </div>
+  <div>
+    {{#let (unique-id) as |id|}}
+      <AuLabel for={{id}}>
+        {{t "documentCreator.template"}}
+      </AuLabel>
+      <PowerSelect
+
+        @options={{@options}}
+        @selected={{@selectedTemplate}}
+        @onChange={{@onSelectTemplate}}
+        as |option|>
+        {{option.title}}
+      </PowerSelect>
+    {{/let}}
+  </div>
+</form>

app/controllers/inbox/agendapoints/new.js

@@ -0,0 +1,16 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
+export default class InboxAgendapointsNewController extends Controller {
+  @service router;
+  @action
+  redirectToAgendapoint(container) {
+    this.router.transitionTo('agendapoints.edit', container.id);
+  }
+
+  @action
+  cancelAgendapointCreation() {
+    this.router.transitionTo('inbox.agendapoints');
+  }
+}

app/router.js

@@ -9,7 +9,9 @@ export default class Router extends EmberRouter {
 Router.map(function() {
   this.route('inbox', function() {
     this.route('trash');
-    this.route('agendapoints');
+    this.route('agendapoints', function() {
+      this.route('new');
+    });
     this.route('meetings', function() {
       this.route('new');
     });
@@ -36,7 +38,6 @@ Router.map(function() {
   });
 
   this.route('agendapoints', function() {
-    this.route('new');
     this.route('edit', { path: '/:id/edit' });
     this.route('show', { path: ':id/show'});
     this.route('revisions', { path: '/:id/revisions' });

app/routes/inbox/agendapoints/new.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class InboxAgendapointsNewRoute extends Route {
+  @service currentSession;
+  @service router;
+
+  beforeModel() {
+    if (!this.currentSession.canWrite) {
+      this.router.replaceWith('inbox.agendapoints');
+    }
+  }
+}

app/templates/inbox/agendapoints.hbs

@@ -10,7 +10,7 @@
         <AuToolbarGroup class="au-c-toolbar__group--search">
           <TextSearch @wait={{2000}} @filter={{this.title}} @placeholder={{t 'inbox.agendapoints.searchPlaceholder'}} class="au-u-1-2@small" />
           {{#unless this.readOnly}}
-            <LinkTo @route="agendapoints.new" class="au-c-button-link">{{t "inbox.agendapoints.new"}}</LinkTo>
+            <LinkTo @route="inbox.agendapoints.new" class="au-c-button-link">{{t "inbox.agendapoints.new.title"}}</LinkTo>
           {{/unless}}
         </AuToolbarGroup>
       </AuToolbar>
@@ -43,3 +43,4 @@
     </c.body>
   </table.content>
 </AuDataTable>
+{{outlet}}

app/templates/inbox/agendapoints/new.hbs

@@ -0,0 +1,30 @@
+{{page-title (t "inbox.agendapoints.new.title")}}
+<DocumentCreator @onRollback={{this.cancelAgendapointCreation}} @onCreate={{this.redirectToAgendapoint}} as |creator|>
+  <AuModal
+    @modalTitle={{t "inbox.agendapoints.new.title"}}
+    @modalOpen={{true}}
+    @closeModal={{creator.rollback}}
+    as |Modal|
+  >
+    <Modal.Body>
+      <creator.form />
+
+      {{#if creator.errorSaving}}
+        <AuAlert @alertIcon="cross" @alertTitle={{t "inbox.agendapoints.new.errorSaving"}} @alertskin="error" @closable={{true}}>
+          {{creator.errorSaving}}
+        </AuAlert>
+      {{/if}}
+
+    </Modal.Body>
+    <Modal.Footer>
+      <AuButtonGroup>
+        <AuButton {{on "click" creator.create}} @isLoading={{creator.isSaving}} @disabled={{creator.isSaving}}>
+          {{t "inbox.agendapoints.new.create"}}
+        </AuButton>
+        <AuButton {{on "click" creator.rollback}} @skin="secondary">
+          {{t "inbox.agendapoints.new.cancel"}}
+        </AuButton>
+      </AuButtonGroup>
+    </Modal.Footer>
+  </AuModal>
+</DocumentCreator>

translations/en-us.yaml

@@ -25,7 +25,11 @@ inbox:
     createdOnLabel: Created
     updatedOnLabel: Modified
     statusLabel: Status
-    new: Create agendapoint
+    new:
+      title: Create agendapoint
+      errorSaving: Something went wrong while creating the agendapoint
+      create: Create
+      cancel: Back
   trash:
     title: Recycle bin
 publish:
@@ -360,3 +364,7 @@ attachments:
   typePlaceholder: none
   regulatory: regulatory
   saveAndGo: Save and go to attachments
+documentCreator:
+  titleField: Agendapoint title
+  template: Template
+  templateSelectPlaceholder: Select a template