Delta-1642 Platform > Freedom Components > FHistory (#50)

* feat: added FHistory Demo page
anyTV · Feb 24, 2022 · 6b5cbfb · 6b5cbfb
1 parent 9cb45d8
commit 6b5cbfb
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
         "lint": "eslint --ext .js,.vue src",
         "dev": "cross-env node node_modules/@quasar/cli/bin/quasar dev",
         "docs": "esdoc",
-        "postinstall": "npm i --no-save ./node_modules/quasar-app-extension-freedom-components/f-table ./node_modules/quasar-app-extension-freedom-components/f-filter"
+        "postinstall": "npm i --no-save ./node_modules/quasar-app-extension-freedom-components/f-table ./node_modules/quasar-app-extension-freedom-components/f-filter ./node_modules/quasar-app-extension-freedom-components/f-history"
     },
     "dependencies": {
         "@panter/vue-i18next": "^0.15.1",
@@ -30,7 +30,7 @@
         "moment": "^2.20.1",
         "qs": "^6.5.2",
         "quasar": "^1.15.23",
-        "quasar-app-extension-freedom-components": "git+https://freedom-components-readonly:[email protected]/anyTV/incubator/freedom-components.git#v1.7.5",
+        "quasar-app-extension-freedom-components": "git+https://freedom-components-readonly:[email protected]/anyTV/incubator/freedom-components.git",
         "vue": "2.6.11",
         "vue-gtm": "3.1.0-vue2",
         "vue-router": "^3.0.1",

diff --git a/quasar.extensions.json b/quasar.extensions.json
@@ -1,4 +1,5 @@
 {
   "f-table": {},
-  "f-filter": {}
+  "f-filter": {},
+  "f-history": {}
 }
diff --git a/src/config/date.js b/src/config/date.js
@@ -1,5 +1,6 @@
 export default {
     formats: {
         ISO_DATE: 'YYYY-MM-DD',
+        FULL_DATE: 'LL',
     },
 };
diff --git a/src/data/claim-history-types.json b/src/data/claim-history-types.json
@@ -0,0 +1,17 @@
+{
+    "claim-created": {
+        "label": "claim-created",
+        "styleClass": "text-positive",
+        "description": "claim-created-description"
+    },
+    "release": {
+        "label": "released",
+        "styleClass": "text-positive",
+        "description": "user-accepted-description"
+    },
+    "update": {
+        "label": "updated",
+        "styleClass": "text-positive",
+        "description": "user-accepted-description"
+    }
+}
diff --git a/src/data/user-status-types.json b/src/data/user-status-types.json
@@ -0,0 +1,41 @@
+{
+    "resubmitted": {
+        "label": "resubmitted",
+        "description": "user-resubmitted-description"
+    },
+    "pending": {
+        "label": "pending",
+        "description": "user-pending-description"
+    },
+    "accepted": {
+        "label": "accepted",
+        "styleClass": "text-positive",
+        "description": "user-accepted-description"
+    },
+    "rejected": {
+        "label": "rejected",
+        "styleClass": "text-negative",
+        "description": "user-rejected-description"
+    },
+    "escalated": {
+        "label": "escalated",
+        "styleClass": "text-primary",
+        "description": "user-escalated-description",
+        "hidden": true
+    },
+    "cancelled": {
+        "label": "cancelled",
+        "styleClass": "text-faded",
+        "description": "user-cancelled-description",
+        "hidden": true
+    },
+    "banned": {
+        "label": "banned",
+        "description": "user-banned-description"
+    },
+    "under_verification": {
+        "label": "waiting-for-verification",
+        "styleClass": "text-faded",
+        "description": "user-under-verification-description"
+    }
+}
diff --git a/src/i18n/en/index.json b/src/i18n/en/index.json
@@ -58,5 +58,26 @@
   "table_title_f_filter": "FFilter Component Demo",
   "=": "is",
   "multiselect": "Multiselect option on",
-  "with_integer_rule": "rule set to accept integer only"
+  "with_integer_rule": "rule set to accept integer only",
+  "resubmitted": "Resubmitted",
+  "pending": "Pending",
+  "accepted": "Accepted",
+  "escalated": "Escalated",
+  "cancelled": "Cancelled",
+  "banned": "Banned",
+  "updated": "Updated",
+  "released": "Released",
+  "claim-created": "Claim Created",
+
+  "user-resubmitted-description": "Resubmitted user applications.",
+  "user-pending-description": "Newly registered users.",
+  "user-accepted-description": "Users that are accepted to {{ app_name }} after reviewing their sample videos.",
+  "user-rejected-description": "Users that are rejected from {{ app_name }}. The reasons for rejection are specified.",
+  "user-escalated-description": "Users that required more investigation.",
+  "user-cancelled-description": "Users that cancelled their application.",
+  "user-banned-description": "Users that are banned from {{ app_name }}",
+  "waiting-for-verification": "Waiting for verification",
+  "user-under-verification-description": "Users that are under verification in {{ app_name }}",
+  "updated-profile": "Updated Profile"
+
 }
