sasdasda

resources/js/vue/config/urls.js

@@ -32,6 +32,7 @@ const urls = {
         }
         return "/TestResults?page=" + page;
     },
+    listFilterItemsTestResult : `/TestResults/ListFilterItems`,
     verifyTestResult : function(id) {
         return `/TestResults/Verify/${id}`;
     },

resources/js/vue/styles/material-dashboard/_buttons.scss

@@ -5,7 +5,7 @@
   font-weight: $font-weight-base !important;
   height: auto;
   line-height: $line-height-base;
-  color: $white !important;
+  // color: $white !important;
   cursor: pointer;
   border-radius: $border-radius-base;
 

resources/js/vue/views/Statistics/Chart.vue

@@ -1,51 +1,172 @@
 <template>
-  <div class="small">
-    <pie-chart :chart-data="datacollection"></pie-chart>
-    <bar-chart :chart-data="datacollection"></bar-chart>
-    <button @click="fillData()">Randomize</button>
+  <div>
+    <v-form ref="form">
+      <v-container grid-list-xs>
+        <material-card color="black" title="Search Result">
+          <v-layout align-center justify-center wrap class="px-5 my-3">
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="medicalCenters" item-text="name" item-value="id" v-model="form.medicalCenter" @change="fillUsers" label="Hospital" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="users" item-text="name" item-value="id" v-model="form.user" label="User" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="testTypes" item-text="name" item-value="id" v-model="form.testType" label="TestType" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="result" v-model="form.result" label="Result" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="verify" v-model="form.verify" label="Verify" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm4 md4>
+              <v-autocomplete :items="type" v-model="form.type" label="Type" color="black" class="pa-2"></v-autocomplete>
+            </v-flex>
+            <v-flex xs12 sm6 md5>
+              <v-menu
+                lazy
+                :close-on-content-click="true"
+                transition="v-scale-transition"
+                offset-y
+                v-model="fromMenu"
+              >
+                <v-text-field required slot="activator" label="FromDate" v-model="form.fromPicker"></v-text-field>
+                <v-date-picker
+                  no-title
+                  v-model="form.fromPicker"
+                  :date-format="date => new Date(date).toDateString()"
+                ></v-date-picker>
+              </v-menu>
+            </v-flex>
+            <v-flex xs12 sm6 md5>
+              <v-menu
+                lazy
+                :close-on-content-click="true"
+                transition="v-scale-transition"
+                offset-y
+                v-model="upToMenu"
+              >
+                <v-text-field required slot="activator" label="UpToDate" v-model="form.upToPicker"></v-text-field>
+                <v-date-picker
+                  no-title
+                  v-model="form.upToPicker"
+                  :date-format="date => new Date(date).toDateString()"
+                ></v-date-picker>
+              </v-menu>
+            </v-flex>
+            <v-flex xs12 md2 sm2 class="text-xs-center text-sm-center text-md-center">
+              <v-btn
+                class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black"
+                style="padding:10px 60px;"
+                @click="submitForm"
+              >
+                <v-icon class="black--text mr-2 caption">fas fa-chevron-right</v-icon>
+                <span class="black--text">GO</span>
+              </v-btn>
+            </v-flex>
+          </v-layout>
+          <v-layout row wrap class="px-5 my-3" v-if="!$route.params.testResult">
+            <v-divider></v-divider>
+          </v-layout>
+        </material-card>
+      </v-container>
+    </v-form>
+    <div v-if="chart" class="small">
+      <pie-chart v-if="form.type == 'PieChart'" :chart-data="datacollection"></pie-chart>
+      <bar-chart v-else :chart-data="datacollection"></bar-chart>
+    </div>
   </div>
 </template>
 
 <script>
-  import BarChart from '@/plugins/chart/BarChart.js'
-  import PieChart from '@/plugins/chart/PieChart.js'
+import BarChart from "@/plugins/chart/BarChart.js";
+import PieChart from "@/plugins/chart/PieChart.js";
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
 
