wpetit
/
guesstimate
1
0
Fork 0
Code Issues 3 Pull Requests 1 Releases Wiki Activity

feat: tasks manual reordering

This commit is contained in:
wpetit 2023-09-02 11:22:01 -06:00
parent 1c2b0bb9d9
commit d44959f91e
8 changed files with 219 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/footer/index.tsx
View File

@ -9,7 +9,6 @@ export interface FooterProps {
}
const Footer: FunctionComponent<FooterProps> = ({ ...props}) => {
console.log(__BUILD__)
return (
<div className={`container ${style.footer} ${props.class ? props.class : ''}`}>
<div className="columns">

61
client/src/hooks/use-project-reducer.ts
View File

@ -1,4 +1,4 @@
import { Project } from "../models/project";
import { Project, sanitize } from "../models/project";
import { Task, TaskID, EstimationConfidence, TaskCategoryID, TaskCategory } from "../models/task";
import { useReducer } from "react";
import { generate as diff } from "json-merge-patch";
@ -27,7 +27,7 @@ export function useProjectReducer(project: Project) {
}
export function projectReducer(project: Project, action: ProjectReducerActions): Project {
console.log(action);
console.log('action', action);
switch(action.type) {
case ADD_TASK:
return handleAddTask(project, action as AddTask);
@ -43,6 +43,9 @@ export function projectReducer(project: Project, action: ProjectReducerActions):
case UPDATE_TASK_LABEL:
return handleUpdateTaskLabel(project, action as UpdateTaskLabel);
case MOVE_TASK:
return handleMoveTask(project, action as MoveTask);
case UPDATE_PARAM:
return handleUpdateParam(project, action as UpdateParam);
@ -84,6 +87,10 @@ export function handleAddTask(project: Project, action: AddTask): Project {
...project.tasks,
[task.id]: task,
},
ordering: [
...project.ordering,
task.id
],
updatedAt: new Date(),
};
}
@ -101,9 +108,17 @@ export function removeTask(id: TaskID): RemoveTask {
export function handleRemoveTask(project: Project, action: RemoveTask): Project {
const tasks = { ...project.tasks };
delete tasks[action.id];
const ordering = [ ...(project.ordering ?? []) ]
const taskIndex = ordering.findIndex(taskId => taskId === action.id)
if (taskIndex !== -1) {
ordering.splice(taskIndex, 1)
}
return {
...project,
tasks,
ordering,
updatedAt: new Date(),
};
}
@ -183,6 +198,43 @@ export function handleUpdateTaskLabel(project: Project, action: UpdateTaskLabel)
};
}
export const MOVE_TASK = "MOVE_TASK";
export interface MoveTask extends Action {
id: TaskID
move: number
}
export function moveTask(id: TaskID, move: number): MoveTask {
return { type: MOVE_TASK, id, move };
}
export function handleMoveTask(project: Project, action: MoveTask): Project {
let ordering = [
...(project.ordering ?? []),
]
if (ordering.length === 0) {
ordering = Object.keys(project.tasks)
}
const taskIndex = ordering.findIndex(taskId => action.id === taskId)
if (taskIndex+action.move < 0 || taskIndex+action.move > ordering.length-1 ) {
return project
}
ordering.splice(taskIndex, 1)
ordering.splice(taskIndex+action.move, 0, action.id)
return {
...project,
ordering,
updatedAt: new Date(),
}
}
export interface UpdateParam extends Action {
name: string
value: any
@ -324,7 +376,8 @@ export function handlePatchProject(project: Project, action: PatchProject): Proj
console.log('patch to apply', p);
if (!p) return project;
const patched: Project = applyPatch(project, p) as Project
if (typeof patched.createdAt === 'string') patched.createdAt = new Date(patched.createdAt)
if (typeof patched.updatedAt === 'string') patched.updatedAt = new Date(patched.updatedAt)
sanitize(patched)
return patched;
}

47
client/src/hooks/use-stored-project-list.ts
View File

@ -1,35 +1,38 @@
import {Project} from "../models/project";
import { Project, sanitize } from "../models/project";
import { useState } from "react";
import { ProjectStorageKeyPrefix } from "../util/storage";
export function loadStoredProjects(): Project[] {
const projects: Project[] = [];
const projects: Project[] = [];
Object.keys(window.localStorage).forEach(key => {
if (key.startsWith(ProjectStorageKeyPrefix)) {
try {
const data = window.localStorage.getItem(key);
if (data) {
const project = JSON.parse(data);
projects.push(project);
}
} catch(err) {
console.error(err);
}
Object.keys(window.localStorage).forEach(key => {
if (key.startsWith(ProjectStorageKeyPrefix)) {
try {
const data = window.localStorage.getItem(key);
if (data) {
const project: Project = JSON.parse(data);
sanitize(project)
projects.push(project);
}
});
} catch (err) {
console.error(err);
}
}
});
return projects
return projects
}
export function useStoredProjectList(): [Project[], () => void] {
const [ projects, setProjects ] = useState(() => {
return loadStoredProjects();
});
const [projects, setProjects] = useState(() => {
return loadStoredProjects();
});
const refresh = () => {
setProjects(loadStoredProjects());
};
const refresh = () => {
setProjects(loadStoredProjects());
};
return [ projects, refresh];
return [projects, refresh];
}

20
client/src/models/project.ts
View File

@ -1,4 +1,4 @@
import { Task } from './task';
import { Task, TaskID } from './task';
import { Params, defaults } from "./params";
import { uuidV4 } from "../util/uuid";
@ -12,6 +12,7 @@ export interface Project {
params: Params
createdAt: Date
updatedAt: Date
ordering: TaskID[]
}
export interface Tasks {
@ -29,5 +30,22 @@ export function newProject(id?: string): Project {
},
createdAt: new Date(),
updatedAt: new Date(),
ordering: [],
};
}
export function sanitize(project: Project): Project {
if (!Array.isArray(project.ordering)) {
project.ordering = Object.keys(project.tasks)
}
if (typeof project.updatedAt === 'string') {
project.updatedAt = new Date(project.updatedAt)
}
if (typeof project.createdAt === 'string') {
project.createdAt = new Date(project.createdAt)
}
return project
}

87
client/src/routes/project/estimation-tab.tsx
View File

@ -1,58 +1,63 @@
import React, { FunctionComponent, Fragment } from "react";
import React, { FunctionComponent, Fragment, useCallback } from "react";
import { Project } from "../../models/project";
import TaskTable from "./tasks-table";
import TimePreview from "./time-preview";
import FinancialPreview from "./financial-preview";
import { addTask, updateTaskEstimation, removeTask, updateTaskLabel, ProjectReducerActions } from "../../hooks/use-project-reducer";
import { addTask, updateTaskEstimation, removeTask, updateTaskLabel, ProjectReducerActions, moveTask } from "../../hooks/use-project-reducer";
import { Task, TaskID, EstimationConfidence } from "../../models/task";
import RepartitionPreview from "./repartition-preview";
import { getHideFinancialPreviewOnPrint } from "../../models/params";
export interface EstimationTabProps {
project: Project
dispatch: (action: ProjectReducerActions) => void
project: Project
dispatch: (action: ProjectReducerActions) => void
}
const EstimationTab: FunctionComponent<EstimationTabProps> = ({ project, dispatch }) => {
const onTaskAdd = (task: Task) => {
dispatch(addTask(task));
};
const onTaskAdd = (task: Task) => {
dispatch(addTask(task));
};
const onTaskRemove = (taskId: TaskID) => {
dispatch(removeTask(taskId));
}
const onTaskRemove = (taskId: TaskID) => {
dispatch(removeTask(taskId));
}
const onTaskLabelUpdate = (taskId: TaskID, label: string) => {
dispatch(updateTaskLabel(taskId, label));
}
const onTaskLabelUpdate = (taskId: TaskID, label: string) => {
dispatch(updateTaskLabel(taskId, label));
}
const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
dispatch(updateTaskEstimation(taskId, confidence, value));
};
const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
dispatch(updateTaskEstimation(taskId, confidence, value));
};
return (
<Fragment>
<div className="columns">
<div className="column is-9">
<TaskTable
project={project}
onTaskAdd={onTaskAdd}
onTaskRemove={onTaskRemove}
onTaskLabelUpdate={onTaskLabelUpdate}
onEstimationChange={onEstimationChange} />
</div>
<div className="column is-3">
<TimePreview project={project} />
<RepartitionPreview project={project} />
</div>
const onTaskMove = useCallback((taskId: TaskID, move: number) => {
dispatch(moveTask(taskId, move))
}, [dispatch])
return (
<Fragment>
<div className="columns">
<div className="column is-9">
<TaskTable
project={project}
onTaskMove={onTaskMove}
onTaskAdd={onTaskAdd}
onTaskRemove={onTaskRemove}
onTaskLabelUpdate={onTaskLabelUpdate}
onEstimationChange={onEstimationChange} />
</div>
<div className="columns">
<div className={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint': ''}`}>
<FinancialPreview project={project} />
</div>
<div className="column is-3">
<TimePreview project={project} />
<RepartitionPreview project={project} />
</div>
{
Object.keys(project.tasks).length <= 20 ?
</div>
<div className="columns">
<div className={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint' : ''}`}>
<FinancialPreview project={project} />
</div>
</div>
{
Object.keys(project.tasks).length <= 20 ?
<div className="message noPrint">
<div className="message-body">
<p><strong>⚠️ Attention</strong></p>
@ -60,10 +65,10 @@ const EstimationTab: FunctionComponent<EstimationTabProps> = ({ project, dispatc
</div>
</div> :
null
}
<hr />
</Fragment>
);
}
<hr />
</Fragment>
);
};
export default EstimationTab;

5
client/src/routes/project/index.tsx
View File

@ -1,6 +1,6 @@
import React, { FunctionComponent, useEffect } from "react";
import style from "./style.module.css";
import { newProject, Project } from "../../models/project";
import { newProject, Project, sanitize } from "../../models/project";
import { useProjectReducer, updateProjectLabel, patchProject } from "../../hooks/use-project-reducer";
import { getProjectStorageKey } from "../../util/storage";
import { useLocalStorage } from "../../hooks/use-local-storage";
@ -21,9 +21,10 @@ const Project: FunctionComponent<ProjectProps> = () => {
const { projectId } = useParams<{ projectId: string }>();
const projectStorageKey = getProjectStorageKey(projectId);
const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
const [ project, dispatch ] = useProjectReducer(storedProject);
const [ project, dispatch ] = useProjectReducer(sanitize(storedProject));
useServerSync(project, (project: Project) => {
sanitize(project)
dispatch(patchProject(project));
});

85
client/src/routes/project/tasks-table.tsx
View File

@ -1,11 +1,11 @@
import React, { FunctionComponent, useState, useEffect, ChangeEvent, MouseEvent } from "react";
import React, { FunctionComponent, useState, useEffect, ChangeEvent, MouseEvent, useCallback } from "react";
import style from "./style.module.css";
import { Project } from "../../models/project";
import { newTask, Task, TaskID, EstimationConfidence } from "../../models/task";
import EditableText from "../../components/editable-text";
import { usePrintMediaQuery } from "../../hooks/use-media-query";
import { defaults, getTimeUnit } from "../../models/params";
import ProjectTimeUnit from "../../components/project-time-unit";
import { useSort } from "../../hooks/useSort";
export interface TaskTableProps {
project: Project
@ -13,11 +13,12 @@ export interface TaskTableProps {
onTaskRemove: (taskId: TaskID) => void
onEstimationChange: (taskId: TaskID, confidence: EstimationConfidence, value: number) => void
onTaskLabelUpdate: (taskId: TaskID, label: string) => void
onTaskMove: (taskId: TaskID, move: number) => void
}
export type EstimationTotals = { [confidence in EstimationConfidence]: number }
const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEstimationChange, onTaskRemove, onTaskLabelUpdate }) => {
const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEstimationChange, onTaskRemove, onTaskLabelUpdate, onTaskMove }) => {
const defaultTaskCategory = Object.keys(project.params.taskCategories)[0];
const [task, setTask] = useState(newTask("", defaultTaskCategory));
@ -27,6 +28,21 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
[EstimationConfidence.Pessimistic]: 0,
} as EstimationTotals);
const [tasks, setTasks] = useState<Task[]>([])
useEffect(() => {
setTasks(Object.values(project.tasks))
}, [project.tasks])
const sortTask = useCallback((a: Task, b: Task) => {
const aIndex = (project.ordering ?? []).findIndex(taskId => a.id === taskId)
const bIndex = (project.ordering ?? []).findIndex(taskId => b.id === taskId)
return aIndex - bIndex;
}, [project.ordering])
const sorted = useSort(tasks, sortTask)
const [ activeTaskActions, setActiveTaskActions ] = useState<string|null>(null);
const isPrint = usePrintMediaQuery();
useEffect(() => {
@ -43,6 +59,12 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
setTotals({ optimistic, likely, pessimistic });
}, [project.tasks]);
const toggleActiveTaskAction = useCallback((evt: MouseEvent<HTMLButtonElement>) => {
const taskId = evt.currentTarget.dataset.taskId;
if (!taskId) return
setActiveTaskActions(activeTaskActions === taskId ? null : taskId)
}, [activeTaskActions])
const onNewTaskLabelChange = (evt: ChangeEvent) => {
const value = (evt.currentTarget as HTMLInputElement).value;
setTask({ ...task, label: value });
@ -62,9 +84,23 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
setTask(newTask("", defaultTaskCategory));
};
const onTaskRemoveClick = (taskId: TaskID, evt: MouseEvent) => {
const onTaskRemoveClick = useCallback((evt: MouseEvent<HTMLAnchorElement>) => {
const taskId = evt.currentTarget.dataset.taskId;
if (!taskId) return
onTaskRemove(taskId);
};
}, []);
const onTaskMoveUpClick = useCallback((evt: MouseEvent<HTMLAnchorElement>) => {
const taskId = evt.currentTarget.dataset.taskId;
if (!taskId) return
onTaskMove(taskId, -1);
}, []);
const onTaskMoveDownClick = useCallback((evt: MouseEvent<HTMLAnchorElement>) => {
const taskId = evt.currentTarget.dataset.taskId;
if (!taskId) return
onTaskMove(taskId, +1);
}, []);
const withEstimationChange = (confidence: EstimationConfidence, taskID: TaskID, evt: ChangeEvent) => {
const textValue = (evt.currentTarget as HTMLInputElement).value;
@ -94,17 +130,32 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
</thead>
<tbody>
{
Object.values(project.tasks).map(t => {
sorted.map(t => {
const category = project.params.taskCategories[t.category];
const categoryLabel = category ? category.label : '???';
return (
<tr key={`taks-${t.id}`}>
<td className={`is-narrow noPrint`}>
<button
onClick={onTaskRemoveClick.bind(null, t.id)}
className="button is-danger is-small is-outlined">
🗑️
</button>
<div className={`dropdown ${activeTaskActions === t.id ? 'is-active' : ''}`}>
<div className="dropdown-trigger">
<button onClick={toggleActiveTaskAction} data-task-id={t.id} className={`button is-small is-outlined ${activeTaskActions === t.id ? 'is-active' : ''}`} aria-haspopup="true" aria-controls="dropdown-menu">
<span>⁝</span>
</button>
</div>
<div className="dropdown-menu" id="dropdown-menu" role="menu">
<div className="dropdown-content">
<a className="dropdown-item" data-task-id={t.id} onClick={onTaskMoveUpClick}>
↑ Monter
</a>
<a href="#" className="dropdown-item" data-task-id={t.id} onClick={onTaskMoveDownClick}>
↓ Descendre
</a>
<a className="dropdown-item" onClick={onTaskRemoveClick} data-task-id={t.id}>
<span className="has-text-danger">🗑 Supprimer</span>
</a>
</div>
</div>
</div>
</td>
<td className={style.mainColumn}>
<EditableText
@ -128,9 +179,9 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
{
isPrint ?
<span>{t.estimations.likely}</span> :
<input
className={`input ${t.estimations.likely < t.estimations.optimistic ? 'is-danger' : ''}`}
type="number"
<input
className={`input ${t.estimations.likely < t.estimations.optimistic ? 'is-danger' : ''}`}
type="number"
value={t.estimations.likely}
min={0}
onChange={onLikelyChange.bind(null, t.id)} />
@ -140,9 +191,9 @@ const TaskTable: FunctionComponent<TaskTableProps> = ({ project, onTaskAdd, onEs
{
isPrint ?
<span>{t.estimations.pessimistic}</span> :
<input
className={`input ${t.estimations.pessimistic < t.estimations.likely ? 'is-danger' : ''}`}
type="number"
<input
className={`input ${t.estimations.pessimistic < t.estimations.likely ? 'is-danger' : ''}`}
type="number"
value={t.estimations.pessimistic}
min={0}
onChange={onPessimisticChange.bind(null, t.id)} />

1
server/internal/model/project.go
View File

@ -15,6 +15,7 @@ type Project struct {
Label string `json:"label"`
Description string `json:"description"`
Tasks map[TaskID]Task `json:"tasks"`
Ordering []TaskID `json:"ordering"`
Params Params `json:"params"`
CreatedAt time.Time `json:"createdAt"`
UpdatedAt time.Time `json:"updatedAt"`