diff --git a/src/mixins/utils.js b/src/mixins/utils.js
@@ -3,6 +3,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import pageConfig from 'src/config/pagination';
+import config from 'src/config';
 
 export function arrayToOptions(inputArray, prefix = null) {
     return _.map(inputArray, value => ({
@@ -23,7 +24,7 @@ export function valueToLabel(value, prefix = '') {
     return `${prefix}${_.kebabCase(value)}`;
 }
 
-export function humanizedDate(date, format = config.DATE_FORMAT.FULL_DATE) {
+export function humanizedDate(date, format = config.date.formats.FULL_DATE) {
     return date ? moment.utc(date).local().format(format) : '';
 }
 

diff --git a/src/pages/FHistoryDemo.vue b/src/pages/FHistoryDemo.vue
@@ -0,0 +1,114 @@
+<template>
+    <div class="full-width row wrap justify-center items-start">
+        <div class="history-container">
+            <f-history 
+                :history="history_sample"
+                :status-types="status_types"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+    import _ from 'lodash';
+    import claim_status from 'src/data/claim-history-types.json';
+    import user_status from 'src/data/user-status-types.json';
+
+    export default {
+        name : 'FHistoryDemo',
+        data () {
+            return {
+                status_types: _.merge(claim_status, user_status),
+                history_sample: {
+                    items: [
+                        {
+                            id: 0,
+                            reviewerId: 531,
+                            notes: 'Updated application',
+                            createdAt: '2021-08-27T22:26:52.000Z',
+                            status: 'pending',
+                            reviewerName: 'John Doe'
+                        },
+                        {
+                            id: 1,
+                            reviewerId: 531,
+                            notes: 'Updated application',
+                            createdAt: '2021-08-25T22:29:52.000Z',
+                            status: 'accepted',
+                            reviewerName: 'John Doe'
+                        },
+                        {
+                            id: 2,
+                            reviewerId: 531,
+                            notes: 'Test by jonel',
+                            status: 'resubmitted',
+                            createdAt: '2021-02-18T05:03:04.000Z',
+                            reviewerName: 'John Doe'
+                        },
+                        {
+                            id: 3,
+                            reviewerId: 531,
+                            notes: 'Lorem amet consectetur adipisicing elit. Ullam possimus reiciendis nam dolor quia! Quidem, unde. orem amet consectetur adipisicing elit. Ullam possimus reiciendis nam dolor quia! Quidem, unde.',
+                            status: 'rejected',
+                            createdAt: '2021-02-16T10:03:04.000Z',
+                            reviewerName: 'John Doe'
+                        },
+                        {
+                            id: 4,
+                            reviewerId: 531,
+                            notes: 'sit amet consectetur adipisicing elit. Ullam possimus reiciendis nam dol orem amet consectetur adipisicing elit. Ullam possimus reiciendis nam dolor quia! Quidem, unde.orem amet consectetur adipisicing elit. Ullam possimus reiciendis nam dolor quia! Quidem, unde.',
+                            status: 'escalated',
+                            createdAt: '2021-02-16T09:05:04.000Z',
+                            reviewerName: 'John Doe'
+                        },
+                        {
+                            id: 5,
+                            reviewerId: 531,
+                            notes: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam possimus reiciendis nam dolor quia! Quidem, unde.',
+                            status: 'cancelled',
+                            createdAt: '2021-02-16T09:03:04.000Z',
+                            reviewerName: 'John Doe'
+                        },
+                        {
+                            id: 6,
+                            reviewerId: 531,
+                            notes: 'Lorem ipsum dolor sit amet .',
+                            status: 'banned',
+                            createdAt: '2021-02-16T08:13:04.000Z',
+                            reviewerName: 'John Doe'
+                        },
+                        {
+                            id: 7,
+                            reviewerId: 531,
+                            notes: 'Ullam possimus reiciendis nam dolor quia! Quidem, unde. orem amet consectetur adipisicing elit. Ullam possimus reiciendis nam dolor quia! Quidem, unde.orem amet consectetur adipisicing elit. Ullam possimus reiciendis nam dolor quia! Quidem, unde.',
+                            status: 'under_verification',
+                            createdAt: '2021-02-16T07:03:04.000Z',
+                            reviewerName: 'John Doe'
+                        },
+                        {
+                            claimId: "zZWUYz95",
+                            createdAt: "2020-11-01T17:32:42.000Z",
+                            status: "claim-created"
+                        },
+                        {
+                            claimId: "R93HZYRR",
+                            createdAt: "2020-10-01T14:30:42.000Z",
+                            status: "release"
+                        },
+                        {
+                            claimId: "nkGWV67a",
+                            createdAt: "2020-09-15T10:32:42.000Z",
+                            status: "update"
+                        },
+                    ],
+                    total: 11
+                }
+            };
+        },
+    };
+</script>
+
+<style lang="stylus" scoped>
+.history-container
+    width: 650px
+</style>
diff --git a/src/router/routes.js b/src/router/routes.js
@@ -2,6 +2,7 @@ import TableWithTabs from 'pages/TableWithTabs';
 import TableWithTabs2 from 'pages/TableWithTabs2';
 import TableWithoutTab from 'pages/TableWithoutTab';
 import FFilterDemo from 'pages/FFilterDemo';
+import FHistoryDemo from 'pages/FHistoryDemo';
 import Logout from 'components/Logout';
 import LogoutPage from 'pages/Logout';
 import LandingPage from 'pages/Landing';
@@ -33,6 +34,11 @@ export default [
         name: 'ffilter_demo',
         component: FFilterDemo
     },
+    {
+        path: '/fhistory-demo',
+        name: 'fhistory_demo',
+        component: FHistoryDemo
+    },
     {
         path: '/logout',
         name: 'logout',