Add list/feature

devlarabar · Dec 5, 2023 · 1aebeee · 1aebeee
1 parent a19a4f2
commit 1aebeee
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 20 deletions.
diff --git a/client/app/home/page.jsx b/client/app/home/page.jsx
@@ -17,9 +17,9 @@ export const sortingTypes = {
 const Home = () => {
     const auth = useAuthContext()
     const [dbClients, setDBClients] = useState(null)
-
     const [currentSort, setCurrentSort] = useState(null)
     const [currentFilter, setCurrentFilter] = useState([])
+    const [view, setView] = useState('card-view')
 
     useEffect(() => {
         fetchClients().then(data => {
@@ -75,12 +75,17 @@ const Home = () => {
         setCurrentFilter([])
     }
 
+    function handleView() {
+        //toggles view from card to list view
+        setView(view === 'card-view' ? 'list-view' : 'card-view');
+    }
+
     if (!auth?.checkAuth) return <Spinner />
     if (auth?.isAuthenticated === "unauthenticated") return redirect('/')
 
     return (
         <>
-            <div className="px-8 pb-4">
+            <div>
                 <ActionMenu
                     clients={dbClients || []}
                     handleSortAZ={handleSortAZ}
@@ -89,13 +94,14 @@ const Home = () => {
                     removeFilter={removeFilter}
                     currentSort={currentSort}
                     currentFilter={currentFilter}
+                    view = {handleView}
                 />
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-[2%] gap-y-4 justify-center">
+            <div className={view}>
                 {clients === null && <Spinner />}
                 {clients && clients.length > 0 && clients.map((client, index) => (
-                    <ClientCard client={client} key={index} />
+                    <ClientCard view={view} client={client} key={index} />
                 ))}
                 {clients && clients.length === 0 && <p>You have not added any clients!</p>}
             </div>

diff --git a/client/components/client/ClientCard.jsx b/client/components/client/ClientCard.jsx
@@ -1,29 +1,49 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import ClienCardDropdown from "@/components/client/ClienCardDropdown"
+import ClientCardDropdown from "@/components/client/ClientCardDropdown"
 
 import {
 	PhoneIcon,
 	EnvelopeIcon,
 	MapPinIcon,
 } from "@heroicons/react/24/outline"
 
-const ClientCard = ({ client }) => {
-	const [mounted, setMounted] = useState(false)
+const ClientCard = ({ client, view }) => {
+	if(view === 'list-view'){
+			return (
+					<section className="bg-primary rounded w-full p-4 my-3">
+							<div className="flex justify-between items-center">
+									<div className="w-3/12 pr-2 border-r border-accent">
+											<h5 className="font-bold text-sm sm:text-xl">{client.businessName}</h5>
+											<span className="text-sm italic">{client.businessType}</span>
+									</div>
+									<div className="flex flex-col w-9/12 ps-4 md:flex-row md:items-center md:justify-center">
+											<div className="contact-info-group md:w-4/12 md:mb-0">
+													<PhoneIcon className="contact-icon-list me-2" />
+													<p className="text-xs sm:text-base">{client.phone}</p>
+											</div>
+											<div className="contact-info-group md:w-4/12 md:mb-0">
+													<EnvelopeIcon className="contact-icon-list me-2" />
+													<p className="text-xs sm:text-base break-all">{client.email}</p>
+											</div>
+											<div className="contact-info-group md:w-4/12 md:mb-0">
+													<MapPinIcon className="contact-icon-list me-2" />
+													<p className="text-xs sm:text-base">{client.address}</p>
+											</div>
+									</div>
+									<ClientCardDropdown />
+							</div>
+			</section>
+		);
+	}
 
-	useEffect(() => {
-		const clientEmailContainer = document.querySelector(`.clientEmail${client._id}`)
-		const clientEmail = client.email.split('@')
-		clientEmailContainer.innerHTML = `${clientEmail[0]}<wbr>@${clientEmail[1]}`
-	}, [mounted])
-
-	return (
+else return (
 		<section className="client-card">
 			<div>
 				<div className="relative flex justify-between">
 					<h3>{client.businessName}</h3>
-					<ClienCardDropdown />
+					<ClientCardDropdown />
 				</div>
 				<hr />
 				<span className="text-sm italic">{client.businessType}</span>
@@ -34,7 +54,7 @@ const ClientCard = ({ client }) => {
 					</div>
 					<div className="contact-info-group">
 						<EnvelopeIcon className="contact-icon me-2 xs:me-4" />
-						<p className={`text-sm xs:text-base clientEmail${client._id}`}></p>
+						<p className="text-sm xs:text-base">{client.email}</p>
 					</div>
 					<div className="contact-info-group">
 						<MapPinIcon className="contact-icon me-2 xs:me-4" />

diff --git a/...t/components/client/ClienCardDropdown.jsx → .../components/client/ClientCardDropdown.jsx b/...t/components/client/ClienCardDropdown.jsx → .../components/client/ClientCardDropdown.jsx
@@ -2,7 +2,7 @@
 import React from "react";
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
 
-function ClienCardDropdown() {
+function ClientCardDropdown() {
 	return (
 		<div className="dropdown text-secondary">
 			<label tabIndex={0} className="">
@@ -29,4 +29,4 @@ function ClienCardDropdown() {
 	);
 }
 
-export default ClienCardDropdown;
+export default ClientCardDropdown;
diff --git a/client/components/ui/ActionMenu.jsx b/client/components/ui/ActionMenu.jsx
@@ -1,5 +1,4 @@
 import { FunnelIcon, ArrowsUpDownIcon, ListBulletIcon, XMarkIcon } from '@heroicons/react/20/solid'
-
 import { sortingTypes } from "@/app/home/page.jsx"
 
 const ActionMenu = ({
@@ -10,6 +9,7 @@ const ActionMenu = ({
     removeFilter,
     currentSort,
     currentFilter,
+    view
 }) => {
     const filterOptionElements = clients
         .map(client => client.businessType.toLowerCase())
@@ -45,7 +45,9 @@ const ActionMenu = ({
                     {filterOptionElements}
                 </ul>
             </div>
-            <ListBulletIcon className="action-icon" title="List View" />
+
+            <ListBulletIcon onClick = {() => view()} className="action-icon" title="List View" />
+
             {currentSort && (
                 <div className="badge badge-primary self-center flex justify-center items-center leading-none mx-1">
                     {(currentSort === sortingTypes.ascending) && "Sorted AZ"}

diff --git a/client/styles/globals.css b/client/styles/globals.css
@@ -30,6 +30,15 @@ h2 {
 	@apply bg-primary rounded-3xl p-4 xs:p-5 xs:h-60 text-secondary;
 }
 
+/* Client Card/List Container Views */
+
+.card-view{
+    @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-[2%] gap-y-4 justify-center;
+}
+.list-view{
+
+}
+
 .client-contact {
 	@apply text-xs text-secondary p-1 xs:p-2 mt-2;
 }
@@ -41,6 +50,9 @@ h2 {
 .contact-icon {
 	@apply min-w-min min-h-min w-5 h-5 xs:w-7 xs:h-7 text-accent stroke-2;
 }
+.contact-icon-list {
+	@apply w-4 h-4 text-accent stroke-2;
+}
 
 h3 {
 	@apply text-lg xs:text-xl font-bold text-secondary;