|
|
|
@ -1,13 +1,17 @@
|
|
|
|
|
import { useCallback, useMemo, useState } from "react";
|
|
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
|
import { Column, useRowSelect } from "react-table";
|
|
|
|
|
import { Box, Container } from "@mantine/core";
|
|
|
|
|
import { Box, Container, useCombobox } from "@mantine/core";
|
|
|
|
|
import { faCheck, faUndo } from "@fortawesome/free-solid-svg-icons";
|
|
|
|
|
import { UseMutationResult } from "@tanstack/react-query";
|
|
|
|
|
import { uniqBy } from "lodash";
|
|
|
|
|
import { useIsAnyMutationRunning, useLanguageProfiles } from "@/apis/hooks";
|
|
|
|
|
import { SimpleTable, Toolbox } from "@/components";
|
|
|
|
|
import { Selector, SelectorOption } from "@/components/inputs";
|
|
|
|
|
import {
|
|
|
|
|
GroupedSelector,
|
|
|
|
|
GroupedSelectorOptions,
|
|
|
|
|
SimpleTable,
|
|
|
|
|
Toolbox,
|
|
|
|
|
} from "@/components";
|
|
|
|
|
import { useCustomSelection } from "@/components/tables/plugins";
|
|
|
|
|
import { GetItemId, useSelectorOptions } from "@/utilities";
|
|
|
|
|
|
|
|
|
@ -36,10 +40,26 @@ function MassEditor<T extends Item.Base>(props: MassEditorProps<T>) {
|
|
|
|
|
|
|
|
|
|
const profileOptions = useSelectorOptions(profiles ?? [], (v) => v.name);
|
|
|
|
|
|
|
|
|
|
const profileOptionsWithAction = useMemo<SelectorOption<Language.Profile>[]>(
|
|
|
|
|
() => [...profileOptions.options],
|
|
|
|
|
[profileOptions.options],
|
|
|
|
|
);
|
|
|
|
|
const profileOptionsWithAction = useMemo<
|
|
|
|
|
GroupedSelectorOptions<string>[]
|
|
|
|
|
>(() => {
|
|
|
|
|
return [
|
|
|
|
|
{
|
|
|
|
|
group: "Actions",
|
|
|
|
|
items: [{ label: "Clear", value: "", profileId: null }],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
group: "Profiles",
|
|
|
|
|
items: profileOptions.options.map((a) => {
|
|
|
|
|
return {
|
|
|
|
|
value: a.value.profileId.toString(),
|
|
|
|
|
label: a.label,
|
|
|
|
|
profileId: a.value.profileId,
|
|
|
|
|
};
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
}, [profileOptions.options]);
|
|
|
|
|
|
|
|
|
|
const getKey = useCallback((value: Language.Profile | null) => {
|
|
|
|
|
if (value) {
|
|
|
|
@ -94,8 +114,7 @@ function MassEditor<T extends Item.Base>(props: MassEditorProps<T>) {
|
|
|
|
|
}, [dirties, mutateAsync]);
|
|
|
|
|
|
|
|
|
|
const setProfiles = useCallback(
|
|
|
|
|
(profile: Language.Profile | null) => {
|
|
|
|
|
const id = profile?.profileId ?? null;
|
|
|
|
|
(id: number | null) => {
|
|
|
|
|
const newItems = selections.map((v) => ({ ...v, profileId: id }));
|
|
|
|
|
|
|
|
|
|
setDirties((dirty) => {
|
|
|
|
@ -105,18 +124,29 @@ function MassEditor<T extends Item.Base>(props: MassEditorProps<T>) {
|
|
|
|
|
[selections],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const combobox = useCombobox();
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Container fluid px={0}>
|
|
|
|
|
<Toolbox>
|
|
|
|
|
<Box>
|
|
|
|
|
<Selector
|
|
|
|
|
allowDeselect
|
|
|
|
|
<GroupedSelector
|
|
|
|
|
onClick={() => combobox.openDropdown()}
|
|
|
|
|
onDropdownClose={() => {
|
|
|
|
|
combobox.resetSelectedOption();
|
|
|
|
|
}}
|
|
|
|
|
placeholder="Change Profile"
|
|
|
|
|
withCheckIcon={false}
|
|
|
|
|
options={profileOptionsWithAction}
|
|
|
|
|
getkey={getKey}
|
|
|
|
|
disabled={selections.length === 0}
|
|
|
|
|
onChange={setProfiles}
|
|
|
|
|
></Selector>
|
|
|
|
|
comboboxProps={{
|
|
|
|
|
store: combobox,
|
|
|
|
|
onOptionSubmit: (value) => {
|
|
|
|
|
setProfiles(value ? +value : null);
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
></GroupedSelector>
|
|
|
|
|
</Box>
|
|
|
|
|
<Box>
|
|
|
|
|
<Toolbox.Button icon={faUndo} onClick={onEnded}>
|
|
|
|
|