Links as Attachments + Tags

src/api/projectAttachments.js

@@ -2,8 +2,17 @@ import { axiosInstance as axios } from './requestInterceptor'
 import { PROJECTS_API_URL, FILE_PICKER_SUBMISSION_CONTAINER_NAME } from '../config/constants'
 
 export function addProjectAttachment(projectId, fileData) {
-  // add s3 bucket prop
-  fileData.s3Bucket = FILE_PICKER_SUBMISSION_CONTAINER_NAME
+
+  if (fileData.type === 'file') {
+    // add s3 bucket prop
+    fileData.s3Bucket = FILE_PICKER_SUBMISSION_CONTAINER_NAME
+  }
+
+  // The api takes only arrays
+  if (!fileData.tags) {
+    fileData.tags = []
+  }
+
   return axios.post(`${PROJECTS_API_URL}/v5/projects/${projectId}/attachments`, fileData)
     .then( resp => {
       resp.data.downloadUrl = `/projects/${projectId}/attachments/${resp.data.id}`
@@ -19,6 +28,14 @@ export function updateProjectAttachment(projectId, attachmentId, attachment) {
     }
   }
 
+  // The api takes only arrays
+  if (attachment && !attachment.tags) {
+    attachment = {
+      ...attachment,
+      tags: []
+    }
+  }
+
   return axios.patch(
     `${PROJECTS_API_URL}/v5/projects/${projectId}/attachments/${attachmentId}`, attachment)
     .then ( resp => {

src/components/AssetsLibrary/AddLink.jsx

@@ -7,6 +7,7 @@ const TCFormFields = FormsyForm.Fields
 const Formsy = FormsyForm.Formsy
 
 import './AddLink.scss'
+import { TagSelect } from '../TagSelect/TagSelect'
 
 class AddLink extends React.Component {
   constructor(props) {
@@ -75,6 +76,14 @@ class AddLink extends React.Component {
                 }}
                 wrapperClass="form-group"
               />
+              <div className="form-group">
+                <label className="tc-label">Tags</label>
+                <TagSelect
+                  useFormsySelect
+                  name="tags"
+                />
+              </div>
+
               <div className="button-area center-buttons">
                 <button className="tc-btn tc-btn-primary tc-btn-sm" type="submit" disabled={!canSubmit}>
                   Add Link

src/components/AssetsLibrary/FilesGridView.jsx

@@ -40,6 +40,7 @@ const FilesGridView = ({
   onEditIntent,
   title,
   selectedUsers,
+  selectedTags,
   onAddAttachment,
   assetsMembers,
   isSharingAttachment,
@@ -106,12 +107,13 @@ const FilesGridView = ({
     }
   }
 
-  const onAddingAttachmentPermissions = (allowedUsers) => {
+  const onAddingAttachmentPermissions = (allowedUsers, tags) => {
     const { attachments, projectId } = pendingAttachments
     _.forEach(attachments, f => {
       const attachment = {
         ...f,
-        allowedUsers
+        allowedUsers,
+        tags
       }
       onAddAttachment(projectId, attachment)
     })
@@ -195,6 +197,7 @@ const FilesGridView = ({
               onSubmit={onAddingAttachmentPermissions}
               onChange={onChangePermissions}
               selectedUsers={selectedUsers}
+              selectedTags={selectedTags}
               projectMembers={projectMembers}
               loggedInUser={loggedInUser}
               isSharingAttachment={isSharingAttachment}
@@ -207,8 +210,9 @@ const FilesGridView = ({
                   ref={(comp) => nameFieldRef = comp}
                   title="Name"
                   setFilter={setFilter}
-                  filterName="name"
-                  value={getFilterValue('name')}
+                  type="name"
+                  name={getFilterValue('name.name')}
+                  tag={getFilterValue('name.tag')}
                 />
               </div>
               <div styleName="flex-item-title item-shared-with">
@@ -241,8 +245,8 @@ const FilesGridView = ({
               const onDeleteCancel = () => onDeleteIntent(-1)
               const handleDeleteClick = () => onDeleteIntent(idx)
 
-              const onEditConfirm = (title, allowedUsers) => {
-                onEdit(link.id, title, allowedUsers)
+              const onEditConfirm = (title, allowedUsers, tags) => {
+                onEdit(link, title, allowedUsers, tags)
                 onEditIntent(-1)
               }
               const onEditCancel = () => onEditIntent(-1)
@@ -303,7 +307,14 @@ const FilesGridView = ({
                     <div styleName="flex-item item-type">
                       <FileIcon type={link.title.split('.')[1]} />
                     </div>
-                    <div styleName="flex-item item-name"><p>{renderLink(link)}</p></div>
+                    <div styleName="flex-item item-name">
+                      <div styleName="item-name-tag-wrapper">
+                        <p>{renderLink(link)}</p>
+                        {
+                          link.tags && link.tags.map((t, i) => <span styleName="tag" key={i}>{t}</span>)
+                        }
+                      </div>
+                    </div>
                     <div styleName="flex-item item-shared-with">
                       {renderSharedWith(link)}
                     </div>
@@ -338,6 +349,7 @@ FilesGridView.propTypes = {
   canEdit: PropTypes.bool,
   links: PropTypes.array.isRequired,
   selectedUsers: PropTypes.string,
+  selectedTags: PropTypes.arrayOf(PropTypes.string),
   projectMembers: PropTypes.object,
   pendingAttachments: PropTypes.object,
   onUploadAttachment: PropTypes.func,

src/components/AssetsLibrary/FilterColHeader.jsx

@@ -9,23 +9,25 @@ const Formsy = FormsyForm.Formsy
 const TCFormFields = FormsyForm.Fields
 
 class FilterColHeader extends React.Component {
-  
+
   constructor(props) {
     super(props)
-    this.state = {value: '', from: '', to: ''}
+    this.state = {value: '', from: '', to: '', name: '', tag: ''}
     this.setFilter = this.setFilter.bind(this)
     this.onChange = this.onChange.bind(this)
     this.onFromDateChange = this.onFromDateChange.bind(this)
     this.onToDateChange = this.onToDateChange.bind(this)
+    this.onNameChange = this.onNameChange.bind(this)
+    this.onTagChange = this.onTagChange.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)
     })
@@ -39,36 +41,56 @@ class FilterColHeader extends React.Component {
 
   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)
     })
   }
-
+
+  onNameChange(name, value) {
+    this.setState({ name: value})
+
+    setTimeout(() => {
+      this.props.setFilter('name.name', this.state.name)
+    })
+  }
+
+  onTagChange(name, value) {
+    this.setState({tag: value})
+
+    setTimeout(() => {
+      this.props.setFilter('name.tag', this.state.tag)
+    })
+  }
+
   componentDidMount() {
     this.setState({
       value: this.props.value || '',
       from: this.props.from || '',
-      to: this.props.to || ''
+      to: this.props.to || '',
+      name: this.props.name || '',
+      tag: this.props.tag || ''
     })
   }
-  
+
   clearFilter() {
     this.setState({
       value: '',
       from: '',
-      to: ''
+      to: '',
+      name: '',
+      tag: ''
     })
   }
-  
+
   renderByType() {
     switch (this.props.type) {
     case 'date': {
@@ -93,7 +115,30 @@ class FilterColHeader extends React.Component {
         </Formsy.Form>
       )
     }
-
+
+    case 'name': {
+      return (
+        <Formsy.Form>
+          <TCFormFields.TextInput
+            inputRef={(input) => { this.textInputFilter = input }}
+            label="Name"
+            type="text"
+            name="name.name"
+            onChange={this.onNameChange}
+            value={this.state.name}
+          />
+
+          <TCFormFields.TextInput
+            label="Tag"
+            type="text"
+            name="name.tag"
+            onChange={this.onTagChange}
+            value={this.state.tag}
+          />
+        </Formsy.Form>
+      )
+    }
+
     default: {
       return (
         <input
@@ -108,12 +153,12 @@ class FilterColHeader extends React.Component {
     }
     }
   }
-  
+
   render() {
     const {
       title,
     } = this.props
-    
+
     return (
       <div styleName="FilterColHeader">
         <Dropdown className="filter-drop-down" noAutoclose>

src/components/AssetsLibrary/GridView.scss

@@ -65,11 +65,14 @@
   -ms-flex: none;
   flex: none;
   width: 60px;
+  line-height: 30px;
+  align-items: flex-start;
 
   svg, img {
     height: 30px;
     width: 30px;
     margin-left: 4px;
+    margin-top: 8px;
   }
 }
 
@@ -82,6 +85,8 @@
   line-height: 30px;
   min-width: 0;
   text-align: left;
+  align-items: flex-start;
+  padding-right: 4px;
 
   > p {
     overflow: hidden;
@@ -90,10 +95,16 @@
   }
 }
 
+.item-name-tag-wrapper {
+  overflow: hidden;
+}
+
 .item-shared-with {
   flex: none;
   width: 140px;
   word-break: keep-all;
+  align-items: flex-start;
+  line-height: 30px;
 }
 
 .item-modified, .item-created-by {
@@ -114,6 +125,7 @@
   width: 50px;
   justify-content: flex-end;
   padding-right: 4px;
+  align-items: flex-start;
 }
 
 .item-action .link-buttons {
@@ -145,6 +157,24 @@
   position: relative;
 }
 
+.tag {
+  @include roboto-medium;
+  background-color: $tc-gray-10;
+  border-radius: 4px;
+  color: $tc-gray-50;
+  font-size: 13px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 2 * $base-unit;
+  margin-top: $base-unit;
+  margin-right: $base-unit;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-block;
+}
+
 :global {
   .user-block .tooltip-container {
     text-align: left;