From 233b1cffe70c12ee0652d386a6ee6a1b234e47ab Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Mon, 4 Jan 2021 10:59:39 -0400
Subject: [PATCH] Added basic Log datetime filter

---
 web/src/{views => components}/Logs.vue   |   7 +-
 web/src/components/ui/DatetimePicker.vue | 223 +++++++++++++++++++++++
 web/src/mixins/Nav.js                    |   6 -
 web/src/router/index.js                  |  10 -
 web/src/views/SystemAdministration.vue   | 126 ++++++++-----
 5 files changed, 309 insertions(+), 63 deletions(-)
 rename web/src/{views => components}/Logs.vue (92%)
 create mode 100644 web/src/components/ui/DatetimePicker.vue

diff --git a/web/src/views/Logs.vue b/web/src/components/Logs.vue
similarity index 92%
rename from web/src/views/Logs.vue
rename to web/src/components/Logs.vue
index af6aeaf..be562ad 100644
--- a/web/src/views/Logs.vue
+++ b/web/src/components/Logs.vue
@@ -28,7 +28,8 @@
         </template>
       </v-tooltip>
       <v-spacer />
-
+      <DateTimePicker v-model="dateIn" class="ma-6" label="Início" />
+      <DateTimePicker v-model="dateOut" class="ma-4" label="Fim" />
       <v-checkbox v-model="polling" label="Atualizar automaticamente" />
     </v-toolbar>
 
@@ -86,10 +87,12 @@
 <script>
 import gql from 'graphql-tag'
 import { format, subDays } from 'date-fns'
+import DateTimePicker from '../components/ui/DatetimePicker'
 
 import VueJsonPretty from 'vue-json-pretty'
 
 import 'vue-json-pretty/lib/styles.css'
