[challenge] Add TaaS management functionality - diazz submission

Author: vas3a

package.json

@@ -10,6 +10,7 @@
     "@nateradebaugh/react-datetime": "^4.4.11",
     "@popperjs/core": "^2.5.4",
     "@svgr/webpack": "2.4.1",
+    "@toast-ui/editor": "^2.5.1",
     "axios": "^0.19.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
@@ -43,6 +44,7 @@
     "file-loader": "2.0.0",
     "filestack-js": "^3.20.0",
     "filestack-react": "^4.0.1",
+    "formik": "^2.4.6",
     "fs-extra": "7.0.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",
@@ -117,7 +119,8 @@
     "webpack": "^4.43.0",
     "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "2.0.4",
-    "xss": "^1.0.6"
+    "xss": "^1.0.6",
+    "yup": "^1.6.1"
   },
   "scripts": {
     "start": "node server.js",

src/actions/projects.js

@@ -84,6 +84,19 @@ export function createProject (project) {
   }
 }
 
+/**
+ * Only loads project details
+ * @param {String} projectId Id of the project
+ */
+export function loadOnlyProjectInfo (projectId) {
+  return (dispatch) => {
+    return dispatch({
+      type: LOAD_PROJECT_DETAILS,
+      payload: fetchProjectById(projectId)
+    })
+  }
+}
+
 export function reloadProjectMembers (projectId) {
   return (dispatch) => {
     return dispatch({

src/assets/images/plus-gray.svg

@@ -0,0 +1,48 @@
+/*
+ *  FieldDescription
+ */
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import TuiEditor from '../TuiEditor'
+import styles from './styles.scss'
+
+const FieldDescription = props => (
+  <TuiEditor
+    {...props}
+    toolbarItems={[
+      'heading',
+      'bold',
+      'italic',
+      'strike',
+      'code',
+      'divider',
+      'quote',
+      'codeblock',
+      'hr',
+      'divider',
+      'ul',
+      'ol',
+      'divider',
+      'image',
+      'link'
+    ]}
+    plugins={[]}
+    className={styles['description-editor']}
+    previewStyle='vertical'
+    height='400px'
+    hideModeSwitch
+    initialEditType='wysiwyg'
+    initialValue={props.value}
+  />
+)
+
+FieldDescription.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string
+}
+
+export default FieldDescription

src/assets/images/x-gray.svg

@@ -0,0 +1,20 @@
+@import "../../styles/includes";
+
+.description-editor {
+  width: 100%;
+
+  :global {
+    .tui-editor-contents {
+      code {
+        background-color: transparent;
+        color: inherit;
+      }
+
+      pre {
+        background-color: transparent;
+        color: inherit;
+        padding: 0;
+      }
+    }
+  }
+}

src/components/FieldDescription/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+
+const FieldInput = ({
+  onChangeValue,
+  placeholder,
+  value,
+  type
+}) => {
+  return (
+    <input
+      className={styles.inputField}
+      type={type}
+      placeholder={placeholder}
+      onChange={x => onChangeValue(x.target.value)}
+      value={value}
+      onKeyDown={
+        type === 'number'
+          ? evt => {
+            if (['e', 'E', '+'].includes(evt.key)) {
+              evt.preventDefault()
+            }
+          }
+          : undefined
+      }
+    />
+  )
+}
+
+FieldInput.defaultProps = {
+  type: 'text',
+  onChangeValue: () => {}
+}
+
+FieldInput.propTypes = {
+  onChangeValue: PropTypes.func,
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  type: PropTypes.string
+}
+
+export default FieldInput

src/components/FieldDescription/styles.scss

@@ -0,0 +1,18 @@
+@import '../../styles/includes';
+
+@-moz-document url-prefix() {
+  .inputField {
+    &::-moz-placeholder {
+      /* Mozilla Firefox 19+ */
+      line-height: 38px;
+    }
+    &::-webkit-input-placeholder {
+      /* Webkit */
+      line-height: 38px;
+    }
+    &:-ms-input-placeholder {
+      /* IE */
+      line-height: 38px;
+    }
+  }
+}

src/components/FieldInput/index.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './styles.module.scss'
+import cn from 'classnames'
+
+const FieldLabelDynamic = ({
+  title,
+  isRequired,
+  children,
+  errorMsg,
+  className,
+  direction,
+  info
+}) => {
+  return (
+    <div
+      className={cn(
+        styles.row,
+        {
+          [styles.vertical]: direction === 'vertical',
+          [styles.horizontal]: direction === 'horizontal'
+        },
+        className
+      )}
+    >
+      <div className={cn(styles.field, styles.col1)}>
+        <label>
+          {title} {isRequired && <span>*</span>}
+        </label>
+      </div>
+      <div className={styles.blockContent}>
+        <div className={styles.blockValue}>
+          {info && <div className={styles.blockInfo}>{info}</div>}
+          <div className={cn(styles.field, styles.col2)}>{children}</div>
+        </div>
+        {errorMsg && <div className={cn(styles.error)}>{errorMsg}</div>}
+      </div>
+    </div>
+  )
+}
+
+FieldLabelDynamic.defaultProps = {
+  direction: 'horizontal'
+}
+
+FieldLabelDynamic.propTypes = {
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  title: PropTypes.string,
+  errorMsg: PropTypes.string,
+  className: PropTypes.string,
+  info: PropTypes.string,
+  isRequired: PropTypes.bool,
+  children: PropTypes.node
+}
+
+export default FieldLabelDynamic

src/components/FieldInput/styles.module.scss

@@ -0,0 +1,74 @@
+@import '../../styles/includes';
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  align-content: space-between;
+  justify-content: flex-start;
+  gap: 5px;
+
+  &.vertical {
+    flex-direction: column;
+  }
+
+  &.horizontal {
+    gap: 10px;
+
+    .col1 {
+      margin-top: 10px;
+    }
+
+    .blockContent {
+      flex: 1;
+    }
+  }
+
+  .field {
+    label {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+      margin-bottom: 0;
+    }
+
+    &.col1 {
+      white-space: nowrap;
+      display: flex;
+      flex-direction: column;
+
+      span {
+        color: $tc-red;
+      }
+    }
+
+    &.col2 {
+      width: 100%;
+    }
+  }
+}
+
+.blockContent {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.blockValue {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.blockInfo {
+  font-size: 13px;
+  color: $tc-gray-70;
+  font-weight: 400;
+  font-style: italic;
+}
+
+.error {
+  color: $tc-red;
+}

src/components/FieldLabelDynamic/index.js

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react'
+import PropTypes from 'prop-types'
+import Select from '../Select'
+import { searchSkills } from '../../services/skills'
+import { AUTOCOMPLETE_DEBOUNCE_TIME_MS } from '../../config/constants'
+import _ from 'lodash'
+
+const fetchSkills = _.debounce((inputValue, callback) => {
+  searchSkills(inputValue)
+    .then(skills => {
+      const suggestedOptions = skills.map(skillItem => ({
+        label: skillItem.name,
+        value: skillItem.id
+      }))
+      return callback(suggestedOptions)
+    })
+    .catch(() => {
+      return callback(null)
+    })
+}, AUTOCOMPLETE_DEBOUNCE_TIME_MS)
+
+const FieldSkillsBasic = ({ value, onChangeValue, id, placeholder }) => {
+  const selectedSkills = useMemo(
+    () =>
+      value.map(skill => ({
+        label: skill.name,
+        value: skill.skillId
+      })),
+    [value]
+  )
+
+  return (
+    <Select
+      id={id}
+      isMulti
+      simpleValue
+      isAsync
+      value={selectedSkills}
+      onChange={values => {
+        onChangeValue(
+          (values || []).map(value => ({
+            name: value.label,
+            skillId: value.value
+          }))
+        )
+      }}
+      cacheOptions
+      loadOptions={fetchSkills}
+      placeholder={placeholder}
+    />
+  )
+}
+
+FieldSkillsBasic.defaultProps = {
+  onChangeValue: () => {},
+  id: 'skill-select',
+  value: [],
+  placeholder: ''
+}
+
+FieldSkillsBasic.propTypes = {
+  value: PropTypes.arrayOf(PropTypes.shape()),
+  id: PropTypes.string,
+  onChangeValue: PropTypes.func,
+  placeholder: PropTypes.string
+}
+
+export default FieldSkillsBasic