Merge pull request #2003 from CAFECA-IO/fix/journal-report-trivial-ui

fix/journal-report-trivial-ui
CAFECA-IO · Aug 9, 2024 · 9fffba3 · 9fffba3
2 parents 87b69dd + 73acc6a
commit 9fffba3
Show file tree

Hide file tree

Showing 21 changed files with 274 additions and 135 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.1.8+165",
+  "version": "0.1.8+166",
   "private": false,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils/common';
 
 // Info: 用 cva 來定義 button 的樣式 (20240319 - Shirley)
 const buttonVariants = cva(
-  '"gap space-x-2 ring-offset-background focus-visible:ring-ring group inline-flex items-center justify-center whitespace-nowrap rounded-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-100',
+  '"gap space-x-2 ring-offset-background focus-visible:ring-ring group inline-flex items-center justify-center whitespace-nowrap rounded-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-100 disabled:cursor-not-allowed',
   {
     variants: {
       variant: {
@@ -13,9 +13,9 @@ const buttonVariants = cva(
         tertiary:
           'bg-button-surface-strong-secondary text-button-text-invert hover:bg-button-surface-strong-secondary-hover disabled:bg-button-surface-strong-disable',
         tertiaryOutline:
-          'border border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary',
+          'border border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary disabled:text-button-text-disable disabled:border-button-stroke-disable',
         secondaryOutline:
-          'border border-button-text-secondary text-button-text-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary',
+          'border border-button-text-secondary text-button-text-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary disabled:text-button-text-disable disabled:border-button-stroke-disable',
         tertiaryBorderless:
           'border-none border-button-surface-strong-secondary text-button-surface-strong-secondary hover:border-button-text-primary hover:text-button-text-primary group-hover:border-button-text-primary group-hover:text-button-text-primary disabled:text-button-text-disable',
         secondaryBorderless:

diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
@@ -387,7 +387,7 @@ const DatePicker = ({
         onClick={openCalenderHandler}
         className={cn(
           // default style
-          'flex w-full items-center space-x-3 rounded-xs border border-lightGray3 bg-white p-3 text-input-text-input-placeholder hover:cursor-pointer',
+          'flex w-full items-center space-x-3 rounded-sm border border-lightGray3 bg-white p-3 text-input-text-input-placeholder hover:cursor-pointer',
           // props control style
           btnClassName,
           // variables control style
@@ -427,7 +427,7 @@ const DatePicker = ({
         variant={'tertiaryOutline'}
         onClick={openCalenderHandler}
         className={cn(
-          'group flex w-full items-center rounded-xs border border-lightGray3 bg-white px-3 py-3 hover:cursor-pointer',
+          'group flex w-full items-center rounded-sm border border-lightGray3 bg-white px-3 py-3 hover:cursor-pointer',
           btnClassName,
           {
             'border-primaryYellow text-primaryYellow': componentVisible,

diff --git a/src/components/i18n/i18n.tsx b/src/components/i18n/i18n.tsx
@@ -68,18 +68,18 @@ const I18n = ({ langIsOpen, setLangIsOpen }: II18nProps) => {
     <div
       className={`transition-all duration-300 ${
         openMenu
-          ? 'visible -translate-y-19rem opacity-100'
+          ? 'visible -translate-y-7rem opacity-100'
           : 'invisible -translate-y-36rem opacity-0'
       } lg:hidden`}
     >
       <div
         id="I18nMenuMobile"
-        className="absolute left-0 top-0 z-10 h-350px w-screen bg-white shadow"
+        className="absolute left-0 top-0 z-10 h-300px w-screen bg-white shadow"
       >
         <button
           onClick={mobileClickHandler}
           type="button"
-          className="p-16px text-button-text-secondary hover:text-button-text-primary"
+          className="px-4 pt-2 text-button-text-secondary hover:text-button-text-primary"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -107,7 +107,7 @@ const I18n = ({ langIsOpen, setLangIsOpen }: II18nProps) => {
                 scroll={false}
                 locale={item.value}
                 href={asPath}
-                className="block rounded-none px-3 py-7 font-medium hover:cursor-pointer"
+                className="block rounded-none px-3 py-7 font-medium text-button-text-secondary hover:cursor-pointer hover:text-button-text-primary"
               >
                 {item.label}
               </Link>

diff --git a/src/components/journal_list_body/journal_list_body.tsx b/src/components/journal_list_body/journal_list_body.tsx
@@ -24,6 +24,7 @@ import { IPaginatedData } from '@/interfaces/pagination';
 import { useGlobalCtx } from '@/contexts/global_context';
 import { MessageType } from '@/interfaces/message_modal';
 import { ToastType } from '@/interfaces/toastify';
+import { cn } from '@/lib/utils/common';
 
 // Info: (20240808 - Anna) Alpha版先隱藏(發票列表)
 // import Toggle from '@/components/toggle/toggle';
@@ -41,9 +42,9 @@ const JournalListBody = () => {
   const [isLoading, setIsLoading] = useState<boolean | undefined>(undefined);
   // Info: (20240808 - Anna) Alpha版先隱藏(發票列表)
   // const [invoiceListToggle, setInvoiceListoggle] = useState<boolean>(false);
-  const { trigger } = APIHandler<{ [key: string]: IPaginatedData<IJournalListItem[]> }>(
-    APIName.JOURNAL_LIST
-  );
+  const { trigger, isLoading: isJournalListLoading } = APIHandler<{
+    [key: string]: IPaginatedData<IJournalListItem[]>;
+  }>(APIName.JOURNAL_LIST);
   const { trigger: deleteJournalById } = APIHandler<void>(APIName.JOURNAL_DELETE);
 
   const types = [
@@ -88,16 +89,27 @@ const JournalListBody = () => {
   const [isTypeSelected, setIsTypeSelected] = useState(false);
   const [isSortBySelected, setIsSortBySelected] = useState(false);
 
-  const toggleTypeMenu = () => setIsTypeMenuOpen(!isTypeMenuOpen);
-  const toggleSortByMenu = () => setIsSortByMenuOpen(!isSortByMenuOpen);
-
+  const toggleTypeMenu = () => {
+    if (!isJournalListLoading) {
+      setIsTypeMenuOpen(!isTypeMenuOpen);
+    }
+  };
+  const toggleSortByMenu = () => {
+    if (!isJournalListLoading) {
+      setIsSortByMenuOpen(!isSortByMenuOpen);
+    }
+  };
   const tabClickHandler = (event: JOURNAL_EVENT) => {
     setCurrentTab(event);
     setJournals(pagenatedJournalListItems?.[event]?.data ?? []);
     setTotalPages(pagenatedJournalListItems?.[event]?.totalPages ?? 0);
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value);
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isJournalListLoading) {
+      setSearch(e.target.value);
+    }
+  };
 
   const getJournalList = useCallback(
     async (query: {
@@ -133,7 +145,7 @@ const JournalListBody = () => {
           endDate: !(period ?? filteredPeriod).endTimeStamp
             ? undefined
             : (period ?? filteredPeriod).endTimeStamp,
-          searchQuery: !(searchString ?? search) ? undefined : searchString ?? search,
+          searchQuery: !(searchString ?? search) ? undefined : (searchString ?? search),
         },
       });
 
@@ -204,11 +216,19 @@ const JournalListBody = () => {
 
   const displayedTypeDropMenu = (
     <div
-      onClick={toggleTypeMenu}
-      className={`group relative flex h-44px w-130px cursor-pointer ${isTypeMenuOpen ? 'border-input-stroke-input-hover text-primaryYellow' : 'border-input-stroke-input text-input-text-input-placeholder'} items-center justify-between rounded-sm border bg-white p-10px hover:border-input-stroke-input-hover hover:text-primaryYellow`}
+      onClick={isJournalListLoading ? undefined : toggleTypeMenu}
+      className={cn(
+        'group relative flex h-44px w-200px cursor-pointer items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background bg-white p-10px hover:border-primaryYellow hover:text-primaryYellow',
+        {
+          'cursor-not-allowed border-button-stroke-disable text-button-text-disable hover:border-button-stroke-disable hover:text-button-text-disable':
+            isJournalListLoading,
+          'border-input-stroke-selected text-primaryYellow': isTypeMenuOpen,
+          'border-input-stroke-input text-input-text-input-placeholder': !isTypeMenuOpen,
+        }
+      )}
     >
       <p
-        className={`group-hover:text-primaryYellow ${isTypeMenuOpen ? 'text-primaryYellow' : isTypeSelected ? 'text-primaryYellow' : 'text-input-text-input-placeholder'}`}
+        className={`whitespace-nowrap ${isJournalListLoading ? 'group-hover:text-button-text-disable' : 'group-hover:text-primaryYellow'} ${isTypeMenuOpen ? 'text-primaryYellow' : isTypeSelected ? '' : 'text-input-text-input-placeholder'}`}
       >
         {t(filteredJournalType)}
       </p>
@@ -238,11 +258,19 @@ const JournalListBody = () => {
 
   const displayedSortByDropMenu = (
     <div
-      onClick={toggleSortByMenu}
-      className={`group relative flex h-44px w-200px cursor-pointer items-center justify-between rounded-sm ${isSortByMenuOpen ? 'border-input-stroke-selected text-primaryYellow' : 'border-input-stroke-input text-input-text-input-placeholder'} border bg-white p-10px hover:border-input-stroke-selected hover:text-primaryYellow`}
+      onClick={isJournalListLoading ? undefined : toggleSortByMenu}
+      className={cn(
+        'group relative flex h-44px w-200px cursor-pointer items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background bg-white p-10px hover:border-primaryYellow hover:text-primaryYellow',
+        {
+          'cursor-not-allowed border-button-stroke-disable text-button-text-disable hover:border-button-stroke-disable hover:text-button-text-disable':
+            isJournalListLoading,
+          'border-input-stroke-selected text-primaryYellow': isSortByMenuOpen,
+          'border-input-stroke-input text-input-text-input-placeholder': !isSortByMenuOpen,
+        }
+      )}
     >
       <p
-        className={`whitespace-nowrap group-hover:text-primaryYellow ${isSortByMenuOpen ? 'text-primaryYellow' : isSortBySelected ? '' : 'text-lightGray3'}`}
+        className={`whitespace-nowrap ${isJournalListLoading ? 'group-hover:text-button-text-disable' : 'group-hover:text-primaryYellow'} ${isSortByMenuOpen ? 'text-primaryYellow' : isSortBySelected ? '' : 'text-input-text-input-placeholder'}`}
       >
         {t(filteredJournalSortBy)}
       </p>
@@ -274,6 +302,7 @@ const JournalListBody = () => {
   const displayedDatePicker = (
     <div className="hidden md:flex">
       <DatePicker
+        disabled={isJournalListLoading}
         type={DatePickerType.TEXT_PERIOD}
         period={filteredPeriod}
         setFilteredPeriod={setFilteredPeriod}
@@ -285,15 +314,21 @@ const JournalListBody = () => {
   const displayedSearchBar = (
     <div className="relative flex-1">
       <input
+        disabled={isJournalListLoading}
         type="text"
         placeholder={t('AUDIT_REPORT.SEARCH')}
         className={`relative flex h-44px w-full items-center justify-between rounded-sm border border-lightGray3 bg-white p-10px outline-none`}
         onChange={handleInputChange}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+            getJournalList({ search });
+          }
+        }}
       />
       <FiSearch
         size={20}
         className="absolute right-3 top-3 cursor-pointer"
-        onClick={() => getJournalList({ search })}
+        onClick={() => !isJournalListLoading && getJournalList({ search })}
       />
     </div>
   );