[#57688] Harmonize Backlogs module with Primer

app/services/work_packages/set_attributes_service.rb

@@ -69,7 +69,7 @@ def set_custom_values_to_validate(attributes, validate_custom_fields = nil)
 
   def set_static_attributes(attributes)
     assignable_attributes = attributes.select do |key, _|
-      !CustomField.custom_field_attribute?(key) && work_package.respond_to?(key)
+      !CustomField.custom_field_attribute?(key) && work_package.respond_to?("#{key}=")
     end
 
     work_package.attributes = assignable_attributes

config/locales/en.yml

@@ -4130,6 +4130,7 @@ en:
   notice_successful_delete: "Successful deletion."
   notice_successful_cancel: "Successful cancellation."
   notice_successful_update: "Successful update."
+  notice_successful_move: "Successful move from %{from} to %{to}."
   notice_unsuccessful_create: "Creation failed."
   notice_unsuccessful_create_with_reason: "Creation failed: %{reason}"
   notice_unsuccessful_update: "Update failed."

frontend/package.json

@@ -147,7 +147,6 @@
     "jquery": "^3.7.1",
     "jquery.caret": "^0.3.1",
     "jquery.cookie": "^1.4.1",
-    "jquery.flot": "^0.8.3",
     "json5": "^2.2.2",
     "lit-html": "^3.3.2",
     "lodash": "^4.17.23",

frontend/src/app/app.module.ts

@@ -206,6 +206,7 @@ import { WorkPackageFullCreateEntryComponent } from 'core-app/features/work-pack
 import { WorkPackageFullViewEntryComponent } from 'core-app/features/work-packages/routing/wp-full-view/wp-full-view-entry.component';
 import { MyPageComponent } from './features/my-page/my-page.component';
 import { DashboardComponent } from './features/overview/dashboard.component';
+import { BurndownChartComponent } from './features/backlogs/burndown-chart.component';
 
 export function initializeServices(injector:Injector) {
   return () => {
@@ -419,5 +420,6 @@ export class OpenProjectModule implements DoBootstrap {
 
     registerCustomElement('opce-my-page', MyPageComponent, { injector });
     registerCustomElement('opce-dashboard', DashboardComponent, { injector });
+    registerCustomElement('opce-burndown-chart', BurndownChartComponent, { injector });
   }
 }

frontend/src/app/features/backlogs/burndown-chart.component.html

@@ -0,0 +1,18 @@
+<div class="position-relative mx-auto" style="height:60vh">
+  <canvas baseChart
+    [data]="lineChartData()"
+    [options]="lineChartOptions()"
+    [type]="'line'"></canvas>
+</div>
+
+@if (isDevMode) {
+  <hr/>
+
+  <details>
+    <summary>Debug</summary>
+    <code>
+      <pre>{{maxValue() }}</pre>
+      <pre>{{lineChartData() | json}}</pre>
+    </code>
+  </details>
+}

frontend/src/app/features/backlogs/burndown-chart.component.ts

@@ -0,0 +1,86 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
+import { ChartData, ChartOptions } from 'chart.js';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import PrimerColorsPlugin from 'core-app/shared/components/work-package-graphs/plugin.primer-colors';
+import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
+import { environment } from '../../../environments/environment';
+
+const BURNDOWN_Y_SCALE_MIN = 25;
+
+@Component({
+  selector: 'op-burndown-chart',
+  templateUrl: './burndown-chart.component.html',
+  imports: [BaseChartDirective, JsonPipe],
+  providers: [provideCharts(withDefaultRegisterables(PrimerColorsPlugin))],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BurndownChartComponent {
+  readonly isDevMode = !environment.production;
+  readonly i18n = inject(I18nService);
+  readonly chartData = input.required<string>();
+
+  readonly lineChartData = computed<ChartData<'line'>>(() => {
+    const data = JSON.parse(this.chartData()) as ChartData<'line'>;
+    return data;
+  });
+
+  readonly maxValue = computed(() => {
+    return this.lineChartData().datasets
+      .flatMap((dataset) => dataset.data)
+      .filter((item):item is number => typeof item === 'number')
+      .reduce((a, b) => Math.max(a, b), 0);
+  });
+
+  readonly lineChartOptions = computed<ChartOptions<'line'>>(() => ({
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: this.i18n.t('js.burndown.day')
+        }
+      },
+      y: {
+        title: {
+          display: true,
+          text: this.i18n.t('js.burndown.points')
+        },
+        suggestedMin: 0,
+        max: this.maxValue() + BURNDOWN_Y_SCALE_MIN
+      }
+    },
+    plugins: {
+      legend: {
+        position: 'top'
+      }
+    }
+  }));
+}

frontend/src/app/features/plugins/plugin-context.ts

@@ -31,6 +31,7 @@ import { HttpClient } from '@angular/common/http';
 import { TimezoneService } from 'core-app/core/datetime/timezone.service';
 import { TurboRequestsService } from 'core-app/core/turbo/turbo-requests.service';
 import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
+import { HalEventsService } from '../hal/services/hal-events.service';
 /**
  * Plugin context bridge for plugins outside the CLI compiler context
  * in order to access services and parts of the core application
@@ -48,6 +49,7 @@ export class OpenProjectPluginContext {
     confirmDialog: this.injector.get<ConfirmDialogService>(ConfirmDialogService),
     externalQueryConfiguration: this.injector.get<ExternalQueryConfigurationService>(ExternalQueryConfigurationService),
     externalRelationQueryConfiguration: this.injector.get<ExternalRelationQueryConfigurationService>(ExternalRelationQueryConfigurationService),
+    halEvents: this.injector.get<HalEventsService>(HalEventsService),
     halResource: this.injector.get<HalResourceService>(HalResourceService),
     hooks: this.injector.get<HookService>(HookService),
     i18n: this.injector.get<I18nService>(I18nService),

frontend/src/assets/sass/backlogs/_index.sass

@@ -33,6 +33,11 @@
  * See COPYRIGHT and LICENSE files for more details.
  */
 
+// Variables
+@import "../../../global_styles/openproject/_variable_defaults.scss"
+
+@import "../../../global_styles/openproject/_variables.sass"
+
 @import global
 @import global_print
 @import jqplot