Merge branch 'DES/enhancement/#732-vlc-refactor' into DES/enhancement…

…/732-vlc-refactor/button # Conflicts: # app/styles/app.scss # app/styles/au-kaleidos-css/_auk-u-generic.scss
kanselarij-vlaanderen · Apr 15, 2021 · b5c033f · b5c033f
2 parents b47e2fe + 7d9e7da
commit b5c033f
Show file tree

Hide file tree

Showing 55 changed files with 562 additions and 1,053 deletions.
diff --git a/app/components/agenda/agenda-detail/sidebar-item.hbs b/app/components/agenda/agenda-detail/sidebar-item.hbs
@@ -46,7 +46,7 @@
             <div class="auk-u-flex auk-u-flex--align-end vlc-agenda-detail-sidebar-item__icon">
               {{#if @isNew}}
                 <span class="vlc-agenda-meta__recently-added">
-                  <WebComponents::AuIcon @name="calendar-plus" @size="small" />
+                  <WebComponents::AuIcon @name="calendar-new" @size="small" />
                   <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                     <p>
                       {{t "added-agendaitem-text"}}
@@ -58,7 +58,7 @@
               {{#if this.loadNewsletterVisibility.lastSuccessful}}
                 {{#if (not this.newsletterIsVisible)}}
                   <span class="vlc-agenda-meta__recently-added">
-                    <WebComponents::AuIcon @name="hide" @size="small" />
+                    <WebComponents::AuIcon @name="not-visible" @size="small" />
                     <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                       <p>
                         {{t "not-visible-in-newsletter"}}
@@ -70,7 +70,7 @@
                     This keeps element-height the same at all times in order to prevent "jumping" when data is being side-loaded.
                     This should be tackled differently through modified design --}}
                   <i
-                    class="ki-hide vlc-agenda-detail-sidebar-item__icon--margin-right vlc-u-opacity-50"
+                    class="ki ki-not-visible vlc-agenda-detail-sidebar-item__icon--margin-right vlc-u-opacity-50"
                     style="color: #f3f5f6;"
                   ></i>
                 {{/if}}

diff --git a/app/components/agenda/agenda-header/agenda-action-popup-agendaitems.hbs b/app/components/agenda/agenda-header/agenda-action-popup-agendaitems.hbs
@@ -11,13 +11,13 @@
           <WebComponents::AuToolbar::Group @position="left">
             <WebComponents::AuToolbar::Item>
               {{#if (await agendaitem.checkAdded)}}
-                <WebComponents::AuIcon @name="calendar-plus" @iconSkinColor="muted"/>
+                <WebComponents::AuIcon @name="calendar-new" @iconSkinColor="muted"/>
               {{/if}}
               {{!-- This does not seem to work properly without the #let, newsletterInfo.inNewsletter is undefined --}}
               {{#if (await agendaitem.newsletterInfo)}}
                 {{#let (await agendaitem.newsletterInfo) as |newsletterInfo|}}
                   {{#if (eq (await newsletterInfo.inNewsletter) false)}}
-                    <WebComponents::AuIcon @name="hide" @iconSkinColor="muted"/>
+                    <WebComponents::AuIcon @name="not-visible" @iconSkinColor="muted"/>
                   {{/if}}
                 {{/let}}
               {{/if}}

diff --git a/app/components/agenda/agenda-overview/agenda-overview-item.hbs b/app/components/agenda/agenda-overview/agenda-overview-item.hbs
@@ -45,51 +45,6 @@
           {{/if}}
 
         </div>
-
-        {{!--  TODO: Commented out section triggers many requests that slow down agenda overview
-        <div class="vlc-u-flex-float-right">
-        {{#if currentSessionService.isOvrb}}
-
-                   PUBLICATION FLOW CALL TO ACTION
-
-          <div class="vlc-u-flex-float-right">
-
-                     PUBLICATION FLOW CALL TO ACTION
-
-            {{#if (not @isEditingFormallyOkStatus)}}
-              <div class="auk-button-toolbar">
-                {{#if (await @agendaitem.publicationFlow)}}
-                  <LinkTo
-                          class=""
-                          @route="publications.publication"
-                          @model={{ await @agendaitem.publicationFlowId }}
-                  >
-                    {{t "publications-to" }}
-                  </LinkTo>
-                {{else}}
-                  {{#if (await @agendaitem.case)}}
-                    <WebComponents::AuButton
-                            @skin="tertiary"
-                            @layout="icon-only"
-                            @disabled={{this.startPublication.isRunning}}
-                            data-test-start-publication
-                      {{on "click" (perform this.startPublication)}}>
-                      {{t "start-publication"}}
-                    </WebComponents::AuButton>
-                  {{/if}}
-                {{/if}}
-              </div>
-            {{/if}}
-
-                   END  PUBLICATION FLOW CALL TO ACTION
-
-          </div>
-        {{/if}}
-
-                 END  PUBLICATION FLOW CALL TO ACTION
-
-        </div>
-        --}}
       </div>
 
       <div class="auk-u-flex auk-u-flex--justify-between">
@@ -129,7 +84,7 @@
         </div>
         {{#if this.enableShowMore}}
           <button class="vlc-document-show-more-button" type="button" {{on "click" this.toggleShowingAllDocuments}}>
-            <WebComponents::AuIcon @name={{if this.isShowingAll "remove" "plus"}} />
+            <WebComponents::AuIcon @name={{if this.isShowingAll "remove" "add"}} />
             <p class="vlc-document-show-more-button__text auk-u-ml">
               {{#if this.isShowingAllDocuments }}
                 {{t "show-less"}}
@@ -157,7 +112,7 @@
               {{#if this.loadNewsletterVisibility.lastSuccessful}}
                 {{#if (not this.newsletterIsVisible)}}
                   <div class="auk-icon auk-icon--default vlc-u-opacity-50 auk-u-ml-2 opacity-lighter">
-                    <i class="ki ki-hide"></i>
+                    <i class="ki ki-not-visible"></i>
                     <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                       <p>
                         {{t "not-visible-in-newsletter"}}
@@ -169,7 +124,7 @@
                     This keeps element-height the same at all times in order to prevent "jumping" when data is being side-loaded.
                     This should be tackled differently through modified design --}}
                   <div class="auk-icon auk-icon--default vlc-u-opacity-50 auk-u-ml-2 opacity-lighter" style="color: white;">
-                    <i class="ki ki-hide"></i>
+                    <i class="ki ki-not-visible"></i>
                   </div>
                 {{/if}}
               {{else}}
@@ -185,7 +140,7 @@
               {{/if}}
               {{#if @isNew}}
                 <div class="auk-icon auk-icon--default vlc-agenda-item__icons--margin">
-                  <i class="ki ki-calendar-plus"></i>
+                  <i class="ki ki-calendar-new"></i>
                   <EmberTooltip @side="top" @tooltipClass="tooltip-custom">
                     <p>
                       {{t "added-agendaitem-text"}}

diff --git a/app/components/agenda/agenda-overview/agenda-overview-item.js b/app/components/agenda/agenda-overview/agenda-overview-item.js
@@ -25,7 +25,6 @@ export default class AgendaOverviewItem extends AgendaSidebarItem {
   @service toaster;
   @service sessionService;
   @service agendaService;
-  @service publicationService;
   @service router;
   @service('current-session') currentSessionService;
 
@@ -60,16 +59,6 @@ export default class AgendaOverviewItem extends AgendaSidebarItem {
     return this.agendaitemDocuments.length > this.documentListSize;
   }
 
-  @action
-  async startPublication() {
-    this.showLoader = true;
-    const _case = await this.subcase.get('case');
-    const newPublicationNumber = await this.publicationService.getNewPublicationNextNumber();
-    const newPublication = await this.publicationService.createNewPublication(newPublicationNumber, '', _case.id);
-    this.showLoader = false;
-    this.router.transitionTo('publications.publication.case', newPublication.id);
-  }
-
   @task
   *setFormallyOkStatus(status) {
     yield this.args.setFormallyOkAction(status.uri);

diff --git a/app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles-edit.hbs b/app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles-edit.hbs
@@ -1,4 +1,4 @@
-<div class="vlc-box">
+<div class="auk-box">
   <div class="auk-u-mb-4">
     {{#if @subcase}}
       <div class="vlc-input-field-block">

diff --git a/app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles.hbs b/app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles.hbs
@@ -14,23 +14,29 @@
           </WebComponents::AuToolbar::Item>
         </WebComponents::AuToolbar::Group>
         <WebComponents::AuToolbar::Group @position="right">
-          {{#if @subcase.case.id}}
+          {{!-- TODO: for now the link-button is hidden while loading.
+          A disabled state would be better to avoid flashing a new button in view once loaded. --}}
+          {{#if (and @subcase this.loadCase.isIdle)}}
             <WebComponents::AuToolbar::Item>
-              <WebComponents::AuButton
-                data-test-agendaitem-titles-to-subcase
-                {{on "click" this.redirectToSubcase}}
-                      @skin="tertiary"
-                      @layout="icon-right"
-                      @icon="chevron-right"
+              <LinkTo
+                class="auk-button auk-button--tertiary"
+                data-test-agendaitem-titles-to-subcase={{true}}
+                @route="cases.case.subcases.subcase.overview"
+                @models={{array this.case.id @subcase.id}}
               >
-                {{t "to-subcase"}}
-              </WebComponents::AuButton>
+                <span class="auk-button__content">
+                  <span class="auk-button__label">{{t "to-subcase"}}</span>
+                  <div class="auk-icon auk-icon--default auk-icon--chevron-right">
+                    <i class="ki ki-chevron-right"></i>
+                  </div>
+                </span>
+              </LinkTo>
             </WebComponents::AuToolbar::Item>
           {{/if}}
           <WebComponents::AuToolbar::Item>
             <WebComponents::AuButton
               data-test-agendaitem-titles-edit
-              {{on "click" this.toggleIsEditingAction}}
+              {{on "click" this.startEditing}}
                     @skin="tertiary"
                     @icon="edit"
                     @layout="icon-only"
@@ -70,7 +76,7 @@
                   {{t "visible-in-newsletter"}}
                 </WebComponents::AuPill>
               {{else}}
-                <WebComponents::AuPill @skin="danger" @icon="hide">
+                <WebComponents::AuPill @skin="danger" @icon="not-visible">
                   {{t "hidden-in-newsletter"}}
                 </WebComponents::AuPill>
               {{/if}}
@@ -82,7 +88,7 @@
           {{/if}}
           {{#if
             (and @agendaitem.isDesignAgenda
-                    (and currentSession.isEditor @agendaitem.formallyOkToShow))
+                    (and this.currentSession.isEditor @agendaitem.formallyOkToShow))
           }}
             <WebComponents::AuPill
               @skin={{@agendaitem.formallyOkToShow.svg.color}}
@@ -108,4 +114,4 @@
       </WebComponents::AuModal::Footer>
     {{/if}}
   </WebComponents::AuPanel>
-</div>
+</div>
diff --git a/app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles.js b/app/components/agenda/agendaitem/agendaitem-case/agendaitem-titles.js
@@ -2,39 +2,33 @@ import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import { alias } from '@ember/object/computed';
+import {
+  task,
+  lastValue
+} from 'ember-concurrency-decorators';
 
 export default class AgendaitemTitles extends Component {
-  @alias('args.agendaitem.agendaActivity.subcase') subcase;
-
-  @tracked showLoader = false;
-
   @service currentSession;
-
   @service publicationService;
-
   @service router;
 
-  @action
-  toggleIsEditingAction() {
-    this.args.toggleIsEditing();
+  @lastValue('loadCase') case;
+
+  @tracked showLoader = false;
+
+  constructor() {
+    super(...arguments);
+    this.loadCase.perform();
   }
 
-  @action
-  async redirectToSubcase() {
-    const subcase = this.args.subcase;
-    const _case = await subcase.get('case');
-    const subcaseId = subcase.id;
-    this.router.transitionTo('cases.case.subcases.subcase.overview', _case.id, subcaseId);
+  @task
+  *loadCase() {
+    const _case = yield this.args.subcase.case;
+    return _case;
   }
 
   @action
-  async startPublication() {
-    this.showLoader = true;
-    const _case = await this.subcase.get('case');
-    const newPublicationNumber = await this.publicationService.getNewPublicationNextNumber();
-    const newPublication = await this.publicationService.createNewPublication(newPublicationNumber, '', _case.id);
-    this.showLoader = false;
-    this.router.transitionTo('publications.publication.case', newPublication.id);
+  startEditing() {
+    this.args.toggleIsEditing();
   }
 }
diff --git a/app/components/agenda/agendaitem/agendaitem-decision-edit.hbs b/app/components/agenda/agendaitem/agendaitem-decision-edit.hbs
@@ -1,4 +1,4 @@
-<div class="vlc-box">
+<div class="auk-box">
   {{!-- Editor with annotated decision  text will come somwhere around here in the future --}}
   <div class="vlc-input-field vlc-input-field-block auk-u-mb-4"
       data-test-decision-edit-power-select-container

diff --git a/app/components/agendaitem-press-edit.js b/app/components/agendaitem-press-edit.js
@@ -4,7 +4,7 @@ import CONFIG from 'frontend-kaleidos/utils/config';
 import { updateModifiedProperty } from 'frontend-kaleidos/utils/modification-utils';
 
 export default Component.extend({
-  classNames: ['vlc-box'],
+  classNames: ['auk-box'],
   isTableRow: false,
   store: inject(),
   actions: {

diff --git a/app/components/documents/batch-document-edit.hbs b/app/components/documents/batch-document-edit.hbs
@@ -2,7 +2,7 @@
   {{#if this.loadData.isRunning}}
     <WebComponents::VlLoader @text={{t "documents-loading-text"}} />
   {{else}}
-    <div class="vlc-box">
+    <div class="auk-box">
       <div class="auk-u-mb-4">
         <table class="auk-table">
           <thead>

diff --git a/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs b/app/components/mandatees/mandatees-domains-panel/mandatees-domains-panel-edit.hbs
@@ -1,4 +1,4 @@
-<div class="vlc-box">
+<div class="auk-box">
   <div class="vlc-input-field-block">
     <div class="auk-u-mb-8">
       <table class="auk-table">

diff --git a/app/components/news-item/edit-item.js b/app/components/news-item/edit-item.js
@@ -4,7 +4,7 @@ import { inject } from '@ember/service';
 
 export default Component.extend({
   intl: inject(),
-  classNames: ['vlc-box'],
+  classNames: ['auk-box'],
 
   isTryingToSave: false,
   isExpanded: false,

diff --git a/app/components/publications/new-publication-modal.js b/app/components/publications/new-publication-modal.js
@@ -6,6 +6,7 @@ import { tracked } from '@glimmer/tracking';
 
 export default class NewPublicationModal extends Component {
   @service publicationService;
+  @service store;
 
   @tracked number = null;
   @tracked suffix = null;
@@ -38,7 +39,16 @@ export default class NewPublicationModal extends Component {
 
   @task
   *initPublicationNumber() {
-    this.number = yield this.publicationService.getNewPublicationNextNumber();
+    // Deze query possibly breaks if publication-flows without number exist
+    const latestPublication = yield this.store.queryOne('publication-flow', {
+      sort: '-publication-number',
+    });
+    if (latestPublication) {
+      this.number = latestPublication.publicationNumber + 1;
+    } else {
+    // This should only be a "no-data" issue, in that case we have to default to number 1
+      this.number = 1;
+    }
   }
 
   @task

diff --git a/app/components/publications/urgency-level-checkbox.hbs b/app/components/publications/urgency-level-checkbox.hbs
@@ -0,0 +1,8 @@
+<div class="auk-form-group">
+  {{#unless this.loadData.isRunning}}
+    <WebComponents::VlCheckbox
+            @value={{@urgencyLevel.isUrgent}}
+            @toggle={{this.toggleUrgency}}
+            @label={{t "priority-procedure"}}/>
+  {{/unless}}
+</div>
diff --git a/app/components/publications/urgency-level-checkbox.js b/app/components/publications/urgency-level-checkbox.js
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import CONFIG from 'frontend-kaleidos/utils/config';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency-decorators';
+import { tracked } from '@glimmer/tracking';
+
+export default class UrgencyLevelCheckboxComponent extends Component {
+  @service store;
+
+  @tracked urgencyLevels = null;
+
+  constructor() {
+    super(...arguments);
+    this.loadData.perform();
+  }
+
+  @task
+  *loadData() {
+    this.urgencyLevels = yield this.store.query('urgency-level', {});
+  }
+
+  @action
+  toggleUrgency(value) {
+    const uri = value ? CONFIG.URGENCY_LEVELS.spoedprocedure : CONFIG.URGENCY_LEVELS.standaard;
+    const urgencyLevel = this.urgencyLevels.find((level) => level.uri === uri);
+    this.args.onChange(urgencyLevel);
+  }
+}