-  export default {
-    components: {
-      BarChart,
-      PieChart
-    },
-    data () {
-      return {
-        datacollection: null
-      }
-    },
-    mounted () {
-      this.fillData()
-    },
-    methods: {
-      fillData () {
-        this.datacollection = {
-          labels: [this.getRandomInt(), this.getRandomInt()],
-          datasets: [
-            {
-              label: 'Data One',
-              backgroundColor: ['#f87979', '#ccc'],
-              data: [this.getRandomInt(), this.getRandomInt()]
-            }
-          ]
-        }
+export default {
+  components: {
+    BarChart,
+    PieChart
+  },
+  data() {
+    return {
+      datacollection: null,
+      fromMenu: '',
+      upToMenu: '',
+      verify: ['Verified', 'NotVerified'],
+      result: ['Accept', 'Failed'],
+      type: ['BarChart', 'PieChart'],
+      users: [],
+      medicalCenters: [],
+      testTypes: [],
+      form: {
+        medicalCenter: null,
+        user: null,
+        testType: null,
+        result: null,
+        verify: null,
+        type: 'PieChart',
+        fromPicker: '',
+        upToPicker: '',
       },
-      getRandomInt () {
-        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      chart: false
+    };
+  },
+  created() {
+    this.load();
+  },
+  methods: {
+    fillData(options) {
+      this.datacollection = {
+        labels: options.labels,
+        // labels: [this.getRandomInt(), this.getRandomInt()],
+        datasets: [
+          {
+            label: "Data One",
+            backgroundColor: ["#f87979", "#ccc"],
+            data: options.data,
+            // data: [this.getRandomInt(), this.getRandomInt()],
+          }
+        ]
+      };
+    },
+    async load() {
+      const result = await ApiService.get(urls.listFilterItemsTestResult);
+      if (result && result.status == 200) {
+        this.medicalCenters = result.data.data.MedicalCenters;
+        this.testTypes = result.data.data.TestTypes;
       }
-    }
+    },
+    async fillUsers() {
+      const result = await ApiService.get(urls.listOpertorMedicalCenter(this.form.medicalCenter));
+      if (result && result.status == 200) {
+        this.users = result.data.data.users;
+      } 
+    },
+    async submitForm() {
+      const result = await ApiService.post(urls.statistics, this.form);
+      if (result && result.status == 200) {
+        this.fillData(result.data.data)
+        this.chart = true;
+      } 
+    },
   }
+};
 </script>
 
 <style>
-  .small {
-    max-width: 600px;
-    margin:  150px auto;
-  }
+.small {
+  max-width: 600px;
+  margin: 150px auto;
+}
+.v-btn--floating {
+    padding: 0!important;
+}
+.theme--light.v-btn {
+    color: rgba(0,0,0,.87)!important;
+}
+.v-btn--floating, .v-btn--icon:before {
+    border-radius: 50%!important;
+}
 </style>

resources/js/vue/views/TestResult/List.vue

@@ -40,9 +40,8 @@
                             </template>
                             <template slot="items" slot-scope="{ item }">
                                 <td class="headline font-weight-light">{{ item.autoclave_id }}</td>
-                                <td
-                                    class="title font-weight-light"
-                                >{{ item.user.medical_center.name }}</td>
+                                <td class="title font-weight-light">{{ item.test_type.name }}</td>
+                                <td class="title font-weight-light" >{{ item.user.medical_center.name }}</td>
                                 <td class="title font-weight-light">{{ item.user.name }}</td>
                                 <td class="title font-weight-light">{{ item.result }}</td>
                                 <td class="title font-weight-light">{{ item.created_at }}</td>
@@ -102,6 +101,11 @@ export default {
                 text: "AutoClaveId",
                 value: "name"
             },
+            {
+                sortable: false,
+                text: "Test Type",
+                value: "TestType"
+            },
             {
                 sortable: false,
                 text: "Hospital",