Initial project

src/@core/utils/filter.js

@@ -0,0 +1,54 @@
+import { isToday } from './utils'
+
+export const kFormatter = num => (num > 999 ? `${(num / 1000).toFixed(1)}k` : num)
+
+export const title = (value, replacer = ' ') => {
+  if (!value) return ''
+  const str = value.toString()
+
+  const arr = str.split(replacer)
+  const capitalizedArray = []
+  arr.forEach(word => {
+    const capitalized = word.charAt(0).toUpperCase() + word.slice(1)
+    capitalizedArray.push(capitalized)
+  })
+  return capitalizedArray.join(' ')
+}
+
+export const avatarText = value => {
+  if (!value) return ''
+  const nameArray = value.split(' ')
+  return nameArray.map(word => word.charAt(0).toUpperCase()).join('')
+}
+
+/**
+ * Format and return date in Humanize format
+ * Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
+ * Intl Constructor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
+ * @param {String} value date to format
+ * @param {Object} formatting Intl object to format with
+ */
+export const formatDate = (value, formatting = { month: 'short', day: 'numeric', year: 'numeric' }) => {
+  if (!value) return value
+  return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
+}
+
+/**
+ * Return short human friendly month representation of date
+ * Can also convert date to only time if date is of today (Better UX)
+ * @param {String} value date to format
+ * @param {Boolean} toTimeForCurrentDay Shall convert to time if day is today/current
+ */
+export const formatDateToMonthShort = (value, toTimeForCurrentDay = true) => {
+  const date = new Date(value)
+  let formatting = { month: 'short', day: 'numeric' }
+
+  if (toTimeForCurrentDay && isToday(date)) {
+    formatting = { hour: 'numeric', minute: 'numeric' }
+  }
+
+  return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
+}
+
+// Strip all the tags from markup and return plain text
+export const filterTags = value => value.replace(/<\/?[^>]+(>|$)/g, '')

src/@core/utils/utils.js

@@ -0,0 +1,73 @@
+import router from '@/router'
+// eslint-disable-next-line object-curly-newline
+import { reactive, getCurrentInstance, watch, toRefs } from '@vue/composition-api'
+
+export const isObject = obj => typeof obj === 'object' && obj !== null
+
+export const isToday = date => {
+  const today = new Date()
+  return (
+    /* eslint-disable operator-linebreak */
+    date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+    /* eslint-enable */
+  )
+}
+
+const getRandomFromArray = array => array[Math.floor(Math.random() * array.length)]
+
+// ? Light and Dark variant is not included
+// prettier-ignore
+export const getRandomBsVariant = () => getRandomFromArray(['primary', 'secondary', 'success', 'warning', 'danger', 'info'])
+
+export const isDynamicRouteActive = route => {
+  const { route: resolvedRoute } = router.resolve(route)
+  return resolvedRoute.path === router.currentRoute.path
+}
+
+// Thanks: https://medium.com/better-programming/reactive-vue-routes-with-the-composition-api-18c1abd878d1
+export const useRouter = () => {
+  const vm = getCurrentInstance().proxy
+  const state = reactive({
+    route: vm.$route,
+  })
+
+  watch(
+    () => vm.$route,
+    r => {
+      state.route = r
+    },
+  )
+
+  return { ...toRefs(state), router: vm.$router }
+}
+
+/**
+ * This is just enhancement over Object.extend [Gives deep extend]
+ * @param {target} a Object which contains values to be overridden
+ * @param {source} b Object which contains values to override
+ */
+// export const objectExtend = (a, b) => {
+//   // Don't touch 'null' or 'undefined' objects.
+//   if (a == null || b == null) {
+//     return a
+//   }
+
+//   Object.keys(b).forEach(key => {
+//     if (Object.prototype.toString.call(b[key]) === '[object Object]') {
+//       if (Object.prototype.toString.call(a[key]) !== '[object Object]') {
+//         // eslint-disable-next-line no-param-reassign
+//         a[key] = b[key]
+//       } else {
+//         // eslint-disable-next-line no-param-reassign
+//         a[key] = objectExtend(a[key], b[key])
+//       }
+//     } else {
+//       // eslint-disable-next-line no-param-reassign
+//       a[key] = b[key]
+//     }
+//   })
+
+//   return a
+// }

src/@core/utils/validations/validations.js

