binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: header buttons not working (#228)

Browse source 
fix:

header buttons not working.
sub-issues mutation.
customized the datepicker.
mutation in the list and kanban view.
some icons not displaying.
fixed routing and added toast alert after creating a workspace.
workspace logo display design in workspace settings.
delete issue mutation error in cycles and modules.

feat:

added authorization to issue details page.
This commit is contained in:
Aaryan Khandelwal 2023-02-01 20:33:18 +05:30 • committed by GitHub
parent 848fb2b960
commit 7e92efee23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
42 changed files with 887 additions and 736 deletions
Download patch file Download diff file Expand all files Collapse all files

20
apps/app/components/project/cycles/create-update-cycle-modal.tsx
View file

@ -217,15 +217,7 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
<CustomDatePicker
renderAs="input"
value={value}
onChange={(val: Date) => {
onChange(
val
? `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`
: null
);
}}
onChange={onChange}
error={errors.start_date ? true : false}
/>
)}
@ -246,15 +238,7 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
<CustomDatePicker
renderAs="input"
value={value}
onChange={(val: Date) => {
onChange(
val
? `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`
: null
);
}}
onChange={onChange}
error={errors.end_date ? true : false}
/>
)}

51
apps/app/components/project/cycles/cycle-detail-sidebar/index.tsx
View file

@ -1,6 +1,7 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import Image from "next/image";
import { mutate } from "swr";
@ -129,14 +130,28 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
<UserIcon className="h-4 w-4 flex-shrink-0" />
<p>Owned by</p>
</div>
<div className="sm:basis-1/2">
{cycle.owned_by.first_name !== "" ? (
<>
{cycle.owned_by.first_name} {cycle.owned_by.last_name}
</>
) : (
cycle.owned_by.email
)}
<div className="sm:basis-1/2 flex items-center gap-1">
{cycle.owned_by &&
(cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
<div className="h-5 w-5 rounded-full border-2 border-transparent">
<Image
src={cycle.owned_by.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={cycle.owned_by?.first_name}
/>
</div>
) : (
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
{cycle.owned_by?.first_name && cycle.owned_by.first_name !== ""
? cycle.owned_by.first_name.charAt(0)
: cycle.owned_by?.email.charAt(0)}
</div>
))}
{cycle.owned_by.first_name !== ""
? cycle.owned_by.first_name
: cycle.owned_by.email}
</div>
</div>
<div className="flex flex-wrap items-center py-2">
@ -171,13 +186,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
onChange={(val) =>
submitChanges({
start_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
start_date: val,
})
}
isClearable={false}
/>
)}
@ -196,13 +209,11 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
onChange={(val) =>
submitChanges({
end_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
end_date: val,
})
}
isClearable={false}
/>
)}

10
apps/app/components/project/issues/confirm-issue-deletion.tsx
View file

