@elice/material-exercise 1.220803.0

package/cjs/components/material-exercise/exercise-room/ExerciseRoom.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var ExerciseIntlProvider = require('../context/ExerciseIntlProvider.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var ExerciseRoomDetail = require('./ExerciseRoomDetail.js');
+var ExerciseRoomList = require('./ExerciseRoomList.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ExerciseRoom = ({
+  onHide
+}) => {
+  const [selectedExerciseRoomId, setSelectedExerciseRoomId] = React__default["default"].useState();
+  return selectedExerciseRoomId ? React__default["default"].createElement(ExerciseRoomDetail, {
+    selectedExerciseRoomId: selectedExerciseRoomId,
+    goToList: () => setSelectedExerciseRoomId(undefined),
+    onHide: onHide
+  }) : React__default["default"].createElement(ExerciseRoomList, {
+    onExerciseRoomClick: id => setSelectedExerciseRoomId(id),
+    onHide: onHide
+  });
+};
+
+var ExerciseRoom$1 = ExerciseIntlProvider.withExerciseIntlProvider(ExerciseRoom, {
+  en: en,
+  ko: ko
+});
+
+module.exports = ExerciseRoom$1;

package/cjs/components/material-exercise/exercise-room/ExerciseRoom.styled.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledExerciseRoomTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseRoomTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const StyledExerciseRoomThead: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export declare const StyledExerciseRoomTd: import("styled-components").StyledComponent<"td", any, {}, never>;
+export declare const StyledExerciseRoomTr: import("styled-components").StyledComponent<"tr", any, {}, never>;
+export declare const StyledExerciseRoomTbody: import("styled-components").StyledComponent<"tbody", any, {
+    hoverable?: boolean | undefined;
+}, never>;
+export declare const StyledExerciseRoomTh: import("styled-components").StyledComponent<"th", any, {}, never>;

package/cjs/components/material-exercise/exercise-room/ExerciseRoom.styled.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledExerciseRoomTableWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-r4oydl-0"
+})(["overflow-y:auto;max-height:25rem;border-radius:4px;background-color:", ";height:18.75rem;"], designTokens.base.color.navy7);
+const StyledExerciseRoomTable = styled__default["default"].table.withConfig({
+  componentId: "sc-r4oydl-1"
+})(["width:100%;color:", ";border-collapse:collapse;"], designTokens.base.color.navy2);
+const StyledExerciseRoomThead = styled__default["default"].thead.withConfig({
+  componentId: "sc-r4oydl-2"
+})(["& th{position:sticky;top:0;background-color:", ";z-index:100;border-bottom:1px solid ", ";}"], designTokens.base.color.navy7, designTokens.base.color.navy6);
+const StyledExerciseRoomTd = styled__default["default"].td.withConfig({
+  componentId: "sc-r4oydl-3"
+})(["padding:0.875rem 1rem;"]);
+const StyledExerciseRoomTr = styled__default["default"].tr.withConfig({
+  componentId: "sc-r4oydl-4"
+})([""]);
+const StyledExerciseRoomTbody = styled__default["default"].tbody.withConfig({
+  componentId: "sc-r4oydl-5"
+})(["", "{border-bottom:1px solid ", ";}", ":hover{background-color:", ";cursor:", ";}", "{height:3.25rem;}"], StyledExerciseRoomTr, designTokens.base.color.navy6, StyledExerciseRoomTr, ({
+  hoverable
+}) => hoverable ? designTokens.base.color.navy5 : '', ({
+  hoverable
+}) => hoverable ? 'pointer' : 'auto', StyledExerciseRoomTd);
+const StyledExerciseRoomTh = styled__default["default"].th.withConfig({
+  componentId: "sc-r4oydl-6"
+})(["font-weight:bold;font-size:", ";padding:0.875rem 1rem;text-align:left;"], designTokens.base.size.body1);
+
+exports.StyledExerciseRoomTable = StyledExerciseRoomTable;
+exports.StyledExerciseRoomTableWrapper = StyledExerciseRoomTableWrapper;
+exports.StyledExerciseRoomTbody = StyledExerciseRoomTbody;
+exports.StyledExerciseRoomTd = StyledExerciseRoomTd;
+exports.StyledExerciseRoomTh = StyledExerciseRoomTh;
+exports.StyledExerciseRoomThead = StyledExerciseRoomThead;
+exports.StyledExerciseRoomTr = StyledExerciseRoomTr;

