Show hidden/archived icons

acmucsd · Jan 21, 2024 · cac8a20 · cac8a20
1 parent bb58bbc
commit cac8a20
Show file tree

Hide file tree

Showing 15 changed files with 113 additions and 39 deletions.
diff --git a/src/components/store/CollectionSlider/index.tsx b/src/components/store/CollectionSlider/index.tsx
@@ -1,52 +1,60 @@
 import { Carousel } from '@/components/common';
 import CreateButton from '@/components/store/CreateButton';
 import EditButton from '@/components/store/EditButton';
+import HiddenIcon from '@/components/store/HiddenIcon';
 import ItemCard from '@/components/store/ItemCard';
 import { config } from '@/lib';
 import { PublicMerchItem } from '@/lib/types/apiResponses';
 import { getDefaultMerchItemPhoto } from '@/lib/utils';
+import Link from 'next/link';
 import styles from './style.module.scss';
 
 interface CollectionSliderProps {
   uuid: string;
   title: string;
   description: string;
   items: PublicMerchItem[];
-  showEdit?: boolean;
+  canManageStore?: boolean;
   previewPublic?: boolean;
+  isHidden?: boolean;
 }
 
 const CollectionSlider = ({
   uuid,
   title,
   description,
   items,
-  showEdit,
+  canManageStore,
   previewPublic,
+  isHidden,
 }: CollectionSliderProps) => {
   const preview = previewPublic ? '?preview=public' : '';
 
   return (
     <div className={styles.wrapper}>
       <h3 className={styles.title}>
-        {title}
-        {showEdit && <EditButton type="collection" uuid={uuid} />}
+        <Link href={`${config.store.collectionRoute}${uuid}`}>{title}</Link>
+        {canManageStore && <EditButton type="collection" uuid={uuid} />}
+        {isHidden && <HiddenIcon type="collection" />}
       </h3>
       <p className={styles.description}>{description}</p>
       <Carousel>
-        {items.map(item => (
-          <ItemCard
-            className={styles.card}
-            image={getDefaultMerchItemPhoto(item)}
-            title={item.itemName}
-            href={`${config.store.itemRoute}${item.uuid}${preview}`}
-            cost={item.options[0]?.price ?? 0}
-            key={item.uuid}
-          >
-            {showEdit && <EditButton type="item" uuid={uuid} />}
-          </ItemCard>
-        ))}
-        {showEdit && (
+        {items
+          .filter(item => canManageStore || !item.hidden)
+          .map(item => (
+            <ItemCard
+              className={styles.card}
+              image={getDefaultMerchItemPhoto(item)}
+              title={item.itemName}
+              href={`${config.store.itemRoute}${item.uuid}${preview}`}
+              cost={item.options[0]?.price ?? 0}
+              key={item.uuid}
+            >
+              {canManageStore && item.hidden && <HiddenIcon type="item" />}
+              {canManageStore && <EditButton type="item" uuid={uuid} />}
+            </ItemCard>
+          ))}
+        {canManageStore && (
           <CreateButton className={styles.card} type="item" collection={uuid}>
             Add an item
           </CreateButton>

diff --git a/src/components/store/CreateButton/index.tsx b/src/components/store/CreateButton/index.tsx
@@ -8,20 +8,22 @@ interface CreateButtonProps {
   className?: string;
   type: 'item' | 'collection';
   collection?: string;
+  horizontal?: boolean;
 }
 
 const CreateButton = ({
   className,
   type,
   collection,
+  horizontal,
   children,
 }: PropsWithChildren<CreateButtonProps>) => {
   return (
     <Link
       href={`${type === 'collection' ? config.store.collectionRoute : config.store.itemRoute}new${
         collection ? `?collection=${collection}` : ''
       }`}
-      className={`${className} ${styles.itemCard}`}
+      className={`${className} ${styles.itemCard} ${horizontal ? styles.horizontal : ''}`}
     >
       <BsPlus className={styles.icon} aria-hidden />
       {children}

diff --git a/src/components/store/CreateButton/style.module.scss b/src/components/store/CreateButton/style.module.scss
@@ -10,6 +10,11 @@
   justify-content: center;
   min-height: 8rem;
 
+  &.horizontal {
+    flex-direction: row;
+    min-height: 4rem;
+  }
+
   .icon {
     height: 2rem;
     width: 2rem;

diff --git a/src/components/store/CreateButton/style.module.scss.d.ts b/src/components/store/CreateButton/style.module.scss.d.ts
@@ -1,4 +1,5 @@
 export type Styles = {
+  horizontal: string;
   icon: string;
   itemCard: string;
 };

diff --git a/src/components/store/EditButton/index.tsx b/src/components/store/EditButton/index.tsx
@@ -9,14 +9,16 @@ interface EditButtonProps {
 }
 
 const EditButton = ({ type, uuid }: EditButtonProps) => {
+  const label = `Edit ${type}`;
   return (
     <Link
       className={styles.edit}
       href={`${
         type === 'collection' ? config.store.collectionRoute : config.store.itemRoute
       }${uuid}/edit`}
+      title={label}
     >
-      <EditIcon className={styles.icon} aria-label="Edit" />
+      <EditIcon className={styles.icon} aria-label={label} />
     </Link>
   );
 };

diff --git a/src/components/store/EditButton/style.module.scss b/src/components/store/EditButton/style.module.scss
@@ -2,14 +2,15 @@
   align-self: flex-start;
   background-color: var(--theme-primary-2);
   border-radius: 50%;
+  box-shadow: 0 2px 5px var(--theme-shadow);
   color: var(--theme-background);
   display: flex;
   flex: none;
   padding: 0.5rem;
   transition: box-shadow 0.2s;
 
   &:hover {
-    box-shadow: 0 2px 5px var(--theme-shadow);
+    box-shadow: 0 3px 10px var(--theme-shadow);
   }
 
   .icon {

diff --git a/src/components/store/HiddenIcon/index.tsx b/src/components/store/HiddenIcon/index.tsx
@@ -0,0 +1,13 @@
+import { BsEyeSlash } from 'react-icons/bs';
+import styles from './style.module.scss';
+
+interface HiddenIconProps {
+  type: 'item' | 'collection';
+}
+
+const HiddenIcon = ({ type }: HiddenIconProps) => {
+  const label = type === 'collection' ? 'Archived collection' : 'Hidden item';
+  return <BsEyeSlash className={styles.icon} title={label} aria-label={label} />;
+};
+
+export default HiddenIcon;
diff --git a/src/components/store/HiddenIcon/style.module.scss b/src/components/store/HiddenIcon/style.module.scss
@@ -0,0 +1,11 @@
+.icon {
+  align-self: flex-start;
+  background-color: var(--theme-shadow);
+  border-radius: 50%;
+  box-sizing: content-box;
+  display: flex;
+  flex: none;
+  height: 1.5rem;
+  padding: 0.5rem;
+  width: 1.5rem;
+}
diff --git a/src/components/store/HiddenIcon/style.module.scss.d.ts b/src/components/store/HiddenIcon/style.module.scss.d.ts
@@ -0,0 +1,9 @@
+export type Styles = {
+  icon: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;
diff --git a/src/components/store/ItemCard/style.module.scss b/src/components/store/ItemCard/style.module.scss
@@ -37,6 +37,7 @@
     flex-direction: column;
     gap: 0.5rem;
     padding: 0 1rem;
+    white-space: pre-wrap;
     word-break: break-word;
 
     .title {
@@ -56,6 +57,8 @@
   }
 
   .icons {
+    display: flex;
+    gap: 0.5rem;
     position: absolute;
     right: 0.5rem;
     top: 0.5rem;

diff --git a/src/components/store/ItemHeader/index.tsx b/src/components/store/ItemHeader/index.tsx
@@ -1,4 +1,4 @@
-import { EditButton } from '@/components/store';
+import { EditButton, HiddenIcon } from '@/components/store';
 import Diamonds from '@/components/store/Diamonds';
 import styles from './style.module.scss';
 
@@ -7,13 +7,15 @@ interface ItemHeaderProps {
   cost: number | undefined;
   uuid?: string;
   showEdit?: boolean;
+  isHidden?: boolean;
 }
 
-const ItemHeader = ({ itemName, cost, uuid, showEdit }: ItemHeaderProps) => {
+const ItemHeader = ({ itemName, cost, uuid, showEdit, isHidden }: ItemHeaderProps) => {
   return (
     <div className={styles.itemHeaderGroup}>
       <h1>
         {itemName} {uuid && showEdit && <EditButton type="item" uuid={uuid} />}
+        {isHidden && <HiddenIcon type="item" />}
       </h1>
       <div className={styles.price}>{cost === undefined ? null : <Diamonds count={cost} />}</div>
     </div>

diff --git a/src/components/store/index.ts b/src/components/store/index.ts
@@ -4,6 +4,7 @@ export { default as Diamonds } from './Diamonds';
 export { default as EditButton } from './EditButton';
 export { default as HelpModal } from './HelpModal';
 export { default as Hero } from './Hero';
+export { default as HiddenIcon } from './HiddenIcon';
 export { default as ItemCard } from './ItemCard';
 export { default as OrderCard } from './OrderCard';
 export { default as OrdersDisplay } from './OrdersDisplay';

diff --git a/src/pages/store/collection/[uuid].tsx b/src/pages/store/collection/[uuid].tsx
@@ -1,5 +1,5 @@
 import { Typography } from '@/components/common';
-import { CreateButton, EditButton, ItemCard, Navbar } from '@/components/store';
+import { CreateButton, EditButton, HiddenIcon, ItemCard, Navbar } from '@/components/store';
 import { config } from '@/lib';
 import { StoreAPI } from '@/lib/api';
 import withAccessType from '@/lib/hoc/withAccessType';
@@ -20,7 +20,7 @@ interface CollectionProps {
 const CollectionsPage = ({
   uuid,
   user: { credits, accessType },
-  collection: { title, description, items = [] },
+  collection: { title, description, items = [], archived },
   previewPublic,
 }: CollectionProps) => {
   const canManageStore = PermissionService.canEditMerchItems.includes(accessType) && !previewPublic;
@@ -33,23 +33,27 @@ const CollectionsPage = ({
         <Typography variant="h1/bold" component="h1">
           {title}
           {canManageStore && <EditButton type="collection" uuid={uuid} />}
+          {canManageStore && archived && <HiddenIcon type="collection" />}
         </Typography>
         <Typography variant="h4/regular" component="p">
           {description}
         </Typography>
       </div>
       <div className={styles.collections}>
-        {items.map(item => (
-          <ItemCard
-            image={getDefaultMerchItemPhoto(item)}
-            title={item.itemName}
-            href={`${config.store.itemRoute}${item.uuid}${preview}`}
-            cost={item.options[0]?.price ?? 0}
-            key={item.uuid}
-          >
-            {canManageStore && <EditButton type="item" uuid={item.uuid} />}
-          </ItemCard>
-        ))}
+        {items
+          .filter(item => canManageStore || !item.hidden)
+          .map(item => (
+            <ItemCard
+              image={getDefaultMerchItemPhoto(item)}
+              title={item.itemName}
+              href={`${config.store.itemRoute}${item.uuid}${preview}`}
+              cost={item.options[0]?.price ?? 0}
+              key={item.uuid}
+            >
+              {canManageStore && item.hidden && <HiddenIcon type="item" />}
+              {canManageStore && <EditButton type="item" uuid={item.uuid} />}
+            </ItemCard>
+          ))}
         {canManageStore && (
           <CreateButton type="item" collection={uuid}>
             Add an item

diff --git a/src/pages/store/index.tsx b/src/pages/store/index.tsx
@@ -3,6 +3,7 @@ import {
   EditButton,
   HelpModal,
   Hero,
+  HiddenIcon,
   ItemCard,
   Navbar,
 } from '@/components/store';
@@ -49,6 +50,10 @@ const StoreHomePage = ({
   const canManageStore = PermissionService.canEditMerchItems.includes(accessType) && !previewPublic;
   const preview = previewPublic ? '?preview=public' : '';
 
+  const visibleCollections = collections.filter(
+    collection => canManageStore || !collection.archived
+  );
+
   return (
     <>
       <div className={styles.container}>
@@ -74,32 +79,38 @@ const StoreHomePage = ({
         </div>
         {view === 'collections' ? (
           <div className={styles.collections}>
-            {collections.map(collection => (
+            {visibleCollections.map(collection => (
               <ItemCard
                 image={getDefaultMerchItemPhoto(collection.items[0])}
                 title={collection.title}
                 description={collection.description}
                 href={`${config.store.collectionRoute}${collection.uuid}${preview}`}
                 key={collection.uuid}
               >
+                {canManageStore && collection.archived && <HiddenIcon type="collection" />}
                 {canManageStore && <EditButton type="collection" uuid={collection.uuid} />}
               </ItemCard>
             ))}
             {canManageStore && <CreateButton type="collection">Create a collection</CreateButton>}
           </div>
         ) : (
           <>
-            {collections.map(collection => (
+            {visibleCollections.map(collection => (
               <CollectionSlider
                 uuid={collection.uuid}
                 title={collection.title}
                 description={collection.description}
                 items={collection.items}
-                showEdit={canManageStore}
+                canManageStore={canManageStore}
+                isHidden={canManageStore && collection.archived}
                 key={collection.uuid}
               />
             ))}
-            {canManageStore && <CreateButton type="collection">Create a collection</CreateButton>}
+            {canManageStore && (
+              <CreateButton type="collection" horizontal>
+                Create a collection
+              </CreateButton>
+            )}
           </>
         )}
       </div>

diff --git a/src/pages/store/item/[uuid].tsx b/src/pages/store/item/[uuid].tsx
@@ -55,6 +55,7 @@ const StoreItemPage = ({
             cost={currOption?.price}
             uuid={uuid}
             showEdit={canManageStore}
+            isHidden={canManageStore && item.hidden}
           />
           {item.options.length > 1 ? (
             <SizeSelector