add seach in health prived with dyanamic search in dasboard

Neeraj Sharma
1 parent d6b5a579c2
Showing 7 changed files with 136 additions and 26 deletions Show diff stats
src/App.vue
src/components/AppToolbar.vue
src/pages/Dashboard.vue
src/pages/Provider.vue
src/pages/notification.vue
src/pages/questions.vue
src/router/paths.js
@@ -4,8 +4,8 @@
     <template v-if="!$route.meta.public">
       <v-app id="inspire" class="app">
         <app-drawer class="app--drawer"></app-drawer>
-        <app-toolbar class="app--toolbar">
-      </app-toolbar>
+        <!-- <app-toolbar class="app--toolbar">
+      </app-toolbar> -->
         <v-content>
           <!-- Page Header -->
           <page-header v-if="$route.meta.breadcrumb"></page-header>
@@ -7,17 +7,6 @@
     <v-toolbar-title class="ml-0 pl-3">
     <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
     </v-toolbar-title>
-    <v-flex xs6 sm3>
-      <v-text-field
-        flat
-        prepend-icon="search"
-        label="Find your user"
-        v-model="search"
-        color="black"
-        :search="search"
-      >
-      </v-text-field>
-    </v-flex>
       <v-spacer></v-spacer>
       <h5 class="white--text name">{{userName}}</h5>
       <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
 <template>
 <v-app id="pages-dasboard">
+  <!-- <app-toolbar class="app--toolbar">
+      </app-toolbar> -->
+  <v-toolbar
+    color="grey"
+    fixed
+    app
+  >
+    <v-toolbar-title class="ml-0 pl-3">
+    <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
+    </v-toolbar-title>
+    <v-flex xs6 sm3>
+      <v-text-field
+        flat
+        prepend-icon="search"
+        label="Find your user"
+        v-model="term"
+        color="black"
+        @change="getPatientList"
+      >
+      </v-text-field>
+    </v-flex>
+      <v-spacer></v-spacer>
+      <h5 class="white--text name">{{userName}}</h5>
+      <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
+     <v-btn icon large flat slot="activator">
+          <v-avatar size="40px">
+           <img src="/static/icon/user.png"/>
+          </v-avatar>
+      </v-btn>
+        <v-list class="pa-0">
+          <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
+             <v-list-tile-action v-if="item.icon">
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list> 
+      </v-menu>
+  </v-toolbar>
   <v-tabs grow slider-color="black">
     <v-tab
       ripple
@@ -418,12 +459,15 @@
 </template>
  
 <script>
+// import AppToolbar from '@/components/AppToolbar';
 import onemonth from "@/components/report/onemonth.vue";
 import threemonth from "@/components/report/threemonth.vue";
 import sixmonth from "@/components/report/sixmonth.vue";
 import ninemonth from "@/components/report/ninemonth.vue";
 import generatereport from "@/components/report/generatereport.vue";
 import http from "@/Services/http.js";
