improve dashboard ui and set route of school while superadmin login

Shikha Mishra
1 parent dfd943df60
Showing 5 changed files with 86 additions and 44 deletions Show diff stats
src/components/pageHeader/AppToolbar.vue
src/pages/Dashboard/dashboard.vue
src/pages/School/school.vue
src/pages/School/viewSchoolDashboard.vue
static/css/custom.css
@@ -18,6 +18,7 @@
       <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
     </v-flex>
     <v-spacer></v-spacer>
+    <v-btn type="button" @click="goToSchool" v-if="adminRole">Towards School!</v-btn>
     <v-toolbar-items class="hidden-sm-and-down">
       <v-icon class="header-icon">notifications_none</v-icon>
     </v-toolbar-items>
@@ -84,7 +85,8 @@ export default {
           window.getApp.$emit("APP_LOGOUT");
         }
       }
-    ]
+    ],
+    adminRole: ""
   }),
   computed: {
     toolbarColor() {
@@ -93,6 +95,8 @@ export default {
   },
   mounted() {
     // this.getUserData();
+    this.adminRole = this.$store.state.role;
+    console.log("this.adminRole", this.adminRole);
   },
   methods: {
     // emitSearch(ev) {
@@ -121,6 +125,17 @@ export default {
           //   this.$store.dispatch("Id", null);
           // }
         });
+    },
+    goToSchool() {
+      console.log("click");
+      if (this.$store.state.role === "ADMIN") {
+        this.$store.dispatch("Role", null);
+        this.$store.dispatch("setToken", null);
+        this.$router.push("/schooldashboard");
+        setTimeout(() => {
+          location.reload();
+        }, 1000);
+      }
     }
   }
 };
@@ -144,15 +144,16 @@
                           </template>
                         </v-list>
                       </v-flex>
-                      <v-flex xs12 sm12 md9>
-                        <div id="chart">
+                      <v-flex xs12 sm12 md9 lg9>
+                        <!-- <div id="chart"> -->
                           <apexchart
                             type="bar"
                             height="250"
+                            style="max-width: 800px !important"
                             :options="chartOptions"
                             :series="series"
                           ></apexchart>
-                        </div>
+                        <!-- </div> -->
                       </v-flex>
                     </v-layout>
                   </v-card>
@@ -361,19 +362,20 @@ export default {
         chart: {
           type: "bar",
           height: 150,
-          animations: {
-            enabled: true,
-            easing: "easeinout",
-            speed: 1200,
-            animateGradually: {
-              enabled: true,
-              delay: 450
-            },
-            dynamicAnimation: {
-              enabled: true,
-              speed: 450
-            }
-          }
+          stacked: true
+          // animations: {
+          //   enabled: true,
+          //   easing: "easeinout",
+          //   speed: 1200,
+          //   animateGradually: {
+          //     enabled: true,
+          //     delay: 450
+          //   },
+          //   dynamicAnimation: {
+          //     enabled: true,
+          //     speed: 450
+          //   }
+          // }
         },
         plotOptions: {
           bar: {
@@ -383,6 +385,18 @@ export default {
             distributed: true
           }
         },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              legend: {
+                position: "bottom",
+                offsetX: -10,
+                offsetY: 0
+              }
+            }
+          }
+        ],
         legend: {
           show: false
         },
