refractor: changed to due date from target date

This commit is contained in:
Dakshesh Jain 2022-12-21 12:45:46 +05:30
parent a4b738508f
commit 08deff5d21
7 changed files with 41 additions and 39 deletions

View File

@ -228,7 +228,7 @@ const SingleIssue: React.FC<Props> = ({
</div> </div>
</div> </div>
)} )}
{properties.target_date && ( {properties.due_date && (
<div <div
className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${ className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
issue.target_date === null issue.target_date === null
@ -246,10 +246,10 @@ const SingleIssue: React.FC<Props> = ({
<div> <div>
{issue.target_date && {issue.target_date &&
(issue.target_date < new Date().toISOString() (issue.target_date < new Date().toISOString()
? `Target date has passed by ${findHowManyDaysLeft(issue.target_date)} days` ? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
: findHowManyDaysLeft(issue.target_date) <= 3 : findHowManyDaysLeft(issue.target_date) <= 3
? `Target date is in ${findHowManyDaysLeft(issue.target_date)} days` ? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
: "Target date")} : "Due date")}
</div> </div>
</div> </div>
</div> </div>

View File

@ -218,7 +218,7 @@ const CyclesListView: React.FC<Props> = ({
</div> </div>
</div> </div>
)} )}
{properties.target_date && ( {properties.due_date && (
<div <div
className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${ className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
issue.target_date === null issue.target_date === null
@ -234,23 +234,21 @@ const CyclesListView: React.FC<Props> = ({
? renderShortNumericDateFormat(issue.target_date) ? renderShortNumericDateFormat(issue.target_date)
: "N/A"} : "N/A"}
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap"> <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1 text-gray-900"> <h5 className="font-medium mb-1 text-gray-900">Due date</h5>
Target date
</h5>
<div> <div>
{renderShortNumericDateFormat(issue.target_date ?? "")} {renderShortNumericDateFormat(issue.target_date ?? "")}
</div> </div>
<div> <div>
{issue.target_date && {issue.target_date &&
(issue.target_date < new Date().toISOString() (issue.target_date < new Date().toISOString()
? `Target date has passed by ${findHowManyDaysLeft( ? `Due date has passed by ${findHowManyDaysLeft(
issue.target_date issue.target_date
)} days` )} days`
: findHowManyDaysLeft(issue.target_date) <= 3 : findHowManyDaysLeft(issue.target_date) <= 3
? `Target date is in ${findHowManyDaysLeft( ? `Due date is in ${findHowManyDaysLeft(
issue.target_date issue.target_date
)} days` )} days`
: "Target date")} : "Due date")}
</div> </div>
</div> </div>
</div> </div>

View File

@ -310,7 +310,7 @@ const ListView: React.FC<Props> = ({
</div> </div>
</div> </div>
)} )}
{properties.target_date && ( {properties.due_date && (
<div <div
className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${ className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
issue.target_date === null issue.target_date === null
@ -335,14 +335,14 @@ const ListView: React.FC<Props> = ({
<div> <div>
{issue.target_date && {issue.target_date &&
(issue.target_date < new Date().toISOString() (issue.target_date < new Date().toISOString()
? `Target date has passed by ${findHowManyDaysLeft( ? `Due date has passed by ${findHowManyDaysLeft(
issue.target_date issue.target_date
)} days` )} days`
: findHowManyDaysLeft(issue.target_date) <= 3 : findHowManyDaysLeft(issue.target_date) <= 3
? `Target date is in ${findHowManyDaysLeft( ? `Due date is in ${findHowManyDaysLeft(
issue.target_date issue.target_date
)} days` )} days`
: "Target date")} : "Due date")}
</div> </div>
</div> </div>
</div> </div>

View File

@ -16,7 +16,7 @@ const initialValues: Properties = {
assignee: true, assignee: true,
priority: false, priority: false,
start_date: false, start_date: false,
target_date: false, due_date: false,
cycle: false, cycle: false,
children_count: false, children_count: false,
}; };
@ -26,7 +26,7 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
const { user } = useUser(); const { user } = useUser();
const { data: issueProperties } = useSWR<IssuePriorities>( const { data: issueProperties, mutate: mutateIssueProperties } = useSWR<IssuePriorities>(
workspaceSlug && projectId ? ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) : null, workspaceSlug && projectId ? ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) : null,
workspaceSlug && projectId workspaceSlug && projectId
? () => issueServices.getIssueProperties(workspaceSlug, projectId) ? () => issueServices.getIssueProperties(workspaceSlug, projectId)
@ -56,6 +56,14 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
(key: keyof Properties) => { (key: keyof Properties) => {
if (!workspaceSlug || !projectId || !issueProperties || !user) return; if (!workspaceSlug || !projectId || !issueProperties || !user) return;
setProperties((prev) => ({ ...prev, [key]: !prev[key] })); setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
mutateIssueProperties(
(prev) =>
({
...prev,
properties: { ...prev?.properties, [key]: !prev?.properties?.[key] },
} as IssuePriorities),
false
);
if (Object.keys(issueProperties).length > 0) { if (Object.keys(issueProperties).length > 0) {
issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, { issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
properties: { properties: {
@ -71,23 +79,19 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
}); });
} }
}, },
[workspaceSlug, projectId, issueProperties, user] [workspaceSlug, projectId, issueProperties, user, mutateIssueProperties]
); );
const newProperties = Object.keys(properties).reduce((obj: any, key) => { const newProperties: Properties = {
if ( key: properties.key,
key !== "children" && state: properties.state,
key !== "name" && assignee: properties.assignee,
key !== "parent" && priority: properties.priority,
key !== "project" && start_date: properties.start_date,
key !== "description" && due_date: properties.due_date,
key !== "attachments" && cycle: properties.cycle,
key !== "sequence_id" children_count: properties.children_count,
) { };
obj[key] = properties[key as keyof Properties];
}
return obj;
}, {});
return [newProperties, updateIssueProperties] as const; return [newProperties, updateIssueProperties] as const;
}; };

View File

@ -16,7 +16,7 @@ const initialValues: Properties = {
assignee: true, assignee: true,
priority: false, priority: false,
start_date: false, start_date: false,
target_date: false, due_date: false,
cycle: false, cycle: false,
children_count: false, children_count: false,
}; };

View File

@ -398,7 +398,7 @@ const MyIssues: NextPage = () => {
</div> </div>
</div> </div>
)} )}
{properties.target_date && ( {properties.due_date && (
<div <div
className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${ className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
issue.target_date === null issue.target_date === null
@ -415,7 +415,7 @@ const MyIssues: NextPage = () => {
: "N/A"} : "N/A"}
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap"> <div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1 text-gray-900"> <h5 className="font-medium mb-1 text-gray-900">
Target date Due date
</h5> </h5>
<div> <div>
{renderShortNumericDateFormat(issue.target_date ?? "")} {renderShortNumericDateFormat(issue.target_date ?? "")}
@ -423,14 +423,14 @@ const MyIssues: NextPage = () => {
<div> <div>
{issue.target_date && {issue.target_date &&
(issue.target_date < new Date().toISOString() (issue.target_date < new Date().toISOString()
? `Target date has passed by ${findHowManyDaysLeft( ? `Due date has passed by ${findHowManyDaysLeft(
issue.target_date issue.target_date
)} days` )} days`
: findHowManyDaysLeft(issue.target_date) <= 3 : findHowManyDaysLeft(issue.target_date) <= 3
? `Target date is in ${findHowManyDaysLeft( ? `Due date is in ${findHowManyDaysLeft(
issue.target_date issue.target_date
)} days` )} days`
: "Target date")} : "Due date")}
</div> </div>
</div> </div>
</div> </div>

View File

@ -130,7 +130,7 @@ export type Properties = {
assignee: boolean; assignee: boolean;
priority: boolean; priority: boolean;
start_date: boolean; start_date: boolean;
target_date: boolean; due_date: boolean;
cycle: boolean; cycle: boolean;
children_count: boolean; children_count: boolean;
}; };