@ -25,9 +25,7 @@ type Props = {
data?: IIssue;
};
const ConfirmIssueDeletion: React.FC<Props> = (props) => {
const { isOpen, handleClose, data } = props;
const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) => {
const cancelButtonRef = useRef(null);
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@ -45,6 +43,8 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
handleClose();
};
console.log(data);
const handleDeletion = async () => {
setIsDeleteLoading(true);
if (!data || !workspaceSlug) return;
@ -62,8 +62,8 @@ const ConfirmIssueDeletion: React.FC<Props> = (props) => {
false
);
const moduleId = data.issue_module?.module;
const cycleId = data.issue_cycle?.cycle;
const moduleId = data?.module;
const cycleId = data?.cycle;
if (moduleId) {
mutate<ModuleIssueResponse[]>(

78
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
View file

@ -39,7 +39,7 @@ import {
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
// types
import type { ICycle, IIssue, IIssueLabels } from "types";
import type { ICycle, IIssue, IIssueLabels, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS, PROJECT_ISSUES_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
@ -50,6 +50,7 @@ type Props = {
submitChanges: (formData: Partial<IIssue>) => void;
issueDetail: IIssue | undefined;
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const defaultValues: Partial<IIssueLabels> = {
@ -62,6 +63,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
submitChanges,
issueDetail,
watch: watchIssue,
userAuth,
}) => {
const [createLabelForm, setCreateLabelForm] = useState(false);
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@ -122,6 +124,8 @@ const IssueDetailSidebar: React.FC<Props> = ({
});
};
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<>
<ConfirmIssueDeletion
@ -158,20 +162,22 @@ const IssueDetailSidebar: React.FC<Props> = ({
>
<LinkIcon className="h-3.5 w-3.5" />
</button>
<button
type="button"
className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
onClick={() => setDeleteIssueModal(true)}
>
<TrashIcon className="h-3.5 w-3.5" />
</button>
{!isNotAllowed && (
<button
type="button"
className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
onClick={() => setDeleteIssueModal(true)}
>
<TrashIcon className="h-3.5 w-3.5" />
</button>
)}
</div>
</div>
<div className="divide-y-2 divide-gray-100">
<div className="py-1">
<SelectState control={control} submitChanges={submitChanges} />
<SelectAssignee control={control} submitChanges={submitChanges} />
<SelectPriority control={control} submitChanges={submitChanges} watch={watchIssue} />
<SelectState control={control} submitChanges={submitChanges} userAuth={userAuth} />
<SelectAssignee control={control} submitChanges={submitChanges} userAuth={userAuth} />
<SelectPriority control={control} submitChanges={submitChanges} userAuth={userAuth} />
</div>
<div className="py-1">
<SelectParent
@ -202,16 +208,19 @@ const IssueDetailSidebar: React.FC<Props> = ({
)
}
watch={watchIssue}
userAuth={userAuth}
/>
<SelectBlocker
submitChanges={submitChanges}
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
watch={watchIssue}
userAuth={userAuth}
/>
<SelectBlocked
submitChanges={submitChanges}
issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
watch={watchIssue}
userAuth={userAuth}
/>
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -219,37 +228,18 @@ const IssueDetailSidebar: React.FC<Props> = ({
<p>Due date</p>
</div>
<div className="sm:basis-1/2">
{/* <Controller
control={control}
name="target_date"
render={({ field: { value, onChange } }) => (
<DatePicker
selected={value ? new Date(value) : new Date()}
onChange={(val: Date) => {
submitChanges({
target_date: `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`,
});
onChange(`${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`);
}}
dateFormat="dd-MM-yyyy"
/>
)}
/> */}
<Controller
control={control}
name="target_date"
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
onChange={(val) =>
submitChanges({
target_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
target_date: val,
})
}
disabled={isNotAllowed}
/>
)}
/>
@ -260,7 +250,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
<SelectCycle
issueDetail={issueDetail}
handleCycleChange={handleCycleChange}
watch={watchIssue}
userAuth={userAuth}
/>
</div>
</div>
@ -290,7 +280,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
>
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{ backgroundColor: singleLabel.colour ?? "green" }}
style={{ backgroundColor: singleLabel?.colour ?? "green" }}
/>
{singleLabel.name}
<XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
@ -307,12 +297,19 @@ const IssueDetailSidebar: React.FC<Props> = ({
onChange={(val: any) => submitChanges({ labels_list: val })}
className="flex-shrink-0"
multiple
disabled={isNotAllowed}
>
{({ open }) => (
<>
<Listbox.Label className="sr-only">Label</Listbox.Label>
<div className="relative">
<Listbox.Button className="flex cursor-pointer items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs hover:bg-gray-100">
<Listbox.Button
className={`flex ${
isNotAllowed
? "cursor-not-allowed"
: "cursor-pointer hover:bg-gray-100"
} items-center gap-2 rounded-2xl border px-2 py-0.5 text-xs`}
>
Select Label
</Listbox.Button>
@ -361,8 +358,11 @@ const IssueDetailSidebar: React.FC<Props> = ({
/>
<button
type="button"
className="flex cursor-pointer items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs hover:bg-gray-100"
className={`flex ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs`}
onClick={() => setCreateLabelForm((prevData) => !prevData)}
disabled={isNotAllowed}
>
{createLabelForm ? (
<>

25
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
View file

@ -5,29 +5,29 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// services
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services
import { UserGroupIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service";
// hooks
// headless ui
// ui
import { AssigneesList } from "components/ui/avatar";
import { Spinner } from "components/ui";
// icons
import User from "public/user.png";
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// constants
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type Props = {
control: Control<IIssue, any>;
submitChanges: (formData: Partial<IIssue>) => void;
userAuth: UserAuth;
};
const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
const SelectAssignee: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
@ -36,6 +36,8 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -55,16 +57,21 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
submitChanges({ assignees_list: value });
}}
className="flex-shrink-0"
disabled={isNotAllowed}
>
{({ open }) => (
<div className="relative">
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
<Listbox.Button
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center gap-1 text-xs`}
>
<span
className={`hidden truncate text-left sm:block ${
value ? "" : "text-gray-900"
}`}
>
<div className="flex cursor-pointer items-center gap-1 text-xs">
<div className="flex items-center gap-1 text-xs">
{value && Array.isArray(value) ? (
<AssigneesList userIds={value} length={10} />
) : null}
@ -82,7 +89,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-auto overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{people ? (
people.length > 0 ? (

30
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx
View file

@ -19,7 +19,7 @@ import { Button } from "components/ui";
import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { BlockedIcon, LayerDiagonalIcon } from "components/icons";
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -31,9 +31,10 @@ type Props = {
submitChanges: (formData: Partial<IIssue>) => void;
issuesList: IIssue[];
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) => {
const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
const [query, setQuery] = useState("");
const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
@ -95,6 +96,8 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
.includes(query.toLowerCase())
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-start py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -266,16 +269,18 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Combobox.Options>
</Combobox>
<div className="flex items-center justify-end gap-2 p-3">
<div>
<Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
{filteredIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3">
<div>
<Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button>
</div>
)}
</form>
</Dialog.Panel>
</Transition.Child>
@ -284,8 +289,11 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Transition.Root>
<button
type="button"
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
onClick={() => setIsBlockedModalOpen(true)}
disabled={isNotAllowed}
>
Select issues
</button>

30
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx
View file

@ -19,7 +19,7 @@ import { Button } from "components/ui";
import { FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { BlockerIcon, LayerDiagonalIcon } from "components/icons";
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -31,9 +31,10 @@ type Props = {
submitChanges: (formData: Partial<IIssue>) => void;
issuesList: IIssue[];
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) => {
const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch, userAuth }) => {
const [query, setQuery] = useState("");
const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
@ -95,6 +96,8 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
.includes(query.toLowerCase())
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-start py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -265,16 +268,18 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Combobox.Options>
</Combobox>
<div className="flex items-center justify-end gap-2 p-3">
<div>
<Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
{filteredIssues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3">
<div>
<Button type="button" theme="secondary" size="sm" onClick={handleClose}>
Close
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button>
</div>
<Button onClick={handleSubmit(onSubmit)} size="sm">
Add selected issues
</Button>
</div>
)}
</Dialog.Panel>
</Transition.Child>
</div>
@ -282,8 +287,11 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
</Transition.Root>
<button
type="button"
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
onClick={() => setIsBlockerModalOpen(true)}
disabled={isNotAllowed}
>
Select issues
</button>

11
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-cycle.tsx
View file

@ -4,8 +4,6 @@ import { useRouter } from "next/router";
import useSWR, { mutate } from "swr";
// react-hook-form
import { UseFormWatch } from "react-hook-form";
// services
import issuesService from "services/issues.service";
import cyclesService from "services/cycles.service";
@ -14,17 +12,17 @@ import { Spinner, CustomSelect } from "components/ui";
// icons
import { CyclesIcon } from "components/icons";
// types
import { ICycle, IIssue } from "types";
import { ICycle, IIssue, UserAuth } from "types";
// fetch-keys
import { CYCLE_ISSUES, CYCLE_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
type Props = {
issueDetail: IIssue | undefined;
handleCycleChange: (cycle: ICycle) => void;
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange, userAuth }) => {
const router = useRouter();
const { workspaceSlug, projectId, issueId } = router.query;
@ -52,6 +50,8 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
const issueCycle = issueDetail?.issue_cycle;
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -73,6 +73,7 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
? removeIssueFromCycle(issueCycle?.id ?? "", issueCycle?.cycle ?? "")
: handleCycleChange(cycles?.find((c) => c.id === value) as any);
}}
disabled={isNotAllowed}
>
{cycles ? (
cycles.length > 0 ? (

11
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-parent.tsx
View file

@ -13,7 +13,7 @@ import issuesServices from "services/issues.service";
import IssuesListModal from "components/project/issues/issues-list-modal";
// icons
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// fetch-keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
@ -23,6 +23,7 @@ type Props = {
issuesList: IIssue[];
customDisplay: JSX.Element;
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const SelectParent: React.FC<Props> = ({
@ -31,6 +32,7 @@ const SelectParent: React.FC<Props> = ({
issuesList,
customDisplay,
watch,
userAuth,
}) => {
const [isParentModalOpen, setIsParentModalOpen] = useState(false);
@ -46,6 +48,8 @@ const SelectParent: React.FC<Props> = ({
: null
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -73,8 +77,11 @@ const SelectParent: React.FC<Props> = ({
/>
<button
type="button"
className="flex w-full cursor-pointer items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
className={`flex w-full ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
} items-center justify-between gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
onClick={() => setIsParentModalOpen(true)}
disabled={isNotAllowed}
>
{watch("parent") && watch("parent") !== ""
? `${

92
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx
View file

@ -7,7 +7,7 @@ import { ChartBarIcon } from "@heroicons/react/24/outline";
import { CustomSelect } from "components/ui";
// icons
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// common
// constants
import { getPriorityIcon } from "constants/global";
@ -16,52 +16,54 @@ import { PRIORITIES } from "constants/";
type Props = {
control: Control<IIssue, any>;
submitChanges: (formData: Partial<IIssue>) => void;
watch: UseFormWatch<IIssue>;
userAuth: UserAuth;
};
const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<ChartBarIcon className="h-4 w-4 flex-shrink-0" />
<p>Priority</p>
const SelectPriority: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
<ChartBarIcon className="h-4 w-4 flex-shrink-0" />
<p>Priority</p>
</div>
<div className="sm:basis-1/2">
<Controller
control={control}
name="priority"
render={({ field: { value } }) => (
<CustomSelect
label={
<span
className={`flex items-center gap-2 text-left capitalize ${
value ? "" : "text-gray-900"
}`}
>
{getPriorityIcon(value && value !== "" ? value ?? "" : "None", "text-sm")}
{value && value !== "" ? value : "None"}
</span>
}
value={value}
onChange={(value: any) => {
submitChanges({ priority: value });
}}
disabled={isNotAllowed}
>
{PRIORITIES.map((option) => (
<CustomSelect.Option key={option} value={option} className="capitalize">
<>
{getPriorityIcon(option, "text-sm")}
{option ?? "None"}
</>
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
</div>
<div className="sm:basis-1/2">
<Controller
control={control}
name="state"
render={({ field: { value } }) => (
<CustomSelect
label={
<span
className={`flex items-center gap-2 text-left capitalize ${
value ? "" : "text-gray-900"
}`}
>
{getPriorityIcon(
watch("priority") && watch("priority") !== "" ? watch("priority") ?? "" : "None",
"text-sm"
)}
{watch("priority") && watch("priority") !== "" ? watch("priority") : "None"}
</span>
}
value={value}
onChange={(value: any) => {
submitChanges({ priority: value });
}}
>
{PRIORITIES.map((option) => (
<CustomSelect.Option key={option} value={option} className="capitalize">
<>
{getPriorityIcon(option, "text-sm")}
{option ?? "None"}
</>
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
</div>
);
);
};
export default SelectPriority;

8
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-state.tsx
View file

@ -12,16 +12,17 @@ import stateService from "services/state.service";
import { Spinner, CustomSelect } from "components/ui";
// icons
// types
import { IIssue } from "types";
import { IIssue, UserAuth } from "types";
// constants
import { STATE_LIST } from "constants/fetch-keys";
type Props = {
control: Control<IIssue, any>;
submitChanges: (formData: Partial<IIssue>) => void;
userAuth: UserAuth;
};
const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
const SelectState: React.FC<Props> = ({ control, submitChanges, userAuth }) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -32,6 +33,8 @@ const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
: null
);
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -67,6 +70,7 @@ const SelectState: React.FC<Props> = ({ control, submitChanges }) => {
onChange={(value: any) => {
submitChanges({ state: value });
}}
disabled={isNotAllowed}
>
{states ? (
states.length > 0 ? (

20
apps/app/components/project/modules/create-update-module-modal/index.tsx
View file

@ -207,15 +207,7 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
<CustomDatePicker
renderAs="input"
value={value}
onChange={(val: Date) => {
onChange(
val
? `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`
: null
);
}}
onChange={onChange}
error={errors.start_date ? true : false}
/>
)}
@ -236,15 +228,7 @@ const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, pro
<CustomDatePicker
renderAs="input"
value={value}
onChange={(val: Date) => {
onChange(
val
? `${val.getFullYear()}-${
val.getMonth() + 1
}-${val.getDate()}`
: null
);
}}
onChange={onChange}
error={errors.target_date ? true : false}
/>
)}

71
apps/app/components/project/modules/create-update-module-modal/select-status.tsx
View file

@ -1,14 +1,14 @@
// react
import React from "react";
// react hook form
import { Controller, FieldError, Control } from "react-hook-form";
import { Squares2X2Icon } from "@heroicons/react/24/outline";
// import type { Control } from "react-hook-form";
// ui
import type { IModule } from "types";
import { CustomListbox } from "components/ui";
// icons
import { Squares2X2Icon } from "@heroicons/react/24/outline";
// types
import type { IModule } from "types";
// constants
import { MODULE_STATUS } from "constants/";
type Props = {
@ -16,38 +16,33 @@ type Props = {
error?: FieldError;
};
const SelectStatus: React.FC<Props> = (props) => {
const { control, error } = props;
return (
<Controller
control={control}
rules={{ required: true }}
name="status"
render={({ field: { value, onChange } }) => (
<div>
<CustomListbox
className={`${
error
? "border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:outline-none focus:ring-red-500"
: ""
}`}
title="Status"
options={MODULE_STATUS.map((status) => ({
value: status.value,
display: status.label,
color: status.color,
}))}
value={value}
optionsFontsize="sm"
onChange={onChange}
icon={<Squares2X2Icon className="h-3 w-3 text-gray-400" />}
/>
{error && <p className="mt-1 text-sm text-red-600">{error.message}</p>}
</div>
)}
/>
);
};
const SelectStatus: React.FC<Props> = ({ control, error }) => (
<Controller
control={control}
rules={{ required: true }}
name="status"
render={({ field: { value, onChange } }) => (
<div>
<CustomListbox
className={`${
error
? "border-red-500 bg-red-100 hover:bg-red-100 focus:outline-none focus:ring-red-500"
: ""
}`}
title="Status"
options={MODULE_STATUS.map((status) => ({
value: status.value,
display: status.label,
color: status.color,
}))}
value={value}
optionsFontsize="sm"
onChange={onChange}
icon={<Squares2X2Icon className={`h-3 w-3 ${error ? "text-black" : "text-gray-400"}`} />}
/>
{error && <p className="mt-1 text-sm text-red-600">{error.message}</p>}
</div>
)}
/>
);
export default SelectStatus;

27
apps/app/components/project/modules/module-detail-sidebar/index.tsx
View file

@ -5,6 +5,7 @@ import { useRouter } from "next/router";
import { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// services
import {
@ -160,7 +161,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
</div>
<div className="divide-y-2 divide-gray-100 text-xs">
<div className="py-1">
<SelectLead control={control} submitChanges={submitChanges} />
<SelectLead
control={control}
submitChanges={submitChanges}
lead={module.lead_detail}
/>
<SelectMembers control={control} submitChanges={submitChanges} />
<div className="flex flex-wrap items-center py-2">
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
@ -194,13 +199,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
onChange={(val) =>
submitChanges({
start_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
start_date: val,
})
}
/>
)}
/>
@ -218,13 +221,11 @@ const ModuleDetailSidebar: React.FC<Props> = ({
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
onChange={(val) =>
submitChanges({
target_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
target_date: val,
})
}
/>
)}
/>

197
apps/app/components/project/modules/module-detail-sidebar/select-lead.tsx
View file

@ -5,26 +5,27 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// services
import { Listbox, Transition } from "@headlessui/react";
import { UserIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service";
// headless ui
// ui
import { Spinner } from "components/ui";
import { Listbox, Transition } from "@headlessui/react";
// services
import workspaceService from "services/workspace.service";
// icons
import { UserIcon } from "@heroicons/react/24/outline";
import User from "public/user.png";
// types
import { IModule } from "types";
// constants
import { IModule, IUserLite } from "types";
// fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type Props = {
control: Control<Partial<IModule>, any>;
submitChanges: (formData: Partial<IModule>) => void;
lead: IUserLite | null;
};
const SelectLead: React.FC<Props> = ({ control, submitChanges }) => {
const SelectLead: React.FC<Props> = ({ control, submitChanges, lead }) => {
const router = useRouter();
const { workspaceSlug } = router.query;
@ -52,102 +53,110 @@ const SelectLead: React.FC<Props> = ({ control, submitChanges }) => {
}}
className="flex-shrink-0"
>
{({ open }) => {
const person = people?.find((p) => p.member.id === value)?.member;
return (
<div className="relative">
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
<span
className={`hidden truncate text-left sm:block ${
value ? "" : "text-gray-900"
}`}
>
<div className="flex cursor-pointer items-center gap-1 text-xs">
{person && person.avatar && person.avatar !== "" ? (
{({ open }) => (
<div className="relative">
<Listbox.Button className="flex w-full cursor-pointer items-center gap-1 text-xs">
<span
className={`hidden truncate text-left sm:block ${
value ? "" : "text-gray-900"
}`}
>
<div className="flex items-center gap-1 text-xs">
{lead ? (
lead.avatar && lead.avatar !== "" ? (
<div className="h-5 w-5 rounded-full border-2 border-transparent">
<Image
src={person.avatar}
src={lead.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={person.first_name}
alt={lead?.first_name}
/>
</div>
) : (
<div
className={`grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white`}
>
{person?.first_name && person.first_name !== ""
? person.first_name.charAt(0)
: person?.email.charAt(0)}
<div className="grid h-5 w-5 place-items-center rounded-full border-2 border-white bg-gray-700 capitalize text-white">
{lead?.first_name && lead.first_name !== ""
? lead.first_name.charAt(0)
: lead?.email.charAt(0)}
</div>
)}
{person?.first_name && person.first_name !== ""
? person?.first_name + " " + person?.last_name
: person?.email}
</div>
</span>
</Listbox.Button>
)
) : (
<div className="h-5 w-5 rounded-full border-2 border-white bg-white">
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)}
{lead
? lead?.first_name && lead.first_name !== ""
? lead?.first_name
: lead?.email
: "N/A"}
</div>
</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{people ? (
people.length > 0 ? (
people.map((option) => (
<Listbox.Option
key={option.member.id}
className={({ active, selected }) =>
`${
active || selected ? "bg-indigo-50" : ""
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
}
value={option.member.id}
>
{option.member.avatar && option.member.avatar !== "" ? (
<div className="relative h-4 w-4">
<Image
src={option.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name.charAt(0)
: option.member.email.charAt(0)}
</div>
)}
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name
: option.member.email}
</Listbox.Option>
))
) : (
<div className="text-center">No members found</div>
)
<Transition
show={open}
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
{people ? (
people.length > 0 ? (
people.map((option) => (
<Listbox.Option
key={option.member.id}
className={({ active, selected }) =>
`${
active || selected ? "bg-indigo-50" : ""
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
}
value={option.member.id}
>
{option.member.avatar && option.member.avatar !== "" ? (
<div className="relative h-4 w-4">
<Image
src={option.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name.charAt(0)
: option.member.email.charAt(0)}
</div>
)}
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name
: option.member.email}
</Listbox.Option>
))
) : (
<Spinner />
)}
</div>
</Listbox.Options>
</Transition>
</div>
);
}}
<div className="text-center">No members found</div>
)
) : (
<p className="text-xs text-gray-500 px-2">Loading...</p>
)}
</div>
</Listbox.Options>
</Transition>
</div>
)}
</Listbox>
)}
/>

6
apps/app/components/project/modules/module-detail-sidebar/select-members.tsx
View file

@ -12,7 +12,7 @@ import { UserGroupIcon } from "@heroicons/react/24/outline";
import workspaceService from "services/workspace.service";
// headless ui
// ui
import { AssigneesList, Spinner } from "components/ui";
import { AssigneesList } from "components/ui";
// types
import { IModule } from "types";
// constants
@ -78,7 +78,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 w-auto overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<Listbox.Options className="absolute left-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-full">
<div className="py-1">
{people ? (
people.length > 0 ? (
@ -118,7 +118,7 @@ const SelectMembers: React.FC<Props> = ({ control, submitChanges }) => {
<div className="text-center">No members found</div>
)
) : (
<Spinner />
<p className="text-xs text-gray-500 px-2">Loading...</p>
)}
</div>
</Listbox.Options>

2
apps/app/components/project/sidebar-list.tsx
View file

@ -88,7 +88,7 @@ export const ProjectSidebarList: FC = () => {
}`}
>
{project.icon ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase text-white">
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{String.fromCodePoint(parseInt(project.icon))}
</span>
) : (