package/cjs/components/material-exercise/exercise-room/ExerciseRoomDetail.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface MaterialExerciseExerciseRoomDetailProps {
+    selectedExerciseRoomId: number;
+    goToList: () => void;
+    onHide: () => void;
+}
+declare const MaterialExerciseExerciseRoomDetail: React.FC<MaterialExerciseExerciseRoomDetailProps>;
+export default MaterialExerciseExerciseRoomDetail;

package/cjs/components/material-exercise/exercise-room/ExerciseRoomDetail.js

@@ -0,0 +1,500 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var reactUse = require('react-use');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var types = require('@elice/types');
+var _ = require('lodash');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var exerciseRoomPermissionStringConvertor = require('./helpers/exerciseRoomPermissionStringConvertor.js');
+var ExerciseRoom_styled = require('./ExerciseRoom.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledModal = styled__default["default"](blocks.Modal).withConfig({
+  componentId: "sc-x9irqe-0"
+})(["& > div:first-child{.eb-button{color:", ";&:hover{color:", ";}}}& .eb-input[width='full']{*:not(button,button > *){background-color:", ";color:", ";}& > div{border:1px solid ", ";}}& .eb-select{*{background-color:", ";color:", ";}& > div{border:1px solid ", ";}& select{padding-top:6px;padding-bottom:6px;height:2rem;font-size:0.75rem;}}"], designTokens.base.color.navy0, designTokens.base.color.navy0, designTokens.base.color.navy7, designTokens.base.color.navy0, designTokens.base.color.navy6, designTokens.base.color.navy6, designTokens.base.color.navy0, designTokens.base.color.navy5);
+
+const MaterialExerciseExerciseRoomDetail = ({
+  selectedExerciseRoomId,
+  goToList,
+  onHide
+}) => {
+  var _a, _b, _c, _d, _e;
+
+  const intl = reactIntl.useIntl();
+  const {
+    materialExerciseId,
+    onExerciseRoomIdChange
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const materialExercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const user = recoil.useRecoilValue(recoil$1.exerciseUserState);
+  const [exerciseRoom, setExerciseRoom] = React__default["default"].useState();
+  const [title, setTitle] = React__default["default"].useState('');
+  const [debouncedTitle, setDebouncedTitle] = React__default["default"].useState('');
+  const [search, setSearch] = React__default["default"].useState('');
+  const [debouncedSearch, setDebouncedSearch] = React__default["default"].useState('');
+  const [exerciseRoomUserList, setExerciseRoomUserList] = React__default["default"].useState([]);
+  const [isLeaveDialogOpen, setIsLeaveDialogOpen] = React__default["default"].useState(false);
+  const [isDeleting, setIsDeleting] = React__default["default"].useState(false);
+  const isThisChatRoomOwner = (_b = ((_a = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.roomUsers.find(roomUser => roomUser.user.id === (user === null || user === void 0 ? void 0 : user.id))) === null || _a === void 0 ? void 0 : _a.permission) === types.enums.ExerciseRoomPermission.Owner) !== null && _b !== void 0 ? _b : false;
+  const shareLink = materialExercise ? `https://${window.location.host}/courses/${materialExercise.courseId}/lectures/${materialExercise.lectureId}/materials/${materialExercise.mainOrderNo}/projects/${selectedExerciseRoomId}` : '';
+  const [, copyToClipboard] = reactUse.useCopyToClipboard();
+  const doGetOrgMaterialExerciseExerciseRoomGet = React__default["default"].useCallback(() => {
+    return apiClient.getOrgMaterialExerciseExerciseRoomGet({
+      exerciseRoomId: selectedExerciseRoomId
+    }).then(res => {
+      setExerciseRoom(res.exerciseRoom);
+
+      const list = ___default["default"].map(res.exerciseRoom.roomUsers, ({
+        user: {
+          id,
+          profileUrl,
+          fullname
+        },
+        permission
+      }) => ({
+        id,
+        profileUrl,
+        fullname,
+        permission
+      }));
+
+      setTitle(res.exerciseRoom.title);
+      setDebouncedTitle(res.exerciseRoom.title);
+      setExerciseRoomUserList(list);
+    }).catch(console.error);
+  }, [selectedExerciseRoomId]);
+  const doPostOrgMaterialExerciseExerciseRoomEdit = React__default["default"].useCallback(publicPermission => {
+    if (exerciseRoom && materialExercise) {
+      apiClient.postOrgMaterialExerciseExerciseRoomEdit({
+        materialExerciseId: materialExercise.id,
+        publicPermission,
+        title: exerciseRoom.title,
+        exerciseRoomId: selectedExerciseRoomId
+      }).then(() => doGetOrgMaterialExerciseExerciseRoomGet()).catch(console.error);
+    }
+  }, [doGetOrgMaterialExerciseExerciseRoomGet, exerciseRoom, selectedExerciseRoomId, materialExercise]);
+  const doPostOrgMaterialExerciseExerciseRoomDefaultRoomSet = React__default["default"].useCallback(() => {
+    apiClient.postOrgMaterialExerciseExerciseRoomDefaultRoomSet({
+      exerciseRoomId: selectedExerciseRoomId
+    }).then(() => doGetOrgMaterialExerciseExerciseRoomGet()).catch(console.error);
+  }, [doGetOrgMaterialExerciseExerciseRoomGet, selectedExerciseRoomId]);
+  reactUse.useDebounce(() => {
+    setDebouncedSearch(search);
+  }, 300, [search]);
+  const doGetOrgCourseUserList = React__default["default"].useCallback(() => {
+    if (materialExercise) {
+      return apiClient.getOrgCourseUserList({
+        courseId: materialExercise.courseId,
+        isForTutoring: false,
+        count: 20,
+        offset: 0,
+        filterConditions: {
+          $and: [{
+            $or: [{
+              name: `%${debouncedSearch}%`
+            }, {
+              email: `%${debouncedSearch}%`
+            }]
+          }, {
+            $or: [{
+              courseRole: types.enums.CourseRole.EnrolledStudent
+            }, {
+              courseRole: types.enums.CourseRole.TA
+            }, {
+              courseRole: types.enums.CourseRole.HeadTA
+            }, {
+              courseRole: types.enums.CourseRole.Instructor
+            }, {
+              courseRole: types.enums.CourseRole.Admin
+            }]
+          }]
+        }
+      }).then(async res => {
+        const {
+          exerciseRoom
+        } = await apiClient.getOrgMaterialExerciseExerciseRoomGet({
+          exerciseRoomId: selectedExerciseRoomId
+        });
+
+        const list = ___default["default"].map(res.users, ({
+          id,
+          profileUrl,
+          fullname
+        }) => {
+          var _a, _b;
+
+          return {
+            id,
+            profileUrl,
+            fullname,
+            permission: (_b = (_a = ___default["default"].find(exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.roomUsers, roomUser => roomUser.user.id === id)) === null || _a === void 0 ? void 0 : _a.permission) !== null && _b !== void 0 ? _b : types.enums.ExerciseRoomPermission.Nothing
+          };
+        });
+
+        setExerciseRoomUserList(list);
+      }).catch(console.error);
+    }
+  }, [debouncedSearch, materialExercise, selectedExerciseRoomId]);
+  React__default["default"].useEffect(() => {
+    if (debouncedSearch) {
+      void doGetOrgCourseUserList();
+    } else {
+      void doGetOrgMaterialExerciseExerciseRoomGet();
+    }
+  }, [debouncedSearch, doGetOrgCourseUserList, doGetOrgMaterialExerciseExerciseRoomGet]);
+  reactUse.useDebounce(() => {
+    setDebouncedTitle(title);
+  }, 300, [title]);
+  reactUse.useUpdateEffect(() => {
+    if (debouncedTitle.length > 0 && materialExercise && exerciseRoom && exerciseRoom.title !== debouncedTitle) {
+      apiClient.postOrgMaterialExerciseExerciseRoomEdit({
+        materialExerciseId: materialExercise.id,
+        publicPermission: exerciseRoom.publicPermission,
+        title: debouncedTitle,
+        exerciseRoomId: selectedExerciseRoomId
+      }).then(() => doGetOrgMaterialExerciseExerciseRoomGet()).catch(console.error);
+    }
+  }, [debouncedTitle]);
+  return React__default["default"].createElement(StyledModal, {
+    theme: "dark",
+    onHide: onHide,
+    title: (_c = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.title) !== null && _c !== void 0 ? _c : '',
+    headerIcon: icons.eilArrowLeftwardsSingle,
+    onHeaderIconClick: goToList,
+    footerChild: exerciseRoom ? exerciseRoom.isDefaultRoom ? React__default["default"].createElement(blocks.Flex, {
+      justify: "flex-end",
+      align: "center"
+    }, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eisArrowDownwardsCircle,
+      color: designTokens.base.color.primary3,
+      style: {
+        marginRight: '0.5rem'
+      }
+    }), React__default["default"].createElement(blocks.Text, {
+      role: "lightpurple",
+      size: "tiny"
+    }, intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.defaultExerciseRoomDescription'
+    }))) : React__default["default"].createElement(blocks.Flex, {
+      justify: "flex-end",
+      align: "center"
+    }, React__default["default"].createElement(blocks.Button, {
+      transparent: true,
+      role: "lightpurple",
+      underline: true,
+      border: false,
+      onClick: doPostOrgMaterialExerciseExerciseRoomDefaultRoomSet
+    }, '기본 실습방으로 설정하기')) : undefined,
+    footerButtons: [{
+      label: intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.open'
+      }),
+      onClick: () => {
+        if (exerciseRoom && typeof onExerciseRoomIdChange === 'function') {
+          onExerciseRoomIdChange(exerciseRoom.id);
+          onHide();
+        } else {
+          console.error('no exerciseRoom', exerciseRoom);
+        }
+      }
+    }, {
+      label: intl.formatMessage({
+        id: 'materialExerciseExerciseRoom.leave'
+      }),
+      disabled: (_d = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.isDefaultRoom) !== null && _d !== void 0 ? _d : false,
+      role: 'gray6',
+      onClick: () => {
+        setIsLeaveDialogOpen(true);
+      }
+    }]
+  }, isLeaveDialogOpen ? React__default["default"].createElement(blocks.Dialog, {
+    type: "warning",
+    title: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.leave.dialog.title'
+    }),
+    body: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.leave.dialog.body'
+    }),
+    onHide: () => {
+      setIsLeaveDialogOpen(false);
+    }
+  }, React__default["default"].createElement(blocks.Dialog.ActionButton, {
+    loading: isDeleting,
+    onClick: () => {
+      if (isThisChatRoomOwner) {
+        setIsDeleting(true);
+        apiClient.postOrgMaterialExerciseExerciseRoomDelete({
+          exerciseRoomId: selectedExerciseRoomId
+        }).then(() => {
+          goToList();
+        }).catch(console.error).finally(() => {
+          setIsDeleting(false);
+        });
+      } else {
+        setIsDeleting(true);
+        apiClient.postOrgMaterialExerciseExerciseRoomUserDelete({
+          exerciseRoomId: selectedExerciseRoomId
+        }).then(() => {
+          goToList();
+        }).catch(console.error).finally(() => {
+          setIsDeleting(false);
+        });
+      }
+    }
+  }, '확인'), React__default["default"].createElement(blocks.Dialog.CloseButton, {
+    onClick: () => {
+      setIsLeaveDialogOpen(false);
+    }
+  }, '취소')) : null, isThisChatRoomOwner ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Label, {
+    role: "white",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.detail.title.label'
+  })), React__default["default"].createElement(blocks.Vspace, {
+    height: 0.5
+  }), React__default["default"].createElement(blocks.Input, {
+    size: "small",
+    width: "full",
+    value: title,
+    onChange: e => setTitle(e.target.value),
+    placeholder: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.detail.title.placeholder'
+    })
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1.25
+  })) : null, isThisChatRoomOwner ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Label, {
+    role: "white",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.detail.addUsers.label'
+  })), React__default["default"].createElement(blocks.Vspace, {
+    height: 0.5
+  }), React__default["default"].createElement(blocks.Input, {
+    prefix: icons.eilSearch,
+    size: "small",
+    width: "full",
+    value: search,
+    onChange: e => setSearch(e.target.value),
+    placeholder: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.detail.addUsers.placeholder'
+    })
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 1.25
+  })) : null, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTableWrapper, null, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTable, null, React__default["default"].createElement("colgroup", null, React__default["default"].createElement("col", {
+    span: 1,
+    width: "70%"
+  }), React__default["default"].createElement("col", {
+    span: 1,
+    width: "30%"
+  })), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomThead, null, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTr, null, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTh, null, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.detail.table.head.users'
+  })), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTh, null, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.detail.table.head.permission'
+  })))), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTbody, null, exerciseRoomUserList.map(chatroomUser => {
+    const renderUserPermission = () => {
+      if ((user === null || user === void 0 ? void 0 : user.id) === chatroomUser.id || !isThisChatRoomOwner) {
+        return React__default["default"].createElement(blocks.Text, {
+          bold: true,
+          role: "gray0",
+          size: "tiny",
+          preWrap: true,
+          ellipsis: true,
+          customStyles: {
+            maxWidth: '100px',
+            marginRight: '0.5rem'
+          }
+        }, intl.formatMessage({
+          id: `materialExerciseExerciseRoom.exerciseRoom.publicPermission.${exerciseRoomPermissionStringConvertor.exerciseRoomPermissionStringConvertor(chatroomUser.permission)}`
+        }));
+      } else if (chatroomUser.permission === types.enums.ExerciseRoomPermission.Nothing) {
+        return React__default["default"].createElement(blocks.Flex, {
+          align: "center"
+        }, React__default["default"].createElement(blocks.Text, {
+          bold: true,
+          role: "gray0",
+          size: "tiny",
+          preWrap: true,
+          ellipsis: true,
+          customStyles: {
+            maxWidth: '100px',
+            marginRight: '0.5rem'
+          }
+        }, intl.formatMessage({
+          id: `materialExerciseExerciseRoom.exerciseRoom.publicPermission.${exerciseRoomPermissionStringConvertor.exerciseRoomPermissionStringConvertor(chatroomUser.permission)}`
+        })), React__default["default"].createElement(blocks.Button, {
+          size: "micro",
+          role: "lightpurple",
+          loading: false,
+          onClick: async () => {
+            try {
+              await apiClient.postOrgMaterialExerciseExerciseRoomUserEdit({
+                exerciseRoomId: selectedExerciseRoomId,
+                permission: types.enums.ExerciseRoomPermission.Read,
+                userId: chatroomUser.id
+              });
+
+              if (debouncedSearch) {
+                void doGetOrgCourseUserList();
+              } else {
+                void doGetOrgMaterialExerciseExerciseRoomGet();
+              }
+            } catch (error) {
+              console.error(error);
+            }
+          }
+        }, intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.detail.table.body.add'
+        })));
+      } else {
+        return React__default["default"].createElement(blocks.Select, {
+          size: "small",
+          width: "small",
+          value: chatroomUser.permission,
+          onChange: async value => {
+            try {
+              const permission = Number(value);
+
+              if (permission === types.enums.ExerciseRoomPermission.Nothing) {
+                await apiClient.postOrgMaterialExerciseExerciseRoomUserDelete({
+                  exerciseRoomId: selectedExerciseRoomId,
+                  userId: chatroomUser.id
+                });
+
+                if (debouncedSearch) {
+                  void doGetOrgCourseUserList();
+                } else {
+                  void doGetOrgMaterialExerciseExerciseRoomGet();
+                }
+              } else {
+                await apiClient.postOrgMaterialExerciseExerciseRoomUserEdit({
+                  exerciseRoomId: selectedExerciseRoomId,
+                  permission,
+                  userId: chatroomUser.id
+                });
+
+                if (debouncedSearch) {
+                  void doGetOrgCourseUserList();
+                } else {
+                  void doGetOrgMaterialExerciseExerciseRoomGet();
+                }
+              }
+            } catch (error) {
+              console.error(error);
+            }
+          },
+          disabled: !isThisChatRoomOwner
+        }, React__default["default"].createElement("option", {
+          value: types.enums.ExerciseRoomPermission.Nothing,
+          children: intl.formatMessage({
+            id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing'
+          })
+        }), React__default["default"].createElement("option", {
+          value: types.enums.ExerciseRoomPermission.Read,
+          children: intl.formatMessage({
+            id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.read'
+          })
+        }), React__default["default"].createElement("option", {
+          value: types.enums.ExerciseRoomPermission.ReadWrite,
+          children: intl.formatMessage({
+            id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite'
+          })
+        }));
+      }
+    };
+
+    return React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTr, {
+      key: chatroomUser.id
+    }, React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTd, null, React__default["default"].createElement(blocks.Flex, {
+      align: "center"
+    }, React__default["default"].createElement(blocks.ProfileImage, {
+      src: chatroomUser.profileUrl || '',
+      hasBorder: false,
+      width: "1.5rem",
+      height: "1.5rem"
+    }), React__default["default"].createElement(blocks.Text, {
+      bold: true,
+      size: "small",
+      role: "white",
+      preWrap: true,
+      ellipsis: true,
+      customStyles: {
+        marginLeft: '0.5rem'
+      }
+    }, chatroomUser.fullname))), React__default["default"].createElement(ExerciseRoom_styled.StyledExerciseRoomTd, null, renderUserPermission()));
+  })))), React__default["default"].createElement(blocks.Vspace, {
+    height: 1.25
+  }), React__default["default"].createElement(blocks.Label, {
+    role: "white",
+    size: "tiny"
+  }, intl.formatMessage({
+    id: 'materialExerciseExerciseRoom.detail.sharelink.label'
+  })), React__default["default"].createElement(blocks.Vspace, {
+    height: 0.5
+  }), isThisChatRoomOwner ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Select, {
+    size: "small",
+    width: "small",
+    value: (_e = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.publicPermission) !== null && _e !== void 0 ? _e : types.enums.ExerciseRoomPermission.Nothing,
+    onChange: value => {
+      doPostOrgMaterialExerciseExerciseRoomEdit(value);
+    },
+    disabled: false
+  }, React__default["default"].createElement("option", {
+    value: types.enums.ExerciseRoomPermission.Nothing,
+    children: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.nothing'
+    })
+  }), React__default["default"].createElement("option", {
+    value: types.enums.ExerciseRoomPermission.Read,
+    children: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.read'
+    })
+  }), React__default["default"].createElement("option", {
+    value: types.enums.ExerciseRoomPermission.ReadWrite,
+    children: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.exerciseRoom.publicPermission.readWrite'
+    })
+  })), React__default["default"].createElement(blocks.Vspace, {
+    height: 0.75
+  })) : null, React__default["default"].createElement(blocks.Input, {
+    size: "small",
+    width: "full",
+    suffix: React__default["default"].createElement(blocks.Button, {
+      size: "micro",
+      role: "lightpurple",
+      style: {
+        backgroundColor: `${designTokens.base.color.red6} !important`
+      },
+      onClick: () => {
+        blocks.Notification.info(intl.formatMessage({
+          id: 'materialExerciseExerciseRoom.detail.copy.success'
+        }));
+        copyToClipboard(shareLink);
+      }
+    }, intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.detail.copy'
+    })),
+    value: materialExercise ? shareLink : '',
+    onChange: e => setSearch(e.target.value),
+    placeholder: intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.detail.addUsers.placeholder'
+    })
+  }));
+};
+
+module.exports = MaterialExerciseExerciseRoomDetail;

package/cjs/components/material-exercise/exercise-room/ExerciseRoomList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface MaterialExerciseExerciseRoomListProps {
+    onExerciseRoomClick: (id: number) => void;
+    onHide: () => void;
+}
+declare const MaterialExerciseExerciseRoomList: React.FC<MaterialExerciseExerciseRoomListProps>;
+export default MaterialExerciseExerciseRoomList;