Merge pull request #645 from lblod/GN-4800

GN-4800: Bump appuniversum to v3
lblod · Apr 25, 2024 · 3ed6ea7 · 3ed6ea7
2 parents 1c9f2ae + c522af9
commit 3ed6ea7
Show file tree

Hide file tree

Showing 27 changed files with 553 additions and 395 deletions.
diff --git a/.changeset/afraid-tools-shop.md b/.changeset/afraid-tools-shop.md
@@ -0,0 +1,17 @@
+---
+"frontend-gelinkt-notuleren": minor
+---
+
+GN-4800: Bump `@appuniversum/ember-appuniversum` to `3.4.1`
+
+* Bump `@appuniversum/ember-appuniversum` to `3.4.1`
+
+  * Update breaking changes, mainly removing two-way binding from `AuTextarea` and `AuInput` components.
+  * Change how `appuniversum` SCSS is imported in the app.
+  * Add a key to `AuDatePicker` localisation.
+
+
+* Bump `@lblod/ember-rdfa-editor-lblod-plugins` to `17.0.0`
+* Bump `@lblod/ember-environment-banner` to `0.5.0`
+
+
diff --git a/app/components/agenda-manager/agenda-item-form/text-area.hbs b/app/components/agenda-manager/agenda-item-form/text-area.hbs
@@ -1,4 +1,9 @@
 <p>
   <AuLabel for={{@for}}>{{yield}}</AuLabel>
-  <AuTextarea id={{@for}} @value={{this.value}} @width="block"></AuTextarea>
+  <AuTextarea
+    id={{@for}}
+    value={{this.value}}
+    {{on "input" this.handleValueChange}}
+    @width="block"
+  />
 </p>
diff --git a/app/components/agenda-manager/agenda-item-form/text-area.js b/app/components/agenda-manager/agenda-item-form/text-area.js
@@ -1,10 +1,19 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export default class AgendaManagerAgendaItemFormTextAreaComponent extends Component {
   get value() {
     return this.args.model[this.args.for];
   }
 
+  /**
+   * @param {ChangeEvent<HTMLInputElement>} event
+   */
+  @action
+  handleValueChange(event) {
+    this.args.model[this.args.for] = event.target.value;
+  }
+
   set value(newVal) {
     this.args.model[this.args.for] = newVal;
   }

diff --git a/app/components/date-time-picker.js b/app/components/date-time-picker.js
@@ -31,6 +31,7 @@ export default class DateTimePicker extends Component {
       dayNames: getLocalizedDays(this.intl),
       monthNames: getLocalizedMonths(this.intl),
       monthNamesShort: getLocalizedMonths(this.intl, 'short'),
+      placeholder: this.intl.t('au-date-picker.placeholder'),
     };
   }
 

diff --git a/app/components/editor-plugins/regulatory-statements/search-modal.hbs b/app/components/editor-plugins/regulatory-statements/search-modal.hbs
@@ -1,7 +1,7 @@
-<AuModal @modalOpen={{true}} 
-         @title={{t "regulatory-statements-plugin.insert-statement"}} 
-         @size="large" 
-         @padding="none" 
+<AuModal @modalOpen={{true}}
+         @title={{t "regulatory-statements-plugin.insert-statement"}}
+         @size="large"
+         @padding="none"
          @closeModal={{@closeModal}}
          {{did-insert this.didInsert}}
   as |modal|>
@@ -17,8 +17,9 @@
               @icon="search"
               @iconAlignment="right"
               placeholder={{t "regulatory-statements-plugin.search"}}
