From 8b8fffdab188b57382141134d8e2171b6b1e59e4 Mon Sep 17 00:00:00 2001 From: Su Yin <53945359+tnsyn@users.noreply.github.com> Date: Fri, 21 Oct 2022 22:18:12 +0800 Subject: [PATCH] [resumes][feat] Add mobile filters (#408) --- apps/portal/src/pages/resumes/browse.tsx | 392 +++++++++++++++-------- 1 file changed, 260 insertions(+), 132 deletions(-) diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx index a949ed1c..84b118fd 100644 --- a/apps/portal/src/pages/resumes/browse.tsx +++ b/apps/portal/src/pages/resumes/browse.tsx @@ -1,9 +1,10 @@ import Head from 'next/head'; import { useRouter } from 'next/router'; import { useSession } from 'next-auth/react'; -import { useEffect, useState } from 'react'; -import { Disclosure } from '@headlessui/react'; -import { MinusIcon, PlusIcon } from '@heroicons/react/20/solid'; +import { Fragment, useEffect, useState } from 'react'; +import { Dialog, Disclosure, Transition } from '@headlessui/react'; +import { FunnelIcon, MinusIcon, PlusIcon } from '@heroicons/react/20/solid'; +import { XMarkIcon } from '@heroicons/react/24/outline'; import { MagnifyingGlassIcon, NewspaperIcon, @@ -104,6 +105,7 @@ export default function ResumeHomePage() { const [userFilters, setUserFilters] = useState(INITIAL_FILTER_STATE); const [shortcutSelected, setShortcutSelected] = useState('All'); const [currentPage, setCurrentPage] = useState(1); + const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false); const skip = (currentPage - 1) * PAGE_LIMIT; @@ -240,88 +242,51 @@ export default function ResumeHomePage() { Resume Review Portal -
-
- -
-
-
-
-
-

- Shortcuts: -

-
-
-
-
- -
-
-
-
- - -
-
- - {Object.entries(SORT_OPTIONS).map(([key, value]) => ( - - setSortOrder(key) - }> - ))} - -
-
- -
-
-
-
-
-
-
-
-
-

Shortcuts

+ {/* Mobile Filters */} +
+ + + +
+ + +
+ + +
+

+ Shortcuts +

+ +
+ +
    {SHORTCUTS.map((shortcut) => (
  • @@ -333,18 +298,16 @@ export default function ResumeHomePage() {
    • ))}
-

- Explore these filters: -

+ {filters.map((filter) => ( + className="border-t border-gray-200 px-4 py-6"> {({ open }) => ( <> -

- +

+ {filter.label} @@ -363,12 +326,8 @@ export default function ResumeHomePage() {

- - + +
{filter.options.map((option) => (
))} - +
)} ))} + + +

+
+ +
+ +
+
+ +
+ +
+
+

+ Shortcuts: +

+
+
+
    + {SHORTCUTS.map((shortcut) => ( +
  • + onShortcutChange(shortcut)} + /> +
    • + ))} +
+

+ Explore these filters: +

+ {filters.map((filter) => ( + + {({ open }) => ( + <> +

+ + + {filter.label} + + + {open ? ( + + +

+ + + {filter.options.map((option) => ( +
+ + onFilterCheckboxChange( + isChecked, + filter.id, + option.value, + ) + } + /> +
+ ))} + + + + )} + + ))} +
+
+
+
+
+
+
+ +
+ +
+
-
- {sessionData === null && - tabsValue !== BROWSE_TABS_VALUES.ALL ? ( - - ) : getTabResumes().length === 0 ? ( -
- +
+
+ - {getEmptyDataText(tabsValue, searchValue, userFilters)} -
- ) : ( - <> - -
- setCurrentPage(page)} - /> -
- - )} + +
+
+ + {Object.entries(SORT_OPTIONS).map(([key, value]) => ( + setSortOrder(key)}> + ))} + +
+ + +
+ +
+
+ {sessionData === null && tabsValue !== BROWSE_TABS_VALUES.ALL ? ( + + ) : getTabResumes().length === 0 ? ( +
+ + {getEmptyDataText(tabsValue, searchValue, userFilters)} +
+ ) : ( + <> + +
+ setCurrentPage(page)} + /> +
+ + )} +