@@ -969,7 +969,9 @@ export default {
           this.$store.dispatch("Id", response.data.data.id);
           this.$store.dispatch("Role", response.data.data.role);
           this.$router.push("/dashboard");
-          location.reload();
+          setTimeout(() => {
+            location.reload();
+          }, 1000);
           // let routeData = this.$router.resolve({
           //   name: "dashboardAdmin"
           // });
@@ -144,15 +144,10 @@
                           </template>
                         </v-list>
                       </v-flex>
-                      <v-flex xs12 sm12 md9>
-                        <div id="chart">
-                          <apexchart
-                            type="bar"
-                            height="250"
-                            :options="chartOptions"
-                            :series="series"
-                          ></apexchart>
-                        </div>
+                      <v-flex xs12 sm12 md9 lg9 >
+                        <!-- <div id="chart"> -->
+                        <apexchart type="bar" height="250" style="max-width:800px !important" :options="chartOptions" :series="series"></apexchart>
+                        <!-- </div> -->
                       </v-flex>
                     </v-layout>
                   </v-card>
@@ -359,21 +354,23 @@ export default {
       ],
       chartOptions: {
         chart: {
-          type: "bar",
+          // type: "bar",
           height: 150,
-          animations: {
-            enabled: true,
-            easing: "easeinout",
-            speed: 1200,
-            animateGradually: {
-              enabled: true,
-              delay: 450
-            },
-            dynamicAnimation: {
-              enabled: true,
-              speed: 450
-            }
-          }
+          stacked: true
+          
+          // animations: {
+          //   enabled: true,
+          //   easing: "easeinout",
+          //   speed: 1200,
+          //   animateGradually: {
+          //     enabled: true,
+          //     delay: 450
+          //   },
+          //   dynamicAnimation: {
+          //     enabled: true,
+          //     speed: 450
+          //   }
+          // }
         },
         plotOptions: {
           bar: {
@@ -383,8 +380,22 @@ export default {
             distributed: true
           }
         },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              legend: {
+                position: "bottom",
+                offsetX: -10,
+                offsetY: 0
+              }
+            }
+          }
+        ],
+
         legend: {
-          show: false
+          position: "right",
+          offsetY: 40
         },
         colors: ["#7852cc", "#f9a825", "#ff8a89"],
         dataLabels: {
@@ -145,7 +145,7 @@ h4 {
     padding: 8px;
 }
  
-.apexcharts-canvas {
+/* .apexcharts-canvas {
     width: 100% !important;
 }
 .apexcharts-canvas > svg{
@@ -153,7 +153,7 @@ h4 {
 }
 .apexcharts-canvas > svg > apexcharts-inner > apexcharts-graphical {
     transform: translate(0);
-}
+} */
  
 #dialog {
     height: 550px;
...	...	@@ -18,6 +18,7 @@
18	18	<v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
19	19	</v-flex>
20	20	<v-spacer></v-spacer>
	21	+ <v-btn type="button" @click="goToSchool" v-if="adminRole">Towards School!</v-btn>
21	22	<v-toolbar-items class="hidden-sm-and-down">
22	23	<v-icon class="header-icon">notifications_none</v-icon>
23	24	</v-toolbar-items>
...	...	@@ -84,7 +85,8 @@ export default {
84	85	window.getApp.$emit("APP_LOGOUT");
85	86	}
86	87	}
87		- ]
	88	+ ],
	89	+ adminRole: ""
88	90	}),
89	91	computed: {
90	92	toolbarColor() {
...	...	@@ -93,6 +95,8 @@ export default {
93	95	},
94	96	mounted() {
95	97	// this.getUserData();
	98	+ this.adminRole = this.$store.state.role;
	99	+ console.log("this.adminRole", this.adminRole);
96	100	},
97	101	methods: {
98	102	// emitSearch(ev) {
...	...	@@ -121,6 +125,17 @@ export default {
121	125	// this.$store.dispatch("Id", null);
122	126	// }
123	127	});
	128	+ },
	129	+ goToSchool() {
	130	+ console.log("click");
	131	+ if (this.$store.state.role === "ADMIN") {
	132	+ this.$store.dispatch("Role", null);
	133	+ this.$store.dispatch("setToken", null);
	134	+ this.$router.push("/schooldashboard");
	135	+ setTimeout(() => {
	136	+ location.reload();
	137	+ }, 1000);
	138	+ }
124	139	}
125	140	}
126	141	};
...	...
...	...	@@ -144,15 +144,16 @@
144	144	</template>
145	145	</v-list>
146	146	</v-flex>
147		- <v-flex xs12 sm12 md9>
148		- <div id="chart">
	147	+ <v-flex xs12 sm12 md9 lg9>
	148	+ <!-- <div id="chart"> -->
149	149	<apexchart
150	150	type="bar"
151	151	height="250"
	152	+ style="max-width: 800px !important"
152	153	:options="chartOptions"
153	154	:series="series"
154	155	></apexchart>
155		- </div>
	156	+ <!-- </div> -->
