integrated new CreateRoomDialog in CreateRoomEvent and added tag functionality

products/ASC.Files/Client/src/components/GlobalEvents/CreateRoomEvent.js

@@ -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 onCreate = async (roomParams) => {
-  const options = [
+    console.log(roomParams);
-    { key: RoomsType.CustomRoom, label: "Custom room" },
+    const createRoomParams = {
-    { key: RoomsType.FillingFormsRoom, label: "Filling form room" },
+      roomType: roomParams.type,
-    { key: RoomsType.EditingRoom, label: "Editing room" },
+      title: roomParams.title || "New room",
-    { key: RoomsType.ReviewRoom, label: "Review room" },
+    };
-    { key: RoomsType.ReadOnlyRoom, label: "View-only 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 room = await createRoom(createRoomParams);
-
+    console.log(room);
-  const onSelect = (item) => {
+    for (let i = 0; i < newTags.length; i++) await createTag(newTags[i]);
-    setSelectedOption(item);
+    await addTagsToRoom(room.id, tags);
+    await updateCurrentFolder(null, currrentFolderId);
+    onClose();
   };
 
-  const onSave = (e, value) => {
+  useEffect(async () => {
-    createRoom(value, selectedOption.key)
+    let tags = await fetchTags();
-      .then(() => {
+    setFetchedTags(tags);
-        updateCurrentFolder(null, id);
+  }, []);
-      })
-      .finally(() => {
-        onClose();
-        toastr.success(`${value} success created`);
-      });
-  };
 
   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 }) => {
+  ({ filesStore, tagsStore, filesActionsStore, selectedFolderStore }) => {
-    const { createRoom } = filesStore;
+    const { createRoom, addTagsToRoom } = filesStore;
-
+    const { createTag, fetchTags } = tagsStore;
-    const { updateCurrentFolder } = filesActionsStore;
 
     const { id } = selectedFolderStore;
+    const { updateCurrentFolder } = filesActionsStore;
 
-    return { createRoom, updateCurrentFolder, id };
+    return {
+      createRoom,
+      createTag,
+      fetchTags,
+      addTagsToRoom,
+      currrentFolderId: id,
+      updateCurrentFolder,
+    };
   }
 )(observer(CreateRoomEvent));