Refactor new and edit renderer for file cell

app/assets/javascripts/repositories/renderers/columns/asset.js

@@ -1,9 +1,9 @@
 /*
- global ActiveStorage Promise
+ global ActiveStorage Promise I18n GLOBAL_CONSTANTS
 */
 /* eslint-disable no-unused-vars */
 
-var Asset = (function() {
+var AssetColumnHelper = (function() {
   function uploadFiles($fileInputs, directUploadUrl) {
     let filesToUploadCntr = 0;
     let filesUploadedCntr = 0;
@@ -48,7 +48,32 @@ var Asset = (function() {
     });
   }
 
+  function renderCell($cell, formId, columnId) {
+    let empty = $cell.is(':empty');
+    let fileName = $cell.find('a.file-preview-link').text();
+    let placeholder = I18n.t('repositories.table.assets.select_file_btn', { max_size: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB });
+
+    $cell.html(`
+      <div class="file-editing">
+        <div class="file-hidden-field-container hidden"></div>
+        <input class=""
+               id="repository_file_${columnId}"
+               form="${formId}"
+               type="file"
+               data-col-id="${columnId}"
+               data-is-empty="${empty}"
+               value=""
+               data-type="RepositoryAssetValue">
+        <div class="file-upload-button ${empty ? 'new-file' : ''}">
+          <i class="fas fa-paperclip icon"></i>
+          <label data-placeholder="${placeholder}" for="repository_file_${columnId}">${fileName}</label>
+          <span class="delete-action fas fa-trash"> </span>
+        </div>
+      </div>`);
+  }
+
   return {
-    uploadFiles: uploadFiles
+    uploadFiles: uploadFiles,
+    renderCell: renderCell
   };
 }());

app/assets/javascripts/repositories/renderers/edit_renderers.js

@@ -1,6 +1,6 @@
 /*
 global ListColumnHelper ChecklistColumnHelper StatusColumnHelper SmartAnnotation I18n
-GLOBAL_CONSTANTS DateTimeHelper
+DateTimeHelper AssetColumnHelper
 */
 
 $.fn.dataTable.render.editRowName = function(formId, cell) {
@@ -22,26 +22,7 @@ $.fn.dataTable.render.editRowName = function(formId, cell) {
 
 $.fn.dataTable.render.editRepositoryAssetValue = function(formId, columnId, cell) {
   let $cell = $(cell.node());
-  let empty = $cell.is(':empty');
-  let fileName = $cell.find('a.file-preview-link').text();
-
-  $cell.html(`
-    <div class="file-editing">
-      <div class="file-hidden-field-container hidden"></div>
-      <input class=""
-             id="repository_file_${columnId}"
-             form="${formId}"
-             type="file"
-             data-col-id="${columnId}"
-             data-is-empty="${empty}"
-             value=""
-             data-type="RepositoryAssetValue">
-      <div class="file-upload-button ${empty ? 'new-file' : ''}">
-        <label for="repository_file_${columnId}">${I18n.t('repositories.table.assets.select_file_btn', { max_size: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB })}</label>
-        <span class="icon"><i class="fas fa-paperclip"></i></span><span class="label-asset">${fileName}</span>
-        <span class="delete-action fas fa-trash"> </span>
-      </div>
-    </div>`);
+  AssetColumnHelper.renderCell($cell, formId, columnId);
 };
 
 $.fn.dataTable.render.editRepositoryTextValue = function(formId, columnId, cell) {

app/assets/javascripts/repositories/renderers/new_renderers.js

@@ -1,6 +1,6 @@
 /*
 global ListColumnHelper ChecklistColumnHelper StatusColumnHelper SmartAnnotation I18n
-GLOBAL_CONSTANTS DateTimeHelper
+AssetColumnHelper DateTimeHelper
 */
 
 $.fn.dataTable.render.newRowName = function(formId, $cell) {
@@ -18,23 +18,7 @@ $.fn.dataTable.render.newRowName = function(formId, $cell) {
 };
 
 $.fn.dataTable.render.newRepositoryAssetValue = function(formId, columnId, $cell) {
-  $cell.html(`
-    <div class="file-editing">
-      <div class="file-hidden-field-container hidden"></div>
-      <input class=""
-             id="repository_file_${columnId}"
-             form="${formId}"
-             type="file"
-             data-col-id="${columnId}"
-             data-is-empty="true"
-             value=""
-             data-type="RepositoryAssetValue">
-      <div class="file-upload-button new-file">
-        <label for="repository_file_${columnId}">${I18n.t('repositories.table.assets.select_file_btn', { max_size: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB })}</label>
-        <span class="icon"><i class="fas fa-paperclip"></i></span><span class="label-asset"></span>
-        <span class="delete-action fas fa-trash"> </span>
-      </div>
-    </div>`);
+  AssetColumnHelper.renderCell($cell, formId, columnId);
 };
 
 $.fn.dataTable.render.newRepositoryTextValue = function(formId, columnId, $cell) {

app/assets/javascripts/repositories/row_editor.js

@@ -40,7 +40,7 @@ var RepositoryDatatableRowEditor = (function() {
 
     animateSpinner($table, true);
     // DirectUpload here
-    let uploadPromise = Asset.uploadFiles($files, directUrl);
+    let uploadPromise = AssetColumnHelper.uploadFiles($files, directUrl);
 
     // Submission here
     uploadPromise
@@ -62,10 +62,15 @@ var RepositoryDatatableRowEditor = (function() {
     fileInputs.on('change', function() {
       let $input = $(this);
       let $fileBtn = $input.next('.file-upload-button');
-      let $label = $fileBtn.find('.label-asset');
+      let $label = $fileBtn.find('label');
 
-      $label.text($input[0].files[0].name);
-      $fileBtn.removeClass('new-file');
+      if ($input[0].files[0]) {
+        $label.text($input[0].files[0].name);
+        $fileBtn.removeClass('new-file');
+      } else {
+        $label.text('');
+        $fileBtn.addClass('new-file');
+      }
       $fileBtn.removeClass('error');
     });
 
@@ -73,7 +78,7 @@ var RepositoryDatatableRowEditor = (function() {
     deleteButtons.on('click', function() {
       let $fileBtn = $(this).parent();
       let $input = $fileBtn.prev('input[type=file]');
-      let $label = $fileBtn.find('.label-asset');
+      let $label = $fileBtn.find('label');
 
       $fileBtn.addClass('new-file');
       $label.text('');

app/assets/stylesheets/repositories.scss

@@ -259,10 +259,38 @@
 .file-editing {
   width: 200px;
 
+  input[type=file] {
+    display: none;
+  }
+
+  label {
+    cursor: pointer;
+    flex-grow: 1;
+    font-weight: normal;
+    height: 100%;
+    margin-bottom: 0;
+    margin-right: 5px;
+    overflow: hidden;
+    padding-left: 34px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 2;
+
+    &:empty::before {
+      content: attr(data-placeholder);
+      margin-left: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
   .file-upload-button {
+    align-items: center;
     background-color: $color-white;
     border: solid 1px;
     border-radius: 3px;
+    display: flex;
     height: 34px;
     line-height: 32px;
     position: relative;
@@ -272,33 +300,27 @@
         display: none;
       }
 
-      label {
-        display: inline-block;
-      }
-
       &:hover {
         .fa-trash {
           display: none;
         }
       }
+
+      label {
+        padding-left: 0;
+      }
     }
 
     .icon {
       display: inline-block;
-      position: relative;
+      left: 0;
+      line-height: 32px;
+      position: absolute;
       text-align: center;
-      top: -12px;
+      top: 0;
       width: 34px;
     }
 
-    .label-asset {
-      display: inline-block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: calc(100% - 44px);
-    }
-
     .fa-trash {
       background-color: $color-white;
       cursor: pointer;
@@ -348,18 +370,6 @@
       }
     }
   }
-
-
-
-  input[type=file] {
-    display: none;
-  }
-
-  label {
-    display: none;
-    font-weight: normal;
-    margin-left: 10px;
-  }
 }
 
 .toolbarButtonsDatatable {