156	157	</v-flex>
157	158	</v-layout>
158	159	</v-card>
...	...	@@ -361,19 +362,20 @@ export default {
361	362	chart: {
362	363	type: "bar",
363	364	height: 150,
364		- animations: {
365		- enabled: true,
366		- easing: "easeinout",
367		- speed: 1200,
368		- animateGradually: {
369		- enabled: true,
370		- delay: 450
371		- },
372		- dynamicAnimation: {
373		- enabled: true,
374		- speed: 450
375		- }
376		- }
	365	+ stacked: true
	366	+ // animations: {
	367	+ // enabled: true,
	368	+ // easing: "easeinout",
	369	+ // speed: 1200,
	370	+ // animateGradually: {
	371	+ // enabled: true,
	372	+ // delay: 450
	373	+ // },
	374	+ // dynamicAnimation: {
	375	+ // enabled: true,
	376	+ // speed: 450
	377	+ // }
	378	+ // }
377	379	},
378	380	plotOptions: {
379	381	bar: {
...	...	@@ -383,6 +385,18 @@ export default {
383	385	distributed: true
384	386	}
385	387	},
	388	+ responsive: [
	389	+ {
	390	+ breakpoint: 480,
	391	+ options: {
	392	+ legend: {
	393	+ position: "bottom",
	394	+ offsetX: -10,
	395	+ offsetY: 0
	396	+ }
	397	+ }
	398	+ }
	399	+ ],
386	400	legend: {
387	401	show: false
388	402	},
...	...
...	...	@@ -969,7 +969,9 @@ export default {
969	969	this.$store.dispatch("Id", response.data.data.id);
970	970	this.$store.dispatch("Role", response.data.data.role);
971	971	this.$router.push("/dashboard");
972		- location.reload();
	972	+ setTimeout(() => {
	973	+ location.reload();
	974	+ }, 1000);
973	975	// let routeData = this.$router.resolve({
974	976	// name: "dashboardAdmin"
975	977	// });
...	...
...	...	@@ -144,15 +144,10 @@
144	144	</template>
145	145	</v-list>
146	146	</v-flex>
147		- <v-flex xs12 sm12 md9>
148		- <div id="chart">
149		- <apexchart
150		- type="bar"
151		- height="250"
152		- :options="chartOptions"
153		- :series="series"
154		- ></apexchart>
155		- </div>
	147	+ <v-flex xs12 sm12 md9 lg9 >
	148	+ <!-- <div id="chart"> -->
	149	+ <apexchart type="bar" height="250" style="max-width:800px !important" :options="chartOptions" :series="series"></apexchart>
	150	+ <!-- </div> -->
156	151	</v-flex>
157	152	</v-layout>
158	153	</v-card>
...	...	@@ -359,21 +354,23 @@ export default {
359	354	],
360	355	chartOptions: {
361	356	chart: {
362		- type: "bar",
	357	+ // type: "bar",
363	358	height: 150,
364		- animations: {
365		- enabled: true,
366		- easing: "easeinout",
367		- speed: 1200,
368		- animateGradually: {
369		- enabled: true,
370		- delay: 450
371		- },
372		- dynamicAnimation: {
373		- enabled: true,
374		- speed: 450
375		- }
376		- }
	359	+ stacked: true
	360	+
	361	+ // animations: {
	362	+ // enabled: true,
	363	+ // easing: "easeinout",
	364	+ // speed: 1200,
	365	+ // animateGradually: {
	366	+ // enabled: true,
	367	+ // delay: 450
	368	+ // },
	369	+ // dynamicAnimation: {
	370	+ // enabled: true,
	371	+ // speed: 450
	372	+ // }
	373	+ // }
377	374	},
378	375	plotOptions: {
379	376	bar: {
...	...	@@ -383,8 +380,22 @@ export default {
383	380	distributed: true
384	381	}
385	382	},
	383	+ responsive: [
	384	+ {
	385	+ breakpoint: 480,
	386	+ options: {
	387	+ legend: {
	388	+ position: "bottom",
	389	+ offsetX: -10,
	390	+ offsetY: 0
	391	+ }
	392	+ }
	393	+ }
	394	+ ],
	395	+
386	396	legend: {
387		- show: false
	397	+ position: "right",
	398	+ offsetY: 40
388	399	},
389	400	colors: ["#7852cc", "#f9a825", "#ff8a89"],
390	401	dataLabels: {
...	...
...	...	@@ -145,7 +145,7 @@ h4 {
145	145	padding: 8px;
146	146	}
147	147
148		-.apexcharts-canvas {
	148	+/* .apexcharts-canvas {
149	149	width: 100% !important;
150	150	}
151	151	.apexcharts-canvas > svg{
...	...	@@ -153,7 +153,7 @@ h4 {
153	153	}
154	154	.apexcharts-canvas > svg > apexcharts-inner > apexcharts-graphical {
155	155	transform: translate(0);
156		-}
	156	+} */
157	157
158	158	#dialog {
159	159	height: 550px;
...	...