124 lines
4.2 KiB
TypeScript
124 lines
4.2 KiB
TypeScript
import React, {useState} from 'react';
|
|
import Dialog from '@material-ui/core/Dialog';
|
|
import DialogContent from '@material-ui/core/DialogContent';
|
|
import DialogTitle from '@material-ui/core/DialogTitle';
|
|
import {DialogActionBar} from "./DialogActionBar";
|
|
import {DialogTitleAndDetails} from "./DialogTitleAndDetails";
|
|
import {makeVar, useMutation, useQuery, useReactiveVar} from "@apollo/client";
|
|
import {useSnackbar} from "notistack";
|
|
import {
|
|
BasicCategoryFragment,
|
|
BasicCategoryResponse,
|
|
GET_CATEGORY_BY_ID,
|
|
GetCategoryByIdResponse,
|
|
GetCategoryByIdVariables
|
|
} from "../backend/queries/category";
|
|
import {
|
|
ADD_CATEGORY,
|
|
AddCategoryResponse,
|
|
AddCategoryVariables,
|
|
EDIT_CATEGORY,
|
|
EditCategoryResponse,
|
|
EditCategoryVariables
|
|
} from "../backend/mutations/category";
|
|
|
|
|
|
export const dialogChangeCategoryId = makeVar<string>("");
|
|
export const dialogChangeCategoryOpen = makeVar<boolean>(false);
|
|
|
|
export default function DialogChangeCategory() {
|
|
const [addMode, setAddMode] = useState(true);
|
|
const [title, setTitle] = useState("");
|
|
const [details, setDetails] = useState("");
|
|
const categoryId = useReactiveVar(dialogChangeCategoryId);
|
|
const open = useReactiveVar(dialogChangeCategoryOpen);
|
|
const {enqueueSnackbar} = useSnackbar();
|
|
useQuery<GetCategoryByIdResponse, GetCategoryByIdVariables>(GET_CATEGORY_BY_ID, {
|
|
variables: {
|
|
id: categoryId,
|
|
},
|
|
onCompleted: (data => {
|
|
setAddMode(!data.category && !categoryId)
|
|
setTitle(data.category?.title || "");
|
|
setDetails(data.category?.description || "")
|
|
})
|
|
})
|
|
const [editCategory, {loading: editLoading}] = useMutation<EditCategoryResponse, EditCategoryVariables>(EDIT_CATEGORY, {
|
|
onError: (e) => enqueueSnackbar(`Ein Fehler ist aufgetreten: ${e.message}`, {variant: "error"}),
|
|
onCompleted: (response) => {
|
|
if (response.updateCategory) {
|
|
enqueueSnackbar("Kategorie erfolgreich geändert.", {variant: "success"})
|
|
dialogChangeCategoryOpen(false);
|
|
} else {
|
|
enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {variant: "error"})
|
|
}
|
|
}
|
|
});
|
|
const [addCategory, {loading: addLoading}] = useMutation<AddCategoryResponse, AddCategoryVariables>(ADD_CATEGORY, {
|
|
onError: (e) => enqueueSnackbar(`Ein Fehler ist aufgetreten: ${e.message}`, {variant: "error"}),
|
|
onCompleted: (response) => {
|
|
if (response.createCategory) {
|
|
enqueueSnackbar("Kategorie erfolgreich hinzugefügt.", {variant: "success"})
|
|
dialogChangeCategoryOpen(false);
|
|
} else {
|
|
enqueueSnackbar("Ein Fehler ist aufgetreten, versuche es erneut.", {variant: "error"})
|
|
}
|
|
},
|
|
update: (cache, {data}) => {
|
|
cache.modify({
|
|
fields: {
|
|
allCategories(existingCategories = {nodes: []}) {
|
|
const newCategoryRef = cache.writeFragment<BasicCategoryResponse | undefined>({
|
|
data: data?.createCategory?.category,
|
|
fragment: BasicCategoryFragment,
|
|
fragmentName: "BasicCategoryFragment",
|
|
});
|
|
return {nodes: [...existingCategories.nodes, newCategoryRef]};
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
const handleConfirmButtonClick = () => {
|
|
if (addMode) {
|
|
addCategory({
|
|
variables: {
|
|
title,
|
|
description: details,
|
|
}
|
|
})
|
|
} else {
|
|
editCategory({
|
|
variables: {
|
|
id: categoryId,
|
|
title: title,
|
|
description: details,
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onClose={() => dialogChangeCategoryOpen(false)} aria-labelledby="form-dialog-title">
|
|
<DialogTitle id="form-dialog-title">
|
|
{addMode ? "Neue Kategorie erstellen" : "Kategorie bearbeiten"}
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<DialogTitleAndDetails
|
|
title={title}
|
|
details={details}
|
|
onTitleChange={newTitle => setTitle(newTitle)}
|
|
onDetailsChange={newDetails => setDetails(newDetails)}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActionBar
|
|
onClose={() => dialogChangeCategoryOpen(false)}
|
|
onConfirmButtonClick={handleConfirmButtonClick}
|
|
confirmButtonText={addMode ? "Erstellen" : "Speichern"}
|
|
loading={addMode ? addLoading : editLoading}
|
|
/>
|
|
</Dialog>
|
|
);
|
|
}
|