implement drag&drop for status grid

This commit is contained in:
marlon-erler
2024-07-25 16:24:09 +02:00
parent 01ef0ac09c
commit 1dc2da2514
2 changed files with 27 additions and 3 deletions
+12 -2
View File
@@ -2806,7 +2806,12 @@
boardViewModel.taskViewModels,
(taskViewModels) => {
const statusNameConverter = (statusName) => {
return CategoryStatusColumn(statusName, taskViewModels);
return CategoryStatusColumn(
categoryName,
statusName,
boardViewModel,
taskViewModels
);
};
const viewModel = new TaskCategoryBulkChangeViewModel(taskViewModels, categoryName);
return /* @__PURE__ */ createElement("div", { class: "flex-row flex-no large-gap" }, /* @__PURE__ */ createElement("div", { class: "property-input-wrapper" }, /* @__PURE__ */ createElement(
@@ -2834,7 +2839,7 @@
}
);
}
function CategoryStatusColumn(statusName, taskViewModelsWithMatchingCategory) {
function CategoryStatusColumn(categoryName, statusName, boardViewModel, taskViewModelsWithMatchingCategory) {
const taskViewModels = new ListState();
taskViewModelsWithMatchingCategory.handleAddition((taskViewModel) => {
const doesMatchStatus = taskViewModel.status.value == statusName;
@@ -2844,10 +2849,15 @@
taskViewModels.remove(taskViewModel);
});
});
function drop() {
boardViewModel.handleDrop(categoryName, statusName);
}
return /* @__PURE__ */ createElement(
"div",
{
class: "status-column gap",
"on:dragover": allowDrop,
"on:drop": drop,
"children:append": [taskViewModels, TaskViewModelToEntry]
}
);
+15 -1
View File
@@ -10,6 +10,7 @@ import { FilteredList } from "../Components/filteredList";
import { PropertyValueList } from "../Components/propertyList";
import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
import { TaskViewModelToEntry } from "../Components/taskEntry";
import { allowDrop } from "../utility";
import { collectObjectValuesForKey } from "../../Model/Utility/utility";
import { translations } from "../translations";
@@ -117,7 +118,12 @@ function CategoryRow(
const statusNameConverter: React.StateItemConverter<string> = (
statusName: string
) => {
return CategoryStatusColumn(statusName, taskViewModels);
return CategoryStatusColumn(
categoryName,
statusName,
boardViewModel,
taskViewModels
);
};
const viewModel: TaskCategoryBulkChangeViewModel =
@@ -153,7 +159,9 @@ function CategoryRow(
}
function CategoryStatusColumn(
categoryName: string,
statusName: string,
boardViewModel: BoardViewModel,
taskViewModelsWithMatchingCategory: React.ListState<TaskViewModel>
) {
const taskViewModels: React.ListState<TaskViewModel> = new React.ListState();
@@ -168,9 +176,15 @@ function CategoryStatusColumn(
});
});
function drop() {
boardViewModel.handleDrop(categoryName, statusName);
}
return (
<div
class="status-column gap"
on:dragover={allowDrop}
on:drop={drop}
children:append={[taskViewModels, TaskViewModelToEntry]}
></div>
);