feat: [Issue 146] Criar contador de acessos diários

pages/admin/__tests__/__snapshots__/acessos-diarios.test.js.snap

@@ -118,7 +118,8 @@ exports[`Pages / Admin / AdminDailyAccess should render the page 1`] = `
     </div>
 
     <button
-      class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--large primary"
+      class="v-btn v-btn--disabled v-btn--has-bg theme--light v-size--large"
+      disabled="disabled"
       type="button"
     >
       <span
@@ -132,5 +133,9 @@ exports[`Pages / Admin / AdminDailyAccess should render the page 1`] = `
   </div>
 
   <!---->
+
+  <!---->
+
+  <!---->
 </div>
 `;

pages/admin/__tests__/acessos-diarios.test.js

@@ -76,6 +76,10 @@ describe('Pages / Admin / AdminDailyAccess', () => {
 
   describe('when search button is clicked', () => {
     beforeEach(() => {
+      wrapper.vm.loading = false
+      wrapper.vm.series = [{ data: [1, 2, 3, 4] }]
+      wrapper.vm.categories = ['a', 'b', 'c', 'd']
+
       const searchButton = wrapper.findAllComponents({ name: 'v-btn' }).at(0)
       searchButton.trigger('click')
     })
@@ -87,7 +91,7 @@ describe('Pages / Admin / AdminDailyAccess', () => {
 
     it('should render correct chart', () => {
       const chart = wrapper.findComponent({ name: 'AdminChart' })
-      expect(chart.props('title')).toBe('Média de acessos diários por mês')
+      expect(chart.props('title')).toBe('Acessos diários')
       expect(chart.props('type')).toBe('line')
       expect(chart.props('categories')).toEqual(['a', 'b', 'c', 'd'])
     })

pages/admin/acessos-diarios.vue

@@ -60,25 +60,52 @@
           </v-btn>
         </v-date-picker>
       </v-dialog>
-      <v-btn color="primary" large @click="executeSearch()">
+      <v-btn
+        color="primary"
+        large
+        :loading="loading"
+        :disabled="!startDate || !endDate || loading"
+        @click="executeSearch()"
+      >
         BUSCAR
       </v-btn>
     </div>
+
+    <div v-if="loading" class="daily-access__loading">
+      <v-progress-circular
+        indeterminate
+        color="primary"
+        size="64"
+      />
+      <p class="mt-4">
+        Carregando dados...
+      </p>
+    </div>
+
     <div
-      v-if="series && series.length > 0"
+      v-if="!loading && series && series.length > 0"
       class="daily-access__graph-wrapper"
     >
       <AdminChart
         :categories="categories"
-        title="Média de acessos diários por mês"
+        title="Acessos diários"
         type="line"
         :series="series"
       />
     </div>
+
+    <div
+      v-if="!loading && noData"
+      class="daily-access__no-data"
+    >
+      <p>Nenhum dado encontrado para o período selecionado.</p>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+import axiosClient from '~/assets/services/emtu-api'
 import AdminChart from '~/components/admin/AdminChart.vue'
 
 export default {
@@ -95,22 +122,94 @@ export default {
         .toISOString()
         .substr(0, 10),
       endDateDialog: false,
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
-      series: []
+      categories: [],
+      series: [],
+      loading: false,
+      noData: false
     }
   },
   methods: {
-    executeSearch () {
-      this.series = [
-        {
-          name: 'Desktops',
-          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
+    ...mapActions('alert', ['showAlert']),
+
+    async executeSearch () {
+      if (!this.startDate || !this.endDate) {
+        this.showAlert({
+          alertMessage: 'Por favor, selecione ambas as datas',
+          alertType: 'warning'
+        })
+        return
+      }
+
+      if (new Date(this.startDate) > new Date(this.endDate)) {
+        this.showAlert({
+          alertMessage: 'A data inicial deve ser menor que a data final',
+          alertType: 'warning'
+        })
+        return
+      }
+
+      this.loading = true
+      this.noData = false
+
+      try {
+        const dates = this.getDateRange(this.startDate, this.endDate)
+        const promises = dates.map(date =>
+          axiosClient.get(`/access/dailyAccess?date=${date}`)
+        )
+
+        const responses = await Promise.all(promises)
+
+        const accessData = responses.map((response, index) => ({
+          date: dates[index],
+          count: response.data.quantidade_acessos
+        }))
+
+        this.categories = accessData.map(item => this.formatDate(item.date))
+        this.series = [
+          {
+            name: 'Acessos',
+            data: accessData.map(item => item.count)
+          }
+        ]
+
+        const hasData = accessData.some(item => item.count > 0)
+        if (!hasData) {
+          this.noData = true
         }
-      ]
+      } catch (error) {
+        this.showAlert({
+          alertMessage: 'Erro ao buscar dados. Tente novamente mais tarde.',
+          alertType: 'error'
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+
+    getDateRange (startDate, endDate) {
+      const dates = []
+      const currentDate = new Date(startDate)
+      const end = new Date(endDate)
+
+      // eslint-disable-next-line no-unmodified-loop-condition
+      while (currentDate <= end) {
+        dates.push(currentDate.toISOString().split('T')[0])
+        currentDate.setDate(currentDate.getDate() + 1)
+      }
+
+      return dates
+    },
+
+    formatDate (dateString) {
+      const date = new Date(dateString + 'T00:00:00')
+      const day = String(date.getDate()).padStart(2, '0')
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      return `${day}/${month}`
     }
   }
 }
 </script>
+
 <style scoped lang="scss">
 .daily-access {
   align-items: flex-start;
@@ -162,4 +261,28 @@ export default {
     width: 800px;
   }
 }
+
+.daily-access__loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+
+  margin-top: 60px;
+  width: 100%;
+
+  @media (min-width: 800px) {
+    margin-left: auto;
+    margin-right: auto;
+    width: 800px;
+  }
+}
+
+.daily-access__no-data {
+  text-align: center;
+  padding: 60px 20px;
+  color: #666;
+  font-size: 16px;
+}
 </style>

pages/index.vue

@@ -265,6 +265,7 @@ import { LMap, LTileLayer, LControl } from 'vue2-leaflet'
 import 'leaflet/dist/leaflet.css'
 import { mapState, mapActions } from 'vuex'
 import { Icon } from 'leaflet'
+import axiosClient from '~/assets/services/emtu-api'
 
 delete Icon.Default.prototype._getIconUrl
 Icon.Default.mergeOptions({
@@ -417,6 +418,7 @@ export default {
     //   this.searchBody = { ...this.searches }
     // }
     this.loadRecentSearches()
+    this.registerAccess()
   },
   destroyed () {
     this.hideAlert()
@@ -473,6 +475,14 @@ export default {
         maximumAge: 10000
       })
     },
+    async registerAccess () {
+      try {
+        await axiosClient.post('/access/trackAccess')
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('Erro ao registrar acesso:', error)
+      }
+    },
     centerMapOnCurrentLocation () {
       this.getCurrentLocation()
     },