Merge pull request #99 from isd-sgcu/phor-fe/fdr-73-bannlist

Baan-select page

src/app/rpkm/baan/baan-select/page.tsx

@@ -1,7 +1,185 @@
-import React from 'react';
+'use client';
 
-const page = () => {
-  return <div>page</div>;
+import { useRef, useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+import Image from 'next/image';
+import Link from 'next/link';
+import home from '@public/baan-select/home.svg';
+import search from '@public/baan-select/search.svg';
+import '@/components/rpkm/baan/baan-select/style.css';
+import { useBaan } from '@/context/BaanContext';
+import RpkmLogo from '@public/Rpkm67Logo.svg';
+import BaanCard from '@/components/rpkm/BaanCard';
+import BaanSelect from '@/components/rpkm/Baan/BaanSelect';
+import { BaanInfoProps, baanInfos } from '@/components/rpkm/Baan/baanInfo';
+
+interface SizeFilterProps {
+  size: 'S' | 'M' | 'L' | 'XL' | 'XXL';
+  count: number;
+}
+
+const calculateSizeFilter = (baan: BaanInfoProps[]): SizeFilterProps[] => {
+  const sizeCounts: { [key: string]: number } = {};
+  baan.forEach((house) => {
+    sizeCounts[house.size] = (sizeCounts[house.size] || 0) + 1;
+  });
+
+  return Object.entries(sizeCounts).map(([size, count]) => ({
+    size: size as 'S' | 'M' | 'L' | 'XL' | 'XXL',
+    count,
+  }));
+};
+
+const sizeFilter = calculateSizeFilter(baanInfos);
+
+const shuffleArray = (baan: BaanInfoProps[]): BaanInfoProps[] => {
+  return [...baan].sort(() => Math.random() - 0.5);
 };
 
-export default page;
+export default function BaanSelectPage() {
+  const [selectedHouseSize, setSelectedHouseSize] = useState<string | null>(
+    null
+  );
+  const [shake, setShake] = useState(false);
+  const [shuffledBaan, setShuffledBaan] = useState<BaanInfoProps[]>([]);
+  const [searchBaan, setSearchBaan] = useState<string>('');
+  const baanListRef = useRef<HTMLDivElement | null>(null);
+  const { baanCounts } = useBaan();
+
+  const handleSizeChange = (size: string) => {
+    setSelectedHouseSize((prevSize) => (prevSize === size ? null : size));
+  };
+
+  const scrollToBaanList = () => {
+    baanListRef.current
+      ? baanListRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        })
+      : console.error('Element not found.');
+    setShake(true);
+  };
+
+  useEffect(() => {
+    if (!shake) return;
+    const handleDocumentClick = () => {
+      setShake(false);
+    };
+    document.addEventListener('click', handleDocumentClick);
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  }, [shake]);
+
+  useEffect(() => {
+    setShuffledBaan(shuffleArray(baanInfos));
+  }, []);
+
+  const filteredBaan = shuffledBaan.filter(
+    (house) =>
+      house.name.th.toLowerCase().includes(searchBaan.toLowerCase()) ||
+      house.name.en.toLowerCase().includes(searchBaan.toLowerCase())
+  );
+
+  return (
+    <div className="flex justify-center items-center flex-col">
+      <div className="mt-[15%]">
+        <Image
+          src={RpkmLogo}
+          alt="rpkm67Logo"
+        />
+      </div>
+      <div className="my-3">
+        <BaanSelect
+          mode={'edit'}
+          onClick={scrollToBaanList}
+        />
+      </div>
+      <div
+        ref={baanListRef}
+        className="relative flex justify-center items-center flex-col w-screen"
+      >
+        <div className="absolute inset-0 bg-rpkm-gray opacity-90"></div>
+        <div className="relative flex flex-col items-center mt-4 w-full">
+          <div className="flex justify-center items-center mb-1 gap-[4%] w-full">
+            <Link href="/rpkm/baan/home">
+              <Image
+                src={home}
+                alt="home"
+                className="w-auto h-7 m-2 text-black drop-shadow"
+              />
+            </Link>
+            <div className="relative flex justify-center items-center w-[65%]">
+              <input
+                type="text"
+                placeholder="ค้นหาบ้าน"
+                value={searchBaan}
+                onChange={(e) => setSearchBaan(e.target.value)}
+                className="w-full h-8 pl-4 rounded-full bg-project-yellow placeholder-rpkm-blue"
+              />
+              <Image
+                src={search}
+                alt="search"
+                className="absolute right-4"
+              />
+            </div>
+          </div>
+          <label className="text-white font-semibold mb-2">ขนาดบ้าน</label>
+          <div className="flex justify-center items-center flex-wrap mt-1 gap-[6%] w-72">
+            {sizeFilter.map((house, index) => (
+              <div key={index}>
+                <input
+                  type="checkbox"
+                  name="houseSize"
+                  className="hidden"
+                  id={house.size}
+                  checked={selectedHouseSize === house.size}
+                  onChange={() => handleSizeChange(house.size)}
+                />
+                <label
+                  htmlFor={house.size}
+                  className={cn(
+                    `flex justify-center items-center text-white bg-rpkm-green 
+                                                                        w-auto h-9 px-4 rounded-lg font-semibold drop-shadow-lg mb-5
+                                                                        transition-all duration-300 active:scale-90`,
+                    {
+                      'bg-white text-rpkm-blue':
+                        selectedHouseSize === house.size,
+                    }
+                  )}
+                >
+                  {house.size} ({house.count})
+                </label>
+              </div>
+            ))}
+          </div>
+          <div className="flex justify-center flex-wrap w-full h-80 mb-6 mr-[4%] pl-[3%] gap-4 overflow-y-scroll">
+            {filteredBaan
+              .filter(
+                (house) =>
+                  selectedHouseSize === null || house.size === selectedHouseSize
+              )
+              .map((house, index) => {
+                let currentPeople;
+                if (baanCounts) {
+                  currentPeople =
+                    baanCounts.find((b) => b.baanId === house.name.en)?.count ||
+                    0;
+                } else {
+                  currentPeople = 0;
+                }
+                return (
+                  <BaanCard
+                    key={index}
+                    isShake={shake}
+                    currentPeople={currentPeople}
+                    {...house}
+                  />
+                );
+              })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/rpkm/Baan/BaanSelect.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import React, { useEffect, useState } from 'react';
 import BaanEmpty from '@/components/rpkm/Baan/BaanEmpty';
 import Spinner from '@/components/firstdate/Spinner';
@@ -12,9 +13,10 @@ import toast from 'react-hot-toast';
 
 interface BaanSelectProps {
   mode: 'select' | 'edit';
+  onClick?: () => void;
 }
 
-const BaanSelect: React.FC<BaanSelectProps> = ({ mode }) => {
+const BaanSelect: React.FC<BaanSelectProps> = ({ mode, onClick }) => {
   const { selectedBaan, isLoading } = useBaan();
   const { user, resetContext } = useAuth();
   const [isLeader, setIsLeader] = useState<boolean>(false);
@@ -55,26 +57,32 @@ const BaanSelect: React.FC<BaanSelectProps> = ({ mode }) => {
   const allSelections = Array.from({ length: 5 }, (_, i) => i + 1);
 
   return (
-    <div className="flex flex-col items-center bg-zinc-800 w-80 h-auto p-5 space-y-10">
-      <h1 className="text-xl text-amber-100 font-bold">บ้านที่เลือกไว้</h1>
-      <div className="flex items-center justify-center flex-col space-y-8">
-        {(!selectedBaan || selectedBaan.length === 0) && mode == 'select' ? (
-          <BaanEmpty />
-        ) : (
-          <BaanCardsSection
-            allSelections={allSelections}
-            selectedBaan={selectedBaan}
-            isConfirmed={isConfirmed}
+    <div className="relative flex flex-col items-center w-80 h-auto p-5">
+      <div className="absolute inset-0 bg-rpkm-gray opacity-90 z-0"></div>
+      <div className="relative z-10">
+        <h1 className="text-xl text-center text-amber-100 font-bold">
+          บ้านที่เลือกไว้
+        </h1>
+        <div className="flex items-center justify-center flex-col mt-10 space-y-8">
+          {(!selectedBaan || selectedBaan.length === 0) && mode == 'select' ? (
+            <BaanEmpty />
+          ) : (
+            <BaanCardsSection
+              allSelections={allSelections}
+              selectedBaan={selectedBaan}
+              isConfirmed={isConfirmed}
+              mode={mode}
+              onClick={onClick}
+            />
+          )}
+          <BaanButtonsSection
             mode={mode}
+            isLeader={isLeader}
+            isConfirmed={isConfirmed}
+            selectedBaan={selectedBaan}
+            onConfirm={onConfirm}
           />
-        )}
-        <BaanButtonsSection
-          mode={mode}
-          isLeader={isLeader}
-          isConfirmed={isConfirmed}
-          selectedBaan={selectedBaan}
-          onConfirm={onConfirm}
-        />
+        </div>
       </div>
     </div>
   );

src/components/rpkm/Baan/Button/BaanButton.tsx

@@ -1,17 +1,27 @@
 import React from 'react';
+import { cn } from '@/lib/utils';
 
 interface ButtonProps {
   content: string;
   onClick: () => void;
+  disabled?: boolean;
 }
 
-const Button: React.FC<ButtonProps> = ({ content, onClick }) => {
+const Button: React.FC<ButtonProps> = ({
+  content,
+  onClick,
+  disabled = false,
+}) => {
   return (
     <button
       onClick={onClick}
-      className={
-        'flex items-center justify-center w-48 h-10 inv-rad inv-rad-2 border-8 border-rpkm-cream'
-      }
+      className={cn(
+        'flex items-center justify-center w-48 h-10 inv-rad inv-rad-2 border-8 border-rpkm-cream',
+        {
+          'opacity-60': disabled,
+        }
+      )}
+      disabled={disabled}
     >
       <div
         className={

src/components/rpkm/Baan/Card/BaanCard.tsx

@@ -10,6 +10,7 @@ interface BaanCardProps {
   isEmpty?: boolean;
   mode: 'select' | 'edit';
   onDelete?: () => void;
+  onClick?: () => void;
   isConfirmed?: boolean;
 }
 
@@ -20,11 +21,13 @@ const BaanCard: React.FC<BaanCardProps> = ({
   isEmpty = false,
   mode,
   onDelete,
+  onClick,
   isConfirmed = false,
 }) => {
   return (
     <div className="flex items-center justify-center flex-col space-y-2">
       <div
+        onClick={isEmpty ? onClick : () => {}}
         className={cn(
           'relative flex flex-col justify-center items-center px-1 bg-white w-20 h-28',
           isEmpty && 'border-2 border-dashed border-rpkm-green bg-opacity-0'

src/components/rpkm/Baan/Section/BaanButtonsSection.tsx

@@ -69,6 +69,7 @@ const BaanButtonsSection: React.FC<BaanButtonsSectionProps> = ({
           <Button
             content="ยืนยันการเลือกบ้าน"
             onClick={handleConfirm}
+            disabled={!!(selectedBaan && selectedBaan.length < 5)}
           />
           <Modal
             variant="red"

src/components/rpkm/Baan/Section/BaanCardsSection.tsx

@@ -8,13 +8,15 @@ interface BaanCardsSectionProps {
   selectedBaan: BaanSelection[] | null;
   mode: 'select' | 'edit';
   isConfirmed: boolean;
+  onClick?: () => void;
 }
 
 const BaanCardsSection: React.FC<BaanCardsSectionProps> = ({
   allSelections,
   selectedBaan,
   mode,
   isConfirmed,
+  onClick,
 }) => {
   const { removeBaanSelection } = useBaan();
 
@@ -31,6 +33,7 @@ const BaanCardsSection: React.FC<BaanCardsSectionProps> = ({
           mode={mode}
           isConfirmed={isConfirmed}
           onDelete={() => baan && removeBaanSelection(baan.baanId)}
+          onClick={onClick}
         />
       );
     });