From 79cca2ab809b77606e65706c19f9fce37b174365 Mon Sep 17 00:00:00 2001 From: Philip Korsholm <88927411+pKorsholm@users.noreply.github.com> Date: Thu, 8 Jun 2023 17:57:39 +0200 Subject: [PATCH] feat(admin-ui): Filter reservations (#4115) * initial filter * clenaup * reser filters correctly * filter reservations * ensure reset works * update types * add adjustment icon * pr prep * update filtering with proper description handling * location filter updates and search removal * removed greyed out dates + add created_by filtering * update filtering with proper ordering * filter out selected users * fix array issues * update spacing for searchable queries * fix deselection bug for inventory item search * update date filter; * rename const a to initialFilters * fix re-render issue * ui updates * update inventory filter to remove selected items * fix width * fix truncation for button text if desired * add span classes * add "go to reservations" popover * add tooltip if location text is truncated * fix long items * typing * minor fix for select value * fix reservation quantity field updates * add pb * Update packages/admin-ui/ui/src/components/templates/reservations-table/index.tsx Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com> * feedback * add changeset --------- Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com> --- .changeset/fresh-avocados-jump.md | 5 + .changeset/little-boxes-swim.md | 5 + .changeset/smart-taxis-burn.md | 5 + .../atoms/date-picker/date-picker.tsx | 67 +- .../ui/src/components/atoms/tooltip/index.tsx | 3 +- .../components/fundamentals/button/index.tsx | 10 +- .../fundamentals/icons/adjustments-icon.tsx | 29 + .../fundamentals/icons/calendar-icon.tsx | 54 ++ .../molecules/filter-dropdown/container.tsx | 31 +- .../molecules/filter-dropdown/item.tsx | 16 +- .../molecules/location-dropdown/index.tsx | 11 +- .../select/next-select/components/menu.tsx | 9 +- .../next-select/components/single-value.tsx | 67 +- .../inventory-table/use-inventory-column.tsx | 71 +- .../components/reservation-form/index.tsx | 19 +- .../components/reservations-filter/index.tsx | 906 ++++++++++++++++++ .../templates/reservations-table/index.tsx | 127 ++- .../reservations-table/new/index.tsx | 8 +- .../use-reservation-filters.ts | 315 ++---- .../reservation/edit-reservation-modal.tsx | 4 +- .../src/hooks/admin/inventory-item/queries.ts | 3 +- .../admin/reservations/list-reservations.ts | 5 + 22 files changed, 1412 insertions(+), 358 deletions(-) create mode 100644 .changeset/fresh-avocados-jump.md create mode 100644 .changeset/little-boxes-swim.md create mode 100644 .changeset/smart-taxis-burn.md create mode 100644 packages/admin-ui/ui/src/components/fundamentals/icons/adjustments-icon.tsx create mode 100644 packages/admin-ui/ui/src/components/fundamentals/icons/calendar-icon.tsx create mode 100644 packages/admin-ui/ui/src/components/templates/reservations-table/components/reservations-filter/index.tsx diff --git a/.changeset/fresh-avocados-jump.md b/.changeset/fresh-avocados-jump.md new file mode 100644 index 0000000000..8d90fc8dfd --- /dev/null +++ b/.changeset/fresh-avocados-jump.md @@ -0,0 +1,5 @@ +--- +"@medusajs/medusa": patch +--- + +feat(medusa): add `created_by` as a filter for reservations diff --git a/.changeset/little-boxes-swim.md b/.changeset/little-boxes-swim.md new file mode 100644 index 0000000000..e4252cd2cf --- /dev/null +++ b/.changeset/little-boxes-swim.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": minor +--- + +feat(admin-ui): Add filtering capabilities for reservations view diff --git a/.changeset/smart-taxis-burn.md b/.changeset/smart-taxis-burn.md new file mode 100644 index 0000000000..16e208eeb8 --- /dev/null +++ b/.changeset/smart-taxis-burn.md @@ -0,0 +1,5 @@ +--- +"medusa-react": patch +--- + +fix(medusa-react): update types to reflect api requests diff --git a/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx b/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx index 48ac612b57..63db735ba5 100644 --- a/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx +++ b/packages/admin-ui/ui/src/components/atoms/date-picker/date-picker.tsx @@ -1,24 +1,37 @@ -import * as PopoverPrimitive from "@radix-ui/react-popover" -import clsx from "clsx" -import moment from "moment" -import React, { useEffect, useState } from "react" -import ReactDatePicker from "react-datepicker" import "react-datepicker/dist/react-datepicker.css" -import Button from "../../fundamentals/button" + +import * as PopoverPrimitive from "@radix-ui/react-popover" + +import React, { useEffect, useState } from "react" + import ArrowDownIcon from "../../fundamentals/icons/arrow-down-icon" -import InputContainer from "../../fundamentals/input-container" -import InputHeader from "../../fundamentals/input-header" +import Button from "../../fundamentals/button" import CustomHeader from "./custom-header" import { DateTimePickerProps } from "./types" +import InputContainer from "../../fundamentals/input-container" +import InputHeader from "../../fundamentals/input-header" +import ReactDatePicker from "react-datepicker" +import clsx from "clsx" +import moment from "moment" -const getDateClassname = (d: Date, tempDate: Date) => { - return moment(d).format("YY,MM,DD") === moment(tempDate).format("YY,MM,DD") - ? "date chosen" - : `date ${ - moment(d).format("YY,MM,DD") < moment(new Date()).format("YY,MM,DD") - ? "past" - : "" - }` +const getDateClassname = ( + d: Date, + tempDate: Date | null, + greyPastDates: boolean = true +): string => { + const classes: string[] = ["date"] + if ( + tempDate && + moment(d).format("YY,MM,DD") === moment(tempDate).format("YY,MM,DD") + ) { + classes.push("chosen") + } else if ( + greyPastDates && + moment(d).format("YY,MM,DD") < moment(new Date()).format("YY,MM,DD") + ) { + classes.push("past") + } + return classes.join(" ") } const DatePicker: React.FC = ({ @@ -64,14 +77,16 @@ const DatePicker: React.FC = ({ >
- + {label && ( + + )}