{(subFolderContent) && (
@@ -85,11 +166,30 @@ const FilesGridView = ({
onDeletePostAttachment={onDeletePostAttachment}
loggedInUser={loggedInUser}
formatModifyDate={formatModifyDate}
+ setFilter={setFilter}
+ getFilterValue={getFilterValue}
+ clearFilter={clearFilter}
+ updateSubContents={updateSubContents}
+ clearSubContents={clearSubContents}
+ filtered={filtered}
/>)}
{(!subFolderContent) && (
= 0 || linkToDelete >= 0)}, '')}>
{(linkToEdit >= 0 || linkToDelete >= 0) && }
-
{links.map((link, idx) => {
@@ -123,7 +249,10 @@ const FilesGridView = ({
const handleEditClick = () => onEditIntent(idx)
const canEdit = `${link.createdBy}` === `${loggedInUser.userId}`
- const changeSubFolder = () => onChangeSubFolder(link)
+ const changeSubFolder = () => {
+ onChangeSubFolder(link)
+ selectedLink = link
+ }
const owner = _.find(assetsMembers, m => m.userId === _.parseInt(link.createdBy))
if (Array.isArray(link.children) && link.children.length > 0) {
@@ -131,6 +260,9 @@ const FilesGridView = ({
{`All ${title}`}
+
+ {`${filtered ? 'Filtered' : 'All'} ${title}`}
+ {filtered && (
+
+ )}
+
{pendingAttachments &&
Type
- Name
+
+ nameFieldRef = comp}
+ title="Name"
+ setFilter={setFilter}
+ filterName="name"
+ value={getFilterValue('name')}
+ />
+
+
+ sharedWithFieldRef = comp}
+ title="Shared With"
+ filterName="sharedWith"
+ setFilter={setFilter}
+ value={getFilterValue('sharedWith')}
+ />
+
Created By
- Modified
+
+ dateFieldRef = comp}
+ type="date"
+ title="Date"
+ setFilter={setFilter}
+ from={getFilterValue('date.from')}
+ to={getFilterValue('date.to')}
+ />
+
{formatFolderTitle(link.title)}
+ {renderSharedWith(link)}
+
{!owner && (
Unknown
)}
{owner && (
@@ -170,6 +302,9 @@ const FilesGridView = ({
{renderLink(link)}
+ {renderSharedWith(link)}
+
{!owner && (
+
+ )
+ }
+
+ default: {
+ return (
+
+ )
+ }
+ }
+ }
+
+ render() {
+ const {
+ title,
+ } = this.props
+
+ return (
+
Unknown
)}
{owner && (
@@ -215,6 +350,10 @@ FilesGridView.propTypes = {
onDeletePostAttachment: PropTypes.func,
formatModifyDate: PropTypes.func.isRequired,
formatFolderTitle: PropTypes.func.isRequired,
+ setFilter: PropTypes.func.isRequired,
+ getFilterValue: PropTypes.func.isRequired,
+ clearFilter: PropTypes.func.isRequired,
+ filtered: PropTypes.bool
}
FilesGridView.defaultProps = {
diff --git a/src/components/AssetsLibrary/FilterColHeader.jsx b/src/components/AssetsLibrary/FilterColHeader.jsx
new file mode 100644
index 000000000..8bd34ce2e
--- /dev/null
+++ b/src/components/AssetsLibrary/FilterColHeader.jsx
@@ -0,0 +1,133 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Dropdown from 'appirio-tech-react-components/components/Dropdown/Dropdown'
+import IconCarretDownNormal from '../../assets/icons/arrow-6px-carret-down-normal.svg'
+import './FilterColHeader.scss'
+import FormsyForm from 'appirio-tech-react-components/components/Formsy'
+
+const Formsy = FormsyForm.Formsy
+const TCFormFields = FormsyForm.Fields
+
+class FilterColHeader extends React.Component {
+
+ constructor(props) {
+ super(props)
+ this.state = {value: '', from: '', to: ''}
+ this.setFilter = this.setFilter.bind(this)
+ this.onChange = this.onChange.bind(this)
+ this.onFromDateChange = this.onFromDateChange.bind(this)
+ this.onToDateChange = this.onToDateChange.bind(this)
+ }
+
+ setFilter(newfilter) {
+ this.props.setFilter(this.props.filterName, newfilter)
+ }
+
+ onChange(event) {
+ this.setState({value: event.target.value})
+
+ setTimeout(() => {
+ this.setFilter(this.state.value)
+ })
+ }
+
+ onFromDateChange(name, value) {
+ this.setState({from: value})
+
+ setTimeout(() => {
+ this.props.setFilter('date.from', this.state.from)
+ })
+ }
+
+ onToDateChange(name, value) {
+ this.setState({to: value})
+
+ setTimeout(() => {
+ this.props.setFilter('date.to', this.state.to)
+ })
+ }
+
+ componentDidMount() {
+ this.setState({
+ value: this.props.value || '',
+ from: this.props.from || '',
+ to: this.props.to || ''
+ })
+ }
+
+ clearFilter() {
+ this.setState({
+ value: '',
+ from: '',
+ to: ''
+ })
+ }
+
+ renderByType() {
+ switch (this.props.type) {
+ case 'date': {
+ return (
+
+
+
+ {title}
+
+
+ )
+ }
+}
+
+FilterColHeader.propTypes = {
+ title: PropTypes.string,
+ filterName: PropTypes.string,
+ setFilter: PropTypes.func,
+ value: PropTypes.string,
+ type: PropTypes.string,
+ from: PropTypes.string,
+ to: PropTypes.string
+}
+export default FilterColHeader
diff --git a/src/components/AssetsLibrary/FilterColHeader.scss b/src/components/AssetsLibrary/FilterColHeader.scss
new file mode 100644
index 000000000..b7c6f3829
--- /dev/null
+++ b/src/components/AssetsLibrary/FilterColHeader.scss
@@ -0,0 +1,29 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.FilterColHeader {
+ :global {
+ .dropdown-menu-list.down-layer {
+ padding-top: 40px;
+ }
+
+ .filter-drop-down {
+ .txt-link {
+ z-index: 10;
+
+ .icon-carret-down-normal {
+ top: 50%;
+ margin-top: -3px;
+ }
+ }
+
+ .Dropdown.no-autoclose {
+ z-index: 5;
+ }
+ }
+
+ .dropdown-wrap {
+ cursor: default;
+ }
+ }
+}
+
diff --git a/src/components/AssetsLibrary/GridView.scss b/src/components/AssetsLibrary/GridView.scss
index 638539628..eda14f995 100644
--- a/src/components/AssetsLibrary/GridView.scss
+++ b/src/components/AssetsLibrary/GridView.scss
@@ -8,6 +8,10 @@
line-height: 20px;
text-align: left;
margin-bottom: 16px;
+
+ button {
+ margin-left: 10px;
+ }
}
.assets-gridview-header,
@@ -43,10 +47,12 @@
font-weight: 400;
line-height: 20px;
text-align: left;
+ word-break: break-all;
}
.flex-item-title {
color: $tc-gray-50;
+ font-size: $tc-body-sm;
}
.flex-item,
@@ -72,7 +78,6 @@
-ms-flex: 8 1 505px;
flex: 8 1 505px;
font-family: Roboto;
- font-size: 15px;
font-weight: 400;
line-height: 30px;
min-width: 0;
@@ -85,15 +90,19 @@
}
}
+.item-shared-with {
+ flex: none;
+ width: 140px;
+ word-break: keep-all;
+}
+
.item-modified, .item-created-by {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 140px;
- text-align: right;
display: inline-block;
font-family: Roboto;
- font-size: 12px;
font-weight: 400;
line-height: 30px;
}
@@ -102,7 +111,7 @@
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
- width: 100px;
+ width: 50px;
justify-content: flex-end;
padding-right: 4px;
}
@@ -141,4 +150,14 @@
text-align: left;
line-height: 20px;
}
-}
\ No newline at end of file
+
+ .user-block {
+ .project-customer {
+ position: relative;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+}
diff --git a/src/components/AssetsLibrary/LinksGridView.jsx b/src/components/AssetsLibrary/LinksGridView.jsx
index b73c5b9ce..82b21d660 100644
--- a/src/components/AssetsLibrary/LinksGridView.jsx
+++ b/src/components/AssetsLibrary/LinksGridView.jsx
@@ -2,7 +2,8 @@ import React from 'react'
import PropTypes from 'prop-types'
import uncontrollable from 'uncontrollable'
import cn from 'classnames'
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom'
+import _ from 'lodash'
import DeleteLinkModal from '../LinksMenu/DeleteLinkModal'
import EditLinkModal from '../LinksMenu/EditLinkModal'
@@ -14,6 +15,16 @@ import FolderIcon from '../../assets/icons/v.2.5/icon-folder-small.svg'
import LinkIcon from '../../assets/icons/link-12.svg'
import './GridView.scss'
+import {
+ PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS,
+ PROJECT_ASSETS_SHARED_WITH_TOPCODER_MEMBERS,
+ PROJECT_FEED_TYPE_MESSAGES
+} from '../../config/constants'
+import FilterColHeader from './FilterColHeader'
+
+let selectedLink
+let clearing = false
+
const LinksGridView = ({
canDelete,
canEdit,
@@ -30,7 +41,40 @@ const LinksGridView = ({
formatModifyDate,
formatFolderTitle,
assetsMembers,
+ setFilter,
+ getFilterValue,
+ clearFilter,
+ filtered
}) => {
+ let nameFieldRef
+ let sharedWithFieldRef
+ let dateFieldRef
+
+ const updateSubContents = () => {
+ if (selectedLink) {
+ let link = links.filter(item => {
+ return selectedLink.title === item.title
+ && selectedLink.createdBy === item.createdBy
+ && selectedLink.updatedAt === item.updatedAt
+ })[0]
+
+ if (!link) {
+ link = _.cloneDeep(selectedLink)
+ link.children = []
+ }
+
+ onChangeSubFolder(link)
+ }
+ }
+
+ const clearSubContents = () => clearing = true
+
+ const clearFieldValues = () => {
+ nameFieldRef.clearFilter()
+ sharedWithFieldRef.clearFilter()
+ dateFieldRef.clearFilter()
+ }
+
const renderLink = (link) => {
if (link.onClick) {
return (
@@ -52,7 +96,23 @@ const LinksGridView = ({
return {link.title}
}
}
- const goBack = () => onChangeSubFolder(null)
+ const goBack = () => {
+ onChangeSubFolder(null)
+ selectedLink = null
+ }
+
+ const getSharedWithText = (tag) => {
+ return tag === PROJECT_FEED_TYPE_MESSAGES
+ ? PROJECT_ASSETS_SHARED_WITH_TOPCODER_MEMBERS : PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS
+ }
+
+ if (clearing) {
+ setTimeout(() => {
+ updateSubContents()
+ clearing = false
+ })
+ }
+
return (
+ {this.renderByType()}
+
+
{(subFolderContent) && (
@@ -63,17 +123,62 @@ const LinksGridView = ({
assetsMembers={assetsMembers}
isLinkSubFolder
formatModifyDate={formatModifyDate}
+ setFilter={setFilter}
+ getFilterValue={getFilterValue}
+ clearFilter={clearFilter}
+ updateSubContents={updateSubContents}
+ clearSubContents={clearSubContents}
+ filtered={filtered}
/>)}
{(!subFolderContent) && (
= 0 || linkToDelete >= 0)}, '')}>
{(linkToEdit >= 0 || linkToDelete >= 0) && }
-
{`All ${title}`}
+
+ {`${filtered ? 'Filtered' : 'All'} ${title}`}
+ {filtered && (
+
+ )}
+
-
Type-Name+++
nameFieldRef = comp} + title="Name" + setFilter={setFilter} + filterName="name" + value={getFilterValue('name')} + /> + +sharedWithFieldRef = comp} + title="Shared With" + filterName="sharedWith" + setFilter={setFilter} + value={getFilterValue('sharedWith')} + /> + Created By-Modified++dateFieldRef = comp} + type="date" + title="Date" + setFilter={setFilter} + from={getFilterValue('date.from')} + to={getFilterValue('date.to')} + /> +
{links.map((link, idx) => {
@@ -90,14 +195,22 @@ const LinksGridView = ({
}
const onEditCancel = () => onEditIntent(-1)
const handleEditClick = () => onEditIntent(idx)
- const changeSubFolder = () => onChangeSubFolder(link)
+ const changeSubFolder = () => {
+ onChangeSubFolder(link)
+ selectedLink = link
+ }
const owner = _.find(assetsMembers, m => m.userId === _.parseInt(link.createdBy))
-
+
if (Array.isArray(link.children) && link.children.length > 0) {
return (
-
+
{formatFolderTitle(link.title)}
++ {getSharedWithText(link.tag)} +
+{!owner && !link.createdBy && (—)} {!owner && link.createdBy !== 'CoderBot' && (Unknown)} @@ -135,6 +248,11 @@ const LinksGridView = ({+{renderLink(link)}
++ {getSharedWithText(link.tag)} +
+{!owner && !link.createdBy && (—)} {!owner && link.createdBy && (Unknown)} @@ -173,6 +291,10 @@ LinksGridView.propTypes = { title: PropTypes.string, formatModifyDate: PropTypes.func.isRequired, formatFolderTitle: PropTypes.func.isRequired, + setFilter: PropTypes.func.isRequired, + getFilterValue: PropTypes.func.isRequired, + clearFilter: PropTypes.func.isRequired, + filtered: PropTypes.bool } LinksGridView.defaultProps = { diff --git a/src/components/AssetsLibrary/SubFolder.jsx b/src/components/AssetsLibrary/SubFolder.jsx index 169e0c056..315f9d8a2 100644 --- a/src/components/AssetsLibrary/SubFolder.jsx +++ b/src/components/AssetsLibrary/SubFolder.jsx @@ -10,6 +10,12 @@ import FolderIcon from '../../assets/icons/v.2.5/icon-folder-small.svg' import FileIcon from '../../components/FileIcon' import './GridView.scss' +import { + PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS, + PROJECT_ASSETS_SHARED_WITH_TOPCODER_MEMBERS, + PROJECT_FEED_TYPE_MESSAGES +} from '../../config/constants' +import FilterColHeader from './FilterColHeader' class SubFolder extends React.Component { constructor (props) { super(props) @@ -20,13 +26,15 @@ class SubFolder extends React.Component { this.onDeleteCancel = this.onDeleteCancel.bind(this) this.deleteLink = this.deleteLink.bind(this) this.hasAccess = this.hasAccess.bind(this) + this.clearFieldValues = this.clearFieldValues.bind(this) + this.wrappedSetFilter = this.wrappedSetFilter.bind(this) } - + componentDidMount() { // scroll to the top when open document.body.scrollTop = document.documentElement.scrollTop = 0 } - + onDeleteConfirm() { const link = this.props.link.children[this.state.linkToDelete] if (link) { @@ -34,47 +42,110 @@ class SubFolder extends React.Component { this.onDeleteCancel() } } - + onDeleteCancel() { this.setState({ linkToDelete: -1 }) } - + deleteLink(idx) { this.setState({ linkToDelete: idx }) } - + hasAccess(createdBy) { const { loggedInUser } = this.props return Number.parseInt(createdBy) === loggedInUser.userId } - + isURLValid(linkAddress) { return /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/.test(linkAddress) } - + + clearFieldValues() { + this.nameFieldRef.clearFilter() + this.sharedWithFieldRef.clearFilter() + this.dateFieldRef.clearFilter() + } + + wrappedSetFilter(name, value) { + this.props.setFilter(name, value) + this.props.updateSubContents() + } + render() { - const { link, renderLink, goBack, formatModifyDate, isLinkSubFolder, assetsMembers } = this.props + const { + link, + renderLink, + goBack, + formatModifyDate, + isLinkSubFolder, + assetsMembers, + getFilterValue, + clearFilter, + clearSubContents, + filtered + } = this.props const { linkToDelete } = this.state - + return (= 0)}, '')}> {(linkToDelete >= 0) && } -{link.title}++ {filtered && 'Filtered '}{link.title} + {filtered && ( + + )} +-
Type-Name+++
this.nameFieldRef = comp} + title="Name" + filterName="name" + setFilter={this.wrappedSetFilter} + value={getFilterValue('name')} + /> + +this.sharedWithFieldRef = comp} + title="Shared With" + filterName="sharedWith" + setFilter={this.wrappedSetFilter} + value={getFilterValue('sharedWith')} + /> + Created By-Modified++this.dateFieldRef = comp} + type="date" + title="Date" + setFilter={this.wrappedSetFilter} + from={getFilterValue('date.from')} + to={getFilterValue('date.to')} + /> + -
..+ @@ -105,6 +176,12 @@ class SubFolder extends React.Component {
+{renderLink(childLink)}
++ {(link.tag || link.topicTag) === PROJECT_FEED_TYPE_MESSAGES + ? PROJECT_ASSETS_SHARED_WITH_TOPCODER_MEMBERS : PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS} +
+{!owner && childLink.createdBy !== 'CoderBot' && (Unknown)} {!owner && childLink.createdBy === 'CoderBot' && (CoderBot)} @@ -138,6 +215,12 @@ SubFolder.propTypes = { onDeletePostAttachment: PropTypes.func, goBack: PropTypes.func.isRequired, loggedInUser: PropTypes.object, + setFilter: PropTypes.func.isRequired, + getFilterValue: PropTypes.func.isRequired, + clearFilter: PropTypes.func.isRequired, + updateSubContents: PropTypes.func.isRequired, + clearSubContents: PropTypes.func.isRequired, + filtered: PropTypes.bool } export default SubFolder diff --git a/src/components/Grid/GridView.scss b/src/components/Grid/GridView.scss index 0a950fd0f..32a93243a 100644 --- a/src/components/Grid/GridView.scss +++ b/src/components/Grid/GridView.scss @@ -209,6 +209,13 @@ .user-block { white-space: nowrap; + &::after { + clear: both; + content: ''; + display: table; + width: 100%; + } + .txt-box span { font-weight: normal; } diff --git a/src/components/Invitation/Invitation.jsx b/src/components/Invitation/Invitation.jsx new file mode 100644 index 000000000..ef1c81204 --- /dev/null +++ b/src/components/Invitation/Invitation.jsx @@ -0,0 +1,78 @@ +/** + * Flying chat button + */ +import React from 'react' +import PT from 'prop-types' + +import LoadingIndicator from '../LoadingIndicator/LoadingIndicator' +import cn from 'classnames' +import styles from './Invitation.scss' +import EnhancedDropdown from '../NotificationsDropdown/EnhancedDropdown' +import ArrowIcon from '../../assets/icons/arrow-6px-carret-down-active.svg' +import CheckIcon from '../../assets/icons/ui-check.svg' + +class Invitation extends React.Component { + constructor(props) { + super(props) + this.state = { + isShow: false + } + this.onToggle = this.onToggle.bind(this) + } + + onToggle(isShow) { + if(typeof isShow === 'object') { + this.setState({isShow: !this.state.isShow}) + }else { + this.setState({isShow}) + } + } + + render() { + const { + onAcceptClick, + onRejectClick, + isLoading + } = this.props + + return ( +++ ) + } +} + +Invitation.propTypes = { + onAcceptClick: PT.func, + onRejectClick: PT.func, + isLoading: PT.bool, +} + +export default Invitation diff --git a/src/components/Invitation/Invitation.scss b/src/components/Invitation/Invitation.scss new file mode 100644 index 000000000..bca841f4e --- /dev/null +++ b/src/components/Invitation/Invitation.scss @@ -0,0 +1,70 @@ +@import '~tc-ui/src/styles/tc-includes'; +@import '../../styles/includes'; + +.container { + position: relative; + z-index: 15; + + :global(.UserDropdownMenu .Dropdown) { + width: 100%; + } +} + +.label { + @include roboto-bold; + display: flex; + align-items: center; + box-sizing: content-box; + justify-content: center; + background-color: $tc-white; + color: $tc-dark-blue-100; + border: 1px solid $tc-dark-blue-100; + border-radius: 10px; + letter-spacing: 0.8px; + line-height: 12px; + width: 125px; + height: 20px; + font-size: 10px; + svg{ + margin-left: 5px; + margin-right: -5px; + } +} + +.rotate { + transform:rotate(180deg); +} + +.btn:global(.tc-btn) { + @include roboto-bold; + border-radius: 15px; + letter-spacing: 0.8px; + font-size: 12px; + line-height: 14px; + padding: 0 15px; + text-align: center; + white-space: nowrap; + + & + & { + margin-left: 2 * $base-unit; + } + + svg { + margin-right: 4px; + height: 12px; + width: 12px; + } +} + +.popup{ + position: absolute; + right: 0px; + display: flex; + align-items: center; + justify-content: center; + background-color: $tc-white; + border-radius: 6px; + box-shadow: 0 5px 35px 5px rgba($tc-gray-100, 0.1), 0 10px 14px 0 rgba($tc-gray-100, 0.3); + width: 212px; + height: 70px; +} diff --git a/src/components/ProductTypeIcon.jsx b/src/components/ProductTypeIcon.jsx new file mode 100644 index 000000000..3fb395b26 --- /dev/null +++ b/src/components/ProductTypeIcon.jsx @@ -0,0 +1,127 @@ +/** + * ProductTypeIcon component + * + * Renders proper product type icon depend on the product type + */ +import React from 'react' +import PT from 'prop-types' + +import IconAnalyticsAlgorithmOptimization from '../assets/icons/product-analytics-algorithm-optimization.svg' +import IconAnalyticsComputerVision from '../assets/icons/product-analytics-computer-vision.svg' +import IconAnalyticsDataExploration from '../assets/icons/product-analytics-data-exploration.svg' +import IconAnalyticsPredictiveAnalytics from '../assets/icons/product-analytics-predictive-analytics.svg' +import IconAppApp from '../assets/icons/product-app-app.svg' +import IconCatAnalytics from '../assets/icons/product-cat-analytics.svg' +import IconCatApp from '../assets/icons/product-cat-app.svg' +import IconCatChatbot from '../assets/icons/product-cat-chatbot.svg' +import IconCatDesign from '../assets/icons/product-cat-design.svg' +import IconCatDevelopment from '../assets/icons/product-cat-development.svg' +import IconCatQa from '../assets/icons/product-cat-qa.svg' +import IconCatWebsite from '../assets/icons/product-cat-website.svg' +import IconChatbotChatbot from '../assets/icons/product-chatbot-chatbot.svg' +import IconChatbotWatson from '../assets/icons/product-chatbot-watson.svg' +import IconDesignAppVisual from '../assets/icons/product-design-app-visual.svg' +import IconDesignInfographic from '../assets/icons/product-design-infographic.svg' +import IconDesignOther from '../assets/icons/product-design-other.svg' +import IconDesignWireframes from '../assets/icons/product-design-wireframes.svg' +import IconDevFrontendDev from '../assets/icons/product-dev-front-end-dev.svg' +import IconDevIntegration from '../assets/icons/product-dev-integration.svg' +import IconDevOther from '../assets/icons/product-dev-other.svg' +import IconDevPrototype from '../assets/icons/product-dev-prototype.svg' +import IconOtherDesign from '../assets/icons/product-other-design.svg' +import IconQaConsulting from '../assets/icons/product-qa-consulting.svg' +import IconQaCrowdTesting from '../assets/icons/product-qa-crowd-testing.svg' +import IconQaDigitalAccessability from '../assets/icons/product-qa-digital-accessability.svg' +import IconQaHelthCheck from '../assets/icons/product-qa-health-check.svg' +import IconQaMobilityTesting from '../assets/icons/product-qa-mobility-testing.svg' +import IconQaOsAutomation from '../assets/icons/product-qa-os-automation.svg' +import IconQaWebsitePrerfomance from '../assets/icons/product-qa-website-performance.svg' +import IconQaSFDCAccelerator from '../assets/icons/product-qa-sfdc-accelerator.svg' +import IconWebsiteWebsite from '../assets/icons/product-website-website.svg' +import IconOutlineWorkProject from '../assets/icons/tech-32px-outline-work-project.svg' + +const ProductTypeIcon = ({ type }) => { + // if type is defined as a relative path to the icon, convert it to icon "id" + const typeAsPath = type && type.match(/(?:\.\.\/)+assets\/icons\/([^.]+)\.svg/) + if (typeAsPath) { + type = typeAsPath[1] + } + + switch(type){ + case 'product-analytics-algorithm-optimization': + return+ ++++ YOU'RE INVITED +++ + {(!isLoading) ?+ ++ + +:} + + case 'product-analytics-computer-vision': + return + case 'product-analytics-data-exploration': + return + case 'product-analytics-predictive-analytics': + return + case 'product-app-app': + return + case 'product-cat-analytics': + return + case 'product-cat-app': + return + case 'product-cat-chatbot': + return + case 'product-cat-design': + return + case 'product-cat-development': + return + case 'product-cat-qa': + return + case 'product-cat-website': + return + case 'product-chatbot-chatbot': + return + case 'product-chatbot-watson': + return + case 'product-design-app-visual': + return + case 'product-design-infographic': + return + case 'product-design-other': + return + case 'product-design-wireframes': + return + case 'product-dev-front-end-dev': + return + case 'product-dev-integration': + return + case 'product-dev-other': + return + case 'product-dev-prototype': + return + case 'product-other-design': + return + case 'product-qa-consulting': + return + case 'product-qa-crowd-testing': + return + case 'product-qa-digital-accessability': + return + case 'product-qa-health-check': + return + case 'product-qa-mobility-testing': + return + case 'product-qa-os-automation': + return + case 'product-qa-website-performance': + return + case 'product-qa-sfdc-accelerator': + return + case 'product-website-website': + return + case 'tech-32px-outline-work-project': + return + default: + // this will be default icon + return + } +} + +ProductTypeIcon.propTypes = { + type: PT.string, +} + +export default ProductTypeIcon diff --git a/src/components/ProjectInfo/ProjectInfo.jsx b/src/components/ProjectInfo/ProjectInfo.jsx index 5de8c8916..1e84d942a 100644 --- a/src/components/ProjectInfo/ProjectInfo.jsx +++ b/src/components/ProjectInfo/ProjectInfo.jsx @@ -21,7 +21,7 @@ class ProjectInfo extends Component { } render() { - const { project, currentMemberRole, duration, + const { project, currentMemberRole, onChangeStatus, isSuperUser, phases, onSubmitForReview, isProjectProcessing, showDeleteConfirm, toggleProjectDelete, onConfirmDelete } = this.props @@ -90,7 +90,6 @@ class ProjectInfo extends Component { project={project} projectCanBeActive={projectCanBeActive} currentMemberRole={currentMemberRole} - duration={duration} descLinesCount={ /* has to be not too big value here, because the plugin will make this number of iterations @@ -116,7 +115,6 @@ class ProjectInfo extends Component { ProjectInfo.propTypes = { project: PT.object.isRequired, currentMemberRole: PT.string, - duration: PT.object.isRequired, productsTimelines: PT.object.isRequired, updateProject: PT.func, isProjectProcessing: PT.bool, diff --git a/src/components/ProjectTypeIcon.jsx b/src/components/ProjectTypeIcon.jsx index 157628008..3541b6bd6 100644 --- a/src/components/ProjectTypeIcon.jsx +++ b/src/components/ProjectTypeIcon.jsx @@ -6,39 +6,9 @@ import React from 'react' import PT from 'prop-types' -import IconAnalyticsAlgorithmOptimization from '../assets/icons/product-analytics-algorithm-optimization.svg' -import IconAnalyticsComputerVision from '../assets/icons/product-analytics-computer-vision.svg' -import IconAnalyticsDataExploration from '../assets/icons/product-analytics-data-exploration.svg' -import IconAnalyticsPredictiveAnalytics from '../assets/icons/product-analytics-predictive-analytics.svg' -import IconAppApp from '../assets/icons/product-app-app.svg' -import IconCatAnalytics from '../assets/icons/product-cat-analytics.svg' -import IconCatApp from '../assets/icons/product-cat-app.svg' -import IconCatChatbot from '../assets/icons/product-cat-chatbot.svg' -import IconCatDesign from '../assets/icons/product-cat-design.svg' -import IconCatDevelopment from '../assets/icons/product-cat-development.svg' -import IconCatQa from '../assets/icons/product-cat-qa.svg' -import IconCatWebsite from '../assets/icons/product-cat-website.svg' -import IconChatbotChatbot from '../assets/icons/product-chatbot-chatbot.svg' -import IconChatbotWatson from '../assets/icons/product-chatbot-watson.svg' -import IconDesignAppVisual from '../assets/icons/product-design-app-visual.svg' -import IconDesignInfographic from '../assets/icons/product-design-infographic.svg' -import IconDesignOther from '../assets/icons/product-design-other.svg' -import IconDesignWireframes from '../assets/icons/product-design-wireframes.svg' -import IconDevFrontendDev from '../assets/icons/product-dev-front-end-dev.svg' -import IconDevIntegration from '../assets/icons/product-dev-integration.svg' -import IconDevOther from '../assets/icons/product-dev-other.svg' -import IconDevPrototype from '../assets/icons/product-dev-prototype.svg' -import IconOtherDesign from '../assets/icons/product-other-design.svg' -import IconQaConsulting from '../assets/icons/product-qa-consulting.svg' -import IconQaCrowdTesting from '../assets/icons/product-qa-crowd-testing.svg' -import IconQaDigitalAccessability from '../assets/icons/product-qa-digital-accessability.svg' -import IconQaHelthCheck from '../assets/icons/product-qa-health-check.svg' -import IconQaMobilityTesting from '../assets/icons/product-qa-mobility-testing.svg' -import IconQaOsAutomation from '../assets/icons/product-qa-os-automation.svg' -import IconQaWebsitePrerfomance from '../assets/icons/product-qa-website-performance.svg' -import IconQaSFDCAccelerator from '../assets/icons/product-qa-sfdc-accelerator.svg' -import IconWebsiteWebsite from '../assets/icons/product-website-website.svg' -import IconOutlineWorkProject from '../assets/icons/tech-32px-outline-work-project.svg' +import IconProjectTypeSolutions from '../assets/icons/v.2.5/project-type-solutions.svg' +import IconProjectTypeTalentAsService from '../assets/icons/v.2.5/project-type-talent-as-a-service.svg' +import IconProjectDefault from '../assets/icons/v.2.5/project-default.svg' const ProjectTypeIcon = ({ type }) => { // if type is defined as a relative path to the icon, convert it to icon "id" @@ -48,75 +18,13 @@ const ProjectTypeIcon = ({ type }) => { } switch(type){ - case 'product-analytics-algorithm-optimization': - return - case 'product-analytics-computer-vision': - return - case 'product-analytics-data-exploration': - return - case 'product-analytics-predictive-analytics': - return - case 'product-app-app': - return - case 'product-cat-analytics': - return - case 'product-cat-app': - return - case 'product-cat-chatbot': - return - case 'product-cat-design': - return - case 'product-cat-development': - return - case 'product-cat-qa': - return - case 'product-cat-website': - return - case 'product-chatbot-chatbot': - return - case 'product-chatbot-watson': - return - case 'product-design-app-visual': - return - case 'product-design-infographic': - return - case 'product-design-other': - return - case 'product-design-wireframes': - return - case 'product-dev-front-end-dev': - return - case 'product-dev-integration': - return - case 'product-dev-other': - return - case 'product-dev-prototype': - return - case 'product-other-design': - return - case 'product-qa-consulting': - return - case 'product-qa-crowd-testing': - return - case 'product-qa-digital-accessability': - return - case 'product-qa-health-check': - return - case 'product-qa-mobility-testing': - return - case 'product-qa-os-automation': - return - case 'product-qa-website-performance': - return - case 'product-qa-sfdc-accelerator': - return - case 'product-website-website': - return - case 'tech-32px-outline-work-project': - return + case 'project-type-solutions': + return + case 'project-type-talent-as-a-service': + return default: // this will be default icon - return + return } } diff --git a/src/components/RichTextArea/RichTextArea.jsx b/src/components/RichTextArea/RichTextArea.jsx index 5fe2bb59a..975daba61 100644 --- a/src/components/RichTextArea/RichTextArea.jsx +++ b/src/components/RichTextArea/RichTextArea.jsx @@ -445,7 +445,7 @@ class RichTextArea extends React.Component { {avatarUrl &&-}+ diff --git a/src/components/TeamManagement/MemberItem.jsx b/src/components/TeamManagement/MemberItem.jsx index ac818632d..8e3c284c2 100644 --- a/src/components/TeamManagement/MemberItem.jsx +++ b/src/components/TeamManagement/MemberItem.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import moment from 'moment' -import {timezones} from 'appirio-tech-react-components/constants/timezones' +require('moment-timezone') import UserTooltip from '../User/UserTooltip' import SunIcon from '../../assets/icons/daylight.svg' import MoonIcon from '../../assets/icons/moon.svg' @@ -19,16 +19,12 @@ const MemberItem = (props) => { const email = _.get(usr, 'email') let localTime let localTimeOffsetFormat - let timeZoneInfo + let utcOff if(timeZone) { - timeZoneInfo = _.find(timezones, (t) => {return t.zoneName === timeZone}) - // as a quick fix for https://github.com/appirio-tech/connect-app/issues/3457 - // set offset for the "Daylight Saving Time" - if (timeZoneInfo.zoneName === 'America/New_York') { - timeZoneInfo.gmtOffset = -18000 - } - localTime = moment().utcOffset(timeZoneInfo.gmtOffset/3600).format('h:mm a') - localTimeOffsetFormat = 'UTC' + moment().utcOffset(timeZoneInfo.gmtOffset/3600).format('Z') + const tz = moment().tz(timeZone) + localTime = tz.format('h:mm a') + utcOff = tz.utcOffset()/60 + localTimeOffsetFormat = 'UTC' + moment().utcOffset(utcOff).format('Z') } let localTimeInfoEl = null @@ -45,7 +41,7 @@ const MemberItem = (props) => { localWhEnd = moment({hour: workingHourEnd.split(':')[0]}).format('h a') if(localTime) { - let localHour = +moment().utcOffset(timeZoneInfo.gmtOffset/3600).format('H') + let localHour = +moment().utcOffset(utcOff).format('H') const localStartHour = +moment({hour: workingHourStart.split(':')[0] }).format('H') let localEndHour = +moment({hour: workingHourEnd.split(':')[0] }).format('H') if(localEndHour <= localStartHour) { diff --git a/src/components/TeamManagement/ProjectManagementDialog.js b/src/components/TeamManagement/ProjectManagementDialog.js index ea4a7c8be..2f84f61b3 100644 --- a/src/components/TeamManagement/ProjectManagementDialog.js +++ b/src/components/TeamManagement/ProjectManagementDialog.js @@ -135,7 +135,7 @@ class ProjectManagementDialog extends React.Component {@@ -166,7 +166,7 @@ class ProjectManagementDialog extends React.Component { >diff --git a/src/components/TeamManagement/TopcoderManagementDialog.js b/src/components/TeamManagement/TopcoderManagementDialog.js index ac343e977..a02857984 100644 --- a/src/components/TeamManagement/TopcoderManagementDialog.js +++ b/src/components/TeamManagement/TopcoderManagementDialog.js @@ -196,7 +196,7 @@ class TopcoderManagementDialog extends React.Component {@@ -300,7 +300,7 @@ class TopcoderManagementDialog extends React.Component { >diff --git a/src/components/TopBar/TopBarContainer.js b/src/components/TopBar/TopBarContainer.js index 9117f13b1..172d20285 100644 --- a/src/components/TopBar/TopBarContainer.js +++ b/src/components/TopBar/TopBarContainer.js @@ -69,7 +69,7 @@ class TopBarContainer extends React.Component { const { user, toolbar, userRoles, isPowerUser } = this.props const userHandle = _.get(user, 'handle') const bigPhotoURL = _.get(user, 'photoURL') - const userImage = getAvatarResized(bigPhotoURL, 40) + const userImage = getAvatarResized(bigPhotoURL, 80) const userName = getFullNameWithFallback(user) const homePageUrl = `${window.location.protocol}//${window.location.host}/` const logoutLink = `https://accounts.${DOMAIN}/#!/logout?retUrl=${homePageUrl}` @@ -88,8 +88,8 @@ class TopBarContainer extends React.Component { const userMenuItems = [ [ { label: 'My profile', link: '/settings/profile' }, - { label: 'Account and security', link: '/settings/account' }, { label: 'Notification settings', link: '/settings/notifications' }, + { label: 'Account & security', link: '/settings/account' }, ], [ { label: 'Log out', onClick: logoutClick, absolute: true, id: 0 } @@ -172,7 +172,7 @@ const mapStateToProps = ({ loadUser }) => { ROLE_CONNECT_ACCOUNT_MANAGER, ROLE_ADMINISTRATOR, ROLE_CONNECT_ADMIN, - + ROLE_BUSINESS_DEVELOPMENT_REPRESENTATIVE, ROLE_PRESALES, ROLE_ACCOUNT_EXECUTIVE, diff --git a/src/components/User/UserTooltip.jsx b/src/components/User/UserTooltip.jsx index d2a49ab2d..7030feb20 100644 --- a/src/components/User/UserTooltip.jsx +++ b/src/components/User/UserTooltip.jsx @@ -21,7 +21,7 @@ const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, showEmailOnly const avatar = () @@ -31,7 +31,7 @@ const UserTooltip = ({ usr, id, previewAvatar, size, invitedLabel, showEmailOnly { previewAvatar ? ( diff --git a/src/components/User/UserWithName.jsx b/src/components/User/UserWithName.jsx index e757826de..1f0d0fc86 100644 --- a/src/components/User/UserWithName.jsx +++ b/src/components/User/UserWithName.jsx @@ -10,7 +10,7 @@ const UserWithName = ({ handle, firstName, lastName, photoURL, photoSize, theme, const userFullName = getFullNameWithFallback({ handle, firstName, lastName }) const avatar = ( diff --git a/src/components/UserSummary/UserSummary.jsx b/src/components/UserSummary/UserSummary.jsx index 3e1f08303..53184396d 100644 --- a/src/components/UserSummary/UserSummary.jsx +++ b/src/components/UserSummary/UserSummary.jsx @@ -4,7 +4,7 @@ import Avatar from 'appirio-tech-react-components/components/Avatar/Avatar' import moment from 'moment' import './UserSummary.scss' -import { getFullNameWithFallback } from '../../helpers/tcHelpers' +import { getFullNameWithFallback, getAvatarResized } from '../../helpers/tcHelpers' const UserSummary = ({user}) => { // TODO: Replace hardcoded values with real data @@ -19,7 +19,7 @@ const UserSummary = ({user}) => { + ) +} + +IconOvalWrapper.propTypes = { + children: PropTypes.element +} + +export default IconOvalWrapper diff --git a/src/projects/create/components/IconOvalWrapper.scss b/src/projects/create/components/IconOvalWrapper.scss new file mode 100644 index 000000000..468c3c406 --- /dev/null +++ b/src/projects/create/components/IconOvalWrapper.scss @@ -0,0 +1,11 @@ +.icon-wrapper { + display: flex; + position: relative; + justify-content: center; + align-items: center; + svg:last-child { + position: absolute; + width: 30px; + height: 30px; + } +} diff --git a/src/projects/create/components/ProjectWizard.jsx b/src/projects/create/components/ProjectWizard.jsx index ae9602ca2..3ec209e33 100644 --- a/src/projects/create/components/ProjectWizard.jsx +++ b/src/projects/create/components/ProjectWizard.jsx @@ -374,6 +374,9 @@ class ProjectWizard extends Component { newProject.name = { $set:_.get(incompleteProject, 'name') } newProject.description = { $set:_.get(incompleteProject, 'description') } newProject.details = { $set: { utm: { code:_.get(incompleteProject, 'details.utm.code') } } } + } else { + // retain previously filled data (if any) when choosing the same template + _.assign(newProject, { $merge : incompleteProject }) } } window.scrollTo(0, 0) diff --git a/src/projects/create/components/ProjectWizard.scss b/src/projects/create/components/ProjectWizard.scss index 49029805d..7cb0da559 100644 --- a/src/projects/create/components/ProjectWizard.scss +++ b/src/projects/create/components/ProjectWizard.scss @@ -13,6 +13,12 @@ align-items: flex-start; } + &.ProjectWizard-step-2 { + .content { + flex-basis: 100%; + } + } + &.ProjectWizard-step-0 { align-items: flex-start; padding-top: 30px; diff --git a/src/projects/create/components/SelectProduct.js b/src/projects/create/components/SelectProduct.js deleted file mode 100644 index a34b89528..000000000 --- a/src/projects/create/components/SelectProduct.js +++ /dev/null @@ -1,167 +0,0 @@ -import React from 'react' -import PT from 'prop-types' -import config from '../../../config/projectWizard' -import ProductCard from './ProductCard' -import { findCategory } from '../../../config/projectWizard' -import { DOMAIN } from '../../../config/constants' -import './SelectProduct.scss' -import IconAnalyticsAlgorithmOptimization from '../../../assets/icons/product-analytics-algorithm-optimization.svg' -import IconAnalyticsComputerVision from '../../../assets/icons/product-analytics-computer-vision.svg' -import IconAnalyticsDataExploration from '../../../assets/icons/product-analytics-data-exploration.svg' -import IconAnalyticsPredictiveAnalytics from '../../../assets/icons/product-analytics-predictive-analytics.svg' -import IconAppApp from '../../../assets/icons/product-app-app.svg' -import IconCatAnalytics from '../../../assets/icons/product-cat-analytics.svg' -import IconCatApp from '../../../assets/icons/product-cat-app.svg' -import IconCatChatbot from '../../../assets/icons/product-cat-chatbot.svg' -import IconCatDesign from '../../../assets/icons/product-cat-design.svg' -import IconCatDevelopment from '../../../assets/icons/product-cat-development.svg' -import IconCatQa from '../../../assets/icons/product-cat-qa.svg' -import IconCatWebsite from '../../../assets/icons/product-cat-website.svg' -import IconChatbotChatbot from '../../../assets/icons/product-chatbot-chatbot.svg' -import IconChatbotWatson from '../../../assets/icons/product-chatbot-watson.svg' -import IconDesignAppVisual from '../../../assets/icons/product-design-app-visual.svg' -import IconDesignInfographic from '../../../assets/icons/product-design-infographic.svg' -import IconDesignOther from '../../../assets/icons/product-design-other.svg' -import IconDesignWireframes from '../../../assets/icons/product-design-wireframes.svg' -import IconDevFrontendDev from '../../../assets/icons/product-dev-front-end-dev.svg' -import IconDevIntegration from '../../../assets/icons/product-dev-integration.svg' -import IconDevOther from '../../../assets/icons/product-dev-other.svg' -import IconDevPrototype from '../../../assets/icons/product-dev-prototype.svg' -import IconOtherDesign from '../../../assets/icons/product-other-design.svg' -import IconQaConsulting from '../../../assets/icons/product-qa-consulting.svg' -import IconQaCrowdTesting from '../../../assets/icons/product-qa-crowd-testing.svg' -import IconQaDigitalAccessability from '../../../assets/icons/product-qa-digital-accessability.svg' -import IconQaHelthCheck from '../../../assets/icons/product-qa-health-check.svg' -import IconQaMobilityTesting from '../../../assets/icons/product-qa-mobility-testing.svg' -import IconQaOsAutomation from '../../../assets/icons/product-qa-os-automation.svg' -import IconQaWebsitePrerfomance from '../../../assets/icons/product-qa-website-performance.svg' -import IconQaSFDCAccelerator from '../../../assets/icons/product-qa-sfdc-accelerator.svg' -import IconWebsiteWebsite from '../../../assets/icons/product-website-website.svg' -import IconOutlineWorkProject from '../../../assets/icons/tech-32px-outline-work-project.svg' - -/** - * @params {string} type project type - */ -const ProjectTypeIcons = ({ type }) => { - switch (type) { - case 'product-analytics-algorithm-optimization': - return) @@ -82,7 +76,6 @@ ProjectCardBody.propTypes = { project: PT.object.isRequired, projectCanBeActive: PT.bool, currentMemberRole: PT.string, - duration: PT.object.isRequired, showLink: PT.bool, showLinkURL: PT.string, canEditStatus: PT.bool, diff --git a/src/projects/components/projectsCard/ProjectCardHeader.scss b/src/projects/components/projectsCard/ProjectCardHeader.scss index acb682699..a498ac305 100644 --- a/src/projects/components/projectsCard/ProjectCardHeader.scss +++ b/src/projects/components/projectsCard/ProjectCardHeader.scss @@ -10,8 +10,8 @@ position: relative; .badge-wrapper { - position: absolute; - right: 0px; + position: absolute; + right: 0px; top: 4px; } @@ -20,6 +20,10 @@ margin-top: 4px; vertical-align: middle; display: inline-block; + + > svg > path { + fill: $tc-dark-blue-110; + } } .project-header-details { diff --git a/src/projects/components/projectsCard/ProjectsCardView.jsx b/src/projects/components/projectsCard/ProjectsCardView.jsx index 23399f70e..5ddc14ba9 100644 --- a/src/projects/components/projectsCard/ProjectsCardView.jsx +++ b/src/projects/components/projectsCard/ProjectsCardView.jsx @@ -6,7 +6,6 @@ import ProjectCard from './ProjectCard' import NewProjectCard from './NewProjectCard' import cn from 'classnames' import { PROJECTS_LIST_PER_PAGE } from '../../../config/constants' -import { setDuration } from '../../../helpers/projectHelper' import { filterReadNotifications, filterNotificationsByProjectId, @@ -37,7 +36,6 @@ const ProjectsCardView = props => { }) const renderProject = (project) => { - const duration = setDuration({}, project.status) //const { notifications } = this.props; const notReadNotifications = filterReadNotifications(notifications) const unreadProjectUpdate = filterNotificationsByProjectId(notReadNotifications, project.id) @@ -47,7 +45,6 @@ const ProjectsCardView = props => {-+ }diff --git a/src/components/UserSummary/UserSummary.scss b/src/components/UserSummary/UserSummary.scss index c14bcd1b1..257c9c236 100644 --- a/src/components/UserSummary/UserSummary.scss +++ b/src/components/UserSummary/UserSummary.scss @@ -27,6 +27,9 @@ font-size: 16px; line-height: 20px; color: $tc-gray-90; + width: 150px; + text-overflow: ellipsis; + overflow: hidden; } .handle { diff --git a/src/components/WizardWrapper/WizardWrapper.scss b/src/components/WizardWrapper/WizardWrapper.scss index a28f929c9..6ec5537f1 100644 --- a/src/components/WizardWrapper/WizardWrapper.scss +++ b/src/components/WizardWrapper/WizardWrapper.scss @@ -39,4 +39,5 @@ flex: 1 1 auto; background: $tc-gray-0; box-shadow: 0 0 5px 0 #C0C0C0, 0 0 1px 0 #D5D5D5; + max-width: 100%; } diff --git a/src/config/constants.js b/src/config/constants.js index bddd8384b..d5e695f10 100644 --- a/src/config/constants.js +++ b/src/config/constants.js @@ -101,12 +101,6 @@ export const LOAD_PROJECT_DASHBOARD_PENDING = 'LOAD_PROJECT_DASHBOARD_PENDIN export const LOAD_PROJECT_DASHBOARD_FAILURE = 'LOAD_PROJECT_DASHBOARD_FAILURE' export const LOAD_PROJECT_DASHBOARD_SUCCESS = 'LOAD_PROJECT_DASHBOARD_SUCCESS' -// Direct Project Data -export const LOAD_DIRECT_PROJECT = 'LOAD_DIRECT_PROJECT' -export const LOAD_DIRECT_PROJECT_PENDING = 'LOAD_DIRECT_PROJECT_PENDING' -export const LOAD_DIRECT_PROJECT_FAILURE = 'LOAD_DIRECT_PROJECT_FAILURE' -export const LOAD_DIRECT_PROJECT_SUCCESS = 'LOAD_DIRECT_PROJECT_SUCCESS' - // Direct Project Data export const LOAD_ADDITIONAL_PROJECT_DATA = 'LOAD_ADDITIONAL_PROJECT_DATA' export const LOAD_ADDITIONAL_PROJECT_DATA_PENDING = 'LOAD_ADDITIONAL_PROJECT_DATA_PENDING' @@ -423,6 +417,7 @@ export const LOAD_PROJECT_SUMMARY = 'LOAD_PROJECT_SUMMARY' export const LOAD_PROJECT_SUMMARY_PENDING = 'LOAD_PROJECT_SUMMARY_PENDING' export const LOAD_PROJECT_SUMMARY_SUCCESS = 'LOAD_PROJECT_SUMMARY_SUCCESS' export const LOAD_PROJECT_SUMMARY_FAILURE = 'LOAD_PROJECT_SUMMARY_FAILURE' +export const REFRESH_LOOKER_SESSION = 'REFRESH_LOOKER_SESSION' // Product attachments export const ADD_PRODUCT_ATTACHMENT = 'ADD_PRODUCT_ATTACHMENT' @@ -596,7 +591,7 @@ export const PHASE_STATUS = [ // this defines default criteria to filter projects for projects list export const PROJECT_LIST_DEFAULT_CRITERIA = { - sort: 'updatedAt desc' + sort: 'lastActivityAt desc' } export const NOTIFICATION_TYPE = { @@ -914,6 +909,7 @@ export const EVENT_TYPE = { INVITE_REQUESTED: 'connect.notification.project.member.invite.requested', INVITE_APPROVED: 'connect.notification.project.member.invite.approved', INVITE_REFUSED: 'connect.notification.project.member.invite.rejected', + INVITE_CREATED: 'connect.notification.project.member.invite.created' }, PROJECT: { ACTIVE: 'connect.notification.project.active', @@ -937,13 +933,33 @@ export const EVENT_TYPE = { PHASE_PROGRESS_UPDATED: 'connect.notification.project.phase.update.progress', PHASE_SCOPE_UPDATED: 'connect.notification.project.phase.update.scope', PHASE_PRODUCT_SPEC_UPDATED: 'connect.notification.project.product.update.spec', - MILESTONE_ACTIVATED: 'connect.notification.timeline.milestone.transition.active', - MILESTONE_COMPLETED: 'connect.notification.timeline.milestone.transition.completed', - WAITING_FOR_CUSTOMER_INPUT: 'connect.notification.timeline.milestone.waiting.customer', - TIMELINE_ADJUSTED: 'connect.notification.timeline.adjusted', + MILESTONE_ACTIVATED: 'connect.notification.project.timeline.milestone.transition.active', + MILESTONE_COMPLETED: 'connect.notification.project.timeline.milestone.transition.completed', + WAITING_FOR_CUSTOMER_INPUT: 'connect.notification.project.timeline.milestone.waiting.customer', + TIMELINE_ADJUSTED: 'connect.notification.project.timeline.adjusted', }, TOPIC: { CREATED: 'connect.notification.project.topic.created', DELETED: 'connect.notification.project.topic.deleted', }, } + + +/** + * Project assets shared with type text + */ +export const PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS = 'All Project Members' +export const PROJECT_ASSETS_SHARED_WITH_TOPCODER_MEMBERS = 'Only Topcoder Members' +export const PROJECT_ASSETS_SHARED_WITH_ADMIN = 'Only Admins' + + + +/** + * REPORTS + */ +export const PROJECT_REPORTS = { + PROJECT_SUMMARY : 'summary', + TAAS_MEMBERS : 'taas_members', +} + +export const REPORT_SESSION_LENGTH = 1800 \ No newline at end of file diff --git a/src/helpers/markdownToState.js b/src/helpers/markdownToState.js index 1641b0bcd..cb6db1ea6 100644 --- a/src/helpers/markdownToState.js +++ b/src/helpers/markdownToState.js @@ -245,6 +245,7 @@ function markdownToState(markdown, options = {}) { const entityMap = {} // entitymap will be returned as part of the final draftjs raw object const parsedData = md.parse(_markdown, {}) // remarkable js takes markdown and makes it an array of style objects for us to easily parse let currentListType = null // Because of how remarkable's data is formatted, we need to cache what kind of list we're currently dealing with + let insideListItem = false // To handle nested code blocks inside list items // Allow user to define custom BlockTypes and Entities if they so wish const BlockTypes = Object.assign({}, DefaultBlockTypes, options.blockTypes || {}) @@ -262,9 +263,32 @@ function markdownToState(markdown, options = {}) { let itemType = item.type if (itemType === 'list_item_open') { itemType = currentListType + insideListItem = true + } else if (itemType === 'list_item_close'){ + insideListItem = false + } + + if (itemType === 'code') { + // If code is at level zero or if code is inside list item, we can treat it similar to fence + // Draftjs doesn't support nested blocks, To handle this we render code as inline + if(item.level === 0 || insideListItem){ + item.type = 'fence' + item.level = 0 // If inside list item, should behave as it is at level 0 + }else{ + // Convert code to inline in cases like: code is inside the blockquote + convertCodeToInline(item) + } + + itemType = item.type } if (itemType === 'inline') { + // Add unstyled block if there is no recently created block exists + // This will ensure we are never overwritting content + if(blocks[blocks.length - 1].text !== ''){ + const block = getNewBlock(BlockTypes['paragraph_open']()) + blocks.push(block) + } // Parse inline content and apply it to the most recently created block level item, // which is where the inline content will belong. const {content, blockEntities, blockEntityRanges, blockInlineStyleRanges} = parseInline(item, BlockEntities, BlockStyles) @@ -282,21 +306,42 @@ function markdownToState(markdown, options = {}) { // List items will always be at least `level==1` though so we need a separate check fo that // TODO: Draft does allow lists to be nested within lists, it's the one exception to its rule, // but right now this code doesn't support that. - if (item.level === 0 || item.type === 'list_item_open') { - const block = Object.assign({ - depth: 0, - // set default values when creating a block, usually the block would have some inline items and - // so these default values would be overwritten because of inline items by `blockToModify` object above - text: '', - inlineStyleRanges: [], - entityRanges: [], - }, BlockTypes[itemType](item)) - + // blockquote may be nested inside list item with level greater than 0 + if (item.level === 0 || item.type === 'list_item_open' || item.type === 'blockquote_open') { + const block = getNewBlock(BlockTypes[itemType](item)) blocks.push(block) } } }) + /** + * Helper function to convert block item of type Code to inline + */ + function convertCodeToInline(item) { + item.type = 'inline' + const codeBlockSixSpace = ' ' + item.content = codeBlockSixSpace + item.content + item.children = [{ + type: 'text', + content: item.content, + level: 0 + }] + } + + /** + * Helper function to create empty block type + */ + function getNewBlock(DefaultBlockType) { + return Object.assign({ + depth: 0, + // set default values when creating a block, usually the block would have some inline items and + // so these default values would be overwritten because of inline items by `blockToModify` object above + text: '', + inlineStyleRanges: [], + entityRanges: [], + }, DefaultBlockType) + } + return convertFromRaw({ entityMap, blocks, diff --git a/src/helpers/projectHelper.js b/src/helpers/projectHelper.js index 656218281..a199155ca 100644 --- a/src/helpers/projectHelper.js +++ b/src/helpers/projectHelper.js @@ -35,52 +35,6 @@ export const getProjectRoleForCurrentUser = ({currentUserId, project}) => { return role } -export const setDuration = ({duration, status}) => { - let percent ='' - let title = '' - let text = '' - let type = 'completed' // default - if (duration && duration.plannedDuration) { - const {actualDuration, plannedDuration} = duration - if (status === 'draft') { - title = 'Duration' - percent = 0 - text = 'Complete specification to get estimate' - } else if (status === 'in_review') { - title = 'Duration' - percent = 0 - text = 'Pending review' - } else if (status === 'reviewed') { - title = `${plannedDuration} days (projected)` - percent = 0 - text = `${plannedDuration} days remaining` - } else if (status === 'completed') { - title = 'Completed' - percent = 100 - text = '' - type = 'completed' - } else { - text = `Day ${actualDuration} of ${plannedDuration}` - percent = actualDuration / plannedDuration * 100 - if (0 <= percent && percent < 100) { - const diff = plannedDuration - actualDuration - title = `${diff} ${diff > 1 ? 'days' : 'day'} remaining` - type = 'working' - } else { - percent = 100 - type = 'error' - const diff = actualDuration - plannedDuration - title = `${diff} ${diff > 1 ? 'days' : 'day'} over` - } - } - } else { - title = 'Duration' - percent = 0 - text = status === 'draft' ? 'Complete specification to get estimate' : 'Estimate not entered' - } - return { title, text, percent, type } -} - /** * Format ProjectProgress props * @@ -194,31 +148,6 @@ export function getProjectActualDuration(phases, productsTimelines) { return projectedDuration } -/** - * Format ProjectProgress props for old projects - * - * @param {Object} project project object - * - * @return {Object} ProjectProgress props - */ -export function formatOldProjectProgressProps(project) { - const actualDuration = _.get(project, 'duration.actualDuration', 0) - const projectedDuration = _.get(project, 'duration.projectedDuration', 0) - const actualCost = _.get(project, 'budget.actualCost', 0) - - const progressPercent = projectedDuration !== 0 ? Math.round(actualDuration/projectedDuration) : 0 - const labelDayStatus = `Day ${actualDuration} of ${projectedDuration}` - const labelSpent = `Spent $${formatNumberWithCommas(actualCost)}` - const labelStatus = `${progressPercent}% done` - - return { - labelDayStatus, - labelSpent, - labelStatus, - progressPercent, - } -} - /** * Gets actual data of the phase depend if phase has timeline or no * diff --git a/src/helpers/templates.js b/src/helpers/templates.js index d60c629f7..b2f17a83e 100644 --- a/src/helpers/templates.js +++ b/src/helpers/templates.js @@ -136,6 +136,20 @@ export function getProjectTemplatesByCategory(projectTemplates, categoryKey, vis .filter((projectTemplate) => visibleOnly ? !projectTemplate.hidden && !projectTemplate.disabled : true) } +/** + * Get project templates by sub category + * + * @param {Array} projectTemplates list of project templates + * @param {String} subCategoryKey sub category key + * @param {Boolean} visibleOnly if true only not hidden and not disabled project templates will returned + * + * @returns {Array} list of project templates + */ +export function getProjectTemplatesBySubCategory(projectTemplates, subCategoryKey, visibleOnly) { + return _.filter(projectTemplates, { subCategory: subCategoryKey }) + .filter((projectTemplate) => visibleOnly ? !projectTemplate.hidden && !projectTemplate.disabled : true) +} + /** * Get project type by its key * diff --git a/src/helpers/utils.js b/src/helpers/utils.js index d38b72ac5..8c623f119 100644 --- a/src/helpers/utils.js +++ b/src/helpers/utils.js @@ -113,3 +113,34 @@ export const createEvent = (eventName) => { export const delay = (milliseconds) => new Promise((resolve) => { setTimeout(resolve, milliseconds) }) + +/** + * Case-insensitive search + * + * @param {String} key search key + * @param {String} searchString search string + * + * @returns {Bool} + */ +export const caseInsensitiveSearch = (key, searchString) => { + if (!key || !searchString) { + return false + } + + return searchString.toLowerCase().indexOf(key.toLowerCase()) >= 0 +} + +/** + * format phone bofore send to server + * if phone is not head with '+', add '+' + * + * @param {String} phone + * @returns {String} + */ +export const formatPhone = (phone) => { + if(phone[0] === '+') { + return phone + }else{ + return '+' + phone + } +} diff --git a/src/projects/actions/project.js b/src/projects/actions/project.js index 2e451cf1b..c4955a613 100644 --- a/src/projects/actions/project.js +++ b/src/projects/actions/project.js @@ -7,7 +7,6 @@ import { getProjectById, updateProject as updateProjectAPI, deleteProject as deleteProjectAPI, deleteProjectPhase as deleteProjectPhaseAPI, - getDirectProjectData, getProjectPhases, updateProduct as updateProductAPI, updatePhase as updatePhaseAPI, @@ -33,7 +32,6 @@ import { CREATE_PROJECT_STAGE, CLEAR_LOADED_PROJECT, UPDATE_PROJECT, - LOAD_DIRECT_PROJECT, DELETE_PROJECT, PROJECT_DIRTY, PROJECT_DIRTY_UNDO, @@ -547,15 +545,6 @@ export function deleteProject(newProject) { } } -export function loadDirectProjectData(directProjectId) { - return (dispatch) => { - return dispatch({ - type: LOAD_DIRECT_PROJECT, - payload: getDirectProjectData(directProjectId) - }) - } -} - export function fireProjectDirty(dirtyProject) { return (dispatch) => { return dispatch({ diff --git a/src/projects/actions/projectDashboard.js b/src/projects/actions/projectDashboard.js index 6d2172330..b7d9db0de 100644 --- a/src/projects/actions/projectDashboard.js +++ b/src/projects/actions/projectDashboard.js @@ -1,5 +1,5 @@ import _ from 'lodash' -import { loadProject, loadProjectInvite, loadDirectProjectData, loadProjectMembers, loadProjectMemberInvites } from './project' +import { loadProject, loadProjectInvite, loadProjectMembers, loadProjectMemberInvites } from './project' import { loadProjectPlan } from './projectPlan' import { loadProjectsMetadata } from '../../actions/templates' import { LOAD_PROJECT_DASHBOARD, LOAD_ADDITIONAL_PROJECT_DATA } from '../../config/constants' @@ -32,10 +32,6 @@ const getDashboardData = (dispatch, getState, projectId, isOnlyLoadProjectInfo) promises = [] } - if (project.directProjectId && !isOnlyLoadProjectInfo) { - promises.push(dispatch(loadDirectProjectData(project.directProjectId))) - } - // for new projects load phases, products, project template and product templates if (project.version === 'v3') { promises.push( diff --git a/src/projects/actions/projectReports.js b/src/projects/actions/projectReports.js index 8f26fc196..7c91a88b7 100644 --- a/src/projects/actions/projectReports.js +++ b/src/projects/actions/projectReports.js @@ -1,8 +1,10 @@ import { - LOAD_PROJECT_SUMMARY + LOAD_PROJECT_SUMMARY, + REFRESH_LOOKER_SESSION, } from '../../config/constants' import { - getProjectSummary + getProjectSummary, + getProjectReportUrl, } from '../../api/projectReports' export function loadProjectSummary(projectId) { @@ -14,3 +16,31 @@ export function loadProjectSummary(projectId) { }) } } + +/** + * Redux action to start fetching the signed URL for embeding the given report + * @param {*} projectId id of the project + * @param {*} reportName unique name of the report + */ +export function loadProjectReportsUrls(projectId, reportName) { + return (dispatch) => { + return dispatch({ + type: LOAD_PROJECT_SUMMARY, + payload: getProjectReportUrl(projectId, reportName), + meta: { projectId } + }) + } +} + +/** + * Redux action to refresh the looker session. It is aimed to just indicate that there is need + * of refreshing the token. It does not do any thing itself. It is upto the state listner to react. + */ +export function refreshLookerSession() { + return (dispatch) => { + return dispatch({ + type: REFRESH_LOOKER_SESSION, + payload: { lookerSessionExpired: true } + }) + } +} \ No newline at end of file diff --git a/src/projects/components/projectsCard/ProjectCard.jsx b/src/projects/components/projectsCard/ProjectCard.jsx index 987f73ed3..47037d73c 100644 --- a/src/projects/components/projectsCard/ProjectCard.jsx +++ b/src/projects/components/projectsCard/ProjectCard.jsx @@ -6,10 +6,10 @@ import { getProjectRoleForCurrentUser } from '../../../helpers/projectHelper' import ProjectCardHeader from './ProjectCardHeader' import ProjectCardBody from './ProjectCardBody' import ProjectManagerAvatars from '../../list/components/Projects/ProjectManagerAvatars' -import LoadingIndicator from '../../../components/LoadingIndicator/LoadingIndicator' +import Invitation from '../../../components/Invitation/Invitation' import './ProjectCard.scss' -function ProjectCard({ project, duration, disabled, currentUser, history, onChangeStatus, projectTemplates, unreadMentionsCount, callInviteRequest, isAcceptingInvite }) { +function ProjectCard({ project, disabled, currentUser, history, onChangeStatus, projectTemplates, unreadMentionsCount, callInviteRequest, isAcceptingInvite }) { const className = `ProjectCard ${ disabled ? 'disabled' : 'enabled'}` if (!project) return null const currentMemberRole = getProjectRoleForCurrentUser({ project, currentUserId: currentUser.userId}) @@ -31,7 +31,6 @@ function ProjectCard({ project, duration, disabled, currentUser, history, onChan) @@ -82,7 +69,6 @@ ProjectCard.propTypes = { unreadMentionsCount: PT.number.isRequired, callInviteRequest: PT.func, isAcceptingInvite: PT.bool - // duration: PT.object.isRequired, } export default withRouter(ProjectCard) diff --git a/src/projects/components/projectsCard/ProjectCard.scss b/src/projects/components/projectsCard/ProjectCard.scss index 4a2266e36..498429b34 100644 --- a/src/projects/components/projectsCard/ProjectCard.scss +++ b/src/projects/components/projectsCard/ProjectCard.scss @@ -90,9 +90,15 @@ } .join-btn-container { - display: flex; - align-items: flex-end; - flex-direction: column; + align-self: center; + + :global(.UserDropdownMenu) { + padding: 0; + } + + :global(.UserDropdownMenu .Dropdown.pointer-shadow) { + margin-top: 25px; + } } } } diff --git a/src/projects/components/projectsCard/ProjectCardBody.jsx b/src/projects/components/projectsCard/ProjectCardBody.jsx index 0b7543474..dfc9431f8 100644 --- a/src/projects/components/projectsCard/ProjectCardBody.jsx +++ b/src/projects/components/projectsCard/ProjectCardBody.jsx @@ -2,7 +2,6 @@ import React from 'react' import PT from 'prop-types' import TextTruncate from 'react-text-truncate' import { Link } from 'react-router-dom' -import ProjectProgress from '../../../components/ProjectProgress/ProjectProgress' import ProjectStatus from '../../../components/ProjectStatus/ProjectStatus' import editableProjectStatus from '../../../components/ProjectStatus/editableProjectStatus' import { @@ -17,7 +16,7 @@ import _ from 'lodash' const EnhancedProjectStatus = editableProjectStatus(ProjectStatus) -function ProjectCardBody({ project, projectCanBeActive, duration, currentMemberRole, descLinesCount = 8, +function ProjectCardBody({ project, projectCanBeActive, currentMemberRole, descLinesCount = 8, onChangeStatus, isSuperUser, showLink, showLinkURL, canEditStatus = true, hideStatus }) { if (!project) return null @@ -61,11 +60,6 @@ function ProjectCardBody({ project, projectCanBeActive, duration, currentMemberR projectId={project.id} /> } - {(project.status === PROJECT_STATUS_ACTIVE && progress !== 0) && -- - {(!isMember && isInvited) && -+ {(!isMember && isInvited) && +- {(!isAcceptingInvite) && ( - )} - {(!isAcceptingInvite) && ( - )} - {isAcceptingInvite && (- } -)} - ++ }{ + callInviteRequest(project, true) + }} + onRejectClick={() => { + callInviteRequest(project, false) + }} + /> + - {progress}% completed - - }+ + {children} + - case 'product-analytics-computer-vision': - return - case 'product-analytics-data-exploration': - return - case 'product-analytics-predictive-analytics': - return - case 'product-app-app': - return - case 'product-cat-analytics': - return - case 'product-cat-app': - return - case 'product-cat-chatbot': - return - case 'product-cat-design': - return - case 'product-cat-development': - return - case 'product-cat-qa': - return - case 'product-cat-website': - return - case 'product-chatbot-chatbot': - return - case 'product-chatbot-watson': - return - case 'product-design-app-visual': - return - case 'product-design-infographic': - return - case 'product-design-other': - return - case 'product-design-wireframes': - return - case 'product-dev-front-end-dev': - return - case 'product-dev-integration': - return - case 'product-dev-other': - return - case 'product-dev-prototype': - return - case 'product-other-design': - return - case 'product-qa-consulting': - return - case 'product-qa-crowd-testing': - return - case 'product-qa-digital-accessability': - return - case 'product-qa-health-check': - return - case 'product-qa-mobility-testing': - return - case 'product-qa-os-automation': - return - case 'product-qa-website-performance': - return - case 'product-qa-sfdc-accelerator': - return - case 'product-website-website': - return - case 'tech-32px-outline-work-project': - return - default: - return 'undefined icon' - } -} - -ProjectTypeIcons.propTypes = { - type: PT.string -} - -function SelectProduct(props) { - const { projectType } = props - const cards = [] - for (const key in config) { - const type = config[key] - if (projectType && type.id !== projectType) continue - const subTypes = type.subtypes - for(const subType in subTypes) { - const item = subTypes[subType] - // don't render disabled items for selection - // don't render hidden items as well, hidden items can be reached via direct link though - if (item.disabled || item.hidden) continue - const icon = - cards.push( - props.onProductChange(type.id, item.id)} - type={ subType } - /> - ) - } - } - const projectCategory = findCategory(props.projectType) - return ( - - -- ) -} - -SelectProduct.propTypes = { - onProductChange: PT.func.isRequired, - userRoles: PT.arrayOf(PT.string) -} - -export default SelectProduct diff --git a/src/projects/create/components/SelectProductTemplate.jsx b/src/projects/create/components/SelectProductTemplate.jsx index 8d5c302aa..f6456ec6d 100644 --- a/src/projects/create/components/SelectProductTemplate.jsx +++ b/src/projects/create/components/SelectProductTemplate.jsx @@ -2,8 +2,7 @@ import React from 'react' import PT from 'prop-types' import ProjectTypeCard from './ProjectTypeCard' -import ProjectTypeIcon from '../../../components/ProjectTypeIcon' - +import ProductTypeIcon from '../../../components/ProductTypeIcon' import ConnectLogoMono from '../../../assets/icons/connect-logo-mono.svg' import './SelectProductTemplate.scss' @@ -26,7 +25,7 @@ const SelectProductTemplate = ({ // don't render hidden items as well, hidden items can be reached via direct link though if (productTemplate.disabled || productTemplate.hidden) return - const icon =--{ projectCategory.name } projects
-{ projectCategory.question }
-{cards}-- Looking for something else? Get in touch with us → --+ const icon = const category = productTemplate.category || '' cards[category] = cards[category] || [] cards[category].push( diff --git a/src/projects/create/components/SelectProjectTemplate.jsx b/src/projects/create/components/SelectProjectTemplate.jsx index 5f9f4d0b2..7562ff85f 100644 --- a/src/projects/create/components/SelectProjectTemplate.jsx +++ b/src/projects/create/components/SelectProjectTemplate.jsx @@ -1,54 +1,265 @@ import React from 'react' import PT from 'prop-types' +import cn from 'classnames' -import ProductCard from './ProductCard' +import SelectProjectTemplateCard from './SelectProjectTemplateCard' import ProjectTypeIcon from '../../../components/ProjectTypeIcon' -import { getProjectTypeByKey, getProjectTemplatesByCategory } from '../../../helpers/templates' +import IconArrowRight from '../../../assets/icons/arrows-16px-1_tail-right.svg' + +import { + getProjectTypeByKey, + getProjectTemplatesByCategory, + getProjectTemplatesBySubCategory +} from '../../../helpers/templates' + +import { + caseInsensitiveSearch +} from '../../../helpers/utils' import { DOMAIN } from '../../../config/constants' +import SearchIcon from '../../../assets/icons/ico-mobile-search-selected.svg' +import CloseSearchIcon from '../../../assets/icons/icon-x-mark.svg' import './SelectProjectTemplate.scss' -const SelectProjectTemplate = ({ - onProjectTemplateChange, - projectTemplates, - projectTypeKey, - projectTypes, -}) => { - const projectType = getProjectTypeByKey(projectTypes, projectTypeKey) - const visibleProjectTemplates = getProjectTemplatesByCategory(projectTemplates, projectTypeKey, true) - const cards = [] - - visibleProjectTemplates.forEach((projectTemplate) => { - // don't render disabled items for selection - // don't render hidden items as well, hidden items can be reached via direct link though - if (projectTemplate.disabled || projectTemplate.hidden) return - - const icon = - - cards.push( - onProjectTemplateChange(projectTemplate)} - type={projectTemplate.name} - /> - ) - }) - - return ( - -diff --git a/src/projects/create/components/SelectProjectType.scss b/src/projects/create/components/SelectProjectType.scss index 86c8cc40d..d84ca54d2 100644 --- a/src/projects/create/components/SelectProjectType.scss +++ b/src/projects/create/components/SelectProjectType.scss @@ -2,6 +2,7 @@ @import 'layout'; @import '~tc-ui/src/styles/tc-includes'; +@import "../../../styles/includes"; :global { .ProjectWizard { @@ -15,6 +16,15 @@ .SelectProjectType { @extend .wizardCardContainer; + display: flex; + flex-direction: column; + min-height: 100vh; + background: $tc-gray-neutral-dark; + max-width: none; + width: 100%; + align-items: center; + padding-bottom: 0; + @media screen and (max-width: $screen-md - 1px) { padding-left: 2 * $base-unit; padding-right: 2 * $base-unit; @@ -22,7 +32,9 @@ .cards { margin: 0 auto; - max-width: 900px; + max-width: 100% !important; + margin-bottom: 105px; + width: 100%; @media screen and (max-width: $screen-md - 1px) { max-width: 600px; @@ -30,17 +42,45 @@ } > h1 { - @extend .wizardHeadline; - margin-bottom: 30px; - margin-top: 30px; + @include roboto-condensed; + + color: $tc-gray-90; + margin-bottom: 79px; + margin-top: 41px; + font-size: 34px; + line-height: 41px; + text-transform: uppercase; @media screen and (max-width: $screen-md - 1px) { font-size: 20px; margin-left: 10px; - margin-bottom: 0; + margin-bottom: 30px; margin-top: 10px; padding-top: 10px; text-align: left; + padding-right: 50px; + } + } + + .footer { + display: flex; + flex-wrap: wrap; + margin-bottom: 30px; + justify-content: center; + + a { + @include roboto-medium; + + display: flex; + align-items: center; + + svg { + margin-left: 7px; + + path { + fill: $tc-dark-blue-100; + } + } } } } diff --git a/src/projects/create/components/SelectProjectTypeCard.jsx b/src/projects/create/components/SelectProjectTypeCard.jsx new file mode 100644 index 000000000..352c86244 --- /dev/null +++ b/src/projects/create/components/SelectProjectTypeCard.jsx @@ -0,0 +1,32 @@ +import React from 'react' +import PT from 'prop-types' +import './SelectProjectTypeCard.scss' +import IconOvalWrapper from './IconOvalWrapper' + +function SelectProjectTypeCard(p) { + const { projectType } = p + return ( +-{ projectType.displayName } projects
-{ projectType.question }
-{cards}-- Looking for something else? Get in touch with us → + +class SelectProjectTemplate extends React.Component{ + constructor(props) { + super(props) + this.state = { + selectedGroup: { + displayName: 'All Solutions', + }, + searchInputValue: '', + selectedSearchInputValue: '', + } + + this.getProjectType = this.getProjectType.bind(this) + this.getFilterList = this.getFilterList.bind(this) + this.getVisibleProjectTemplatesGroup = this.getVisibleProjectTemplatesGroup.bind(this) + this.canFilter = this.canFilter.bind(this) + } + + /** + * Get current project type + */ + getProjectType() { + const { + projectTypeKey, + projectTypes, + } = this.props + + return getProjectTypeByKey(projectTypes, projectTypeKey) + } + + /** + * Get filter list + */ + getFilterList() { + const filterList = [{ + displayName: 'All Solutions', + }] + + const { + projectTypes, + projectTemplates, + projectTypeKey, + } = this.props + + const availableProjectTemplates = getProjectTemplatesByCategory(projectTemplates, projectTypeKey, true) + + _.each(projectTypes, (pT) => { + const visibleProjectTemplates = getProjectTemplatesBySubCategory(availableProjectTemplates, pT.key, true) + if (visibleProjectTemplates.length > 0) { + const projectType = _.cloneDeep(pT) + projectType.visibleProjectTemplates = visibleProjectTemplates + filterList.push(projectType) + } + }) + + return filterList + } + + /** + * get visible project templates by group + */ + getVisibleProjectTemplatesGroup() { + const { + projectTemplates, + projectTypeKey, + onProjectTemplateChange, + } = this.props + + const { + selectedGroup, + selectedSearchInputValue + } = this.state + + const getCardsUI = (visibleProjectTemplates) => { + const cards = [] + visibleProjectTemplates.forEach((projectTemplate) => { + // don't render disabled items for selection + // don't render hidden items as well, hidden items can be reached via direct link though + if (projectTemplate.disabled || projectTemplate.hidden) return + + if (selectedSearchInputValue) { + let isMatch = false + if ( + caseInsensitiveSearch(selectedSearchInputValue, projectTemplate.name) || + caseInsensitiveSearch(selectedSearchInputValue, projectTemplate.info) + ) { + isMatch = true + } else if (projectTemplate.metadata.deliverables) { + _.each(projectTemplate.metadata.deliverables, (d) => { + if (caseInsensitiveSearch(selectedSearchInputValue, d.infoHTML)) { + isMatch = true + } + }) + } + if (!isMatch) { + return + } + } + + const icon =- ) + ) + } } SelectProjectTemplate.propTypes = { diff --git a/src/projects/create/components/SelectProjectTemplate.scss b/src/projects/create/components/SelectProjectTemplate.scss index 5fb9fee2e..cd5a7f852 100644 --- a/src/projects/create/components/SelectProjectTemplate.scss +++ b/src/projects/create/components/SelectProjectTemplate.scss @@ -2,35 +2,124 @@ @import 'layout'; @import '~tc-ui/src/styles/tc-includes'; +@import "../../../styles/includes"; :global { .SelectProjectTemplate { @extend .wizardCardContainer; + display: flex; + flex-direction: column; + min-height: 100vh; + background: $tc-gray-neutral-dark; + max-width: none; + width: 100%; + padding-bottom: 0; + align-items: center; + @media screen and (max-width: $screen-md - 1px) { padding: 0 2 * $base-unit; } + .cards { + flex-direction: column; + align-items: center; + padding-left: 30px; + padding-right: 30px; + margin-bottom: 105px; + max-width: 1110px; + width: 100%; + + @media screen and (max-width: $screen-sm - 1px) { + padding-left: 20px; + padding-right: 20px; + } + + .card-section { + display: flex; + flex-direction: column; + margin-bottom: 52px; + width: 100%; + + &:last-child { + margin-bottom: 0; + } + + .card-section-title { + @include roboto-condensed-bold; + + text-align: left; + margin-bottom: 4px; + text-transform: uppercase; + color: $tc-gray-90; + font-size: 24px; + line-height: 30px; + } + + .card-section-sub-title { + text-align: left; + margin-bottom: 27px; + text-transform: uppercase; + color: $tc-gray-40; + font-size: 10px; + letter-spacing: 0.8px; + line-height: 22px; + text-align: left; + } + } + } + + .footer { + margin-top: auto; + display: flex; + flex-wrap: wrap; + margin-bottom: 30px; + justify-content: center; + + a { + @include roboto-medium; + + display: flex; + align-items: center; + + svg { + margin-left: 7px; + + path { + fill: $tc-dark-blue-100; + } + } + } + } + h1 { @extend .wizardHeadline; - margin-top: 30px; + @include roboto-condensed; + + color: $tc-gray-90; + margin-top: 41px; + font-size: 34px; + line-height: 41px; + margin-bottom: 11px; + text-transform: uppercase; + padding-left: 50px; + padding-right: 50px; @media screen and (max-width: $screen-md - 1px) { font-size: 20px; line-height: 30px; margin-bottom: 0; margin-top: 20px; - padding: 5px 40px 0; + padding: 5px 50px 0; } + h2 { - font-size: 15px; - line-height: 20px; @include tc-heading-small; - @include roboto-bold; + color: $tc-gray-80; - margin-bottom: 13px; - margin-top: 0px; + font-size: 16px; + line-height: 19px; + margin-bottom: 42px; @media screen and (max-width: $screen-md - 1px) { @include roboto-medium; @@ -40,26 +129,109 @@ } } - .header { - display: block; - } - } + .project-type-group { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-bottom: 25px; + width: 100%; + padding: 0 25px; - @media screen and (max-width: 1100px) { - .SelectProjectTemplate { - max-width: 750px; - } - } + .item { + color: $tc-gray-40; + font-size: 12px; + line-height: 14px; + margin: 0 5px 5px; + padding: 0 15px; + height: 30px; + border-radius: 15px; + display: flex; + align-items: center; + cursor: pointer; + + &.selected { + @include roboto-bold; - @media screen and (max-width: 850px) { - .SelectProjectTemplate { - max-width: 500px; + background-color: $tc-gray-10; + box-shadow: inset 0 0 2px 0 rgba($tc-black, 0.25); + color: $tc-gray-90; + } + } } - } - @media screen and (max-width: $screen-md - 1px) { - .SelectProjectTemplate { - max-width: 100%; + .search-container { + display: flex; + width: 100%; + margin-bottom: 37px; + + .tc-btn.tc-btn-md { + height: 40px; + + .search-icon { + width: 16px; + margin-right: 5px; + margin-top: 2px; + } + } + + .search-bar { + display: flex; + flex: 1; + margin-right: 10px; + position: relative; + + .close-search-icon { + border: none; + background: transparent; + background-color: $tc-gray-10; + border-radius: 100%; + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + right: 13px; + top: 10px; + + svg { + width: 7px; + height: 7px; + flex-shrink: 0; + + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + margin-left: -1px; + } + + path { + fill: $tc-gray-70; + } + } + } + + input { + height: 40px; + line-height: 40px; + padding: 0 40px 0 20px; + border: 1px solid $tc-gray-10; + border-radius: 20px; + font-size: 14px; + margin: 0; + color: $tc-gray-70; + + &::-ms-clear { + display: none; + } + + @include placeholder { + color: $tc-gray-70; + font-size: 14px; + line-height: 40px; + opacity: 0.5; + text-transform: none; + } + } + } } } } diff --git a/src/projects/create/components/SelectProjectTemplateCard.js b/src/projects/create/components/SelectProjectTemplateCard.js new file mode 100644 index 000000000..21a3a9e64 --- /dev/null +++ b/src/projects/create/components/SelectProjectTemplateCard.js @@ -0,0 +1,117 @@ +import _ from 'lodash' +import React from 'react' +import PT from 'prop-types' +import cn from 'classnames' + +import './SelectProjectTemplateCard.scss' +import IconOvalWrapper from './IconOvalWrapper' +import CurveVertical from '../../../assets/icons/v.2.5/curve-mask-vertical.svg' +import CurveHorizontal from '../../../assets/icons/v.2.5/curve-mask-horizontal.svg' +import IconArrowRight from '../../../assets/icons/arrows-16px-1_tail-right.svg' + +function SelectProjectTemplateCard(p) { + const { projectTemplate } = p + + const subTextHTML = projectTemplate.metadata.subTextHTML + const detailLink = projectTemplate.metadata.detailLink + const deliverables = projectTemplate.metadata.deliverables || [] + + return ( ++ cards.push( + onProjectTemplateChange(projectTemplate)} + /> + ) + }) + return cards + } + + if (!this.canFilter()) { + return [ + { + displayName: null, + info: null, + cards: getCardsUI(getProjectTemplatesByCategory(projectTemplates, projectTypeKey, true)) + } + ] + } + const groups = [] + + _.each(this.getFilterList(), (filterGroup) => { + if (filterGroup.displayName !== 'All Solutions') { + if (selectedGroup.displayName === 'All Solutions') { + groups.push({ + displayName: filterGroup.displayName, + info: filterGroup.info, + cards: getCardsUI(filterGroup.visibleProjectTemplates) + }) + } else if (selectedGroup.displayName === filterGroup.displayName) { + groups.push({ + displayName: filterGroup.displayName, + info: filterGroup.info, + cards: getCardsUI(filterGroup.visibleProjectTemplates) + }) + } + } + } ) + return groups + } + + /** + * Check if can filter + */ + canFilter() { + const projectType = this.getProjectType() + return projectType.metadata.filterable !== false + } + + render() { + const { + selectedGroup, + searchInputValue, + selectedSearchInputValue, + } = this.state + const projectType = this.getProjectType() + return ( + +-+{ projectType.metadata.pageHeader }
+{ projectType.metadata.pageInfo }
++ {this.canFilter() && ( +++ {this.getFilterList().map( + (item, i) => + ( ++ )} + {this.canFilter() && ( +{ this.setState({ selectedGroup: item }) }} + key={i} + > + {item.displayName} +) + )} +++ )} + {this.getVisibleProjectTemplatesGroup().map( + (templateGroup, i) => + (templateGroup.cards.length > 0) && ( ++ { this.setState({ searchInputValue: evt.target.value }) }} + onKeyDown={(evt) => { + if (evt.key === 'Enter') { + this.setState({ selectedSearchInputValue: searchInputValue }) + } + }} + /> + {(searchInputValue || selectedSearchInputValue) && ( + + )} ++ ++ {templateGroup.displayName && ( + {templateGroup.displayName} + )} + {templateGroup.info && ( + {templateGroup.info} + )} + {templateGroup.cards} ++ ) + )} ++ Looking for something else? Get in touch with us+ 1, + })} + > ++ ) +} + +SelectProjectTemplateCard.defaultTypes = { + onClick: _.noop +} + +SelectProjectTemplateCard.propTypes = { + icon: PT.element.isRequired, + onClick: PT.func, + projectTemplate: PT.any.isRequired +} + +export default SelectProjectTemplateCard diff --git a/src/projects/create/components/SelectProjectTemplateCard.scss b/src/projects/create/components/SelectProjectTemplateCard.scss new file mode 100644 index 000000000..c4f03ee79 --- /dev/null +++ b/src/projects/create/components/SelectProjectTemplateCard.scss @@ -0,0 +1,353 @@ +@import '~tc-ui/src/styles/tc-includes'; +@import "../../../styles/includes"; + +.SelectProjectTemplateCard { + background: $tc-white; + border-radius: 10px; + margin: 0 0 30px; + width: 100%; + display: flex; + flex-direction: column; + color: $tc-gray-90; + overflow: hidden; + + &:last-child { + margin-bottom: 0; + } +} + +.one-deliverable { + .right-card { + flex: 1; + + @media screen and (max-width: $screen-md - 1px) { + display: none; + } + } + + .bottom-card { + display: none; + + @media screen and (max-width: $screen-md - 1px) { + display: flex; + + .bottom-column { + background: transparent; + padding: 0; + + @media screen and (max-width: $screen-sm - 1px) { + margin-bottom: 0; + } + + h3 { + color: $tc-gray-70; + text-transform: none; + display: flex; + justify-content: flex-start; + } + button { + display: flex; + } + } + } + } +} + +.more-deliverable, +.no-deliverable { + .right-card { + @media screen and (max-width: $screen-sm - 1px) { + margin-top: 21px; + } + } +} + +.no-deliverable { + .bottom-card { + display: none; + } +} + +.more-deliverable { + .top-card { + .vertical-curve-wrapper { + display: none; + } + + + + } + .right-card { + background: transparent; + + .info-html { + display: none; + } + } + + .icon-wrapper { + position: relative; + margin-top: 15px; + } +} + +.header { + @include roboto-condensed-bold; + font-size: 16px; + line-height: 19px; + text-align: left; +} + +.details { + color: $tc-gray-70; + font-size: 14px; + line-height: 17px; + width: 100%; + text-align: left; + margin-top: 10px; +} + +.icon-wrapper { + margin-right: 26px; +} + +.left-card { + flex: 1; + display: flex; + align-items: center; + padding: 35px 30px 36px 45px; + + @media screen and (max-width: $screen-md - 1px) { + flex-direction: column; + text-align: center; + height: 100%; + padding-bottom: 10px; + flex-basis: 100%; + + .left-card-content { + align-items: center; + width: 100%; + } + + .icon-wrapper { + margin-right: 0; + margin-bottom: 20px; + } + } +} + +.right-card { + position: relative; + display: flex; + background: #f4f4f4; + align-items: center; + padding: 35px 50px 30px 50px; + + .info-html { + margin-right: 22px; + margin-bottom: auto; + } + + button { + flex-shrink: 0; + } + + @media screen and (max-width: $screen-md - 1px) { + background: transparent; + + .vertical-curve-wrapper, + .info-html { + display: none; + } + } + + @media screen and (max-width: $screen-sm - 1px) { + padding: 20px; + } +} + +.top-card { + display: flex; + flex-wrap: wrap; + justify-content: center; + + @media screen and (max-width: $screen-sm - 1px) { + flex-direction: column; + + .right-card { + justify-content: center; + padding-top: 0; + } + } +} + +.left-card-content { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + min-height: 100%; + flex-shrink: 0; + + .vertical-space { + height: 21px; + } +} + +.bottom-card { + position: relative; + display: flex; + flex-direction: column; + background: #f4f4f4; +} + +.vertical-curve-wrapper { + + svg { + float: right; + background: #f4f4f4; + width: auto; + height: 100%; + } + + @media screen and (max-width: $screen-md - 1px) { + display: none; + } +} + +.horizontal-curve-wrapper{ + height: 20px; + svg{ + width: 100%; + height: auto; + transform: scaleY(0.2); + transform-origin: top left; + } +} + +.learn-more-container { + display: flex; + width: 100%; + justify-content: space-between; + font-size: 14px; + letter-spacing: 0.5px; + line-height: 17px; + flex-wrap: wrap; + align-items: center; + margin-top: auto; + + .starting-at { + margin-right: 10px; + } +} + +.starting-at { + font-size: 14px; + color: $tc-gray-90; + + strong { + @include roboto-bold; + + margin-left: 4px; + } +} + +.learn-more { + @include roboto-medium; + + font-size: 15px; + letter-spacing: 1px; + line-height: 18px; + text-transform: uppercase; + display: flex; + align-items: center; + + svg { + margin-left: 7px; + + path { + fill: $tc-dark-blue-100; + } + } +} + +.info-html { + text-align: left; + + h3 { + @include roboto-bold; + + min-height: 30px; + margin-bottom: 10px; + display: flex; + align-items: center; + } + + * { + color: $tc-gray-70; + font-size: 14px; + line-height: 17px; + } + + li { + position: relative; + padding-left: 15px; + margin-bottom: 5px; + + &::before { + content: ""; + display: flex; + position: absolute; + width: 5px; + height: 5px; + background: $tc-dark-blue-100; + border-radius: 100%; + top: 7px; + left: 0; + } + } +} + +.bottom-column { + display: flex; + flex-direction: column; + flex-basis: 100%; + margin: 14px; + background: $tc-white; + border-radius: 10px; + max-width: 305px; + justify-content: space-between; + padding: 25px 30px 26px; + + @media screen and (max-width: $screen-sm - 1px) { + margin-left: 0; + margin-right: 0; + } + + .starting-at { + margin-top: 16px; + } + + .info-html { + h3 { + color: $tc-gray-90; + display: flex; + justify-content: center; + text-transform: uppercase; + } + } + + button { + display: none; + align-self: center; + margin-top: 30px; + } +} + +.bottom-card-content { + display: flex; + justify-content: center; + flex-wrap: wrap; + padding: 16px 25px 27px 26px; + margin-top: 30px; +} diff --git a/src/projects/create/components/SelectProjectType.jsx b/src/projects/create/components/SelectProjectType.jsx index 329281c1d..397e4be5a 100644 --- a/src/projects/create/components/SelectProjectType.jsx +++ b/src/projects/create/components/SelectProjectType.jsx @@ -1,9 +1,10 @@ import React from 'react' import PT from 'prop-types' -import ProjectTypeCard from './ProjectTypeCard' +import SelectProjectTypeCard from './SelectProjectTypeCard' import { getProjectTemplatesByCategory } from '../../../helpers/templates' import ProjectTypeIcon from '../../../components/ProjectTypeIcon' +import IconArrowRight from '../../../assets/icons/arrows-16px-1_tail-right.svg' import { DOMAIN } from '../../../config/constants' @@ -17,22 +18,22 @@ const SelectProjectType = ({ const cards = [] projectTypes.forEach((projectType) => { - // don't render disabled items for selection - // don't render hidden items as well, hidden items can be reached via direct link though - if (projectType.disabled || projectType.hidden) return const visibleProjectTemplates = getProjectTemplatesByCategory(projectTemplates, projectType.key, true) + // don't render disabled items for selection + // don't render hidden items as well, hidden items can be reached via direct link though + if (projectType.disabled || projectType.hidden || visibleProjectTemplates.length === 0) return + const icon =++ {(deliverables.length > 0) && ( ++++++ {p.icon} + +++{projectTemplate.name}
+{projectTemplate.info}+ {(subTextHTML || detailLink) && ( + + )} + {(subTextHTML || detailLink) && ( ++ {subTextHTML && ( + + )} + {detailLink && ( + Learn More+ )} ++ )} + +++ + {(deliverables.length === 1) && ( + + )} + ++++ )} ++++ + {deliverables.map( + (item, i) => + ( +++ + {item.subTextHTML && ( + + )} + {(deliverables.length === 1) && ( + + )} ++ ) + )} +cards.push( - onProjectTypeChange(projectType.key)} - type={projectType.displayName} - buttonText={visibleProjectTemplates.length > 1 ? 'View All' : 'Select Project'} + buttonText={projectType.metadata.cardButtonText} /> ) }) @@ -43,7 +44,7 @@ const SelectProjectType = ({ Create a new project
{cards}- Looking for something else? Get in touch with us → + Looking for something else? Get in touch with us++ ) +} + +SelectProjectTypeCard.propTypes = { + icon: PT.element, + projectType: PT.any.isRequired, + onClick: PT.func.isRequired, + buttonText: PT.string.isRequired +} + +export default SelectProjectTypeCard diff --git a/src/projects/create/components/SelectProjectTypeCard.scss b/src/projects/create/components/SelectProjectTypeCard.scss new file mode 100644 index 000000000..b59a2078b --- /dev/null +++ b/src/projects/create/components/SelectProjectTypeCard.scss @@ -0,0 +1,42 @@ +@import '~tc-ui/src/styles/tc-includes'; +@import "../../../styles/includes"; + +.SelectProjectTypeCard { + background: $tc-white; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 10px; + box-shadow: 0 7px 20px 0 rgba($tc-gray-80, 0.1); + max-width: 420px; + min-height: 370px; + margin: 0 15px 30px; + padding: 35px 27px 30px 28px; + flex-basis: 100%; + + @media screen and (max-width: $screen-md - 1px) { + margin-left: 0; + margin-right: 0; + } +} + +.header { + @include roboto-condensed-bold; + + color: $tc-gray-90; + margin-top: 26px; + font-size: 26px; + line-height: 31px; + text-transform: uppercase; + width: 100%; +} + +.sub-type-details { + color: $tc-gray-70; + font-size: 14px; + line-height: 17px; + width: 100%; + text-align: left; + flex: 1; + margin: 19px 0; +} diff --git a/src/projects/create/components/_layout.scss b/src/projects/create/components/_layout.scss index 9c613faa2..5f23b8cb3 100644 --- a/src/projects/create/components/_layout.scss +++ b/src/projects/create/components/_layout.scss @@ -99,7 +99,9 @@ $minimumPageWidth: 984px; bottom: 0; left: 0; right: 0; - margin-bottom: 15px; + margin-bottom: 30px; + font-size: 14px; + color: $tc-gray-90; @media screen and (max-width: $screen-md - 1px) { margin-bottom: 2 * $base-unit; @@ -107,6 +109,10 @@ $minimumPageWidth: 984px; } > a { + font-size: 15px; + text-transform: uppercase; + margin-left: 5px; + @media screen and (max-width: $screen-md - 1px) { white-space: nowrap; } diff --git a/src/projects/detail/components/PhaseCard/PhaseCard.jsx b/src/projects/detail/components/PhaseCard/PhaseCard.jsx index a2280973b..b1cdf63aa 100644 --- a/src/projects/detail/components/PhaseCard/PhaseCard.jsx +++ b/src/projects/detail/components/PhaseCard/PhaseCard.jsx @@ -24,7 +24,7 @@ import { } from '../../../../config/constants' import ProjectProgress from '../../../../components/ProjectProgress/ProjectProgress' -import ProjectTypeIcon from '../../../../components/ProjectTypeIcon' +import ProductTypeIcon from '../../../../components/ProductTypeIcon' import LoadingIndicator from '../../../../components/LoadingIndicator/LoadingIndicator' import MobilePage from '../../../../components/MobilePage/MobilePage' import BackIcon from '../../../../assets/icons/arrow-left.svg' @@ -107,7 +107,7 @@ class PhaseCard extends React.Component { return (+ { p.icon } + +{ projectType.displayName }
+{ projectType.info }+ +-- { parseInt(attr.price, 10) > 0 && + { parseInt(attr.price, 10) > 0 && (-+ @@ -146,7 +146,7 @@ class PhaseCard extends React.Component {
{attr.price}
diff --git a/src/projects/detail/containers/AssetsInfoContainer.jsx b/src/projects/detail/containers/AssetsInfoContainer.jsx index 7c59d6322..2990a23d4 100644 --- a/src/projects/detail/containers/AssetsInfoContainer.jsx +++ b/src/projects/detail/containers/AssetsInfoContainer.jsx @@ -9,12 +9,14 @@ import moment from 'moment' import LinksGridView from '../../../components/AssetsLibrary/LinksGridView' import FilesGridView from '../../../components/AssetsLibrary/FilesGridView' import AssetsStatistics from '../../../components/AssetsLibrary/AssetsStatistics' +import NotificationsReader from '../../../components/NotificationsReader' import { updateProject, deleteProject } from '../../actions/project' import { loadMembers } from '../../../actions/members' import { loadDashboardFeeds, loadProjectMessages } from '../../actions/projectTopics' import { loadTopic } from '../../../actions/topics' import { loadProjectPlan } from '../../actions/projectPlan' -import { PROJECT_ATTACHMENTS_FOLDER, +import { + PROJECT_ATTACHMENTS_FOLDER, PHASE_STATUS_DRAFT, PROJECT_FEED_TYPE_MESSAGES, FILE_PICKER_API_KEY, @@ -22,6 +24,10 @@ import { PROJECT_ATTACHMENTS_FOLDER, FILE_PICKER_CNAME, FILE_PICKER_SUBMISSION_CONTAINER_NAME, FILE_PICKER_ACCEPT, + PROJECT_ASSETS_SHARED_WITH_TOPCODER_MEMBERS, + PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS, + PROJECT_ASSETS_SHARED_WITH_ADMIN, + EVENT_TYPE, } from '../../../config/constants' import AddLink from '../../../components/AssetsLibrary/AddLink' import PERMISSIONS from '../../../config/permissions' @@ -41,6 +47,14 @@ class AssetsInfoContainer extends React.Component { this.state = { activeAssetsType: null, ifModalOpen: false, + gridFilter: { + name: '', + sharedWith: '', + date: { + from: '', + to: '' + } + } } this.onAddNewLink = this.onAddNewLink.bind(this) this.onDeleteLink = this.onDeleteLink.bind(this) @@ -58,6 +72,9 @@ class AssetsInfoContainer extends React.Component { this.deletePostAttachment = this.deletePostAttachment.bind(this) this.activeAssetsTypeChange = this.activeAssetsTypeChange.bind(this) this.onNewLinkModalChange = this.onNewLinkModalChange.bind(this) + this.setFilter = this.setFilter.bind(this) + this.getFilterValue = this.getFilterValue.bind(this) + this.clearFilter = this.clearFilter.bind(this) } shouldComponentUpdate(nextProps, nextState) { // eslint-disable-line no-unused-vars @@ -170,9 +187,9 @@ class AssetsInfoContainer extends React.Component { onAddNewLink(link) { const { updateProject, project, loggedInUser } = this.props - link.createdAt = moment().format('YYYY-MM-DDTHH:mm:ss.SSS[Z]') + link.createdAt = moment().format() link.createdBy = loggedInUser.userId - link.updatedAt = moment().format('YYYY-MM-DDTHH:mm:ss.SSS[Z]') + link.updatedAt = moment().format() link.updatedBy = loggedInUser.userId updateProject(project.id, { bookmarks: update(project.bookmarks || [], { $push: [link] }) @@ -188,13 +205,16 @@ class AssetsInfoContainer extends React.Component { onEditLink(idx, title, address) { const { updateProject, project, loggedInUser } = this.props - const updatedAt = moment().format('YYYY-MM-DDTHH:mm:ss.SSS[Z]') + const currentLink = project.bookmarks[idx] + const updatedAt = moment().format() const updatedBy = loggedInUser.userId const updatedLink = { title, address, updatedAt, - updatedBy + updatedBy, + createdAt: currentLink.createdAt, + createdBy: currentLink.createdBy, } updateProject(project.id, { bookmarks: update(project.bookmarks, { $splice: [[idx, 1, updatedLink]] }) @@ -221,6 +241,37 @@ class AssetsInfoContainer extends React.Component { this.props.removeProjectAttachment(project.id, attachmentId) } + setFilter(name, filter) { + const gridFilter = { + name: this.state.gridFilter.name, + sharedWith: this.state.gridFilter.sharedWith, + date: this.state.gridFilter.date, + } + + let target = gridFilter + + name.split('.').forEach((key, index, list) => { + if (index !== list.length - 1) { + target = target[key] + } else { + target[key] = filter + } + }) + + this.setState({ gridFilter }) + this.forceUpdate() + } + + getFilterValue(name) { + let target = this.state.gridFilter + + name.split('.').forEach(key => { + target = target[key] + }) + + return target + } + onAddFile() { } @@ -334,7 +385,11 @@ class AssetsInfoContainer extends React.Component { createdBy: feed.userId, // use created at `date` to show as modified time for folders updatedAt: feed.date, - children: childrenLinks + children: childrenLinks.map(link => { + link.tag = feed.tag + return link + }), + tag: feed.tag }) } }) @@ -374,7 +429,8 @@ class AssetsInfoContainer extends React.Component { createdBy: feed.userId, // use created at `date` to show as modified time for folders updatedAt: feed.date, - children: attachmentLinksPerFeed + children: attachmentLinksPerFeed, + tag: feed.tag }) } }) @@ -408,6 +464,20 @@ class AssetsInfoContainer extends React.Component { } } + setAttachmentUserDetails(attachments) { + attachments.forEach((attachment) => { + if (attachment.allowedUsers) { + const needToBeLoaded = attachment.allowedUsers.filter(userId => !this.props.projectMembers[userId]) + + if (needToBeLoaded.length > 0) { + this.props.loadMembers(needToBeLoaded) + } + + attachment.userHandles = attachment.allowedUsers.map(userId => this.props.projectMembers[userId]) + } + }) + } + getLinksAndAttachments() { const { project, isSuperUser, phases, feeds, isManageUser, phasesTopics, canAccessPrivatePosts } = this.props @@ -425,6 +495,7 @@ class AssetsInfoContainer extends React.Component { } }) } + attachments = _.sortBy(attachments, attachment => -new Date(attachment.updatedAt).getTime()) .map(attachment => ({ id: attachment.id, @@ -478,12 +549,97 @@ class AssetsInfoContainer extends React.Component { ...this.extractAttachmentLinksFromPosts(phaseFeeds) ] + this.setAttachmentUserDetails(attachments) + + links = this.filterAssetList(links) + attachments = this.filterAssetList(attachments) + return ({ links, attachments, }) } + filterAssetList(list) { + const {name, sharedWith, date} = this.state.gridFilter + const {from, to} = date + + return list.filter(item => { + if (item.children) { + item.children = this.filterAssetList(item.children) + + return item.children.length > 0 + } else { + let nameMatch = true + let sharedWithMatch = true + let fromDateMatch = true + let toDateMatch = true + + // filter name + if (name) { + nameMatch = item.title.toLowerCase().indexOf(name.toLowerCase()) !== -1 + } + + // filter user handle + if (sharedWith) { + const sharedWithLowerCase = sharedWith.toLowerCase() + if (item.tag || item.topicTag) { + // when tag is exists + if ((item.tag || item.topicTag) === PROJECT_FEED_TYPE_MESSAGES) { + // filter with only topcoder members text + sharedWithMatch = PROJECT_ASSETS_SHARED_WITH_TOPCODER_MEMBERS.toLowerCase().indexOf(sharedWithLowerCase) !== -1 + } else { + // filter with all project members text + sharedWithMatch = PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS.toLowerCase().indexOf(sharedWithLowerCase) !== -1 + } + } else if (item.allowedUsers instanceof Array) { + // when allowed users exists + if (item.allowedUsers.length > 0) { + // filter by user handle, first or last name + sharedWithMatch = _.some(item.userHandles, user => ( + _.get(user, 'handle', '').toLowerCase().indexOf(sharedWithLowerCase) !== -1 || + _.get(user, 'firstName', '').toLowerCase().indexOf(sharedWithLowerCase) !== -1 || + _.get(user, 'lastName', '').toLowerCase().indexOf(sharedWithLowerCase) !== -1 + )) + } else { + // filter by only admins text + sharedWithMatch = PROJECT_ASSETS_SHARED_WITH_ADMIN.toLowerCase().indexOf(sharedWithLowerCase) !== -1 + } + } else { + // no tag and allowed users + // filter with all project members text + sharedWithMatch = PROJECT_ASSETS_SHARED_WITH_ALL_MEMBERS.toLowerCase().indexOf(sharedWithLowerCase) !== -1 + } + } + + if (from || to) { + const date = moment(item.updatedAt) + + if (from) { + const fromDate = moment(from) + + fromDateMatch = date.isSameOrAfter(fromDate, 'day') + } + + if (to) { + const toDate = moment(to) + + toDateMatch = date.isSameOrBefore(toDate, 'day') + } + } + + return nameMatch && sharedWithMatch && fromDateMatch && toDateMatch + } + }) + } + + checkFilterDirty() { + const {name, sharedWith, date} = this.state.gridFilter + const {from, to} = date + + return !!name || !!sharedWith || !!from || !!to + } + componentDidMount() { const {loadMembers } = this.props const {links, attachments} = this.getLinksAndAttachments() @@ -509,6 +665,21 @@ class AssetsInfoContainer extends React.Component { loadMembers(userIds) } + clearFilter() { + this.setState({ + gridFilter: { + name: '', + sharedWith: '', + date: { + from: '', + to: '' + } + } + }) + + this.forceUpdate() + } + render() { const { project, currentMemberRole, isSuperUser, projectTemplates, hideLinks, attachmentsAwaitingPermission, addProjectAttachment, discardAttachments, attachmentPermissions, @@ -615,6 +786,8 @@ class AssetsInfoContainer extends React.Component { const formatFolderTitle = (linkTitle) => linkTitle + const filterDirty = this.checkFilterDirty() + return () diff --git a/src/projects/detail/containers/ProjectInfoContainer.js b/src/projects/detail/containers/ProjectInfoContainer.js index 26419f2cc..623f390b6 100644 --- a/src/projects/detail/containers/ProjectInfoContainer.js +++ b/src/projects/detail/containers/ProjectInfoContainer.js @@ -9,7 +9,7 @@ import { updateProject, deleteProject } from '../../actions/project' import { loadDashboardFeeds, loadProjectMessages } from '../../actions/projectTopics' import { loadTopic } from '../../../actions/topics' import { loadProjectPlan } from '../../actions/projectPlan' -import { setDuration, getProjectNavLinks } from '../../../helpers/projectHelper' +import { getProjectNavLinks } from '../../../helpers/projectHelper' import { PROJECT_ROLE_OWNER, PROJECT_ROLE_COPILOT, @@ -56,7 +56,6 @@ class ProjectInfoContainer extends React.Component { constructor(props) { super(props) this.state = { - duration: {}, showDeleteConfirm: false } this.onChangeStatus = this.onChangeStatus.bind(this) @@ -95,16 +94,9 @@ class ProjectInfoContainer extends React.Component { nextProps.activeChannelId !== this.props.activeChannelId } - setDuration({duration, status}) { - - this.setState({duration: setDuration(duration || {}, status)}) - } - componentWillMount() { const { project, isFeedsLoading, feeds, phases, phasesTopics, loadTopic, location } = this.props - this.setDuration(project) - // load feeds from dashboard if they are not currently loading or loaded yet // also it will load feeds, if we already loaded them, but it was 0 feeds before if (!isFeedsLoading && feeds.length < 1) { @@ -126,9 +118,7 @@ class ProjectInfoContainer extends React.Component { } componentWillReceiveProps(props) { - const { project, location } = props - - this.setDuration(project) + const { location } = props if (!_.isEmpty(location.hash) && location.hash !== this.props.location.hash) { this.handleUrlHash(props) @@ -431,7 +421,7 @@ class ProjectInfoContainer extends React.Component { } render() { - const { duration, showDeleteConfirm } = this.state + const { showDeleteConfirm } = this.state const { project, currentMemberRole, isSuperUser, phases, hideInfo, hideMembers, productsTimelines, isProjectProcessing, notifications } = this.props let directLinks = null @@ -518,7 +508,6 @@ class ProjectInfoContainer extends React.Component { project={project} phases={phases} currentMemberRole={currentMemberRole} - duration={duration} canDeleteProject={canDeleteProject} onDeleteProject={this.onDeleteProject} onChangeStatus={this.onChangeStatus} diff --git a/src/projects/detail/containers/ProjectSummaryReportContainer.jsx b/src/projects/detail/containers/ProjectSummaryReportContainer.jsx index 12fad6919..9533a0430 100644 --- a/src/projects/detail/containers/ProjectSummaryReportContainer.jsx +++ b/src/projects/detail/containers/ProjectSummaryReportContainer.jsx @@ -9,34 +9,64 @@ import { SCREEN_BREAKPOINT_MD, PROJECT_FEED_TYPE_PRIMARY, PROJECT_FEED_TYPE_MESSAGES, + PROJECT_REPORTS, + REPORT_SESSION_LENGTH, } from '../../../config/constants' import TwoColsLayout from '../../../components/TwoColsLayout' import Sticky from '../../../components/Sticky' import ProjectInfoContainer from './ProjectInfoContainer' import PERMISSIONS from '../../../config/permissions' import { checkPermission } from '../../../helpers/permissions' -import { loadProjectSummary } from '../../actions/projectReports' +import { loadProjectSummary, loadProjectReportsUrls, refreshLookerSession } from '../../actions/projectReports' import spinnerWhileLoading from '../../../components/LoadingSpinner' -import ProjectSummaryReport from '../components/ProjectSummaryReport' -const EnhancedProjectSummaryReport = spinnerWhileLoading(props => { - return props.project && !props.isLoading && props.reportsProjectId === props.project.id -})(ProjectSummaryReport) +import './ProjectSummaryReportContainer.scss' + +const LookerEmbedReport = (props) => { + return () +} + +const EnhancedLookerEmbedReport = spinnerWhileLoading(props => { + return !props.isLoading +})(LookerEmbedReport) class ProjectSummaryReportContainer extends React.Component { + constructor(props) { + super(props) + this.timer = null + this.setLookerSessionTimer = this.setLookerSessionTimer.bind(this) + } + componentWillUpdate(nextProps) { - const nextReportProjectId = _.get(nextProps, 'projectReports.projectId') + const nextReportProjectId = _.get(nextProps, 'reportsProjectId') const nextProjectId = _.get(nextProps, 'project.id') - if(nextProps.project && nextReportProjectId !== nextProjectId) { - nextProps.loadProjectSummary(nextProps.project.id) + const lookerSessionExpired = !this.props.lookerSessionExpired && nextProps.lookerSessionExpired + if(lookerSessionExpired || (nextProjectId && nextReportProjectId !== nextProjectId)) { + nextProps.loadProjectReportsUrls(nextProjectId, PROJECT_REPORTS.PROJECT_SUMMARY) + this.setLookerSessionTimer() } } + setLookerSessionTimer() { + console.log('Setting Looker Session Timer') + if (this.timer) { + clearTimeout(this.timer) + } + let timeoutDuration = 60*1000 + if (REPORT_SESSION_LENGTH > 2*60) { + timeoutDuration = REPORT_SESSION_LENGTH*1000 - 2*60*1000 + } + // set timeout for raising alert to refresh the token 2 minutes before the session expire + this.timer = setTimeout(() => { + console.log('Calling refresh looker session action') + this.props.refreshLookerSession() + }, (timeoutDuration)) + } + render() { const { project, - projectReports, isSuperUser, isManageUser, currentMemberRole, @@ -45,11 +75,10 @@ class ProjectSummaryReportContainer extends React.Component { phases, productsTimelines, phasesTopics, - isProcessing, + isLoading, location, - reportsProjectId, + projectSummaryEmbedUrl, } = this.props - const projectSummary = _.get(projectReports, 'projectSummary') const leftArea = (@@ -646,38 +819,64 @@ class AssetsInfoContainer extends React.Component { onClickAction={this.activeAssetsTypeChange} activeAssetsType={activeAssetsType} />)} - {(enableFileUpload && activeAssetsType === 'Files') && -} - {(!hideLinks && activeAssetsType === 'Links') && - } + {(enableFileUpload && activeAssetsType === 'Files') && ( + ++ )} + {(!hideLinks && activeAssetsType === 'Links') && ( ++ + ++ )}+ + ) @@ -82,14 +111,14 @@ class ProjectSummaryReportContainer extends React.Component { - - ) } @@ -97,14 +126,13 @@ class ProjectSummaryReportContainer extends React.Component { ProjectSummaryReportContainer.propTypes = { currentMemberRole: PT.string.isRequired, - isProcessing: PT.bool.isRequired, + isLoading: PT.bool.isRequired, isSuperUser: PT.bool.isRequired, isManageUser: PT.bool.isRequired, project: PT.object.isRequired, - projectReports: PT.object.isRequired, phases: PT.array.isRequired, productsTimelines: PT.object.isRequired, - reportsProjectId: PT.number.isRequired, + reportsProjectId: PT.number, } const mapStateToProps = ({ projectState, projectTopics, phasesTopics, projectReports }) => { @@ -118,14 +146,17 @@ const mapStateToProps = ({ projectState, projectTopics, phasesTopics, projectRep phases: projectState.phases, feeds: allFeed, phasesTopics, - projectReports, - isProcessing: projectReports.isLoading, + isLoading: projectReports.isLoading, reportsProjectId: projectReports.projectId, + lookerSessionExpired: projectReports.lookerSessionExpired, + projectSummaryEmbedUrl: projectReports.projectSummaryEmbedUrl, } } const mapDispatchToProps = { loadProjectSummary, + loadProjectReportsUrls, + refreshLookerSession, } export default connect(mapStateToProps, mapDispatchToProps)(withRouter(ProjectSummaryReportContainer)) diff --git a/src/projects/detail/containers/ProjectSummaryReportContainer.scss b/src/projects/detail/containers/ProjectSummaryReportContainer.scss new file mode 100644 index 000000000..40a2009e1 --- /dev/null +++ b/src/projects/detail/containers/ProjectSummaryReportContainer.scss @@ -0,0 +1,3 @@ +iframe { + height: calc(100vh - 60px); +} \ No newline at end of file diff --git a/src/projects/list/components/Projects/ProjectManagerAvatars.jsx b/src/projects/list/components/Projects/ProjectManagerAvatars.jsx index aa589466a..5a1759aa5 100644 --- a/src/projects/list/components/Projects/ProjectManagerAvatars.jsx +++ b/src/projects/list/components/Projects/ProjectManagerAvatars.jsx @@ -3,7 +3,7 @@ import React from 'react' import PropTypes from 'prop-types' import UserTooltip from '../../../../components/User/UserTooltip' -require('./ProjectManagerAvatars.scss') +import styles from './ProjectManagerAvatars.scss' const ProjectManagerAvatars = ({ managers, maxShownNum = 3 }) => { let extM = false @@ -15,7 +15,7 @@ const ProjectManagerAvatars = ({ managers, maxShownNum = 3 }) => { uniqManagers.length = maxShownNum } return ( -+ { + + } e.stopPropagation()}> +e.stopPropagation()}> {uniqManagers.map((user, i) => { return (diff --git a/src/projects/list/components/Projects/ProjectManagerAvatars.scss b/src/projects/list/components/Projects/ProjectManagerAvatars.scss index 664c6436e..d3bbb2bfb 100644 --- a/src/projects/list/components/Projects/ProjectManagerAvatars.scss +++ b/src/projects/list/components/Projects/ProjectManagerAvatars.scss @@ -1,12 +1,17 @@ @import '~tc-ui/src/styles/tc-includes'; +.container { + /* because avatars inside list have "margin-left: -$base-unit" */ + padding-left: $base-unit; +} + :global { .stack-avatar { position: relative; display: block; float: left; } - + .plus-user { position: relative; @include roboto-bold; @@ -18,4 +23,3 @@ user-select: none; } } - \ No newline at end of file diff --git a/src/projects/list/components/Projects/ProjectsGridView.jsx b/src/projects/list/components/Projects/ProjectsGridView.jsx index a9ad6871f..1babc5a7a 100644 --- a/src/projects/list/components/Projects/ProjectsGridView.jsx +++ b/src/projects/list/components/Projects/ProjectsGridView.jsx @@ -13,7 +13,7 @@ import { getProjectRoleForCurrentUser } from '../../../../helpers/projectHelper' import ProjectListTimeSortColHeader from './ProjectListTimeSortColHeader' import ProjectListFilterColHeader from './ProjectListFilterColHeader' import GridView from '../../../../components/Grid/GridView' -import UserTooltip from '../../../../components/User/UserTooltip' +import Invitation from '../../../../components/Invitation/Invitation' import { PROJECTS_LIST_PER_PAGE, SORT_OPTIONS, PROJECT_STATUS_COMPLETED, DATE_TO_USER_FIELD_MAP, PHASE_STATUS_REVIEWED, PHASE_STATUS_ACTIVE, PROJECT_STATUS_ACTIVE, TOOLTIP_DEFAULT_DELAY, @@ -33,7 +33,6 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip' import './ProjectsGridView.scss' import NotificationBadge from '../../../../components/NotificationBadge/NotificationBadge' import { getFullNameWithFallback } from '../../../../helpers/tcHelpers' -import LoadingIndicator from '../../../../components/LoadingIndicator/LoadingIndicator' const EnhancedProjectStatus = editableProjectStatus(ProjectStatus) @@ -168,15 +167,12 @@ const ProjectsGridView = props => { sortable: false, classes: 'item-customer', renderText: item => { - const m = _.find(item.members, m => m.isPrimary && m.role === 'customer') - if (!m) + const m = _.filter(item.members, m => m.role === 'customer') + if (m.length === 0) return) @@ -284,6 +284,9 @@ class TemplateForm extends Component { const aliases = _.split(values.aliases, ',') payload = _.assign({}, payload, { aliases }) } + if (payload.subCategory === '') { + payload.subCategory = null + } saveTemplate(primaryKeyValue, payload) } @@ -312,10 +315,12 @@ class TemplateForm extends Component { } } - onChangeDropdown(option) { + onChangeDropdown(label, option) { const { values } = this.state + const updatedValue = {} + updatedValue[`${label}`] = option.value this.setState({ - values: _.assign({}, values, {category: option.value}) + values: _.assign({}, values, updatedValue) }) } diff --git a/src/routes/notifications/constants/notifications.js b/src/routes/notifications/constants/notifications.js index 9cb1afcde..43f0503bf 100644 --- a/src/routes/notifications/constants/notifications.js +++ b/src/routes/notifications/constants/notifications.js @@ -650,6 +650,13 @@ export const NOTIFICATIONS = [ } ] +// list of ignored notifications +export const IGNORED_NOTIFICATION_TYPES = [ + EVENT_TYPE.POST.DELETED, + EVENT_TYPE.MEMBER.INVITE_CREATED, + EVENT_TYPE.TOPIC.DELETED, +] + // create a flat list of all possible notifications (expand notification rules) export const NOTIFICATION_RULES = (() => { const notificationRules = [] diff --git a/src/routes/notifications/helpers/notifications.js b/src/routes/notifications/helpers/notifications.js index 36fcbe193..9879901b5 100644 --- a/src/routes/notifications/helpers/notifications.js +++ b/src/routes/notifications/helpers/notifications.js @@ -2,7 +2,7 @@ * Helper methods to filter and preprocess notifications */ import _ from 'lodash' -import { NOTIFICATION_RULES } from '../constants/notifications' +import { NOTIFICATION_RULES, IGNORED_NOTIFICATION_TYPES } from '../constants/notifications' import { EVENT_TYPE } from '../../../config/constants' import Handlebars from 'handlebars' @@ -505,10 +505,13 @@ export const prepareNotifications = (rawNotifications) => { // - rule notifications.forEach((notification) => { const notificationRule = getNotificationRule(notification) + const isIgnoredNotification = IGNORED_NOTIFICATION_TYPES.indexOf(notification.eventType) > -1 - // if rule for notification is not found show a warning for now as such notification cannot be displayed + // if rule for notification is not found and not in the list of ignored show a warning for now as such notification cannot be displayed if (!notificationRule) { - console.warn(`Cannot find notification rule for eventType '${notification.eventType}' version '${notification.version}'.`) + if(!isIgnoredNotification) { + console.warn(`Cannot find notification rule for eventType '${notification.eventType}' version '${notification.version}'.`) + } } else { // populate notification data notification.type = notificationRule.type diff --git a/src/routes/notifications/services/notifications.js b/src/routes/notifications/services/notifications.js index 83cced905..05c8b8019 100644 --- a/src/routes/notifications/services/notifications.js +++ b/src/routes/notifications/services/notifications.js @@ -22,7 +22,7 @@ const markNotificationsSeen = (id) => { } const getNotifications = () => { - return axios.get(`${TC_NOTIFICATION_URL}/list?read=false&per_page=${NOTIFICATIONS_LIMIT}`) + return axios.get(`${TC_NOTIFICATION_URL}/list?read=false&platform=connect&per_page=${NOTIFICATIONS_LIMIT}`) .then(resp => prepareNotifications(resp.data.items)) } diff --git a/src/routes/settings/routes/profile/components/ProfileSettingsAvatar.jsx b/src/routes/settings/routes/profile/components/ProfileSettingsAvatar.jsx index 614ef54ac..409044157 100644 --- a/src/routes/settings/routes/profile/components/ProfileSettingsAvatar.jsx +++ b/src/routes/settings/routes/profile/components/ProfileSettingsAvatar.jsx @@ -4,6 +4,7 @@ import React from 'react' import PropTypes from 'prop-types' import FileBtn from '../../../../../components/FileBtn/FileBtn' +import { getAvatarResized } from '../../../../..//helpers/tcHelpers' import './ProfileSettingsAvatar.scss' class ProfileSettingsAvatar extends React.Component { @@ -25,7 +26,7 @@ class ProfileSettingsAvatar extends React.Component { const label = isUploading ? 'Uploading, please wait' : 'Upload a new photo' return (Unknownreturn (-) // TODO: Restore user segment when we support it @@ -186,52 +182,40 @@ const ProjectsGridView = props => { // Hiding the user segment for the momemnt } }, - { - id: 'joinBtn', - headerLabel: '', - classes: 'item-join', + {id: 'managers', + headerLabel:-+- - , sortable: false, + classes: 'item-manager', renderText: item => { + + let showInvitation = true // check whether is the project's member const isMember = _.some(item.members, m => (m.userId === currentUser.userId && m.deletedAt === null)) - if(isMember) return + // if(isMember) return // check whether has pending invition const isInvited = _.some(item.invites, m => ((m.userId === currentUser.userId || m.email === currentUser.email ) && !m.deletedAt && m.status === 'pending')) - if(!isInvited) return - return ( - - {(!isAcceptingInvite[item.id]) && ( - )} - {(!isAcceptingInvite[item.id]) && ( - )} - {isAcceptingInvite[item.id] && (- ) - } - }, { - id: 'managers', - headerLabel:)} - , - sortable: false, - classes: 'item-manager', - renderText: item => { - const m = _.filter(item.members, m => m.role === 'manager') + // if(!isInvited) return + if(isMember || !isInvited ) { + showInvitation = false + } + + const m = _.filter(item.members, m => m.role !== 'customer') return ( ) } diff --git a/src/projects/list/components/Projects/ProjectsGridView.scss b/src/projects/list/components/Projects/ProjectsGridView.scss index 6cdf0880b..52bf2500d 100644 --- a/src/projects/list/components/Projects/ProjectsGridView.scss +++ b/src/projects/list/components/Projects/ProjectsGridView.scss @@ -16,6 +16,10 @@ $screen-one-column: 720px; flex: none; min-width: 52px; width: 52px; + + .project-type-icon > svg > path { + fill: $tc-dark-blue-110; + } } .item-projects { @@ -24,8 +28,8 @@ $screen-one-column: 720px; } .item-ref-code { - flex: 1 3 100px; - min-width: 100px; + flex: 1 3 80px; + min-width: 80px; .time-container { display: flex; @@ -65,8 +69,8 @@ $screen-one-column: 720px; } .item-status-date { - flex: 1 3 100px; - min-width: 100px; + flex: 1 0 140px; + min-width: 140px; } .item-customer { @@ -74,19 +78,18 @@ $screen-one-column: 720px; min-width: 100px; .spacing { width: 100%; + box-sizing: border-box; } } .item-manager { - flex: 2 2 85px; - min-width: 85px; + flex: 2 2 105px; + min-width: 105px; + .spacing { + box-sizing: border-box; + } } - .item-join { - max-width: 125px; - width: 125px; - padding-right: 10px; - } .item-status { flex: none; @@ -131,6 +134,7 @@ $screen-one-column: 720px; .flex-item { min-height: 60px; + &.item-id, &.item-projects, &.item-status-date, @@ -213,7 +217,7 @@ $screen-one-column: 720px; .item-projects { padding-top: 15px; padding-bottom: 16px; - padding-right: 40px; + padding-right: 20px; -webkit-align-items: baseline; align-items: baseline; @@ -338,6 +342,7 @@ $screen-one-column: 720px; } .time-container { + width: 100%; .txt-normal { font-size: 13px; @include roboto-bold; @@ -361,11 +366,11 @@ $screen-one-column: 720px; } .item-customer { - padding-top: 10px; - -webkit-align-items: baseline; - align-items: baseline; + padding-left: 10px; + align-items: center; .user-block { + display: flex; .project-customer { position: relative; display: block; @@ -686,3 +691,15 @@ $screen-one-column: 720px; } } } + +.invitation-container { + margin-top: 10px; + + :global(.UserDropdownMenu) { + padding: 0; + } + + :global(.UserDropdownMenu .Dropdown.pointer-shadow) { + margin-top: 25px; + } +} diff --git a/src/projects/reducers/project.js b/src/projects/reducers/project.js index a80272d4d..0389a9a62 100644 --- a/src/projects/reducers/project.js +++ b/src/projects/reducers/project.js @@ -1,5 +1,5 @@ import { - LOAD_PROJECT_PENDING, LOAD_PROJECT_SUCCESS, LOAD_PROJECT_MEMBER_INVITE_PENDING, LOAD_PROJECT_MEMBER_INVITE_FAILURE, LOAD_PROJECT_MEMBER_INVITE_SUCCESS, LOAD_PROJECT_FAILURE, LOAD_DIRECT_PROJECT_SUCCESS, + LOAD_PROJECT_PENDING, LOAD_PROJECT_SUCCESS, LOAD_PROJECT_MEMBER_INVITE_PENDING, LOAD_PROJECT_MEMBER_INVITE_FAILURE, LOAD_PROJECT_MEMBER_INVITE_SUCCESS, LOAD_PROJECT_FAILURE, CREATE_PROJECT_PENDING, CREATE_PROJECT_SUCCESS, CREATE_PROJECT_FAILURE, CREATE_PROJECT_STAGE_PENDING, CREATE_PROJECT_STAGE_SUCCESS, CREATE_PROJECT_STAGE_FAILURE, CLEAR_LOADED_PROJECT, UPDATE_PROJECT_PENDING, UPDATE_PROJECT_SUCCESS, UPDATE_PROJECT_FAILURE, DELETE_PROJECT_PENDING, DELETE_PROJECT_SUCCESS, DELETE_PROJECT_FAILURE, @@ -325,34 +325,6 @@ export const projectState = function (state=initialState, action) { phasesNonDirty: null, }) - case LOAD_DIRECT_PROJECT_SUCCESS: - return update(state, { - project: { - budget: { $set: { - actualCost: action.payload.actualCost, - projectedCost: action.payload.projectedCost, - totalBudget: action.payload.totalBudget - }}, - duration: { $set: { - actualDuration: action.payload.actualDuration, - plannedDuration: action.payload.plannedDuration, - projectedDuration: action.payload.projectedDuration - }} - }, - projectNonDirty: { - budget: { $set: { - actualCost: action.payload.actualCost, - projectedCost: action.payload.projectedCost, - totalBudget: action.payload.totalBudget - }}, - duration: { $set: { - actualDuration: action.payload.actualDuration, - plannedDuration: action.payload.plannedDuration, - projectedDuration: action.payload.projectedDuration - }} - } - }) - case LOAD_PROJECT_PHASES_PENDING: return Object.assign({}, state, { isLoadingPhases: true @@ -468,16 +440,11 @@ export const projectState = function (state=initialState, action) { case CREATE_PROJECT_SUCCESS: case UPDATE_PROJECT_SUCCESS: { - // after loading project initially, we also load direct project - // and add additional properties to the `project` object in LOAD_DIRECT_PROJECT_SUCCESS action // after updating project they will be lost, so here we restore them // TODO better don't add additional values to `project` object and keep additional values separately const restoredProject = { ...action.payload, - // restore data which we put into `project` object using other reducers - budget: _.cloneDeep(state.project.budget), - duration: _.cloneDeep(state.project.duration), // the next properties we also could modify by other reducers, so we restore them, // and also, we fallback to the default empty array [] as the code relies on it // we should not `cloneDeep` these values as they are not changed diff --git a/src/projects/reducers/projectReports.js b/src/projects/reducers/projectReports.js index d7b1bc32f..c669904b8 100644 --- a/src/projects/reducers/projectReports.js +++ b/src/projects/reducers/projectReports.js @@ -2,13 +2,16 @@ import { LOAD_PROJECT_SUMMARY_PENDING, LOAD_PROJECT_SUMMARY_SUCCESS, LOAD_PROJECT_SUMMARY_FAILURE, + REFRESH_LOOKER_SESSION, } from '../../config/constants' const initialState = { isLoading: false, error: false, projectId: null, - projectSummary: null + projectSummary: null, + projectSummaryEmbedUrl: null, + lookerSessionExpired: false, } export const projectReports = function (state=initialState, action) { @@ -23,11 +26,13 @@ export const projectReports = function (state=initialState, action) { }) case LOAD_PROJECT_SUMMARY_SUCCESS: - if(payload.projectId === state.projectId) { + if(action.meta.projectId === state.projectId) { return Object.assign({}, state, { isLoading: false, error: false, - projectSummary: payload + projectSummaryEmbedUrl: payload, + lookerSessionExpired: false, + // projectSummary: payload }) } else { return state @@ -36,10 +41,16 @@ export const projectReports = function (state=initialState, action) { case LOAD_PROJECT_SUMMARY_FAILURE: { return Object.assign({}, state, { isLoading: false, + lookerSessionExpired: false, error: payload }) } + case REFRESH_LOOKER_SESSION: { + return Object.assign({}, state, { + lookerSessionExpired: true + }) + } default: return state diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js index 0dd0c101e..b581e640b 100644 --- a/src/reducers/alerts.js +++ b/src/reducers/alerts.js @@ -81,10 +81,9 @@ export default function(state = {}, action) { } case CREATE_PROJECT_STAGE_SUCCESS: { - const name = _.truncate(action.payload.name, 20) //delay time for reload stage list of project after creating state - setTimeout(() => { Alert.success(`Added New Stage To Project '${name}'`) }, 2000) + setTimeout(() => { Alert.success('Added New Stage To Project') }, 2000) return state } @@ -185,7 +184,7 @@ export default function(state = {}, action) { return state case UPDATE_PROJECT_ATTACHMENT_SUCCESS: - Alert.success('Updated attachment succcessfully') + Alert.success('Updated attachment successfully') return state case REMOVE_PROJECT_ATTACHMENT_SUCCESS: Alert.success('Removed attachment successfully') diff --git a/src/routes/metadata/components/MetaDataPanel.jsx b/src/routes/metadata/components/MetaDataPanel.jsx index 75d46544b..a27760215 100644 --- a/src/routes/metadata/components/MetaDataPanel.jsx +++ b/src/routes/metadata/components/MetaDataPanel.jsx @@ -369,16 +369,20 @@ class MetaDataPanel extends React.Component { } else if (metadataType === 'projectTemplate') { const projectTypeOptions = this.getProductCategoryOptions(templates.projectTypes) const value = metadata && metadata.category ? metadata.category : projectTypeOptions[0].value + const subCategoryVal = metadata && metadata.subCategory ? metadata.subCategory : '' + const metadataVal = metadata && metadata.metadataVal ? metadata.metadataVal : {} fields = fields.concat([ { key: 'id', type: 'number' }, { key: 'name', type: 'text' }, { key: 'key', type: 'text' }, { key: 'category', type: 'dropdown', options: projectTypeOptions, value }, + { key: 'subCategory', type: 'dropdown', options: projectTypeOptions.concat({title: '--', value: ''}), value: subCategoryVal }, { key: 'icon', type: 'text' }, { key: 'question', type: 'text' }, { key: 'info', type: 'text' }, { key: 'aliases', type: 'array' }, { key: 'phases', type: 'json', value: phasesDefaultValue }, + { key: 'metadata', type: 'json', value: metadataVal }, { key: 'disabled', type: 'checkbox' }, { key: 'hidden', type: 'checkbox' }, ]) diff --git a/src/routes/metadata/components/TemplateForm.jsx b/src/routes/metadata/components/TemplateForm.jsx index acfd340ca..d00e5ccb9 100644 --- a/src/routes/metadata/components/TemplateForm.jsx +++ b/src/routes/metadata/components/TemplateForm.jsx @@ -165,10 +165,10 @@ class TemplateForm extends Component { theme="default max-height" onSelect={(option) => { this.props.dropdownChange(label, option) - this.onChangeDropdown(option) + this.onChangeDropdown(label, option) }} value={value} - required + required={label!=='subCategory'} />+ {showInvitation && ( + ++ )}{ + callInviteRequest(item, true) + }} + onRejectClick={() => { + callInviteRequest(item, false) + }} + /> + -+
({ @@ -52,8 +52,8 @@ class ProfileSettingsForm extends Component { } } - onBusinessPhoneCountryChange({ country, externalChange }) { - const { businessPhoneValid, countrySelected: previousSelectedCountry } = this.state + onBusinessPhoneCountryChange({ country, externalChange, isValid}) { + const { countrySelected: previousSelectedCountry } = this.state if (country && country.code) { if (previousSelectedCountry !== country.name && country.name) { @@ -63,13 +63,14 @@ class ProfileSettingsForm extends Component { countrySelected: country.name, }) } - - if (!businessPhoneValid) { + if(!this.state.businessPhoneValid && isValid) { this.setState({ businessPhoneValid: true }) } - } else if (businessPhoneValid) { + } + + if (this.state.businessPhoneValid && !isValid){ this.setState({ businessPhoneValid: false }) @@ -137,6 +138,8 @@ class ProfileSettingsForm extends Component { ...this.props.values.settings, ...data, } + + updatedData.businessPhone = formatPhone(updatedData.businessPhone) this.props.saveSettings(updatedData) this.setState({ diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index b955b4c88..dcda97c0c 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -46,3 +46,13 @@ @include font-family('Roboto', 100, normal, '../assets/fonts/roboto/', 'roboto-thin'); @include font-family('Roboto', 100, italic, '../assets/fonts/roboto/', 'roboto-thinitalic'); + +// Roboto-condensed +@include font-family('Roboto Condensed', 700, normal, '../assets/fonts/roboto-condensed/', 'roboto-condensed-bold'); +@include font-family('Roboto Condensed', 700, italic, '../assets/fonts/roboto-condensed/', 'roboto-condensed-bolditalic'); + +@include font-family('Roboto Condensed', 400, normal, '../assets/fonts/roboto-condensed/', 'roboto-condensed-regular'); +@include font-family('Roboto Condensed', 400, italic, '../assets/fonts/roboto-condensed/', 'roboto-condensed-italic'); + +@include font-family('Roboto Condensed', 300, normal, '../assets/fonts/roboto-condensed/', 'roboto-condensed-light'); +@include font-family('Roboto Condensed', 300, italic, '../assets/fonts/roboto-condensed/', 'roboto-condensed-lightitalic'); diff --git a/src/styles/includes.scss b/src/styles/includes.scss index 6133034cc..6cd6811ef 100644 --- a/src/styles/includes.scss +++ b/src/styles/includes.scss @@ -1,3 +1,4 @@ @import 'variables'; @import './mixins/shadows'; +@import './mixins/fonts'; @import './mixins/responsive-mixins'; diff --git a/src/styles/mixins/_fonts.scss b/src/styles/mixins/_fonts.scss new file mode 100644 index 000000000..fdf5fa9e0 --- /dev/null +++ b/src/styles/mixins/_fonts.scss @@ -0,0 +1,10 @@ +// Roboto-condensed mixin +@mixin roboto-condensed-bold { + font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; + font-weight: 700; +} + +@mixin roboto-condensed { + font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; + font-weight: 400; +}