Merge pull request #107 from Badhan-BUET-Zone/test-branch

Test branch

src/api/index.ts

@@ -195,16 +195,7 @@ const handleGETDonorsDuplicate = async (payload: GETDonorsDuplicatePayloadInterf
     return (e as BadhanAxiosErrorInterface<BadhanAxiosResponseDataInterface>).response
   }
 }
-export interface GETLogsByDatePayloadInterface {
-  timeStamp: number
-}
-const handleGETLogsByDate = async (payload: GETLogsByDatePayloadInterface) => {
-  try {
-    return await badhanAxios.get(`/log/date/${payload.timeStamp}`)
-  } catch (e) {
-    return (e as BadhanAxiosErrorInterface<BadhanAxiosResponseDataInterface>).response
-  }
-}
+
 const handleGETLogs = async () => {
   try {
     return await badhanAxios.get('/log')
@@ -351,17 +342,6 @@ const handleGETDonorDesignatedAll = async () => {
     return (e as BadhanAxiosErrorInterface<BadhanAxiosResponseDataInterface>).response
   }
 }
-export interface GETLogsByDateAndDonorPayloadInterface {
-  timeStamp: number
-  donorId: string
-}
-const handleGETLogsByDateAndDonor = async (payload: GETLogsByDateAndDonorPayloadInterface) => {
-  try {
-    return await badhanAxios.get(`/log/date/${payload.timeStamp}/donorId/${payload.donorId}`)
-  } catch (e) {
-    return (e as BadhanAxiosErrorInterface<BadhanAxiosResponseDataInterface>).response
-  }
-}
 export interface PATCHDonorsCommentPayloadInterface {
   donorId: string
   comment: string
@@ -573,7 +553,6 @@ export {
   handleDELETEDonors,
   handlePOSTDonorsPasswordRequest,
   handleGETDonorsDuplicate,
-  handleGETLogsByDate,
   handleGETLogs,
   handleDELETESignOut,
   handleDELETESignOutAll,
@@ -589,7 +568,6 @@ export {
   handleDELETELogs,
   handleGETDonorDesignatedAll,
   handleGETCredits,
-  handleGETLogsByDateAndDonor,
   handlePATCHDonorsComment,
   handlePATCHDonors,
   handlePATCHAdmins,

src/components/Statistics/DateLog.vue

@@ -1,53 +1,56 @@
 <template>
   <v-card flat>
     <v-card-title>
-      {{ logCount.dateString }}
+      {{ groupedLog.dateString }}
     </v-card-title>
     <v-card-subtitle>
-      Activity count: {{ logCount.totalLogCount }}<br>
-      Active user count: {{logCount.activeUserCount}}
+      Activity count: {{ groupedLog.group.length }}<br>
+      Active user count: {{ logsGroupedPerPerson.length }}
     </v-card-subtitle>
     <v-card-text>
-      <v-btn :id="`dateLogDetailsButtonId_${logCount.dateString}`" rounded color="primary" x-small @click="detailsClick" v-if="dateLogs.length===0 && !dateLogsLoading">
+      <v-btn v-if="!dateLogsLoaded" :id="`dateLogDetailsButtonId_${groupedLog.dateString}`" rounded color="primary" x-small @click="detailsClick">
         Details
       </v-btn>
-      <LoadingMessage v-if="dateLogsLoading"/>
-      <div v-for="(dateLog,index) in dateLogs" :key="index">
-        <PersonLog :date-log="dateLog" :date-string="logCount.dateString"></PersonLog>
+      <div v-else>
+        <div v-for="(log,index) in logsGroupedPerPerson" :key="index">
+          <PersonLog :date-log="log"></PersonLog>
+        </div>
       </div>
     </v-card-text>
   </v-card>
 </template>
 
 <script>
-import { handleGETLogsByDate } from '@/api'
 import PersonLog from './PersonLog'
-import LoadingMessage from '@/components/LoadingMessage.vue'
 
 export default {
-  props: ['logCount'],
+  props: ['groupedLog'],
   name: 'DateLog',
 
   data: function () {
     return {
-      dateLogs: [],
-      dateLogsLoading: false
+      logsGroupedPerPerson: [],
+      dateLogsLoaded: false
     }
   },
   components: {
-    LoadingMessage,
     PersonLog
   },
   methods: {
     async detailsClick () {
-      const splitDate = this.logCount.dateString.split('-')
-      const timeStamp = new Date(parseInt(splitDate[0]), parseInt(splitDate[1]) - 1, parseInt(splitDate[2])).getTime()
-      this.dateLogsLoading = true
-      const response = await handleGETLogsByDate({ timeStamp })
-      this.dateLogsLoading = false
-      if (response.status !== 200) return
-      this.dateLogs = response.data.logs
+      this.dateLogsLoaded = true
     }
+  },
+  mounted(){
+    this.logsGroupedPerPerson = this.groupedLog.group.reduce((acc, val) => {
+      let o = acc.find((obj) => obj.name === val.name);
+      if (o) {
+        o.group.push({operation: val.operation, date: val.date});
+      } else {
+        acc.push({name: val.name, hall: val.hall, group: [{operation: val.operation, date: val.date}]});
+      }
+      return acc;
+    }, []);
   }
 }
 </script>

src/components/Statistics/PersonLog.vue

@@ -2,55 +2,37 @@
   <div>
     Name: {{ dateLog.name }} <br>
     Hall: {{ dateLog.hall | getHallName }} <br>
-    Count: {{ dateLog.count }}
+    Count: {{ dateLog.group.length }}
     <br>
-    <v-btn :id="`personLogExpandButtonId_${dateString}`" @click="getPersonActivities" v-if="personLogs.length===0 && !personLogLoading" x-small rounded
-           color="primary">Expand
+    <v-btn :id="`personLogExpandButtonId_${dateLog.name}`" @click="getPersonActivities" v-if="!personLogLoaded" x-small
+      rounded color="primary">Expand
     </v-btn>
-    <LogObject v-if="personLogLoading"/>
-
-    <div v-for="(personLog,i) in personLogs" :key="i">
-      {{ i + 1 }}) Time:
-      {{ new Date(personLog.date).toDateString() + ' ' + new Date(personLog.date).toLocaleTimeString() }} <br>
-      Operation: {{ personLog.operation }} <br>
-      Details:
-      <LogObject :date="personLog.date" :object="personLog.details"></LogObject>
+    <div v-else>
+      <div v-for="(log, i) in dateLog.group" :key="i">
+        {{ i + 1 }}) Time:
+        {{ new Date(log.date).toDateString({ timeZone: 'Asia/Dhaka'}) + ' ' + new Date(log.date).toLocaleTimeString({ timeZone: 'Asia/Dhaka'}) }} <br>
+        Operation: {{ log.operation }} <br>
+      </div>
     </div>
     <hr>
   </div>
 </template>
 
 <script>
-import { handleGETLogsByDateAndDonor } from '@/api'
-import LogObject from './LogObject'
-
 export default {
   name: 'PersonLog',
-  props: ['dateLog', 'dateString'],
-  components: {
-    LogObject
-  },
+  props: ['dateLog'],
   data: function () {
     return {
-      personLogs: [],
-      personLogLoading: false
+      personLogLoaded: false
     }
   },
   methods: {
-    async getPersonActivities () {
-      const splitDate = this.dateString.split('-')
-
-      const timeStamp = new Date(parseInt(splitDate[0]), parseInt(splitDate[1]) - 1, parseInt(splitDate[2])).getTime()
-      this.personLogLoading = true
-      const response = await handleGETLogsByDateAndDonor({ timeStamp, donorId: this.dateLog.donorId })
-      this.personLogLoading = false
-      if (response.status !== 200) return
-      this.personLogs = response.data.logs
+    async getPersonActivities() {
+      this.personLogLoaded = true
     }
   }
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/Statistics/LogsByDate.vue

@@ -16,8 +16,8 @@
           >
           </v-sparkline>
           <v-row>
-            <v-col cols="12" sm="4" v-for="(logCount,i) in logCountPerDay" :key="i">
-              <DateLog :log-count="logCount" :key="i"></DateLog>
+            <v-col cols="12" sm="4" v-for="(log,i) in logs" :key="i">
+              <DateLog :groupedLog="log" :key="i"/>
             </v-col>
           </v-row>
         </v-card-text>
@@ -60,10 +60,24 @@ export default {
     const response = await handleGETLogs()
     this.logCountLoader = false
     if (response.status !== 200) return
-    this.logCountPerDay = response.data.logs
-    const reverseLogs = response.data.logs.slice(0, 14).reverse()
-    this.labelsForSparkLine = reverseLogs.map(a => a.dateString.split('-')[2])
-    this.valuesForSparkLine = reverseLogs.map(a => a.totalLogCount)
+    let options = { timeZone: 'Asia/Dhaka', year: 'numeric', month: '2-digit', day: '2-digit' };
+    let logs = response.data.logs.map(log=>{
+      return {
+        ...log,
+        dateString: new Date(log.date).toLocaleString('en-US', options)
+      }})
+    this.logs = logs.reduce((acc, val) => {
+      let o = acc.find((obj) => obj.dateString === val.dateString);
+      if (o) {
+        o.group.push(val);
+      } else {
+        acc.push({dateString: val.dateString, group: [val]});
+      }
+      return acc;
+    }, []);
+    const reverseLogs = this.logs.slice(0, 14)
+    this.labelsForSparkLine = reverseLogs.map(a => a.dateString.split('/')[1])
+    this.valuesForSparkLine = reverseLogs.map(a => a.group.length)
   },
   data () {
     return {
@@ -88,7 +102,7 @@ export default {
       volunteersShown: false,
 
       logCountLoader: false,
-      logCountPerDay: [],
+      logs: [],
       valuesForSparkLine: [],
       labelsForSparkLine: []
     }