add color picker

Mzem · Oct 28, 2024 · 6a44c2e · 6a44c2e
1 parent e42ab3a
commit 6a44c2e
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 22 deletions.
diff --git a/api/services/car-posts.service.ts b/api/services/car-posts.service.ts
@@ -77,9 +77,9 @@ export interface GetCarPostsFilters {
   make?: string
   model?: string
   regionIds?: string[]
-  fuel?: Fuel
-  color?: Color
-  interiorType?: InteriorType
+  fuel?: Fuel[]
+  color?: Color[]
+  interiorType?: InteriorType[]
   maxPrice?: number
   minPrice?: number
   maxYear?: number
@@ -108,9 +108,18 @@ export function generateCarPostsQueryParams(
     filters.regionIds.forEach((regionId) => {
       qp += `&regionIds=${regionId}`
     })
-  if (filters.fuel) qp += `&fuel=${filters.fuel}`
-  if (filters.color) qp += `&color=${filters.color}`
-  if (filters.interiorType) qp += `&interiorType=${filters.interiorType}`
+  if (filters.fuel)
+    filters.fuel.forEach((fuel) => {
+      qp += `&fuel=${fuel}`
+    })
+  if (filters.color)
+    filters.color.forEach((color) => {
+      qp += `&color=${color}`
+    })
+  if (filters.interiorType)
+    filters.interiorType.forEach((interiorType) => {
+      qp += `&interiorType=${interiorType}`
+    })
   if (filters.maxPrice) qp += `&maxPrice=${filters.maxPrice}`
   if (filters.minPrice) qp += `&minPrice=${filters.minPrice}`
   if (filters.maxYear) qp += `&maxYear=${filters.maxYear}`

diff --git a/app/_components/ColorSelector.tsx b/app/_components/ColorSelector.tsx
@@ -0,0 +1,73 @@
+import { Color } from '../types'
+
+const colorHexMap: Record<Color, string> = {
+  [Color.BLACK]: '#000000',
+  [Color.WHITE]: '#FFFFFF',
+  [Color.RED]: '#d13030',
+  [Color.GREEN]: '#077007',
+  [Color.BLUE]: '#1b1bbf',
+  [Color.YELLOW]: '#d9d91c',
+  [Color.ORANGE]: '#FFA500',
+  [Color.PURPLE]: '#800080',
+  [Color.PINK]: '#f0a8c9',
+  [Color.BROWN]: '#965824',
+  [Color.GREY]: '#9c9797'
+}
+
+export default function ColorSelector({
+  selectedColors,
+  setSelectedColors
+}: {
+  selectedColors: Color[]
+  setSelectedColors: (colors: Color[]) => void
+}) {
+  const toggleColorSelection = (color: Color) => {
+    if (selectedColors.includes(color)) {
+      // Remove color if it is already selected
+      setSelectedColors(selectedColors.filter((c) => c !== color))
+    } else {
+      // Add color if it is not selected
+      setSelectedColors([...selectedColors, color])
+    }
+  }
+
+  return (
+    <div className='mt-2 ml-3 flex space-x-[3px] items-center'>
+      <span className='text-xs lg:text-sm text-whiteBG'>Couleurs</span>
+      {Object.entries(colorHexMap).map(([colorKey, hex]) => (
+        <div
+          key={colorKey}
+          onClick={() => toggleColorSelection(colorKey as Color)}
+          style={{
+            backgroundColor: hex,
+            width: '16px',
+            height: '16px',
+            borderRadius: '10%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer',
+            position: 'relative'
+          }}
+        >
+          {selectedColors.includes(colorKey as Color) && (
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 24 24'
+              fill={`${
+                [Color.WHITE, Color.YELLOW, Color.PINK, Color.ORANGE].includes(
+                  colorKey as Color
+                )
+                  ? 'black'
+                  : 'white'
+              }`}
+              className='w-5 h-5 absolute'
+            >
+              <path d='M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4L9 16.2z' />
+            </svg>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/app/_components/Footer.tsx b/app/_components/Footer.tsx
@@ -1,10 +1,11 @@
 export default function Footer() {
   return (
     <div className='bg-blackopac'>
-      <footer className='flex flex-col justify-around items-center mt-2'>
-        <p className='text-l text-titan'>Site en construction...</p>
-        <p className='text-l text-white'>autocentral.tn 2024</p>
-        <div className='flex flex-row space-x-2 mb-4'>
+      <footer className='flex flex-col justify-around items-center mt-1 lg:mt-2'>
+        <p className='text-sm lg:text-base text-white'>
+          2024 - Site en construction..
+        </p>
+        <div className='flex flex-row space-x-2 mb-2 lg:mb-4'>
           <a
             href='https://www.instagram.com/tuniautos'
             target='_blank'

diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx
@@ -44,7 +44,7 @@ export default function Header() {
     <div className='bg-whiteBG'>
       {/* Header with fixed position */}
       <div className='w-full fixed bg-blackopac z-10'>
-        <header className='flex flex-row w-[90%] lg:w-4/6 items-center justify-between mx-auto h-10 lg:h-16'>
+        <header className='flex flex-row w-[90%] lg:w-4/6 items-center justify-between mx-auto h-10 lg:h-12'>
           {/* Mobile Logo on the Right and Desktop Logo */}
           <button
             onClick={() => {
@@ -179,7 +179,7 @@ export default function Header() {
       )}
 
       {/* Bottom Spacer to avoid content overlap */}
-      <div className={`mt-10 lg:mt-16`}></div>
+      <div className={`mt-10 lg:mt-12`}></div>
     </div>
   )
 }
diff --git a/app/_components/car-posts/CarPosts.tsx b/app/_components/car-posts/CarPosts.tsx
@@ -10,6 +10,7 @@ import {
 import { regionsSelect } from '../../types'
 import { reactSelectFilterStyle } from '../customStyles'
 import CarPostModal from './CarPostModal'
+import ColorSelector from '../ColorSelector'
 
 const API_PAGE_SIZE = 20
 
@@ -32,7 +33,7 @@ export default function CarPostsFeed({
   const [model, setModel] = useState(initialFilters?.model)
   const [regions, setRegions] = useState<{ value: string; label: string }[]>([])
   const [fuel, setFuel] = useState(initialFilters?.fuel)
-  const [color, setColor] = useState(initialFilters?.color)
+  const [colors, setColors] = useState(initialFilters?.color || [])
   const [interiorType, setInteriorType] = useState(initialFilters?.interiorType)
   const [maxPrice, setMaxPrice] = useState(initialFilters?.maxPrice)
   const [minPrice, setMinPrice] = useState(initialFilters?.minPrice)
@@ -55,7 +56,7 @@ export default function CarPostsFeed({
   // Relative search bar
   const [showFilters, setShowFilters] = useState(false)
   const [showMoreFilters, setShowMoreFilters] = useState(
-    alarm || keyless || camera || leasing || exchange
+    alarm || keyless || camera || leasing || exchange || colors
   )
 
   const searchDivRef = useRef<HTMLDivElement | null>(null)
@@ -68,7 +69,7 @@ export default function CarPostsFeed({
       model,
       regionIds: regions.map((region) => region.value),
       fuel,
-      color,
+      color: colors,
       interiorType,
       maxPrice,
       minPrice,
@@ -277,6 +278,10 @@ export default function CarPostsFeed({
                   />
                   <span className='text-xs lg:text-sm'>Leasing</span>
                 </label>
+                <ColorSelector
+                  selectedColors={colors}
+                  setSelectedColors={setColors}
+                />
               </>
             )}
           </div>
@@ -376,12 +381,12 @@ export default function CarPostsFeed({
         {showSearchButton && (
           <button
             onClick={scrollToSearch}
-            className='fixed bottom-[1%] right-[3%] lg:bottom-[85%] lg:right-[15%] p-3 bg-vividred text-white rounded-full shadow-lg hover:bg-blue-700 transition'
+            className='fixed bottom-[1%] right-[3%] lg:bottom-[85%] lg:right-[15%] p-3 bg-vividred text-white rounded-full shadow-lg hover:bg-blackopac2 transition'
           >
             <img
               src='/search.svg'
               alt='Lancer la recherche'
-              className='h-4 lg:h-5 mx-auto'
+              className='h-5 lg:h-6 mx-auto'
             />
           </button>
         )}

diff --git a/app/helpers.ts b/app/helpers.ts
@@ -50,10 +50,13 @@ export function fromQueryParamsToGetCarPostsFilters(
       undefined
     )
   }
-  function getParamValueStringArray(key: string): string[] | undefined {
+  function getParamValueStringArray(key: string): string[] {
     return searchParamsRecord?.[key] && Array.isArray(searchParamsRecord[key])
       ? searchParamsRecord[key]
-      : searchParamsURL?.getAll(key) || undefined
+      : searchParamsURL?.getAll(key) ||
+          [getParamValueString(key)]
+            .filter((e) => e !== undefined)
+            .filter((e) => e)
   }
   function getParamValueBoolean(key: string): boolean {
     return (
@@ -66,9 +69,9 @@ export function fromQueryParamsToGetCarPostsFilters(
     make: getParamValueString('make'),
     model: getParamValueString('model'),
     regionIds: getParamValueStringArray('regionIds'),
-    fuel: getParamValueString('fuel') as Fuel,
-    color: getParamValueString('color') as Color,
-    interiorType: getParamValueString('interiorType') as InteriorType,
+    fuel: getParamValueStringArray('fuel') as Fuel[],
+    color: getParamValueStringArray('color') as Color[],
+    interiorType: getParamValueStringArray('interiorType') as InteriorType[],
     maxPrice: getParamValueNumber('maxPrice'),
     minPrice: getParamValueNumber('minPrice'),
     maxYear: getParamValueNumber('maxYear'),