DGNum/demarches-normaliennes
13
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

feat(attestation): v2 edit form and tags style

Browse source
This commit is contained in:
Colin Darie 2023-12-19 12:51:30 +01:00
parent e05565fe52
commit eaf4e24a55
No known key found for this signature in database
GPG key ID: 8C76CADD40253590
8 changed files with 138 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/assets/stylesheets/attestation_template_2_edit.scss
View file

@ -1,7 +1,63 @@
@import "constants";
#attestation-edit {
.tiptap {
padding: 8px;
padding: $default-spacer;
overflow-y: scroll;
min-height: 400px;
min-height: 600px;
}
.editor {
// Visual zones
.header .flex-1,
h1,
h2,
h3 {
background-color: var(--background-contrast-grey-hover);
padding: $default-spacer / 2;
}
.header,
h1,
h2,
h3 {
margin-bottom: $default-spacer;
}
// Styles
.header {
align-content: center;
p {
margin-bottom: 0rem;
font-size: 0.8rem;
}
}
h1,
h2 {
font-size: 1.25rem;
}
h2 {
line-height: 2rem;
}
h3 {
font-size: 0.8rem;
font-weight: normal;
line-height: 1rem;
}
li p {
margin-bottom: 0;
}
// Tags
.fr-tag {
// style span rendered by tiptap like a button/link tag
color: var(--text-action-high-blue-france);
background-color: var(--background-action-low-blue-france);
}
}
}

2
app/controllers/administrateurs/attestation_template_v2s_controller.rb
View file

@ -66,7 +66,7 @@ module Administrateurs
end
def editor_params
params.required(:attestation_template).permit(:tiptap_body)
params.required(:attestation_template).permit(:label_logo, :label_direction, :tiptap_body, :footer)
end
end
end

2
app/javascript/shared/tiptap/editor.ts
View file

@ -109,7 +109,7 @@ function getEditorOptions(
return node.attrs.label;
},
HTMLAttributes: {
class: 'fr-badge fr-badge--sm fr-badge--info fr-badge--no-icon'
class: 'fr-tag fr-tag--sm'
},
suggestion: createSuggestionMenu(tags, element)
})

4
app/javascript/shared/tiptap/nodes.ts
View file

