Remove moment usage from main codebase

frontend/views/containers/payments/MonthOverview.vue

@@ -3,7 +3,7 @@
   i18n.c-summary-title.is-title-4(
     tag='h4'
     data-test='thisMonth'
-    :args='{ month: moment(new Date()).format("MMMM") }'
+    :args='{ month: humanDate(Date.now(), { month: "long" }) }'
   ) {month} overview
 
   .c-summary-item(
@@ -27,7 +27,7 @@ import currencies from '@view-utils/currencies.js'
 import { mapGetters } from 'vuex'
 import ProgressBar from '@components/graphs/Progress.vue'
 import L from '@view-utils/translations.js'
-import moment from 'moment'
+import { humanDate } from '@view-utils/humanDate.js'
 
 export default {
   name: 'MonthOverview',
@@ -74,7 +74,7 @@ export default {
     }
   },
   methods: {
-    moment,
+    humanDate,
     // TEMP
     statusIsSent (user) {
       return ['completed', 'pending'].includes(user.status)

frontend/views/containers/payments/PaymentDetail.vue

@@ -10,10 +10,10 @@ modal-template(ref='modal' v-if='payment')
   ul.c-payment-list
     li.c-payment-list-item
       i18n.has-text-1(tag='label') Date & Time
-      strong {{ moment(payment.date).format('hh:mm - MMMM DD, YYYY') }}
+      strong {{ humanDate(this.payment.date, { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }) }}
     li.c-payment-list-item
       i18n.has-text-1(tag='label') Relative to
-      strong {{ moment(payment.relativeTo).format('MMMM')}}
+      strong {{ humanDate(payment.relativeTo, { month: 'long' }) }}
     li.c-payment-list-item
       i18n.has-text-1(tag='label') Mincome at the time
       strong {{ currency(groupSettings.mincomeAmount) }}
@@ -31,11 +31,11 @@ modal-template(ref='modal' v-if='payment')
 <script>
 import { mapGetters } from 'vuex'
 import L from '@view-utils/translations.js'
-import moment from 'moment'
 import sbp from '~/shared/sbp.js'
 import { CLOSE_MODAL } from '@utils/events.js'
 import ModalTemplate from '@components/modal/ModalTemplate.vue'
 import currencies from '@view-utils/currencies.js'
+import { humanDate } from '@view-utils/humanDate.js'
 
 export default {
   name: 'PaymentDetail',
@@ -76,7 +76,7 @@ export default {
       console.log('Todo: Implement cancel payment')
       this.closeModal()
     },
-    moment
+    humanDate
   },
   validations: {
     form: {}

frontend/views/containers/payments/PaymentsList.vue

@@ -30,7 +30,7 @@ table.table.table-in-card.c-payments(:class='{"is-editing": paymentsType === "ed
         // TODO: replace condition to indicate whether or not the payment date is < or > than the current date using payment.paymentStatusText
         i18n.c-user-month(
           :class='index === 0 ? "has-text-1" : "pill is-danger"'
-          :args='{date: moment(payment.date).format("MMMM DD")}'
+          :args='{date: dueDate(payment.date) }'
         ) Due {date}
       td.c-payments-amount(v-if='paymentsType !== "edit"')
 
@@ -66,7 +66,7 @@ table.table.table-in-card.c-payments(:class='{"is-editing": paymentsType === "ed
 
       td
         .c-actions
-          .c-actions-month(:class='!(index !== 0 && paymentsType === "todo") ? "has-text-1" : "pill is-danger"') {{ moment(payment.date).format('MMMM D') }}
+          .c-actions-month(:class='!(index !== 0 && paymentsType === "todo") ? "has-text-1" : "pill is-danger"') {{ dueDate(payment.date) }}
           payments-list-menu.c-actions-menu(
             v-if='paymentsType !== "edit"'
             :payment='payment'
@@ -94,8 +94,7 @@ import AvatarUser from '@components/AvatarUser.vue'
 import Tooltip from '@components/Tooltip.vue'
 import PaymentsListMenu from '@containers/payments/PaymentsListMenu.vue'
 import currencies from '@view-utils/currencies.js'
-import moment from 'moment'
-
+import { humanDate } from '@view-utils/humanDate.js'
 export default {
   name: 'PaymentsList',
   components: {
@@ -119,7 +118,6 @@ export default {
   },
   data () {
     return {
-      moment,
       // Temp
       tableChecked: false
     }
@@ -157,6 +155,9 @@ export default {
       this.payments.map(payment => {
         payment.checked = this.tableChecked
       })
+    },
+    dueDate (datems) {
+      return humanDate(datems, { month: 'short', day: 'numeric' })
     }
   }
 }

frontend/views/utils/humanDate.js

@@ -0,0 +1,5 @@
+const locale = navigator.languages ? navigator.languages[0] : navigator.language
+
+export function humanDate (datems = Date.now(), opts = {}) {
+  return new Date(datems).toLocaleDateString(locale, opts)
+}