feat: Add download icon for attachment

re #335, re #440

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue

@@ -78,12 +78,14 @@
     >
       <v-card class="h-100 images-modal">
         <v-card-text class="h-100 backgroundColor">
-          <v-btn small class="my-4" :loading="uploading" @click="addFile">
+          <div class="d-flex mx-2">
+            <v-btn small class="my-4 " :loading="uploading" @click="addFile">
               <v-icon small class="mr-2">
                 mdi-link-variant
               </v-icon>
-            Attach File
+              <span class="caption">Attach File</span>
             </v-btn>
+          </div>
 
           <div class="d-flex flex-wrap h-100">
             <v-container fluid style="max-height:calc(90vh - 80px);overflow-y: auto">
@@ -97,6 +99,9 @@
                     <v-icon small class="remove-icon" @click="removeItem(i)">
                       mdi-close-circle
                     </v-icon>
+                    <v-icon color="grey" class="download-icon" @click.stop="downloadItem(item,i)">
+                      mdi-download
+                    </v-icon>
                     <div class="pa-2 d-flex align-center" style="height:200px">
                       <img
                         v-if="isImage(item.title)"
@@ -138,8 +143,10 @@
               <div class="mx-auto d-flex flex-column justify-center align-center" style="min-height:100px">
                 <p class="title text-center">
                   {{ item.title }}
+                  <v-icon class="ml-3" color="grey" @click.stop="downloadItem(item,i)">
+                    mdi-download
+                  </v-icon>
                 </p>
-
                 <div style="width:90vh;height:calc(100vh - 150px)" class="d-flex align-center justify-center">
                   <img
                     v-if="isImage(item.title)"
@@ -209,7 +216,7 @@
 
 <script>
 import { isImage } from '@/components/project/spreadsheet/helpers/imageExt'
-
+import FileSaver from 'file-saver'
 export default {
   name: 'EditableAttachmentCell',
   props: ['dbAlias', 'value', 'active', 'isLocked', 'meta', 'column'],
@@ -299,6 +306,9 @@ export default {
       this.$emit('input', JSON.stringify(this.localState))
       this.$emit('update')
     },
+    downloadItem(item) {
+      FileSaver.saveAs(item.url, item.title)
+    },
     onArrowDown(e) {
       if (!this.showImage) {
         return
@@ -321,7 +331,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .img-container {
   margin: 0 -2px;
 }
@@ -384,6 +394,20 @@ export default {
   top: 5px;
   right: 5px
 }
+.modal-thumbnail-card{
+
+  .download-icon {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    opacity:0;
+    transition:.4s opacity;
+  }
+
+  &:hover .download-icon{
+    opacity:1
+  }
+}
 
 .image-overlay-container {
   max-height: 100vh;
@@ -472,7 +496,4 @@ export default {
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ * along with this p
- *
- */
--->

packages/nc-gui/nuxt.config.js

@@ -19,7 +19,7 @@ export default {
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
-  target: 'server',
+  target: 'static',
   /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
@@ -210,6 +210,16 @@ export default {
   ],
   env: {
     EE: !!process.env.EE
+  },
+  pwa: {
+    workbox: {
+      /* workbox options */
+      assetsURLPattern: './_nuxt/',
+      pagesURLPattern: './'
+    },
+    manifest: {
+      publicPath: './'
+    }
   }
 }
 /**

packages/nc-gui/package-lock.json

@@ -6829,6 +6829,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

packages/nc-gui/package.json

@@ -22,6 +22,7 @@
     "canvas-confetti": "^1.4.0",
     "dayjs": "^1.10.4",
     "debounce": "^1.2.0",
+    "file-saver": "^2.0.5",
     "fix-path": "^3.0.0",
     "inflection": "^1.12.0",
     "material-design-icons-iconfont": "^5.0.1",

packages/nc-lib-gui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nc-lib-gui",
-  "version": "0.2.18",
+  "version": "0.2.23",
   "description": "> TODO: description",
   "author": "“pranavxc” <pranavxc@gmail.com>",
   "homepage": "https://gitlab.com/xgenecloud-ts/xgenecloud-ts#readme",

packages/nocodb/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nocodb",
-  "version": "0.11.14",
+  "version": "0.11.15",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -11894,9 +11894,9 @@
       }
     },
     "nc-lib-gui": {
-      "version": "0.2.18",
+      "version": "0.2.23",
-      "resolved": "https://registry.npmjs.org/nc-lib-gui/-/nc-lib-gui-0.2.18.tgz",
+      "resolved": "https://registry.npmjs.org/nc-lib-gui/-/nc-lib-gui-0.2.23.tgz",
-      "integrity": "sha512-/HQA/zL0N4uWRkqOK3d4FnbTNlcvjydUm+zJvnCyFCYSuq7F7r2jk8d5bY3XWHgsBXQ6gukUQzblFJROxVRHOA==",
+      "integrity": "sha512-wJS5gGpBBLcjZafuRYQQdhKum999zmXs+TxHv3MJ5qVsIF497Rve6sL+lYZbWEZkyoYnhHprAMCHpVeLv0cGSA==",
       "requires": {
         "axios": "^0.19.2",
         "body-parser": "^1.19.0",

packages/nocodb/package.json

@@ -146,7 +146,7 @@
     "nanoid": "^3.1.20",
     "nc-common": "0.0.6",
     "nc-help": "^0.2.12",
-    "nc-lib-gui": "^0.2.18",
+    "nc-lib-gui": "^0.2.23",
     "nc-plugin": "^0.1.1",
     "nodemailer": "^6.4.10",
     "ora": "^4.0.4",