jykuo-love-shiritori · KatoToyoki · Jan 10, 2024 · Jan 10, 2024 · Jan 10, 2024 · Jan 10, 2024
diff --git a/frontend/src/components/GoodsItem.tsx b/frontend/src/components/GoodsItem.tsx
@@ -4,11 +4,14 @@ import '@style/global.css';
 import { CSSProperties } from 'react';
 
 import TButton from '@components/TButton';
+import { Col, Row } from 'react-bootstrap';
 
 export interface Props {
   id: number;
   name: string;
   image_url: string;
+  price: number;
+  sales: number;
 }
 
 const GoodsItemStyle = {
@@ -37,18 +40,24 @@ export interface GoodsItemProps {
   sales: number;
 }
 
-const GoodsItem = ({ id, name, image_url }: Props) => {
+const GoodsItem = ({ id, name, image_url, price, sales }: Props) => {
   return (
     <div style={GoodsItemStyle}>
       <div style={{ overflow: ' hidden' }}>
         <img src={image_url} style={GoodsImgStyle} />
       </div>
 
-      <div style={{ padding: '2% 7% 2% 7% ' }}>
-        <p>
-          {name.substring(0, 11)} {name.length > 13 ? '...' : ''}
-        </p>
-      </div>
+      <Row style={{ padding: '7% 8% 0 8%' }}>
+        <Col xs={12} md={12} style={{ padding: '0' }}>
+          <h5 className='crop_text'>{name}</h5>
+        </Col>
+        <Col xs={12} md={6} style={{ color: 'var(--title)', padding: '0' }}>
+          <div className='crop_text'>${price}</div>
+        </Col>
+        <Col xs={12} md={6} className='right' style={{ padding: '0' }}>
+          <div className='crop_text'>{`sold ${sales}`}</div>
+        </Col>
+      </Row>
 
       <TButton text='more' action={`/product/${id}`} />
     </div>

diff --git a/frontend/src/components/SellerGoodsItem.tsx b/frontend/src/components/SellerGoodsItem.tsx
@@ -6,11 +6,14 @@ import '@components/style.css';
 import '@style/global.css';
 
 import { Link } from 'react-router-dom';
+import { Col, Row } from 'react-bootstrap';
 
 interface Props {
   id: number;
   name: string;
   image_url: string;
+  price: number;
+  sales: number;
 }
 
 const GoodsItemStyle: CSSProperties = {
@@ -30,18 +33,24 @@ const GoodsImgStyle: CSSProperties = {
   objectFit: 'cover',
 };
 
-const SellerGoodsItem = ({ id, name, image_url }: Props) => {
+const SellerGoodsItem = ({ id, name, image_url, price, sales }: Props) => {
   return (
     <div style={GoodsItemStyle}>
       <div style={{ overflow: ' hidden' }}>
         <img src={image_url} style={GoodsImgStyle} />
       </div>
 
-      <div style={{ padding: '2% 7% 2% 7% ' }}>
-        <p>
-          {name.substring(0, 11)} {name.length > 13 ? '...' : ''}
-        </p>
-      </div>
+      <Row style={{ padding: '7% 8% 0 8%' }}>
+        <Col xs={12} md={12} style={{ padding: '0' }}>
+          <h5 className='crop_text'>{name}</h5>
+        </Col>
+        <Col xs={12} md={6} style={{ color: 'var(--title)', padding: '0' }}>
+          <div className='crop_text'>${price}</div>
+        </Col>
+        <Col xs={12} md={6} className='right' style={{ padding: '0' }}>
+          <div className='crop_text'>{`sold ${sales}`}</div>
+        </Col>
+      </Row>
 
       <Link to={`/user/seller/manageProducts/${id}`}>
         <div className='button pointer center'>

diff --git a/frontend/src/pages/discover/index.tsx b/frontend/src/pages/discover/index.tsx
@@ -64,7 +64,13 @@ const Discover = () => {
           {goodsData.map((data, index) => {
             return (
               <Col xs={6} md={3} key={index}>
-                <GoodsItem id={data.id} name={data.name} image_url={data.image_url} />
+                <GoodsItem
+                  id={data.id}
+                  name={data.name}
+                  image_url={data.image_url}
+                  price={data.price}
+                  sales={data.sales}
+                />
               </Col>
             );
           })}

diff --git a/frontend/src/pages/home/index.tsx b/frontend/src/pages/home/index.tsx
@@ -84,8 +84,14 @@ const Home = () => {
         <div style={{ padding: '0% 0% 3% 0%' }}>From most popular sellers</div>
         <Row>
           {recommendData.popular_products.map((data, index) => (
-            <Col xs={6} md={3} key={index}>
-              <GoodsItem id={data.id} name={data.name} image_url={data.image_url} />
+            <Col xs={6} md={4} xl={3} key={index}>
+              <GoodsItem
+                id={data.id}
+                name={data.name}
+                image_url={data.image_url}
+                price={data.price}
+                sales={data.sales}
+              />
             </Col>
           ))}
         </Row>
@@ -94,7 +100,13 @@ const Home = () => {
         <Row>
           {recommendData.local_products.map((data, index) => (
             <Col xs={6} md={3} key={index}>
-              <GoodsItem id={data.id} name={data.name} image_url={data.image_url} />
+              <GoodsItem
+                id={data.id}
+                name={data.name}
+                image_url={data.image_url}
+                price={data.price}
+                sales={data.sales}
+              />
             </Col>
           ))}
         </Row>

diff --git a/frontend/src/pages/search/index.tsx b/frontend/src/pages/search/index.tsx
@@ -47,8 +47,8 @@ export interface ProductProps {
   id: number;
   image_url: string;
   name: string;
-  price: string;
-  stock: number;
+  price: number;
+  sales: number;
 }
 
 export interface ShopProps {
@@ -117,28 +117,28 @@ const toOrderBy = (input: string | null) => {
 export const isDataValid = (data: FilterProps) => {
   if (typeof data.maxPrice !== 'number' && data.maxPrice !== null && data.maxPrice !== '') {
     if (!isValidNumber(data.maxPrice)) {
-      alert('Please enter numbers for max price');
+      alert('Please enter max price');
       return false;
     }
   }
 
   if (typeof data.minPrice !== 'number' && data.minPrice !== null && data.minPrice !== '') {
     if (!isValidNumber(data.minPrice)) {
-      alert('Please enter numbers for min price');
+      alert('Please enter min price');
       return false;
     }
   }
 
   if (typeof data.maxStock !== 'number' && data.maxStock !== null && data.maxStock !== '') {
     if (!isValidNumber(data.maxStock)) {
-      alert('Please enter numbers for max stock');
+      alert('Please enter max stock');
       return false;
     }
   }
 
   if (typeof data.minStock !== 'number' && data.minStock !== null && data.minStock !== '') {
     if (!isValidNumber(data.minStock)) {
-      alert('Please enter numbers for min stock');
+      alert('Please enter min stock');
       return false;
     }
   }
@@ -149,37 +149,37 @@ export const isDataValid = (data: FilterProps) => {
     (!isInteger(data.maxStock) && data.maxStock !== null && data.maxStock.toString() !== '') ||
     (!isInteger(data.minStock) && data.minStock !== null && data.minStock.toString() !== '')
   ) {
-    alert("can't enter float numbers!");
+    alert('please enter integers');
     return false;
   }
 
   if (data.minPrice !== null && parseInt(data.minPrice.toString()) < 0) {
-    alert("min price can't negative numbers");
+    alert("min price can't be negative");
     return false;
   }
 
   if (data.maxPrice !== null && parseInt(data.maxPrice.toString()) < 0) {
-    alert("max price can't negative numbers");
+    alert("max price can't be negative");
     return false;
   }
 
   if (data.minStock !== null && parseInt(data.minStock.toString()) < 0) {
-    alert("min stock can't negative numbers");
+    alert("min stock can't be negative");
     return false;
   }
 
   if (data.maxStock !== null && parseInt(data.maxStock.toString()) < 0) {
-    alert("max stock can't negative numbers");
+    alert("max stock can't be negative");
     return false;
   }
 
   if (data.minPrice !== null && parseInt(data.minPrice.toString()) < 0) {
-    alert("min price can't negative numbers");
+    alert("min price can't be negative");
     return false;
   }
 
   if (data.maxPrice !== null && parseInt(data.maxPrice.toString()) < 0) {
-    alert("max price can't negative numbers");
+    alert("max price can't be negative");
     return false;
   }
 
@@ -188,7 +188,7 @@ export const isDataValid = (data: FilterProps) => {
     data.minPrice !== null &&
     parseInt(data.maxPrice.toString()) < parseInt(data.minPrice.toString())
   ) {
-    alert("min price can't bigger than max value");
+    alert('min price is greater than max price');
     return false;
   }
 
@@ -197,17 +197,17 @@ export const isDataValid = (data: FilterProps) => {
     data.minStock !== null &&
     parseInt(data.maxStock.toString()) < parseInt(data.minStock.toString())
   ) {
-    alert("min stock can't bigger than max value");
+    alert('min stock is greater than max stock');
     return false;
   }
 
   if (isEmpty(data.maxPrice) != isEmpty(data.minPrice)) {
-    alert('max and min price should both have values or both have no values at the same time');
+    alert('please enter max/min price when the other one is present');
     return false;
   }
 
   if (isEmpty(data.maxStock) != isEmpty(data.minStock)) {
-    alert('max and min stock should both have values or both have no values at the same time');
+    alert('please enter max/min stock when the other one is present');
     return false;
   }
 
@@ -440,7 +440,13 @@ const Search = () => {
             {data && data.products.length !== 0 ? (
               data.products.map((d, index: number) => (
                 <Col key={index} xs={6} md={3}>
-                  <GoodsItem {...d} />
+                  <GoodsItem
+                    id={d.id}
+                    name={d.name}
+                    image_url={d.image_url}
+                    price={d.price}
+                    sales={d.sales}
+                  />
                 </Col>
               ))
             ) : (

diff --git a/frontend/src/pages/user/seller/allProducts/index.tsx b/frontend/src/pages/user/seller/allProducts/index.tsx
@@ -75,7 +75,13 @@ const Products = () => {
         {sellerShopData.map((data: GoodsItemProps, index: number) => {
           return (
             <Col xs={6} md={3} key={index}>
-              <SellerGoodsItem id={data.id} name={data.name} image_url={data.image_url} />
+              <SellerGoodsItem
+                id={data.id}
+                name={data.name}
+                image_url={data.image_url}
+                price={data.price}
+                sales={data.sales}
+              />
             </Col>
           );
         })}

diff --git a/frontend/src/pages/user/seller/allReports/[sellerReportID].tsx b/frontend/src/pages/user/seller/allReports/[sellerReportID].tsx
@@ -95,7 +95,13 @@ const SellerReportEach = () => {
                   TWD $ {item.total_sell}
                 </div>
 
-                <GoodsItem id={item.product_id} name={item.name} image_url={item.image_url} />
+                <GoodsItem
+                  id={item.product_id}
+                  name={item.name}
+                  image_url={item.image_url}
+                  price={item.price}
+                  sales={item.order_count}
+                />
               </Col>
             );
           })}

diff --git a/frontend/src/pages/user/shop/Shop.tsx b/frontend/src/pages/user/shop/Shop.tsx
@@ -88,7 +88,13 @@ const Shop = () => {
           products.map((data, index) => {
             return (
               <Col xs={6} md={3} key={index}>
-                <GoodsItem id={data.id} name={data.name} image_url={data.image_url} />
+                <GoodsItem
+                  id={data.id}
+                  name={data.name}
+                  image_url={data.image_url}
+                  price={data.price}
+                  sales={data.sales}
+                />
               </Col>
             );
           })

diff --git a/frontend/src/style/global.css b/frontend/src/style/global.css
@@ -193,3 +193,9 @@ p {
     min-height: 50vh;
   }
 }
+
+.crop_text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}