Dev-4216 Platform > Freedom Components > FFilter Demo Page (#46)

* feat: added demo page for reusable ffilter component

.gitignore

@@ -75,5 +75,6 @@ dist/
 
 # esdoc
 docs/
+
 /src-pwa/pwa-flag.d.ts
 /src/store/store-flag.d.ts

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"
+        "postinstall": "npm i --no-save ./node_modules/quasar-app-extension-freedom-components/f-table ./node_modules/quasar-app-extension-freedom-components/f-filter"
     },
     "dependencies": {
         "@panter/vue-i18next": "^0.15.1",
@@ -30,12 +30,12 @@
         "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",
+        "quasar-app-extension-freedom-components": "git+https://freedom-components-readonly:[email protected]/anyTV/incubator/freedom-components.git#v1.7.5",
         "vue": "2.6.11",
         "vue-gtm": "3.1.0-vue2",
         "vue-router": "^3.0.1",
         "vue-template-compiler": "2.6.11",
-        "vuelidate": "^0.6.2",
+        "vuelidate": "^0.7.6",
         "vuex": "^3.0.1"
     },
     "dependenciesComments": {

quasar.conf.js

@@ -16,7 +16,7 @@ module.exports = function (ctx) {
             'notify',
             'admin-api',
             // 'google-api',
-            // 'vuelidate',
+            'vuelidate',
             'vue-gtm',
 
             /**
@@ -81,18 +81,32 @@ module.exports = function (ctx) {
             components: [
                 'QAvatar',
                 'QBadge',
+                'QBar',
                 'QBreadcrumbs',
                 'QBreadcrumbsEl',
                 'QBtn',
                 'QBtnToggle',
+                'QCard',
+                'QCardActions',
+                'QCardSection',
+                'QChip',
+                'QDate',
                 'QFooter',
                 'QHeader',
                 'QIcon',
+                'QInput',
+                'QItem',
+                'QItemLabel',
+                'QItemSection',
                 'QLayout',
                 'QList',
+                'QMenu',
+                'QOptionGroup',
                 'QPagination',
+                'QPopupProxy',
                 'QRadio',
                 'QSelect',
+                'QSeparator',
                 'QSpace',
                 'QTab',
                 'QTabPanel',

quasar.extensions.json

@@ -1,3 +1,4 @@
 {
-  "f-table": {}
+  "f-table": {},
+  "f-filter": {}
 }

src/config/date.js

@@ -0,0 +1,5 @@
+export default {
+    formats: {
+        ISO_DATE: 'YYYY-MM-DD',
+    },
+};

src/config/index.js

@@ -4,6 +4,7 @@
  * Build configurations should be placed in /config directory outside the /src directory.
  */
 import API from './api';
+import date from './date';
 
 export default {
     API,
@@ -19,5 +20,7 @@ export default {
         enabled: true,
         debug: false,
         trackOnNextTick: false
-    }
+    },
+
+    date,
 };

src/helpers/custom-validators.js

@@ -0,0 +1,16 @@
+'use strict';
+
+import _ from 'lodash';
+import moment from 'moment';
+import dateConfig from 'src/config/date';
+
+// Date validator with strict formatting rule to prevent falling back to js Date validation
+// which is not reliable accross browsers
+// https://momentjs.com/guides/#/warnings/js-date/
+export const isValidStrictDateFormat = value => {
+    if (!value) {
+        return false;
+    }
+
+    return moment(value, dateConfig.formats.ISO_DATE, true).isValid();
+};

src/i18n/en/index.json

@@ -44,5 +44,19 @@
   "oauth_denied_error": "Failed authentication. Please try again.",
   "server_error_notice": "There was a problem in our server. Try again later",
   "logged_out_notice": "Successfully logged out",
-  "quasar_boilerplate": "Quasar Boilerplate"
+  "quasar_boilerplate": "Quasar Boilerplate",
+  "add_filter": "Add filter",
+  "apply": "Apply",
+  "user_id": "User ID",
+  "filter_list_by": "Filter list by",
+  "birthday": "Birthday",
+  "birth_date": "Date of birth",
+  "likes": "Likes",
+  "user_type": "User type",
+  "status": "Status",
+  "with_format": "Returns primitive value (overrides default behavior to return array)",
+  "table_title_f_filter": "FFilter Component Demo",
+  "=": "is",
+  "multiselect": "Multiselect option on",
+  "with_integer_rule": "rule set to accept integer only"
 }

src/mixins/utils.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import _ from 'lodash';
+import moment from 'moment';
 import pageConfig from 'src/config/pagination';
 
 export function arrayToOptions(inputArray, prefix = null) {
@@ -22,6 +23,10 @@ export function valueToLabel(value, prefix = '') {
     return `${prefix}${_.kebabCase(value)}`;
 }
 
+export function humanizedDate(date, format = config.DATE_FORMAT.FULL_DATE) {
+    return date ? moment.utc(date).local().format(format) : '';
+}
+
 export default {
     data() {
         return {