guesstimate/src/routes/project/task-categories-table.tsx

import { FunctionalComponent, h } from "preact";
import { Project } from "../../models/project";
import style from './style.module.css';
import { projectReducer, ProjectReducerActions, updateTaskCategoryCost, updateTaskCategoryLabel, removeTaskCategory } from "../../hooks/use-project-reducer";
import EditableText from "../../components/editable-text";
import { TaskCategoryID } from "../../models/task";
import ProjectTimeUnit from "../../components/project-time-unit";
import { getCurrency, getTaskCategoryCost } from "../../models/params";

export interface TaskCategoriesTableProps {
    project: Project
    dispatch: (action: ProjectReducerActions) => void
}

const TaskCategoriesTable: FunctionalComponent<TaskCategoriesTableProps> = ({ project, dispatch }) => {
    const onTaskCategoryRemove = (categoryId: TaskCategoryID) => {
        dispatch(removeTaskCategory(categoryId));
    };

    const onTaskCategoryLabelChange = (categoryId: TaskCategoryID, value: string) => {
        dispatch(updateTaskCategoryLabel(categoryId, value));
    };

    const onTaskCategoryCostChange = (categoryId: TaskCategoryID, value: string) => {
        const cost = parseFloat(value);
        dispatch(updateTaskCategoryCost(categoryId, cost));
    };

    return (
        <div class="table-container">
            <label class="label">Catégories de tâche</label>
            <table class={`table is-bordered is-striped" ${style.middleTable}`}>
                <thead>
                    <tr>
                        <th class={`${style.noBorder} is-narrow`}></th>
                        <th>Catégorie</th>
                        <th>Coût par unité de temps</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        Object.values(project.params.taskCategories).map(tc => {
                            return (
                                <tr key={`task-category-${tc.id}`}>
                                    <td>
                                        <button
                                            onClick={onTaskCategoryRemove.bind(null, tc.id)}
                                            class="button is-danger is-small is-outlined">
                                        🗑️
                                        </button>
                                    </td>
                                    <td><EditableText value={tc.label} 
                                        onChange={onTaskCategoryLabelChange.bind(null, tc.id)} />
                                    </td>
                                    <td>
                                        <EditableText value={`${getTaskCategoryCost(tc)}`}
                                            render={value=> (<span>{value} {getCurrency(project)}</span>)}
                                            onChange={onTaskCategoryCostChange.bind(null, tc.id)} />
                                    </td>
                                </tr>
                            );
                        })
                    }
                </tbody>
            </table>
        </div>
    );
};

export default TaskCategoriesTable;