feat add skill from administration #644

i18n/en.js

@@ -14,6 +14,7 @@ export default {
         roleRequired: 'Add at least 1 role',
         topicRequired: 'Add at least 1 topic',
         duplicatedTag: "This tag already exists, you can't create it",
+        categoryRequired: 'A category is required',
     },
     nav: {
         mySkills: 'My skills',
@@ -38,7 +39,9 @@ export default {
         category: 'Category',
         categories: 'Categories',
         categoriesList: 'Categories list',
+        selectCategoryPlaceholder: 'Select a category',
         approve: 'Approve this skill',
+        createSkill: 'Create a new skill',
         topics: 'Associated topics',
         addTags: 'Add tags',
         placeHolderDescription: 'Set the description',

i18n/fr.js

@@ -14,6 +14,7 @@ export default {
         roleRequired: 'Ajoutez au minimum 1 rôle',
         topicRequired: 'Ajoutez au minimum 1 sujet',
         duplicatedTag: 'Ce tag existe déjà, vous ne pouvez pas le créer',
+        categoryRequired: 'Une catégorie est obligatoire',
     },
     admin: {
         deleteSkill: 'Supprimer de Skillz',
@@ -30,11 +31,13 @@ export default {
         category: 'Catégorie',
         categories: 'Catégories',
         categoriesList: 'Liste des catégories',
+        selectCategoryPlaceholder: 'Sélectionner une catégorie',
         topics: 'Sujets associés',
         addTags: 'Ajouter des tags',
         placeHolderDescription: 'Modifier la description',
         save: 'Sauvegarder',
         approve: 'Approuver ce skill',
+        createSkill: 'Créer une nouvelle compétence',
         description: 'Description',
         name: 'Nom',
         notification: {

src/components/atoms/CustomSelect/CustomSelect.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useDarkMode } from '../../../providers/DarkModeProvider'
 import styles from './CustomSelect.module.css'
+import { RiErrorWarningFill } from 'react-icons/ri'
 
 type CustomSelectProps = {
     choices: any[]
@@ -9,19 +10,27 @@ type CustomSelectProps = {
     selectedChoice?: any
     placeholder: string
     readOnly?: boolean
+    error?: boolean
+    errorMessage?: string
     onChange: (choice: any) => void
 }
 
 export const customSelectClasses = {
     base: 'w-auto z-10 h-12',
     placeholder: {
         parent: {
-            base: 'bg-light-light w-full p-3 appearance-none rounded-lg border border-solid border-light-dark max-h-16 text-ellipsis overflow-hidden',
+            base: 'bg-light-light w-full p-3 appearance-none rounded-lg border border-solid max-h-16 text-ellipsis overflow-hidden',
             dark: 'dark:bg-dark-light dark:border-dark-light dark:border-dark-graybutton',
             hover: 'hover:bg-light-dark hover:border-light-graybutton hover:dark:bg-dark-radargrid',
             readonly: 'cursor-pointer bg-rightDropdown',
+            error: 'border-light-red',
+            noError: 'border-light-dark',
         },
     },
+    error: {
+        parent: 'flex flex-row items-center mb-1',
+        base: 'text-light-red pl-1 text-sm',
+    },
     dropdown: {
         base: 'flex flex-row justify-center w-full duration-500',
         opened: 'h-0',
@@ -45,6 +54,8 @@ const CustomSelect = ({
     selectedChoice,
     placeholder,
     readOnly = false,
+    error = false,
+    errorMessage,
     onChange,
 }: CustomSelectProps) => {
     const [opened, setOpened] = useState(false)
@@ -63,11 +74,23 @@ const CustomSelect = ({
 
     return (
         <div className={`${customSelectClasses.base}`}>
+            {error && (
+                <div className={`${customSelectClasses.error.parent}`}>
+                    <RiErrorWarningFill color="#bf1d67" />
+                    <p className={`${customSelectClasses.error.base}`}>
+                        {errorMessage}
+                    </p>
+                </div>
+            )}
             <div
                 className={`${customSelectClasses.placeholder.parent.base} ${
                     customSelectClasses.placeholder.parent.dark
                 } ${customSelectClasses.placeholder.parent.hover} ${
                     !readOnly && customSelectClasses.placeholder.parent.readonly
+                } ${
+                    error
+                        ? customSelectClasses.placeholder.parent.error
+                        : customSelectClasses.placeholder.parent.noError
                 } ${readOnly ? '' : darkMode ? styles.selectDark : styles.selectLight}`}
                 onClick={() => setOpened(!opened)}
             >