+import NotificationList from "@/components/widgets/list/NotificationList";
+import Util from "@/util";
  
 export default {
   components: {
@@ -432,7 +476,7 @@ export default {
     "six-month": sixmonth,
     "nine-month": ninemonth,
     "report-generate": generatereport,
-  },
+ },
   data: () => ({
     component: "report-generate",
     snackbar: false,
@@ -443,7 +487,7 @@ export default {
     text: "",
     loading: false,
     date:null,
-    search: "",
+    term: "",
     modal: false,
     modaledit:false,
     menu: false,
@@ -511,7 +555,35 @@ export default {
       lastname: "",
       email: "",
       dob: ""
-    }
+    },
+    userName:'',
+    items: [
+      {
+        // icon: 'account_circle',
+        href: "/changepassword",
+        title: "Change Password",
+        click: e => {
+          console.log(e);
+        }
+      },
+      // {
+      //   icon: 'settings',
+      //   href: '#',
+      //   title: 'Settings',
+      //   click: (e) => {
+      //     console.log(e);
+      //   }
+      // },
+      {
+        // icon: 'fullscreen_exit',
+        href: "#",
+        title: "Logout",
+        click: e => {
+          window.getApp.$emit("APP_LOGOUT");
+       //   this.$store.dispatch("setToken", null);
+        }
+      }
+    ]
   }),
   // computed: {
   //   pages () {
@@ -536,7 +608,7 @@ export default {
     getPatientList() {
       var token = this.$store.state.token;
       http()
-        .get("/patientList", { 
+        .get("/patientList?term=" + this.term, { 
           headers: { Authorization: "Bearer " + token } 
          })
         .then(response => {
@@ -687,16 +759,23 @@ export default {
            console.log(error);
         });
       this.close();
+    },
+    handleDrawerToggle() {
+      window.getApp.$emit("APP_DRAWER_TOGGLED");
+    },
+    handleFullScreen() {
+      Util.toggleFullScreen();
     }
   },
   mounted() {
     this.getPatientList();
+    this.userName = this.$store.state.name;
+  },
+  computed:{
+    toolbarColor() {
+      return this.$vuetify.options.extra.mainNav;
+    }
   }
-  //computed:{
-  //   color(){
-  //     return this.loading ? 'success' : ''
-  // }
-  //}
 };
 </script>
 <style scoped>
@@ -803,4 +882,30 @@ h5 {
     font-size: 13px;
 }
 }
+.v-icon{
+  font-size:30px;
+}
+@media screen and (min-width: 1270px){
+.hide{
+  display: none;
+}
+/* }
+@media screen and (max-width: 962px) {
+.imglogo{
+    position: absolute;
+    top: 13px;
+    left: 13px !important;
+    width: 70px;
+    height: 24px;
+} */
+}
+@media screen and (max-width: 420px){
+.v-list__tile {
+  font-size:14px;
+  padding: 0 10px;
+}
+.name{
+  font-size:15px; 
+}
+}
 </style>
 \ No newline at end of file
 <template>
-  <!-- <v-container fluid> -->
   <v-flex xs12>
+    <app-toolbar class="app--toolbar"></app-toolbar> 
     <v-card>
       <v-card-title>
         <v-flex xs12 lg2 md3 sm4>
@@ -200,11 +200,16 @@
       </v-data-table>
     </v-card>
   </v-flex>
-  <!-- </v-container> -->
 </template>
 <script>
 import http from "@/Services/http.js";
+import AppToolbar from '@/components/AppToolbar';
+
+
 export default {
+  components: {
+    AppToolbar,
+  },
   data: () => ({
     snackbar: false,
     statussnackbar: false,
 <template>
  <v-app id="login">
-
+    <app-toolbar class="app--toolbar">
+      </app-toolbar>
     <v-toolbar color="white">
       <h4 class="text-lg-left"><b>Push Notification</b></h4>
       <v-spacer></v-spacer>
@@ -61,7 +62,13 @@
 </template>
 <script>
 import axios from 'axios';
+import AppToolbar from '@/components/AppToolbar';
+
+
 export default {
+  components: {
+    AppToolbar,
+  },
   data () {
     return {
       message: '',
 <template>
  <v-flex>
+   <app-toolbar class="app--toolbar"></app-toolbar>
   <v-card>
     <v-toolbar flat color="white">
       <v-card-title>
@@ -32,6 +33,8 @@ import sex from &#39;@/components/questions/sex.vue&#39;;
 import health from '@/components/questions/health.vue';
 import skin from '@/components/questions/skin.vue';
 import diet from '@/components/questions/diet.vue';
+import AppToolbar from '@/components/AppToolbar';
+
 export default {
   components: {
     'suggestion': suggestion,
@@ -39,6 +42,7 @@ export default {
     'health': health,
     'skin': skin,
     'diet': diet,
+     AppToolbar,
   },
   data: () => ({
     component: 'suggestion',
@@ -79,7 +79,7 @@ export default [
  
   {
     path: '/dashboard',
-    meta: { breadcrumb: true },
+    meta: { breadcrumb: false },
     name: 'Dashboard',
     component: () => import(
       /* webpackChunkName: "routes" */
...	...	@@ -4,8 +4,8 @@
4	4	<template v-if="!$route.meta.public">
5	5	<v-app id="inspire" class="app">
6	6	<app-drawer class="app--drawer"></app-drawer>
7		- <app-toolbar class="app--toolbar">
8		- </app-toolbar>
	7	+ <!-- <app-toolbar class="app--toolbar">
	8	+ </app-toolbar> -->
9	9	<v-content>
10	10	<!-- Page Header -->
11	11	<page-header v-if="$route.meta.breadcrumb"></page-header>
...	...
...	...	@@ -7,17 +7,6 @@
7	7	<v-toolbar-title class="ml-0 pl-3">
8	8	<v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
9	9	</v-toolbar-title>
10		- <v-flex xs6 sm3>
11		- <v-text-field
12		- flat
13		- prepend-icon="search"
14		- label="Find your user"
15		- v-model="search"
16		- color="black"
17		- :search="search"
18		- >
19		- </v-text-field>
20		- </v-flex>
21	10	<v-spacer></v-spacer>
22	11	<h5 class="white--text name">{{userName}}</h5>
23	12	<v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
...	...
1	1	<template>
2	2	<v-app id="pages-dasboard">
	3	+ <!-- <app-toolbar class="app--toolbar">
	4	+ </app-toolbar> -->
	5	+ <v-toolbar
	6	+ color="grey"
	7	+ fixed
	8	+ app
	9	+ >
	10	+ <v-toolbar-title class="ml-0 pl-3">
	11	+ <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
	12	+ </v-toolbar-title>
	13	+ <v-flex xs6 sm3>
	14	+ <v-text-field
	15	+ flat
	16	+ prepend-icon="search"
	17	+ label="Find your user"
	18	+ v-model="term"
	19	+ color="black"
	20	+ @change="getPatientList"
	21	+ >
	22	+ </v-text-field>
	23	+ </v-flex>
	24	+ <v-spacer></v-spacer>
	25	+ <h5 class="white--text name">{{userName}}</h5>
	26	+ <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
	27	+ <v-btn icon large flat slot="activator">
	28	+ <v-avatar size="40px">
	29	+ <img src="/static/icon/user.png"/>
	30	+ </v-avatar>
	31	+ </v-btn>
	32	+ <v-list class="pa-0">
	33	+ <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
	34	+ <v-list-tile-action v-if="item.icon">
	35	+ <v-icon>{{ item.icon }}</v-icon>
	36	+ </v-list-tile-action>
	37	+ <v-list-tile-content>
	38	+ <v-list-tile-title>{{ item.title }}</v-list-tile-title>
	39	+ </v-list-tile-content>
	40	+ </v-list-tile>
	41	+ </v-list>
	42	+ </v-menu>
	43	+ </v-toolbar>
3	44	<v-tabs grow slider-color="black">
4	45	<v-tab
5	46	ripple
...	...	@@ -418,12 +459,15 @@
418	459	</template>
419	460
420	461	<script>
	462	+// import AppToolbar from '@/components/AppToolbar';
421	463	import onemonth from "@/components/report/onemonth.vue";
422	464	import threemonth from "@/components/report/threemonth.vue";
423	465	import sixmonth from "@/components/report/sixmonth.vue";
424	466	import ninemonth from "@/components/report/ninemonth.vue";
425	467	import generatereport from "@/components/report/generatereport.vue";
426	468	import http from "@/Services/http.js";
	469	+import NotificationList from "@/components/widgets/list/NotificationList";
	470	+import Util from "@/util";
427	471
428	472	export default {
429	473	components: {
...	...	@@ -432,7 +476,7 @@ export default {
432	476	"six-month": sixmonth,
433	477	"nine-month": ninemonth,
434	478	"report-generate": generatereport,
435		- },
	479	+ },
436	480	data: () => ({
437	481	component: "report-generate",
438	482	snackbar: false,
...	...	@@ -443,7 +487,7 @@ export default {
443	487	text: "",
444	488	loading: false,
445	489	date:null,
446		- search: "",
	490	+ term: "",
447	491	modal: false,
448	492	modaledit:false,
449	493	menu: false,
...	...	@@ -511,7 +555,35 @@ export default {
511	555	lastname: "",
512	556	email: "",
513	557	dob: ""
514		- }
	558	+ },
	559	+ userName:'',
	560	+ items: [
	561	+ {
	562	+ // icon: 'account_circle',
	563	+ href: "/changepassword",
	564	+ title: "Change Password",
	565	+ click: e => {
	566	+ console.log(e);
	567	+ }
	568	+ },
	569	+ // {
	570	+ // icon: 'settings',
	571	+ // href: '#',
	572	+ // title: 'Settings',
	573	+ // click: (e) => {
	574	+ // console.log(e);
	575	+ // }
	576	+ // },
	577	+ {
	578	+ // icon: 'fullscreen_exit',
	579	+ href: "#",
	580	+ title: "Logout",
	581	+ click: e => {
	582	+ window.getApp.$emit("APP_LOGOUT");
	583	+ // this.$store.dispatch("setToken", null);
	584	+ }
	585	+ }
	586	+ ]
515	587	}),
516	588	// computed: {
517	589	// pages () {
...	...	@@ -536,7 +608,7 @@ export default {
536	608	getPatientList() {
537	609	var token = this.$store.state.token;
538	610	http()
539		- .get("/patientList", {
	611	+ .get("/patientList?term=" + this.term, {
540	612	headers: { Authorization: "Bearer " + token }
541	613	})
542	614	.then(response => {
...	...	@@ -687,16 +759,23 @@ export default {
687	759	console.log(error);
688	760	});
689	761	this.close();
	762	+ },
	763	+ handleDrawerToggle() {
	764	+ window.getApp.$emit("APP_DRAWER_TOGGLED");
	765	+ },
	766	+ handleFullScreen() {
	767	+ Util.toggleFullScreen();
690	768	}
691	769	},
692	770	mounted() {
693	771	this.getPatientList();
	772	+ this.userName = this.$store.state.name;
	773	+ },
	774	+ computed:{
	775	+ toolbarColor() {
	776	+ return this.$vuetify.options.extra.mainNav;
	777	+ }
694	778	}
695		- //computed:{
696		- // color(){
697		- // return this.loading ? 'success' : ''
698		- // }
699		- //}
700	779	};
701	780	</script>
702	781	<style scoped>
...	...	@@ -803,4 +882,30 @@ h5 {
803	882	font-size: 13px;
804	883	}
805	884	}
	885	+.v-icon{
	886	+ font-size:30px;
	887	+}
	888	+@media screen and (min-width: 1270px){
	889	+.hide{
	890	+ display: none;
	891	+}
	892	+/* }
	893	+@media screen and (max-width: 962px) {
	894	+.imglogo{
	895	+ position: absolute;
	896	+ top: 13px;
	897	+ left: 13px !important;
	898	+ width: 70px;
	899	+ height: 24px;
	900	+} */
	901	+}
	902	+@media screen and (max-width: 420px){
	903	+.v-list__tile {
	904	+ font-size:14px;
	905	+ padding: 0 10px;
	906	+}
	907	+.name{
	908	+ font-size:15px;
	909	+}
	910	+}
806	911	</style>
807	912	\ No newline at end of file
...	...
1	1	<template>
2		- <!-- <v-container fluid> -->
3	2	<v-flex xs12>
	3	+ <app-toolbar class="app--toolbar"></app-toolbar>
4	4	<v-card>
5	5	<v-card-title>
6	6	<v-flex xs12 lg2 md3 sm4>
...	...	@@ -200,11 +200,16 @@
200	200	</v-data-table>
201	201	</v-card>
202	202	</v-flex>
203		- <!-- </v-container> -->
204	203	</template>
205	204	<script>
206	205	import http from "@/Services/http.js";
	206	+import AppToolbar from '@/components/AppToolbar';
	207	+
	208	+
207	209	export default {
	210	+ components: {
	211	+ AppToolbar,
	212	+ },
208	213	data: () => ({
209	214	snackbar: false,
210	215	statussnackbar: false,
...	...
1	1	<template>
2	2	<v-app id="login">
3		-
	3	+ <app-toolbar class="app--toolbar">
	4	+ </app-toolbar>
4	5	<v-toolbar color="white">
5	6	<h4 class="text-lg-left"><b>Push Notification</b></h4>
6	7	<v-spacer></v-spacer>
...	...	@@ -61,7 +62,13 @@
61	62	</template>
62	63	<script>
63	64	import axios from 'axios';
	65	+import AppToolbar from '@/components/AppToolbar';
	66	+
	67	+
64	68	export default {
	69	+ components: {
	70	+ AppToolbar,
	71	+ },
65	72	data () {
66	73	return {
67	74	message: '',
...	...
1	1	<template>
2	2	<v-flex>
	3	+ <app-toolbar class="app--toolbar"></app-toolbar>
3	4	<v-card>
4	5	<v-toolbar flat color="white">
5	6	<v-card-title>
...	...	@@ -32,6 +33,8 @@ import sex from '@/components/questions/sex.vue';
32	33	import health from '@/components/questions/health.vue';
33	34	import skin from '@/components/questions/skin.vue';
34	35	import diet from '@/components/questions/diet.vue';
	36	+import AppToolbar from '@/components/AppToolbar';
	37	+
35	38	export default {
36	39	components: {
37	40	'suggestion': suggestion,
...	...	@@ -39,6 +42,7 @@ export default {
39	42	'health': health,
40	43	'skin': skin,
41	44	'diet': diet,
	45	+ AppToolbar,
42	46	},
43	47	data: () => ({
44	48	component: 'suggestion',
...	...
...	...	@@ -79,7 +79,7 @@ export default [
79	79
80	80	{
81	81	path: '/dashboard',
82		- meta: { breadcrumb: true },
	82	+ meta: { breadcrumb: false },
83	83	name: 'Dashboard',
84	84	component: () => import(
85	85	/* webpackChunkName: "routes" */
...	...