Lmb 858 | Show a warnings for # mandaat per table

app/components/verkiezingen/prepare-legislatuur-section.hbs

@@ -94,6 +94,10 @@
   <Verkiezingen::BcsdVoorzitterAlert
     @bestuursorgaanInTijd={{@bestuursorgaan}}
     @bestuursperiode={{@bestuursperiode}}
+  />
+
+  <Verkiezingen::WarningAmountMandatarissenForOrgaanAlert
+    @bestuursorgaanInTijd={{@bestuursorgaan}}
     @mandatarissen={{this.mandatarissen}}
     @trigger={{this.installatievergadering.recomputeBCSDNeededTime}}
   />

app/components/verkiezingen/prepare-legislatuur-section.js

@@ -142,7 +142,6 @@ export default class PrepareLegislatuurSectionComponent extends Component {
         'Er ging iets mis bij het overzetten van de mandatarissen.'
       );
     });
-    this.installatievergadering.forceRecomputeBCSD();
     this.getMandatarissen.perform({ updated: true });
     this.router.refresh(); // not doing this breaks burgemeester selector synchronization
   });
@@ -182,10 +181,9 @@ export default class PrepareLegislatuurSectionComponent extends Component {
   async onCreate({ instanceId }) {
     this.editMode = null;
     const mandataris = await this.store.findRecord('mandataris', instanceId);
-    await this.getMandatarissen.perform({ added: [mandataris] });
     await this.fractieApi.updateCurrentFractie(instanceId);
     await this.mandatarisService.removeDanglingFractiesInPeriod(instanceId);
-    this.installatievergadering.forceRecomputeBCSD();
+    await this.getMandatarissen.perform({ added: [mandataris] });
   }
 
   @action

app/components/verkiezingen/warning-amount-mandatarissen-for-orgaan-alert.hbs

@@ -0,0 +1,40 @@
+<span {{did-update this.updateMappingWithMessages @trigger}}></span>
+{{#if (and this.warningMessages this.currentShownWarning)}}
+  <div class="au-o-box">
+    <AuAlert @skin="warning" @icon="alert-triangle" @closable={{true}}>
+      <div class="au-u-flex au-u-flex--between">
+        <div class="au-u-flex au-u-flex-start">
+          {{#if this.hasMoreThanOneMessage}}
+            <div class="au-u-flex au-u-flex--column">
+              <AuButton
+                hideText={{true}}
+                @icon="chevron-up"
+                @skin="naked"
+                {{on "click" this.previous}}
+              />
+              <AuButton
+                hideText={{true}}
+                @icon="chevron-down"
+                @skin="naked"
+                {{on "click" this.next}}
+              />
+            </div>
+          {{/if}}
+          <p class="au-u-flex-self-center au-u-padding-left">
+            {{this.currentShownWarning.message}}
+          </p>
+        </div>
+        {{#if this.hasMoreThanOneMessage}}
+          <p
+            class="au-u-flex-self-center au-u-flex-end au-u-medium au-u-margin-right-small"
+          >
+            {{this.currentShownWarning.position}}
+            van
+            {{this.warningMessages.length}}
+          </p>
+        {{/if}}
+
+      </div>
+    </AuAlert>
+  </div>
+{{/if}}

app/components/verkiezingen/warning-amount-mandatarissen-for-orgaan-alert.js

@@ -0,0 +1,121 @@
+import Component from '@glimmer/component';
+
+import { action } from '@ember/object';
+import { A } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+import { task, timeout } from 'ember-concurrency';
+
+export default class VerkiezingenWarningAmountMandatarissenForOrgaanAlertComponent extends Component {
+  @service store;
+
+  @tracked mandaatValueMapping;
+  @tracked warningMessages = A();
+
+  constructor() {
+    super(...arguments);
+    this.getMaxAnMinNumberForMandaten.perform();
+  }
+
+  getMaxAnMinNumberForMandaten = task(async () => {
+    if (!this.args.bestuursorgaanInTijd) {
+      throw new Error('Geen bestuursorgaan meegegeven aan component.');
+    }
+
+    const mandaten = await this.store.query('mandaat', {
+      'filter[bevat-in][:uri:]': this.args.bestuursorgaanInTijd.uri,
+    });
+    this.mandaatValueMapping = new Map();
+    for (const mandaat of mandaten) {
+      this.mandaatValueMapping.set(mandaat.id, {
+        label: (await mandaat.bestuursfunctie).label,
+        min: mandaat.minAantalHouders,
+        max: mandaat.maxAantalHouders,
+        warning: null,
+      });
+    }
+    await this.updateMappingWithMessages();
+  });
+
+  @action
+  async updateMappingWithMessages() {
+    if (
+      !this.mandaatValueMapping &&
+      this.getMaxAnMinNumberForMandaten.isRunning
+    ) {
+      // This could be better
+      await timeout(250);
+      await this.updateMappingWithMessages();
+    }
+
+    this.warningMessages.clear();
+
+    await Promise.all(
+      Array.from(
+        this.mandaatValueMapping,
+        // eslint-disable-next-line no-unused-vars
+        async ([key, value]) => {
+          if (!value.max) {
+            return;
+          }
+          const totalForMandaat = this.args.mandatarissen.filter((m) => {
+            return m.get('bekleedt.id') === key;
+          }).length;
+          let message = null;
+          let messagePositionInArray = null;
+          if (totalForMandaat > value.max) {
+            message = `Teveel mandaten gevonden voor "${value.label}". ${totalForMandaat} van maximum ${value.max}`;
+            messagePositionInArray = this.warningMessages.length + 1;
+          }
+          if (totalForMandaat < value.min) {
+            message = `Te weinig mandaten gevonden voor "${value.label}". (${totalForMandaat}/${value.min})`;
+            messagePositionInArray = this.warningMessages.length + 1;
+          }
+
+          this.setMessageForMandaat(key, message, messagePositionInArray);
+          if (message) {
+            this.warningMessages.pushObject({
+              message: message,
+              position: messagePositionInArray,
+            });
+          }
+        }
+      )
+    );
+  }
+
+  setMessageForMandaat(mandaatId, message, messagePositionInArray) {
+    if (!mandaatId || !messagePositionInArray) {
+      return;
+    }
+
+    const current = this.mandaatValueMapping.get(mandaatId);
+    delete current.message;
+    this.mandaatValueMapping.set(mandaatId, {
+      ...current,
+      message,
+    });
+  }
+
+  @action
+  next() {
+    const current = this.warningMessages.shiftObject();
+    console.log({ current });
+    this.warningMessages.pushObject(current);
+  }
+
+  @action
+  previous() {
+    const current = this.warningMessages.popObject();
+    this.warningMessages.unshiftObject(current);
+  }
+
+  get currentShownWarning() {
+    return this.warningMessages.at(0) ?? null;
+  }
+
+  get hasMoreThanOneMessage() {
+    return this.warningMessages.length > 1;
+  }
+}