Skip to content

Commit

Permalink
feat: add table view for daily plan tasks (#3335)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CREDO23
CREDO23 authored Nov 18, 2024
1 parent 628a39e commit ae9cb25
Show file tree
Hide file tree
Showing 11 changed files with 486 additions and 254 deletions.
6 changes: 3 additions & 3 deletions apps/web/components/ui/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
header.column.columnDef.header,
header.getContext()
)}
</div>
</Tooltip>
</TableHead>
Expand Down
220 changes: 118 additions & 102 deletions apps/web/lib/features/task/daily-plan/future-tasks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { filterDailyPlan } from '@app/hooks/useFilterDateRange';
import { IDailyPlan } from '@app/interfaces';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import { useDateRange } from '@app/hooks/useDateRange';
import DailyPlanTasksTableView from './table-view';

export function FutureTasks({ profile }: { profile: any }) {
const { deleteDailyPlan, deleteDailyPlanLoading, futurePlans } = useDailyPlan();
Expand Down Expand Up @@ -57,115 +58,130 @@ export function FutureTasks({ profile }: { profile: any }) {
</AccordionTrigger>
<AccordionContent className="border-none dark:bg-dark--theme">
<PlanHeader plan={plan} planMode="Future Tasks" />
<Droppable droppableId={plan.id as string} key={plan.id} type="task">
{(provided) => (
<ul
ref={provided.innerRef}
{...provided.droppableProps}
className={clsxm(
view === 'CARDS' && 'flex-col',
view === 'TABLE' && 'flex-wrap',
'flex gap-2 pb-[1.5rem]',
view === 'BLOCKS' && 'overflow-x-auto'
)}
>
{plan.tasks?.map((task, index) =>
view === 'CARDS' ? (
<Draggable key={task.id} draggableId={task.id} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
marginBottom: 4
}}
>
<TaskCard
key={`${task.id}${plan.id}`}
isAuthUser={true}
activeAuthTask={true}
viewType={'dailyplan'}
task={task}
profile={profile}
type="HORIZONTAL"
taskBadgeClassName={`rounded-sm`}
taskTitleClassName="mt-[0.0625rem]"
plan={plan}
planMode="Future Tasks"
className="shadow-[0px_0px_15px_0px_#e2e8f0]"
/>
</div>
)}
</Draggable>
) : (
<Draggable key={task.id} draggableId={task.id} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
marginBottom: 8
}}
>
<TaskBlockCard task={task} />
</div>
)}
</Draggable>
)
)}
<>{provided.placeholder}</>
{canSeeActivity ? (
<div className="flex shrink-0 justify-end">
<AlertPopup
open={currentDeleteIndex === index && popupOpen}
buttonOpen={
//button open popup
{view === 'TABLE' ? (
<DailyPlanTasksTableView
profile={profile}
plan={plan}
data={plan.tasks ?? []}
/>
) : (
<Droppable droppableId={plan.id as string} key={plan.id} type="task">
{(provided) => (
<ul
ref={provided.innerRef}
{...provided.droppableProps}
className={clsxm(
view === 'CARDS' && 'flex-col',
'flex gap-2 pb-[1.5rem]',
view === 'BLOCKS' && 'overflow-x-auto'
)}
>
{plan.tasks?.map((task, index) =>
view === 'CARDS' ? (
<Draggable
key={task.id}
draggableId={task.id}
index={index}
>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
marginBottom: 4
}}
>
<TaskCard
key={`${task.id}${plan.id}`}
isAuthUser={true}
activeAuthTask={true}
viewType={'dailyplan'}
task={task}
profile={profile}
type="HORIZONTAL"
taskBadgeClassName={`rounded-sm`}
taskTitleClassName="mt-[0.0625rem]"
plan={plan}
planMode="Future Tasks"
className="shadow-[0px_0px_15px_0px_#e2e8f0]"
/>
</div>
)}
</Draggable>
) : (
<Draggable
key={task.id}
draggableId={task.id}
index={index}
>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
...provided.draggableProps.style,
marginBottom: 8
}}
>
<TaskBlockCard task={task} />
</div>
)}
</Draggable>
)
)}
<>{provided.placeholder}</>
{canSeeActivity ? (
<div className="flex shrink-0 justify-end">
<AlertPopup
open={currentDeleteIndex === index && popupOpen}
buttonOpen={
//button open popup
<Button
onClick={() => {
setPopupOpen((prev) => !prev);
setCurrentDeleteIndex(index);
}}
variant="outline"
className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
>
Delete this plan
</Button>
}
>
{/*button confirm*/}
<Button
disabled={deleteDailyPlanLoading}
onClick={() => {
setPopupOpen((prev) => !prev);
setCurrentDeleteIndex(index);
deleteDailyPlan(plan.id ?? '');
}}
variant="destructive"
className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
>
{deleteDailyPlanLoading && (
<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
)}
Delete
</Button>
{/*button cancel*/}
<Button
onClick={() => setPopupOpen(false)}
variant="outline"
className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
>
Delete this plan
Cancel
</Button>
}
>
{/*button confirm*/}
<Button
disabled={deleteDailyPlanLoading}
onClick={() => {
deleteDailyPlan(plan.id ?? '');
}}
variant="destructive"
className="flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:bg-red-400"
>
{deleteDailyPlanLoading && (
<ReloadIcon className="animate-spin mr-2 h-4 w-4" />
)}
Delete
</Button>
{/*button cancel*/}
<Button
onClick={() => setPopupOpen(false)}
variant="outline"
className="px-4 py-2 text-sm font-medium text-red-600 border border-red-600 rounded-md bg-light--theme-light dark:!bg-dark--theme-light"
>
Cancel
</Button>
</AlertPopup>
</div>
) : (
<></>
)}
</ul>
)}
</Droppable>
</AlertPopup>
</div>
) : (
<></>
)}
</ul>
)}
</Droppable>
)}
</AccordionContent>
</AccordionItem>
))}
Expand Down
Loading

0 comments on commit ae9cb25

Please sign in to comment.