Merge branch 'DES/enhancement/css-refactor' into DES/enhancement/#705-…

…vl-refactor

.npmrc

@@ -0,0 +1 @@
+package-lock=false

Jenkinsfile.ci

@@ -84,8 +84,8 @@ pipeline {
 
     post {
         always {
-            sh "mkdir ${WORKSPACE}/reports"
-            sh "mkdir ${WORKSPACE}/reports/cypress_screenshots/"
+            sh "mkdir -p ${WORKSPACE}/reports"
+            sh "mkdir -p ${WORKSPACE}/reports/cypress_screenshots/"
             sh "touch ${WORKSPACE}/reports/cypress_screenshots/test.png"
             sh "cp -rf ${WORKSPACE}/cypress/screenshots ${WORKSPACE}/reports/cypress_screenshots || true"
 

JenkinsfileParemeterized.ci

@@ -85,8 +85,8 @@ pipeline {
 
     post {
         always {
-            sh "mkdir ${WORKSPACE}/reports"
-            sh "mkdir ${WORKSPACE}/reports/cypress_screenshots/"
+            sh "mkdir -p ${WORKSPACE}/reports"
+            sh "mkdir -p ${WORKSPACE}/reports/cypress_screenshots/"
             sh "touch ${WORKSPACE}/reports/cypress_screenshots/test.png"
             sh "cp -rf ${WORKSPACE}/cypress/screenshots ${WORKSPACE}/reports/cypress_screenshots || true"
 

app/models/config.js

@@ -0,0 +1,6 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class ConfigModel extends Model {
+  @attr('string') key;
+  @attr('string') value;
+}

app/models/contact-person.js

@@ -1,4 +1,7 @@
-import Model, { attr } from '@ember-data/model';
+import Model, {
+  attr,
+  belongsTo
+} from '@ember-data/model';
 import { computed } from '@ember/object';
 
 export default class ContactPerson extends Model {
@@ -8,6 +11,8 @@ export default class ContactPerson extends Model {
   @attr('string') organisationName; // TODO: Misschien organisation model?
   @attr('string') phone;  // TODO: Voorlopig niet in gebuik
 
+  @belongsTo('organization') organization;
+
   @computed('firstName', 'lastName')
   get nameToDisplay() {
     const {

app/models/organization.js

@@ -1,15 +1,20 @@
-import DS from 'ember-data';
-import { alias } from '@ember/object/computed';
+import ModelWithModifier from 'frontend-kaleidos/models/model-with-modifier';
+import {
+  attr,
+  hasMany
+} from '@ember-data/model';
 
-const {
-  Model, attr, hasMany,
-} = DS;
+export default class Organization extends ModelWithModifier {
+  @attr('string') name;
+  @attr('datetime') created;
 
-export default Model.extend({
-  uri: attr(),
-  name: attr(),
-  identifier: attr(), // OVO-code
-  member: hasMany('user'),
+  // Has many .
+  @hasMany('contact-person', {
+    inverse: null,
+  }) contactPersons;
 
-  subjectPage: alias('uri'),
-});
+  // identifier: attr(), // OVO-code not used
+  // member: hasMany('user'), not used.
+  // abbreviation: attr('string'), not used.
+  // subjectPage: alias('uri'), not used.
+}

app/pods/components/publications/publication/activity-request-panel/template.hbs

@@ -75,7 +75,11 @@
             <WebComponents::AuLabel>
               {{t "reason-withdraw"}}
             </WebComponents::AuLabel>
-            <p class="auk-u-text-pre vlc-mail-content">{{@activity.withdrawReason}}</p>
+            <p class="auk-u-text-pre vlc-mail-content">
+              <pre>
+                {{@activity.withdrawReason}}
+              </pre>
+            </p>
           </div>
         {{/if}}
 
@@ -100,7 +104,9 @@
               {{t "translation-mail-header"}}
             </WebComponents::AuLabel>
             <div class="auk-u-text-pre vlc-mail-content">
-              <p>{{@activity.mailContent}}</p>
+              <pre>
+                {{@activity.mailContent}}
+              </pre>
             </div>
           </div>
           <div class="auk-o-grid-col-4">

app/pods/components/web-components/au-power-select/component.js

@@ -1,17 +1,32 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
 export default class PowerSelect extends Component {
+  // Services.
+  @service intl;
+
   get options() {
     if (this.args.options) {
       return this.args.options;
     }
     return null;
   }
 
+  get getMatchesMessage() {
+    if (this.args.noMatchesMessage) {
+      return this.args.noMatchesMessage;
+    }
+    return this.intl.t('no-results-found');
+  }
+
   get isSearchable() {
     return this.args.isSearchable;
   }
 
+  get search() {
+    return this.args.search;
+  }
+
   get placeholder() {
     if (this.args.placeholder) {
       return this.args.placeholder;

app/pods/components/web-components/au-power-select/template.hbs

@@ -2,7 +2,9 @@
   @options={{this.options}}
   @searchEnabled={{@isSearchable}}
   @selected={{@selected}}
+  @search={{@search}}
   @placeholder={{this.placeholder}}
+  @noMatchesMessage={{this.getMatchesMessage}}
   @onchange={{@onchange}} as |item|>
   {{#if item.icon }}
     <WebComponents::AuIcon @name={{item.icon.svg}} @iconSkinColor={{item.icon.color}}/>

app/pods/publications/index/template.hbs

@@ -1,4 +1,7 @@
 <div class="auk-u-m-2 auk-u-scroll-scrollable">
+  <WebComponents::AuButton @icon="settings" @skin="borderless" data-test-publication-button-filter-tables
+    {{on "click" this.filterTables}}
+  />
   <DataTable
     @content={{this.model}}
     @page={{this.page}}
@@ -12,8 +15,11 @@
     <table.content as |c|>
       <c.header>
         {{!-- TODO not a clean solution using style inline, need an auk-u class for this --}}
+
         {{#if this.filterTableColumnOptionKeys.caseNameFilterOption}}
-          <th style="min-width: 50rem">{{t "publications-table-case-name"}}</th>
+          <th style="min-width: 50rem">
+            {{t "publications-table-case-name"}}
+          </th>
         {{/if}}
         {{#if this.filterTableColumnOptionKeys.publicationNumberFilterOption}}
           <ThSortable
@@ -128,9 +134,7 @@
           <th>{{t "publications-table-from-designagenda"}}</th>
         {{/if}}
         <th>
-          <WebComponents::AuButton @icon="settings" @skin="borderless" data-test-publication-button-filter-tables
-            {{on "click" this.filterTables}}
-          />
+          &nbsp;
         </th>
       </c.header>
       <c.body class="tr-hover" as |row|>

app/pods/publications/publication/case/controller.js

@@ -1,5 +1,8 @@
 import Controller from '@ember/controller';
-import { action } from '@ember/object';
+import {
+  action,
+  set
+} from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { task } from 'ember-concurrency-decorators';
@@ -13,12 +16,15 @@ export default class CaseController extends Controller {
   @tracked isInscriptionInEditMode = false;
   @tracked isUpdatingInscription = false;
   @tracked selectedMandatee = null;
+  @tracked showAddOrganisationModal = false;
+  @tracked inputOrganization = '';
 
   @tracked
   contactPerson = {
     firstName: '',
     lastName: '',
     email: '',
+    organization: null,
   };
 
   @tracked
@@ -28,6 +34,9 @@ export default class CaseController extends Controller {
     sort: '',
   };
 
+  /**
+   * ZONE FOR TTHE CONTACT PERSONS
+   */
   @action
   onFirstNameChanged(event) {
     this.contactPerson.firstName = event.target.value;
@@ -42,10 +51,6 @@ export default class CaseController extends Controller {
   onEmailChanged(event) {
     this.contactPerson.email = event.target.value;
   }
-  @action
-  onOrganisationChanged(event) {
-    this.contactPerson.organisationName = event.target.value;
-  }
 
   get getShortTitle() {
     if (this.model.case) {
@@ -69,6 +74,55 @@ export default class CaseController extends Controller {
   @action
   closeContactPersonModal() {
     this.personModalOpen = false;
+    this.contactPerson.organization = null;
+  }
+
+  /**
+   * ZONE FOR THE ORGANIZATIONS
+   */
+  get allOrganizations() {
+    return this.model.organizations;
+  }
+
+  @action
+  customPowerSelectSearchFunction(searchTerm, event) {
+    // Just because we can.
+    return event.results.filter((result) => result.name.toLowerCase().includes(searchTerm.toLowerCase()));
+  }
+
+  @action
+  async addOrganisation() {
+    this.showLoader = true;
+    const newOrganization = this.store.createRecord('organization', {
+      name: this.inputOrganization,
+    });
+    await newOrganization.save();
+    this.model.organizations.pushObject(newOrganization);
+    this.inputOrganization = '';
+    this.showAddOrganisationModal = false;
+    this.showLoader = false;
+  }
+
+  @action
+  openAddOrganisationModal() {
+    this.showAddOrganisationModal = true;
+  }
+
+  @action
+  closeAddOrganisationModal() {
+    this.inputOrganization = '';
+    this.showAddOrganisationModal = false;
+  }
+
+  @action
+  selectOrganization(selections, event) {
+    // Return all available organizations
+    set(event, 'selected', selections);
+    this.contactPerson.organization = selections;
+  }
+
+  get selectedOrganizations() {
+    return this.contactPerson.organization;
   }
 
   @action
@@ -103,6 +157,7 @@ export default class CaseController extends Controller {
     const contactPerson =  await this.store.createRecord('contact-person', this.contactPerson);
     await contactPerson.save();
     await this.publicationService.linkContactPersonToPublication(this.model.publicationFlow.id, contactPerson);
+    this.contactPerson.organization = null;
     this.personModalOpen = false;
     this.showLoader = false;
   }

app/pods/publications/publication/case/route.js

@@ -8,13 +8,18 @@ export default class CaseRoute extends Route.extend(AuthenticatedRouteMixin) {
     const publicationFlow = parentHash.publicationFlow;
     const _case = await publicationFlow.get('case');
     const contactPersons = await publicationFlow.get('contactPersons');
+    const organizations = await this.store.query('organization', {});
     return hash({
       publicationFlow,
       case: _case,
       contactPersons: contactPersons,
       refreshAction: parentHash.refreshAction,
+      organizations: organizations.toArray(),
     });
   }
+  async afterModel(model) {
+    model.contactPersons.map((contactperson) => contactperson.get('organizations'));
+  }
 
   async setupController(controller, model) {
     super.setupController(...arguments);