mahathir/#105/add cache and right button disable

src/localDatabase/donationCountYearMonth.ts

@@ -0,0 +1,22 @@
+import { set, get, remove } from '@/localDatabase/helpers'
+
+export type YearMonthCountType = {
+  [year: string]: {
+      [month: string]: number;
+  };
+};
+
+const storeKey = 'donationCountYearMonth'
+const save = (donationCountYearMonth: YearMonthCountType) => {
+    set(storeKey, donationCountYearMonth)
+}
+const load = () => {
+    return get(storeKey)
+}
+const clear = () => {
+  remove(storeKey)
+}
+
+export default {
+    save, load, clear
+}

src/localDatabase/frontendSettings.ts

@@ -1,12 +1,12 @@
-import { setWithExpiry, getWithExpiry } from '@/localDatabase/helpers'
+import { setWithExpiry, getWithExpiry, remove } from '@/localDatabase/helpers'
 const save = (frontendSettings: {version: string}) => {
   setWithExpiry('frontendSettings', frontendSettings, 60 * 1000)
 }
 const load = () => {
   return getWithExpiry('frontendSettings')
 }
 const clear = () => {
-  localStorage.removeItem('frontendSettings')
+  remove('frontendSettings')
 }
 
 export default {

src/localDatabase/helpers.ts

@@ -10,6 +10,10 @@ export const setWithExpiry = (key: string, value: unknown, ttl: number) => {
   localStorage.setItem(key, JSON.stringify(item))
 }
 
+export const remove = (key: string) => {
+  localStorage.removeItem(key)
+}
+
 export const set = (key: string, value: unknown) =>{
   localStorage.setItem(key, JSON.stringify({value}))
 }

src/localDatabase/index.ts

@@ -1,21 +1,21 @@
-import emailRecovery from './emailRecovery'
 import token from './token'
 import theme from './theme'
 import members from './members'
 import publicContacts from './publicContacts'
 import frontendSettings from './frontendSettings'
 import myProfile from "./myProfile";
+import donationCountYearMonth from './donationCountYearMonth'
 const reset = () => {
   localStorage.clear()
 }
 
 export default {
-  emailRecovery,
   token,
   theme,
   members,
   publicContacts,
   frontendSettings,
   myProfile,
+  donationCountYearMonth,
   reset
 }

src/localDatabase/members.ts

@@ -1,4 +1,4 @@
-import { setWithExpiry, getWithExpiry } from './helpers'
+import { setWithExpiry, getWithExpiry, remove } from './helpers'
 import {MemberAPIResponseInterface} from "@/store/members";
 const save = (members: MemberAPIResponseInterface) => {
   setWithExpiry('members', members, 60 * 1000)
@@ -7,7 +7,7 @@ const load = () => {
   return getWithExpiry('members')
 }
 const clear = () => {
-  localStorage.removeItem('members')
+  remove('members')
 }
 
 export default {

src/localDatabase/myProfile.ts

@@ -1,4 +1,4 @@
-import { set, get } from '@/localDatabase/helpers'
+import { set, get, remove } from '@/localDatabase/helpers'
 import {MyProfileStateInterface} from "@/store/myprofile";
 
 const storeKey = 'myProfile'
@@ -9,7 +9,7 @@ const load = () => {
     return get(storeKey)
 }
 const clear = () => {
-    localStorage.removeItem(storeKey)
+    remove(storeKey)
 }
 
 export default {

src/localDatabase/publicContacts.ts

@@ -1,4 +1,4 @@
-import { setWithExpiry, getWithExpiry } from './helpers'
+import { setWithExpiry, getWithExpiry, remove } from './helpers'
 import {PublicContactInterface} from "@/store/publicContacts";
 const save = (members: PublicContactInterface[]) => {
   setWithExpiry('publicContacts', members, 60 * 1000)
@@ -7,7 +7,7 @@ const load = () => {
   return getWithExpiry('publicContacts')
 }
 const clear = () => {
-  localStorage.removeItem('publicContacts')
+  remove('publicContacts')
 }
 
 export default {

src/views/SignInCover.vue

@@ -39,11 +39,11 @@
                         {{$getEnvironmentName()==="production"?"production":$getEnvironmentName()}}
                       </v-chip>
                     </div>
-                    <div v-if="chartData" :key="'barchartKey'">
+                    <div v-if="!donationCountYearMonthLoader" :key="'barchartKey'">
                       <v-btn icon color="primary" @click="populateBefore">
                         <v-icon>mdi-arrow-left</v-icon>
                       </v-btn>
-                      <v-btn icon color="primary" @click="populateNext">
+                      <v-btn v-if="isRightButtonEnabled" icon color="primary" @click="populateNext">
                         <v-icon>mdi-arrow-right</v-icon>
                       </v-btn>
                       <BarChart
@@ -185,6 +185,8 @@ import { handleGETLogsDonations } from '@/api'
 import { Bar as BarChart } from 'vue-chartjs'
 import LoadingMessage from '@/components/LoadingMessage.vue'
 import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Filler } from 'chart.js'
+import localDatabase from '@/localDatabase'
+
 ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Filler)
 export default {
   name: 'SignInCover',
@@ -196,7 +198,13 @@ export default {
       password: '',
       passwordFlag: false,
 
-      chartData: null,
+      todayMonth: new Date().getMonth() + 1,
+      todayYear: new Date().getFullYear(),
+
+      chartData: {
+        labels: [],
+        datasets: []
+      },
       chartOptions: {
         responsive: true,
         scales: {
@@ -218,7 +226,9 @@ export default {
       },
       rawCountByYearMonth: {},
       currentYear: 0,
-      currentMonth: 0
+      currentMonth: 0,
+
+      donationCountYearMonthLoader: false
     }
   },
   validations: {
@@ -238,6 +248,9 @@ export default {
     getBuildTime () {
       return new Date(document.documentElement.dataset.buildTimestampUtc).toLocaleString()
     },
+    isRightButtonEnabled(){
+      return !(this.currentMonth === this.todayMonth && this.currentYear === this.todayYear)
+    },
     phoneErrors () {
       const errors = []
       if (!this.$v.phone.$dirty) return errors
@@ -302,14 +315,28 @@ export default {
       this.chartData = chartData
     },
     async getDonationStats(){
-      const response = await handleGETLogsDonations()
-      if(response.status!==200)return
-      this.rawCountByYearMonth = response.data.countByYearMonth
-
       const currentDate = new Date()
       this.currentYear = currentDate.getFullYear()
       this.currentMonth = currentDate.getMonth() + 1
-      this.populateSixMonths(this.currentYear, this.currentMonth)
+
+      const resultOfLDB = localDatabase.donationCountYearMonth.load()
+      if(resultOfLDB.status == 'ERROR'){
+        this.donationCountYearMonthLoader = true
+      } else {
+        this.rawCountByYearMonth = resultOfLDB.data
+        this.populateSixMonths(this.currentYear, this.currentMonth)
+      }
+
+      handleGETLogsDonations().then((response)=>{
+        if(response.status!==200){
+          return
+        }
+        this.rawCountByYearMonth = response.data.countByYearMonth
+        localDatabase.donationCountYearMonth.save(this.rawCountByYearMonth)
+        this.populateSixMonths(this.currentYear, this.currentMonth)
+      }).finally(()=>{
+        this.donationCountYearMonthLoader = false
+      })
     },
     getRandomColor(transparency=1) {
       let color = 'rgba(';

src/views/Statistics/LogsByDate.vue

@@ -55,7 +55,6 @@ export default {
       this.$router.push({ name: 'NotFound' })
       return
     }
-
     this.logCountLoader = true
     const response = await handleGETLogs()
     this.logCountLoader = false