Make the edit forms look nicer

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

Hide file tree

Showing 5 changed files with 183 additions and 38 deletions.
diff --git a/src/components/admin/store/CollectionDetailsForm/index.tsx b/src/components/admin/store/CollectionDetailsForm/index.tsx
@@ -5,9 +5,11 @@ import { StoreAPI } from '@/lib/api';
 import { MerchCollection } from '@/lib/types/apiRequests';
 import { PublicMerchCollection } from '@/lib/types/apiResponses';
 import { reportError } from '@/lib/utils';
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { BsArrowRight } from 'react-icons/bs';
 import style from '../ItemDetailsForm/style.module.scss';
 
 type FormValues = MerchCollection;
@@ -93,7 +95,19 @@ const CollectionDetailsForm = ({ mode, defaultData = {}, token }: IProps) => {
 
   return (
     <form onSubmit={handleSubmit(mode === 'edit' ? editCollection : createCollection)}>
-      <h1>{mode === 'edit' ? 'Modify' : 'Create'} Collection</h1>
+      <div className={style.header}>
+        <h1>{mode === 'edit' ? 'Modify' : 'Create'} Collection</h1>
+
+        {defaultData.uuid && (
+          <Link
+            className={style.viewPage}
+            href={`${config.store.collectionRoute}${defaultData.uuid}`}
+          >
+            View collection page
+            <BsArrowRight aria-hidden />
+          </Link>
+        )}
+      </div>
 
       <div className={style.form}>
         <label htmlFor="title">Title</label>

diff --git a/src/components/admin/store/ItemDetailsForm/index.tsx b/src/components/admin/store/ItemDetailsForm/index.tsx
@@ -15,6 +15,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useMemo, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
+import { BsArrowRight, BsPlus } from 'react-icons/bs';
 import style from './style.module.scss';
 
 type FormValues = Omit<MerchItem, 'uuid' | 'hasVariantsEnabled' | 'merchPhotos' | 'options'>;
@@ -266,11 +267,16 @@ const ItemDetailsForm = ({ mode, defaultData, token, collections }: IProps) => {
   return (
     <>
       <form onSubmit={handleSubmit(mode === 'edit' ? editItem : createItem)}>
-        <h1>{mode === 'edit' ? 'Modify' : 'Create'} Store Item</h1>
+        <div className={style.header}>
+          <h1>{mode === 'edit' ? 'Modify' : 'Create'} Store Item</h1>
 
-        {lastSaved && (
-          <Link href={`${config.store.itemRoute}${lastSaved.uuid}`}>View store listing</Link>
-        )}
+          {lastSaved && (
+            <Link className={style.viewPage} href={`${config.store.itemRoute}${lastSaved.uuid}`}>
+              View store listing
+              <BsArrowRight aria-hidden />
+            </Link>
+          )}
+        </div>
 
         <div className={style.form}>
           <label htmlFor="name">Item name</label>
@@ -322,22 +328,10 @@ const ItemDetailsForm = ({ mode, defaultData, token, collections }: IProps) => {
           </EventDetailsFormItem>
         </div>
 
-        <EventDetailsFormItem error={errors.hidden?.message}>
-          <label>
-            <input type="checkbox" {...register('hidden')} />
-            &nbsp;Hide this item from the public storefront
-          </label>
-        </EventDetailsFormItem>
-
-        <ul>
+        <ul className={style.photos}>
           {merchPhotos.map((photo, i) => (
             <li key={photo.uuid ?? i}>
-              <Image
-                src={photo.uploadedPhoto}
-                alt="Uploaded photo of store item"
-                width={50}
-                height={50}
-              />
+              <Image src={photo.uploadedPhoto} alt="Uploaded photo of store item" fill />
               <Button
                 onClick={() => {
                   setMerchPhotos(merchPhotos.toSpliced(i, 1));
@@ -347,28 +341,31 @@ const ItemDetailsForm = ({ mode, defaultData, token, collections }: IProps) => {
                 }}
                 destructive
               >
-                Delete
+                Remove
               </Button>
             </li>
           ))}
+          <li>
+            <label className={style.addImage}>
+              <BsPlus aria-hidden />
+              Add image
+              <input
+                type="file"
+                id="cover"
+                accept="image/*"
+                onChange={e => {
+                  const file = e.currentTarget.files?.[0];
+                  e.currentTarget.value = '';
+                  if (file) {
+                    setPhoto(file);
+                  }
+                }}
+              />
+            </label>
+          </li>
         </ul>
-        <label>
-          Add image
-          <input
-            type="file"
-            id="cover"
-            accept="image/*"
-            onChange={e => {
-              const file = e.currentTarget.files?.[0];
-              e.currentTarget.value = '';
-              if (file) {
-                setPhoto(file);
-              }
-            }}
-          />
-        </label>
 
-        <table>
+        <table className={style.options}>
           <thead>
             <tr>
               {options.length > 1 && (
@@ -456,7 +453,7 @@ const ItemDetailsForm = ({ mode, defaultData, token, collections }: IProps) => {
           </tbody>
           <tfoot>
             <tr>
-              <td>
+              <td colSpan={10}>
                 <Button
                   onClick={() =>
                     setOptions([
@@ -472,6 +469,13 @@ const ItemDetailsForm = ({ mode, defaultData, token, collections }: IProps) => {
           </tfoot>
         </table>
 
+        <EventDetailsFormItem error={errors.hidden?.message}>
+          <label>
+            <input type="checkbox" {...register('hidden')} />
+            &nbsp;Hide this item from the public storefront
+          </label>
+        </EventDetailsFormItem>
+
         <div className={style.submitButtons}>
           {mode === 'edit' ? (
             <>

diff --git a/src/components/admin/store/ItemDetailsForm/style.module.scss b/src/components/admin/store/ItemDetailsForm/style.module.scss
@@ -1,10 +1,132 @@
 @use 'src/styles/vars.scss' as vars;
 
+.header {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  .viewPage {
+    background-color: var(--theme-primary-2);
+    border-radius: 0.5rem;
+    color: var(--theme-background);
+    display: flex;
+    font-weight: bold;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
+}
+
 .form {
   column-gap: 8px;
   display: grid;
   grid-template-columns: 1fr 3fr;
   row-gap: 1rem;
+
+  [type='color'] {
+    cursor: pointer;
+    max-width: 5rem;
+    padding: 0 !important;
+  }
+}
+
+.photos {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+  margin: 1rem 0;
+
+  li {
+    aspect-ratio: 1 / 1;
+    position: relative;
+
+    img {
+      border-radius: 20px;
+      object-fit: cover;
+    }
+
+    button {
+      position: absolute;
+      right: 0.5rem;
+      top: 0.5rem;
+      z-index: 2;
+    }
+
+    .addImage {
+      align-items: center;
+      border: 1px solid var(--theme-shadow);
+      border-radius: 20px;
+      cursor: pointer;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      width: 100%;
+
+      svg {
+        height: 1.5rem;
+        width: 1.5rem;
+      }
+
+      [type='file'] {
+        @include vars.accessibly-hidden;
+      }
+    }
+  }
+}
+
+.options {
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  overflow: hidden;
+
+  thead {
+    background-color: var(--theme-primary-2);
+    color: var(--theme-background);
+  }
+
+  th {
+    text-align: left;
+  }
+
+  tbody tr:nth-child(2n + 1) {
+    background-color: var(--theme-surface-1);
+  }
+
+  th,
+  td {
+    padding: 0.5rem;
+
+    &:first-child {
+      padding-left: 1rem;
+    }
+
+    &:last-child {
+      padding-right: 1rem;
+    }
+  }
+
+  tfoot {
+    background-color: var(--theme-surface-2);
+  }
+
+  input {
+    background: none;
+    border: 0;
+    border: 1px solid currentColor;
+    border-radius: 0.5rem;
+    color: inherit;
+    font: inherit;
+    padding: 0.5rem;
+    width: 100%;
+  }
+
+  [type='number'] {
+    text-align: right;
+  }
 }
 
 .submitButtons {

diff --git a/src/components/admin/store/ItemDetailsForm/style.module.scss.d.ts b/src/components/admin/store/ItemDetailsForm/style.module.scss.d.ts
@@ -1,6 +1,11 @@
 export type Styles = {
+  addImage: string;
   form: string;
+  header: string;
+  options: string;
+  photos: string;
   submitButtons: string;
+  viewPage: string;
 };
 
 export type ClassNames = keyof Styles;

diff --git a/src/lib/config.ts b/src/lib/config.ts
@@ -119,7 +119,7 @@ const config = {
     MAX_PROFILE_PICTURE_SIZE_KB: 256,
     MAX_BANNER_SIZE_KB: isDevelopment ? 256 : 2048,
     MAX_MERCH_PHOTO_SIZE_KB: 1024,
-    MAX_RESUME_SIZE_KB: isDevelopment ? Infinity : 2048,
+    MAX_RESUME_SIZE_KB: isDevelopment ? 256 : 2048,
   },
 };