Skip to content

Commit

Permalink
fix(cc): some CC cosmetics for #2035 (#2073)
Browse files Browse the repository at this point in the history
* fix(cc): fix intro CC for #2035

* fix(cc): group questions by theme in accordions for #2035

* fix(cc): fix questions frequentes for #2035

* fix(cc): remove cc meta

* fix(cc): rename blocs, use accordions for #2035

* fix(cc): search cosmetics for #2035

* fix(cc): reorder sections for #2035

* fix: lint

* fix: add @CaptainConan fixes

* fix: snaps

* fix(agreement): preserve order of blocs / questions

Co-authored-by: Lionel <lionel@lumographe.fr>
  • Loading branch information
Julien Bouquillon and lionelB authored Dec 27, 2019
1 parent 26a9b22 commit 26ae21e
Showing 11 changed files with 13,638 additions and 11,196 deletions.
18,653 changes: 9,963 additions & 8,690 deletions packages/code-du-travail-data/dataset/datafiller/agreements.data.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ const DATAFILLER_URL =
process.env.DATAFILLER_URL || "https://datafiller.num.social.gouv.fr";

const RECORDS_URL = `${DATAFILLER_URL}/kinto/v1/buckets/datasets/collections/ccns/records?_sort=title`;

const createSorter = prop => ({ [prop]: a }, { [prop]: b }) => a - b;
async function fetchAgreements() {
const ccnBlockRecords = await fetch(RECORDS_URL, { params: { _limit: 1000 } })
.then(res => res.json())
@@ -87,7 +87,7 @@ function getNbText(agreementTree) {
*/
function getContributionAnswers(agreementNum) {
return contributions
.map(({ value, answers }) => {
.map(({ value, index, answers }) => {
const [answer] = answers.conventions.filter(
({ idcc }) => parseInt(idcc) === parseInt(agreementNum)
);
@@ -98,7 +98,8 @@ function getContributionAnswers(agreementNum) {
const themeFinder = ({ url }) => slugMatcher.test(url);
const theme = themes.find(theme => theme.refs.some(themeFinder));
return {
question: value,
index,
question: value.trim(),
answer: compiler.processSync(answer.markdown).contents,
theme: theme.breadcrumbs ? theme.breadcrumbs[0].title : theme.title,
references: answer.references.map(
@@ -116,6 +117,7 @@ function getContributionAnswers(agreementNum) {
};
}
})
.sort(createSorter("index"))
.filter(Boolean);
}
/**
@@ -124,9 +126,9 @@ function getContributionAnswers(agreementNum) {
*/
function getArticleByBlock(groups, agreementTree) {
const treeWithParents = parents(agreementTree);

return groups
.filter(({ selection }) => selection.length > 0)
.sort(createSorter("id"))
.map(({ id, selection }) => ({
bloc: id,
articles: selection.map(articleId => {
Original file line number Diff line number Diff line change
@@ -2,7 +2,6 @@ import React from "react";
import { withRouter } from "next/router";
import getConfig from "next/config";
import fetch from "isomorphic-unfetch";
import { format, parseISO } from "date-fns";
import Answer from "../../src/common/Answer";
import { Layout } from "../../src/layout/Layout";
import Convention from "../../src/conventions/Convention";
@@ -29,7 +28,7 @@ class ConventionCollective extends React.Component {
);
}
const { pageUrl, ogImage, convention } = this.props;
const { url, shortTitle, title, date_publi } = convention;
const { shortTitle, title } = convention;
return (
<Layout>
<Metas
@@ -41,8 +40,6 @@ class ConventionCollective extends React.Component {
<Answer
title={shortTitle}
emptyMessage="Cette convention collective n'a pas été trouvée"
date={format(parseISO(date_publi), "dd/MM/yyyy")}
source={{ name: "Légifrance", url }}
wide
>
<Convention convention={convention} />
Original file line number Diff line number Diff line change
@@ -1,68 +1,66 @@
import React, { useState, useCallback } from "react";
import { CardList, Tile, theme } from "@socialgouv/react-ui";
import React from "react";
import { Accordion, CardList, Tile, theme } from "@socialgouv/react-ui";
import styled from "styled-components";

import { Title } from "./index";
import { blocs } from "./blocs.data";

function getBlocLabel(id) {
return blocs[id];
}
import { blocs as blocsLabels } from "./blocs.data";

function getArticleUrl({ id, containerId }) {
return `https://beta.legifrance.gouv.fr/conv_coll/id/${id}/?idConteneur=${containerId}`;
}

function Articles({ blocs, containerId }) {
const options = [...new Set(blocs.map(({ bloc }) => bloc))];
const [theme, setTheme] = useState();
const bloc = blocs.find(({ bloc }) => bloc === theme);

const onChangeTheme = useCallback(event => {
setTheme(event.target.value);
}, []);
const articlesByTheme = blocs.map(({ bloc, articles }) => ({
id: `bloc-${bloc}`,
title: <AccordionHeader>{blocsLabels[bloc]}</AccordionHeader>,
body: (
<CardList title="" columns={3}>
{articles.map(({ title, id, section }) => (
<Tile
key={id}
wide
target="_blank"
rel="nofollow noopener"
href={getArticleUrl({ id, containerId })}
title={`Article ${title}`}
subtitle={section}
/>
))}
</CardList>
)
}));

return (
<>
<Title>Articles par themes</Title>
<React.Fragment>
<Title>Domaines traités par la convention collective</Title>
<Label htmlFor="article-bloc">
Sélectionnez un thème parmi ceux traités dans la convention collective
pour consulter les articles qui y sont rattachés&nbsp;:
Recherchez, lorsqu&apos;elles existent, les dispositions
conventionnelles dans&nbsp;:
<br />
<br />
<li>
les 13 domaines où la loi reconnaît la primauté à la convention
collective de branche ;
</li>
<li>
les 4 domaines où la branche elle-même peut reconnaitre sa primauté,
sauf si l&apos;accord d&apos;entreprise a des garanties au moins
équivalentes (représentées avec une * ci-dessous).
</li>
</Label>
{/* eslint-disable-next-line jsx-a11y/no-onchange */}
<select id="article-bloc" onChange={onChangeTheme} defaultValue="none">
<option disabled value="none">
...
</option>
{options.map(value => (
<option key={value} value={value}>
{getBlocLabel(value)}
</option>
))}
</select>
{bloc && (
<CardList title="" columns={3}>
{bloc.articles.map(({ title, id, section }) => (
<Tile
key={id}
wide
target="_blank"
rel="nofollow noopener"
href={getArticleUrl({ id, containerId })}
title={`Article ${title}`}
subtitle={section}
/>
))}
</CardList>
)}
</>
<Accordion items={articlesByTheme} />
</React.Fragment>
);
}

export { Articles };

const { spacings } = theme;

const AccordionHeader = styled.strong`
margin: ${spacings.base} 0;
`;

const Label = styled.label`
display: inline-block;
margin-bottom: ${spacings.medium};
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import React from "react";
import styled from "styled-components";
import Link from "next/link";
import { Accordion, Button, theme } from "@socialgouv/react-ui";
import { Accordion, theme, Alert } from "@socialgouv/react-ui";
import { SOURCES, getRouteBySource } from "@cdt/sources";
import { slugify } from "@cdt/data/slugify";

import { Title, Heading } from "./index";
import { Title } from "./index";
import Html from "../../common/Html";
import { jsxJoin } from "../../lib/jsxJoin";

function getContributionUrl({ slug }) {
return `/${getRouteBySource(SOURCES.CONTRIBUTIONS)}/${slug}`;
}

function Contributions({ contributions }) {
// group questions by theme
const contributionsByTheme = contributions.reduce((state, answer) => {
if (!state[answer.theme]) {
state[answer.theme] = [answer];
@@ -22,16 +24,18 @@ function Contributions({ contributions }) {
return state;
}, {});

// show themes contents in Accordions
const themes = Object.keys(contributionsByTheme).map(theme => ({
id: theme,
title: <AccordionHeader>{theme}</AccordionHeader>,
body: <Accordion items={accordionize(contributionsByTheme[theme])} />
}));

return (
<>
<React.Fragment>
<Title>Questions fréquentes sur cette convention collective</Title>
{Object.entries(contributionsByTheme).map(([theme, items]) => (
<div key={theme}>
<Heading>{theme}</Heading>
<Accordion items={accordionize(items)} />
</div>
))}
</>
<Accordion items={themes} />
</React.Fragment>
);
}

@@ -45,15 +49,17 @@ function accordionize(items) {

function AccordionContent({ answer, slug, references }) {
return (
<>
<React.Fragment>
<Alert>
Pour savoir si la mesure prévue par la convention collective
s&apos;applique à votre situation, reportez-vous{" "}
<Link href={getContributionUrl(slug)} passHref>
<a>à la réponse complète à cette question</a>
</Link>
</Alert>
<Html>{answer}</Html>
{references && <AnswerReferences articles={references} />}
<Link href={getContributionUrl({ slug })} passHref>
<Button varaint="secondary" as="a">
Voir la fiche complète
</Button>
</Link>
</>
</React.Fragment>
);
}

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,53 +1,50 @@
import React from "react";
import PropTypes from "prop-types";
import Link from "next/link";
import styled from "styled-components";
import { format, parseISO } from "date-fns";
import { Accordion, Table } from "@socialgouv/react-ui";
import { formatIdcc } from "@cdt/data/lib";

const Info = ({ convention: { num, title, date_publi, url, nbTextes } }) => (
<Accordion
items={[
{
title: "Plus d’informations sur cette convention collective.",
body: Details({ num, title, date_publi, url, nbTextes })
}
]}
/>
const Detail = ({ label, children }) => (
<StyledDetail>
<DetailLabel>{label} :</DetailLabel>
{children}
</StyledDetail>
);

function Details({ num, title, date_publi, url, nbTextes }) {
return (
<>
<Table>
<tbody>
<tr>
<th>Nom complet</th>
<td>{title}</td>
</tr>
<tr>
<th>IDCC</th>
<td>{formatIdcc(num)}</td>
</tr>
{date_publi && (
<tr>
<th>Date d’entrée en vigueur</th>
<td>{format(parseISO(date_publi), "dd/MM/yyyy")}</td>
</tr>
)}
<tr>
<th>Nombre de textes</th>
<td>{nbTextes}</td>
</tr>
</tbody>
</Table>
<p>
<a target="_blank" rel="noopener noreferrer nofollow" href={url}>
Voir la convention sur Legifrance
const Info = ({ convention: { num, title, date_publi, url } }) => (
<React.Fragment>
<Detail label="Nom complet">{title}</Detail>
<Detail label="IDCC">{formatIdcc(num)}</Detail>
{date_publi && (
<Detail label="Date d’entrée en vigueur">
{format(parseISO(date_publi), "dd/MM/yyyy")}
</Detail>
)}
<p>
<a target="_blank" rel="noopener noreferrer nofollow" href={url}>
Voir la convention sur Légifrance
</a>
</p>
<p>
<Link href="/glossaire/convention-collective" passHref>
<a target="_blank" rel="noopener noreferrer nofollow">
Qu’est-ce qu’une convention collective&nbsp;?
</a>
</p>
</>
);
}
</Link>
</p>
</React.Fragment>
);

const StyledDetail = styled.div`
line-height: 3em;
`;

const DetailLabel = styled.div`
display: inline-block;
font-weight: bold;
margin-right: 10px;
`;

Info.propTypes = {
convention: PropTypes.shape({
Loading

0 comments on commit 26ae21e

Please sign in to comment.