feat(frontend): add prequalified requests (#277)

SocialGouv · Feb 3, 2021 · 4fa383b · 4fa383b
1 parent 1a61f15
commit 4fa383b
Show file tree

Hide file tree

Showing 12 changed files with 249 additions and 45 deletions.
diff --git a/targets/frontend/src/components/forms/Fieldset.js b/targets/frontend/src/components/forms/Fieldset.js
@@ -0,0 +1,30 @@
+/** @jsxImportSource theme-ui */
+
+import PropTypes from "prop-types";
+
+export const Fieldset = ({ children, title, ...props }) => (
+  <fieldset
+    sx={{
+      backgroundColor: "#fdfdfd",
+      bordeColor: "text",
+      border: "1px solid",
+      borderRadius: "small",
+      p: "xsmall",
+    }}
+    {...props}
+  >
+    <legend
+      sx={{
+        fontWeight: "bold",
+      }}
+    >
+      {title}
+    </legend>
+    {children}
+  </fieldset>
+);
+
+Fieldset.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string,
+};
diff --git a/targets/frontend/src/components/forms/Lister/List.js b/targets/frontend/src/components/forms/Lister/List.js
@@ -13,12 +13,11 @@ export const List = ({
   return (
     <ul
       sx={{
-        backgroundColor: "#f9f9f9",
         borderRadius: "small",
         listStyleType: "none",
         m: "0",
-        mt: "xxsmall",
-        p: "0.4rem",
+        mb: "xxsmall",
+        p: 0,
       }}
     >
       {entries.map((entry) => (

diff --git a/targets/frontend/src/components/forms/Lister/index.js b/targets/frontend/src/components/forms/Lister/index.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import PropTypes from "prop-types";
 import { useRef } from "react";
 import { Controller } from "react-hook-form";
@@ -11,7 +13,10 @@ const Lister = ({ defaultValue = [], disabled, ...props }) => {
     <Controller
       {...props}
       defaultValue={defaultValue}
-      render={(props) => <RootLister disabled={disabled} {...props} />}
+      // eslint-disable-next-line no-unused-vars
+      render={({ ref, ...props }) => (
+        <RootLister disabled={disabled} {...props} />
+      )}
     />
   );
 };
@@ -49,6 +54,15 @@ function RootLister({ disabled, value: entries, onChange, name }) {
 
   return (
     <>
+      {entries.length > 0 && (
+        <List
+          entries={entries}
+          disabled={disabled}
+          useDragHandle={true}
+          lockAxis="y"
+          onDeleteEntry={onDeleteEntry}
+        />
+      )}
       {!disabled && (
         <Flex>
           <Input
@@ -63,22 +77,12 @@ function RootLister({ disabled, value: entries, onChange, name }) {
             onClick={onAddEntry}
             variant="secondary"
             type="button"
-            sx={{ flex: "1 0 auto" }}
-            ml="xxsmall"
+            sx={{ flex: "1 0 auto", ml: "xxsmall" }}
           >
             Ajouter
           </Button>
         </Flex>
       )}
-      {entries.length > 0 && (
-        <List
-          entries={entries}
-          disabled={disabled}
-          useDragHandle={true}
-          lockAxis="y"
-          onDeleteEntry={onDeleteEntry}
-        />
-      )}
     </>
   );
 }

diff --git a/targets/frontend/src/components/glossary/TermForm.js b/targets/frontend/src/components/glossary/TermForm.js
@@ -1,3 +1,5 @@
+/** @jsxImportSource theme-ui */
+
 import slugify from "@socialgouv/cdtn-slugify";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -6,6 +8,7 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { Button } from "src/components/button";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
+import { Fieldset } from "src/components/forms/Fieldset";
 import { Lister } from "src/components/forms/Lister";
 import { MarkdownLink } from "src/components/MarkdownLink";
 import { Box, Field, Flex, Label, NavLink, Text, Textarea } from "theme-ui";
@@ -109,33 +112,30 @@ export const TermForm = ({ term = {} }) => {
             mb: "small",
           }}
         >
-          <Box sx={{ flex: "1 1 auto" }}>
-            <Label htmlFor={"variants"}>Variantes / Synonymes</Label>
+          <Fieldset title="Variantes / Synonymes" sx={{ flex: "1 1 auto" }}>
             <Lister
               control={control}
               name="variants"
               id="variants"
               defaultValue={term.variants}
             />
-          </Box>
-          <Box sx={{ flex: "1 1 auto" }}>
-            <Label htmlFor={"abbreviations"}>Abréviations</Label>
+          </Fieldset>
+          <Fieldset title="Abréviations" sx={{ flex: "1 1 auto" }}>
             <Lister
               control={control}
               name="abbreviations"
               id="abbreviations"
               defaultValue={term.abbreviations}
             />
-          </Box>
-          <Box sx={{ flex: "1 1 auto" }}>
-            <Label htmlFor={"references"}>Références</Label>
+          </Fieldset>
+          <Fieldset title="Références" sx={{ flex: "1 1 auto" }}>
             <Lister
               control={control}
               name="references"
               id="references"
               defaultValue={term.references}
             />
-          </Box>
+          </Fieldset>
         </Flex>
 
         <Flex sx={{ alignItems: "center", mt: "medium" }}>

diff --git a/targets/frontend/src/components/glossary/TermList.js b/targets/frontend/src/components/glossary/TermList.js
@@ -1,9 +1,10 @@
 import Link from "next/link";
+import PropTypes from "prop-types";
 import React from "react";
 import { Li, List } from "src/components/list";
 import { Box, Flex, NavLink, Text } from "theme-ui";
 
-export const TermList = React.memo(function _TermList({ termsByLetters = [] }) {
+const TermList = ({ termsByLetters = [] }) => {
   return (
     <Flex sx={{ flexWrap: "wrap", gap: "xsmall", justifyContent: "stretch" }}>
       {termsByLetters.map(
@@ -45,7 +46,15 @@ export const TermList = React.memo(function _TermList({ termsByLetters = [] }) {
       )}
     </Flex>
   );
-});
+};
+
+TermList.PropTypes = {
+  termsByLetters: PropTypes.object,
+};
+
+const MemoisedTermList = React.memo(TermList);
+
+export { MemoisedTermList as TermList };
 
 const linkStyles = {
   ":hover": {

diff --git a/targets/frontend/src/components/highlights/Form.js b/targets/frontend/src/components/highlights/Form.js
@@ -1,18 +1,20 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import PropTypes from "prop-types";
 import React from "react";
 import { useForm } from "react-hook-form";
 import { IoMdCheckmark } from "react-icons/io";
 import { Button } from "src/components/button";
 import { ContentPicker } from "src/components/forms/ContentPicker/index";
 import { FormErrorMessage } from "src/components/forms/ErrorMessage";
+import { Fieldset } from "src/components/forms/Fieldset";
 import { Box, Field, Flex, NavLink } from "theme-ui";
 
-const HighlightsForm = React.memo(function _HighlightsForm({
+const HighlightsForm = ({
   content = { contentRelations: [] },
   onSubmit,
-  loading,
-}) {
+  loading = false,
+}) => {
   const router = useRouter();
   const {
     control,
@@ -53,18 +55,19 @@ const HighlightsForm = React.memo(function _HighlightsForm({
           <FormErrorMessage errors={errors} fieldName="slug" />
         </Box>
 
-        <h3>Contenus: </h3>
-        <ContentPicker
-          control={control}
-          name="contents"
-          id="contents"
-          defaultValue={content.contentRelations
-            .sort(({ position: a }, { position: b }) => a - b)
-            .map(({ relationId, content }) => ({
-              relationId,
-              ...content,
-            }))}
-        />
+        <Fieldset title="Contenus à mettre en avant">
+          <ContentPicker
+            control={control}
+            name="contents"
+            id="contents"
+            defaultValue={content.contentRelations
+              .sort(({ position: a }, { position: b }) => a - b)
+              .map(({ relationId, content }) => ({
+                relationId,
+                ...content,
+              }))}
+          />
+        </Fieldset>
 
         <Flex sx={{ alignItems: "center", mt: "medium" }}>
           <Button variant="secondary" disabled={loading || !isDirty}>
@@ -94,6 +97,14 @@ const HighlightsForm = React.memo(function _HighlightsForm({
       </>
     </form>
   );
-});
+};
+
+HighlightsForm.propTypes = {
+  content: PropTypes.object,
+  loading: PropTypes.bool,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+const MemoisedHighlightsForm = React.memo(HighlightsForm);
 
-export { HighlightsForm };
+export { MemoisedHighlightsForm as HighlightsForm };
diff --git a/targets/frontend/src/components/layout/Nav.js b/targets/frontend/src/components/layout/Nav.js
@@ -106,6 +106,11 @@ export function Nav() {
               Highlights
             </ActiveLink>
           </Li>
+          <Li>
+            <ActiveLink href="/contenus?source=prequalified" passHref>
+              Requetes pré-qualifiées
+            </ActiveLink>
+          </Li>
           <Li>
             <ActiveLink href="/glossary" passHref>
               Glossaire
@@ -133,7 +138,11 @@ export function Nav() {
 }
 
 // used to make sure two links are not highlighted at the same time
-const subRouteSources = [SOURCES.EDITORIAL_CONTENT, SOURCES.HIGHLIGHTS];
+const subRouteSources = [
+  SOURCES.EDITORIAL_CONTENT,
+  SOURCES.HIGHLIGHTS,
+  SOURCES.PREQUALIFIED,
+];
 
 function ActiveLink({ children, href }) {
   const router = useRouter();