@ -31,7 +31,7 @@ export const Header = Node.create({
renderHTML({ HTMLAttributes }) {
return [
'header',
mergeAttributes(HTMLAttributes, { class: 'header flex' }),
mergeAttributes(HTMLAttributes, { class: 'header flex flex-gap-1' }),
0
];
}
@ -39,7 +39,7 @@ export const Header = Node.create({
export const HeaderColumn = Node.create({
name: 'headerColumn',
content: 'paragraph',
content: 'paragraph{1,2}',
defining: true,
parseHTML() {

8
app/javascript/shared/tiptap/tags.ts
View file

@ -92,9 +92,9 @@ class SuggestionMenu {
const html = this.#props.items
.map((item, i) => {
return `<li class="fr-badge fr-badge--sm fr-badge--no-icon${
i == this.#selectedIndex ? ' fr-badge--info' : ''
}">${item.label}</li>`;
return `<li><button class="fr-tag fr-tag--sm" aria-pressed="${
i == this.#selectedIndex ? 'true' : 'false'
}">${item.label}</button></li>`;
})
.join('');
@ -107,7 +107,7 @@ class SuggestionMenu {
const menu = document.createElement('div');
const list = document.createElement('ul');
menu.classList.add('fr-menu');
list.classList.add('fr-menu__list');
list.classList.add('fr-menu__list', 'fr-tags-group');
menu.appendChild(list);
return menu;

77
app/views/administrateurs/attestation_template_v2s/edit.html.haml
View file

@ -1,16 +1,65 @@
#attestation-edit.fr-container.mt-2{ data: { controller: 'tiptap' } }
= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), data: { turbo: 'true', controller: 'autosubmit' } do |form|
.flex.flex-gap-2
- @buttons.each do |buttons|
.flex.flex-gap-1
- buttons.each do |(label, action, icon)|
%button.fr-btn.fr-btn--secondary.fr-btn--sm{ type: 'button', title: label, class: "fr-icon-#{icon}", data: { action: 'click->tiptap#menuButton', tiptap_target: 'button', tiptap_action: action } }
= label
= render partial: 'administrateurs/breadcrumbs',
locals: { steps: [['Démarches', admin_procedures_path],
[@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
['Attestation']] }
.editor.mt-2{ data: { tiptap_target: 'editor' } }
= form.hidden_field :tiptap_body, data: { tiptap_target: 'input' }
#attestation-edit.fr-container.fr-mt-4w{ data: { controller: 'tiptap' } }
.fr-grid-row.fr-grid-row--gutters
.fr-col-12.fr-col-md-8
= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), data: { turbo: 'true', controller: 'autosubmit' } do |f|
%fieldset.fr-fieldset{ aria: { labelledby: 'edit-attestation' } }
%legend.fr-fieldset__legend#edit-attestation
%h1.fr-h2 Attestation
%p.fr-text--regular
L’attestation est émise au moment où un dossier est accepté, elle est jointe à l’email d’accusé d’acceptation.
Elle est également disponible au téléchargement depuis l’espace personnel de l’usager.
%ul.mt-2.flex.wrap.flex-gap-1
- @attestation_template.tags.each do |tag|
%li.fr-badge.fr-badge--sm{ role: 'button', title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
= tag[:libelle]
.fr-fieldset__element.fr-mt-2w
%h6 En-tête
.fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :label_logo, input_type: :text_area, required: false, opts: { rows: 3 }) do |c|
- c.with_hint { "Exemple: Ministère de la Mer. 3 lignes maximum" }
.fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :label_direction, input_type: :text_area, required: false, opts: { rows: 2 }) do |c|
- c.with_hint { "Exemple: Direction interministérielle du numérique. 2 lignes maximum" }
.fr-fieldset__element.fr-mt-2w
%label.fr-label.fr-h6
= AttestationTemplate.human_attribute_name :body
= render EditableChamp::AsteriskMandatoryComponent.new
.editor.mt-2{ data: { tiptap_target: 'editor' } }
= f.hidden_field :tiptap_body, data: { tiptap_target: 'input' }
.fr-fieldset__element
.flex.flex-gap-2
- @buttons.each do |buttons|
.flex.flex-gap-1
- buttons.each do |(label, action, icon)|
%button.fr-btn.fr-btn--secondary.fr-btn--sm{ type: 'button', title: label, class: "fr-icon-#{icon}", data: { action: 'click->tiptap#menuButton', tiptap_target: 'button', tiptap_action: action } }
= label
.fr-fieldset__element
%ul.fr-tags-group
- @attestation_template.tags.each do |tag|
%li
%button.fr-tag.fr-tag--sm{ title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
= tag[:libelle]
.fr-fieldset__element.fr-mt-2w
%h6 Pied de page
.fr-fieldset__element
%label.fr-label{ for: field_id(@attestation_template, :signature) } Tampon ou signature
%span.fr-hint-text
Dimensions conseillées : au minimum 500px de largeur ou de hauteur.
= render Attachment::EditComponent.new(attached_file: @attestation_template.signature, direct_upload: false)
.fr-fieldset__element
= render Dsfr::InputComponent.new(form: f, attribute: :footer, input_type: :text_area, required: false, opts: { rows: 3 }) do |c|
- c.with_hint { "Exemple: 20 avenue de Ségur, 75007 Paris" }
.fr-col-12.fr-col-md-4.fr-background-alt--blue-france
Image d'exemple ici

23
app/views/administrateurs/attestation_template_v2s/show.html.haml
View file

@ -1,30 +1,23 @@
= image_tag('centered_marianne.svg', alt: '', class: 'marianne')
.header
.left
.bloc-marque
%p.intitule
PRÉFET<br />
DU VAL-<br />
DE-MARNE
= image_tag('liberte2.svg', alt: '', class: 'devise')
- if @attestation_template.label_logo.present?
.bloc-marque
= simple_format @attestation_template.label_logo, class: "intitule"
= image_tag('liberte2.svg', alt: '', class: 'devise')
%p.issuer
Service Hébergement et Accès au Logement<br />
Bureau de l'Accès au Logement
.right
%p.direction
Direction Régionale et Interdépartementale<br />
de l'Hébergement et du Logement<br />
DRIHL Val-de-Marne
- if @attestation_template.label_direction.present?
= simple_format @attestation_template.label_direction, class: "direction"
%p.date Créteil, le 20 mars 2023
%h1.title ATTESTATION
.main
= sanitize(@body)
%p.footer
12/14 rue des Archives 94000 Créteil<br />
www.drihl.ile-de-france.developpement-durable.gouv.fr
- if @attestation_template.footer.present?
= simple_format @attestation_template.footer, class: "footer"

2
config/locales/models/attestation_template/fr.yml
View file

@ -8,7 +8,7 @@ fr:
label_direction: Intitulé de la direction
title: Titre de l’attestation
body: Contenu de l’attestation
footer: Pied de page
footer: Contenu du pied de page
errors:
models: