viithiisys / School-Management-dashboard

1

1

2

<v-app id="pages-dasboard">

2

<v-app id="pages-dasboard">

3

3

4

<!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>

4

<!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>

5

<v-card>

5

<v-card>

6

<v-toolbar color="grey lighten-2" flat>

6

<v-toolbar color="grey lighten-2" flat>

7

<v-spacer></v-spacer>

7

<v-spacer></v-spacer>

8

<v-toolbar-title>

8

<v-toolbar-title>

9

<h3>Notice Board</h3>

9

<h3>Notice Board</h3>

10

</v-toolbar-title>

10

</v-toolbar-title>

11

<v-spacer></v-spacer>

11

<v-spacer></v-spacer>

12

<v-icon @click="closeNotice">close</v-icon>

12

<v-icon @click="closeNotice">close</v-icon>

13

</v-toolbar>

13

</v-toolbar>

14

<v-card-text>

14

<v-card-text>

15

<v-layout>

15

<v-layout>

16

<v-flex align-center justify-center layout text-xs-center class="mt-2">

16

<v-flex align-center justify-center layout text-xs-center class="mt-2">

17

17

18

18

19

</v-flex>

19

</v-flex>

20

</v-layout>

20

</v-layout>

21

<v-container grid-list-md>

21

<v-container grid-list-md>

22

<v-layout wrap>

22

<v-layout wrap>

23

<v-flex>

23

<v-flex>

24

<v-layout>

24

<v-layout>

25

<v-flex xs5 sm6>

25

<v-flex xs5 sm6>

26

26

27

<b>Title:</b>

27

<b>Title:</b>

28

</h5>

28

</h5>

29

</v-flex>

29

</v-flex>

30

<v-flex sm6 xs8>

30

<v-flex sm6 xs8>

31

<h5 class="my-1">{{ notice.title }}</h5>

31

<h5 class="my-1">{{ notice.title }}</h5>

32

</v-flex>

32

</v-flex>

33

</v-layout>

33

</v-layout>

34

<v-layout>

34

<v-layout>

35

<v-flex xs5 sm6>

35

<v-flex xs5 sm6>

36

36

37

<b>Description:</b>

37

<b>Description:</b>

38

</h5>

38

</h5>

39

</v-flex>

39

</v-flex>

40

<v-flex sm6 xs8>

40

<v-flex sm6 xs8>

41

<h5 class="my-1">{{ notice.description }}</h5>

41

<h5 class="my-1">{{ notice.description }}</h5>

42

</v-flex>

42

</v-flex>

43

</v-layout>

43

</v-layout>

44

</v-flex>

44

</v-flex>

45

</v-layout>

45

</v-layout>

46

</v-container>

46

</v-container>

47

</v-card-text>

47

</v-card-text>

48

</v-card>

48

</v-card>

49

</v-dialog>-->

49

</v-dialog>-->

50

50

51

52

52

53

53

54

<v-progress-circular indeterminate color="white"></v-progress-circular>

54

<v-progress-circular indeterminate color="white"></v-progress-circular>

55

</div>

55

</div>

56

57

57

58

<v-snackbar

58

<v-snackbar

59

:timeout="timeout"

59

:timeout="timeout"

60

:top="y === 'top'"

60

:top="y === 'top'"

61

:right="x === 'right'"

61

:right="x === 'right'"

62

:vertical="mode === 'vertical'"

62

:vertical="mode === 'vertical'"

63

v-model="snackbar"

63

v-model="snackbar"

64

:color="snackbarColor"

64

:color="snackbarColor"

65

>

65

>

66

67

<v-spacer></v-spacer>

67

<v-spacer></v-spacer>

68

<v-btn flat text @click="snackbar = false">X</v-btn>

68

<v-btn flat text @click="snackbar = false">X</v-btn>

69

</v-snackbar>

69

</v-snackbar>

70

71

71

72

<v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>

72

<v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>

73

<v-card flat class="card-style elevation-0" height="600" dark>

73

<v-card flat class="card-style elevation-0" height="600" dark>

74

<v-layout>

74

<v-layout>

75

<v-flex xs12>

75

<v-flex xs12>

76

<v-icon

76

<v-icon

77

size="24"

77

size="24"

78

class="right"

78

class="right"

79

@click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"

79

@click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"

80

>cancel</v-icon>

80

>cancel</v-icon>

81

</v-flex>

81

</v-flex>

82

</v-layout>

82

</v-layout>

83

<v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">

83

<v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">

84

<v-tabs-slider color="yellow"></v-tabs-slider>

84

<v-tabs-slider color="yellow"></v-tabs-slider>

85

<v-tab v-for="(tab,index) in tabs" :key="index">

85

<v-tab v-for="(tab,index) in tabs" :key="index">

86

86

87

</v-tab>

87

</v-tab>

88

<!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>

88

<!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>

89

<v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->

89

<v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->

90

91

91

92

<v-tab-item>

92

<v-tab-item>

93

<v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">

93

<v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">

94

<v-container fluid>

94

<v-container fluid>

95

<v-divider class="white"></v-divider>

95

<v-divider class="white"></v-divider>

96

<v-card

96

<v-card

97

v-for="(particularEvent,index) in dialogSchoolEvents"

97

v-for="(particularEvent,index) in dialogSchoolEvents"

98

:key="index"

98

:key="index"

99

class="mt-3 pa-2 card-style white--text elevation-0"

99

class="mt-3 pa-2 card-style white--text elevation-0"

100

>

100

>

101

<div>

101

<div>

102

<div class="headline">{{particularEvent.title}}</div>

102

<div class="headline">{{particularEvent.title}}</div>

103

<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

103

<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

104

<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>

104

<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>

105

<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>

105

<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>

106

106

107

Link :

107

Link :

108

<a :href="particularEvent.link">{{particularEvent.link}}</a>

108

<a :href="particularEvent.link">{{particularEvent.link}}</a>

109

</div>

109

</div>

110

<div

110

<div

111

v-if="particularEvent.description"

111

v-if="particularEvent.description"

112

>Description : {{particularEvent.description}}</div>

112

>Description : {{particularEvent.description}}</div>

113

</div>

113

</div>

114

<v-divider class="white mt-3"></v-divider>

114

<v-divider class="white mt-3"></v-divider>

115

</v-card>

115

</v-card>

116

</v-container>

116

</v-container>

117

</v-card>

117

</v-card>

118

</v-tab-item>

118

</v-tab-item>

119

120

120

121

<v-tab-item>

121

<v-tab-item>

122

<v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>

122

<v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>

123

<v-container fluid>

123

<v-container fluid>

124

<v-divider class="white"></v-divider>

124

<v-divider class="white"></v-divider>

125

<v-card

125

<v-card

126

v-for="(particularEvent,index) in dialogMeetingEvents"

126

v-for="(particularEvent,index) in dialogMeetingEvents"

127

:key="index"

127

:key="index"

128

class="mt-3 pa-2 card-style white--text elevation-0"

128

class="mt-3 pa-2 card-style white--text elevation-0"

129

>

129

>

130

<div>

130

<div>

131

<div class="headline">{{particularEvent.title}}</div>

131

<div class="headline">{{particularEvent.title}}</div>

132

<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

132

<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

133

<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>

133

<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>

134

<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>

134

<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>

135

135

136

Link :

136

Link :

137

<a :href="particularEvent.link">{{particularEvent.link}}</a>

137

<a :href="particularEvent.link">{{particularEvent.link}}</a>

138

</div>

138

</div>

139

<div

139

<div

140

v-if="particularEvent.description"

140

v-if="particularEvent.description"

141

>Description : {{particularEvent.description}}</div>

141

>Description : {{particularEvent.description}}</div>

142

</div>

142

</div>

143

<v-divider class="white mt-3"></v-divider>

143

<v-divider class="white mt-3"></v-divider>

144

</v-card>

144

</v-card>

145

</v-container>

145

</v-container>

146

</v-card>

146

</v-card>

147

</v-tab-item>

147

</v-tab-item>

148

</v-tabs>

148

</v-tabs>

149

150

150

151

<v-card flat class="card-style pa-2 elevation-0" dark v-else>

151

<v-card flat class="card-style pa-2 elevation-0" dark v-else>

152

<v-container fluid>

152

<v-container fluid>

153

<v-divider class="white"></v-divider>

153

<v-divider class="white"></v-divider>

154

<v-card

154

<v-card

155

v-for="(particularEvent,index) in displayEventsList"

155

v-for="(particularEvent,index) in displayEventsList"

156

:key="index"

156

:key="index"

157

class="mt-3 pa-2 card-style white--text elevation-0"

157

class="mt-3 pa-2 card-style white--text elevation-0"

158

>

158

>

159

<div>

159

<div>

160

<div class="headline">{{particularEvent.title}}</div>

160

<div class="headline">{{particularEvent.title}}</div>

161

<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

161

<div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

162

<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>

162

<div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>

163

<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>

163

<div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>

164

164

165

Link :

165

Link :

166

<a :href="particularEvent.link">{{particularEvent.link}}</a>

166

<a :href="particularEvent.link">{{particularEvent.link}}</a>

167

</div>

167

</div>

168

<div

168

<div

169

v-if="particularEvent.description"

169

v-if="particularEvent.description"

170

>Description : {{particularEvent.description}}</div>

170

>Description : {{particularEvent.description}}</div>

171

</div>

171

</div>

172

<v-divider class="white mt-3"></v-divider>

172

<v-divider class="white mt-3"></v-divider>

173

</v-card>

173

</v-card>

174

</v-container>

174

</v-container>

175

</v-card>

175

</v-card>

176

</v-card>

176

</v-card>

177

</v-dialog>

177

</v-dialog>

178

179

<v-layout wrap row>

179

<v-layout wrap row>

180

<v-flex xs12 sm12 md8>

180

<v-flex xs12 sm12 md8>

181

<v-container fluid grid-list-xl>

181

<v-container fluid grid-list-xl>

182

182

183

<v-layout wrap class v-if="$store.state.role != 'PARENT' ">

183

<v-layout wrap class v-if="$store.state.role != 'PARENT' ">

184

<v-flex xs12 sm12 md3>

184

<v-flex xs12 sm12 md3>

185

<router-link :to="{ name:'Students' }">

185

<router-link :to="{ name:'Students' }">

186

<v-card class="card pink-bgcolor">

186

<v-card class="card pink-bgcolor">

187

<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>

187

<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>

188

188

189

<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>

189

<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>

190

</v-card>

190

</v-card>

191

</router-link>

191

</router-link>

192

</v-flex>

192

</v-flex>

193

193

194

<v-flex xs12 sm12 md3>

194

<v-flex xs12 sm12 md3>

195

<router-link :to="{ name:'Teachers' }">

195

<router-link :to="{ name:'Teachers' }">

196

<v-card flat class="card elevation-2 firozi-bgcolor">

196

<v-card flat class="card elevation-2 firozi-bgcolor">

197

<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>

197

<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>

198

198

199

200

<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>

200

<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>

201

</v-card>

201

</v-card>

202

</router-link>

202

</router-link>

203

</v-flex>

203

</v-flex>

204

204

205

<v-flex xs12 sm12 md3>

205

<v-flex xs12 sm12 md3>

206

<router-link :to="{ name:'Parents' }">

206

<router-link :to="{ name:'Parents' }">

207

<v-card flat class="card yellow darken-3">

207

<v-card flat class="card yellow darken-3">

208

<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>

208

<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>

209

209

210

<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>

210

<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>

211

</v-card>

211

</v-card>

212

</router-link>

212

</router-link>

213

</v-flex>

213

</v-flex>

214

214

215

<v-flex xs12 sm12 md3>

215

<v-flex xs12 sm12 md3>

216

<router-link :to="{ name:'Class' }">

216

<router-link :to="{ name:'Class' }">

217

<v-card flat class="card darkBlue-bgcolor">

217

<v-card flat class="card darkBlue-bgcolor">

218

<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>

218

<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>

219

219

220

<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>

220

<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>

221

</v-card>

221

</v-card>

222

</router-link>

222

</router-link>

223

</v-flex>

223

</v-flex>

224

</v-layout>

224

</v-layout>

225

226

<p

226

<p

227

v-if="studentsData.length === 0 && role == 'PARENT'"

227

v-if="studentsData.length === 0 && role == 'PARENT'"

228

class="text-center title grey lighten-4 error--text"

228

class="text-center title grey lighten-4 error--text"

229

>You have no student registered with school</p>

229

>You have no student registered with school</p>

230

230

231

<v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">

231

<v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">

232

<v-flex xs12>

232

<v-flex xs12>

233

<v-card class="card mt-2 account-Card">

233

<v-card class="card mt-2 account-Card">

234

<h4>

234

<h4>

235

<b>Account</b>

235

<b>Account</b>

236

</h4>

236

</h4>

237

<v-layout wrap>

237

<v-layout wrap>

238

<v-flex xs12 sm12 md3>

238

<v-flex xs12 sm12 md3>

239

<v-list two-line>

239

<v-list two-line>

240

240

241

<v-list-tile>

241

<v-list-tile>

242

<v-list-tile-avatar>

242

<v-list-tile-avatar>

243

<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>

243

<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>

244

</v-list-tile-avatar>

244

</v-list-tile-avatar>

245

<v-list-tile-content>

245

<v-list-tile-content>

246

<v-list-tile-title class="mt-2">

246

<v-list-tile-title class="mt-2">

247

247

248

</v-list-tile-title>

248

</v-list-tile-title>

249

<v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>

249

<v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>

250

</v-list-tile-content>

250

</v-list-tile-content>

251

</v-list-tile>

251

</v-list-tile>

252

<v-list-tile>

252

<v-list-tile>

253

<v-list-tile-avatar>

253

<v-list-tile-avatar>

254

<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>

254

<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>

255

</v-list-tile-avatar>

255

</v-list-tile-avatar>

256

<v-list-tile-content>

256

<v-list-tile-content>

257

<v-list-tile-title class="mt-2">

257

<v-list-tile-title class="mt-2">

258

<p class="subheading font-color">Collection</p>

258

<p class="subheading font-color">Collection</p>

259

</v-list-tile-title>

259

</v-list-tile-title>

260

<v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>

260

<v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>

261

</v-list-tile-content>

261

</v-list-tile-content>

262

</v-list-tile>

262

</v-list-tile>

263

<v-list-tile>

263

<v-list-tile>

264

<v-list-tile-avatar>

264

<v-list-tile-avatar>

265

<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>

265

<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>

266

</v-list-tile-avatar>

266

</v-list-tile-avatar>

267

<v-list-tile-content>

267

<v-list-tile-content>

268

<v-list-tile-title class="mt-2">

268

<v-list-tile-title class="mt-2">

269

<p class="subheading font-color">Expences</p>

269

<p class="subheading font-color">Expences</p>

270

</v-list-tile-title>

270

</v-list-tile-title>

271

<v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>

271

<v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>

272

</v-list-tile-content>

272

</v-list-tile-content>

273

</v-list-tile>

273

</v-list-tile>

274

</template>

274

</template>

275

</v-list>

275

</v-list>

276

</v-flex>

276

</v-flex>

277

<v-flex xs12 sm12 md9 lg9>

277

<v-flex xs12 sm12 md9 lg9>

278

278

279

279

280

<apexchart

280

<apexchart

281

type="bar"

281

type="bar"

282

height="250"

282

height="250"

283

style="max-width: 800px !important"

283

style="max-width: 800px !important"

284

:options="chartOptions"

284

:options="chartOptions"

285

:series="series"

285

:series="series"

286

></apexchart>

286

></apexchart>

287

</div>

287

</div>

288

</div>

288

</div>

289

</v-flex>

289

</v-flex>

290

</v-layout>

290

</v-layout>

291

</v-card>

291

</v-card>

292

</v-flex>

292

</v-flex>

293

</v-layout>

293

</v-layout>

294

295

295

296

<v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">

296

<v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">

297

297

298

<v-flex xs12 sm6>

298

<v-flex xs12 sm6>

299

<v-card class="card">

299

<v-card class="card">

300

<v-container>

300

<v-container>

301

<v-card-title class="justify-center title font-weight-bold">Notice Board</v-card-title>

301

<v-card-title class="justify-center title font-weight-bold">Notice Board</v-card-title>

