web: Fix Layout component

2019-07-09 13:16:50 +03:00 · 2019-07-09 13:16:50 +03:00 · ceb600450a
commit ceb600450a
parent 9e84b9f83e
5 changed files with 119 additions and 65 deletions
--- a/web/ASC.Web.Components/example/stories/layout/index.stories.js
+++ b/web/ASC.Web.Components/example/stories/layout/index.stories.js
@ -5,14 +5,21 @@ import { Layout } from 'asc-web-components'

 const currentUser = {
  id: '00000000-0000-0000-0000-000000000000',
-  name: 'Jane Doe',
+  userName: 'Jane Doe',
  email: 'janedoe@gmail.com',
-  role: 'user',
-  url: '/products/peaople/profile',
-  smallAvatar: '',
-  mediumAvatar: ''
+  isOwner: false,
+  isAdmin: false,
+  isVisitor: false,
+  avatarSmall: '',
+  avatarMedium: ''
 };

+const currentUserActions = [
+  { key: 'ProfileBtn', label: 'Profile', onClick: () => console.log('ProfileBtn') },
+  { key: 'AboutBtn', label: 'About', onClick: () => console.log('AboutBtn') },
+  { key: 'LogoutBtn', label: 'Log out', onClick: () => console.log('LogoutBtn') },
+];
+
 const availableModules = [
  {
    seporator: true,
@ -20,7 +27,7 @@ const availableModules = [
  },
  {
    id: '11111111-1111-1111-1111-111111111111',
-    name: 'Documents',
+    title: 'Documents',
    iconName: 'DocumentsIcon',
    notifications: 2,
    url: '/products/documents/',
@ -29,16 +36,16 @@ const availableModules = [
  },
  {
    id: '22222222-2222-2222-2222-222222222222',
-    name: 'Chat',
+    title: 'Chat',
    iconName: 'ChatIcon',
    notifications: 3,
    url: '/products/chat/',
    onClick: (e) => action('ChatIcon Clicked')(e),
-    onBadgeClick: (e) => action('ChatIconBadge Clicked')(e)
+    isolateMode: true
  },
  {
    id: '33333333-3333-3333-3333-333333333333',
-    name: 'Mail',
+    title: 'Mail',
    iconName: 'MailIcon',
    notifications: 7,
    url: '/products/mail/',
@ -47,10 +54,9 @@ const availableModules = [
  },
  {
    id: '44444444-4444-4444-4444-444444444444',
-    name: 'Projects',
+    title: 'Projects',
    iconName: 'ProjectsIcon',
    notifications: 5,
-    url: '/products/projects/',
    onClick: (e) => action('ProjectsIcon Clicked')(e),
    onBadgeClick: (e) => action('ProjectsIconBadge Clicked')(e)
  },
@ -60,27 +66,32 @@ const availableModules = [
  },
  {
    id: '55555555-5555-5555-5555-555555555555',
-    name: 'Calendar',
+    title: 'Calendar',
    iconName: 'CalendarCheckedIcon',
    notifications: 0,
-    url: '/products/calendar/',
    onClick: (e) => action('CalendarIcon Clicked')(e),
    onBadgeClick: (e) => action('CalendarIconBadge Clicked')(e)
+  },
+  {
+    id: '66666666-6666-6666-6666-666666666666',
+    title: 'CRM',
+    iconName: 'CrmIcon',
+    notifications: 0,
+    onClick: (e) => action('CrmIcon Clicked')(e),
+    isolateMode: true
  }
 ];

 const currentModuleId = '44444444-4444-4444-4444-444444444444';

-const chatModuleId = '22222222-2222-2222-2222-222222222222';
-
 storiesOf('Components|Layout', module)
  .add('Layout', () => (
    <Layout
      isNavigationOpen={false}
      currentUser={currentUser}
+      currentUserActions={currentUserActions}
      availableModules={availableModules}
      currentModuleId={currentModuleId}
-      chatModuleId={chatModuleId}
    >
      <div style={{padding: 40}}>Page Content</div>
    </Layout>
--- a/web/ASC.Web.Components/src/components/layout/index.js
+++ b/web/ASC.Web.Components/src/components/layout/index.js
@ -59,36 +59,38 @@ class Layout extends React.Component {
  constructor(props) {
    super(props);

-    let chatModule = null,
-      currentModule = null,
+    let currentModule = null,
+      isolateModules = [],
+      mainModules = [],
      totalNotifications = 0,
-      index = props.availableModules.length,
      item = null;

-    while (index) {
-      index--;
-      item = props.availableModules[index];
+    for (let i=0, l=props.availableModules.length; i<l; i++)
+    {
+      item = props.availableModules[i];

-      if(item.seporator) continue;
-
-      if(item.id == props.currentModuleId)
+      if (item.id == props.currentModuleId)
        currentModule = item;

-      if(item.id == props.chatModuleId)
-        chatModule = item;
-      else
+      if (item.isolateMode) {
+        isolateModules.push(item);
+      } else {
+        mainModules.push(item);
+        if (item.seporator) continue;
        totalNotifications+=item.notifications;
+      }
    }

    this.state = {
      isNavigationHoverEnabled: props.isNavigationHoverEnabled,
      isNavigationOpen: props.isNavigationOpen,
      currentUser: props.currentUser || null,
-      availableModules: props.availableModules || [],
+      currentUserActions: props.currentUserActions || [],
      currentModule: currentModule,
      currentModuleId: props.currentModuleId,
-      chatModule: chatModule,
-      chatModuleId: props.chatModuleId,
+      availableModules: props.availableModules || [],
+      isolateModules: isolateModules,
+      mainModules: mainModules,
      totalNotifications: totalNotifications
    };
  };
@ -118,13 +120,27 @@ class Layout extends React.Component {
      <Wrapper>
        <Backdrop isNavigationOpen={this.state.isNavigationOpen} onClick={this.toggleTabletNav}/>
        <Header isNavigationOpen={this.state.isNavigationOpen}>
-          <HeaderIcons chatModule={this.state.chatModule} currentUser={this.state.currentUser}/>
-          <HeaderMenu totalNotifications={this.state.totalNotifications} onClick={this.toggleTabletNav} currentModule={this.state.currentModule}/>
-          <Navigation isNavigationOpen={this.state.isNavigationOpen} onMouseEnter={this.handleDesctopNavHover} onMouseLeave={this.handleDesctopNavHover}>
-            <NavLogoItem isNavigationOpen={this.state.isNavigationOpen} onClick={this.toggleDesctopNav}/>
+          <HeaderIcons
+            modules={this.state.isolateModules}
+            user={this.state.currentUser}
+            userActions={this.state.currentUserActions}
+          />
+          <HeaderMenu
+            totalNotifications={this.state.totalNotifications}
+            onClick={this.toggleTabletNav}
+            currentModule={this.state.currentModule}
+          />
+          <Navigation
+            isNavigationOpen={this.state.isNavigationOpen}
+            onMouseEnter={this.handleDesctopNavHover}
+            onMouseLeave={this.handleDesctopNavHover}
+          >
+            <NavLogoItem
+              isNavigationOpen={this.state.isNavigationOpen}
+              onClick={this.toggleDesctopNav}
+            />
            {
-              this.state.availableModules
-                .filter(item => item.id != this.state.chatModuleId)
+              this.state.mainModules
                .map(item => 
                  <NavItem
                    seporator={!!item.seporator}
@ -136,7 +152,7 @@ class Layout extends React.Component {
                    onClick={item.onClick}
                    onBadgeClick={item.onBadgeClick}
                  >
-                    {item.name}
+                    {item.title}
                  </NavItem>
                )
            }
@ -152,9 +168,9 @@ Layout.propTypes = {
  isNavigationHoverEnabled: PropTypes.bool,
  isNavigationOpen: PropTypes.bool,
  currentUser: PropTypes.object,
+  currentUserActions: PropTypes.array,
  availableModules: PropTypes.array,
-  currentModuleId: PropTypes.string,
-  chatModuleId: PropTypes.string
+  currentModuleId: PropTypes.string
 }

 Layout.defaultProps = {
--- a/web/ASC.Web.Components/src/components/layout/sub-components/header-icons.js
+++ b/web/ASC.Web.Components/src/components/layout/sub-components/header-icons.js
@ -19,16 +19,20 @@ const Wrapper = styled.div`

 const HeaderIcons = props =>
  <Wrapper>
-    { 
-      props.chatModule && <BadgedIcon
-        key={props.chatModule.id}
-        iconName={props.chatModule.iconName}
-        badgeNumber={props.chatModule.notifications}
-        onClick={props.chatModule.onClick}
-        onBadgeClick={props.chatModule.onBadgeClick}
-      />
+    {
+      props.modules.map(module => 
+        <BadgedIcon
+          key={module.id}
+          iconName={module.iconName}
+          badgeNumber={module.notifications}
+          onClick={module.onClick}
+          onBadgeClick={module.onBadgeClick}
+        />
+      )
+    }
+    {
+      props.user && <ProfileActions userActions={props.userActions} user={props.user}/>
    }
-    { props.currentUser && <ProfileActions {...props.currentUser}/> }
  </Wrapper>

 export default HeaderIcons;
--- a/web/ASC.Web.Components/src/components/layout/sub-components/header-menu.js
+++ b/web/ASC.Web.Components/src/components/layout/sub-components/header-menu.js
@ -27,7 +27,7 @@ const HeaderMenu = props =>
      badgeNumber={props.totalNotifications}
      onClick={props.onClick}
    />
-    <MenuHeader>{props.currentModule && props.currentModule.name}</MenuHeader>
+    <MenuHeader>{props.currentModule && props.currentModule.title}</MenuHeader>
  </MenuItem>

 export default HeaderMenu;
--- a/web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js
+++ b/web/ASC.Web.Components/src/components/layout/sub-components/profile-actions.js
@ -11,29 +11,48 @@ class ProfileActions extends React.Component {

    this.state = {
      isOpen: props.isOpen,
-      name: props.name,
-      email: props.email,
-      role: props.role,
-      smallAvatar: props.smallAvatar,
-      mediumAvatar: props.mediumAvatar
+      user: props.user,
+      userActions: props.userActions
    };
  };

  toggle = () => {
-    console.log(this.state.isOpen);
    this.setState({ isOpen: !this.state.isOpen });
-    console.log(this.state.isOpen);
+  };
+
+  getUserRole = (user) => {
+    if(user.isOwner) return "owner";
+    if(user.isAdmin) return "admin";
+    if(user.isVisitor) return "guest";
+    return "user";
  };

  render() {
    return (
      <div>
-        <Avatar size="small" role={this.state.role} source={this.state.smallAvatar} userName={this.state.name} onClick={this.toggle}/>
-        <DropDown isUserPreview withArrow direction='right' isOpen={this.state.isOpen}>
-          <DropDownItem isUserPreview role={this.state.role} source={this.state.mediumAvatar} userName={this.state.name} label={this.state.email}/>
-          <DropDownItem label="Profile"/>
-          <DropDownItem label="About"/>
-          <DropDownItem label="Log out"/>
+        <Avatar
+          size="small"
+          role={this.getUserRole(this.state.user)}
+          source={this.state.user.avatarSmall}
+          userName={this.state.user.userName}
+          onClick={this.toggle}
+        />
+        <DropDown
+          isUserPreview
+          withArrow
+          direction='right'
+          isOpen={this.state.isOpen}
+        >
+          <DropDownItem
+            isUserPreview
+            role={this.getUserRole(this.state.user)}
+            source={this.state.user.avatarMedium}
+            userName={this.state.user.userName}
+            label={this.state.user.email}
+          />
+          {
+            this.state.userActions.map(action => <DropDownItem {...action}/>)
+          }
        </DropDown>
      </div>
    );
@ -41,11 +60,15 @@ class ProfileActions extends React.Component {
 }

 ProfileActions.propTypes = {
-  isOpen: PropTypes.bool
+  isOpen: PropTypes.bool,
+  user: PropTypes.object,
+  userActions: PropTypes.array
 }

 ProfileActions.defaultProps = {
-  isOpen: false
+  isOpen: false,
+  user: {},
+  userActions: []
 }

 export default ProfileActions