-              @value={{this.searchValue}}
-              {{on "input" (perform this.updateFilter)}} />
+              value={{this.searchValue}}
+              {{on "input" (perform this.updateFilter)}}
+            />
             <AuHr @size="large" />
             {{#if this.regulatoryStatements}}
               <ul class="au-c-list-navigation">

diff --git a/app/components/editor-plugins/regulatory-statements/sidebar-insert.hbs b/app/components/editor-plugins/regulatory-statements/sidebar-insert.hbs
@@ -1,8 +1,8 @@
-<AuList::Item>
+<li class="au-c-list__item">
   <AuButton @icon="add" @iconAlignment="left" @skin="link" {{on 'click' this.toggleModal}} @disabled={{this.isDisabled}}>
     {{t "regulatory-statements-plugin.insert-statement"}}
   </AuButton>
-</AuList::Item>
+</li>
 {{#if this.modalEnabled}}
 <EditorPlugins::RegulatoryStatements::SearchModal @closeModal={{this.toggleModal}} @insertStatement={{this.insertRegulatoryStatement}} @controller={{@controller}}/>
 {{/if}}
diff --git a/app/components/manage-intermissions/edit.hbs b/app/components/manage-intermissions/edit.hbs
@@ -57,7 +57,12 @@
       </div>
       <div>
         <AuLabel for="intermissionComment">{{t "manage-intermissions.comment-label"}} <AuPill>{{t "manage-agenda-zitting-modal-move.optional"}}</AuPill></AuLabel>
-        <AuTextarea id="intermissionComment" @value={{this.commentExternal}} @width="block"></AuTextarea>
+        <AuTextarea
+          id="intermissionComment"
+          value={{this.commentExternal}}
+          {{on "input" this.handleCommentExternalChange}}
+          @width="block"
+        />
       </div>
     </div>
   </Modal.Body>

diff --git a/app/components/manage-intermissions/edit.js b/app/components/manage-intermissions/edit.js
@@ -44,8 +44,12 @@ export default class manageIntermissionsEditComponent extends Component {
     }
   }
 
-  set commentExternal(value) {
-    this.comment = value;
+  /**
+   * @param {ChangeEvent<HTMLInputElement>} event
+   */
+  @action
+  handleCommentExternalChange(event) {
+    this.comment = event.target.value;
   }
 
   @action

diff --git a/app/components/treatment/voting/edit.hbs b/app/components/treatment/voting/edit.hbs
@@ -9,7 +9,12 @@
     <div class="au-c-form">
       <p>
         <AuLabel for="voting-subject">{{t "voting-edit.first-step-introduction"}}</AuLabel>
-        <AuTextarea id="voting-subject" @width="block" @value={{this.editStemming.stemming.onderwerp}}></AuTextarea>
+        <AuTextarea
+          id="voting-subject"
+          @width="block"
+          value={{this.editStemming.stemming.onderwerp}}
+          {{on "input" this.handleVotingSubjectChange}}
+        />
         <AuHelpText @skin="secondary">{{t "voting-edit.first-step-explanation"}}</AuHelpText>
       </p>
     </div>
@@ -33,7 +38,12 @@
     <div class="au-c-form au-u-padding-bottom">
       <p>
         <AuLabel for="voting-consequence">{{t "voting-edit.third-step-introduction"}}</AuLabel>
-        <AuTextarea id="voting-consequence" @width="block" @value={{this.editStemming.stemming.gevolg}}></AuTextarea>
+        <AuTextarea
+          id="voting-consequence"
+          @width="block"
+          value={{this.editStemming.stemming.gevolg}}
+          {{on "input" this.handleVotingConsequencesChange}}
+        />
         <AuHelpText @skin="secondary">{{t "voting-edit.third-step-explanation"}}</AuHelpText>
       </p>
     </div>

diff --git a/app/components/treatment/voting/edit.js b/app/components/treatment/voting/edit.js
@@ -21,8 +21,25 @@ export default class TreatmentVotingEditComponent extends Component {
   save() {
     this.args.onSave && this.args.onSave();
   }
+
   @action
   cancel() {
     this.args.onCancel && this.args.onCancel();
   }
+
+  /**
+   * @param {ChangeEvent<HTMLInputElement>} event
+   */
+  @action
+  handleVotingSubjectChange(event) {
+    this.editStemming.stemming.onderwerp = event.target.value;
+  }
+
+  /**
+   * @param {ChangeEvent<HTMLInputElement>} event
+   */
+  @action
+  handleVotingConsequencesChange(event) {
+    this.editStemming.stemming.gevolg = event.target.value;
+  }
 }
diff --git a/app/components/zitting/manage-zittingsdata.hbs b/app/components/zitting/manage-zittingsdata.hbs
@@ -51,7 +51,13 @@
         <div>
           {{#let (unique-id) as |id|}}
             <AuLabel for={{id}}>{{t "manage-zittings-data.op-locatie-label"}}</AuLabel>
-            <AuInput type='text' @value={{mut this.opLocatie}} @width="block" id={{id}} />
+            <AuInput
+              type='text'
+              value={{this.opLocatie}}
+              {{on "input" this.handleOpLocatieChange}}
+              @width="block"
+              id={{id}}
+            />
           {{/let}}
         </div>
         <div>

diff --git a/app/components/zitting/manage-zittingsdata.js b/app/components/zitting/manage-zittingsdata.js
@@ -73,4 +73,12 @@ export default class ZittingManageZittingsdataComponent extends Component {
       return false;
     } else return this.geeindigdOpTijdstrip > this.gestartOpTijdstip;
   }
+
+  /**
+   * @param {ChangeEvent<HTMLInputElement>} event
+   */
+  @action
+  handleOpLocatieChange(event) {
+    this.opLocatie = event.target.value;
+  }
 }
diff --git a/app/controllers/agendapoints/edit.js b/app/controllers/agendapoints/edit.js
@@ -183,7 +183,7 @@ export default class AgendapointsEditController extends Controller {
         },
         endpoint: '/codex/sparql',
         decisionsEndpoint: ENV.publicatieEndpoint,
-        defaultDecisionsGovernmentName: municipality.naam,
+        defaultDecisionsGovernmentName: municipality?.naam,
       },
       link: {
         interactive: true,

diff --git a/app/controllers/inbox/agendapoints.js b/app/controllers/inbox/agendapoints.js
@@ -9,13 +9,16 @@ export default class InboxDraftDecisionsController extends Controller {
   @tracked pageSize = 20;
   @tracked filter = '';
   @tracked searchValue = this.filter;
-  @tracked debounceTime = 2000;
+  @tracked debounceTime = 1000;
 
   @service currentSession;
   @service router;
   @service intl;
   sort = '-current-version.updated-on';
 
+  /**
+   * @param {InputEvent<HTMLInputElement>} event
+   */
   updateFilter = restartableTask(async (event) => {
     const input = event.target.value;
     this.searchValue = input;

diff --git a/app/controllers/inbox/irg-archive.js b/app/controllers/inbox/irg-archive.js
@@ -7,8 +7,11 @@ export default class InboxIrgArchiveController extends Controller {
   @tracked size = 10;
   @tracked filter = '';
   @tracked searchValue = this.filter;
-  @tracked debounceTime = 2000;
+  @tracked debounceTime = 1000;
 
+  /**
+   * @param {InputEvent<HTMLInputElement>} event
+   */
   updateFilter = restartableTask(async (event) => {
     const input = event.target.value;
     this.searchValue = input;

diff --git a/app/controllers/inbox/meetings/new.js b/app/controllers/inbox/meetings/new.js
@@ -11,6 +11,14 @@ export default class InboxMeetingsNewController extends Controller {
     return this.model;
   }
 
+  /**
+   * @param {ChangeEvent<HTMLInputElement>} event
+   */
+  @action
+  handleUpdateMeetingOpLocatie(event) {
+    this.meeting.opLocatie = event.target.value;
+  }
+
   saveMeetingTask = dropTask(async (event) => {
     event.preventDefault();
 

diff --git a/app/controllers/inbox/regulatory-statements.js b/app/controllers/inbox/regulatory-statements.js
@@ -8,13 +8,16 @@ export default class InboxRegulatoryStatementsController extends Controller {
   @tracked pageSize = 20;
   @tracked filter = '';
   @tracked searchValue = this.filter;
-  @tracked debounceTime = 2000;
+  @tracked debounceTime = 1000;
 
   @service currentSession;
   @service router;
   @service intl;
   sort = '-current-version.updated-on';
 
+  /**
+   * @param {InputEvent<HTMLInputElement>} event
+   */
   updateFilter = restartableTask(async (event) => {
     this.searchValue = event.target.value;
     await timeout(this.debounceTime);

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -18,7 +18,7 @@
 
 
 // EMBER-APPUNIVERSUM
-@import "ember-appuniversum";
+@import "@appuniversum/ember-appuniversum/styles";
 
 
 // PROJECT COMPONENTS > @TODO: refactor in ember-appuniversum where possible

diff --git a/app/templates/inbox/agendapoints.hbs b/app/templates/inbox/agendapoints.hbs
@@ -17,7 +17,13 @@
           </AuHeading>
         </Group>
         <Group class="au-c-toolbar__group--center au-u-hide-on-print">
-          <AuInput @icon="search" @iconAlignment="right" @value={{this.searchValue}} placeholder={{t 'inbox.agendapoints.search-placeholder'}} {{on "input" (perform this.updateFilter)}}/>
+          <AuInput
+            @icon="search"
+            @iconAlignment="right"
+            value={{this.searchValue}}
+            placeholder={{t 'inbox.agendapoints.search-placeholder'}}
+            {{on "input" (perform this.updateFilter)}}
+          />
           {{#unless this.readOnly}}
             <AuLink @route="inbox.agendapoints.new" @skin="button" @icon="add" @iconAlignment="left">{{t "inbox.agendapoints.new.title"}}</AuLink>
           {{/unless}}

diff --git a/app/templates/inbox/irg-archive.hbs b/app/templates/inbox/irg-archive.hbs
@@ -13,7 +13,14 @@
           </AuHeading>
         </Group>
         <Group class="au-c-toolbar__group--center">
-          <AuInput @icon="search" @iconAlignment="right" @width="block" @value={{this.searchValue}} placeholder={{t 'inbox.irg-archive.search-placeholder'}} {{on "input" (perform this.updateFilter)}}/>
+          <AuInput
+            @icon="search"
+            @iconAlignment="right"
+            @width="block"
+            value={{this.searchValue}}
+            placeholder={{t 'inbox.irg-archive.search-placeholder'}}
+            {{on "input" (perform this.updateFilter)}}
+          />
         </Group>
       </AuToolbar>
     </menu.general>

diff --git a/app/templates/inbox/meetings/new.hbs b/app/templates/inbox/meetings/new.hbs
@@ -32,7 +32,13 @@
       <div>
         {{#let (unique-id) as |id|}}
           <AuLabel for={{id}}>{{t "inbox.meetings.new.meeting.location"}}</AuLabel>
-          <AuInput @value={{this.meeting.opLocatie}} @width="block" id={{id}} type="text" />
+          <AuInput
+            value={{this.meeting.opLocatie}}
+            {{on "input" this.handleUpdateMeetingOpLocatie}}
+            @width="block"
+            id={{id}}
+            type="text"
+          />
         {{/let}}
       </div>
       <div>

diff --git a/app/templates/inbox/regulatory-statements.hbs b/app/templates/inbox/regulatory-statements.hbs
@@ -21,7 +21,7 @@
             {{on "input" (perform this.updateFilter)}}
             @icon="search"
             @iconAlignment="right"
-            @value={{this.searchValue}}
+            value={{this.searchValue}}
             placeholder={{t 'inbox.regulatory-statements.search-placeholder'}}
           />
           {{#unless this.readOnly}}

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -5,9 +5,6 @@ const envIsProduction = process.env.EMBER_ENV === 'production';
 
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
-    '@appuniversum/ember-appuniversum': {
-      disableWormholeElement: true,
-    },
     'ember-simple-auth': {
       useSessionSetupMethod: true,
     },
@@ -25,6 +22,7 @@ module.exports = function (defaults) {
     sassOptions: {
       sourceMap: !envIsProduction,
       sourceMapEmbed: !envIsProduction,
+      includePaths: ['node_modules/@appuniversum/ember-appuniversum'],
     },
     autoprefixer: {
       enabled: true,