Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: create issue modal #196

Merged
merged 5 commits into from
Jan 26, 2023
Merged

fix: create issue modal #196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f7fad4d
fix: cycle mutation in issue details page
aaryan610 Jan 25, 2023
4adf37c
fix: remove issue from cycle mutation
aaryan610 Jan 25, 2023
bc0146d
fix: create issue modal in home page
aaryan610 Jan 26, 2023
34e6a93
fix: removed unnecessary props
aaryan610 Jan 26, 2023
67da0c7
fix: updated create issue form status
aaryan610 Jan 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/app/components/command-palette/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,6 @@ const CommandPalette: React.FC = () => {
<CreateUpdateIssueModal
isOpen={isIssueModalOpen}
handleClose={() => setIsIssueModalOpen(false)}
projectId={projectId as string}
/>
<BulkDeleteIssuesModal
isOpen={isBulkDeleteIssuesModalOpen}
Expand Down
2 changes: 1 addition & 1 deletion apps/app/components/common/board-view/single-issue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ type Props = {
issue: IIssue;
properties: Properties;
snapshot?: DraggableStateSnapshot;
assignees: IUserLite[] | (IUserLite | undefined)[];
assignees: Partial<IUserLite>[] | (Partial<IUserLite> | undefined)[];
people: IWorkspaceMember[] | undefined;
handleDeleteIssue?: React.Dispatch<React.SetStateAction<string | undefined>>;
partialUpdateIssue: any;
Expand Down
4 changes: 2 additions & 2 deletions apps/app/components/cycles/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const CycleModal: React.FC<CycleModalProps> = (props) => {

return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-30" onClose={handleClose}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
Expand All @@ -86,7 +86,7 @@ export const CycleModal: React.FC<CycleModalProps> = (props) => {
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={Fragment}
Expand Down
31 changes: 20 additions & 11 deletions apps/app/components/issues/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,26 @@ const defaultValues: Partial<IIssue> = {

export interface IssueFormProps {
handleFormSubmit: (values: Partial<IIssue>) => void;
projectId: string;
initialData?: Partial<IIssue>;
issues: IIssue[];
projectId: string;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
createMore: boolean;
setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
handleClose: () => void;
status: boolean;
}

export const IssueForm: FC<IssueFormProps> = ({
handleFormSubmit,
initialData,
issues = [],
projectId,
setActiveProject,
createMore,
setCreateMore,
handleClose,
status,
}) => {
// states
const [mostSimilarIssue, setMostSimilarIssue] = useState<IIssue | undefined>();
Expand Down Expand Up @@ -141,11 +145,15 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control}
name="project"
render={({ field: { value, onChange } }) => (
<IssueProjectSelect value={value} onChange={onChange} />
<IssueProjectSelect
value={value}
onChange={onChange}
setActiveProject={setActiveProject}
/>
)}
/>
<h3 className="text-lg font-medium leading-6 text-gray-900">
{initialData ? "Update" : "Create"} Issue
{status ? "Update" : "Create"} Issue
</h3>
</div>
{watch("parent") && watch("parent") !== "" ? (
Expand Down Expand Up @@ -245,18 +253,19 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control}
name="state"
render={({ field: { value, onChange } }) => (
<IssueStateSelect setIsOpen={setStateModal} value={value} onChange={onChange} />
<IssueStateSelect
setIsOpen={setStateModal}
value={value}
onChange={onChange}
projectId={projectId}
/>
)}
/>
<Controller
control={control}
name="cycle"
render={({ field: { value, onChange } }) => (
<IssueCycleSelect
projectId={projectId as string}
value={value}
onChange={onChange}
/>
<IssueCycleSelect projectId={projectId} value={value} onChange={onChange} />
)}
/>
<Controller
Expand All @@ -277,7 +286,7 @@ export const IssueForm: FC<IssueFormProps> = ({
control={control}
name="labels_list"
render={({ field: { value, onChange } }) => (
<IssueLabelSelect value={value} onChange={onChange} />
<IssueLabelSelect value={value} onChange={onChange} projectId={projectId} />
)}
/>
<Controller
Expand Down Expand Up @@ -357,7 +366,7 @@ export const IssueForm: FC<IssueFormProps> = ({
Discard
</Button>
<Button type="submit" disabled={isSubmitting}>
{initialData
{status
? isSubmitting
? "Updating Issue..."
: "Update Issue"
Expand Down
126 changes: 55 additions & 71 deletions apps/app/components/issues/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import {
export interface IssuesModalProps {
isOpen: boolean;
handleClose: () => void;
projectId: string;
data?: IIssue | null;
prePopulateData?: Partial<IIssue>;
isUpdatingSingleIssue?: boolean;
Expand All @@ -47,26 +46,25 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
isOpen,
handleClose,
data,
projectId,
prePopulateData,
isUpdatingSingleIssue = false,
}) => {
// states
const [createMore, setCreateMore] = useState(false);
const [isCycleModalOpen, setIsCycleModalOpen] = useState(false);
const [isStateModalOpen, setIsStateModalOpen] = useState(false);
const [activeProject, setActiveProject] = useState<string | null>(null);

const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, projectId } = router.query;

const { user } = useUser();
const { setToastAlert } = useToast();

const { data: issues } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId) : null,
workspaceSlug && projectId
? () => issuesService.getIssues(workspaceSlug as string, projectId)
workspaceSlug && activeProject
? PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? "")
: null,
workspaceSlug && activeProject
? () => issuesService.getIssues(workspaceSlug as string, activeProject ?? "")
: null
);

Expand All @@ -89,7 +87,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
if (!workspaceSlug || !projectId) return;

await issuesService
.addIssueToCycle(workspaceSlug as string, projectId, cycleId, {
.addIssueToCycle(workspaceSlug as string, activeProject ?? "", cycleId, {
issues: [issueId],
})
.then((res) => {
Expand All @@ -102,7 +100,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
);
} else
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((issue) => {
Expand All @@ -122,7 +120,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
if (!workspaceSlug || !projectId) return;

await modulesService
.addIssuesToModule(workspaceSlug as string, projectId, moduleId as string, {
.addIssuesToModule(workspaceSlug as string, activeProject ?? "", moduleId as string, {
issues: [issueId],
})
.then((res) => {
Expand All @@ -134,9 +132,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({

const createIssue = async (payload: Partial<IIssue>) => {
await issuesService
.createIssues(workspaceSlug as string, projectId as string, payload)
.createIssues(workspaceSlug as string, activeProject ?? "", payload)
.then((res) => {
mutate<IssueResponse>(PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string));
mutate<IssueResponse>(PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""));

if (payload.cycle && payload.cycle !== "") addIssueToCycle(res.id, payload.cycle);
if (payload.module && payload.module !== "") addIssueToModule(res.id, payload.module);
Expand Down Expand Up @@ -174,13 +172,13 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({

const updateIssue = async (payload: Partial<IIssue>) => {
await issuesService
.updateIssue(workspaceSlug as string, projectId as string, data?.id ?? "", payload)
.updateIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload)
.then((res) => {
if (isUpdatingSingleIssue) {
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
} else
mutate<IssueResponse>(
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId),
PROJECT_ISSUES_LIST(workspaceSlug as string, activeProject ?? ""),
(prevData) => ({
...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((issue) => {
Expand Down Expand Up @@ -208,7 +206,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
};

const handleFormSubmit = async (formData: Partial<IIssue>) => {
if (workspaceSlug && projectId) {
if (workspaceSlug && activeProject) {
const payload: Partial<IIssue> = {
...formData,
target_date: formData.target_date ? renderDateFormat(formData.target_date ?? "") : null,
Expand All @@ -220,62 +218,48 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
};

return (
<>
{projectId && (
<>
<CreateUpdateStateModal
isOpen={isStateModalOpen}
handleClose={() => setIsStateModalOpen(false)}
projectId={projectId}
/>
<CreateUpdateCycleModal
isOpen={isCycleModalOpen}
setIsOpen={setIsCycleModalOpen}
projectId={projectId}
/>
</>
)}
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}>
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>

<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<IssueForm
projectId={projectId}
issues={issues?.results ?? []}
handleFormSubmit={handleFormSubmit}
initialData={prePopulateData}
createMore={createMore}
setCreateMore={setCreateMore}
handleClose={handleClose}
/>
</Dialog.Panel>
</Transition.Child>
</div>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
<Transition.Child
as={React.Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<IssueForm
issues={issues?.results ?? []}
handleFormSubmit={handleFormSubmit}
initialData={prePopulateData}
createMore={createMore}
setCreateMore={setCreateMore}
handleClose={handleClose}
projectId={activeProject ?? ""}
setActiveProject={setActiveProject}
status={data ? true : false}
/>
</Dialog.Panel>
</Transition.Child>
</div>
</Dialog>
</Transition.Root>
</>
</div>
</Dialog>
</Transition.Root>
);
};
9 changes: 5 additions & 4 deletions apps/app/components/issues/select/label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,26 @@ import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
type Props = {
value: string[];
onChange: (value: string[]) => void;
projectId: string;
};

const defaultValues: Partial<IIssueLabels> = {
name: "",
};

export const IssueLabelSelect: React.FC<Props> = ({ value, onChange }) => {
export const IssueLabelSelect: React.FC<Props> = ({ value, onChange, projectId }) => {
// states
const [query, setQuery] = useState("");

const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug } = router.query;

const [isOpen, setIsOpen] = useState(false);

const { data: issueLabels, mutate: issueLabelsMutate } = useSWR<IIssueLabels[]>(
workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(workspaceSlug as string) : null,
projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
workspaceSlug && projectId
? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId)
: null
);

Expand Down
15 changes: 13 additions & 2 deletions apps/app/components/issues/select/project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,14 @@ import { PROJECTS_LIST } from "constants/fetch-keys";
export interface IssueProjectSelectProps {
value: string;
onChange: (value: string) => void;
setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
}

export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({ value, onChange }) => {
export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({
value,
onChange,
setActiveProject,
}) => {
const router = useRouter();
const { workspaceSlug } = router.query;

Expand All @@ -30,7 +35,13 @@ export const IssueProjectSelect: FC<IssueProjectSelectProps> = ({ value, onChang

return (
<>
<Listbox value={value} onChange={onChange}>
<Listbox
value={value}
onChange={(val) => {
onChange(val);
setActiveProject(val);
}}
>
{({ open }) => (
<>
<div className="relative">
Expand Down
Loading