FORSLAG-84: Fixed progress bar display

CHANGELOG.md

@@ -6,6 +6,8 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+* [PR-340](https://github.com/itk-dev/hoeringsportal/pull/340)
+ Fixed proposal progress bar display
 * [PR-337](https://github.com/itk-dev/hoeringsportal/pull/337)
  Updated drupal core 9.5.10 and contrib modules
 * [PR-332](https://github.com/itk-dev/hoeringsportal/pull/332)

web/modules/custom/hoeringsportal_citizen_proposal/README.md

@@ -25,7 +25,7 @@ The module supports certain settings in settings.php
 $settings['proposal_period_length'] = '+180 days';
 
 // The required votes for a proposal to pass.
-$settings['proposal_support_required'] = '5000';
+$settings['proposal_support_required'] = 1500;
 ```
 
 ## Mails

web/modules/custom/hoeringsportal_citizen_proposal/modules/hoeringsportal_citizen_proposal_fixtures/src/Fixture/CitizenProposalFixture.php

@@ -66,6 +66,11 @@ public function load() {
  $entity->save();
  $this->addReference('node:citizen_proposal:Proposal1', $entity);
 
+ // Add some support.
+ for ($i = 0; $i < 87; $i++) {
+ $this->helper->saveSupport(uniqid('', TRUE), $entity, ['user_name' => self::class]);
+ }
+
  $entity = Node::create([
  'type' => 'citizen_proposal',
  'title' => 'Borgerforslag nummer 2',
@@ -88,6 +93,11 @@ public function load() {
  $entity->save();
  $this->addReference('node:citizen_proposal:Proposal2', $entity);
 
+ // Add some support.
+ for ($i = 0; $i < 3; $i++) {
+ $this->helper->saveSupport(uniqid('', TRUE), $entity, ['user_name' => self::class]);
+ }
+
  $entity = Node::create([
  'type' => 'citizen_proposal',
  'title' => 'Borgerforslag nummer 3',

web/modules/custom/hoeringsportal_citizen_proposal/src/Form/ProposalFormSupport.php

@@ -133,7 +133,6 @@ public function submitForm(array &$form, FormStateInterface $form_state): void {
  $node,
  [
  'user_name' => $form_state->getValue('name'),
- 'created' => time(),
  ],
  );
  $this->messenger()->addStatus($this->getAdminFormStateValue('support_submission_text', $this->t('Thank you for your support.')));

web/modules/custom/hoeringsportal_citizen_proposal/src/Helper/Helper.php

@@ -196,7 +196,8 @@ public function preprocessNode(&$variables): void {
  $proposalSupportCount = $this->getProposalSupportCount((int) $node->id());
 
  $variables['proposal_support_count'] = $proposalSupportCount;
- $variables['proposal_support_percentage'] = (int) $this->calculateSupportPercentage($proposalSupportCount);
+ $variables['proposal_support_required'] = $this->getProposalSupportRequired();
+ $variables['proposal_support_percentage'] = $this->calculateSupportPercentage($proposalSupportCount);
  }
 
  /**
@@ -217,6 +218,10 @@ public function saveSupport(string $userIdentifier, NodeInterface $node, array $
  try {
  $values['user_identifier'] = $userIdentifier;
  $values['node_id'] = $node->id();
+ // Set some defaults.
+ $values += [
+ 'created' => $this->time->getRequestTime(),
+ ];
  $this->connection->insert('hoeringsportal_citizen_proposal_support')
  ->fields($values)
  ->execute();
@@ -428,9 +433,9 @@ public function calculateSupportPercentage(int $proposalSupportCount): float {
  }
 
  return min(
-  100,
-  ceil($proposalSupportCount / $this->getProposalSupportRequired() * 100)
-  );
+ 100,
+ $proposalSupportCount / $this->getProposalSupportRequired() * 100
+ );
  }
 
  /**
@@ -462,7 +467,7 @@ private function hasEnoughVotes(int $nid): bool {
  * @return int
  * The support proposals require.
  */
- private function getProposalSupportRequired(): int {
+ public function getProposalSupportRequired(): int {
  // Allow changing this value in settings.php.
  return (int) Settings::get('proposal_support_required', self::PROPOSAL_SUPPORT_REQUIRED);
  }

web/modules/custom/hoeringsportal_citizen_proposal/src/Plugin/Block/CitizenProposalSupportCounter.php

@@ -50,13 +50,15 @@ public static function create(ContainerInterface $container, array $configuratio
  public function build() {
  $node = $this->routeMatch->getParameter('node');
  $supportCount = $this->helper->getProposalSupportCount($node->id());
+ $supportRequired = $this->helper->getProposalSupportRequired();
  $supportPercentage = $this->helper->calculateSupportPercentage($supportCount);
 
  return [
  '#theme' => 'citizen_proposal_support_counter',
  '#data' => [
  'supportCount' => $supportCount,
- 'supportPercentage' => (int) $supportPercentage,
+ 'supportRequired' => $supportRequired,
+ 'supportPercentage' => $supportPercentage,
  ],
  '#cache' => [
  'contexts' => [],

web/themes/custom/hoeringsportal/assets/css/module/_content.scss

@@ -128,9 +128,19 @@
 }
 
 .support-counter {
- font-size: 1.2em;
-
  .count {
  font-weight: bold;
  }
-}
+
+ .page--landing_page & {
+ padding-bottom: 0.25rem;
+ }
+
+ .page--citizen_proposal & {
+ font-size: 1.2em;
+ padding: {
+ top: 1rem;
+ bottom: 1rem;
+ }
+ }
+}

web/themes/custom/hoeringsportal/templates/components/citizen-proposal-support-counter.html.twig

@@ -0,0 +1,36 @@
+{#
+/**
+ * @file
+ * Support counter theme implementation.
+ *
+ * Available variables:
+ * - data: Data for the block.
+ * - supportCount
+ * - supportRequired
+ * - supportPercentage
+ * @ingroup themeable
+ */
+#}
+{% macro format_percentage(value) -%}
+ {{ value|number_format(2, '.', '') }}
+{%- endmacro %}
+
+<div class="citizen-proposal-support-counter">
+ <div class="support-counter">
+ {# Building and displaying the label is a three step process:
+ 1. Translate the label without replacing placeholders.
+ 2. Replace placeholders with markup
+ 3. Render the final raw HTML
+ #}
+ {{ 'Number of supporters: @number_of_supporters of @required_number_of_supporters'|t|replace({
+ '@number_of_supporters': '<span class="count">' ~ (data.supportCount) ~ '</span>',
+ '@required_number_of_supporters': '<span class="required">' ~ (data.supportRequired) ~ '</span>',
+ })|raw }}
+ </div>
+ <div class="support-progress">
+ <div class="progress">
+ {% set percentage = _self.format_percentage(data.supportPercentage) %}
+ <div class="progress-bar" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="{{ _self.format_percentage(0) }}" aria-valuemax="{{ _self.format_percentage(100) }}"></div>
+ </div>
+ </div>
+</div>

web/themes/custom/hoeringsportal/templates/content/node--citizen-proposal--teaser.html.twig

@@ -82,15 +82,11 @@
  <div><span>{{ 'End date'|t }}:</span><strong class="ml-1">{{ voteEnd | date('d M. Y') }}</strong></div>
  </div>
  <div class="activity-supporters">
- <div class="pb-1">
- <span>{{ 'Number of supporters'|t }}</span>
- <strong class="ml-1">{{ proposal_support_count }}</strong>
- </div>
- <div class="support-progress">
- <div class="progress">
- <div class="progress-bar" style="width:{{ proposal_support_percentage }}%" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
- </div>
- </div>
+ {% include 'citizen-proposal-support-counter.html.twig' with {data: {
+ supportCount: proposal_support_count,
+ supportRequired: proposal_support_required,
+ supportPercentage: proposal_support_percentage,
+ }} %}
  </div>
  <div class="activity-teaser-info d-flex pl-0 border-0">
  <span class="activity-teaser-meta-wrapper text-primary">

web/themes/custom/hoeringsportal/templates/ds/ds-1col.html.twig

@@ -14,9 +14,9 @@
 
 <div class="group-header">
  {% if image_exists %}
- {% include directory ~ '/templates/componets/hero.html.twig' with {'image': ds_content.field_media_image_single, 'title': node.title.value, 'teaser': header_text } %}
+ {% include directory ~ '/templates/components/hero.html.twig' with {'image': ds_content.field_media_image_single, 'title': node.title.value, 'teaser': header_text } %}
  {% else %}
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': node.title.value, 'teaser': header_text } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': node.title.value, 'teaser': header_text } %}
  {% endif %}
 </div>
 

web/themes/custom/hoeringsportal/templates/ds/ds-2col-stacked--node-citizen-proposal.html.twig

@@ -27,9 +27,9 @@
  {{ title_suffix.contextual_links }}
  <{{ header_wrapper }}{{ header_attributes.addClass('group-header bg-primary text-white') }}>
  {% if image_exists %}
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header|without('field_teaser', 'field_media_image_single'), 'teaser': header_text } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header|without('field_teaser', 'field_media_image_single'), 'teaser': header_text } %}
  {% else %}
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header|without('field_teaser'), 'teaser': header_text } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header|without('field_teaser'), 'teaser': header_text } %}
  {% endif %}
  </{{ header_wrapper }}>
  <div class="container content__container">

web/themes/custom/hoeringsportal/templates/ds/ds-2col-stacked--node-hearing-hearing-ticket-add.html.twig

@@ -26,7 +26,7 @@
  {{ title_suffix.contextual_links }}
 
  <{{ header_wrapper }}{{ header_attributes.addClass('group-header bg-primary text-white') }}>
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header } %}
  </{{ header_wrapper }}>
  <div class="container content__container">
  <div class="row">

web/themes/custom/hoeringsportal/templates/ds/ds-2col-stacked--node-hearing-hearing-ticket-view.html.twig

@@ -26,7 +26,7 @@
  {{ title_suffix.contextual_links }}
 
  <{{ header_wrapper }}{{ header_attributes.addClass('group-header bg-primary text-white') }}>
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header } %}
  </{{ header_wrapper }}>
  <div class="container content__container">
  <div class="row">

web/themes/custom/hoeringsportal/templates/ds/ds-2col-stacked--node-hearing.html.twig

@@ -26,7 +26,7 @@
  {{ title_suffix.contextual_links }}
 
  <{{ header_wrapper }}{{ header_attributes.addClass('group-header bg-primary text-white') }}>
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header } %}
  </{{ header_wrapper }}>
  <div class="container content__container">
  <div class="row">

web/themes/custom/hoeringsportal/templates/ds/ds-2col-stacked--node-project.html.twig

@@ -26,7 +26,7 @@
  {{ title_suffix.contextual_links }}
 
  <{{ header_wrapper }}{{ header_attributes.addClass('group-header bg-primary text-white') }}>
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header } %}
  </{{ header_wrapper }}>
  <div class="container content__container">
  <div class="row">

web/themes/custom/hoeringsportal/templates/ds/ds-2col-stacked--node-public-meeting.html.twig

@@ -26,7 +26,7 @@
  {{ title_suffix.contextual_links }}
 
  <{{ header_wrapper }}{{ header_attributes.addClass('group-header bg-primary text-white') }}>
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header } %}
  </{{ header_wrapper }}>
  <div class="container content__container">
  <div class="row">

web/themes/custom/hoeringsportal/templates/ds/ds-2col-stacked--user.html.twig

@@ -26,7 +26,7 @@
  {{ title_suffix.contextual_links }}
 
  <{{ header_wrapper }}{{ header_attributes.addClass('group-header bg-primary text-white') }}>
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header } %}
  </{{ header_wrapper }}>
  <div class="container content__container">
  <div class="row">

web/themes/custom/hoeringsportal/templates/ds/ds-2col-stacked.html.twig

@@ -27,9 +27,9 @@
  {{ title_suffix.contextual_links }}
  <{{ header_wrapper }}{{ header_attributes.addClass('group-header bg-primary text-white') }}>
  {% if image_exists %}
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header|without('field_teaser', 'field_media_image_single'), 'teaser': header_text } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header|without('field_teaser', 'field_media_image_single'), 'teaser': header_text } %}
  {% else %}
- {% include directory ~ '/templates/componets/header.html.twig' with {'header': header|without('field_teaser'), 'teaser': header_text } %}
+ {% include directory ~ '/templates/components/header.html.twig' with {'header': header|without('field_teaser'), 'teaser': header_text } %}
  {% endif %}
  </{{ header_wrapper }}>
  <div class="container content__container">