Merge branch '212-make-it-possible-to-change-the-file-name-of-an-uploaded-field' into 'develop'

Resolve "Make it possible to change the file name of an uploaded field"

Closes #212

See merge request bramw/baserow!134

changelog.md

@@ -9,6 +9,7 @@
 * Fixed drifting context menu.
 * Store updated and created timestamp for the groups, applications, tables, views,
   fields and rows.
+* Made the file name editable.
 
 ## Released (2020-12-01)
 

web-frontend/modules/core/assets/scss/components/file_field_modal.scss

@@ -23,6 +23,12 @@
   @include fixed-height($file-field-modal-head-height, 14px);
 }
 
+.file-field-modal__rename {
+  font-size: 12px;
+  margin-left: 4px;
+  color: $white;
+}
+
 .file-field-modal__close {
   border-radius: 3px;
   color: $white;

web-frontend/modules/core/components/Editable.vue

@@ -42,6 +42,7 @@ export default {
      */
     edit() {
       this.editing = true
+      this.$emit('editing', true)
       this.$nextTick(() => {
         focusEnd(this.$refs.editable)
       })
@@ -53,6 +54,7 @@ export default {
      */
     change() {
       this.editing = false
+      this.$emit('editing', false)
 
       if (this.oldValue === this.newValue) {
         return

web-frontend/modules/database/components/field/FileFieldModal.vue

@@ -8,7 +8,27 @@
     <div class="file-field-modal">
       <div class="file-field-modal__head">
         <div class="file-field-modal__name">
-          <template v-if="preview">{{ preview.visible_name }}</template>
+          <template v-if="preview">
+            <Editable
+              ref="rename"
+              :value="preview.visible_name"
+              @change="
+                $emit('renamed', {
+                  value: files,
+                  index: selected,
+                  value: $event.value,
+                })
+              "
+              @editing="renaming = $event"
+            ></Editable>
+            <a
+              v-show="!renaming"
+              @click="$refs.rename.edit()"
+              class="file-field-modal__rename"
+            >
+              <i class="fa fa-pen"></i>
+            </a>
+          </template>
         </div>
         <a class="file-field-modal__close" @click="hide()">
           <i class="fas fa-times"></i>
@@ -97,6 +117,7 @@ export default {
   },
   data() {
     return {
+      renaming: false,
       selected: 0,
     }
   },
@@ -137,6 +158,12 @@ export default {
       }
     },
     keyup(event) {
+      // When we are renaming we want the arrow keys to be available to move the
+      // cursor.
+      if (this.renaming) {
+        return
+      }
+
       // If left arrow
       if (event.keyCode === 37) {
         this.previous()

web-frontend/modules/database/components/row/RowEditFieldFile.vue

@@ -18,13 +18,24 @@
         </div>
         <div class="field-file__description">
           <div class="field-file__name">
-            {{ file.visible_name }}
+            <Editable
+              :ref="'rename-' + index"
+              :value="file.visible_name"
+              @change="renameFile(value, index, $event.value)"
+            ></Editable>
           </div>
           <div class="field-file__info">
             {{ getDate(file.uploaded_at) }} - {{ file.size | formatBytes }}
           </div>
         </div>
         <div class="field-file__actions">
+          <a
+            v-tooltip="'rename'"
+            class="field-file__action"
+            @click="$refs['rename-' + index][0].edit()"
+          >
+            <i class="fas fa-pen"></i>
+          </a>
           <a
             v-tooltip="'download'"
             target="_blank"
@@ -55,6 +66,7 @@
       ref="fileModal"
       :files="value"
       @removed="removeFile(value, $event)"
+      @renamed="renameFile(value, $event.index, $event.value)"
     ></FileFieldModal>
   </div>
 </template>

web-frontend/modules/database/components/view/grid/GridViewFieldFile.vue

@@ -66,6 +66,7 @@
       :files="value"
       @hidden="hideModal"
       @removed="removeFile(value, $event)"
+      @renamed="renameFile(value, $event.index, $event.value)"
     ></FileFieldModal>
   </div>
 </template>

web-frontend/modules/database/mixins/fileField.js

@@ -27,6 +27,14 @@ export default {
       newValue.push(...files)
       this.$emit('update', newValue, value)
     },
+    /**
+     * Updates the visible name of the file with the given index.
+     */
+    renameFile(value, index, newName) {
+      const newValue = JSON.parse(JSON.stringify(value))
+      newValue[index].visible_name = newName
+      this.$emit('update', newValue, value)
+    },
     getIconClass(mimeType) {
       return mimetype2fa(mimeType)
     },