From a2891a4e728bc4d0789e67223cb89a25f93278a6 Mon Sep 17 00:00:00 2001 From: pskl Date: Thu, 28 Nov 2024 16:09:17 +0100 Subject: [PATCH] Fix reload of charts --- app/javascript/application.js | 7 ++ app/views/home/_home_timeline.html.haml | 117 ++++++++++++------------ 2 files changed, 66 insertions(+), 58 deletions(-) diff --git a/app/javascript/application.js b/app/javascript/application.js index ed67c6c08..11889841f 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -3,3 +3,10 @@ import "@hotwired/turbo-rails"; import "controllers"; import "chartkick"; import "Chart.bundle"; + +document.addEventListener("turbo:load", () => { + const homeCharts = document.getElementById("home_charts"); + if (homeCharts) { + Turbo.visit(window.location.href, { frame: "home_charts" }); + } +}); diff --git a/app/views/home/_home_timeline.html.haml b/app/views/home/_home_timeline.html.haml index a1e00794a..7d93291fe 100644 --- a/app/views/home/_home_timeline.html.haml +++ b/app/views/home/_home_timeline.html.haml @@ -8,64 +8,65 @@ = t("errors.school_years.not_found").html_safe - else - dsfr_colors = { blue: "#000091", light_blue: "#bccdff", green: "#88fdaa", red: "#ffbdbd" } # https://www.systeme-de-design.gouv.fr/fondamentaux/couleurs-palette - .fr-grid-row.timeline-row - .fr-col-md-7 - .gray-panel.timeline-section - = render 'classes/attributive_decisions_panel' - .fr-col-md-4.fr-ml-4w - .chart-container - = pie_chart({ "Élèves avec DA" => @establishment_facade.attributive_decisions_count, "Élèves sans DA" => @establishment_facade.without_attributive_decisions_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true) + = turbo_frame_tag "home_charts" do + .fr-grid-row.timeline-row + .fr-col-md-7 + .gray-panel.timeline-section + = render 'classes/attributive_decisions_panel' + .fr-col-md-4.fr-ml-4w + .chart-container + = pie_chart({ "Élèves avec DA" => @establishment_facade.attributive_decisions_count, "Élèves sans DA" => @establishment_facade.without_attributive_decisions_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true) - .fr-grid-row.timeline-row - .fr-col-md-7 - .gray-panel.timeline-section - .fr-grid-row.fr-grid-row--top - %h2.fr-col 2. Coordonnées bancaires - = progress_badge(@establishment_facade.ribs_count, @establishment_facade.students_count, title: "Les coordonnées bancaires sont réutilisées pour un même élève\nà travers toutes les classes qu'il a pu fréquenter.") - %p Afin de pouvoir verser l'allocation aux lycéens, APLyPro a besoin de leurs coordonnées bancaires, de celles d'un responsable légal ou d'un tiers. - %ul.fr-btns-group - %li= link_to "Choisir une classe pour saisir des coordonnées bancaires", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0" - .fr-col-md-4.fr-ml-4w - .chart-container - = pie_chart({ "Élèves avec RIB" => @establishment_facade.ribs_count, "Élèves sans RIB" => @establishment_facade.students_without_rib_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true) + .fr-grid-row.timeline-row + .fr-col-md-7 + .gray-panel.timeline-section + .fr-grid-row.fr-grid-row--top + %h2.fr-col 2. Coordonnées bancaires + = progress_badge(@establishment_facade.ribs_count, @establishment_facade.students_count, title: "Les coordonnées bancaires sont réutilisées pour un même élève\nà travers toutes les classes qu'il a pu fréquenter.") + %p Afin de pouvoir verser l'allocation aux lycéens, APLyPro a besoin de leurs coordonnées bancaires, de celles d'un responsable légal ou d'un tiers. + %ul.fr-btns-group + %li= link_to "Choisir une classe pour saisir des coordonnées bancaires", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0" + .fr-col-md-4.fr-ml-4w + .chart-container + = pie_chart({ "Élèves avec RIB" => @establishment_facade.ribs_count, "Élèves sans RIB" => @establishment_facade.students_without_rib_count }, colors: [dsfr_colors[:green], dsfr_colors[:red]], donut: true) - .fr-grid-row.timeline-row - .fr-col-md-7 - .gray-panel.timeline-section - %h2 3. Périodes de formation en milieu professionnel - .fr-grid-row - - PfmpStateMachine.states.each_with_index do |state, index| - - if index > 0 - .fr-mx-1w → - = pfmps_status_count_badge(state.to_sym, @establishment_facade.pfmps_counts[state.to_sym], display_zero: true) - %p Pour calculer le montant des allocations à envoyer, APLyPro a besoin de connaître le nombre de jours travaillés des PFMPs de chaque élève. - %ul.fr-btns-group - %li= link_to "Choisir une classe ou un élève pour saisir une PFMP", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0" - .fr-col-md-4.fr-ml-4w - .chart-container - = column_chart(@establishment_facade.pfmps_counts.transform_keys { |key| t("pfmps.state.#{key}") }, - colors: [dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]], - label: "PFMPs par états") + .fr-grid-row.timeline-row + .fr-col-md-7 + .gray-panel.timeline-section + %h2 3. Périodes de formation en milieu professionnel + .fr-grid-row + - PfmpStateMachine.states.each_with_index do |state, index| + - if index > 0 + .fr-mx-1w → + = pfmps_status_count_badge(state.to_sym, @establishment_facade.pfmps_counts[state.to_sym], display_zero: true) + %p Pour calculer le montant des allocations à envoyer, APLyPro a besoin de connaître le nombre de jours travaillés des PFMPs de chaque élève. + %ul.fr-btns-group + %li= link_to "Choisir une classe ou un élève pour saisir une PFMP", school_year_classes_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0" + .fr-col-md-4.fr-ml-4w + .chart-container + = column_chart(@establishment_facade.pfmps_counts.transform_keys { |key| t("pfmps.state.#{key}") }, + colors: [dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]], + label: "PFMPs par états") - .fr-grid-row.timeline-row - .fr-col-md-7 - .gray-panel.timeline-section - %h2 4. Demandes de paiements des PFMPs - .fr-grid-row - - ASP::PaymentRequestDecorator::PAYMENT_STAGES.each_with_index do |states, index| - - if index > 0 - .fr-mx-1w → - .centering-container.fr-mb-2w - = payment_requests_status_count_badge(states.first, @establishment_facade.payment_requests_counts[states.first], display_zero: true) - = payment_requests_status_count_badge(states.last, @establishment_facade.payment_requests_counts[states.last], display_zero: false) - %p La validation du chef d'établissement est nécessaire pour chaque PFMP. Une fois la PFMP validée, une demande de paiement est ensuite envoyée à l'Agence de Services et de Paiement (ASP). Chaque demande de paiement possède un statut affiché dans la page "Paiements". - %ul.fr-btns-group - - if current_user.can_validate? - %li= link_to "Consulter et gérer les envois en paiement", school_year_validations_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0" - - else - %li= button_to "Vous n'avez pas le droit de valider des PFMPs", "#", class: 'fr-btn fr-btn--primary fr-mb-0', disabled: true - .fr-col-md-4.fr-ml-4w - .chart-container - = column_chart(@establishment_facade.payment_requests_counts.transform_keys { |key| t("payment_requests.state.#{key}") }, - colors: [dsfr_colors[:blue], dsfr_colors[:red], dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]], - label: "Demandes de paiements par états") + .fr-grid-row.timeline-row + .fr-col-md-7 + .gray-panel.timeline-section + %h2 4. Demandes de paiements des PFMPs + .fr-grid-row + - ASP::PaymentRequestDecorator::PAYMENT_STAGES.each_with_index do |states, index| + - if index > 0 + .fr-mx-1w → + .centering-container.fr-mb-2w + = payment_requests_status_count_badge(states.first, @establishment_facade.payment_requests_counts[states.first], display_zero: true) + = payment_requests_status_count_badge(states.last, @establishment_facade.payment_requests_counts[states.last], display_zero: false) + %p La validation du chef d'établissement est nécessaire pour chaque PFMP. Une fois la PFMP validée, une demande de paiement est ensuite envoyée à l'Agence de Services et de Paiement (ASP). Chaque demande de paiement possède un statut affiché dans la page "Paiements". + %ul.fr-btns-group + - if current_user.can_validate? + %li= link_to "Consulter et gérer les envois en paiement", school_year_validations_path(selected_school_year), class: "fr-btn fr-btn--primary fr-mb-0" + - else + %li= button_to "Vous n'avez pas le droit de valider des PFMPs", "#", class: 'fr-btn fr-btn--primary fr-mb-0', disabled: true + .fr-col-md-4.fr-ml-4w + .chart-container + = column_chart(@establishment_facade.payment_requests_counts.transform_keys { |key| t("payment_requests.state.#{key}") }, + colors: [dsfr_colors[:blue], dsfr_colors[:red], dsfr_colors[:light_blue], dsfr_colors[:red], dsfr_colors[:green], dsfr_colors[:red]], + label: "Demandes de paiements par états")