Added min and max

web/src/components/Logs.vue

@@ -28,8 +28,14 @@
         </template>
       </v-tooltip>
       <v-spacer />
-      <DateTimePicker v-model="dateIn" class="ma-2" label="Início" />
-      <DateTimePicker v-model="dateOut" class="ma-2" label="Fim" />
+      <DateTimePicker v-model="dateIn" class="ma-2" label="Início" :max="max" />
+      <DateTimePicker
+        v-model="dateOut"
+        class="ma-2"
+        label="Fim"
+        :max="max"
+        :min="min"
+      />
     </v-toolbar>
 
     <v-data-table
@@ -160,6 +166,12 @@ export default {
         ...log,
         data: JSON.parse(log.data)
       }))
+    },
+    max() {
+      return this.formatDate(new Date())
+    },
+    min() {
+      return this.formatDate(new Date(this.dateIn))
     }
   },
   watch: {
@@ -168,6 +180,11 @@ export default {
       else this.$apollo.queries.logs.stopPolling()
     }
   },
+  methods: {
+    formatDate(date) {
+      return format(date, 'yyyy-MM-dd')
+    }
+  },
   apollo: {
     logs: {
       query: LOGS_QUERY,

web/src/components/ui/DatetimePicker.vue

@@ -12,19 +12,9 @@
           append-icon="mdi-close"
           outlined
           hide-details
-          @click:append="clear"
+          @click:append="clearHandler"
           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>
 
@@ -51,6 +41,9 @@
                 scrollable
                 v-bind="datePickerProps"
                 full-width
+                flat
+                :min="min"
+                :max="max"
                 @input="showTimePicker"
               />
             </v-tab-item>
@@ -58,6 +51,7 @@
               <v-time-picker
                 ref="timer"
                 v-model="time"
+                flat
                 class="v-time-picker-custom"
                 v-bind="timePickerProps"
                 full-width
@@ -68,12 +62,8 @@
         <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>
+            <v-btn text @click.native="clearHandler">Limpar</v-btn>
+            <v-btn color="green darken-1" text @click="okHandler">OK</v-btn>
           </slot>
         </v-card-actions>
       </v-card>
@@ -123,14 +113,6 @@ export default {
       type: String,
       default: 'HH:mm'
     },
-    clearText: {
-      type: String,
-      default: DEFAULT_CLEAR_TEXT
-    },
-    okText: {
-      type: String,
-      default: DEFAULT_OK_TEXT
-    },
     textFieldProps: {
       type: Object,
       default: () => ({})
@@ -142,6 +124,14 @@ export default {
     timePickerProps: {
       type: Object,
       default: () => ({})
+    },
+    min: {
+      type: String,
+      default: null
+    },
+    max: {
+      type: String,
+      default: null
     }
   },
   data() {
@@ -206,13 +196,6 @@ export default {
       this.time = format(initDateTime, DEFAULT_TIME_FORMAT)
     },
 
-    clear() {
-      this.date = null
-      this.time = null
-
-      this.okHandler()
-    },
-
     okHandler() {
       this.resetPicker()
       this.$emit('input', this.selectedDatetime)