Merge pull request #1331 from appirio-tech/feature/project-listing-updates

Feature/project listing updates

Author: vikasrohit

npm-shrinkwrap.json

@@ -77,6 +77,7 @@
     "lodash": "^4.16.4",
     "moment": "^2.14.1",
     "query-string": "^4.3.4",
+    "rc-slider": "^8.3.5",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",
     "react-addons-pure-render-mixin": "^15.6.0",
@@ -85,6 +86,7 @@
     "react-datetime": "2.7.1",
     "react-dom": "^15.6.1",
     "react-dotdotdot": "^1.0.4",
+    "react-infinite-scroller": "^1.1.1",
     "react-layout-pane": "^0.1.16",
     "react-modal": "^1.9.7",
     "react-redux": "^4.4.5",

package.json

@@ -2,4 +2,8 @@
 
 .AvatarGroup {
   display: flex;
+
+  .Avatar + .Avatar {
+    margin-left: $base_unit;
+  }
 }

src/assets/images/ps-active.svg

@@ -1,26 +1,67 @@
-import React, { PropTypes as PT } from 'react'
-import ProjectCardHeader from './ProjectCardHeader'
-import ProjectCardBody from './ProjectCardBody'
+import React, { PropTypes as PT, Component } from 'react'
+import Panel from '../Panel/Panel'
+import DeleteProjectModal from './DeleteProjectModal'
+import ProjectCardHeader from '../../projects/list/components/Projects/ProjectCardHeader'
+import ProjectCardBody from '../../projects/list/components/Projects/ProjectCardBody'
+import ProjectDirectLinks from '../../projects/list/components/Projects/ProjectDirectLinks'
+
 import './ProjectInfo.scss'
 
-function ProjectInfo({ project, duration, currentMemberRole }) {
-  if (!project) return null
-
-  return (
-    <div className="project-info">
-      <ProjectCardHeader
-        project={project}
-      />
-      <ProjectCardBody
-        project={project}
-        currentMemberRole={currentMemberRole}
-        duration={duration}
-      />
-    </div>
-  )
-}
+class ProjectInfo extends Component {
+
+  constructor(props) {
+    super(props)
+    this.toggleProjectDelete = this.toggleProjectDelete.bind(this)
+    this.onConfirmDelete = this.onConfirmDelete.bind(this)
+  }
+
+  componentWillMount() {
+    this.setState({ showDeleteConfirm: false })
+  }
+
+  toggleProjectDelete() {
+    this.setState({ showDeleteConfirm: !this.state.showDeleteConfirm })
+  }
+
+  onConfirmDelete() {
+    this.props.onDeleteProject()
+  }
 
-ProjectInfo.defaultTypes = {
+  render() {
+    const { project, currentMemberRole, duration, canDeleteProject, onChangeStatus, directLinks, isSuperUser } = this.props
+    const { showDeleteConfirm } = this.state
+    return (
+      <div className="project-info">
+        <div className="project-info-header">
+          <ProjectCardHeader
+            project={project}
+          />
+          {canDeleteProject && !showDeleteConfirm &&
+            <Panel.DeleteBtn onClick={this.toggleProjectDelete} />
+          }
+        </div>
+        <Panel>
+          {showDeleteConfirm &&
+            <DeleteProjectModal
+              onCancel={this.toggleProjectDelete}
+              onConfirm={this.onConfirmDelete}
+            />
+          }
+        </Panel>
+        <ProjectCardBody
+          project={project}
+          currentMemberRole={currentMemberRole}
+          duration={duration}
+          descLinesCount={4}
+          onChangeStatus={onChangeStatus}
+          isSuperUser={isSuperUser}
+        />
+        <ProjectDirectLinks
+          directLinks={directLinks}
+        />
+      </div>
+    )
+  }
 }
 
 ProjectInfo.propTypes = {

src/components/AvatarGroup/AvatarGroup.scss

@@ -6,9 +6,28 @@
   background-color: $tc-white;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
-  padding: 4 * $base_unit;
-  @include tc-label-md;  
+  @include tc-label-md;
+
+  .project-card-body {
+    padding-left: 4 * $base_unit;
+    padding-right: 4 * $base_unit;
+    .project-description {
+      max-height: 120px;
+      min-height: 10px;
+      margin-bottom: 5 * $base_unit;
+    }
+  }
+
+  .project-info-header {
+    display:flex;
+    fill: $tc-gray-50;
+    padding-left: 4 * $base_unit;
+    padding-right: 4 * $base_unit;
+    padding-top: 4 * $base_unit;
+  }
+
 }
+
 .panel {
   box-shadow:none !important;
 }