@@ -0,0 +1,173 @@
+import { extend, localize } from 'vee-validate'
+import {
+  required as rule_required,
+  email as rule_email,
+  min as rule_min,
+  confirmed as rule_confirmed,
+  regex as rule_regex,
+  between as rule_between,
+  alpha as rule_alpha,
+  integer as rule_integer,
+  digits as rule_digits,
+  alpha_dash as rule_alpha_dash,
+  alpha_num as rule_alpha_num,
+  length as rule_length,
+} from 'vee-validate/dist/rules'
+import ar from 'vee-validate/dist/locale/ar.json'
+import en from 'vee-validate/dist/locale/en.json'
+
+// eslint-disable-next-line object-curly-newline
+import { validatorPositive, validatorUrlValidator, validatorPassword, validatorCreditCard } from './validators'
+
+// ////////////////////////////////////////////////////////
+// General
+// ////////////////////////////////////////////////////////
+
+export const required = extend('required', rule_required)
+
+export const email = extend('email', rule_email)
+
+export const min = extend('min', rule_min)
+
+export const confirmed = extend('confirmed', rule_confirmed)
+
+export const regex = extend('regex', rule_regex)
+
+export const between = extend('between', rule_between)
+
+export const alpha = extend('alpha', rule_alpha)
+
+export const integer = extend('integer', rule_integer)
+
+export const digits = extend('digits', rule_digits)
+
+export const alphaDash = extend('alpha-dash', rule_alpha_dash)
+
+export const alphaNum = extend('alpha-num', rule_alpha_num)
+
+export const length = extend('length', rule_length)
+
+export const positive = extend('positive', {
+  validate: validatorPositive,
+  message: 'Please enter positive number!',
+})
+
+export const credit = extend('credit-card', {
+  validate: validatorCreditCard,
+  message: 'It is not valid credit card!',
+})
+
+export const password = extend('password', {
+  validate: validatorPassword,
+  message: 'Your {_field_} must contain at least one uppercase, one lowercase, one special character and one digit',
+})
+
+export const url = extend('url', {
+  validate: validatorUrlValidator,
+  message: 'URL is invalid',
+})
+
+// Install English and Arabic localizations.
+localize({
+  en: {
+    messages: en.messages,
+    names: {
+      email: 'Email',
+      password: 'Password',
+    },
+    fields: {
+      password: {
+        min: '{_field_} is too short, you want to get hacked?',
+      },
+    },
+  },
+  ar: {
+    messages: ar.messages,
+    names: {
+      email: 'البريد الإلكتروني',
+      password: 'كلمة السر',
+    },
+    fields: {
+      password: {
+        min: 'كلمة السر قصيرة جداً سيتم اختراقك',
+      },
+    },
+  },
+})
+// ////////////////////////////////////////////////////////
+// NOTE:
+// Quasar validation for reference only
+// Remove this note once development is finished and make sure to
+// to convert all of them in veevalidate version
+// ////////////////////////////////////////////////////////
+
+// export const required = (val) => {
+//   return (val && val.length > 0) || '*Field is required'
+// }
+
+// export const required_obj = (obj) => {
+//   if (obj === null || obj === undefined) return '*Field is required'
+//   return (Object.entries(obj).length > 0 && obj.constructor === Object) || '*Field is required'
+// }
+
+// export const no_blank_spaces_arr = (arr) => {
+//   return arr.every(val => (val.trim() && val.trim().length > 0)) || 'Blank Spaces are not allowed'
+// }
+
+// export const url = val => {
+//   // If blank return
+//   if (val === undefined || val === null || val.length === 0) return true
+
+//   // Used
+//   // https://stackoverflow.com/questions/4314741/url-regex-validation
+
+//   // Other
+//   // https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
+//   // https://www.w3resource.com/javascript-exercises/javascript-regexp-exercise-9.php
+//   // https://www.geeksforgeeks.org/how-to-validate-url-using-regular-expression-in-javascript/
+
+//   /* eslint-disable no-useless-escape */
+//   const re = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/
+//   /* eslint-enable no-useless-escape */
+//   return re.test(val) || 'URL is invalid'
+// }
+
+// export const date = val => {
+
+//   // If blank return
+//   if (val === undefined || val === null || val.length === 0) return true
+
+//   // https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/patterns.js
+//   return /^-?[\d]+\/[0-1]\d\/[0-3]\d$/.test(val) || 'Date is invalid'
+// }
+
+// export const max = (val, max) => {
+
+//   // If blank return
+//   if (val === undefined || val === null) return true
+
+//   return val.length <= max || `More than ${max} characters are not allowed`
+// }
+
+// export const max_arr = (val, max) => {
+//   return val.length <= max || `More than ${max} values are not allowed`
+// }
+
+// export const min = (val, min) => {
+
+//   // If blank return
+//   if (val === undefined || val === null || val.length === 0) return true
+
+//   return val.length >= min || `Minimum ${min} characters are required`
+// }
+
+// export const num_range = (val, min, max) => {
+
+//   // If blank return
+//   if (val === undefined || val === null || val.length === 0) return true
+
+//   const msg = 'Value is invalid'
+//   if (min === null) return val <= max || msg
+//   else if (max === null) return val >= min || msg
+//   else return (val >= min && val <= max) || msg
+// }

src/@core/utils/validations/validators.js

@@ -0,0 +1,32 @@
+export const validatorPositive = value => {
+  if (value >= 0) {
+    return true
+  }
+  return false
+}
+
+export const validatorPassword = password => {
+  /* eslint-disable no-useless-escape */
+  const regExp = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%&*()]).{8,}/
+  /* eslint-enable no-useless-escape */
+  const validPassword = regExp.test(password)
+  return validPassword
+}
+
+export const validatorCreditCard = creditnum => {
+  /* eslint-disable no-useless-escape */
+  const cRegExp = /^(?:3[47][0-9]{13})$/
+  /* eslint-enable no-useless-escape */
+  const validCreditCard = cRegExp.test(creditnum)
+  return validCreditCard
+}
+
+export const validatorUrlValidator = val => {
+  if (val === undefined || val === null || val.length === 0) {
+    return true
+  }
+  /* eslint-disable no-useless-escape */
+  const re = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/
+  /* eslint-enable no-useless-escape */
+  return re.test(val)
+}