feat: set workspace names

2026-07-25 22:38:56 +08:00 · 2022-12-22 18:03:34 +08:00
parent 4e0aa31af4
commit cf95f0abaf
8 changed files with 164 additions and 86 deletions
@@ -0,0 +1,79 @@
+import Modal, { ModalCloseButton } from '@/ui/modal';
+import {
+  StyledDeleteButtonContainer,
+  StyledSettingAvatar,
+  StyledSettingAvatarContent,
+  StyledSettingInputContainer,
+} from './style';
+
+import { useState } from 'react';
+import { Button } from '@/ui/button';
+import Input from '@/ui/input';
+import { Workspace, WorkspaceType } from '@pathfinder/data-services';
+import { useAppState } from '@/providers/app-state-provider';
+import { WorkspaceDetails } from '@/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent';
+import { StyledSettingH2 } from '../style';
+export const GeneralPage = ({
+  workspace,
+  owner,
+}: {
+  workspace: Workspace;
+  owner: WorkspaceDetails[string]['owner'];
+}) => {
+  const { workspaces, user, currentWorkspace } = useAppState();
+  const [workspaceName, setWorkspaceName] = useState<string>(
+    workspaces[workspace.id]?.meta.name ||
+      (workspace.type === WorkspaceType.Private && user
+        ? user.name
+        : `workspace-${workspace?.id}`)
+  );
+  const isOwner = user && owner.id === user.id;
+  const handleChangeWorkSpaceName = (newName: string) => {
+    setWorkspaceName(newName);
+    currentWorkspace?.meta.setName(newName);
+    workspaces[workspace.id]?.meta.setName(newName);
+  };
+  return workspace ? (
+    <div>
+      <StyledSettingH2 marginTop={56}>Workspace Avatar</StyledSettingH2>
+      <StyledSettingAvatarContent>
+        <StyledSettingAvatar
+          alt="workspace avatar"
+          src={workspaces[workspace.id]?.meta.avatar || ''}
+        >
+          W
+        </StyledSettingAvatar>
+        {/* {isOwner ? (
+          <StyledAvatarUploadBtn shape="round">upload</StyledAvatarUploadBtn>
+        ) : null} */}
+        {/* <Button shape="round">remove</Button> */}
+      </StyledSettingAvatarContent>
+      <StyledSettingH2 marginTop={36}>Workspace Name</StyledSettingH2>
+      <StyledSettingInputContainer>
+        <Input
+          width={327}
+          value={workspaceName}
+          placeholder="Workspace Name"
+          disabled={!isOwner}
+          maxLength={14}
+          minLength={1}
+          onChange={handleChangeWorkSpaceName}
+        ></Input>
+      </StyledSettingInputContainer>
+      <StyledSettingH2 marginTop={36}>Workspace Owner</StyledSettingH2>
+      <StyledSettingInputContainer>
+        <Input
+          width={327}
+          disabled
+          value={owner.name}
+          placeholder="Workspace Owner"
+        ></Input>
+      </StyledSettingInputContainer>
+      <StyledDeleteButtonContainer>
+        <Button type="danger" shape="circle">
+          Delete Workspace
+        </Button>
+      </StyledDeleteButtonContainer>
+    </div>
+  ) : null;
+};