From f3695680802d6cad6834167c60242f10ddff2821 Mon Sep 17 00:00:00 2001 From: Rohan Likhite Date: Thu, 23 Sep 2021 09:52:58 -0400 Subject: [PATCH] Show Basket Time to Deletion (#106) Users should be able to see what date their baskets expire on. Currently, Pantry will refresh the TTL of a basket after each CRUD operation. Stale baskets will expire after a few days. We should at a minimum display the TTL of each basket on the dashboard so users can view which baskets are stale. * Introduce a TTL function to the dataStore * Change the response type of Account.getBlocks() * Add FontAwesome to the frontend * Display the expiry date (TTL) of each basket beside it's name Resolves #79 --- .eslintrc.js | 2 +- package-lock.json | 26 + package.json | 3 + src/app/components/landingRight.ts | 5 + src/app/index.ts | 7 + src/app/scss/_text.scss | 5 +- src/app/templates/landingRight.html | 24 +- src/controllers/account.ts | 7 +- src/interfaces/account.ts | 4 +- src/interfaces/block.ts | 5 + src/models/account.ts | 16 +- src/services/__mocks__/dataStore.ts | 1 + src/services/dataStore.ts | 14 + yarn.lock | 2607 +++++++++++++-------------- 14 files changed, 1307 insertions(+), 1419 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 25bceb5..da38b95 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -94,7 +94,7 @@ module.exports = { "@typescript-eslint/no-empty-function": "warn", "@typescript-eslint/no-empty-interface": "error", "@typescript-eslint/no-explicit-any": "warn", - "@typescript-eslint/no-unsafe-assignment": "warn", + "@typescript-eslint/no-unsafe-assignment": "off", "@typescript-eslint/no-unsafe-call": "off", "@typescript-eslint/no-unsafe-member-access": "off", "@typescript-eslint/no-unsafe-return": "warn", diff --git a/package-lock.json b/package-lock.json index 96dfb1a..12320c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -166,6 +166,32 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", + "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", + "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz", + "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "@fortawesome/vue-fontawesome": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.2.tgz", + "integrity": "sha512-ecpKSBUWXsxRJVi/dbOds4tkKwEcBQ1JSDZFzE2jTFpF8xIh3OgTX8POIor6bOltjibr3cdEyvnDjecMwUmxhQ==" + }, "@hapi/bourne": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-1.3.2.tgz", diff --git a/package.json b/package.json index 488853a..f50a573 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,9 @@ "webpack-merge": "^4.1.3" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-solid-svg-icons": "^5.15.4", + "@fortawesome/vue-fontawesome": "^2.0.2", "@sendgrid/mail": "^7.1.1", "airtable": "^0.8.1", "axios": "^0.21.2", diff --git a/src/app/components/landingRight.ts b/src/app/components/landingRight.ts index b7c56ac..dfb8547 100644 --- a/src/app/components/landingRight.ts +++ b/src/app/components/landingRight.ts @@ -202,6 +202,11 @@ const landingRight = { return _positiveStatus ? _positiveMessage : _negativeMessage }, + getDateOfDeletion(ttl: number): string { + const _currentDate = new Date() + _currentDate.setSeconds(ttl) + return _currentDate.toISOString().split('T')[0] + }, }, mounted() { this.fetchURLParams() diff --git a/src/app/index.ts b/src/app/index.ts index 4d79395..d0a642d 100644 --- a/src/app/index.ts +++ b/src/app/index.ts @@ -1,9 +1,16 @@ // External Files +import { library } from '@fortawesome/fontawesome-svg-core' +import { faEye, faEyeSlash, faClipboard } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' const vue = require('vue') const vueClipboard = require('vue-clipboard2') // Vue Setup vue.use(vueClipboard) +vue.component('font-awesome-icon', FontAwesomeIcon) +library.add(faClipboard) +library.add(faEye) +library.add(faEyeSlash) // CSS require('./scss/main.scss') diff --git a/src/app/scss/_text.scss b/src/app/scss/_text.scss index cd1a136..f331ffc 100644 --- a/src/app/scss/_text.scss +++ b/src/app/scss/_text.scss @@ -50,10 +50,7 @@ a:any-link { float: right; color: $secondary-color; cursor: pointer; - margin: 0 3px; - &--no-float { - float: inherit; - } + margin: 0 5px; } &--light { color: $secondary-color; diff --git a/src/app/templates/landingRight.html b/src/app/templates/landingRight.html index 7dbc070..b2110ce 100644 --- a/src/app/templates/landingRight.html +++ b/src/app/templates/landingRight.html @@ -161,16 +161,26 @@