fix: ui changes (#306)
* fix: sidebar date range * fix: renamed key with id in filters * fix: replace progress bar * chore: react progress bar package removed * fix: progress chart legends position * fix: progress chart legends alignment fix
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
e5934e0b07
commit
202096500e
7 changed files with 190 additions and 145 deletions
|
|
@ -16,8 +16,6 @@ import {
|
|||
Squares2X2Icon,
|
||||
TrashIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// progress-bar
|
||||
import { CircularProgressbar } from "react-circular-progressbar";
|
||||
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
import DatePicker from "react-datepicker";
|
||||
|
|
@ -31,12 +29,11 @@ import { LinkModal, SidebarProgressStats } from "components/core";
|
|||
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
|
||||
import ProgressChart from "components/core/sidebar/progress-chart";
|
||||
|
||||
import "react-circular-progressbar/dist/styles.css";
|
||||
// components
|
||||
// ui
|
||||
import { CustomSelect, Loader } from "components/ui";
|
||||
import { CustomSelect, Loader, ProgressBar } from "components/ui";
|
||||
// helpers
|
||||
import { renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
|
||||
import { renderDateFormat, renderShortNumericDateFormat, timeAgo } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { groupBy } from "helpers/array.helper";
|
||||
// types
|
||||
|
|
@ -190,61 +187,93 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<Popover className="flex justify-center items-center relative rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center gap-2 rounded-md border bg-transparent h-full w-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none ${
|
||||
open ? "bg-gray-100" : ""
|
||||
}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>
|
||||
{renderShortNumericDateFormat(`${module?.start_date}`)
|
||||
? renderShortNumericDateFormat(`${module?.start_date}`)
|
||||
: "N/A"}{" "}
|
||||
-{" "}
|
||||
{renderShortNumericDateFormat(`${module?.target_date}`)
|
||||
? renderShortNumericDateFormat(`${module?.target_date}`)
|
||||
: "N/A"}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
<div className="flex justify-center items-center gap-2 rounded-md border bg-transparent h-full p-2 px-4 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-900 focus:outline-none">
|
||||
<Popover className="flex justify-center items-center relative rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
|
||||
>
|
||||
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 mr-2" />
|
||||
<span>
|
||||
{renderShortNumericDateFormat(`${module?.start_date}`)
|
||||
? renderShortNumericDateFormat(`${module?.start_date}`)
|
||||
: "N/A"}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 left-0 z-20 transform overflow-hidden">
|
||||
<DatePicker
|
||||
selected={startDateRange}
|
||||
onChange={(dates) => {
|
||||
const [start, end] = dates;
|
||||
submitChanges({
|
||||
start_date: start?.toISOString(),
|
||||
target_date: end?.toISOString(),
|
||||
});
|
||||
if (setStartDateRange) {
|
||||
setStartDateRange(start);
|
||||
}
|
||||
if (setEndDateRange) {
|
||||
setEndDateRange(end);
|
||||
}
|
||||
}}
|
||||
startDate={startDateRange}
|
||||
endDate={endDateRange}
|
||||
selectsRange
|
||||
inline
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 -left-10 z-20 transform overflow-hidden">
|
||||
<DatePicker
|
||||
selected={startDateRange}
|
||||
onChange={(date) => {
|
||||
submitChanges({
|
||||
start_date: renderDateFormat(date),
|
||||
});
|
||||
setStartDateRange(date);
|
||||
}}
|
||||
selectsStart
|
||||
startDate={startDateRange}
|
||||
endDate={endDateRange}
|
||||
inline
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<Popover className="flex justify-center items-center relative rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center ${open ? "bg-gray-100" : ""}`}
|
||||
>
|
||||
<span>
|
||||
-{" "}
|
||||
{renderShortNumericDateFormat(`${module?.target_date}`)
|
||||
? renderShortNumericDateFormat(`${module?.target_date}`)
|
||||
: "N/A"}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 -right-20 z-20 transform overflow-hidden">
|
||||
<DatePicker
|
||||
selected={endDateRange}
|
||||
onChange={(date) => {
|
||||
submitChanges({
|
||||
target_date: renderDateFormat(date),
|
||||
});
|
||||
setEndDateRange(date);
|
||||
}}
|
||||
selectsEnd
|
||||
startDate={startDateRange}
|
||||
endDate={endDateRange}
|
||||
minDate={startDateRange}
|
||||
inline
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between pb-3">
|
||||
<h4 className="text-sm font-medium">{module.name}</h4>
|
||||
|
|
@ -297,10 +326,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ issues, module, isOpen,
|
|||
<div className="flex items-center gap-2 sm:basis-1/2">
|
||||
<div className="grid flex-shrink-0 place-items-center">
|
||||
<span className="h-4 w-4">
|
||||
<CircularProgressbar
|
||||
<ProgressBar
|
||||
value={groupedIssues.completed.length}
|
||||
maxValue={moduleIssues?.length}
|
||||
strokeWidth={10}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue