Support deleting indicator and in-use

lib/routes/attachment.js

@@ -43,7 +43,7 @@ module.exports = function(crowi, app) {
         //debug('error', err);
       });
     }).catch((err) => {
-      debug('err', err);
+      //debug('err', err);
       // not found
       return res.status(404).sendFile(crowi.publicDir + '/images/file-not-found.png');
     });

resource/css/_attachments.scss

@@ -1,5 +1,18 @@
 
+.page-attachments {
+  .attachment-in-use {
+    margin: 0 0 0 4px;
+  }
+
+  .attachment-delete {
+    cursor: pointer;
+    margin: 0 0 0 4px;
+  }
+
+}
+
 .attachment-delete-modal {
+
   .attachment-delete-image {
     text-align: center;
 

resource/js/app.js

@@ -18,8 +18,13 @@ if (!window) {
 
 const mainContent = document.querySelector('#content-main');
 let pageId = null;
+let pageContent = null;
 if (mainContent !== null) {
   pageId = mainContent.attributes['data-page-id'].value;
+  const rawText = document.getElementById('raw-text-original');
+  if (rawText) {
+    pageContent = rawText.innerHTML;
+  }
 }
 
 // FIXME
@@ -37,7 +42,7 @@ const componentMappings = {
   'search-top': <HeaderSearchBox crowi={crowi} />,
   'search-page': <SearchPage crowi={crowi} />,
   'page-list-search': <PageListSearch crowi={crowi} />,
-  'page-attachment': <PageAttachment pageId={pageId} crowi={crowi} />,
+  'page-attachment': <PageAttachment pageId={pageId} pageContent={pageContent} crowi={crowi} />,
 
   //'revision-history': <PageHistory pageId={pageId} />,
   //'page-comment': <PageComment />,

resource/js/components/PageAttachment.js

@@ -12,6 +12,8 @@ export default class PageAttachment extends React.Component {
       attachments: [],
       inUse: {},
       attachmentToDelete: null,
+      deleting: false,
+      deleteError: '',
     };
 
     this.onAttachmentDeleteClicked = this.onAttachmentDeleteClicked.bind(this);
@@ -30,32 +32,35 @@ export default class PageAttachment extends React.Component {
       const attachments = res.attachments;
       let inUse = {};
 
-      for (let attachment in attachments.length) {
-        inUse[attachment._id] = this.checkIfFileInUse(attachment);;
+      for (const attachment of attachments) {
+        inUse[attachment._id] = this.checkIfFileInUse(attachment);
       }
 
       this.setState({
         attachments: attachments,
         inUse: inUse,
       });
-      console.log(attachments);
     });
   }
 
   checkIfFileInUse(attachment) {
-    // todo
-    return true;
+    if (this.props.pageContent.match(attachment.url)) {
+      return true;
+    }
+    return false;
   }
 
   onAttachmentDeleteClicked(attachment) {
     this.setState({
-      attachmentToDelete: attachment
+      attachmentToDelete: attachment,
     });
   }
 
   onAttachmentDeleteClickedConfirm(attachment) {
     const attachmentId = attachment._id;
-    console.log('Do Delete!!', attachmentId);
+    this.setState({
+      deleting: true,
+    });
 
     this.props.crowi.apiPost('/attachments.remove', {attachment_id: attachmentId})
     .then(res => {
@@ -64,9 +69,13 @@ export default class PageAttachment extends React.Component {
           return at._id != attachmentId;
         }),
         attachmentToDelete: null,
+        deleting: false,
       });
     }).catch(err => {
-      console.log('error', err);
+      this.setState({
+        deleteError: 'Something went wrong.',
+        deleting: false,
+      });
     });
   }
 
@@ -95,6 +104,8 @@ export default class PageAttachment extends React.Component {
 
           attachmentToDelete={attachmentToDelete}
           inUse={deleteInUse}
+          deleting={this.state.deleting}
+          deleteError={this.state.deleteError}
           onAttachmentDeleteClickedConfirm={this.onAttachmentDeleteClickedConfirm}
         />
       </div>

resource/js/components/PageAttachment/Attachment.js

@@ -30,7 +30,7 @@ export default class Attachment extends React.Component {
 
     let fileInUse = '';
     if (this.props.inUse) {
-      fileInUse = <span className="label label-info">Using</span>;
+      fileInUse = <span className="attachment-in-use label label-info">In Use</span>;
     }
 
     return (
@@ -42,7 +42,7 @@ export default class Attachment extends React.Component {
 
           {fileInUse}
 
-          <a className="attachment-delete" onClick={this._onAttachmentDeleteClicked}><Icon name="trash-o" /></a>
+          <a className="text-danger attachment-delete" onClick={this._onAttachmentDeleteClicked}><Icon name="trash-o" /></a>
       </li>
     );
   }

resource/js/components/PageAttachment/DeleteAttachmentModal.js

@@ -47,6 +47,16 @@ export default class DeleteAttachmentModal extends React.Component {
     delete props.onAttachmentDeleteClickedConfirm;
     delete props.attachmentToDelete;
     delete props.inUse;
+    delete props.deleting;
+    delete props.deleteError;
+
+    let deletingIndicator = '';
+    if (this.props.deleting) {
+      deletingIndicator = <Icon name="spinner" spin />;
+    }
+    if (this.props.deleteError) {
+      deletingIndicator = <p>{this.props.deleteError}</p>;
+    }
 
     let renderAttachment = this.renderByFileFormat(attachment);
 
@@ -59,7 +69,10 @@ export default class DeleteAttachmentModal extends React.Component {
           {renderAttachment}
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={this._onDeleteConfirm} bsStyle="danger">Delete!</Button>
+          {deletingIndicator}
+          <Button onClick={this._onDeleteConfirm} bsStyle="danger"
+            disabled={this.props.deleting}
+            >Delete!</Button>
         </Modal.Footer>
       </Modal>
     );

resource/js/components/PageAttachment/PageAttachmentList.js

@@ -14,7 +14,7 @@ export default class PageAttachmentList extends React.Component {
         <Attachment
           key={"page:attachment:" + attachment._id}
           attachment={attachment}
-          inUse={this.props.inUse[attachment._id] || true}
+          inUse={this.props.inUse[attachment._id] || false}
           onAttachmentDeleteClicked={this.props.onAttachmentDeleteClicked}
          />
       );