GN-4829: Meeting design updates

lblod · Jun 28, 2024 · f8ad946 · f8ad946
1 parent a060b62
commit f8ad946
Show file tree

Hide file tree

Showing 23 changed files with 707 additions and 537 deletions.
diff --git a/.changeset/moody-days-fly.md b/.changeset/moody-days-fly.md
@@ -0,0 +1,5 @@
+---
+'frontend-gelinkt-notuleren': patch
+---
+
+GN-4829: Design updates to meetings
diff --git a/app/components/agenda-manager/agenda-table/header.hbs b/app/components/agenda-manager/agenda-table/header.hbs
@@ -10,11 +10,6 @@
       <span class='au-u-hidden-visually'>{{t
           'manage-agenda-zitting-modal.actions-label'
         }}</span>
-      {{#unless @readOnly}}
-        <AuButton {{on 'click' @onCreate}} @icon='add' @iconAlignment='left'>
-          {{t 'manage-agenda-zitting-modal.create-item-button'}}
-        </AuButton>
-      {{/unless}}
     </th>
   </tr>
 </thead>
diff --git a/app/components/agenda-manager/index.hbs b/app/components/agenda-manager/index.hbs
@@ -5,33 +5,48 @@
   @onCancel={{this.stopEditing}}
   as |agenda|
 >
-  <div class='au-c-meeting-chrome-card'>
-    {{#if agenda.loadItemsTask.isRunning}}
-      <AuLoader />
-      <AuHelpText>{{t 'participation-list.loading-loader'}}</AuHelpText>
-    {{else}}
-      <AgendaManager::AgendaTable
-        @onSort={{agenda.onSort}}
-        @onCreate={{agenda.createAgendaItem}}
-        @items={{agenda.items}}
-        @readOnly={{@readOnly}}
-        as |Table|
-      >
-        <Table.Header />
+  <Common::MeetingSubSection @title={{t 'meetings.publish.agenda.title'}}>
+    <:body>
+      {{#if agenda.loadItemsTask.isRunning}}
+        <AuLoader />
+        <AuHelpText>{{t 'participation-list.loading-loader'}}</AuHelpText>
+      {{else}}
+        <AgendaManager::AgendaTable
+          @onSort={{agenda.onSort}}
+          @onCreate={{agenda.createAgendaItem}}
+          @items={{agenda.items}}
+          @readOnly={{@readOnly}}
+          as |Table|
+        >
+          <Table.Header />
 
-        <Table.Body as |Body|>
-          {{#each agenda.items as |item|}}
-            <Body.Row @item={{item}} @edit={{fn this.editItem item}} />
-          {{else}}
-            <Body.Empty />
-          {{/each}}
+          <Table.Body as |Body|>
+            {{#each agenda.items as |item|}}
+              <Body.Row @item={{item}} @edit={{fn this.editItem item}} />
+            {{else}}
+              <Body.Empty />
+            {{/each}}
 
-        </Table.Body>
+          </Table.Body>
 
-      </AgendaManager::AgendaTable>
+        </AgendaManager::AgendaTable>
 
-    {{/if}}
-  </div>
+      {{/if}}
+    </:body>
+
+    <:button>
+      {{#unless @readOnly}}
+        <AuButton
+          @skin='secondary'
+          @icon='plus'
+          @iconAlignment='left'
+          {{on 'click' agenda.createAgendaItem}}
+        >
+          {{t 'generic.add'}}
+        </AuButton>
+      {{/unless}}
+    </:button>
+  </Common::MeetingSubSection>
 
   {{#if this.editModalVisible}}
     <AgendaManager::Edit

diff --git a/app/components/behandeling-van-agendapunt.hbs b/app/components/behandeling-van-agendapunt.hbs
@@ -3,28 +3,28 @@
     <AuHeading id='behandeling-{{@behandeling.id}}' @level='3' @skin='4'>
       {{limit-content @behandeling.onderwerp.titel 80}}
     </AuHeading>
-
-    <div
-      class='au-o-box au-o-box--small au-c-meeting-chrome-card au-u-margin-bottom-none'
+    <Common::MeetingSubSection
+      @title={{t 'behandeling-van-agendapunten.visibility'}}
     >
-      <AuHeading
-        @level='4'
-        @skin='6'
-        class='au-c-meeting-chrome-card__title au-c-meeting-chrome-card__title--inset au-u-margin-bottom-small'
-      >{{t 'behandeling-van-agendapunten.visibility'}}</AuHeading>
-      {{#let (unique-id) as |id|}}
-        <AuLabel for={{id}}><Input
-            @type='checkbox'
-            @checked={{this.openbaar}}
-            {{on 'input' (perform this.toggleOpenbaar)}}
-            id={{id}}
-          />
-          &nbsp;{{t 'behandeling-van-agendapunten.openbaar-label'}}</AuLabel>
-      {{/let}}
-      {{#if this.toggleOpenbaar.isRunning}}
-        <AuLoader @padding='small' />
-      {{/if}}
-    </div>
+      <:body>
+        <div class='au-u-padding-tiny au-u-padding-bottom-none'>
+          {{#let (unique-id) as |id|}}
+            <AuLabel for={{id}}><Input
+                @type='checkbox'
+                @checked={{this.openbaar}}
+                {{on 'input' (perform this.toggleOpenbaar)}}
+                id={{id}}
+              />
+              &nbsp;{{t 'behandeling-van-agendapunten.openbaar-label'}}
+            </AuLabel>
+          {{/let}}
+          {{#if this.toggleOpenbaar.isRunning}}
+            <AuLoader @padding='small' />
+          {{/if}}
+        </div>
+      </:body>
+    </Common::MeetingSubSection>
+
   </div>
 {{else}}
   <div class='au-c-meeting-chrome-editable'>
@@ -38,22 +38,21 @@
         </AuPill>
       {{/if}}
     </AuToolbar>
-    <div
-      class='au-o-box au-o-box--small au-c-meeting-chrome-card au-u-margin-bottom-none'
+    <Common::MeetingSubSection
+      @title={{t 'behandeling-van-agendapunten.visibility'}}
     >
-      <AuHeading
-        @level='4'
-        @skin='6'
-        class='au-c-meeting-chrome-card__title au-c-meeting-chrome-card__title--inset au-u-margin-bottom-small'
-      >{{t 'behandeling-van-agendapunten.visibility'}}</AuHeading>
-      <AuPill @skin='border'>
-        {{#if this.openbaar}}
-          {{t 'behandeling-van-agendapunten.openbaar-msg'}}
-        {{else}}
-          {{t 'behandeling-van-agendapunten.geen-openbaar-msg'}}
-        {{/if}}
-      </AuPill>
-    </div>
+      <:body>
+        <div class='au-u-padding-tiny'>
+          <AuPill @skin='border'>
+            {{#if this.openbaar}}
+              {{t 'behandeling-van-agendapunten.openbaar-msg'}}
+            {{else}}
+              {{t 'behandeling-van-agendapunten.geen-openbaar-msg'}}
+            {{/if}}
+          </AuPill>
+        </div>
+      </:body>
+    </Common::MeetingSubSection>
   </div>
 
 {{/if}}
@@ -75,7 +74,7 @@
     @bestuursorgaan={{@bestuursorgaan}}
     @onSave={{this.saveParticipants}}
     @meeting={{@meeting}}
-    @modalTitle={{t 'behandeling-van-agendapunten.participation-list-button'}}
+    @modalTitle={{t 'generic.edit'}}
     @readOnly={{or (not this.editable) (not this.canEditParticipants)}}
     @readOnlyText={{unless
       this.canEditParticipants
@@ -84,38 +83,55 @@
   />
 {{/if}}
 
-{{#if this.hasParticipants}}
-  <div class='au-c-meeting-chrome-card au-u-margin-bottom-none'>
-    <AuHeading @level='4' @skin='6' class='au-c-meeting-chrome-card__title'>{{t
-        'behandeling-van-agendapunten.voting-title'
-      }}</AuHeading>
-    <Treatment::Voting
-      @bestuursorgaan={{@bestuursorgaan}}
-      @behandeling={{@behandeling}}
-      @readOnly={{not this.editable}}
-    />
-  </div>
-{{else}}
-  <div class='au-u-margin-top au-u-margin-bottom'>
-    <AuPill @skin='warning' @icon='alert-triangle' @iconAlignment='left'>{{t
-        'behandeling-van-agendapunten.needs-participants'
-      }}</AuPill>
-  </div>
-{{/if}}
+<Common::MeetingSubSection
+  @title={{t 'behandeling-van-agendapunten.voting-title'}}
+>
+  <:body>
+    {{#if this.hasParticipants}}
+      <Treatment::Voting
+        @bestuursorgaan={{@bestuursorgaan}}
+        @behandeling={{@behandeling}}
+        @readOnly={{not this.editable}}
+      />
+    {{else}}
+      <div
+        class='au-u-margin-top au-u-margin-bottom au-u-flex au-u-flex--center'
+      >
+        <AuPill @skin='warning' @icon='alert-triangle' @iconAlignment='left'>
+          {{t 'behandeling-van-agendapunten.needs-participants'}}
+        </AuPill>
+      </div>
+    {{/if}}
+  </:body>
+  <:button>
+    {{#unless @readOnly}}
+      <AuButton
+        {{on 'click' (perform this.addStemming)}}
+        @icon='add'
+        @skin='secondary'
+        @iconAlignment='left'
+        @loading={{this.addStemming.isRunning}}
+      >
+        {{t 'generic.add'}}
+      </AuButton>
+      {{#if this.editMode}}
+        <Treatment::Voting::Edit
+          @bestuursorgaan={{@bestuursorgaan}}
+          @onSave={{perform this.saveStemming}}
+          @onCancel={{this.onCancelEdit}}
+          @saving={{this.saveStemming.isRunning}}
+        />
+      {{/if}}
+    {{/unless}}
+  </:button>
+</Common::MeetingSubSection>
 
-<div
-  class='au-c-meeting-chrome-card au-u-margin-bottom-small au-u-margin-top-small'
+<Common::MeetingSubSection
+  @title={{t 'behandeling-van-agendapunten.content-title'}}
 >
-  <div
-    class='au-c-meeting-chrome-card__title au-c-meeting-chrome-card__title--flex'
-  >
-    <AuHeading @level='4' @skin='6'>{{t
-        'behandeling-van-agendapunten.content-title'
-      }}
-    </AuHeading>
+  <:body>
     {{#if this.attachments}}
       {{#if this.editable}}
-
         <AuPill
           @route='agendapoints.attachments'
           @model={{@behandeling.documentContainer.id}}
@@ -132,21 +148,23 @@
         </AuPill>
       {{/if}}
     {{/if}}
-  </div>
-  <div class='au-o-box au-o-box--small au-c-editor-preview say-content'>
-    {{@behandeling.documentContainer.currentVersion.htmlSafeContent}}
-  </div>
-</div>
-{{#if (and this.editable @behandeling.documentContainer)}}
-  <AuLink
-    @route='agendapoints.edit'
-    @model={{@behandeling.documentContainer.id}}
-    @query={{hash returnToMeeting=@meeting.id}}
-    @width='block'
-    @skin='button-secondary'
-    @icon='pencil'
-    @iconAlignment='left'
-  >
-    {{t 'behandeling-van-agendapunten.edit-document'}}
-  </AuLink>
-{{/if}}
+    <div class='au-o-box au-o-box--small au-c-editor-preview say-content'>
+      {{@behandeling.documentContainer.currentVersion.htmlSafeContent}}
+    </div>
+  </:body>
+
+  <:button>
+    {{#if (and this.editable @behandeling.documentContainer)}}
+      <AuLink
+        @route='agendapoints.edit'
+        @model={{@behandeling.documentContainer.id}}
+        @query={{hash returnToMeeting=@meeting.id}}
+        @skin='button-secondary'
+        @icon='pencil'
+        @iconAlignment='left'
+      >
+        {{t 'generic.edit'}}
+      </AuLink>
+    {{/if}}
+  </:button>
+</Common::MeetingSubSection>
diff --git a/app/components/behandeling-van-agendapunt.js b/app/components/behandeling-van-agendapunt.js
@@ -27,6 +27,10 @@ export default class BehandelingVanAgendapuntComponent extends Component {
   @tracked published = false;
   @tracked chairman;
   @tracked secretary;
+
+  @tracked editMode = false;
+  @service editStemming;
+
   /** @type {RelationshipResourceValue} */
   @use meetingChairmanData = new RelationshipResource(() => [
     this.args.meeting,
@@ -67,6 +71,10 @@ export default class BehandelingVanAgendapuntComponent extends Component {
     return this.args.behandeling;
   }
 
+  get stemmingen() {
+    return this.args.behandeling.sortedVotings ?? [];
+  }
+
   get editable() {
     return !(this.published || this.args.readOnly);
   }
@@ -168,4 +176,41 @@ export default class BehandelingVanAgendapuntComponent extends Component {
       await this.behandeling.save();
     }
   });
+
+  @action
+  onCancelEdit() {
+    this.editMode = false;
+    this.editStemming.stemming.rollbackAttributes();
+    this.editStemming.stemming = null;
+  }
+
+  saveStemming = task(async () => {
+    const isNew = this.editStemming.stemming.isNew;
+
+    if (isNew) {
+      this.editStemming.stemming.position = this.stemmingen.length;
+      this.editStemming.stemming.behandelingVanAgendapunt =
+        this.args.behandeling;
+    }
+    await this.editStemming.saveTask.perform();
+    this.onCancelEdit();
+  });
+
+  addStemming = task(async () => {
+    // high pagesize is set on the model, so this is fine
+    const participants = await this.args.behandeling.aanwezigen;
+
+    const stemmingToEdit = this.store.createRecord('stemming', {
+      onderwerp: '',
+      geheim: false,
+      aantalVoorstanders: 0,
+      aantalTegenstanders: 0,
+      aantalOnthouders: 0,
+      gevolg: '',
+    });
+    this.editMode = true;
+    stemmingToEdit.aanwezigen.pushObjects(participants);
+    stemmingToEdit.stemmers.pushObjects(participants);
+    this.editStemming.stemming = stemmingToEdit;
+  });
 }