302

<v-layout column>

302

<v-layout column>

303

<v-flex

303

<v-flex

304

v-for="(item,index) in noticeData"

304

v-for="(item,index) in noticeData"

305

:key="index"

305

:key="index"

306

style="cursor: pointer;"

306

style="cursor: pointer;"

307

>

307

>

308

<v-layout column>

308

<v-layout column>

309

309

310

<v-flex class="pb-2 pl-2 pr-2">

310

<v-flex class="pb-2 pl-2 pr-2">

311

<v-chip

311

<v-chip

312

:color="colorsArray[index%colorsArray.length]"

312

:color="colorsArray[index%colorsArray.length]"

313

text-color="white"

313

text-color="white"

314

class="ma-0"

314

class="ma-0"

315

>{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>

315

>{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>

316

</v-flex>

316

</v-flex>

317

317

318

<v-flex class="pa-2">

318

<v-flex class="pa-2">

319

<div class="body-1 font-weight-bold px-2" @click="profile">{{item.title}}</div>

319

<div class="body-1 font-weight-bold px-2" @click="profile">{{item.title}}</div>

320

</v-flex>

320

</v-flex>

321

322

322

323

<v-flex class="pa-2">

323

<v-flex class="pa-2">

324

<v-divider></v-divider>

324

<v-divider></v-divider>

325

</v-flex>

325

</v-flex>

326

</v-layout>

326

</v-layout>

327

</v-flex>

327

</v-flex>

328

</v-layout>

328

</v-layout>

329

330

<!-- <v-data-table

330

<!-- <v-data-table

331

:items="noticeData"

331

:items="noticeData"

332

class="elevation-0"

332

class="elevation-0"

333

flat

333

flat

334

hide-actions

334

hide-actions

335

hide-headers

335

hide-headers

336

style="border-spacing: 0 !important;"

336

style="border-spacing: 0 !important;"

337

>

337

>

338

<template

338

<template

339

slot="items"

339

slot="items"

340

slot-scope="props"

340

slot-scope="props"

341

v-if="props.index < 5"

341

v-if="props.index < 5"

342

style="border-spacing: 0 !important;"

342

style="border-spacing: 0 !important;"

343

>

343

>

344

344

345

<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>

345

<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>

346

<td>

346

<td>

347

<span class="grey--text caption">{{ date(props.item.created) }}</span>

347

<span class="grey--text caption">{{ date(props.item.created) }}</span>

348

<br />

348

<br />

349

<span class="body-2">{{ props.item.title}}</span>

349

<span class="body-2">{{ props.item.title}}</span>

350

</td>-->

350

</td>-->

351

351

352

<!--

352

<!--

353

353

354

<span>

354

<span>

355

<v-tooltip top>

355

<v-tooltip top>

356

<img

356

<img

357

slot="activator"

357

slot="activator"

358

style="cursor:pointer; width:25px; height:25px; "

358

style="cursor:pointer; width:25px; height:25px; "

359

@click="profile"

359

@click="profile"

360

src="/static/icon/view.png"

360

src="/static/icon/view.png"

361

/>

361

/>

362

362

363

</v-tooltip>

363

</v-tooltip>

364

</span>

364

</span>

365

</td>

365

</td>

366

</tr>

366

</tr>

367

</template>

367

</template>

368

</v-data-table>-->

368

</v-data-table>-->

369

</v-container>

369

</v-container>

370

</v-card>

370

</v-card>

371

</v-flex>

371

</v-flex>

372

373

373

374

<v-flex xs12 sm6>

374

<v-flex xs12 sm6>

375

<v-layout column>

375

<v-layout column>

376

376

377

<v-flex>

377

<v-flex>

378

<v-card class="card">

378

<v-card class="card">

379

<v-container>

379

<v-container>

380

<v-card-title class="justify-center title font-weight-bold">School Events</v-card-title>

380

<v-card-title class="justify-center title font-weight-bold">School Events</v-card-title>

381

<div

381

<div

382

v-for="(schoolEvent,index) in schoolEvents"

382

v-for="(schoolEvent,index) in schoolEvents"

383

:key="schoolEvent.title"

383

:key="schoolEvent.title"

384

class="mt-2"

384

class="mt-2"

385

style="cursor: pointer;"

385

style="cursor: pointer;"

386

@click="seeEventDetails(schoolEvent,'schoolEvent')"

386

@click="seeEventDetails(schoolEvent,'schoolEvent')"

387

>

387

>

388

388

389

<span

389

<span

390

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

390

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

391

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

391

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

392

></span>

392

></span>

393

393

394

<div>

394

<div>

395

395

396

<div

396

<div

397

class="grey--text lighten-1 caption"

397

class="grey--text lighten-1 caption"

398

v-if="schoolEvent.dateOfEvent"

398

v-if="schoolEvent.dateOfEvent"

399

>{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

399

>{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

400

400

401

<div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>

401

<div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>

402

</div>

402

</div>

403

</div>

403

</div>

404

</div>

404

</div>

405

405

406

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

406

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

407

</div>

407

</div>

408

</v-container>

408

</v-container>

409

</v-card>

409

</v-card>

410

</v-flex>

410

</v-flex>

411

411

412

<v-flex>

412

<v-flex>

413

<v-card>

413

<v-card>

414

<v-card-title class="justify-center title font-weight-bold" >Students</v-card-title>

414

415

415

<apexcharts

416

<apexcharts

416

type="donut"

417

type="donut"

417

:options="maleFemaleData"

418

:options="maleFemaleData"

418

:series="maleFemaleSeries"

419

:series="maleFemaleSeries"

419

/>

420

/>

420

</div>

421

</div>

421

</v-card>

422

</v-card>

422

</v-flex>

423

</v-flex>

423

</v-layout>

424

</v-layout>

424

</v-flex>

425

</v-flex>

425

</v-layout>

426

</v-layout>

426

427

428

428

<!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">

429

<!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">

429

<v-layout>

430

<v-layout>

430

<v-flex xs6 sm6 md6>

431

<v-flex xs6 sm6 md6>

431

432

432

<b>Notice</b>

433

<b>Notice</b>

433

</h4>

434

</h4>

434

<v-data-table

435

<v-data-table

435

:items="noticeData"

436

:items="noticeData"

436

class="elevation-0"

437

class="elevation-0"

437

flat

438

flat

438

hide-actions

439

hide-actions

439

hide-headers

440

hide-headers

440

style="border-spacing: 0 !important;"

441

style="border-spacing: 0 !important;"

441

>

442

>

442

<template

443

<template

443

slot="items"

444

slot="items"

444

slot-scope="props"

445

slot-scope="props"

445

v-if="props.index < 5"

446

v-if="props.index < 5"

446

style="border-spacing: 0 !important;"

447

style="border-spacing: 0 !important;"

447

>

448

>

448

449

449

<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>

450

<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>

450

<td>

451

<td>

451

<span class="grey--text caption">{{ date(props.item.created) }}</span>

452

<span class="grey--text caption">{{ date(props.item.created) }}</span>

452

<br />

453

<br />

453

<span class="body-2">{{ props.item.title}}</span>

454

<span class="body-2">{{ props.item.title}}</span>

454

</td>

455

</td>

455

<td class="grey--text mt-2">{{ props.item.description}}</td>

456

<td class="grey--text mt-2">{{ props.item.description}}</td>

456

457

458

458

<span>

459

<span>

459

<v-tooltip top>

460

<v-tooltip top>

460

<img

461

<img

461

slot="activator"

462

slot="activator"

462

style="cursor:pointer; width:25px; height:25px; "

463

style="cursor:pointer; width:25px; height:25px; "

463

@click="profile"

464

@click="profile"

464

src="/static/icon/view.png"

465

src="/static/icon/view.png"

465

/>

466

/>

466

467

467

</v-tooltip>

468

</v-tooltip>

468

</span>

469

</span>

469

</td>

470

</td>

470

</tr>

471

</tr>

471

</template>

472

</template>

472

</v-data-table>

473

</v-data-table>

473

</v-flex>

474

</v-flex>

474

475

<v-flex xs6 sm6 md6>

476

<v-flex xs6 sm6 md6>

476

<v-card-text>

477

<v-card-text>

477

<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>

478

<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>

478

<div

479

<div

479

v-for="(activity,index) in activityList"

480

v-for="(activity,index) in activityList"

480

:key="index"

481

:key="index"

481

class="mt-2"

482

class="mt-2"

482

style="cursor: pointer;"

483

style="cursor: pointer;"

483

@click="seeEventDetails(activity)"

484

@click="seeEventDetails(activity)"

484

>

485

>

485

<span

486

<span

486

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

487

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

487

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

488

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

488

></span>

489

></span>

489

490

490

<div>

491

<div>

491

<div

492

<div

492

class="grey--text lighten-1 caption"

493

class="grey--text lighten-1 caption"

493

v-if="activity.dateOfEvent"

494

v-if="activity.dateOfEvent"

494

>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>

495

>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>

495

<div class="body-2" v-if="activity.title">{{activity.title}}</div>

496

<div class="body-2" v-if="activity.title">{{activity.title}}</div>

496

</div>

497

</div>

497

</div>

498

</div>

498

</div>

499

</div>

499

500

500

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

501

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

501

</div>

502

</div>

502

</v-card-text>

503

</v-card-text>

503

</v-flex>

504

</v-flex>

504

</v-layout>

505

</v-layout>

505

</v-card>-->

506

</v-card>-->

506

507

508

508

<v-layout v-if="role == 'PARENT'">

509

<v-layout v-if="role == 'PARENT'">

509

<v-flex xs12>

510

<v-flex xs12>

510

<v-card class="elevation-0 account-Card">

511

<v-card class="elevation-0 account-Card">

511

<v-container>

512

<v-container>

512

<v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>

513

<v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>

513

<v-layout wrap>

514

<v-layout wrap>

514

<v-flex xs12 sm12>

515

<v-flex xs12 sm12>

515

<v-list two-line>

516

<v-list two-line>

516

517

517

<v-list-tile v-for="(course,i) in courseData" :key="i">

518

<v-list-tile v-for="(course,i) in courseData" :key="i">

518

<v-list-tile-avatar>

519

<v-list-tile-avatar>

519

<!-- <v-icon

520

<!-- <v-icon

520

class="account-circle darkBlue-color"

521

class="account-circle darkBlue-color"

521

style="cursor: pointer;"

522

style="cursor: pointer;"

522

@click="routeToCourseDetails(course._id)"

523

@click="routeToCourseDetails(course._id)"

523

>panorama_fish_eye</v-icon>-->

524

>panorama_fish_eye</v-icon>-->

524

<span>

525

<span>

525

<v-tooltip top>

526

<v-tooltip top>

526

<img

527

<img

527

slot="activator"

528

slot="activator"

528

style="cursor:pointer; width:25px; height:25px; "

529

style="cursor:pointer; width:25px; height:25px; "

529

src="/static/icon/view.png"

530

src="/static/icon/view.png"

530

@click="routeToCourseDetails(course._id)"

531

@click="routeToCourseDetails(course._id)"

531

/>

532

/>

532

533

533

</v-tooltip>

534

</v-tooltip>

534

</span>

535

</span>

535

</v-list-tile-avatar>

536

</v-list-tile-avatar>

536

<v-list-tile-content>

537

<v-list-tile-content>

537

<v-list-tile-title

538

<v-list-tile-title

538

style="cursor: pointer;"

539

style="cursor: pointer;"

539

@click="routeToCourseDetails(course._id)"

540

@click="routeToCourseDetails(course._id)"

540

>{{ course.courseName }}</v-list-tile-title>

541

>{{ course.courseName }}</v-list-tile-title>

541

</v-list-tile-content>

542

</v-list-tile-content>

542

</v-list-tile>

543

</v-list-tile>

543

</template>

544

</template>

544

</v-list>

545

</v-list>

545

</v-flex>

546

</v-flex>

546

</v-layout>

547

</v-layout>

547

</v-container>

548

</v-container>

548

</v-card>

549

</v-card>

549

</v-flex>

550

</v-flex>

550

</v-layout>

551

</v-layout>

551

552

<v-layout row wrap v-if="role == 'PARENT'">

553

<v-layout row wrap v-if="role == 'PARENT'">

553

554

554

<v-flex xs6>

555

<v-flex xs6>

555

<v-card class="card">

556

<v-card class="card">

556

<v-container>

557

<v-container>

557

<v-card-title

558

<v-card-title

558

class="justify-center subheading font-weight-bold"

559

class="justify-center subheading font-weight-bold"

559

>Latest Announcements</v-card-title>

560

>Latest Announcements</v-card-title>

560

561

<v-data-table

562

<v-data-table

562

:items="annoucementData"

563

:items="annoucementData"

563

class="elevation-0"

564

class="elevation-0"

564

flat

565

flat

565

hide-actions

566

hide-actions

566

hide-headers

567

hide-headers

567

style="border-spacing: 0 !important;"

568

style="border-spacing: 0 !important;"

568

>

569

>

569

<template

570

<template

570

slot="items"

571

slot="items"

571

slot-scope="props"

572

slot-scope="props"

572

v-if="props.index < 5"

573

v-if="props.index < 5"

573

style="border-spacing: 0 !important;"

574

style="border-spacing: 0 !important;"

574

>

575

>

575

576

576

<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>

577

<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>

577

<td>

578

<td>

578

<span class="grey--text caption">{{ date(props.item.created) }}</span>

579

<span class="grey--text caption">{{ date(props.item.created) }}</span>

579

<br />

580

<br />

580

<span class="body-2">{{ props.item.discussionType}}</span>

581

<span class="body-2">{{ props.item.discussionType}}</span>

581

</td>

582

</td>

582

583

583

<span>

584

<span>

584

<v-tooltip top>

585

<v-tooltip top>

585

<img

586

<img

586

slot="activator"

587

slot="activator"

587

style="cursor:pointer; width:25px; height:25px; "

588

style="cursor:pointer; width:25px; height:25px; "

588

src="/static/icon/view.png"

589

src="/static/icon/view.png"

589

/>

590

/>

590

591

591

</v-tooltip>

592

</v-tooltip>

592

</span>

593

</span>

593

</td>

594

</td>

594

</tr>

595

</tr>

595

</template>

596

</template>

596

</v-data-table>

597

</v-data-table>

597

</v-container>

598

</v-container>

598

</v-card>

599

</v-card>

599

</v-flex>

600

</v-flex>

600

601

601

<v-flex xs6>

602

<v-flex xs6>

602

<v-card class="card">

603

<v-card class="card">

603

<v-container>

604

<v-container>

604

<v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>

605

<v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>

605

<div

606

<div

606

v-for="(schoolEvent,index) in schoolEvents"

607

v-for="(schoolEvent,index) in schoolEvents"

607

:key="schoolEvent.title"

608

:key="schoolEvent.title"

608

class="mt-2"

609

class="mt-2"

609

style="cursor: pointer;"

610

style="cursor: pointer;"

610

@click="seeEventDetails(schoolEvent,'schoolEvent')"

611

@click="seeEventDetails(schoolEvent,'schoolEvent')"

611

>

612

>

612

613

613

<span

614

<span

614

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

615

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

615

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

616

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

616

></span>

617

></span>

617

618

618

<div>

619

<div>

619

620

620

<div

621

<div

621

class="grey--text lighten-1 caption"

622

class="grey--text lighten-1 caption"

622

v-if="schoolEvent.dateOfEvent"

623

v-if="schoolEvent.dateOfEvent"

623

>{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

624

>{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

624

625

625

<div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>

626

<div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>

626

</div>

627

</div>

627

</div>

628

</div>

628

</div>

629

</div>

629

630

630

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

631

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

631

</div>

632

</div>

632

</v-container>

633

</v-container>

633

</v-card>

634

</v-card>

634

</v-flex>

635

</v-flex>

636

637

<!-- <v-flex xs12>

638

<v-card>

639

<v-card-title class="justify-center title font-weight-bold">Students</v-card-title>

640

<v-card-text>

641

642

</v-card-text>

643

</v-card>

644

</v-flex> -->

635

645

636

<!-- <v-flex xs6>

646

<!-- <v-flex xs6>

637

<v-card class="card">

647

<v-card class="card">

638

<v-container>

648

<v-container>

639

<v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>

649

<v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>

640

650

641

<v-data-table

651

<v-data-table

642

:items="onlineUser"

652

:items="onlineUser"

643

class="elevation-0"

653

class="elevation-0"

644

flat

654

flat

645

hide-actions

655

hide-actions

646

hide-headers

656

hide-headers

647

style="border-spacing: 0 !important;"

657

style="border-spacing: 0 !important;"

648

>

658

>

649

<template

659

<template

650

slot="items"

660

slot="items"

651

slot-scope="props"

661

slot-scope="props"

652

v-if="props.index < 5"

662

v-if="props.index < 5"

653

style="border-spacing: 0 !important;"

663

style="border-spacing: 0 !important;"

654

>

664

>

655

665

656

<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>

666

<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>

657

<td>

667

<td>

658

<span class="body-2">{{ props.item.user }}</span>

668

<span class="body-2">{{ props.item.user }}</span>

659

</td>

669

</td>

660

670

661

<span>

671

<span>

662

<v-tooltip top>

672

<v-tooltip top>

663

<img

673

<img

664

slot="activator"

674

slot="activator"

665

style="cursor:pointer; width:25px; height:25px; "

675

style="cursor:pointer; width:25px; height:25px; "

666

src="/static/icon/view.png"

676

src="/static/icon/view.png"

667

/>

677

/>

668

678

669

</v-tooltip>

679

</v-tooltip>

670

</span>

680

</span>

671

</td>

681

</td>

672

</tr>

682

</tr>

673

</template>

683

</template>

674

</v-data-table>

684

</v-data-table>

675

</v-container>

685

</v-container>

676

</v-card>

686

</v-card>

677

</v-flex>-->

687

</v-flex>-->

678

</v-layout>

688

</v-layout>

679

</v-container>

689

</v-container>

680

</v-flex>

690

</v-flex>

681

<v-spacer></v-spacer>

691

<v-spacer></v-spacer>

682

692

683

<v-flex xs12 sm12 md4>

693

<v-flex xs12 sm12 md4>

684

<v-card height="100%" class="elevation-0 mt-3 profileDasboard">

694

<v-card height="100%" class="elevation-0 mt-3 profileDasboard">

685

<v-card-text class="px-2">

695

<v-card-text class="px-2">

686

696

687

<b>Profile</b>

697

<b>Profile</b>

688

</h4>

698

</h4>

689

<v-flex xs12 class="py-3">

699

<v-flex xs12 class="py-3">

690

<v-layout wrap>

700

<v-layout wrap>

691

<v-flex xs12 sm12 md4>

701

<v-flex xs12 sm12 md4>

692

<img

702

<img

693

src="/static/icon/user.png"

703

src="/static/icon/user.png"

694

v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"

704

v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"

695

width="80"

705

width="80"

696

/>

706

/>

697

<img

707

<img

698

:src="userData.profilePicUrl"

708

:src="userData.profilePicUrl"

699

onerror="this.src='/static/icon/user.png';"

709

onerror="this.src='/static/icon/user.png';"

700

v-if="userData.profilePicUrl"

710

v-if="userData.profilePicUrl"

701

width="80"

711

width="80"

702

/>

712

/>

703

<img

713

<img

704

:src="userData.schoolLogoUrl"

714

:src="userData.schoolLogoUrl"

705

onerror="this.src='/static/icon/user.png';"

715

onerror="this.src='/static/icon/user.png';"

706

v-if="userData.schoolLogoUrl"

716

v-if="userData.schoolLogoUrl"

707

width="80"

717

width="80"

708

/>

718

/>

709

</v-flex>

719

</v-flex>

710

<v-flex xs12 sm12 md6>

720

<v-flex xs12 sm12 md6>

711

721

712

<i>{{ userData.name }}</i>

722

<i>{{ userData.name }}</i>

713

</p>

723

</p>

714

<p class="mb-0 caption grey--text">{{ userData.email }}</p>

724

<p class="mb-0 caption grey--text">{{ userData.email }}</p>

715

<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>

725

<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>

716

<address class="caption grey--text mb-3">{{ userData.address }}</address>

726

<address class="caption grey--text mb-3">{{ userData.address }}</address>

717

</v-flex>

727

</v-flex>

718

</v-layout>

728

</v-layout>

719

</v-flex>

729

</v-flex>

720

<hr />

730

<hr />

721

<div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>

731

<div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>

722

732

723

<vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>

733

<vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>

724

734

725

735

726

736

727

<v-card class="my-3 elevation-0">

737

<v-card class="my-3 elevation-0">

728

<v-card-text v-if="$store.state.role === 'ADMIN' ">

738

<v-card-text v-if="$store.state.role === 'ADMIN' ">

729

739

730

<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>

740

<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>

731

<div

741

<div

732

v-for="(activity,index) in activityList"

742

v-for="(activity,index) in activityList"

733

:key="index"

743

:key="index"

734

class="mt-2"

744

class="mt-2"

735

style="cursor: pointer;"

745

style="cursor: pointer;"

736

@click="seeEventDetails(activity)"

746

@click="seeEventDetails(activity)"

737

>

747

>

738

<span

748

<span

739

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

749

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

740

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

750

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

741

></span>

751

></span>

742

752

743

<div>

753

<div>

744

<div

754

<div

745

class="grey--text lighten-1 caption"

755

class="grey--text lighten-1 caption"

746

v-if="activity.dateOfEvent"

756

v-if="activity.dateOfEvent"

747

>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>

757

>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>

748

<div class="body-1" v-if="activity.title">{{activity.title}}</div>

758

<div class="body-1" v-if="activity.title">{{activity.title}}</div>

749

</div>

759

</div>

750

</div>

760

</div>

751

</div>

761

</div>

752

762

753

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

763

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

754

</div>

764

</div>

755

</v-card-text>

765

</v-card-text>

756

766

757

767

758

<v-card-text v-if="$store.state.role != 'ADMIN'">

768

<v-card-text v-if="$store.state.role != 'ADMIN'">

759

<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>

769

<v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>

760

<div

770

<div

761

v-for="(activity,index) in activityList"

771

v-for="(activity,index) in activityList"

762

:key="index"

772

:key="index"

763

class="mt-2"

773

class="mt-2"

764

style="cursor: pointer;"

774

style="cursor: pointer;"

765

@click="seeEventDetails(activity)"

775

@click="seeEventDetails(activity)"

766

>

776

>

767

<span

777

<span

768

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

778

:style="{ 'background-color': colorsArray[index%colorsArray.length] }"

769

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

779

style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"

770

></span>

780

></span>

771

781

772

782

773

783

774

<div

784

<div

775

class="grey--text lighten-1 caption"

785

class="grey--text lighten-1 caption"

776

v-if="activity.meetingEvent"

786

v-if="activity.meetingEvent"

777

>{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

787

>{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>

778

<div

788

<div

779

class="body-2"

789

class="body-2"

780

v-if="activity.meetingEvent"

790

v-if="activity.meetingEvent"

781

>{{activity.meetingEvent.title}}</div>

791

>{{activity.meetingEvent.title}}</div>

782

</div>

792

</div>

783

793

784

794

785

795

786

<div

796

<div

787

class="grey--text lighten-1 caption"

797

class="grey--text lighten-1 caption"

788

v-if="activity.dateOfEvent"

798

v-if="activity.dateOfEvent"

789

>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>

799

>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>

790

<div class="body-2" v-if="activity.title">{{activity.title}}</div>

800

<div class="body-2" v-if="activity.title">{{activity.title}}</div>

791

</div>

801

</div>

792

</div>

802

</div>

793

803

794

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

804

<p class="text-center title grey lighten-4 error--text">No Data Found!</p>

795

</div>

805

</div>

796

</div>

806

</div>

797

</v-card-text>

807

</v-card-text>

798

</v-card>

808

</v-card>

799

</v-card-text>

809

</v-card-text>

800

</v-card>

810

</v-card>

801

</v-flex>

811

</v-flex>

802

</v-layout>

812

</v-layout>

803

813

804

<v-dialog v-model="dialog" max-width="500" persistent>

814

<v-dialog v-model="dialog" max-width="500" persistent>

805

<v-card color="grey lighten-4" flat>

815

<v-card color="grey lighten-4" flat>

806

<v-toolbar dark color="fixcolors">

816

<v-toolbar dark color="fixcolors">

807

<v-spacer></v-spacer>

817

<v-spacer></v-spacer>

808

<v-btn icon @click="dialog= false">

818

<v-btn icon @click="dialog= false">

809

<v-icon>close</v-icon>

819

<v-icon>close</v-icon>

810

</v-btn>

820

</v-btn>

811

</v-toolbar>

821

</v-toolbar>

812

<v-flex class="py-4">

822

<v-flex class="py-4">

813

<v-list-tile>

823

<v-list-tile>

814

<v-list-tile-action>

824

<v-list-tile-action>

815

<v-icon>edit</v-icon>

825

<v-icon>edit</v-icon>

816

</v-list-tile-action>

826

</v-list-tile-action>

817

<v-list-tile-content>

827

<v-list-tile-content>

818

<v-list-tile-title>{{ selected.title }}</v-list-tile-title>

828

<v-list-tile-title>{{ selected.title }}</v-list-tile-title>

819

</v-list-tile-content>

829

</v-list-tile-content>

820

</v-list-tile>

830

</v-list-tile>

821

<v-list-tile>

831

<v-list-tile>

822

<v-list-tile-action>

832

<v-list-tile-action>

823

<v-icon>access_time</v-icon>

833

<v-icon>access_time</v-icon>

824

</v-list-tile-action>

834

</v-list-tile-action>

825

<v-list-tile-content>

835

<v-list-tile-content>

826

<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>

836

<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>

827

</v-list-tile-content>

837

</v-list-tile-content>

828

</v-list-tile>

838

</v-list-tile>

829

</v-flex>

839

</v-flex>

830

</v-card>

840

</v-card>

831

</v-dialog>

841

</v-dialog>

832

</v-app>

842

</v-app>

833

</template>

843

</template>

834

844

835

845

836

import http from "@/Services/http.js";

846

import http from "@/Services/http.js";

837

import moment from "moment";

847

import moment from "moment";

838

import AllApiCalls from "@/Services/AllApiCalls.js";

848

import AllApiCalls from "@/Services/AllApiCalls.js";

839

import VueApexCharts from "vue-apexcharts";

849

import VueApexCharts from "vue-apexcharts";

840

// import { FunctionalCalendar } from "vue-functional-calendar";

850

// import { FunctionalCalendar } from "vue-functional-calendar";

841

851

842

export default {

852

export default {

843

components: {

853

components: {

844

apexcharts: VueApexCharts,

854

apexcharts: VueApexCharts,

845

},

855

},

846

mixins: [AllApiCalls],

856

mixins: [AllApiCalls],

847

data() {

857

data() {

848

return {

858

return {

849

today: new Date(),

859

studentsData: [],

850

// data: {

860

// data: {

851

// clieckedToday: false

861

// clieckedToday: false

852

// },

862

// },

853

// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],

863

// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],

854

// calendarData: {},

864

// calendarData: {},

855

// calendar: {},

865

// calendar: {},

856

866

857

// DIALOG BOX EVENT DETAILS

867

// DIALOG BOX EVENT DETAILS

858

tabs: [

868

tabs: [

859

{ name: "School Events", icon: "mdi-account" },

869

{ name: "School Events", icon: "mdi-account" },

860

{ name: "Meeting Events", icon: "mdi-account-outline" },

870

{ name: "Meeting Events", icon: "mdi-account-outline" },

861

],

871

],

862

viewEventDetails: false,

872

viewEventDetails: false,

863

active: 0,

873

active: 0,

864

particularEvent: [],

874

particularEvent: [],

865

displayEventsList: [],

875

displayEventsList: [],

866

dialogSchoolEvents: [],

876

dialogSchoolEvents: [],

867

dialogMeetingEvents: [],

877

dialogMeetingEvents: [],

868

878

869

// apexCharts

879

// apexCharts

870

maleFemaleSeries: [],

880

maleFemaleSeries: [],

871

maleFemaleData: {

881

maleFemaleData: {

872

labels: ["Male", "Female"],

882

labels: ["Male", "Female"],

873

legend: {

883

legend: {

874

formatter: function (val, opts) {

884

formatter: function (val, opts) {

875

return val + " - " + opts.w.globals.series[opts.seriesIndex];

885

return val + " - " + opts.w.globals.series[opts.seriesIndex];

876

},

886

},

877

position: 'bottom',

887

position: 'bottom',

878

},

888

},

879

dataLabels: {

889

dataLabels: {

880

enabled: true,

890

enabled: true,

881

formatter: function (val,opts) {

891

formatter: function (val,opts) {

882

return opts.w.globals.series[opts.seriesIndex];

892

return opts.w.globals.series[opts.seriesIndex];

883

},

893

},

884

},

894

},

885

},

895

},

886

896

887

// CALENDER

897

// CALENDER

888

moment: moment,

898

moment: moment,

889

activityEvents: [],

899

activityEvents: [],

890

onlineUser: [

900

onlineUser: [

891

{

901

{

892

user: "Student Demo",

902

user: "Student Demo",

893

},

903

},

894

{

904

{

895

user: "Teacher Demo",

905

user: "Teacher Demo",

896

},

906

},

897

{

907

{

898

user: "Priyansh Gupta",

908

user: "Priyansh Gupta",

899

},

909

},

900

{

910

{

901

user: "Gaurav Aggarwal",

911

user: "Gaurav Aggarwal",

902

},

912

},

903

{

913

{

904

user: "Approve Arorra",

914

user: "Approve Arorra",

905

},

915

},

906

],

916

],

907

showLoader: false,

917

showLoader: false,

908

calendarData: {},

918

calendarData: {},

909

dialog: false,

919

dialog: false,

910

dialogNotice: false,

920

dialogNotice: false,

911

HolidaysList: [],

921

HolidaysList: [],

912

EventsList: [],

922

EventsList: [],

913

events: [],

923

events: [],

914

config: {

924

config: {

915

eventClick: (event) => {

925

eventClick: (event) => {

916

this.selected = event;

926

this.selected = event;

917

this.dialog = true;

927

this.dialog = true;

918

},

928

},

919

},

929

},

920

selected: {},

930

selected: {},

921

barGraph: [],

931

barGraph: [],

922

// notice: {},

932

// notice: {},

923

userData: {},

933

userData: {},

924

dated: new Date(2018, 0, 9),

934

dated: new Date(2018, 0, 9),

925

userList: [],

935

userList: [],

926

sectionList: [],

936

sectionList: [],

927

students: "",

937

students: "",

928

parents: "",

938

parents: "",

929

teachers: "",

939

teachers: "",

930

classes: "",

940

classes: "",

931

noticeData: [],

941

noticeData: [],

932

expenseData: [],

942

expenseData: [],

933

feeData: [],

943

feeData: [],

934

collectionData: [],

944

collectionData: [],

935

courseData: [],

945

courseData: [],

936

studentsData: [],

946

studentsData: [],

947

activeStudent: {},

937

annoucementData: [],

948

annoucementData: [],

938

role: "",

949

role: "",

939

attrs: [

950

attrs: [

940

{

951

{

941

key: "today",

952

key: "today",

942

highlight: true,

953

highlight: true,

943

dates: new Date(),

954

dates: new Date(),

944

},

955

},

945

],

956

],

946

drawer: true,

957

drawer: true,

947

items: [

958

items: [

948

{ title: "Home", icon: "dashboard" },

959

{ title: "Home", icon: "dashboard" },

949

{ title: "About", icon: "question_answer" },

960

{ title: "About", icon: "question_answer" },

950

],

961

],

951

right: null,

962

right: null,

952

963

953

series: [

964

series: [

954

{

965

{

955

966

956

data: [],

967

data: [],

957

},

968

},

958

],

969

],

959

showChart: false,

970

showChart: false,

960

chartOptions: {

971

chartOptions: {

961

chart: {

972

chart: {

962

type: "bar",

973

type: "bar",

963

height: 150,

974

height: 150,

964

stacked: true,

975

stacked: true,

965

// animations: {

976

// animations: {

966

// enabled: true,

977

// enabled: true,

967

// easing: "easeinout",

978

// easing: "easeinout",

968

// speed: 1200,

979

// speed: 1200,

969

// animateGradually: {

980

// animateGradually: {

970

// enabled: true,

981

// enabled: true,

971

// delay: 450

982

// delay: 450

972

// },

983

// },

973

// dynamicAnimation: {

984

// dynamicAnimation: {

974

// enabled: true,

985

// enabled: true,

975

// speed: 450

986

// speed: 450

976

// }

987

// }

977

// }

988

// }

978

},

989

},

979

plotOptions: {

990

plotOptions: {

980

bar: {

991

bar: {

981

horizontal: false,

992

horizontal: false,

982

columnWidth: "25%",

993

columnWidth: "25%",

983

// endingShape: "rounded",

994

// endingShape: "rounded",

984

distributed: true,

995

distributed: true,

985

},

996

},

986

},

997

},

987

responsive: [

998

responsive: [

988

{

999

{

989

breakpoint: 480,

1000

breakpoint: 480,

990

options: {

1001

options: {

991

legend: {

1002

legend: {

992

position: "bottom",

1003

position: "bottom",

993

offsetX: -10,

1004

offsetX: -10,

994

offsetY: 0,

1005

offsetY: 0,

995

},

1006

},

996

},

1007

},

997

},

1008

},

998

],

1009

],

999

legend: {

1010

legend: {

1000

show: false,

1011

show: false,

1001

},

1012

},

1002

colors: ["#7852cc", "#f9a825", "#ff8a89"],

1013

colors: ["#7852cc", "#f9a825", "#ff8a89"],

1003

dataLabels: {

1014

dataLabels: {

1004

enabled: false,

1015

enabled: false,

1005

},

1016

},

1006

stroke: {

1017

stroke: {

1007

show: true,

1018

show: true,

1008

width: 2,

1019

width: 2,

1009

colors: ["transparent"],

1020

colors: ["transparent"],

1010

},

1021

},

1011

xaxis: {

1022

xaxis: {

1012

categories: ["Fee", "Collections", "Expences"],

1023

categories: ["Fee", "Collections", "Expences"],

1013

},

1024

},

1014

yaxis: {

1025

yaxis: {

1015

title: {

1026

title: {

1016

text: "",

1027

text: "",

1017

},

1028

},

1018

},

1029

},

1019

fill: {

1030

fill: {

1020

opacity: 1,

1031

opacity: 1,

1021

},

1032

},

1022

tooltip: {

1033

tooltip: {

1023

y: {

1034

y: {

1024

formatter: function (val, opts) {

1035

formatter: function (val, opts) {

1025

return "" + val + " ";

1036

return "" + val + " ";

1026

},

1037

},

1027

},

1038

},

1028

},

1039

},

1029

},

1040

},

1030

1041

1031

// LATEST ACTIVITY

1042

// LATEST ACTIVITY

1032

colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],

1043

colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],

1033

activityList: [],

1044

activityList: [],

1034

};

1045

};

1035

},

1046

},

1036

1047

1037

methods: {

1048

methods: {

1038

test(e) {

1049

test(e) {

1039

// console.log(" test - ", e);

1050

// console.log(" test - ", e);

1040

},

1051

},

1041

1052

1042

/*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */

1053

/*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */

1043

async handleDayChanged(e) {

1054

async handleDayChanged(e) {

1044

// console.log("event calender - ", e);

1055

// console.log("event calender - ", e);

1045

/*the list of events that will be used in dialog box to display events */

1056

/*the list of events that will be used in dialog box to display events */

1046

1057

1047

this.dialogMeetingEvents = [];

1058

this.dialogMeetingEvents = [];

1048

this.dialogSchoolEvents = [];

1059

this.dialogSchoolEvents = [];

1049

1060

1050

for (var i = 0; i < e.events.length; i++) {

1061

for (var i = 0; i < e.events.length; i++) {

1051

if (e.events[i].eventType == "meetingEvent") {

1062

if (e.events[i].eventType == "meetingEvent") {

1052

let meetingEventResponse = await this.getParticularMeetingEvent({

1063

let meetingEventResponse = await this.getParticularMeetingEvent({

1053

meetingEventId: e.events[i]._id,

1064

meetingEventId: e.events[i]._id,

1054

});

1065

});

1055

this.dialogMeetingEvents.push(meetingEventResponse.data.data);

1066

this.dialogMeetingEvents.push(meetingEventResponse.data.data);

1056

}

1067

}

1057

if (e.events[i].eventType == "schoolEvent") {

1068

if (e.events[i].eventType == "schoolEvent") {

1058

let schoolEventResponse = await this.getParticularSchoolEvent({

1069

let schoolEventResponse = await this.getParticularSchoolEvent({

1059

schoolEventId: e.events[i]._id,

1070

schoolEventId: e.events[i]._id,

1060

});

1071

});

1061

this.dialogSchoolEvents.push(schoolEventResponse.data.data);

1072

this.dialogSchoolEvents.push(schoolEventResponse.data.data);

1062

}

1073

}

1063

}

1074

}

1064

/* Opens the dialog box */

1075

/* Opens the dialog box */

1065

this.viewEventDetails = true;

1076

this.viewEventDetails = true;

1066

},

1077

},

1067

1078

1068

/* see meeting events, school events individually (when calender is not clicked) */

1079

/* see meeting events, school events individually (when calender is not clicked) */

1069

async seeEventDetails(activity, message) {

1080

async seeEventDetails(activity, message) {

1070

// if (this.$store.state.role === "TEACHER") {

1081

// if (this.$store.state.role === "TEACHER") {

1071

// let response = await this.getParticularMeetingEvent({

1082

// let response = await this.getParticularMeetingEvent({

1072

// meetingEventId: activity._id,

1083

// meetingEventId: activity._id,

1073

// });

1084

// });

1074

// this.displayEventsList = [];

1085

// this.displayEventsList = [];

1075

// this.displayEventsList.push(response.data.data);

1086

// this.displayEventsList.push(response.data.data);

1076

// this.viewEventDetails = true;

1087

// this.viewEventDetails = true;

1077

// }

1088

// }

1078

if (this.$store.state.role === "PARENT") {

1089

if (this.$store.state.role === "PARENT") {

1079

if (message == "schoolEvent") {

1090

if (message == "schoolEvent") {

1080

let response = await this.getParticularSchoolEvent({

1091

let response = await this.getParticularSchoolEvent({

1081

schoolEventId: activity._id,

1092

schoolEventId: activity._id,

1082

});

1093

});

1083

this.displayEventsList = [];

1094

this.displayEventsList = [];

1084

this.displayEventsList.push(response.data.data);

1095

this.displayEventsList.push(response.data.data);

1085

} else {

1096

} else {

1086

let response = await this.getParticularMeetingEvent({

1097

let response = await this.getParticularMeetingEvent({

1087

meetingEventId: activity.meetingEvent._id,

1098

meetingEventId: activity.meetingEvent._id,

1088

});

1099

});

1089

this.displayEventsList = [];

1100

this.displayEventsList = [];

1090

this.displayEventsList.push(response.data.data);

1101

this.displayEventsList.push(response.data.data);

1091

}

1102

}

1092

this.viewEventDetails = true;

1103

this.viewEventDetails = true;

1093

}

1104

}

1094

if (

1105

if (

1095

this.$store.state.role === "ADMIN" ||

1106

this.$store.state.role === "ADMIN" ||

1096

this.$store.state.role === "TEACHER"

1107

this.$store.state.role === "TEACHER"

1097

) {

1108

) {

1098

if (message == "schoolEvent") {

1109

if (message == "schoolEvent") {

1099

let response = await this.getParticularSchoolEvent({

1110

let response = await this.getParticularSchoolEvent({

1100

schoolEventId: activity._id,

1111

schoolEventId: activity._id,

1101

});

1112

});

1102

this.displayEventsList = [];

1113

this.displayEventsList = [];

1103

this.displayEventsList.push(response.data.data);

1114

this.displayEventsList.push(response.data.data);

1104

} else {

1115

} else {

1105

let response = await this.getParticularMeetingEvent({

1116

let response = await this.getParticularMeetingEvent({

1106

meetingEventId: activity._id,

1117

meetingEventId: activity._id,

1107

});

1118

});

1108

this.displayEventsList = [];

1119

this.displayEventsList = [];

1109

this.displayEventsList.push(response.data.data);

1120

this.displayEventsList.push(response.data.data);

1110

}

1121

}

1111

this.viewEventDetails = true;

1122

this.viewEventDetails = true;

1112

}

1123

}

1113

},

1124

},

1114

async routeToCourseDetails(courseId) {

1125

async routeToCourseDetails(courseId) {

1115

/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/

1126

/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/

1116

let response = await this.getParticularCourseDetail(courseId);

1127

let response = await this.getParticularCourseDetail(courseId);

1117

1128

1118

/* If the response is null then dont route */

1129

/* If the response is null then dont route */

1119

if (response.data.data.length > 0) {

1130

if (response.data.data.length > 0) {

1120

this.$router.push({

1131

this.$router.push({

1121

1132

1122

query: { courseId: courseId },

1133

query: { courseId: courseId },

1123

});

1134

});

1124

} else {

1135

} else {

1125

this.seeSnackbar("No Data Available", "warning");

1136

this.seeSnackbar("No Data Available", "warning");

1126

}

1137

}

1127

},

1138

},

1128

1139

1129

closeNotice() {

1140

closeNotice() {

1130

this.dialogNotice = false;

1141

this.dialogNotice = false;

1131

},

1142

},

1132

profile() {

1143

profile() {

1133

// this.editedIndex = this.desserts.indexOf(item);

1144

// this.editedIndex = this.desserts.indexOf(item);

1134

// this.notice = Object.assign({}, item);

1145

// this.notice = Object.assign({}, item);

1135

// this.dialogNotice = true;

1146

// this.dialogNotice = true;

1136

this.$router.push("/noticeBoard");

1147

this.$router.push("/noticeBoard");

1137

},

1148

},

1138

date: function (date) {

1149

date: function (date) {

1139

return moment(date).format("MMMM DD, YYYY HH:mm");

1150

return moment(date).format("MMMM DD, YYYY HH:mm");

1140

},

1151

},

1141

activityDate(date) {

1152

activityDate(date) {

1142

return moment(date).format("MMMM DD, YYYY");

1153

return moment(date).format("MMMM DD, YYYY");

1143

},

1154

},

1144

refreshEvents() {

1155

refreshEvents() {

1145

this.$refs.calendar.$emit("refetch-events");

1156

this.$refs.calendar.$emit("refetch-events");

1146

},

1157

},

1147

removeEvent() {

1158

removeEvent() {

1148

this.$refs.calendar.$emit("remove-event", this.selected);

1159

this.$refs.calendar.$emit("remove-event", this.selected);

1149

this.selected = {};

1160

this.selected = {};

1150

},

1161

},

1151

eventSelected(event) {

1162

eventSelected(event) {

1152

this.selected = event;

1163

this.selected = event;

1153

},

1164

},

1154

// eventDropStart: function(event) {

1165

// eventDropStart: function(event) {

1155

// event.editable = false;

1166

// event.editable = false;

1156

// },

1167

// },

1157

eventCreated(...test) {

1168

eventCreated(...test) {

1158

// console.log(test);

1169

// console.log(test);

1159

},

1170

},

1160

getStudents() {

1171

getStudents() {

1161

http()

1172

http()

1162

.get("/getStudentsList")

1173

.get("/getStudentsList")

1163

.then((response) => {

1174

.then((response) => {

1164

this.students = response.data.data;

1175

this.students = response.data.data;

1165

this.showLoader = false;

1176

this.showLoader = false;

1166

})

1177

})

1167

.catch((error) => {

1178

.catch((error) => {

1168

// console.log("err====>", err);

1179

// console.log("err====>", err);

1169

this.showLoader = false;

1180

this.showLoader = false;

1170

if (error.response.status === 401) {

1181

if (error.response.status === 401) {

1171

this.$router.replace({ path: "/" });

1182

this.$router.replace({ path: "/" });

1172

this.$store.dispatch("setToken", null);

1183

this.$store.dispatch("setToken", null);

1173

this.$store.dispatch("Id", null);

1184

this.$store.dispatch("Id", null);

1174

}

1185

}

1175

});

1186

});

1176

},

1187

},

1177

getParents() {

1188

getParents() {

1178

http()

1189

http()

1179

.get("/getParentsList")

1190

.get("/getParentsList")

1180

.then((response) => {

1191

.then((response) => {

1181

this.parents = response.data.data;

1192

this.parents = response.data.data;

1182

this.showLoader = false;

1193

this.showLoader = false;

1183

})

1194

})

1184

.catch((error) => {

1195

.catch((error) => {

1185

// console.log("err====>", err);

1196

// console.log("err====>", err);

1186

this.showLoader = false;

1197

this.showLoader = false;

1187

});

1198

});

1188

},

1199

},

1189

getTeachers() {

1200

getTeachers() {

1190

http()

1201

http()

1191

.get("/getTeachersList")

1202

.get("/getTeachersList")

1192

.then((response) => {

1203

.then((response) => {

1193

this.teachers = response.data.data;

1204

this.teachers = response.data.data;

1194

this.showLoader = false;

1205

this.showLoader = false;

1195

})

1206

})

1196

.catch((error) => {

1207

.catch((error) => {

1197

// console.log("err====>", err);

1208

// console.log("err====>", err);

1198

this.showLoader = false;

1209

this.showLoader = false;

1199

});

1210

});

1200

},

1211

},

1201

getClasses() {

1212

getClasses() {

1202

http()

1213

http()

1203

.get("/getClassesList")

1214

.get("/getClassesList")

1204

.then((response) => {

1215

.then((response) => {

1205

this.classes = response.data.data;

1216

this.classes = response.data.data;

1206

this.showLoader = false;

1217

this.showLoader = false;

1207

})

1218

})

1208

.catch((error) => {

1219

.catch((error) => {

1209

this.showLoader = false;

1220

this.showLoader = false;

1210

});

1221

});

1211

},

1222

},

1212

getNoticeData() {

1223

getNoticeData() {

1213

this.showLoader = true;

1224

this.showLoader = true;

1214

http()

1225

http()

1215

.get("/getEventsList")

1226

.get("/getEventsList")

1216

.then((response) => {

1227

.then((response) => {

1217

this.noticeData = response.data.data;

1228

this.noticeData = response.data.data;

1218

this.showLoader = false;

1229

this.showLoader = false;

1219

})

1230

})

1220

.catch((error) => {

1231

.catch((error) => {

1221

this.showLoader = false;

1232

this.showLoader = false;

1222

});

1233

});

1223

},

1234

},

1224

getUserData() {

1235

getUserData() {

1225

// this.showLoader = true;

1236

// this.showLoader = true;

1226

if (this.$store.state.role === "PARENT") {

1237

if (this.$store.state.role === "PARENT") {

1227

http()

1238

http()

1228

.get("/getParticularUserDetail", {

1239

.get("/getParticularUserDetail", {

1229

params: {

1240

params: {

1230

studentId: localStorage.getItem("parentStudentId"),

1241

studentId: localStorage.getItem("parentStudentId"),

1231

},

1242

},

1232

})

1243

})

1233

.then((response) => {

1244

.then((response) => {

1234

this.userData = response.data.data;

1245

this.userData = response.data.data;

1235

this.showLoader = false;

1246

this.showLoader = false;

1236

})

1247

})

1237

.catch((error) => {

1248

.catch((error) => {

1238

this.showLoader = false;

1249

this.showLoader = false;

1239

});

1250

});

1240

} else {

1251

} else {

1241

http()

1252

http()

1242

.get("/getParticularUserDetail")

1253

.get("/getParticularUserDetail")

1243

.then((response) => {

1254

.then((response) => {

1244

this.userData = response.data.data;

1255

this.userData = response.data.data;

1245

this.showLoader = false;

1256

this.showLoader = false;

1246

})

1257

})

1247

.catch((error) => {

1258

.catch((error) => {

1248

this.showLoader = false;

1259

this.showLoader = false;

1249

});

1260

});

1250

}

1261

}

1251

},

1262

},

1252

1263

1253

getFeesAndCollectionsData() {

1264

getFeesAndCollectionsData() {

1254

http()

1265

http()

1255

.get("/getTotalFeesAndCollections")

1266

.get("/getTotalFeesAndCollections")

1256

.then((response) => {

1267

.then((response) => {

1257

this.feeData = response.data.data;

1268

this.feeData = response.data.data;

1258

// this.collectionData = response.data.data;

1269

// this.collectionData = response.data.data;

1259

this.series[0].data[0] = this.feeData.totalFees;

1270

this.series[0].data[0] = this.feeData.totalFees;

1260

this.series[0].data[1] = this.feeData.totalCollection;

1271

this.series[0].data[1] = this.feeData.totalCollection;

1261

this.showLoader = false;

1272

this.showLoader = false;

1262

})

1273

})

1263

.catch((error) => {

1274

.catch((error) => {

1264

this.showLoader = false;

1275

this.showLoader = false;

1265

});

1276

});

1266

},

1277

},

1267

getExpensesData() {

1278

getExpensesData() {

1268

http()

1279

http()

1269

.get("/getTotalExpenses")

1280

.get("/getTotalExpenses")

1270

.then((response) => {

1281

.then((response) => {

1271

this.expenseData = response.data.data;

1282

this.expenseData = response.data.data;

1272

// var array = response.data.data.sum;

1283

// var array = response.data.data.sum;

1273

this.series[0].data[2] = this.expenseData.sum;

1284

this.series[0].data[2] = this.expenseData.sum;

1274

this.showChart = true;

1285

this.showChart = true;

1275

// this.series = [

1286

// this.series = [

1276

// {

1287

// {

1277

// name: "Total",

1288

// name: "Total",

1278

// data: array

1289

// data: array

1279

// }

1290

// }

1280

// ];

1291

// ];

1281

this.showLoader = false;

1292

this.showLoader = false;

1282

})

1293

})

1283

.catch((error) => {

1294

.catch((error) => {

1284

this.showLoader = false;

1295

this.showLoader = false;

1285

});

1296

});

1286

},

1297

},

1287

// async getparentStudents() {

1298

// async getparentStudents() {

1288

// this.showLoader = true;

1299

// this.showLoader = true;

1289

// await http()

1300

// await http()

1290

// .get("/parentStudentsList")

1301

// .get("/parentStudentsList")

1291

// .then((response) => {

1302

// .then((response) => {

1292

1303

1293

// /* set values in local storage */

1304

// /* set values in local storage */

1294

// this.studentsData = response.data.data.students;

1305

// this.studentsData = response.data.data.students;

1295

// this.showLoader = false;

1306

// this.showLoader = false;

1296

// })

1307

// })

1297

// .catch((err) => {

1308

// .catch((err) => {

1298

// console.log("err====>", err);

1309

// console.log("err====>", err);

1299

// this.showLoader = false;

1310

// this.showLoader = false;

1300

// });

1311

// });

1301

// await this.getCourses(parentStudentsId, classId);

1312

// await this.getCourses(parentStudentsId, classId);

1302

// await this.getAnnoucementes(classId);

1313

// await this.getAnnoucementes(classId);

1303

// },

1314

// },

1304

async getCourses(parentStudentsId, classId) {

1315

async getCourses(parentStudentsId, classId) {

1305

/* getStudentCourses - to get courseData - defined in GetApis.js*/

1316

/* getStudentCourses - to get courseData - defined in GetApis.js*/

1306

await this.getStudentCourses({

1317

await this.getStudentCourses({

1307

classId: localStorage.getItem("parentClassId"),

1318

classId: localStorage.getItem("parentClassId"),

1308

studentId: localStorage.getItem("parentStudentId"),

1319

studentId: localStorage.getItem("parentStudentId"),

1309

});

1320

});

1310

},

1321

},

1311

getAnnoucementes(classId) {

1322

getAnnoucementes(classId) {

1312

this.showLoader = true;

1323

this.showLoader = true;

1313

http()

1324

http()

1314

.get("/getAnnoucementesList", {

1325

.get("/getAnnoucementesList", {

1315

params: {

1326

params: {

1316

classId: localStorage.getItem("parentClassId"),

1327

classId: localStorage.getItem("parentClassId"),

1317

},

1328

},

1318

})

1329

})

1319

.then((response) => {

1330

.then((response) => {

1320

this.annoucementData = response.data.data;

1331

this.annoucementData = response.data.data;

1321

this.showLoader = false;

1332

this.showLoader = false;

1322

})

1333

})

1323

.catch((err) => {

1334

.catch((err) => {

1324

// console.log("err====>", err);

1335

// console.log("err====>", err);

1325

this.showLoader = false;

1336

this.showLoader = false;

1326

this.snackbar = true;

1337

this.snackbar = true;

1327

this.color = "error";

1338

this.color = "error";

1328

this.text = error.response.data.message;

1339

this.text = error.response.data.message;

1329

});

1340

});

1330

},

1341

},

1331

1342

1332

/* MEETING EVENTS, SCHOOL EVENTS */

1343

/* MEETING EVENTS, SCHOOL EVENTS */

1333

async getMeetingEventes() {

1344

async getMeetingEventes() {

1334

if (this.role == "TEACHER" || this.role === "ADMIN") {

1345

if (this.role == "TEACHER" || this.role === "ADMIN") {

1335

this.showLoader = true;

1346

this.showLoader = true;

1336

await http()

1347

await http()

1337

.get("/getMeetingEventesList")

1348

.get("/getMeetingEventesList")

1338

.then((response) => {

1349

.then((response) => {

1339

var activityList = response.data.data;

1350

var activityList = response.data.data;

1340

this.activityList = activityList;

1351

this.activityList = activityList;

1341

this.showLoader = false;

1352

this.showLoader = false;

1342

1353

1343

/* set meetingEvents in activityEvents array to highlight event dates in calender */

1354

/* set meetingEvents in activityEvents array to highlight event dates in calender */

1344

for (var i = 0; i < this.activityList.length; i++) {

1355

for (var i = 0; i < this.activityList.length; i++) {

1345

let obj = {};

1356

let obj = {};

1346

obj.date = moment(this.activityList[i].dateOfEvent).format(

1357

obj.date = moment(this.activityList[i].dateOfEvent).format(

1347

"YYYY/MM/DD"

1358

"YYYY/MM/DD"

1348

);

1359

);

1349

obj.title = this.activityList[i].title;

1360

obj.title = this.activityList[i].title;

1350

obj._id = this.activityList[i]._id;

1361

obj._id = this.activityList[i]._id;

1351

obj.eventType = "meetingEvent";

1362

obj.eventType = "meetingEvent";

1352

/* activityEvents is an array used to display events in calender on particular dates */

1363

/* activityEvents is an array used to display events in calender on particular dates */

1353

this.activityEvents.push(obj);

1364

this.activityEvents.push(obj);

1354

}

1365

}

1355

})

1366

})

1356

.catch((error) => {

1367

.catch((error) => {

1357

this.showLoader = false;

1368

this.showLoader = false;

1358

});

1369

});

1359

}

1370

}

1360

/* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */

1371

/* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */

1361

if (

1372

if (

1362

this.role === "ADMIN" ||

1373

this.role === "ADMIN" ||

1363

this.role === "TEACHER" ||

1374

this.role === "TEACHER" ||

1364

this.role === "PARENT"

1375

this.role === "PARENT"

1365

) {

1376

) {

1366

/* this will get data in a "schoolEvents" data property */

1377

/* this will get data in a "schoolEvents" data property */

1367

await this.getSchoolEventsList();

1378

await this.getSchoolEventsList();

1368

/* set schoolEvents in activityEvents array to highlight event dates in calender */

1379

/* set schoolEvents in activityEvents array to highlight event dates in calender */

1369

for (var i = 0; i < this.schoolEvents.length; i++) {

1380

for (var i = 0; i < this.schoolEvents.length; i++) {

1370

let obj = {};

1381

let obj = {};

1371

obj.date = moment(this.schoolEvents[i].dateOfEvent).format(

1382

obj.date = moment(this.schoolEvents[i].dateOfEvent).format(

1372

"YYYY/MM/DD"

1383

"YYYY/MM/DD"

1373

);

1384

);

1374

obj.title = this.schoolEvents[i].title;

1385

obj.title = this.schoolEvents[i].title;

1375

obj._id = this.schoolEvents[i]._id;

1386

obj._id = this.schoolEvents[i]._id;

1376

obj.eventType = "schoolEvent";

1387

obj.eventType = "schoolEvent";

1377

/* activityEvents is an array used to display events in calender on particular dates */

1388

/* activityEvents is an array used to display events in calender on particular dates */

1378

this.activityEvents.push(obj);

1389

this.activityEvents.push(obj);

1379

}

1390

}

1380

}

1391

}

1381

},

1392

},

1382

async getMaleFemaleData(){

1393

async getMaleFemaleData(){

1383

await http()

1394

await http()

1384

.get("/getStudentsByGender")

1395

.get("/getStudentsByGender")

1385

.then((response) => {

1396

.then((response) => {

1386

console.log("gender response - ", response)

1397

console.log("gender response - ", response)

1387

for(var i = 0; i < response.data.data.length; i++){

1398

for(var i = 0; i < response.data.data.length; i++){

1388

if(response.data.data[i]._id == "male"){

1399

if(response.data.data[i]._id == "male"){

1389

this.maleFemaleSeries.push(response.data.data[i].total)

1400

this.maleFemaleSeries.push(response.data.data[i].total)

1390

}

1401

}

1391

if(response.data.data[i]._id == "female"){

1402

if(response.data.data[i]._id == "female"){

1392

this.maleFemaleSeries.push(response.data.data[i].total)

1403

this.maleFemaleSeries.push(response.data.data[i].total)

1393

}

1404

}

1394

}

1405

}

1395

})

1406

})

1396

.catch((error) => {

1407

.catch((error) => {

1397

this.showLoader = false;

1408

this.showLoader = false;

1398

});

1409

});

1399

}

1410

}

1400

},

1411

},

1401

1412

1402

mounted() {

1413

mounted() {

1403

// = this.$store.state.schoolToken;

1414

// = this.$store.state.schoolToken;

1404

// console.log("this.$store.state.role", this.token);

1415

// console.log("this.$store.state.role", this.token);

1405

// this.getUsersList();

1416

// this.getUsersList();

1406

},

1417

},

1407

1418

1408

async created() {

1419

async created() {

1409

if (this.$store.state.role === "ADMIN") {

1420

if (this.$store.state.role === "ADMIN") {

1410

// this.token = this.$store.state.token;

1421

// this.token = this.$store.state.token;

1411

await this.getFeesAndCollectionsData();

1422

await this.getFeesAndCollectionsData();

1412

await this.getExpensesData();

1423

await this.getExpensesData();

1413

await this.getMaleFemaleData();

1424

await this.getMaleFemaleData();

1414

} else if (this.$store.state.schoolRole === "SUPERADMIN") {

1425

} else if (this.$store.state.schoolRole === "SUPERADMIN") {

1415

// this.token = this.$store.state.schoolToken;

1426

// this.token = this.$store.state.schoolToken;

1416

await this.getFeesAndCollectionsData();

1427

await this.getFeesAndCollectionsData();

1417

await this.getExpensesData();

1428

await this.getExpensesData();

1418

await this.getMaleFemaleData();

1429

await this.getMaleFemaleData();

1419

} else if (this.$store.state.role === "TEACHER") {

1430

} else if (this.$store.state.role === "TEACHER") {

1420

// this.token = this.$store.state.token;

1431

// this.token = this.$store.state.token;

1421

await this.getMaleFemaleData();

1432

await this.getMaleFemaleData();

1422

} else if (this.$store.state.role === "ACCOUNTANT") {

1433

} else if (this.$store.state.role === "ACCOUNTANT") {

1423

// this.token = this.$store.state.token;

1434

// this.token = this.$store.state.token;

1424

} else if (this.$store.state.role === "LIBRARIAN") {

1435

} else if (this.$store.state.role === "LIBRARIAN") {

1425

// this.token = this.$store.state.token;

1436

// this.token = this.$store.state.token;

1426

} else if (this.$store.state.role === "PARENT") {

1437

} else if (this.$store.state.role === "PARENT") {

1427

// this.token = this.$store.state.token;

1438

// this.token = this.$store.state.token;

1428

// await this.getparentStudents();

1439

// await this.getparentStudents();

1429

this.studentsData = this.$store.getters.GET_STUDENTS_DATA;

1440

this.studentsData = this.$store.getters.GET_STUDENTS_DATA;

1430

// console.log("students data - ", this.studentsData);

1441

// console.log("students data - ", this.studentsData);

1431

await this.getCourses();

1442

await this.getCourses();

1432

await this.getAnnoucementes();

1443

await this.getAnnoucementes();

1444

this.activeStudent = this.$store.getters.GET_ACTIVE_STUDENT

1433

}

1445

}

1434

this.role = this.$store.state.role;

1446

this.role = this.$store.state.role;

1435

1447

1436

await this.getStudents();

1448

await this.getStudents();

1437

await this.getTeachers();

1449

await this.getTeachers();

1438

await this.getParents();

1450

await this.getParents();

1439

await this.getClasses();

1451

await this.getClasses();

1440

await this.getNoticeData();

1452

await this.getNoticeData();

1441

await this.getUserData();

1453

await this.getUserData();

1442

1454

1443

/* get Latest events list for student login*/

1455

/* get Latest events list for student login*/

1444

if (this.$store.state.role == "PARENT") {

1456

if (this.$store.state.role == "PARENT") {

1445

let response = await this.studentMeetingEvents({

1457

let response = await this.studentMeetingEvents({

1446

studentId: localStorage.getItem("parentStudentId"),

1458

studentId: localStorage.getItem("parentStudentId"),

1447

});

1459

});

1448

this.activityList = response.data.data;

1460

this.activityList = response.data.data;

1449

1461

1450

/* set activityEvents array to highlight event dates in calender */

1462

/* set activityEvents array to highlight event dates in calender */

1451

for (var i = 0; i < this.activityList.length; i++) {

1463

for (var i = 0; i < this.activityList.length; i++) {

1452

let obj = {};

1464

let obj = {};

1453

obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(

1465

obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(

1454

"YYYY/MM/DD"

1466

"YYYY/MM/DD"

1455

);

1467

);

1456

obj.title = this.activityList[i].meetingEvent.title;

1468

obj.title = this.activityList[i].meetingEvent.title;

1457

obj._id = this.activityList[i].meetingEvent._id;

1469

obj._id = this.activityList[i].meetingEvent._id;

1458

obj.eventType = "meetingEvent";

1470

obj.eventType = "meetingEvent";

1459

this.activityEvents.push(obj);

1471

this.activityEvents.push(obj);

1460

}

1472

}

1461

}

1473

}

1462

1474

1463

/* get Latest events list for teacher login*/

1475

/* get Latest events list for teacher login*/

1464

if (

1476

if (

1465

this.role == "TEACHER" ||

1477

this.role == "TEACHER" ||

1466

this.role == "ADMIN" ||

1478

this.role == "ADMIN" ||

1467

this.role == "PARENT"

1479

this.role == "PARENT"

1468

) {

1480

) {

1469

await this.getMeetingEventes();

1481

await this.getMeetingEventes();

1470

}

1482

}

1471

},

1483

},

1472

};

1484

};

1473

</script>

1485

</script>

1474

1486

1475

1487

1476

@import "fullcalendar/dist/fullcalendar.css";

1488

@import "fullcalendar/dist/fullcalendar.css";

1477

.wrap-text {

1489

.wrap-text {

1478

-webkit-line-clamp: unset !important;

1490

-webkit-line-clamp: unset !important;

1479

}

1491

}

1480

1492

1481

a {

1493

a {

1482

color: white;

1494

color: white;

1483

}

1495

}

1484

</style>

1496

</style>

GITLAB

viithiisys / School-Management-dashboard

added heading

 <template>
   <v-app id="login">
     <v-content>
       <v-container fluid fill-height>
         <!-- SNACKBAR -->
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           :color="snackbarColor"
         >
           {{ text }}
           <v-spacer></v-spacer>
           <v-btn flat text @click="snackbar = false">X</v-btn>
         </v-snackbar>
         <v-layout align-center justify-center>
           <v-flex xs12 sm10 md5 lg4>
             <img
               src="/static/icon.png"
               height="40"
               width="140"
               alt="logo"
               class="logo mx-auto mb-2"
             />
             <v-card class="elevation-1 px-2 py-3 card" style="background-color: #7852cc" dark>
               <img
                 src="/static/intrackIllustration.png"
                 class="mx-auto logoSchool"
                 style="display:block"
                 width="280"
               />
               <v-card-text align-center justify-center>
                 <v-toolbar-title class="text-xs-center subheadline">SCHOOL LOGIN</v-toolbar-title>
                 <v-flex xs12 sm12 md12 lg12>
                   <v-form ref="form" v-model="valid" lazy-validation>
                     <label class="title">Email / PhoneNo</label>
                     <v-text-field
                       style="padding: 0px; margin: 0px;"
                       v-model.trim="userLogincredentials.email"
                       :rules="nameRules"
                       placeholder="Enter your email / phoneNo"
                       required
                     ></v-text-field>
                     <label class="title">Password</label>
                     <v-text-field
                       style="padding: 0px; margin: 0px;"
                       :rules="[rules.required]"
                       v-model.trim="userLogincredentials.password"
                       :append-icon="e1 ? 'visibility_off' : 'visibility'"
                       :append-icon-cb="() => (e1 = !e1)"
                       :type="e1 ? 'password' : 'text'"
                       name="input-10-1"
                       placeholder="Enter Your password"
                       @keyup.enter="login"
                     ></v-text-field>
                   </v-form>
                   <v-layout>
                     <v-flex xs12 class="pa-0 ma-0">
                       <h5 class="right mt-4">
                         <router-link class="link" to="/forgetpassword">Forgot password</router-link>
                       </h5>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-card-text>
               <v-layout>
                 <v-flex sm12>
                   <v-btn
                     style="margin: auto;display: block;background-color: #71d9ea; color: #0c0754;"
                     dark
                     flat
                     @click="login"
                     :loading="loading"
                   >Login</v-btn>
                 </v-flex>
               </v-layout>
               <v-layout></v-layout>
             </v-card>
           </v-flex>
         </v-layout>
       </v-container>
     </v-content>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import AllApiCalls from "@/Services/AllApiCalls.js";
 export default {
   mixins: [AllApiCalls],
   data() {
     return {
       //SNACKBAR
       y: "top",
       x: "right",
       mode: "",
       timeout: 10000,
       text: "",
       snackbarColor: "",
       snackbar: false,
       append: "",
       e1: true,
       loading: false,
       remember: false,
       valid: false,
       userLogincredentials: {},
       nameRules: [(v) => !!v || "Field is required"],
       password: "",
       email: "",
       rules: {
         required: (value) => !!value || "password is Required.",
       },
       selectedStudent: {},
     };
   },
   methods: {
     async login() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         var userdata = {
           email: this.userLogincredentials.email,
           password: this.userLogincredentials.password,
         };
         if (/^[0-9]{10}$/.test(this.userLogincredentials.email)) {
           userdata.fatherCellNo = this.userLogincredentials.email;
           delete userdata.email;
         }
         http()
           .post("/schoolLogin", userdata)
           .then((response) => {
             // console.log("token",response.data.data);
             this.loading = false;
             if (response.data.data.role === "ADMIN") {
               this.$store.dispatch("setToken", response.data.data.token);
               this.$store.dispatch("Id", response.data.data.id);
               this.$store.dispatch("Role", response.data.data.role);
               this.$router.push("/dashboard");
             } else if (response.data.data.role === "SUPERADMIN") {
               this.$store.dispatch("setSchoolRole", response.data.data.role);
               this.$store.dispatch("setSchoolToken", response.data.data.token);
               this.$router.push("/schooldashboard");
             } else if (response.data.data.role === "TEACHER") {
               // console.log("teacher", response.data.data.role);
               this.$store.dispatch("setToken", response.data.data.token);
               this.$store.dispatch("Id", response.data.data.id);
               this.$store.dispatch("Role", response.data.data.role);
               localStorage.setItem("teacherName", response.data.data.name);
               this.$router.push("/dashboard");
             } else if (response.data.data.role === "LIBRARIAN") {
               this.$store.dispatch("setToken", response.data.data.token);
               this.$store.dispatch("Id", response.data.data.id);
               this.$store.dispatch("Role", response.data.data.role);
               this.$router.push("/dashboard");
             } else if (response.data.data.role === "ACCOUNTANT") {
               this.$store.dispatch("setToken", response.data.data.token);
               this.$store.dispatch("Id", response.data.data.id);
               this.$store.dispatch("Role", response.data.data.role);
               this.$router.push("/dashboard");
             } else if (response.data.data.role === "PARENT") {
               this.$store.dispatch("setToken", response.data.data.token);
               this.$store.dispatch("Id", response.data.data.id);
               this.$store.dispatch("Role", response.data.data.role);
               localStorage.setItem("parentStudentId", response.data.data.id);
               http()
                 .get("/parentStudentsList")
                 .then((response) => {
                   /* set disabled students values */
                   //   console.log("students - ", response.data.data.students);
                   /* prepare an array of false status students */
                   var indexStatusFalse = [];
                   for (var i = 0; i < response.data.data.students.length; i++) {
                     if (response.data.data.students[i].status == false) {
                       indexStatusFalse.push(i);
                     }
                   }
                   /* introduce a property named disabled in response to make false staus students disbled */
                   for (var i = 0; i < indexStatusFalse.length; i++) {
                     response.data.data.students[
                       indexStatusFalse[i]
                     ].disabled = true;
                   }
                   /* make an array of students */
                   this.$store.dispatch(
                     "SET_STUDENTS_DATA",
                     response.data.data.students
                   );
                   /* counter to keep a track of number of students that are disabled or false */
                   var counter = 0;
                   /* if zero element of false students list is > 0 then make first student as defalut selected */
                   if (indexStatusFalse[0] > 0) {
                     this.selectedStudent = response.data.data.students[0]._id;
+                    this.$store.dispatch("SET_ACTIVE_STUDENT",response.data.data.students[0])
                   }
                   //   console.log("indexStatusFalse - ", indexStatusFalse);
                   /* if false student is the first one in the list then see if the next is also false */
                   if (indexStatusFalse[0] == 0) {
                     if (indexStatusFalse.length > 1) {
                       for (var i = 1; i < indexStatusFalse.length; i++) {
                         if (indexStatusFalse[i] == i) {
                           if (indexStatusFalse[i - 1] == i - 1) {
                             counter = i + 1;
                             continue;
                           }
                         } else {
                           counter = i;
                           break;
                         }
                       }
                     } else {
                       counter = 1;
                     }
                   }
                   //   console.log("counter - ", counter);
                   if (counter == response.data.data.students.length) {
                     this.seeSnackbar(
                       "Your wards have been removed ",
                       "warning"
                     );
                     this.$store.dispatch("setToken", null);
                     this.$store.dispatch("Id", null);
                   } else {
                     this.selectedStudent =
                       response.data.data.students[counter]._id;
+                      this.$store.dispatch("SET_ACTIVE_STUDENT",response.data.data.students[counter])
                     var studentName = response.data.data.students[counter].name;
                     localStorage.setItem("studentName", studentName);
                     localStorage.setItem(
                       "parentStudentId",
                       this.selectedStudent
                     );
                     localStorage.setItem(
                       "parentClassId",
                       response.data.data.students[counter].classId
                     );
                     this.$router.push("/dashboard");
                   }
                   this.showLoader = false;
                 })
                 .catch((err) => {
                   //   console.log("err====>", err);
                   this.showLoader = false;
                   this.snackbar = true;
                   this.color = "error";
                   this.text = error.response.data.message;
                 });
             }
           })
           .catch((error) => {
             if (error.response.data.message) {
               this.text = error.response.data.message;
               this.snackbar = true;
               this.snackbarColor = "error";
               this.loading = false;
             } else {
               this.text = "Server appears to be offline";
               this.snackbar = true;
               this.snackbarColor = "error";
               this.loading = false;
             }
           });
       }
     },
   },
   mounted() {
     if (this.$store.state.isUserLoggedIn == true) {
       this.$router.push("/dashboard");
     } else if (this.$store.state.isSchoolLoggedIn == true) {
       this.$router.push("/dashboard");
     }
   },
   computed: {
     color() {
       return this.loading ? "success" : "error";
     },
   },
 };
 </script>
 <style scoped lang="css">
 #login {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   z-index: 0;
 }
 </style>
 <style scoped>
 .schoolLogo {
   height: 60%;
   padding-left: 31%;
 }
 /* img {
   position: absolute;
   top: 13px;
   left: 8px;
 } */
 .v-btn--large {
   padding: 0px 84px;
 }
 .link {
   text-decoration: none;
 }
 a {
   color: #fff;
 }
 .mt-4 {
   margin-top: 21px !important;
 }
 .logo {
   display: block;
 }
 @media screen and (max-width: 600px) {
   img {
     left: 10px;
     height: 34px;
     width: 120px;
   }
   .logo {
     height: 56px;
     left: 10px;
     width: 120px;
     display: block;
   }
   .logoSchool {
     height: 87px;
     left: 10px;
     width: 120px;
   }
 }
 </style>

 <template>
   <v-app id="pages-dasboard">
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
       <v-card>
         <v-toolbar color="grey lighten-2" flat>
           <v-spacer></v-spacer>
           <v-toolbar-title>
             <h3>Notice Board</h3>
           </v-toolbar-title>
           <v-spacer></v-spacer>
           <v-icon @click="closeNotice">close</v-icon>
         </v-toolbar>
         <v-card-text>
           <v-layout>
             <v-flex align-center justify-center layout text-xs-center class="mt-2">
               <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
               <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
             </v-flex>
           </v-layout>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ notice.title }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ notice.description }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>-->
     <!-- <v-container fluid grid-list-xl> -->
     <!-- LOADER -->
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <!-- SNACKBAR -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="snackbarColor"
     >
       {{ text }}
       <v-spacer></v-spacer>
       <v-btn flat text @click="snackbar = false">X</v-btn>
     </v-snackbar>
     <!-- DIALOG BOX EVENT DETAILS -->
     <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
       <v-card flat class="card-style elevation-0" height="600" dark>
         <v-layout>
           <v-flex xs12>
             <v-icon
               size="24"
               class="right"
               @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
           <v-tabs-slider color="yellow"></v-tabs-slider>
           <v-tab v-for="(tab,index) in tabs" :key="index">
             <div class="subheading py-1">{{ tab.name }}</div>
           </v-tab>
           <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
           <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->
           <!-- SCHOOL EVENTS-->
           <v-tab-item>
             <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
               <v-container fluid>
                 <v-divider class="white"></v-divider>
                 <v-card
                   v-for="(particularEvent,index) in dialogSchoolEvents"
                   :key="index"
                   class="mt-3 pa-2 card-style white--text elevation-0"
                 >
                   <div>
                     <div class="headline">{{particularEvent.title}}</div>
                     <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                     <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
                     <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
                     <div v-if="particularEvent.link">
                       Link :
                       <a :href="particularEvent.link">{{particularEvent.link}}</a>
                     </div>
                     <div
                       v-if="particularEvent.description"
                     >Description : {{particularEvent.description}}</div>
                   </div>
                   <v-divider class="white mt-3"></v-divider>
                 </v-card>
               </v-container>
             </v-card>
           </v-tab-item>
           <!-- MEETING EVENTS -->
           <v-tab-item>
             <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
               <v-container fluid>
                 <v-divider class="white"></v-divider>
                 <v-card
                   v-for="(particularEvent,index) in dialogMeetingEvents"
                   :key="index"
                   class="mt-3 pa-2 card-style white--text elevation-0"
                 >
                   <div>
                     <div class="headline">{{particularEvent.title}}</div>
                     <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                     <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
                     <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
                     <div v-if="particularEvent.link">
                       Link :
                       <a :href="particularEvent.link">{{particularEvent.link}}</a>
                     </div>
                     <div
                       v-if="particularEvent.description"
                     >Description : {{particularEvent.description}}</div>
                   </div>
                   <v-divider class="white mt-3"></v-divider>
                 </v-card>
               </v-container>
             </v-card>
           </v-tab-item>
         </v-tabs>
         <!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
         <v-card flat class="card-style pa-2 elevation-0" dark v-else>
           <v-container fluid>
             <v-divider class="white"></v-divider>
             <v-card
               v-for="(particularEvent,index) in displayEventsList"
               :key="index"
               class="mt-3 pa-2 card-style white--text elevation-0"
             >
               <div>
                 <div class="headline">{{particularEvent.title}}</div>
                 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
                 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
                 <div v-if="particularEvent.link">
                   Link :
                   <a :href="particularEvent.link">{{particularEvent.link}}</a>
                 </div>
                 <div
                   v-if="particularEvent.description"
                 >Description : {{particularEvent.description}}</div>
               </div>
               <v-divider class="white mt-3"></v-divider>
             </v-card>
           </v-container>
         </v-card>
       </v-card>
     </v-dialog>
     <v-layout wrap row>
       <v-flex xs12 sm12 md8>
         <v-container fluid grid-list-xl>
           <!-- ***** Total Students ***** -->
           <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
             <v-flex xs12 sm12 md3>
               <router-link :to="{ name:'Students' }">
                 <v-card class="card pink-bgcolor">
                   <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
                   <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
                   <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
                 </v-card>
               </router-link>
             </v-flex>
             <!-- ***** Total Teachers***** -->
             <v-flex xs12 sm12 md3>
               <router-link :to="{ name:'Teachers' }">
                 <v-card flat class="card elevation-2 firozi-bgcolor">
                   <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
                   <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
                   <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
                 </v-card>
               </router-link>
             </v-flex>
             <!-- ***** Total Parents ***** -->
             <v-flex xs12 sm12 md3>
               <router-link :to="{ name:'Parents' }">
                 <v-card flat class="card yellow darken-3">
                   <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
                   <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
                   <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
                 </v-card>
               </router-link>
             </v-flex>
             <!-- ***** Total Class***** -->
             <v-flex xs12 sm12 md3>
               <router-link :to="{ name:'Class' }">
                 <v-card flat class="card darkBlue-bgcolor">
                   <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
                   <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
                   <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
                 </v-card>
               </router-link>
             </v-flex>
           </v-layout>
           <p
             v-if="studentsData.length === 0 && role == 'PARENT'"
             class="text-center title grey lighten-4 error--text"
           >You have no student registered with school</p>
           <!-- ACCOUNT -->
           <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
             <v-flex xs12>
               <v-card class="card mt-2 account-Card">
                 <h4>
                   <b>Account</b>
                 </h4>
                 <v-layout wrap>
                   <v-flex xs12 sm12 md3>
                     <v-list two-line>
                       <template>
                         <v-list-tile>
                           <v-list-tile-avatar>
                             <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
                           </v-list-tile-avatar>
                           <v-list-tile-content>
                             <v-list-tile-title class="mt-2">
                               <p class="subheading font-color">Fees</p>
                             </v-list-tile-title>
                             <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
                           </v-list-tile-content>
                         </v-list-tile>
                         <v-list-tile>
                           <v-list-tile-avatar>
                             <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
                           </v-list-tile-avatar>
                           <v-list-tile-content>
                             <v-list-tile-title class="mt-2">
                               <p class="subheading font-color">Collection</p>
                             </v-list-tile-title>
                             <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
                           </v-list-tile-content>
                         </v-list-tile>
                         <v-list-tile>
                           <v-list-tile-avatar>
                             <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
                           </v-list-tile-avatar>
                           <v-list-tile-content>
                             <v-list-tile-title class="mt-2">
                               <p class="subheading font-color">Expences</p>
                             </v-list-tile-title>
                             <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
                           </v-list-tile-content>
                         </v-list-tile>
                       </template>
                     </v-list>
                   </v-flex>
                   <v-flex xs12 sm12 md9 lg9>
                     <div id="chart">
                       <div v-if="showChart">
                         <apexchart
                           type="bar"
                           height="250"
                           style="max-width: 800px !important"
                           :options="chartOptions"
                           :series="series"
                         ></apexchart>
                       </div>
                     </div>
                   </v-flex>
                 </v-layout>
               </v-card>
             </v-flex>
           </v-layout>
           <!-- FOR ADMIN,TEACHER ROLE  -->
           <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
             <!-- NOTICE -->
             <v-flex xs12 sm6>
               <v-card class="card">
                 <v-container>
                   <v-card-title class="justify-center title font-weight-bold">Notice Board</v-card-title>
                   <v-layout column>
                     <v-flex
                       v-for="(item,index) in noticeData"
                       :key="index"
                       style="cursor: pointer;"
                     >
                       <v-layout column>
                         <!--Date-->
                         <v-flex class="pb-2 pl-2 pr-2">
                           <v-chip
                             :color="colorsArray[index%colorsArray.length]"
                             text-color="white"
                             class="ma-0"
                           >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
                         </v-flex>
                         <!-- title -->
                         <v-flex class="pa-2">
                           <div class="body-1 font-weight-bold px-2" @click="profile">{{item.title}}</div>
                         </v-flex>
                         <!-- divider -->
                         <v-flex class="pa-2">
                           <v-divider></v-divider>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <!-- <v-data-table
                     :items="noticeData"
                     class="elevation-0"
                     flat
                     hide-actions
                     hide-headers
                     style="border-spacing: 0 !important;"
                   >
                     <template
                       slot="items"
                       slot-scope="props"
                       v-if="props.index < 5"
                       style="border-spacing: 0 !important;"
                     >
                       <tr class="td-notice">
                         <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                         <td>
                           <span class="grey--text caption">{{ date(props.item.created) }}</span>
                           <br />
                           <span class="body-2">{{ props.item.title}}</span>
                   </td>-->
                   <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
                   <!--
                         <td class="text-xs-center">
                           <span>
                             <v-tooltip top>
                               <img
                                 slot="activator"
                                 style="cursor:pointer; width:25px; height:25px; "
                                 @click="profile"
                                 src="/static/icon/view.png"
                               />
                               <span>View</span>
                             </v-tooltip>
                           </span>
                         </td>
                       </tr>
                     </template>
                   </v-data-table>-->
                 </v-container>
               </v-card>
             </v-flex>
             <!-- SCHOOL EVENTS -->
             <v-flex xs12 sm6>
               <v-layout column>
                 <!-- school events -->
                 <v-flex>
                   <v-card class="card">
                     <v-container>
                       <v-card-title class="justify-center title font-weight-bold">School Events</v-card-title>
                       <div
                         v-for="(schoolEvent,index) in schoolEvents"
                         :key="schoolEvent.title"
                         class="mt-2"
                         style="cursor: pointer;"
                         @click="seeEventDetails(schoolEvent,'schoolEvent')"
                       >
                         <!-- color dot-->
                         <span
                           :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                           style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
                         ></span>
                         <div style="display: inline-block;" class="ml-2">
                           <div>
                             <!-- date of event -->
                             <div
                               class="grey--text lighten-1 caption"
                               v-if="schoolEvent.dateOfEvent"
                             >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                             <!-- event title-->
                             <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
                           </div>
                         </div>
                       </div>
                       <div v-if="schoolEvents.length == 0">
                         <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                       </div>
                     </v-container>
                   </v-card>
                 </v-flex>
                 <!-- apex charts - Male Female data -->
                 <v-flex>
                   <v-card>
+                    <v-card-title class="justify-center title font-weight-bold" >Students</v-card-title>
                     <div id="chart">
                       <apexcharts
                         type="donut"
                         :options="maleFemaleData"
                         :series="maleFemaleSeries"
                       />
                     </div>
                   </v-card>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <!-- FOR TEACHER ROLE  -->
           <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
             <v-layout>
               <v-flex xs6 sm6 md6>
                 <h4 class="pa-3">
                   <b>Notice</b>
                 </h4>
                 <v-data-table
                   :items="noticeData"
                   class="elevation-0"
                   flat
                   hide-actions
                   hide-headers
                   style="border-spacing: 0 !important;"
                 >
                   <template
                     slot="items"
                     slot-scope="props"
                     v-if="props.index < 5"
                     style="border-spacing: 0 !important;"
                   >
                     <tr class="td-notice">
                       <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                       <td>
                         <span class="grey--text caption">{{ date(props.item.created) }}</span>
                         <br />
                         <span class="body-2">{{ props.item.title}}</span>
                       </td>
                       <td class="grey--text mt-2">{{ props.item.description}}</td>
                       <td class="text-xs-center">
                         <span>
                           <v-tooltip top>
                             <img
                               slot="activator"
                               style="cursor:pointer; width:25px; height:25px; "
                               @click="profile"
                               src="/static/icon/view.png"
                             />
                             <span>View</span>
                           </v-tooltip>
                         </span>
                       </td>
                     </tr>
                   </template>
                 </v-data-table>
               </v-flex>
               <v-flex xs6 sm6 md6>
                 <v-card-text>
                   <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
                   <div
                     v-for="(activity,index) in activityList"
                     :key="index"
                     class="mt-2"
                     style="cursor: pointer;"
                     @click="seeEventDetails(activity)"
                   >
                     <span
                       :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                       style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
                     ></span>
                     <div style="display: inline-block;" class="ml-2">
                       <div>
                         <div
                           class="grey--text lighten-1 caption"
                           v-if="activity.dateOfEvent"
                         >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                         <div class="body-2" v-if="activity.title">{{activity.title}}</div>
                       </div>
                     </div>
                   </div>
                   <div v-if="activityList.length == 0">
                     <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                   </div>
                 </v-card-text>
               </v-flex>
             </v-layout>
           </v-card>-->
           <!-- ROLE == PARENT, MY COURSES -->
           <v-layout v-if="role == 'PARENT'">
             <v-flex xs12>
               <v-card class="elevation-0 account-Card">
                 <v-container>
                   <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>
                   <v-layout wrap>
                     <v-flex xs12 sm12>
                       <v-list two-line>
                         <template>
                           <v-list-tile v-for="(course,i) in courseData" :key="i">
                             <v-list-tile-avatar>
                               <!-- <v-icon
                               class="account-circle darkBlue-color"
                               style="cursor: pointer;"
                               @click="routeToCourseDetails(course._id)"
                               >panorama_fish_eye</v-icon>-->
                               <span>
                                 <v-tooltip top>
                                   <img
                                     slot="activator"
                                     style="cursor:pointer; width:25px; height:25px; "
                                     src="/static/icon/view.png"
                                     @click="routeToCourseDetails(course._id)"
                                   />
                                   <span>View</span>
                                 </v-tooltip>
                               </span>
                             </v-list-tile-avatar>
                             <v-list-tile-content>
                               <v-list-tile-title
                                 style="cursor: pointer;"
                                 @click="routeToCourseDetails(course._id)"
                               >{{ course.courseName }}</v-list-tile-title>
                             </v-list-tile-content>
                           </v-list-tile>
                         </template>
                       </v-list>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-card>
             </v-flex>
           </v-layout>
           <v-layout row wrap v-if="role == 'PARENT'">
             <!-- LATEST ANNOUNCEMENTSS , IF ROLE ==  PARENT -->
             <v-flex xs6>
               <v-card class="card">
                 <v-container>
                   <v-card-title
                     class="justify-center subheading font-weight-bold"
                   >Latest Announcements</v-card-title>
                   <v-data-table
                     :items="annoucementData"
                     class="elevation-0"
                     flat
                     hide-actions
                     hide-headers
                     style="border-spacing: 0 !important;"
                   >
                     <template
                       slot="items"
                       slot-scope="props"
                       v-if="props.index < 5"
                       style="border-spacing: 0 !important;"
                     >
                       <tr class="td-notice">
                         <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                         <td>
                           <span class="grey--text caption">{{ date(props.item.created) }}</span>
                           <br />
                           <span class="body-2">{{ props.item.discussionType}}</span>
                         </td>
                         <td class="text-xs-center">
                           <span>
                             <v-tooltip top>
                               <img
                                 slot="activator"
                                 style="cursor:pointer; width:25px; height:25px; "
                                 src="/static/icon/view.png"
                               />
                               <span>View</span>
                             </v-tooltip>
                           </span>
                         </td>
                       </tr>
                     </template>
                   </v-data-table>
                 </v-container>
               </v-card>
             </v-flex>
             <!-- IF ROLE == PARENT, SCHOOL EVENTS -->
             <v-flex xs6>
               <v-card class="card">
                 <v-container>
                   <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
                   <div
                     v-for="(schoolEvent,index) in schoolEvents"
                     :key="schoolEvent.title"
                     class="mt-2"
                     style="cursor: pointer;"
                     @click="seeEventDetails(schoolEvent,'schoolEvent')"
                   >
                     <!-- color dot-->
                     <span
                       :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                       style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
                     ></span>
                     <div style="display: inline-block;" class="ml-2">
                       <div>
                         <!-- date of event -->
                         <div
                           class="grey--text lighten-1 caption"
                           v-if="schoolEvent.dateOfEvent"
                         >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                         <!-- event title-->
                         <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
                       </div>
                     </div>
                   </div>
                   <div v-if="schoolEvents.length == 0">
                     <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                   </div>
                 </v-container>
               </v-card>
             </v-flex>
+            <!-- <v-flex xs12>
+              <v-card>
+                <v-card-title class="justify-center title font-weight-bold">Students</v-card-title>
+                <v-card-text>
+                </v-card-text>
+              </v-card>
+            </v-flex> -->
             <!-- ONLINE USER , IF ROLE == PARENT -->
             <!-- <v-flex xs6>
               <v-card class="card">
                 <v-container>
                   <v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>
                   <v-data-table
                     :items="onlineUser"
                     class="elevation-0"
                     flat
                     hide-actions
                     hide-headers
                     style="border-spacing: 0 !important;"
                   >
                     <template
                       slot="items"
                       slot-scope="props"
                       v-if="props.index < 5"
                       style="border-spacing: 0 !important;"
                     >
                       <tr class="td-notice">
                         <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                         <td>
                           <span class="body-2">{{ props.item.user }}</span>
                         </td>
                         <td class="text-xs-center">
                           <span>
                             <v-tooltip top>
                               <img
                                 slot="activator"
                                 style="cursor:pointer; width:25px; height:25px; "
                                 src="/static/icon/view.png"
                               />
                               <span>View</span>
                             </v-tooltip>
                           </span>
                         </td>
                       </tr>
                     </template>
                   </v-data-table>
                 </v-container>
               </v-card>
             </v-flex>-->
           </v-layout>
         </v-container>
       </v-flex>
       <v-spacer></v-spacer>
       <!-- SIDE BAR -->
       <v-flex xs12 sm12 md4>
         <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
           <v-card-text class="px-2">
             <h4 class="text-xs-center py-3">
               <b>Profile</b>
             </h4>
             <v-flex xs12 class="py-3">
               <v-layout wrap>
                 <v-flex xs12 sm12 md4>
                   <img
                     src="/static/icon/user.png"
                     v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
                     width="80"
                   />
                   <img
                     :src="userData.profilePicUrl"
                     onerror="this.src='/static/icon/user.png';"
                     v-if="userData.profilePicUrl"
                     width="80"
                   />
                   <img
                     :src="userData.schoolLogoUrl"
                     onerror="this.src='/static/icon/user.png';"
                     v-if="userData.schoolLogoUrl"
                     width="80"
                   />
                 </v-flex>
                 <v-flex xs12 sm12 md6>
                   <p class="mb-0 body-1">
                     <i>{{ userData.name }}</i>
                   </p>
                   <p class="mb-0 caption grey--text">{{ userData.email }}</p>
                   <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
                   <address class="caption grey--text mb-3">{{ userData.address }}</address>
                 </v-flex>
               </v-layout>
             </v-flex>
             <hr />
             <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
             <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
             <!-- MEETING EVENTS -->
             <!-- IF ROLE IS ADMIN -->
             <v-card class="my-3 elevation-0">
               <v-card-text v-if="$store.state.role === 'ADMIN' ">
                 <!-- MEETING EVENTS -->
                 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
                 <div
                   v-for="(activity,index) in activityList"
                   :key="index"
                   class="mt-2"
                   style="cursor: pointer;"
                   @click="seeEventDetails(activity)"
                 >
                   <span
                     :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                     style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
                   ></span>
                   <div style="display: inline-block;" class="ml-2">
                     <div>
                       <div
                         class="grey--text lighten-1 caption"
                         v-if="activity.dateOfEvent"
                       >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                       <div class="body-1" v-if="activity.title">{{activity.title}}</div>
                     </div>
                   </div>
                 </div>
                 <div v-if="activityList.length == 0">
                   <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                 </div>
               </v-card-text>
               <!-- ROLE IS NOT ADMIN -->
               <v-card-text v-if="$store.state.role != 'ADMIN'">
                 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
                 <div
                   v-for="(activity,index) in activityList"
                   :key="index"
                   class="mt-2"
                   style="cursor: pointer;"
                   @click="seeEventDetails(activity)"
                 >
                   <span
                     :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                     style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
                   ></span>
                   <div style="display: inline-block;" class="ml-2">
                     <!-- MEETING EVENTS FOR PARENT -->
                     <div v-if="$store.state.role === 'PARENT' ">
                       <div
                         class="grey--text lighten-1 caption"
                         v-if="activity.meetingEvent"
                       >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                       <div
                         class="body-2"
                         v-if="activity.meetingEvent"
                       >{{activity.meetingEvent.title}}</div>
                     </div>
                     <!-- MEETING EVENTS FOR TEACHER -->
                     <div v-if="role === 'TEACHER'">
                       <div
                         class="grey--text lighten-1 caption"
                         v-if="activity.dateOfEvent"
                       >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                       <div class="body-2" v-if="activity.title">{{activity.title}}</div>
                     </div>
                   </div>
                   <div v-if="activityList.length == 0">
                     <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                   </div>
                 </div>
               </v-card-text>
             </v-card>
           </v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
     <v-dialog v-model="dialog" max-width="500" persistent>
       <v-card color="grey lighten-4" flat>
         <v-toolbar dark color="fixcolors">
           <v-spacer></v-spacer>
           <v-btn icon @click="dialog= false">
             <v-icon>close</v-icon>
           </v-btn>
         </v-toolbar>
         <v-flex class="py-4">
           <v-list-tile>
             <v-list-tile-action>
               <v-icon>edit</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile>
             <v-list-tile-action>
               <v-icon>access_time</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
         </v-flex>
       </v-card>
     </v-dialog>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import AllApiCalls from "@/Services/AllApiCalls.js";
 import VueApexCharts from "vue-apexcharts";
 // import { FunctionalCalendar } from "vue-functional-calendar";
 export default {
   components: {
     apexcharts: VueApexCharts,
   },
   mixins: [AllApiCalls],
   data() {
     return {
-      today: new Date(),
+      studentsData: [],
       // data: {
       //   clieckedToday: false
       // },
       // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
       // calendarData: {},
       // calendar: {},
       // DIALOG BOX EVENT DETAILS
       tabs: [
         { name: "School Events", icon: "mdi-account" },
         { name: "Meeting Events", icon: "mdi-account-outline" },
       ],
       viewEventDetails: false,
       active: 0,
       particularEvent: [],
       displayEventsList: [],
       dialogSchoolEvents: [],
       dialogMeetingEvents: [],
       // apexCharts
       maleFemaleSeries: [],
       maleFemaleData: {
         labels: ["Male", "Female"],
         legend: {
           formatter: function (val, opts) {
             return val + " - " + opts.w.globals.series[opts.seriesIndex];
           },
           position: 'bottom',
         },
         dataLabels: {
           enabled: true,
           formatter: function (val,opts) {
             return opts.w.globals.series[opts.seriesIndex];
           },
         },
       },
       // CALENDER
       moment: moment,
       activityEvents: [],
       onlineUser: [
         {
           user: "Student Demo",
         },
         {
           user: "Teacher Demo",
         },
         {
           user: "Priyansh Gupta",
         },
         {
           user: "Gaurav Aggarwal",
         },
         {
           user: "Approve Arorra",
         },
       ],
       showLoader: false,
       calendarData: {},
       dialog: false,
       dialogNotice: false,
       HolidaysList: [],
       EventsList: [],
       events: [],
       config: {
         eventClick: (event) => {
           this.selected = event;
           this.dialog = true;
         },
       },
       selected: {},
       barGraph: [],
       // notice: {},
       userData: {},
       dated: new Date(2018, 0, 9),
       userList: [],
       sectionList: [],
       students: "",
       parents: "",
       teachers: "",
       classes: "",
       noticeData: [],
       expenseData: [],
       feeData: [],
       collectionData: [],
       courseData: [],
       studentsData: [],
+      activeStudent: {},
       annoucementData: [],
       role: "",
       attrs: [
         {
           key: "today",
           highlight: true,
           dates: new Date(),
         },
       ],
       drawer: true,
       items: [
         { title: "Home", icon: "dashboard" },
         { title: "About", icon: "question_answer" },
       ],
       right: null,
       series: [
         {
           name: "Total",
           data: [],
         },
       ],
       showChart: false,
       chartOptions: {
         chart: {
           type: "bar",
           height: 150,
           stacked: true,
           // animations: {
           //   enabled: true,
           //   easing: "easeinout",
           //   speed: 1200,
           //   animateGradually: {
           //     enabled: true,
           //     delay: 450
           //   },
           //   dynamicAnimation: {
           //     enabled: true,
           //     speed: 450
           //   }
           // }
         },
         plotOptions: {
           bar: {
             horizontal: false,
             columnWidth: "25%",
             // endingShape: "rounded",
             distributed: true,
           },
         },
         responsive: [
           {
             breakpoint: 480,
             options: {
               legend: {
                 position: "bottom",
                 offsetX: -10,
                 offsetY: 0,
               },
             },
           },
         ],
         legend: {
           show: false,
         },
         colors: ["#7852cc", "#f9a825", "#ff8a89"],
         dataLabels: {
           enabled: false,
         },
         stroke: {
           show: true,
           width: 2,
           colors: ["transparent"],
         },
         xaxis: {
           categories: ["Fee", "Collections", "Expences"],
         },
         yaxis: {
           title: {
             text: "",
           },
         },
         fill: {
           opacity: 1,
         },
         tooltip: {
           y: {
             formatter: function (val, opts) {
               return "" + val + " ";
             },
           },
         },
       },
       // LATEST ACTIVITY
       colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
       activityList: [],
     };
   },
   methods: {
     test(e) {
       //   console.log(" test - ", e);
     },
     /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */
     async handleDayChanged(e) {
       //   console.log("event calender - ", e);
       /*the list of events that will be used in dialog box to display events */
       this.dialogMeetingEvents = [];
       this.dialogSchoolEvents = [];
       for (var i = 0; i < e.events.length; i++) {
         if (e.events[i].eventType == "meetingEvent") {
           let meetingEventResponse = await this.getParticularMeetingEvent({
             meetingEventId: e.events[i]._id,
           });
           this.dialogMeetingEvents.push(meetingEventResponse.data.data);
         }
         if (e.events[i].eventType == "schoolEvent") {
           let schoolEventResponse = await this.getParticularSchoolEvent({
             schoolEventId: e.events[i]._id,
           });
           this.dialogSchoolEvents.push(schoolEventResponse.data.data);
         }
       }
       /* Opens the dialog box */
       this.viewEventDetails = true;
     },
     /* see meeting events, school events individually (when calender is not clicked) */
     async seeEventDetails(activity, message) {
       // if (this.$store.state.role === "TEACHER") {
       //   let response = await this.getParticularMeetingEvent({
       //     meetingEventId: activity._id,
       //   });
       //   this.displayEventsList = [];
       //   this.displayEventsList.push(response.data.data);
       //   this.viewEventDetails = true;
       // }
       if (this.$store.state.role === "PARENT") {
         if (message == "schoolEvent") {
           let response = await this.getParticularSchoolEvent({
             schoolEventId: activity._id,
           });
           this.displayEventsList = [];
           this.displayEventsList.push(response.data.data);
         } else {
           let response = await this.getParticularMeetingEvent({
             meetingEventId: activity.meetingEvent._id,
           });
           this.displayEventsList = [];
           this.displayEventsList.push(response.data.data);
         }
         this.viewEventDetails = true;
       }
       if (
         this.$store.state.role === "ADMIN" ||
         this.$store.state.role === "TEACHER"
       ) {
         if (message == "schoolEvent") {
           let response = await this.getParticularSchoolEvent({
             schoolEventId: activity._id,
           });
           this.displayEventsList = [];
           this.displayEventsList.push(response.data.data);
         } else {
           let response = await this.getParticularMeetingEvent({
             meetingEventId: activity._id,
           });
           this.displayEventsList = [];
           this.displayEventsList.push(response.data.data);
         }
         this.viewEventDetails = true;
       }
     },
     async routeToCourseDetails(courseId) {
       /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
       let response = await this.getParticularCourseDetail(courseId);
       /* If the response is null then dont route */
       if (response.data.data.length > 0) {
         this.$router.push({
           name: "Course Details",
           query: { courseId: courseId },
         });
       } else {
         this.seeSnackbar("No Data Available", "warning");
       }
     },
     closeNotice() {
       this.dialogNotice = false;
     },
     profile() {
       // this.editedIndex = this.desserts.indexOf(item);
       // this.notice = Object.assign({}, item);
       // this.dialogNotice = true;
       this.$router.push("/noticeBoard");
     },
     date: function (date) {
       return moment(date).format("MMMM DD, YYYY  HH:mm");
     },
     activityDate(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     refreshEvents() {
       this.$refs.calendar.$emit("refetch-events");
     },
     removeEvent() {
       this.$refs.calendar.$emit("remove-event", this.selected);
       this.selected = {};
     },
     eventSelected(event) {
       this.selected = event;
     },
     // eventDropStart: function(event) {
     //   event.editable = false;
     // },
     eventCreated(...test) {
       //   console.log(test);
     },
     getStudents() {
       http()
         .get("/getStudentsList")
         .then((response) => {
           this.students = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getParents() {
       http()
         .get("/getParentsList")
         .then((response) => {
           this.parents = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getTeachers() {
       http()
         .get("/getTeachersList")
         .then((response) => {
           this.teachers = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getClasses() {
       http()
         .get("/getClassesList")
         .then((response) => {
           this.classes = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     getNoticeData() {
       this.showLoader = true;
       http()
         .get("/getEventsList")
         .then((response) => {
           this.noticeData = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     getUserData() {
       // this.showLoader = true;
       if (this.$store.state.role === "PARENT") {
         http()
           .get("/getParticularUserDetail", {
             params: {
               studentId: localStorage.getItem("parentStudentId"),
             },
           })
           .then((response) => {
             this.userData = response.data.data;
             this.showLoader = false;
           })
           .catch((error) => {
             this.showLoader = false;
           });
       } else {
         http()
           .get("/getParticularUserDetail")
           .then((response) => {
             this.userData = response.data.data;
             this.showLoader = false;
           })
           .catch((error) => {
             this.showLoader = false;
           });
       }
     },
     getFeesAndCollectionsData() {
       http()
         .get("/getTotalFeesAndCollections")
         .then((response) => {
           this.feeData = response.data.data;
           // this.collectionData = response.data.data;
           this.series[0].data[0] = this.feeData.totalFees;
           this.series[0].data[1] = this.feeData.totalCollection;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     getExpensesData() {
       http()
         .get("/getTotalExpenses")
         .then((response) => {
           this.expenseData = response.data.data;
           // var array = response.data.data.sum;
           this.series[0].data[2] = this.expenseData.sum;
           this.showChart = true;
           // this.series = [
           //   {
           //     name: "Total",
           //     data: array
           //   }
           // ];
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     // async getparentStudents() {
     //   this.showLoader = true;
     //   await http()
     //     .get("/parentStudentsList")
     //     .then((response) => {
     //       /* set values in local storage */
     //       this.studentsData = response.data.data.students;
     //       this.showLoader = false;
     //     })
     //     .catch((err) => {
     //       console.log("err====>", err);
     //       this.showLoader = false;
     //     });
     //   await this.getCourses(parentStudentsId, classId);
     //   await this.getAnnoucementes(classId);
     // },
     async getCourses(parentStudentsId, classId) {
       /* getStudentCourses - to get courseData - defined in GetApis.js*/
       await this.getStudentCourses({
         classId: localStorage.getItem("parentClassId"),
         studentId: localStorage.getItem("parentStudentId"),
       });
     },
     getAnnoucementes(classId) {
       this.showLoader = true;
       http()
         .get("/getAnnoucementesList", {
           params: {
             classId: localStorage.getItem("parentClassId"),
           },
         })
         .then((response) => {
           this.annoucementData = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           //   console.log("err====>", err);
           this.showLoader = false;
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     /* MEETING EVENTS, SCHOOL EVENTS */
     async getMeetingEventes() {
       if (this.role == "TEACHER" || this.role === "ADMIN") {
         this.showLoader = true;
         await http()
           .get("/getMeetingEventesList")
           .then((response) => {
             var activityList = response.data.data;
             this.activityList = activityList;
             this.showLoader = false;
             /* set meetingEvents in activityEvents array to highlight event dates in calender */
             for (var i = 0; i < this.activityList.length; i++) {
               let obj = {};
               obj.date = moment(this.activityList[i].dateOfEvent).format(
                 "YYYY/MM/DD"
               );
               obj.title = this.activityList[i].title;
               obj._id = this.activityList[i]._id;
               obj.eventType = "meetingEvent";
               /* activityEvents is an array used to display events in calender on particular dates */
               this.activityEvents.push(obj);
             }
           })
           .catch((error) => {
             this.showLoader = false;
           });
       }
       /* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */
       if (
         this.role === "ADMIN" ||
         this.role === "TEACHER" ||
         this.role === "PARENT"
       ) {
         /* this will get data in a  "schoolEvents" data property */
         await this.getSchoolEventsList();
         /* set schoolEvents in activityEvents array to highlight event dates in calender */
         for (var i = 0; i < this.schoolEvents.length; i++) {
           let obj = {};
           obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
             "YYYY/MM/DD"
           );
           obj.title = this.schoolEvents[i].title;
           obj._id = this.schoolEvents[i]._id;
           obj.eventType = "schoolEvent";
           /* activityEvents is an array used to display events in calender on particular dates */
           this.activityEvents.push(obj);
         }
       }
     },
     async getMaleFemaleData(){
        await http()
           .get("/getStudentsByGender")
           .then((response) => {
             console.log("gender response - ", response)
             for(var i = 0; i < response.data.data.length; i++){
               if(response.data.data[i]._id == "male"){
                 this.maleFemaleSeries.push(response.data.data[i].total)
               }
               if(response.data.data[i]._id == "female"){
                 this.maleFemaleSeries.push(response.data.data[i].total)
               }
             }
           })
           .catch((error) => {
             this.showLoader = false;
           });
     }
   },
   mounted() {
     //  = this.$store.state.schoolToken;
     // console.log("this.$store.state.role", this.token);
     // this.getUsersList();
   },
   async created() {
     if (this.$store.state.role === "ADMIN") {
       // this.token = this.$store.state.token;
       await this.getFeesAndCollectionsData();
       await this.getExpensesData();
       await this.getMaleFemaleData();
     } else if (this.$store.state.schoolRole === "SUPERADMIN") {
       // this.token = this.$store.state.schoolToken;
       await this.getFeesAndCollectionsData();
       await this.getExpensesData();
       await this.getMaleFemaleData();
     } else if (this.$store.state.role === "TEACHER") {
       // this.token = this.$store.state.token;
       await this.getMaleFemaleData();
     } else if (this.$store.state.role === "ACCOUNTANT") {
       // this.token = this.$store.state.token;
     } else if (this.$store.state.role === "LIBRARIAN") {
       // this.token = this.$store.state.token;
     } else if (this.$store.state.role === "PARENT") {
       // this.token = this.$store.state.token;
       // await this.getparentStudents();
       this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
       //   console.log("students data - ", this.studentsData);
       await this.getCourses();
       await this.getAnnoucementes();
+      this.activeStudent = this.$store.getters.GET_ACTIVE_STUDENT
     }
     this.role = this.$store.state.role;
     await this.getStudents();
     await this.getTeachers();
     await this.getParents();
     await this.getClasses();
     await this.getNoticeData();
     await this.getUserData();
     /* get Latest events list for student login*/
     if (this.$store.state.role == "PARENT") {
       let response = await this.studentMeetingEvents({
         studentId: localStorage.getItem("parentStudentId"),
       });
       this.activityList = response.data.data;
       /* set activityEvents array to highlight event dates in calender */
       for (var i = 0; i < this.activityList.length; i++) {
         let obj = {};
         obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
           "YYYY/MM/DD"
         );
         obj.title = this.activityList[i].meetingEvent.title;
         obj._id = this.activityList[i].meetingEvent._id;
         obj.eventType = "meetingEvent";
         this.activityEvents.push(obj);
       }
     }
     /* get Latest events list for teacher login*/
     if (
       this.role == "TEACHER" ||
       this.role == "ADMIN" ||
       this.role == "PARENT"
     ) {
       await this.getMeetingEventes();
     }
   },
 };
 </script>
 <style scoped>
 @import "fullcalendar/dist/fullcalendar.css";
 .wrap-text {
   -webkit-line-clamp: unset !important;
 }
 a {
   color: white;
 }
 </style>

 import Vue from 'vue'
 import Vuex from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
 Vue.use(Vuex)
 export default new Vuex.Store({
     strict: true,
     plugins: [
         createPersistedState()
     ],
     state: {
         token: null,
         data: null,
         isUserLoggedIn: false,
         id: null,
         role: null,
         // schoolId: null,
         schoolToken: null,
         schoolRole: null,
         studentsData: [],
+        activeStudent: {},
     },
     getters: {
         GET_STUDENTS_DATA: state => {
             return state.studentsData
         },
+        GET_ACTIVE_STUDENT: state => {
+            return state.activeStudent
+        },
         GET_TOKEN: state => {
             return state.token
         },
     },
     // serve as the one and only way to change the state of the data in the state object
     mutations: {
         RESET_STORE(state, defaultState) {
             state = defaultState
             // state.isUserLoggedIn = false
         },
         setToken(state, token) {
             state.token = token
             //state.isUserLoggedIn = !!(token)
             if (token != null) {
                 state.isUserLoggedIn = true
             } else {
                 state.isUserLoggedIn = false
                 state.isSchoolLoggedIn = false
             }
         },
         setSchoolToken(state, schoolToken) {
             state.schoolToken = schoolToken
             //state.isUserLoggedIn = !!(token)
             if (schoolToken != null) {
                 state.isSchoolLoggedIn = true
             } else {
                 state.isSchoolLoggedIn = false
             }
         },
         setUser(state, data) {
             state.data = data
         },
         Id(state, id) {
             state.id = id
         },
         Role(state, role) {
             state.role = role
         },
         setSchoolRole(state, schoolRole) {
             state.schoolRole = schoolRole
         },
         SET_STUDENTS_DATA(state, data) {
             state.studentsData = data
         },
+        SET_ACTIVE_STUDENT(state, data) {
+            state.activeStudent = data
+        },
         // SchoolId(state, schoolId) {
         //     state.schoolId = schoolId
         // }
     },
     //Action methods are referred to as being "dispatched"
     actions: {
         RESET_STORE({
             commit
         }, defaultState) {
             commit('RESET_STORE', defaultState)
         },
         setToken({
             commit
         }, token) {
             commit('setToken', token)
         },
         setSchoolToken({
             commit
         }, schoolToken) {
             commit('setSchoolToken', schoolToken)
         },
         setUser({
             commit
         }, data) {
             commit('setUser', data)
         },
         SET_STUDENTS_DATA({
             commit
         }, data) {
             commit('SET_STUDENTS_DATA', data)
         },
+        SET_ACTIVE_STUDENT({
+            commit
+        }, data) {
+            commit('SET_ACTIVE_STUDENT', data)
+        },
         Id({
             commit
         }, id) {
             commit('Id', id)
         },
         Role({
             commit
         }, role) {
             commit('Role', role)
         },
         setSchoolRole({
             commit
         }, schoolRole) {
             commit('setSchoolRole', schoolRole)
         },
         // SchoolId({ commit }, schoolId) {
         //     commit('SchoolId', schoolId)
         // }
     }
 })