+import DatetimePicker from '../components/ui/DatetimePicker.vue'
 
 const LOGS_QUERY = gql`
   query($search: String, $dateIn: String, $dateOut: String, $limit: Int) {
@@ -105,7 +108,7 @@ const LOGS_QUERY = gql`
 `
 
 export default {
-  components: { VueJsonPretty },
+  components: { VueJsonPretty, DateTimePicker },
   data: () => ({
     showLow: true,
     showInfo: true,
diff --git a/web/src/components/ui/DatetimePicker.vue b/web/src/components/ui/DatetimePicker.vue
new file mode 100644
index 0000000..5d3a5ce
--- /dev/null
+++ b/web/src/components/ui/DatetimePicker.vue
@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <v-dialog v-model="display" :width="dialogWidth">
+      <template #activator="{ on }">
+        <v-text-field
+          v-bind="textFieldProps"
+          :disabled="disabled"
+          :loading="loading"
+          :label="label"
+          :value="formattedDatetime"
+          readonly
+          outlined
+          v-on="on"
+        >
+          <template #progress>
+            <slot name="progress">
+              <v-progress-linear
+                color="primary"
+                indeterminate
+                absolute
+                height="2"
+              ></v-progress-linear>
+            </slot>
+          </template>
+        </v-text-field>
+      </template>
+
+      <v-card>
+        <v-card-text class="px-0 py-0">
+          <v-tabs v-model="activeTab" fixed-tabs>
+            <v-tab key="calendar">
+              <slot name="dateIcon">
+                <v-icon>mdi-calendar</v-icon>
+              </slot>
+            </v-tab>
+            <v-tab key="timer" :disabled="dateSelected">
+              <slot name="timeIcon">
+                <v-icon>mdi-clock</v-icon>
+              </slot>
+            </v-tab>
+
+            <v-tab-item key="calendar">
+              <v-date-picker
+                v-model="date"
+                v-bind="datePickerProps"
+                full-width
+                @input="showTimePicker"
+              />
+            </v-tab-item>
+            <v-tab-item key="timer">
+              <v-time-picker
+                ref="timer"
+                v-model="time"
+                class="v-time-picker-custom"
+                v-bind="timePickerProps"
+                full-width
+              ></v-time-picker>
+            </v-tab-item>
+          </v-tabs>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <slot name="actions" :parent="this">
+            <v-btn color="grey lighten-1" text @click.native="clearHandler">{{
+              clearText
+            }}</v-btn>
+            <v-btn color="green darken-1" text @click="okHandler">{{
+              okText
+            }}</v-btn>
+          </slot>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import { format, parse } from 'date-fns'
+const DEFAULT_DATE = ''
+const DEFAULT_TIME = '00:00:00'
+const DEFAULT_DATE_FORMAT = 'yyyy-MM-dd'
+const DEFAULT_TIME_FORMAT = 'HH:mm:ss'
+const DEFAULT_DIALOG_WIDTH = 340
+const DEFAULT_CLEAR_TEXT = 'CLEAR'
+const DEFAULT_OK_TEXT = 'OK'
+export default {
+  name: 'VDatetimePicker',
+  model: {
+    prop: 'datetime',
+    event: 'input'
+  },
+  props: {
+    datetime: {
+      type: [Date, String],
+      default: null
+    },
+    disabled: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    dialogWidth: {
+      type: Number,
+      default: DEFAULT_DIALOG_WIDTH
+    },
+    dateFormat: {
+      type: String,
+      default: DEFAULT_DATE_FORMAT
+    },
+    timeFormat: {
+      type: String,
+      default: 'HH:mm'
+    },
+    clearText: {
+      type: String,
+      default: DEFAULT_CLEAR_TEXT
+    },
+    okText: {
+      type: String,
+      default: DEFAULT_OK_TEXT
+    },
+    textFieldProps: {
+      type: Object,
+      default: () => ({})
+    },
+    datePickerProps: {
+      type: Object,
+      default: () => ({})
+    },
+    timePickerProps: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      display: false,
+      activeTab: 0,
+      date: DEFAULT_DATE,
+      time: DEFAULT_TIME
+    }
+  },
+  computed: {
+    dateTimeFormat() {
+      return this.dateFormat + ' ' + this.timeFormat
+    },
+    defaultDateTimeFormat() {
+      return DEFAULT_DATE_FORMAT + ' ' + DEFAULT_TIME_FORMAT
+    },
+    formattedDatetime() {
+      return this.selectedDatetime
+        ? format(this.selectedDatetime, this.dateTimeFormat)
+        : ''
+    },
+    selectedDatetime() {
+      if (this.date && this.time) {
+        let datetimeString = this.date + ' ' + this.time
+        if (this.time.length === 5) {
+          datetimeString += ':00'
+        }
+        return parse(datetimeString, this.defaultDateTimeFormat, new Date())
+      } else {
+        return null
+      }
+    },
+    dateSelected() {
+      return !this.date
+    }
+  },
+  watch: {
+    datetime: function () {
+      this.init()
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      if (!this.datetime) {
+        return
+      }
+      let initDateTime
+      if (this.datetime instanceof Date) {
+        initDateTime = this.datetime
+      } else if (
+        typeof this.datetime === 'string' ||
+        this.datetime instanceof String
+      ) {
+        // see https://stackoverflow.com/a/9436948
+        initDateTime = parse(this.datetime, this.dateTimeFormat, new Date())
+      }
+      this.date = format(initDateTime, DEFAULT_DATE_FORMAT)
+      this.time = format(initDateTime, DEFAULT_TIME_FORMAT)
+    },
+    okHandler() {
+      this.resetPicker()
+      this.$emit('input', this.selectedDatetime)
+    },
+    clearHandler() {
+      this.resetPicker()
+      this.date = DEFAULT_DATE
+      this.time = DEFAULT_TIME
+      this.$emit('input', null)
+    },
+    resetPicker() {
+      this.display = false
+      this.activeTab = 0
+      if (this.$refs.timer) {
+        this.$refs.timer.selectingHour = true
+      }
+    },
+    showTimePicker() {
+      this.activeTab = 1
+    }
+  }
+}
+</script>
diff --git a/web/src/mixins/Nav.js b/web/src/mixins/Nav.js
index 155c17e..461528c 100644
--- a/web/src/mixins/Nav.js
+++ b/web/src/mixins/Nav.js
@@ -81,12 +81,6 @@ export default {
         groupTitle: 'Sistema',
 
         items: [
-          {
-            title: 'Logs',
-            icon: 'mdi-clipboard-text-search',
-            route: { name: 'logs' },
-            role: 'superAdmin'
-          },
           {
             title: 'Administração',
             icon: 'mdi-shield-account',
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 35295f7..112e5cb 100755
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -177,16 +177,6 @@ const routes = [
       import(/* webpackChunkName: "wifi-users" */ '../views/WifiUsers.vue')
   },
 
-  {
-    path: '/logs',
-    name: 'logs',
-    meta: {
-      title: 'Logs',
-      superAdmin: true
-    },
-    component: () => import(/* webpackChunkName: "logs" */ '../views/Logs.vue')
-  },
-
   {
     path: '/system-administration',
     name: 'system-administration',
diff --git a/web/src/views/SystemAdministration.vue b/web/src/views/SystemAdministration.vue
index 2fe98e0..5bb1ee2 100644
--- a/web/src/views/SystemAdministration.vue
+++ b/web/src/views/SystemAdministration.vue
@@ -1,59 +1,95 @@
 <template>
-  <v-container>
-    <v-row>
-      <v-col cols="12">
-        <v-card outlined>
-          <v-card-title class="headline">
-            Importação de usuários do Active Directory
-          </v-card-title>
+  <div>
+    <v-tabs v-model="tab">
+      <v-tab> Logs </v-tab>
+      <v-tab> Manutenção </v-tab>
+    </v-tabs>
+    <v-tabs-items v-model="tab">
+      <v-tab-item><Logs /> </v-tab-item>
+      <v-tab-item>
+        <v-container>
+          <v-row>
+            <v-col cols="12">
+              <v-card outlined>
+                <v-card-title class="headline">
+                  Importação de usuários do Active Directory
+                </v-card-title>
 
-          <v-card-text>
-            Os usuários são importados automaticamente uma vez ao dia. Se você
-            necessita que sejam atualizados agora, clique no botão abaixo.
-            <v-alert color="info" class="my-4 text-justify" icon="mdi-alert">
-              ATENÇÃO! O processo leva vários minutos! Não repita este processo
-              em um curto espaço de tempo. Você pode acompanhar o progresso no
-              log do servidor.
-            </v-alert>
-            <v-alert color="warning" class="my-4 text-justify" icon="mdi-alert">
-              ATENÇÃO! Não é necessário executar essa ação para atualização de
-              permissões (roles). As permissões são sempre atualizadas a cada
-              requisição assíncronamente.
-            </v-alert>
-          </v-card-text>
+                <v-card-text>
+                  Os usuários são importados automaticamente uma vez ao dia. Se
+                  você necessita que sejam atualizados agora, clique no botão
+                  abaixo.
+                  <v-alert
+                    color="info"
+                    class="my-4 text-justify"
+                    icon="mdi-alert"
+                  >
+                    ATENÇÃO! O processo leva vários minutos! Não repita este
+                    processo em um curto espaço de tempo. Você pode acompanhar o
+                    progresso no log do servidor.
+                  </v-alert>
+                  <v-alert
+                    color="warning"
+                    class="my-4 text-justify"
+                    icon="mdi-alert"
+                  >
+                    ATENÇÃO! Não é necessário executar essa ação para
+                    atualização de permissões (roles). As permissões são sempre
+                    atualizadas a cada requisição assíncronamente.
+                  </v-alert>
+                </v-card-text>
 
-          <v-card-actions>
-            <v-spacer />
-            <v-btn color="primary" large :elevation="0" @click="importUsers">
-              Importar agora!
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-col>
-      <v-col cols="12">
-        <v-card outlined>
-          <v-card-title class="headline"> Tokens expirados </v-card-title>
+                <v-card-actions>
+                  <v-spacer />
+                  <v-btn
+                    color="primary"
+                    large
+                    :elevation="0"
+                    @click="importUsers"
+                  >
+                    Importar agora!
+                  </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-col>
+            <v-col cols="12">
+              <v-card outlined>
+                <v-card-title class="headline"> Tokens expirados </v-card-title>
 
-          <v-card-text>
-            Tokens expirados não podem ser utilizados, porém são mantidos no
-            banco de dados para consultas. Você pode apagar os tokens expirados
-            usando o botão abaixo.
-          </v-card-text>
+                <v-card-text>
+                  Tokens expirados não podem ser utilizados, porém são mantidos
+                  no banco de dados para consultas. Você pode apagar os tokens
+                  expirados usando o botão abaixo.
+                </v-card-text>
 
-          <v-card-actions>
-            <v-spacer />
-            <v-btn color="primary" large :elevation="0"> Apagar tokens </v-btn>
-          </v-card-actions>
-        </v-card></v-col
-      >
-    </v-row>
-  </v-container>
+                <v-card-actions>
+                  <v-spacer />
+                  <v-btn color="primary" large :elevation="0">
+                    Apagar tokens
+                  </v-btn>
+                </v-card-actions>
+              </v-card></v-col
+            >
+          </v-row>
+        </v-container>
+      </v-tab-item>
+    </v-tabs-items>
+  </div>
 </template>
 
 <script>
+import Logs from '../components/Logs'
+
 import gql from 'graphql-tag'
+
 export default {
   name: 'SystemAdministration',
+  components: {
+    Logs
+  },
+  data: () => ({
+    tab: 0
+  }),
   methods: {
     async importUsers() {
       const response = await this.$apollo.mutate({