integrated new CreateRoomDialog in CreateRoomEvent and added tag functionality
This commit is contained in:
parent
2ce7d29466
commit
63829f01eb
@ -1,65 +1,75 @@
|
||||
import React from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import toastr from "studio/toastr";
|
||||
import { CreateRoomDialog } from "../dialogs";
|
||||
import { addTagsToRoom } from "@appserver/common/api/rooms";
|
||||
|
||||
import { RoomsType } from "@appserver/common/constants";
|
||||
const CreateRoomEvent = ({
|
||||
createRoom,
|
||||
createTag,
|
||||
addTagsToRoom,
|
||||
fetchTags,
|
||||
onClose,
|
||||
|
||||
import Dialog from "./sub-components/Dialog";
|
||||
currrentFolderId,
|
||||
updateCurrentFolder,
|
||||
}) => {
|
||||
const { t } = useTranslation(["CreateRoomDialog", "Translations", "Common"]);
|
||||
const [fetchedTags, setFetchedTags] = useState([]);
|
||||
|
||||
const CreateRoomEvent = ({ createRoom, updateCurrentFolder, id, onClose }) => {
|
||||
const options = [
|
||||
{ key: RoomsType.CustomRoom, label: "Custom room" },
|
||||
{ key: RoomsType.FillingFormsRoom, label: "Filling form room" },
|
||||
{ key: RoomsType.EditingRoom, label: "Editing room" },
|
||||
{ key: RoomsType.ReviewRoom, label: "Review room" },
|
||||
{ key: RoomsType.ReadOnlyRoom, label: "View-only room" },
|
||||
];
|
||||
const onCreate = async (roomParams) => {
|
||||
console.log(roomParams);
|
||||
const createRoomParams = {
|
||||
roomType: roomParams.type,
|
||||
title: roomParams.title || "New room",
|
||||
};
|
||||
|
||||
const [selectedOption, setSelectedOption] = React.useState(options[0]);
|
||||
const tags = roomParams.tags.map((tag) => tag.name);
|
||||
const newTags = roomParams.tags
|
||||
.filter((tag) => tag.isNew)
|
||||
.map((tag) => tag.name);
|
||||
console.log(tags, newTags);
|
||||
|
||||
const { t } = useTranslation(["Translations", "Common"]);
|
||||
|
||||
const onSelect = (item) => {
|
||||
setSelectedOption(item);
|
||||
const room = await createRoom(createRoomParams);
|
||||
console.log(room);
|
||||
for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]);
|
||||
await addTagsToRoom(room.id, tags);
|
||||
await updateCurrentFolder(null, currrentFolderId);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const onSave = (e, value) => {
|
||||
createRoom(value, selectedOption.key)
|
||||
.then(() => {
|
||||
updateCurrentFolder(null, id);
|
||||
})
|
||||
.finally(() => {
|
||||
onClose();
|
||||
toastr.success(`${value} success created`);
|
||||
});
|
||||
};
|
||||
useEffect(async () => {
|
||||
let tags = await fetchTags();
|
||||
setFetchedTags(tags);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
<CreateRoomDialog
|
||||
t={t}
|
||||
title={"Create room"}
|
||||
startValue={"New room"}
|
||||
visible={true}
|
||||
options={options}
|
||||
selectedOption={selectedOption}
|
||||
onSelect={onSelect}
|
||||
onSave={onSave}
|
||||
onCancel={onClose}
|
||||
onClose={onClose}
|
||||
onCreate={onCreate}
|
||||
fetchedTags={fetchedTags}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(
|
||||
({ filesStore, filesActionsStore, selectedFolderStore }) => {
|
||||
const { createRoom } = filesStore;
|
||||
|
||||
const { updateCurrentFolder } = filesActionsStore;
|
||||
({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => {
|
||||
const { createRoom, addTagsToRoom } = filesStore;
|
||||
const { createTag, fetchTags } = tagsStore;
|
||||
|
||||
const { id } = selectedFolderStore;
|
||||
const { updateCurrentFolder } = filesActionsStore;
|
||||
|
||||
return { createRoom, updateCurrentFolder, id };
|
||||
return {
|
||||
createRoom,
|
||||
createTag,
|
||||
fetchTags,
|
||||
addTagsToRoom,
|
||||
currrentFolderId: id,
|
||||
updateCurrentFolder,
|
||||
};
|
||||
}
|
||||
)(observer(CreateRoomEvent));
|
||||
|
Loading…
Reference in New Issue
Block a user