viithiisys / School-Management-dashboard

1

1

2

<div>

2

<div>

3

<v-tabs grow slider-color="gray">

3

<v-tabs grow slider-color="gray">

4

<v-tab

4

<v-tab

5

ripple

5

ripple

6

@click="activeTab('existing')"

6

@click="activeTab('existing')"

7

v-bind:class="{ active: isActive }"

7

v-bind:class="{ active: isActive }"

8

id="tab"

8

id="tab"

9

class="subheading"

9

class="subheading"

10

>Existing Students</v-tab>

10

>Existing Students</v-tab>

11

<v-tab

11

<v-tab

12

ripple

12

ripple

13

@click="activeTab('new')"

13

@click="activeTab('new')"

14

v-bind:class="{ active: newActive }"

14

v-bind:class="{ active: newActive }"

15

id="tab1"

15

id="tab1"

16

User

16

User

17

class="subheading"

17

class="subheading"

18

>Add New Students</v-tab>

18

>Add New Students</v-tab>

19

20

20

21

22

<v-tab-item>

22

<v-tab-item>

23

<v-snackbar

23

<v-snackbar

24

:timeout="timeout"

24

:timeout="timeout"

25

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

25

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

26

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

26

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

27

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

27

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

28

v-model="snackbar"

28

v-model="snackbar"

29

color="success"

29

color="success"

30

>{{ text }}</v-snackbar>

30

>{{ text }}</v-snackbar>

31

<v-dialog v-model="dialog" max-width="170 0px" scrollable>

31

<v-dialog v-model="dialog" max-width="170 0px" scrollable>

32

<v-card flat>

32

<v-card flat>

33

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

33

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

34

<v-spacer></v-spacer>

34

<v-spacer></v-spacer>

35

<v-toolbar-title>

35

<v-toolbar-title>

36

<h3>Edit Student Profile</h3>

36

<h3>Edit Student Profile</h3>

37

</v-toolbar-title>

37

</v-toolbar-title>

38

<v-spacer></v-spacer>

38

<v-spacer></v-spacer>

39

</v-toolbar>

39

</v-toolbar>

40

<v-card-text style="height: 680px;">

40

<v-card-text style="height: 680px;">

41

<v-form ref="form">

41

<v-form ref="form">

42

<v-container fluid>

42

<v-container fluid>

43

<v-layout>

43

<v-layout>

44

<v-flex

44

<v-flex

45

xs12

45

xs12

46

class="text-xs-center text-sm-center text-md-center text-lg-center"

46

class="text-xs-center text-sm-center text-md-center text-lg-center"

47

>

47

>

48

<v-avatar size="160px">

48

<v-avatar size="160px">

49

<img

49

<img

50

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

50

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

51

v-if="!editedItem.profilePicUrl && !imageUrl"

51

v-if="!editedItem.profilePicUrl && !imageUrl"

52

/>

52

/>

53

<img

53

<img

54

:src="editedItem.profilePicUrl"

54

:src="editedItem.profilePicUrl"

55

v-else-if="editedItem.profilePicUrl && !imageUrl"

55

v-else-if="editedItem.profilePicUrl && !imageUrl"

56

/>

56

/>

57

<img

57

<img

58

v-if="imageUrl"

58

v-if="imageUrl"

59

:src="imageUrl"

59

:src="imageUrl"

60

height="150"

60

height="150"

61

style="border-radius:50%; width:200px"

61

style="border-radius:50%; width:200px"

62

/>

62

/>

63

</v-avatar>

63

</v-avatar>

64

<input

64

<input

65

type="file"

65

type="file"

66

style="display: none"

66

style="display: none"

67

ref="image"

67

ref="image"

68

accept="image/*"

68

accept="image/*"

69

@change="onFilePicked"

69

@change="onFilePicked"

70

/>

70

/>

71

</v-flex>

71

</v-flex>

72

</v-layout>

72

</v-layout>

73

<v-layout>

73

<v-layout>

74

<v-flex xs12 sm4>

74

<v-flex xs12 sm4>

75

<v-layout>

75

<v-layout>

76

<v-flex xs4 class="pt-4 subheading">

76

<v-flex xs4 class="pt-4 subheading">

77

<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>

77

<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>

78

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>

78

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>

79

</v-flex>

79

</v-flex>

80

<v-flex xs8 class="ml-3">

80

<v-flex xs8 class="ml-3">

81

<v-select

81

<v-select

82

:items="addclass"

82

:items="addclass"

83

label="Select Class"

83

label="Select Class"

84

v-model="editedItem.select"

84

v-model="editedItem.select"

85

item-text="classNum"

85

item-text="classNum"

86

item-value="_id"

86

item-value="_id"

87

name="Select Class"

87

name="Select Class"

88

@change="getSections(editedItem.select)"

88

@change="getSections(editedItem.select)"

89

required

89

required

90

></v-select>

90

></v-select>

91

</v-flex>

91

</v-flex>

92

</v-layout>

92

</v-layout>

93

</v-flex>

93

</v-flex>

94

<v-flex xs12 sm4>

94

<v-flex xs12 sm4>

95

<v-layout>

95

<v-layout>

96

<v-flex xs4 class="pt-4 subheading">

96

<v-flex xs4 class="pt-4 subheading">

97

<label class="right hidden-xs-only hidden-sm-only">Select Section:</label>

97

<label class="right hidden-xs-only hidden-sm-only">Select Section:</label>

98

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>

98

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>

99

</v-flex>

99

</v-flex>

100

<v-flex xs8 class="ml-3">

100

<v-flex xs8 class="ml-3">

101

<v-select

101

<v-select

102

:items="addSection"

102

:items="addSection"

103

label="Select Section"

103

label="Select Section"

104

v-model="editedItem.selectSection"

104

v-model="editedItem.selectSection"

105

item-text="name"

105

item-text="name"

106

item-value="_id"

106

item-value="_id"

107

name="Select Section"

107

name="Select Section"

108

required

108

required

109

></v-select>

109

></v-select>

110

</v-flex>

110

</v-flex>

111

</v-layout>

111

</v-layout>

112

</v-flex>

112

</v-flex>

113

<v-flex xs12 sm4>

113

<v-flex xs12 sm4>

114

<v-layout>

114

<v-layout>

115

<v-flex xs4 class="pt-4 subheading">

115

<v-flex xs4 class="pt-4 subheading">

116

116

117

117

118

</v-flex>

118

</v-flex>

119

<v-flex xs8 class="ml-3">

119

<v-flex xs8 class="ml-3">

120

<v-text-field

120

<v-text-field

121

v-model="editedItem.name"

121

v-model="editedItem.name"

122

placeholder="fill your full Name"

122

placeholder="fill your full Name"

123

name="name"

123

name="name"

124

type="text"

124

type="text"

125

required

125

required

126

></v-text-field>

126

></v-text-field>

127

</v-flex>

127

</v-flex>

128

</v-layout>

128

</v-layout>

129

</v-flex>

129

</v-flex>

130

</v-layout>

130

</v-layout>

131

<v-layout>

131

<v-layout>

132

<v-flex xs12 sm4>

132

<v-flex xs12 sm4>

133

<v-layout>

133

<v-layout>

134

<v-flex xs4 class="pt-4 subheading">

134

<v-flex xs4 class="pt-4 subheading">

135

<label class="right">Email ID:</label>

135

<label class="right">Email ID:</label>

136

</v-flex>

136

</v-flex>

137

<v-flex xs8 class="ml-3">

137

<v-flex xs8 class="ml-3">

138

<v-text-field

138

<v-text-field

139

placeholder="fill your email"

139

placeholder="fill your email"

140

v-model="editedItem.email"

140

v-model="editedItem.email"

141

type="text"

141

type="text"

142

name="email"

142

name="email"

143

required

143

required

144

></v-text-field>

144

></v-text-field>

145

</v-flex>

145

</v-flex>

146

</v-layout>

146

</v-layout>

147

</v-flex>

147

</v-flex>

148

<v-flex xs12 sm4>

148

<v-flex xs12 sm4>

149

<v-layout>

149

<v-layout>

150

<v-flex xs4 class="pt-4 subheading">

150

<v-flex xs4 class="pt-4 subheading">

151

<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>

151

<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>

152

152

153

</v-flex>

153

</v-flex>

154

<v-flex xs8 class="ml-3">

154

<v-flex xs8 class="ml-3">

155

<v-menu

155

<v-menu

156

ref="menu"

156

ref="menu"

157

:close-on-content-click="false"

157

:close-on-content-click="false"

158

v-model="menu1"

158

v-model="menu1"

159

:nudge-right="40"

159

:nudge-right="40"

160

lazy

160

lazy

161

transition="scale-transition"

161

transition="scale-transition"

162

offset-y

162

offset-y

163

full-width

163

full-width

164

min-width="290px"

164

min-width="290px"

165

>

165

>

166

<v-text-field

166

<v-text-field

167

slot="activator"

167

slot="activator"

168

v-model="editedItem.dob"

168

v-model="editedItem.dob"

169

placeholder="Select Dob"

169

placeholder="Select Dob"

170

></v-text-field>

170

></v-text-field>

171

<v-date-picker

171

<v-date-picker

172

ref="picker"

172

ref="picker"

173

v-model="editedItem.dob"

173

v-model="editedItem.dob"

174

:max="new Date().toISOString().substr(0, 10)"

174

:max="new Date().toISOString().substr(0, 10)"

175

min="1950-01-01"

175

min="1950-01-01"

176

@input="menu1 = false"

176

@input="menu1 = false"

177

></v-date-picker>

177

></v-date-picker>

178

</v-menu>

178

</v-menu>

179

</v-flex>

179

</v-flex>

180

</v-layout>

180

</v-layout>

181

</v-flex>

181

</v-flex>

182

<v-flex xs12 sm4>

182

<v-flex xs12 sm4>

183

<v-layout>

183

<v-layout>

184

<v-flex xs4 class="pt-4 subheading">

184

<v-flex xs4 class="pt-4 subheading">

185

185

186

</v-flex>

186

</v-flex>

187

<v-flex xs8 class="ml-3">

187

<v-flex xs8 class="ml-3">

188

<v-text-field

188

<v-text-field

189

v-model="editedItem.city"

189

v-model="editedItem.city"

190

placeholder="fill your City Name"

190

placeholder="fill your City Name"

191

name="City"

191

name="City"

192

type="text"

192

type="text"

193

required

193

required

194

></v-text-field>

194

></v-text-field>

195

</v-flex>

195

</v-flex>

196

</v-layout>

196

</v-layout>

197

</v-flex>

197

</v-flex>

198

</v-layout>

198

</v-layout>

199

<v-layout>

199

<v-layout>

200

<v-flex xs12 sm4>

200

<v-flex xs12 sm4>

201

<v-layout>

201

<v-layout>

202

<v-flex xs4 class="pt-4 subheading">

202

<v-flex xs4 class="pt-4 subheading">

203

<label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>

203

<label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>

204

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>

204

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>

205

</v-flex>

205

</v-flex>

206

<v-flex xs8 class="ml-3">

206

<v-flex xs8 class="ml-3">

207

<v-text-field

207

<v-text-field

208

v-model="editedItem.bloodGroup"

208

v-model="editedItem.bloodGroup"

209

placeholder="fill your BloodGroup"

209

placeholder="fill your BloodGroup"

210

name="state"

210

name="state"

211

type="text"

211

type="text"

212

required

212

required

213

></v-text-field>

213

></v-text-field>

214

</v-flex>

214

</v-flex>

215

</v-layout>

215

</v-layout>

216

</v-flex>

216

</v-flex>

217

<v-flex xs12 sm4>

217

<v-flex xs12 sm4>

218

<v-layout>

218

<v-layout>

219

<v-flex xs4 class="pt-4 subheading">

219

<v-flex xs4 class="pt-4 subheading">

220

<label class="right">Allergies:</label>

220

<label class="right">Allergies:</label>

221

</v-flex>

221

</v-flex>

222

<v-flex xs8 class="ml-3">

222

<v-flex xs8 class="ml-3">

223

<v-text-field

223

<v-text-field

224

v-model="editedItem.allergies"

224

v-model="editedItem.allergies"

225

placeholder="fill your Allergies"

225

placeholder="fill your Allergies"

226

name="pincode"

226

name="pincode"

227

required

227

required

228

></v-text-field>

228

></v-text-field>

229

</v-flex>

229

</v-flex>

230

</v-layout>

230

</v-layout>

231

</v-flex>

231

</v-flex>

232

<v-flex xs12 sm4>

232

<v-flex xs12 sm4>

233

<v-layout>

233

<v-layout>

234

<v-flex xs4 class="pt-4 subheading">

234

<v-flex xs4 class="pt-4 subheading">

235

<label class="right">Medical Notes:</label>

235

<label class="right">Medical Notes:</label>

236

</v-flex>

236

</v-flex>

237

<v-flex xs8 class="ml-3">

237

<v-flex xs8 class="ml-3">

238

<v-text-field

238

<v-text-field

239

v-model="editedItem.medicalNotes"

239

v-model="editedItem.medicalNotes"

240

placeholder="fill your medicalNotes"

240

placeholder="fill your medicalNotes"

241

name="mobileNo"

241

name="mobileNo"

242

required

242

required

243

></v-text-field>

243

></v-text-field>

244

</v-flex>

244

</v-flex>

245

</v-layout>

245

</v-layout>

246

</v-flex>

246

</v-flex>

247

</v-layout>

247

</v-layout>

248

<v-layout>

248

<v-layout>

249

<v-flex xs12 sm4>

249

<v-flex xs12 sm4>

250

<v-layout>

250

<v-layout>

251

<v-flex xs4 class="pt-4 subheading">

251

<v-flex xs4 class="pt-4 subheading">

252

<label class="right">Height:</label>

252

<label class="right">Height:</label>

253

</v-flex>

253

</v-flex>

254

<v-flex xs8 class="ml-3">

254

<v-flex xs8 class="ml-3">

255

<v-text-field

255

<v-text-field

256

v-model="editedItem.height"

256

v-model="editedItem.height"

257

placeholder="fill your Height"

257

placeholder="fill your Height"

258

name="state"

258

name="state"

259

type="text"

259

type="text"

260

required

260

required

261

></v-text-field>

261

></v-text-field>

262

</v-flex>

262

</v-flex>

263

</v-layout>

263

</v-layout>

264

</v-flex>

264

</v-flex>

265

<v-flex xs12 sm4>

265

<v-flex xs12 sm4>

266

<v-layout>

266

<v-layout>

267

<v-flex xs4 class="pt-4 subheading">

267

<v-flex xs4 class="pt-4 subheading">

268

<label class="right">Weight:</label>

268

<label class="right">Weight:</label>

269

</v-flex>

269

</v-flex>

270

<v-flex xs8 class="ml-3">

270

<v-flex xs8 class="ml-3">

271

<v-text-field

271

<v-text-field

272

v-model="editedItem.weight"

272

v-model="editedItem.weight"

273

placeholder="fill your Weight"

273

placeholder="fill your Weight"

274

name="pincode"

274

name="pincode"

275

required

275

required

276

></v-text-field>

276

></v-text-field>

277

</v-flex>

277

</v-flex>

278

</v-layout>

278

</v-layout>

279

</v-flex>

279

</v-flex>

280

<v-flex xs12 sm4>

280

<v-flex xs12 sm4>

281

<v-layout>

281

<v-layout>

282

<v-flex xs4 class="pt-4 subheading">

282

<v-flex xs4 class="pt-4 subheading">

283

<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>

283

<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>

284

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>

284

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>

285

</v-flex>

285

</v-flex>

286

<v-flex xs8 class="ml-3">

286

<v-flex xs8 class="ml-3">

287

<v-text-field

287

<v-text-field

288

label="Select Image"

288

label="Select Image"

289

@click="pickFile"

289

@click="pickFile"

290

v-model="imageName"

290

v-model="imageName"

291

append-icon="attach_file"

291

append-icon="attach_file"

292

></v-text-field>

292

></v-text-field>

293

</v-flex>

293

</v-flex>

294

</v-layout>

294

</v-layout>

295

</v-flex>

295

</v-flex>

296

</v-layout>

296

</v-layout>

297

<v-layout>

297

<v-layout>

298

<v-flex xs12 sm4>

298

<v-flex xs12 sm4>

299

<v-layout>

299

<v-layout>

300

<v-flex xs4 class="pt-4 subheading">

300

<v-flex xs4 class="pt-4 subheading">

301

<label class="right">State:</label>

301

<label class="right">State:</label>

302

</v-flex>

302

</v-flex>

303

<v-flex xs8 class="ml-3">

303

<v-flex xs8 class="ml-3">

304

<v-text-field

304

<v-text-field

305

v-model="editedItem.state"

305

v-model="editedItem.state"

306

placeholder="fill your State Name"

306

placeholder="fill your State Name"

307

name="state"

307

name="state"

308

type="text"

308

type="text"

309

required

309

required

310

></v-text-field>

310

></v-text-field>

311

</v-flex>

311

</v-flex>

312

</v-layout>

312

</v-layout>

313

</v-flex>

313

</v-flex>

314

<v-flex xs12 sm4>

314

<v-flex xs12 sm4>

315

<v-layout>

315

<v-layout>

316

<v-flex xs4 class="pt-4 subheading">

316

<v-flex xs4 class="pt-4 subheading">

317

<label class="right">Pincode:</label>

317

<label class="right">Pincode:</label>

318

</v-flex>

318

</v-flex>

319

<v-flex xs8 class="ml-3">

319

<v-flex xs8 class="ml-3">

320

<v-text-field

320

<v-text-field

321

v-model="editedItem.pincode"

321

v-model="editedItem.pincode"

322

placeholder="fill your pincode"

322

placeholder="fill your pincode"

323

name="pincode"

323

name="pincode"

324

type="number"

324

type="number"

325

required

325

required

326

></v-text-field>

326

></v-text-field>

327

</v-flex>

327

</v-flex>

328

</v-layout>

328

</v-layout>

329

</v-flex>

329

</v-flex>

330

<v-flex xs12 sm4>

330

<v-flex xs12 sm4>

331

<v-layout>

331

<v-layout>

332

<v-flex xs4 class="pt-4 subheading">

332

<v-flex xs4 class="pt-4 subheading">

333

<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>

333

<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>

334

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>

334

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>

335

</v-flex>

335

</v-flex>

336

<v-flex xs8 class="ml-3">

336

<v-flex xs8 class="ml-3">

337

<v-text-field

337

<v-text-field

338

v-model="editedItem.mobile"

338

v-model="editedItem.mobile"

339

placeholder="fill your MobileNo"

339

placeholder="fill your MobileNo"

340

name="mobileNo"

340

name="mobileNo"

341

type="number"

341

type="number"

342

required

342

required

343

></v-text-field>

343

></v-text-field>

344

</v-flex>

344

</v-flex>

345

</v-layout>

345

</v-layout>

346

</v-flex>

346

</v-flex>

347

</v-layout>

347

</v-layout>

348

<v-layout>

348

<v-layout>

349

<v-flex xs12 sm4>

349

<v-flex xs12 sm4>

350

<v-layout>

350

<v-layout>

351

<v-flex xs4 class="pt-4 subheading">

351

<v-flex xs4 class="pt-4 subheading">

352

<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>

352

<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>

353

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>

353

<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>

354

</v-flex>

354

</v-flex>

355

<v-flex xs8 class="ml-3">

355

<v-flex xs8 class="ml-3">

356

<v-autocomplete

356

<v-autocomplete

357

v-model="editedItem.country"

357

v-model="editedItem.country"

358

:items="countries"

358

:items="countries"

359

placeholder="Select Country Name"

359

placeholder="Select Country Name"

360

required

360

required

361

></v-autocomplete>

361

></v-autocomplete>

362

</v-flex>

362

</v-flex>

363

</v-layout>

363

</v-layout>

364

</v-flex>

364

</v-flex>

365

<v-flex xs12 sm4>

365

<v-flex xs12 sm4>

366

<v-layout>

366

<v-layout>

367

<v-flex xs4 class="pt-4 subheading">

367

<v-flex xs4 class="pt-4 subheading">

368

<label class="right">Gender:</label>

368

<label class="right">Gender:</label>

369

</v-flex>

369

</v-flex>

370

<v-flex xs8 class="ml-3">

370

<v-flex xs8 class="ml-3">

371

<v-select

371

<v-select

372

:items="gender"

372

:items="gender"

373

v-model="editedItem.gender"

373

v-model="editedItem.gender"

374

placeholder="Select Gender"

374

placeholder="Select Gender"

375

required

375

required

376

></v-select>

376

></v-select>

377

</v-flex>

377

</v-flex>

378

</v-layout>

378

</v-layout>

379

</v-flex>

379

</v-flex>

380

<v-flex xs12 sm4>

380

<v-flex xs12 sm4>

381

<v-layout>

381

<v-layout>

382

<v-flex xs4 class="pt-4 subheading">

382

<v-flex xs4 class="pt-4 subheading">

383

<label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>

383

<label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>

384

384

385

</v-flex>

385

</v-flex>

386

<v-flex xs8 class="ml-3">

386

<v-flex xs8 class="ml-3">

387

<v-text-field

387

<v-text-field

388

:items="gender"

388

:items="gender"

389

v-model="editedItem.rollNo"

389

v-model="editedItem.rollNo"

390

placeholder="fill roll number"

390

placeholder="fill roll number"

391

required

391

required

392

></v-text-field>

392

></v-text-field>

393

</v-flex>

393

</v-flex>

394

</v-layout>

394

</v-layout>

395

</v-flex>

395

</v-flex>

396

</v-layout>

396

</v-layout>

397

<v-layout class="hidden-xs-only hidden-sm-only">

397

<v-layout class="hidden-xs-only hidden-sm-only">

398

<v-flex xs12 sm4>

398

<v-flex xs12 sm4>

399

<v-layout>

399

<v-layout>

400

<v-flex xs4 sm4 class="pt-4 subheading">

400

<v-flex xs4 sm4 class="pt-4 subheading">

401

<label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>

401

<label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>

402

<label

402

<label

403

class="right hidden-lg-only hidden-md-only hidden-xl-only"

403

class="right hidden-lg-only hidden-md-only hidden-xl-only"

404

>Permanent Address:</label>

404

>Permanent Address:</label>

405

</v-flex>

405

</v-flex>

406

<v-flex xs12 sm8 class="ml-3">

406

<v-flex xs12 sm8 class="ml-3">

407

<v-text-field

407

<v-text-field

408

v-model="editedItem.permanentAddress"

408

v-model="editedItem.permanentAddress"

409

placeholder="fill Your Permanent Address"

409

placeholder="fill Your Permanent Address"

410

required

410

required

411

></v-text-field>

411

></v-text-field>

412

</v-flex>

412

</v-flex>

413

</v-layout>

413

</v-layout>

414

</v-flex>

414

</v-flex>

415

<v-flex xs12 sm4>

415

<v-flex xs12 sm4>

416

<v-layout>

416

<v-layout>

417

<v-flex xs4 class="pt-4 subheading">

417

<v-flex xs4 class="pt-4 subheading">

418

<label class="right hidden-xs-only hidden-sm-only">Present Address:</label>

418

<label class="right hidden-xs-only hidden-sm-only">Present Address:</label>

419

<label

419

<label

420

class="right hidden-lg-only hidden-md-only hidden-xl-only"

420

class="right hidden-lg-only hidden-md-only hidden-xl-only"

421

>Present Address:</label>

421

>Present Address:</label>

422

</v-flex>

422

</v-flex>

423

<v-flex xs8 class="ml-3">

423

<v-flex xs8 class="ml-3">

424

<v-text-field

424

<v-text-field

425

v-model="editedItem.presentAddress"

425

v-model="editedItem.presentAddress"

426

placeholder="Select Country Name"

426

placeholder="Select Country Name"

427

required

427

required

428

></v-text-field>

428

></v-text-field>

429

</v-flex>

429

</v-flex>

430

</v-layout>

430

</v-layout>

431

</v-flex>

431

</v-flex>

432

</v-layout>

432

</v-layout>

433

<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">

433

<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">

434

<v-flex xs12 sm12>

434

<v-flex xs12 sm12>

435

<v-layout>

435

<v-layout>

436

<v-flex xs12 sm3 class="pt-4 subheading text-xs-center">

436

<v-flex xs12 sm3 class="pt-4 subheading text-xs-center">

437

<label class>Present Address :</label>

437

<label class>Present Address :</label>

438

</v-flex>

438

</v-flex>

439

</v-layout>

439

</v-layout>

440

<v-layout>

440

<v-layout>

441

<v-flex xs12 sm12>

441

<v-flex xs12 sm12>

442

<v-textarea

442

<v-textarea

443

v-model="editedItem.presentAddress"

443

v-model="editedItem.presentAddress"

444

placeholder="fill Your present Address"

444

placeholder="fill Your present Address"

445

required

445

required

446

></v-textarea>

446

></v-textarea>

447

</v-flex>

447

</v-flex>

448

</v-layout>

448

</v-layout>

449

</v-flex>

449

</v-flex>

450

<v-flex xs12 sm12>

450

<v-flex xs12 sm12>

451

<v-layout>

451

<v-layout>

452

<v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">

452

<v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">

453

<label>Permanent addr:</label>

453

<label>Permanent addr:</label>

454

</v-flex>

454

</v-flex>

455

</v-layout>

455

</v-layout>

456

<v-layout>

456

<v-layout>

457

<v-flex xs12 sm12>

457

<v-flex xs12 sm12>

458

<v-textarea

458

<v-textarea

459

name="input-4-3"

459

name="input-4-3"

460

v-model="editedItem.permanentAddress"

460

v-model="editedItem.permanentAddress"

461

placeholder="fill Your Permanent Address"

461

placeholder="fill Your Permanent Address"

462

required

462

required

463

></v-textarea>

463

></v-textarea>

464

</v-flex>

464

</v-flex>

465

</v-layout>

465

</v-layout>

466

</v-flex>

466

</v-flex>

467

</v-layout>

467

</v-layout>

468

<v-layout>

468

<v-layout>

469

<v-flex xs12 sm12>

469

<v-flex xs12 sm12>

470

<v-layout>

470

<v-layout>

471

<v-flex xs6>

471

<v-flex xs6>

472

<v-btn round dark @click.native="close">Cancel</v-btn>

472

<v-btn round dark @click.native="close">Cancel</v-btn>

473

</v-flex>

473

</v-flex>

474

<v-flex xs6>

474

<v-flex xs6>

475

<v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>

475

<v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>

476

</v-flex>

476

</v-flex>

477

</v-layout>

477

</v-layout>

478

</v-flex>

478

</v-flex>

479

</v-layout>

479

</v-layout>

480

</v-container>

480

</v-container>

481

</v-form>

481

</v-form>

482

</v-card-text>

482

</v-card-text>

483

</v-card>

483

</v-card>

484

</v-dialog>

484

</v-dialog>

485

486

486

487

488

<v-dialog v-model="dialog1" max-width="1100px" scrollable>

488

<v-dialog v-model="dialog1" max-width="1100px" scrollable>

489

<v-card>

489

<v-card>

490

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

490

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

491

<v-spacer></v-spacer>

491

<v-spacer></v-spacer>

492

<v-toolbar-title>Student Profile</v-toolbar-title>

492

<v-toolbar-title>Student Profile</v-toolbar-title>

493

<v-spacer></v-spacer>

493

<v-spacer></v-spacer>

494

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

494

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

495

</v-toolbar>

495

</v-toolbar>

496

<v-card-text style="height: 700px;">

496

<v-card-text style="height: 700px;">

497

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

497

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

498

<v-avatar size="160px">

498

<v-avatar size="160px">

499

499

500

500

501

</v-avatar>

501

</v-avatar>

502

</v-flex>

502

</v-flex>

503

<v-container grid-list-md>

503

<v-container grid-list-md>

504

<v-layout wrap>

504

<v-layout wrap>

505

<v-flex xs12 sm6>

505

<v-flex xs12 sm6>

506

<v-layout>

506

<v-layout>

507

<v-flex xs6 sm5>

507

<v-flex xs6 sm5>

508

508

509

509

510

</h5>

510

</h5>

511

</v-flex>

511

</v-flex>

512

<v-flex sm7 xs6>

512

<v-flex sm7 xs6>

513

<h5 class="my-1 left">{{ editedItem.name }}</h5>

513

<h5 class="my-1 left">{{ editedItem.name }}</h5>

514

</v-flex>

514

</v-flex>

515

</v-layout>

515

</v-layout>

516

</v-flex>

516

</v-flex>

517

<v-flex xs12 sm6>

517

<v-flex xs12 sm6>

518

<v-layout>

518

<v-layout>

519

<v-flex xs6 sm4>

519

<v-flex xs6 sm4>

520

520

521

<b>Email:</b>

521

<b>Email:</b>

522

</h5>

522

</h5>

523

</v-flex>

523

</v-flex>

524

<v-flex sm8 xs6>

524

<v-flex sm8 xs6>

525

<h5 class="my-1 left">{{ editedItem.email }}</h5>

525

<h5 class="my-1 left">{{ editedItem.email }}</h5>

526

</v-flex>

526

</v-flex>

527

</v-layout>

527

</v-layout>

528

</v-flex>

528

</v-flex>

529

</v-layout>

529

</v-layout>

530

<v-layout wrap>

530

<v-layout wrap>

531

<v-flex xs12 sm6>

531

<v-flex xs12 sm6>

532

<v-layout>

532

<v-layout>

533

<v-flex xs6 sm5>

533

<v-flex xs6 sm5>

534

<b>

534

<b>

535

535

536

<b>Gender:</b>

536

<b>Gender:</b>

537

</h5>

537

</h5>

538

</b>

538

</b>

539

</v-flex>

539

</v-flex>

540

<v-flex sm7 xs6>

540

<v-flex sm7 xs6>

541

<h5 class="my-1 left">{{ editedItem.gender }}</h5>

541

<h5 class="my-1 left">{{ editedItem.gender }}</h5>

542

</v-flex>

542

</v-flex>

543

</v-layout>

543

</v-layout>

544

</v-flex>

544

</v-flex>

545

<v-flex xs12 sm6>

545

<v-flex xs12 sm6>

546

<v-layout>

546

<v-layout>

547

<v-flex xs6 sm4>

547

<v-flex xs6 sm4>

548

<b>

548

<b>

549

549

550

550

551

</h5>

551

</h5>

552

</b>

552

</b>

553

</v-flex>

553

</v-flex>

554

<v-flex sm7 xs6>

554

<v-flex sm7 xs6>

555

<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>

555

<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>

556

</v-flex>

556

</v-flex>

557

</v-layout>

557

</v-layout>

558

</v-flex>

558

</v-flex>

559

</v-layout>

559

</v-layout>

560

<v-layout wrap>

560

<v-layout wrap>

561

<v-flex xs12 sm6>

561

<v-flex xs12 sm6>

562

<v-layout>

562

<v-layout>

563

<v-flex xs6 sm5>

563

<v-flex xs6 sm5>

564

<b>

564

<b>

565

565

566

<b>Blood Group:</b>

566

<b>Blood Group:</b>

567

</h5>

567

</h5>

568

</b>

568

</b>

569

</v-flex>

569

</v-flex>

570

<v-flex sm7 xs6>

570

<v-flex sm7 xs6>

571

<h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>

571

<h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>

572

</v-flex>

572

</v-flex>

573

</v-layout>

573

</v-layout>

574

</v-flex>

574

</v-flex>

575

<v-flex xs12 sm6>

575

<v-flex xs12 sm6>

576

<v-layout>

576

<v-layout>

577

<v-flex xs6 sm4>

577

<v-flex xs6 sm4>

578

<b>

578

<b>

579

579

580

<b>Allergies:</b>

580

<b>Allergies:</b>

581

</h5>

581

</h5>

582

</b>

582

</b>

583

</v-flex>

583

</v-flex>

584

<v-flex sm8 xs6>

584

<v-flex sm8 xs6>

585

<h5 class="my-1">{{ editedItem.allergies }}</h5>

585

<h5 class="my-1">{{ editedItem.allergies }}</h5>

586

</v-flex>

586

</v-flex>

587

</v-layout>

587

</v-layout>

588

</v-flex>

588

</v-flex>

589

</v-layout>

589

</v-layout>

590

<v-layout wrap>

590

<v-layout wrap>

591

<v-flex xs12 sm6>

591

<v-flex xs12 sm6>

592

<v-layout>

592

<v-layout>

593

<v-flex xs6 sm5>

593

<v-flex xs6 sm5>

594

<b>

594

<b>

595

595

596

<b>Height:</b>

596

<b>Height:</b>

597

</h5>

597

</h5>

598

</b>

598

</b>

599

</v-flex>

599

</v-flex>

600

<v-flex sm7 xs6>

600

<v-flex sm7 xs6>

601

<h5 class="my-1 left">{{ editedItem.height }}</h5>

601

<h5 class="my-1 left">{{ editedItem.height }}</h5>

602

</v-flex>

602

</v-flex>

603

</v-layout>

603

</v-layout>

604

</v-flex>

604

</v-flex>

605

<v-flex xs12 sm6>

605

<v-flex xs12 sm6>

606

<v-layout>

606

<v-layout>

607

<v-flex xs6 sm4>

607

<v-flex xs6 sm4>

608

<b>

608

<b>

609

609

610

<b>Weight:</b>

610

<b>Weight:</b>

611

</h5>

611

</h5>

612

</b>

612

</b>

613

</v-flex>

613

</v-flex>

614

<v-flex sm8 xs6>

614

<v-flex sm8 xs6>

615

<h5 class="my-1">{{ editedItem.weight }}</h5>

615

<h5 class="my-1">{{ editedItem.weight }}</h5>

616

</v-flex>

616

</v-flex>

617

</v-layout>

617

</v-layout>

618

</v-flex>

618

</v-flex>

619

</v-layout>

619

</v-layout>

620

<v-layout wrap>

620

<v-layout wrap>

621

<v-flex xs12 sm6>

621

<v-flex xs12 sm6>

622

<v-layout>

622

<v-layout>

623

<v-flex xs6 sm5>

623

<v-flex xs6 sm5>

624

<b>

624

<b>

625

625

626

626

627

</h5>

627

</h5>

628

</b>

628

</b>

629

</v-flex>

629

</v-flex>

630

<v-flex sm7 xs6>

630

<v-flex sm7 xs6>

631

<h5 class="my-1 left">{{ editedItem.city }}</h5>

631

<h5 class="my-1 left">{{ editedItem.city }}</h5>

632

</v-flex>

632

</v-flex>

633

</v-layout>

633

</v-layout>

634

</v-flex>

634

</v-flex>

635

<v-flex xs12 sm6>

635

<v-flex xs12 sm6>

636

<v-layout>

636

<v-layout>

637

<v-flex xs6 sm4>

637

<v-flex xs6 sm4>

638

<b>

638

<b>

639

639

640

<b>State:</b>

640

<b>State:</b>

641

</h5>

641

</h5>

642

</b>

642

</b>

643

</v-flex>

643

</v-flex>

644

<v-flex sm8 xs6>

644

<v-flex sm8 xs6>

645

<h5 class="my-1">{{ editedItem.state }}</h5>

645

<h5 class="my-1">{{ editedItem.state }}</h5>

646

</v-flex>

646

</v-flex>

647

</v-layout>

647

</v-layout>

648

</v-flex>

648

</v-flex>

649

</v-layout>

649

</v-layout>

650

<v-layout wrap>

650

<v-layout wrap>

651

<v-flex xs12 sm6>

651

<v-flex xs12 sm6>

652

<v-layout>

652

<v-layout>

653

<v-flex xs6 sm5>

653

<v-flex xs6 sm5>

654

<b>

654

<b>

655

655

656

<b>Pincode:</b>

656

<b>Pincode:</b>

657

</h5>

657

</h5>

658

</b>

658

</b>

659

</v-flex>

659

</v-flex>

660

<v-flex sm7 xs6>

660

<v-flex sm7 xs6>

661

<h5 class="my-1">{{ editedItem.pincode }}</h5>

661

<h5 class="my-1">{{ editedItem.pincode }}</h5>

662

</v-flex>

662

</v-flex>

663

</v-layout>

663

</v-layout>

664

</v-flex>

664

</v-flex>

665

<v-flex xs12 sm5>

665

<v-flex xs12 sm5>

666

<v-layout>

666

<v-layout>

667

<v-flex xs6 sm5>

667

<v-flex xs6 sm5>

668

<b>

668

<b>

669

669

670

<b>Country:</b>

670

<b>Country:</b>

671

</h5>

671

</h5>

672

</b>

672

</b>

673

</v-flex>

673

</v-flex>

674

<v-flex sm7 xs6>

674

<v-flex sm7 xs6>

675

<h5 class="my-1">{{ editedItem.country }}</h5>

675

<h5 class="my-1">{{ editedItem.country }}</h5>

676

</v-flex>

676

</v-flex>

677

</v-layout>

677

</v-layout>

678

</v-flex>

678

</v-flex>

679

</v-layout>

679

</v-layout>

680

<v-layout wrap>

680

<v-layout wrap>

681

<v-flex xs12 sm6>

681

<v-flex xs12 sm6>

682

<v-layout>

682

<v-layout>

683

<v-flex sm5 xs6>

683

<v-flex sm5 xs6>

684

<b>

684

<b>

685

685

686

<b>Mobile No:</b>

686

<b>Mobile No:</b>

687

</h5>

687

</h5>

688

</b>

688

</b>

689

</v-flex>

689

</v-flex>

690

<v-flex sm6 xs6>

690

<v-flex sm6 xs6>

691

<h5 class="my-1">{{ editedItem.mobile }}</h5>

691

<h5 class="my-1">{{ editedItem.mobile }}</h5>

692

</v-flex>

692

</v-flex>

693

</v-layout>

693

</v-layout>

694

</v-flex>

694

</v-flex>

695

<v-flex xs12 sm6>

695

<v-flex xs12 sm6>

696

<v-layout>

696

<v-layout>

697

<v-flex xs6 sm4>

697

<v-flex xs6 sm4>

698

<b>

698

<b>

699

699

700

<b>Fahter Name:</b>

700

<b>Fahter Name:</b>

701

</h5>

701

</h5>

702

</b>

702

</b>

703

</v-flex>

703

</v-flex>

704

<v-flex sm8 xs6>

704

<v-flex sm8 xs6>

705

<h5 class="my-1">{{ editedItem.fatherName }}</h5>

705

<h5 class="my-1">{{ editedItem.fatherName }}</h5>

706

</v-flex>

706

</v-flex>

707

</v-layout>

707

</v-layout>

708

</v-flex>

708

</v-flex>

709

</v-layout>

709

</v-layout>

710

<v-layout wrap>

710

<v-layout wrap>

711

<v-flex xs12 sm5>

711

<v-flex xs12 sm5>

712

<v-layout>

712

<v-layout>

713

<v-flex xs6 sm6>

713

<v-flex xs6 sm6>

714

<b>

714

<b>

715

715

716

<b>Mother Name:</b>

716

<b>Mother Name:</b>

717

</h5>

717

</h5>

718

</b>

718

</b>

719

</v-flex>

719

</v-flex>

720

<v-flex sm6 xs6>

720

<v-flex sm6 xs6>

721

<h5 class="my-1">{{ editedItem.motherName }}</h5>

721

<h5 class="my-1">{{ editedItem.motherName }}</h5>

722

</v-flex>

722

</v-flex>

723

</v-layout>

723

</v-layout>

724

</v-flex>

724

</v-flex>

725

<v-flex xs12 sm6>

725

<v-flex xs12 sm6>

726

<v-layout>

726

<v-layout>

727

<v-flex xs6 sm6>

727

<v-flex xs6 sm6>

728

<b>

728

<b>

729

729

730

<b>Father Cell No:</b>

730

<b>Father Cell No:</b>

731

</h5>

731

</h5>

732

</b>

732

</b>

733

</v-flex>

733

</v-flex>

734

<v-flex sm6 xs6>

734

<v-flex sm6 xs6>

735

<h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>

735

<h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>

736

</v-flex>

736

</v-flex>

737

</v-layout>

737

</v-layout>

738

</v-flex>

738

</v-flex>

739

</v-layout>

739

</v-layout>

740

<v-layout wrap>

740

<v-layout wrap>

741

<v-flex xs12 sm5>

741

<v-flex xs12 sm5>

742

<v-layout>

742

<v-layout>

743

<v-flex xs6 sm6>

743

<v-flex xs6 sm6>

744

<b>

744

<b>

745

745

746

<b>Mother Cell No:</b>

746

<b>Mother Cell No:</b>

747

</h5>

747

</h5>

748

</b>

748

</b>

749

</v-flex>

749

</v-flex>

750

<v-flex sm6 xs6>

750

<v-flex sm6 xs6>

751

<h5 class="my-1">{{ editedItem.motherCellNo }}</h5>

751

<h5 class="my-1">{{ editedItem.motherCellNo }}</h5>

752

</v-flex>

752

</v-flex>

753

</v-layout>

753

</v-layout>

754

</v-flex>

754

</v-flex>

755

<v-flex xs12 sm6>

755

<v-flex xs12 sm6>

756

<v-layout>

756

<v-layout>

757

<v-flex xs6 sm6>

757

<v-flex xs6 sm6>

758

<b>

758

<b>

759

759

760

<b>Academic Year:</b>

760

<b>Academic Year:</b>

761

</h5>

761

</h5>

762

</b>

762

</b>

763

</v-flex>

763

</v-flex>

764

<v-flex sm5 xs6>

764

<v-flex sm5 xs6>

765

<h5 class="my-1">{{ editedItem.establishmentYear }}</h5>

765

<h5 class="my-1">{{ editedItem.establishmentYear }}</h5>

766

</v-flex>

766

</v-flex>

767

</v-layout>

767

</v-layout>

768

</v-flex>

768

</v-flex>

769

</v-layout>

769

</v-layout>

770

<v-layout wrap>

770

<v-layout wrap>

771

<v-flex xs12 sm5>

771

<v-flex xs12 sm5>

772

<v-layout>

772

<v-layout>

773

<v-flex xs6 sm6>

773

<v-flex xs6 sm6>

774

<b>

774

<b>

775

775

776

<b>Medical Notes:</b>

776

<b>Medical Notes:</b>

777

</h5>

777

</h5>

778

</b>

778

</b>

779

</v-flex>

779

</v-flex>

780

<v-flex sm5 xs6>

780

<v-flex sm5 xs6>

781

<h5 class="my-1">{{ editedItem.medicalNotes }}</h5>

781

<h5 class="my-1">{{ editedItem.medicalNotes }}</h5>

782

</v-flex>

782

</v-flex>

783

</v-layout>

783

</v-layout>

784

</v-flex>

784

</v-flex>

785

<v-flex xs12 sm6>

785

<v-flex xs12 sm6>

786

<v-layout>

786

<v-layout>

787

<v-flex xs6 sm6>

787

<v-flex xs6 sm6>

788

<b>

788

<b>

789

789

790

790

791

</h5>

791

</h5>

792

</b>

792

</b>

793

</v-flex>

793

</v-flex>

794

<v-flex sm6 xs6>

794

<v-flex sm6 xs6>

795

<h5 class="my-1">{{ editedItem.rollNo }}</h5>

795

<h5 class="my-1">{{ editedItem.rollNo }}</h5>

796

</v-flex>

796

</v-flex>

797

</v-layout>

797

</v-layout>

798

</v-flex>

798

</v-flex>

799

</v-layout>

799

</v-layout>

800

<v-layout wrap class="hidden-xs-only">

800

<v-layout wrap class="hidden-xs-only">

801

<v-flex xs12 sm5>

801

<v-flex xs12 sm5>

802

<v-layout wrap>

802

<v-layout wrap>

803

<v-flex sm6>

803

<v-flex sm6>

804

<b>

804

<b>

805

805

806

<b>present Address:</b>

806

<b>present Address:</b>

807

</h5>

807

</h5>

808

</b>

808

</b>

809

</v-flex>

809

</v-flex>

810

<v-flex sm5>

810

<v-flex sm5>

811

<h5 class="my-1">{{ editedItem.presentAddress }}</h5>

811

<h5 class="my-1">{{ editedItem.presentAddress }}</h5>

812

</v-flex>

812

</v-flex>

813

</v-layout>

813

</v-layout>

814

</v-flex>

814

</v-flex>

815

<v-flex sm6>

815

<v-flex sm6>

816

<v-layout wrap>

816

<v-layout wrap>

817

<v-flex sm6>

817

<v-flex sm6>

818

<b>

818

<b>

819

819

820

<b>Permanent Address:</b>

820

<b>Permanent Address:</b>

821

</h5>

821

</h5>

822

</b>

822

</b>

823

</v-flex>

823

</v-flex>

824

<v-flex sm6>

824

<v-flex sm6>

825

<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>

825

<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>

826

</v-flex>

826

</v-flex>

827

</v-layout>

827

</v-layout>

828

</v-flex>

828

</v-flex>

829

</v-layout>

829

</v-layout>

830

<v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">

830

<v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">

831

<v-flex xs12 sm5>

831

<v-flex xs12 sm5>

832

<v-layout wrap>

832

<v-layout wrap>

833

<v-flex xs8 sm6>

833

<v-flex xs8 sm6>

834

<b>

834

<b>

835

835

836

<b>present Address:-</b>

836

<b>present Address:-</b>

837

</h5>

837

</h5>

838

</b>

838

</b>

839

</v-flex>

839

</v-flex>

840

<v-flex sm5 xs12>

840

<v-flex sm5 xs12>

841

<h5 class="my-1">{{ editedItem.presentAddress }}</h5>

841

<h5 class="my-1">{{ editedItem.presentAddress }}</h5>

842

</v-flex>

842

</v-flex>

843

</v-layout>

843

</v-layout>

844

</v-flex>

844

</v-flex>

845

<v-flex xs12 sm6>

845

<v-flex xs12 sm6>

846

<v-layout wrap>

846

<v-layout wrap>

847

<v-flex xs9 sm6>

847

<v-flex xs9 sm6>

848

<b>

848

<b>

849

849

850

<b>Permanent Address:-</b>

850

<b>Permanent Address:-</b>

851

</h5>

851

</h5>

852

</b>

852

</b>

853

</v-flex>

853

</v-flex>

854

<v-flex sm6 xs12>

854

<v-flex sm6 xs12>

855

<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>

855

<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>

856

</v-flex>

856

</v-flex>

857

</v-layout>

857

</v-layout>

858

</v-flex>

858

</v-flex>

859

</v-layout>

859

</v-layout>

860

</v-container>

860

</v-container>

861

</v-card-text>

861

</v-card-text>

862

</v-card>

862

</v-card>

863

</v-dialog>

863

</v-dialog>

864

865

<v-snackbar

865

<v-snackbar

866

:timeout="timeout"

866

:timeout="timeout"

867

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

867

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

868

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

868

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

869

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

869

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

870

v-model="snackbar"

870

v-model="snackbar"

871

color="success"

871

color="success"

872

>{{ text }}</v-snackbar>

872

>{{ text }}</v-snackbar>

873

874

874

875

<v-card flat>

875

<v-card flat>

876

<v-card-actions class="hidden-xs-only hidden-sm-only">

876

<v-card-actions class="hidden-xs-only hidden-sm-only">

877

<v-layout>

877

<v-layout>

878

<label class="right mt-4 ml-5">Select Class:</label>

878

<label class="right mt-4 ml-5">Select Class:</label>

879

<v-select

879

<v-select

880

:items="addclass"

880

:items="addclass"

881

label="Select Class"

881

label="Select Class"

882

v-model="selectStudents.select"

882

v-model="selectStudents.select"

883

item-text="classNum"

883

item-text="classNum"

884

item-value="_id"

884

item-value="_id"

885

name="Select Class"

885

name="Select Class"

886

:rules="classRules"

886

:rules="classRules"

887

@change="getSections(selectStudents.select)"

887

@change="getSections(selectStudents.select)"

888

class="px-4"

888

class="px-4"

889

required

889

required

890

></v-select>

890

></v-select>

891

<label class="right mt-4">Select Section:</label>

891

<label class="right mt-4">Select Section:</label>

892

<v-select

892

<v-select

893

:items="addSection"

893

:items="addSection"

894

label="Select Section"

894

label="Select Section"

895

v-model="selectStudents.selectSection"

895

v-model="selectStudents.selectSection"

896

item-text="name"

896

item-text="name"

897

item-value="_id"

897

item-value="_id"

898

name="Select Section"

898

name="Select Section"

899

:rules="sectionRules"

899

:rules="sectionRules"

900

class="pl-3"

900

class="pl-3"

901

required

901

required

902

></v-select>

902

></v-select>

903

</v-layout>

903

</v-layout>

904

<v-spacer></v-spacer>

904

<v-spacer></v-spacer>

905

<v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>

905

<v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>

906

</v-card-actions>

906

</v-card-actions>

907

<v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">

907

<v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">

908

<v-layout>

908

<v-layout>

909

<v-flex xs4>

909

<v-flex xs4>

910

<label class="right mt-4">Select Class:</label>

910

<label class="right mt-4">Select Class:</label>

911

</v-flex>

911

</v-flex>

912

<v-flex xs8>

912

<v-flex xs8>

913

<v-select

913

<v-select

914

:items="addclass"

914

:items="addclass"

915

label="Select Class"

915

label="Select Class"

916

v-model="selectStudents.select"

916

v-model="selectStudents.select"

917

item-text="classNum"

917

item-text="classNum"

918

item-value="_id"

918

item-value="_id"

919

name="Select Class"

919

name="Select Class"

920

:rules="classRules"

920

:rules="classRules"

921

@change="getSections(selectStudents.select)"

921

@change="getSections(selectStudents.select)"

922

class="px-2"

922

class="px-2"

923

required

923

required

924

></v-select>

924

></v-select>

925

</v-flex>

925

</v-flex>

926

</v-layout>

926

</v-layout>

927

<v-layout>

927

<v-layout>

928

<v-flex xs4>

928

<v-flex xs4>

929

<label class="right mt-4">Select Section:</label>

929

<label class="right mt-4">Select Section:</label>

930

</v-flex>

930

</v-flex>

931

<v-flex xs8>

931

<v-flex xs8>

932

<v-select

932

<v-select

933

:items="addSection"

933

:items="addSection"

934

label="Select Section"

934

label="Select Section"

935

v-model="selectStudents.selectSection"

935

v-model="selectStudents.selectSection"

936

item-text="name"

936

item-text="name"

937

item-value="_id"

937

item-value="_id"

938

name="Select Section"

938

name="Select Section"

939

:rules="sectionRules"

939

:rules="sectionRules"

940

class="px-2"

940

class="px-2"

941

required

941

required

942

></v-select>

942

></v-select>

943

</v-flex>

943

</v-flex>

944

</v-layout>

944

</v-layout>

945

<v-layout>

945

<v-layout>

946

<v-flex xs5 class="mx-auto mb-2">

946

<v-flex xs5 class="mx-auto mb-2">

947

<v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>

947

<v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>

948

</v-flex>

948

</v-flex>

949

</v-layout>

949

</v-layout>

950

</v-flex>

950

</v-flex>

951

</v-card>

951

</v-card>

952

<v-data-table

952

<v-data-table

953

:headers="headers"

953

:headers="headers"

954

:items="desserts"

954

:items="desserts"

955

:pagination.sync="pagination"

955

:pagination.sync="pagination"

956

:search="search"

956

:search="search"

957

>

957

>

958

958

959

<td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>

959

<td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>

960

960

961

<v-avatar>

961

<v-avatar>

962

962

963

963

964

</v-avatar>

964

</v-avatar>

965

</td>

965

</td>

966

<td id="td" class="text-xs-center">{{ props.item.name}}</td>

966

<td id="td" class="text-xs-center">{{ props.item.name}}</td>

967

<td id="td" class="text-xs-center">{{ props.item.email }}</td>

967

<td id="td" class="text-xs-center">{{ props.item.email }}</td>

968

<td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>

968

<td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>

969

<td id="td" class="text-xs-center">{{ props.item.gender }}</td>

969

<td id="td" class="text-xs-center">{{ props.item.gender }}</td>

970

<td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>

970

<td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>

971

<td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>

971

<td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>

972

<td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>

972

<td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>

973

<td id="td" class="text-xs-center">{{ props.item.mobile}}</td>

973

<td id="td" class="text-xs-center">{{ props.item.mobile}}</td>

974

975

975

976

<span>

976

<span>

977

<v-tooltip top>

977

<v-tooltip top>

978

<img

978

<img

979

slot="activator"

979

slot="activator"

980

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

980

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

981

class="mr5"

981

class="mr5"

982

@click="profile(props.item)"

982

@click="profile(props.item)"

983

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

983

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

984

/>

984

/>

985

985

986

</v-tooltip>

986

</v-tooltip>

987

<v-tooltip top>

987

<v-tooltip top>

988

<img

988

<img

989

slot="activator"

989

slot="activator"

990

style="cursor:pointer; width:20px; height:18px; "

990

style="cursor:pointer; width:20px; height:18px; "

991

class="mr5"

991

class="mr5"

992

@click="editItem(props.item)"

992

@click="editItem(props.item)"

993

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

993

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

994

/>

994

/>

995

995

996

</v-tooltip>

996

</v-tooltip>

997

<v-tooltip top>

997

<v-tooltip top>

998

<img

998

<img

999

slot="activator"

999

slot="activator"

1000

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

1000

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

1001

class="mr5"

1001

class="mr5"

1002

@click="deleteItem(props.item)"

1002

@click="deleteItem(props.item)"

1003

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

1003

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

1004

/>

1004

/>

1005

<span>Delete</span>

1005

<span>Delete</span>

1006

</v-tooltip>

1006

</v-tooltip>

1007

</span>

1007

</span>

1008

</td>

1008

</td>

1009

</template>

1009

</template>

1010

<v-alert

1010

<v-alert

1011

slot="no-results"

1011

slot="no-results"

1012

:value="true"

1012

:value="true"

1013

color="error"

1013

color="error"

1014

icon="warning"

1014

icon="warning"

1015

>Your search for "{{ search }}" found no results.</v-alert>

1015

>Your search for "{{ search }}" found no results.</v-alert>

1016

</v-data-table>

1016

</v-data-table>

1017

</v-tab-item>

1017

</v-tab-item>

1018

1019

1019

1020

<v-tab-item>

1020

<v-tab-item>

1021

<v-container fluid>

1021

<v-container fluid>

1022

<v-layout align-center justify-center fill-height>

1022

<v-layout align-center justify-center fill-height>

1023

<v-flex xs12 sm12 md10 lg11>

1023

<v-flex xs12 sm12 md10 lg11>

1024

<div>

1024

<div>

1025

<v-app>

1025

<v-app>

1026

<v-stepper v-model="e2">

1026

<v-stepper v-model="e2">

1027

<v-stepper-header>

1027

<v-stepper-header>

1028

<v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>

1028

<v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>

1029

<v-divider></v-divider>

1029

<v-divider></v-divider>

1030

<v-stepper-step step="2">Fill Student Details</v-stepper-step>

1030

<v-stepper-step step="2">Fill Student Details</v-stepper-step>

1031

</v-stepper-header>

1031

</v-stepper-header>

1032

<v-stepper-items>

1032

<v-stepper-items>

1033

<v-stepper-content step="1">

1033

<v-stepper-content step="1">

1034

<v-container fluid class>

1034

<v-container fluid class>

1035

<v-snackbar

1035

<v-snackbar

1036

:timeout="timeout"

1036

:timeout="timeout"

1037

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

1037

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

1038

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

1038

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

1039

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

1039

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

1040

v-model="snackbar"

1040

v-model="snackbar"

1041

color="success"

1041

color="success"

1042

>{{ text }}</v-snackbar>

1042

>{{ text }}</v-snackbar>

1043

<v-flex xs12 sm12>

1043

<v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">

1044

<v-form ref="parentForm" v-model="valid" lazy-validation>

1045

<v-layout wrap>

1046

<v-flex xs12 sm6>

1047

<v-layout wrap>

1048

<v-flex xs12 class="pt-4 subheading">

1049

<label>Father Cell No:</label>

1050

</v-flex>

1051

<v-flex xs12 >

1052

<v-text-field

1053

v-model.trim="parentData.fatherCellNo"

1054

placeholder="fill your father Cell Number"

1055

type="number"

1056

:rules="fatheCellNoRules"

1057

v-on:keyup="getParentDetails()"

1058

required

1059

></v-text-field>

1060

</v-flex>

1061

</v-layout>

1062

</v-flex>

1063

<v-flex xs12 sm6>

1064

<v-layout wrap>

1065

<v-flex xs12 class="pt-4 subheading">

1066

<label>Parent Email Id:</label>

1067

</v-flex>

1068

<v-flex xs12 >

1069

<v-text-field

1070

placeholder="fill Parent email"

1071

v-model="parentData.email"

1072

type="text"

1073

required

1074

></v-text-field>

1075

</v-flex>

1076

</v-layout>

1077

</v-flex>

1078

</v-layout>

1079

<v-layout wrap>

1080

<v-flex xs12 sm6>

1081

<v-layout wrap>

1082

<v-flex xs12 class="pt-4 subheading">

1083

<label>Father Name:</label>

1084

</v-flex>

1085

<v-flex xs12>

1086

<v-text-field

1087

v-model="parentData.fatherName"

1088

placeholder="Fill your father Name"

1089

required

1090

></v-text-field>

1091

</v-flex>

1092

</v-layout>

1093

</v-flex>

1094

<v-flex xs12 sm6>

1095

<v-layout wrap>

1096

<v-flex xs12 class="pt-4 subheading">

1097

<label>Mother Name:</label>

1098

</v-flex>

1099

<v-flex xs12>

1100

<v-text-field

1101

v-model="parentData.motherName"

1102

placeholder="fill your Mother Name"

1103

name="state"

1104

type="text"

1105

required

1106

></v-text-field>

1107

</v-flex>

1108

</v-layout>

1109

</v-flex>

1110

</v-layout>

1111

<v-layout wrap>

1112

<v-flex xs12 sm6>

1113

<v-layout wrap>

1114

<v-flex xs12 class="pt-4 subheading">

1115

<label >Mother Cell No:</label>

1116

</v-flex>

1117

<v-flex xs12>

1118

<v-text-field

1119

v-model="parentData.motherCellNo"

1120

placeholder="fill your Mother Cell Number"

1121

name="state"

1122

type="number"

1123

required

1124

></v-text-field>

1125

</v-flex>

1126

</v-layout>

1127

</v-flex>

1128

<v-flex xs12 sm6>

1129

<v-layout wrap>

1130

<v-flex xs12 class="pt-4 subheading">

1131

<label>Father Profession:</label>

1132

</v-flex>

1133

<v-flex xs12 >

1134

<v-text-field

1135

v-model="parentData.fatherProfession"

1136

placeholder="fill your father profession"

1137

></v-text-field>

1138

</v-flex>

1139

</v-layout>

1140

</v-flex>

1141

</v-layout>

1142

<v-layout wrap>

1143

<v-flex xs12 sm6>

1144

<v-layout wrap>

1145

<v-flex xs12 class="pt-4 subheading">

1146

<label>Mother Profession:</label>

1147

</v-flex>

1148

<v-flex xs12 >

1149

<v-text-field

1150

v-model="parentData.motherProfession"

1151

placeholder="fill your mother profession"

1152

></v-text-field>

1153

</v-flex>

1154

</v-layout>

1155

</v-flex>

1156

</v-layout>

1157

<v-flex sm12 class="hidden-xs-only">

1158

<v-card-actions>

1159

<v-spacer></v-spacer>

1160

<v-btn

1161

@click="submitParentDetails"

1162

round

1163

dark

1164

:loading="loading"

1165

v-show="showParent"

1166

>Add</v-btn>

1167

<v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>

1168

</v-card-actions>

1169

</v-flex>

1170

<v-flex

1171

xs6

1172

class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"

1173

>

1174

<v-btn

1175

@click="submitParentDetails"

1176

round

1177

dark

1178

:loading="loading"

1179

v-show="showParent"

1180

>Add</v-btn>

1181

<v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>

1182

</v-flex>

1183

</v-form>

1184

</v-flex>

1185

<v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">

1044

<v-form ref="parentForm" v-model="valid" lazy-validation>

1186

<v-form ref="parentForm" v-model="valid" lazy-validation>

1045

<v-layout wrap>

1187

<v-layout wrap>

1046

<v-flex xs12 sm6>

1188

<v-flex xs12 sm6>

1047

<v-layout>

1189

<v-layout>

1048

<v-flex xs4 class="pt-4 subheading">

1190

<v-flex xs4 class="pt-4 subheading">

1049

<label class="right">Father Cell No:</label>

1191

<label class="right">Father Cell No:</label>

1050

</v-flex>

1192

</v-flex>

1051

<v-flex xs8 class="ml-3">

1193

<v-flex xs8 class="ml-3">

1052

<v-text-field

1194

<v-text-field

1053

v-model.trim="parentData.fatherCellNo"

1195

v-model.trim="parentData.fatherCellNo"

1054

placeholder="fill your father Cell Number"

1196

placeholder="fill your father Cell Number"

1055

type="number"

1197

type="number"

1056

:rules="fatheCellNoRules"

1198

:rules="fatheCellNoRules"

1057

v-on:keyup="getParentDetails()"

1199

v-on:keyup="getParentDetails()"

1058

required

1200

required

1059

></v-text-field>

1201

></v-text-field>

1060

</v-flex>

1202

</v-flex>

1061

</v-layout>

1203

</v-layout>

1062

</v-flex>

1204

</v-flex>

1063

<v-flex xs12 sm6>

1205

<v-flex xs12 sm6>

1064

<v-layout>

1206

<v-layout>

1065

<v-flex xs4 class="pt-4 subheading">

1207

<v-flex xs4 class="pt-4 subheading">

1066

<label class="right">Parent Email Id:</label>

1208

<label class="right">Parent Email Id:</label>

1067

</v-flex>

1209

</v-flex>

1068

<v-flex xs8 class="ml-3">

1210

<v-flex xs8 class="ml-3">

1069

<v-text-field

1211

<v-text-field

1070

placeholder="fill Parent email"

1212

placeholder="fill Parent email"

1071

v-model="parentData.email"

1213

v-model="parentData.email"

1072

type="text"

1214

type="text"

1073

required

1215

required

1074

></v-text-field>

1216

></v-text-field>

1075

</v-flex>

1217

</v-flex>

1076

</v-layout>

1218

</v-layout>

1077

</v-flex>

1219

</v-flex>

1078

</v-layout>

1220

</v-layout>

1079

<v-layout wrap>

1221

<v-layout wrap>

1080

<v-flex xs12 sm6>

1222

<v-flex xs12 sm6>

1081

<v-layout>

1223

<v-layout>

1082

<v-flex xs4 class="pt-4 subheading">

1224

<v-flex xs4 class="pt-4 subheading">

1083

<label class="right">Father Name:</label>

1225

<label class="right">Father Name:</label>

1084

</v-flex>

1226

</v-flex>

1085

<v-flex xs8 class="ml-3">

1227

<v-flex xs8 class="ml-3">

1086

<v-text-field

1228

<v-text-field

1087

v-model="parentData.fatherName"

1229

v-model="parentData.fatherName"

1088

placeholder="Fill your father Name"

1230

placeholder="Fill your father Name"

1089

required

1231

required

1090

></v-text-field>

1232

></v-text-field>

1091

</v-flex>

1233

</v-flex>

1092

</v-layout>

1234

</v-layout>

1093

</v-flex>

1235

</v-flex>

1094

<v-flex xs12 sm6>

1236

<v-flex xs12 sm6>

1095

<v-layout>

1237

<v-layout>

1096

<v-flex xs4 class="pt-4 subheading">

1238

<v-flex xs4 class="pt-4 subheading">

1097

<label class="right">Mother Name:</label>

1239

<label class="right">Mother Name:</label>

1098

</v-flex>

1240

</v-flex>

1099

<v-flex xs8 class="ml-3">

1241

<v-flex xs8 class="ml-3">

1100

<v-text-field

1242

<v-text-field

1101

v-model="parentData.motherName"

1243

v-model="parentData.motherName"

1102

placeholder="fill your Mother Name"

1244

placeholder="fill your Mother Name"

1103

name="state"

1245

name="state"

1104

type="text"

1246

type="text"

1105

required

1247

required

1106

></v-text-field>

1248

></v-text-field>

1107

</v-flex>

1249

</v-flex>

1108

</v-layout>

1250

</v-layout>

1109

</v-flex>

1251

</v-flex>

1110

</v-layout>

1252

</v-layout>

1111

<v-layout wrap>

1253

<v-layout wrap>

1112

<v-flex xs12 sm6>

1254

<v-flex xs12 sm6>

1113

<v-layout>

1255

<v-layout>

1114

<v-flex xs4 class="pt-4 subheading">

1256

<v-flex xs4 class="pt-4 subheading">

1115

<label class="right">Mother Cell No:</label>

1257

<label class="right">Mother Cell No:</label>

1116

</v-flex>

1258

</v-flex>

1117

<v-flex xs8 class="ml-3">

1259

<v-flex xs8 class="ml-3">

1118

<v-text-field

1260

<v-text-field

1119

v-model="parentData.motherCellNo"

1261

v-model="parentData.motherCellNo"

1120

placeholder="fill your Mother Cell Number"

1262

placeholder="fill your Mother Cell Number"

1121

name="state"

1263

name="state"

1122

type="number"

1264

type="number"

1123

required

1265

required

1124

></v-text-field>

1266

></v-text-field>

1125

</v-flex>

1267

</v-flex>

1126

</v-layout>

1268

</v-layout>

1127

</v-flex>

1269

</v-flex>

1128

<v-flex xs12 sm6>

1270

<v-flex xs12 sm6>

1129

<v-layout>

1271

<v-layout>

1130

<v-flex xs4 class="pt-4 subheading">

1272

<v-flex xs4 class="pt-4 subheading">

1131

<label class="right">Father Profession:</label>

1273

<label class="right">Father Profession:</label>

1132

</v-flex>

1274

</v-flex>

1133

<v-flex xs8 class="ml-3">

1275

<v-flex xs8 class="ml-3">

1134

<v-text-field

1276

<v-text-field

1135

v-model="parentData.fatherProfession"

1277

v-model="parentData.fatherProfession"

1136

placeholder="fill your father profession"

1278

placeholder="fill your father profession"

1137

></v-text-field>

1279

></v-text-field>

1138

</v-flex>

1280

</v-flex>

1139

</v-layout>

1281

</v-layout>

1140

</v-flex>

1282

</v-flex>

1141

</v-layout>

1283

</v-layout>

1142

<v-layout wrap>

1284

<v-layout wrap>

1143

<v-flex xs12 sm6>

1285

<v-flex xs12 sm6>

1144

<v-layout>

1286

<v-layout>

1145

<v-flex xs4 class="pt-4 subheading">

1287

<v-flex xs4 class="pt-4 subheading">

1146

<label class="right">Mother Profession:</label>

1288

<label class="right">Mother Profession:</label>

1147

</v-flex>

1289

</v-flex>

1148

<v-flex xs8 class="ml-3">

1290

<v-flex xs8 class="ml-3">

1149

<v-text-field

1291

<v-text-field

1150

v-model="parentData.motherProfession"

1292

v-model="parentData.motherProfession"

1151

placeholder="fill your mother profession"

1293

placeholder="fill your mother profession"

1152

></v-text-field>

1294

></v-text-field>

1153

</v-flex>

1295

</v-flex>

1154

</v-layout>

1296

</v-layout>

1155

</v-flex>

1297

</v-flex>

1156

</v-layout>

1298

</v-layout>

1157

<v-flex sm12 class="hidden-xs-only">

1299

<v-flex sm12 class="hidden-xs-only">

1158

<v-card-actions>

1300

<v-card-actions>

1159

<v-spacer></v-spacer>

1301

<v-spacer></v-spacer>

1160

<v-btn

1302

<v-btn

1161

@click="submitParentDetails"

1303

@click="submitParentDetails"

1162

round

1304

round

1163

dark

1305

dark

1164

:loading="loading"

1306

:loading="loading"

1165

v-show="showParent"

1307

v-show="showParent"

1166

>Add</v-btn>

1308

>Add</v-btn>

1167

<v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>

1309

<v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>

1168

</v-card-actions>

1310

</v-card-actions>

1169

</v-flex>

1311

</v-flex>

1170

<v-flex

1312

<v-flex

1171

xs6

1313

xs6

1172

class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"

1314

class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"

1173

>

1315

>

1174

<v-btn

1316

<v-btn

1175

@click="submitParentDetails"

1317

@click="submitParentDetails"

1176

round

1318

round

1177

dark

1319

dark

1178

:loading="loading"

1320

:loading="loading"

1179

v-show="showParent"

1321

v-show="showParent"

1180

>Add</v-btn>

1322

>Add</v-btn>

1181

<v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>

1323

<v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>

1182

</v-flex>

1324

</v-flex>

1183

</v-form>

1325

</v-form>

1184

</v-flex>

1326

</v-flex>

1185

</v-container>

1327

</v-container>

1186

</v-stepper-content>

1328

</v-stepper-content>

1187

<v-stepper-content step="2">

1329

<v-stepper-content step="2">

1188

1189

<v-snackbar

1330

<v-snackbar

1190

:timeout="timeout"

1331

:timeout="timeout"

1191

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

1332

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

1192

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

1333

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

1193

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

1334

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

1194

v-model="snackbar"

1335

v-model="snackbar"

1195

color="success"

1336

color="success"

1196

>{{ text }}</v-snackbar>

1337

>{{ text }}</v-snackbar>

1197

<v-flex xs12 sm12>

1338

<v-flex xs12 sm12>

1198

<v-form ref="form" v-model="valid" lazy-validation>

1339

<v-form ref="form" v-model="valid" lazy-validation>

1199

1200

<v-layout>

1340

<v-layout>

1201

<v-flex

1341

<v-flex

1202

xs12

1342

xs12

1203

class="text-xs-center text-sm-center text-md-center text-lg-center"

1343

class="text-xs-center text-sm-center text-md-center text-lg-center"

1204

>

1344

>

1205

<v-avatar size="100px">

1345

<v-avatar size="100px">

1206

1346

1207

</v-avatar>

1347

</v-avatar>

1208

<input

1348

<input

1209

type="file"

1349

type="file"

1210

style="display: none"

1350

style="display: none"

1211

ref="image"

1351

ref="image"

1212

accept="image/*"

1352

accept="image/*"

1213

@change="onFilePicked"

1353

@change="onFilePicked"

1214

/>

1354

/>

1215

<img

1355

<img

1216

:src="imageData.imageUrl"

1356

:src="imageData.imageUrl"

1217

height="150"

1357

height="150"

1218

v-if="imageUrl"

1358

v-if="imageUrl"

1219

style="border-radius:50%; width:200px"

1359

style="border-radius:50%; width:200px"

1220

/>

1360

/>

1221

</v-flex>

1361

</v-flex>

1222

</v-layout>

1362

</v-layout>

1223

<v-layout wrap>

1363

<v-layout wrap>

1224

<v-flex xs12 sm6>

1364

<v-flex xs12 sm6>

1225

<v-layout>

1365

<v-layout>

1226

<v-flex x4 sm4 class="pt-4 subheading">

1366

<v-flex x4 sm4 class="pt-4 subheading">

1227

<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>

1367

<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>

1228

<label

1368

<label

1229

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1369

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1230

>Class:</label>

1370

>Class:</label>

1231

</v-flex>

1371

</v-flex>

1232

<v-flex xs8 sm8 class="ml-3">

1372

<v-flex xs8 sm8 class="ml-3">

1233

<v-select

1373

<v-select

1234

:items="addclass"

1374

:items="addclass"

1235

label="Select Class"

1375

label="Select Class"

1236

v-model="addStudents.select"

1376

v-model="addStudents.select"

1237

item-text="classNum"

1377

item-text="classNum"

1238

item-value="_id"

1378

item-value="_id"

1239

name="Select Class"

1379

name="Select Class"

1240

:rules="classRules"

1380

:rules="classRules"

1241

@change="getSection(addStudents.select)"

1381

@change="getSection(addStudents.select)"

1242

required

1382

required

1243

></v-select>

1383

></v-select>

1244

</v-flex>

1384

</v-flex>

1245

</v-layout>

1385

</v-layout>

1246

</v-flex>

1386

</v-flex>

1247

<v-flex xs12 sm6>

1387

<v-flex xs12 sm6>

1248

<v-layout>

1388

<v-layout>

1249

<v-flex xs4 class="pt-4 subheading">

1389

<v-flex xs4 class="pt-4 subheading">

1250

<label

1390

<label

1251

class="right hidden-xs-only hidden-sm-only"

1391

class="right hidden-xs-only hidden-sm-only"

1252

>Select Section:</label>

1392

>Select Section:</label>

1253

<label

1393

<label

1254

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1394

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1255

>Section:</label>

1395

>Section:</label>

1256

</v-flex>

1396

</v-flex>

1257

<v-flex xs8 class="ml-3">

1397

<v-flex xs8 class="ml-3">

1258

<v-select

1398

<v-select

1259

:items="addSection"

1399

:items="addSection"

1260

label="Select Section"

1400

label="Select Section"

1261

v-model="addStudents.selectSection"

1401

v-model="addStudents.selectSection"

1262

item-text="name"

1402

item-text="name"

1263

item-value="_id"

1403

item-value="_id"

1264

name="Select Section"

1404

name="Select Section"

1265

:rules="sectionRules"

1405

:rules="sectionRules"

1266

required

1406

required

1267

></v-select>

1407

></v-select>

1268

</v-flex>

1408

</v-flex>

1269

</v-layout>

1409

</v-layout>

1270

</v-flex>

1410

</v-flex>

1271

</v-layout>

1411

</v-layout>

1272

<v-layout wrap>

1412

<v-layout wrap>

1273

<v-flex xs12 sm6>

1413

<v-flex xs12 sm6>

1274

<v-layout>

1414

<v-layout>

1275

<v-flex xs4 sm4 class="pt-4 subheading">

1415

<v-flex xs4 sm4 class="pt-4 subheading">

1276

1416

1277

<label

1417

<label

1278

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1418

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1279

>Name:</label>

1419

>Name:</label>

1280

</v-flex>

1420

</v-flex>

1281

<v-flex xs8 sm8 class="ml-3">

1421

<v-flex xs8 sm8 class="ml-3">

1282

<v-text-field

1422

<v-text-field

1283

v-model="addStudents.name"

1423

v-model="addStudents.name"

1284

placeholder="fill your full Name"

1424

placeholder="fill your full Name"

1285

name="name"

1425

name="name"

1286

type="text"

1426

type="text"

1287

:rules="nameRules"

1427

:rules="nameRules"

1288

required

1428

required

1289

></v-text-field>

1429

></v-text-field>

1290

</v-flex>

1430

</v-flex>

1291

</v-layout>

1431

</v-layout>

1292

</v-flex>

1432

</v-flex>

1293

<v-flex xs12 sm6>

1433

<v-flex xs12 sm6>

1294

<v-layout>

1434

<v-layout>

1295

<v-flex xs4 sm4 class="pt-4 subheading">

1435

<v-flex xs4 sm4 class="pt-4 subheading">

1296

<label class="right">Email ID:</label>

1436

<label class="right">Email ID:</label>

1297

</v-flex>

1437

</v-flex>

1298

<v-flex xs8 sm8 class="ml-3">

1438

<v-flex xs8 sm8 class="ml-3">

1299

<v-text-field

1439

<v-text-field

1300

placeholder="fill your email"

1440

placeholder="fill your email"

1301

v-model="addStudents.email"

1441

v-model="addStudents.email"

1302

type="text"

1442

type="text"

1303

name="email"

1443

name="email"

1304

required

1444

required

1305

></v-text-field>

1445

></v-text-field>

1306

</v-flex>

1446

</v-flex>

1307

</v-layout>

1447

</v-layout>

1308

</v-flex>

1448

</v-flex>

1309

</v-layout>

1449

</v-layout>

1310

<v-layout wrap>

1450

<v-layout wrap>

1311

<v-flex xs12 sm6>

1451

<v-flex xs12 sm6>

1312

<v-layout>

1452

<v-layout>

1313

<v-flex xs4 sm4 class="pt-4 subheading">

1453

<v-flex xs4 sm4 class="pt-4 subheading">

1314

<label

1454

<label

1315

class="right hidden-sm-only hidden-xs-only"

1455

class="right hidden-sm-only hidden-xs-only"

1316

>Date of Birth:</label>

1456

>Date of Birth:</label>

1317

<label

1457

<label

1318

class="right hidden-lg-only hidden-xl-only hidden-md-only"

1458

class="right hidden-lg-only hidden-xl-only hidden-md-only"

1319

>D.O.B:</label>

1459

>D.O.B:</label>

1320

</v-flex>

1460

</v-flex>

1321

<v-flex xs8 sm8 class="ml-3">

1461

<v-flex xs8 sm8 class="ml-3">

1322

<v-menu

1462

<v-menu

1323

ref="menu"

1463

ref="menu"

1324

:close-on-content-click="false"

1464

:close-on-content-click="false"

1325

v-model="menu"

1465

v-model="menu"

1326

:nudge-right="40"

1466

:nudge-right="40"

1327

lazy

1467

lazy

1328

transition="scale-transition"

1468

transition="scale-transition"

1329

offset-y

1469

offset-y

1330

full-width

1470

full-width

1331

min-width="290px"

1471

min-width="290px"

1332

>

1472

>

1333

<v-text-field

1473

<v-text-field

1334

slot="activator"

1474

slot="activator"

1335

:rules="dateRules"

1475

:rules="dateRules"

1336

v-model="addStudents.date"

1476

v-model="addStudents.date"

1337

placeholder="Select date"

1477

placeholder="Select date"

1338

></v-text-field>

1478

></v-text-field>

1339

<v-date-picker

1479

<v-date-picker

1340

ref="picker"

1480

ref="picker"

1341

v-model="addStudents.date"

1481

v-model="addStudents.date"

1342

:max="new Date().toISOString().substr(0, 10)"

1482

:max="new Date().toISOString().substr(0, 10)"

1343

min="1950-01-01"

1483

min="1950-01-01"

1344

@input="menu = false"

1484

@input="menu = false"

1345

></v-date-picker>

1485

></v-date-picker>

1346

</v-menu>

1486

</v-menu>

1347

</v-flex>

1487

</v-flex>

1348

</v-layout>

1488

</v-layout>

1349

</v-flex>

1489

</v-flex>

1350

<v-flex xs12 sm6>

1490

<v-flex xs12 sm6>

1351

<v-layout>

1491

<v-layout>

1352

<v-flex xs4 class="pt-4 subheading">

1492

<v-flex xs4 class="pt-4 subheading">

1353

1493

1354

</v-flex>

1494

</v-flex>

1355

<v-flex xs8 class="ml-3">

1495

<v-flex xs8 class="ml-3">

1356

<v-text-field

1496

<v-text-field

1357

v-model="addStudents.city"

1497

v-model="addStudents.city"

1358

placeholder="fill your City Name"

1498

placeholder="fill your City Name"

1359

name="City"

1499

name="City"

1360

type="text"

1500

type="text"

1361

:rules="cityRules"

1501

:rules="cityRules"

1362

required

1502

required

1363

></v-text-field>

1503

></v-text-field>

1364

</v-flex>

1504

</v-flex>

1365

</v-layout>

1505

</v-layout>

1366

</v-flex>

1506

</v-flex>

1367

</v-layout>

1507

</v-layout>

1368

<v-layout wrap>

1508

<v-layout wrap>

1369

<v-flex xs12 sm6>

1509

<v-flex xs12 sm6>

1370

<v-layout>

1510

<v-layout>

1371

<v-flex xs4 class="pt-4 subheading">

1511

<v-flex xs4 class="pt-4 subheading">

1372

<label class="right">State:</label>

1512

<label class="right">State:</label>

1373

</v-flex>

1513

</v-flex>

1374

<v-flex xs8 class="ml-3">

1514

<v-flex xs8 class="ml-3">

1375

<v-text-field

1515

<v-text-field

1376

v-model="addStudents.state"

1516

v-model="addStudents.state"

1377

placeholder="fill your State Name"

1517

placeholder="fill your State Name"

1378

name="state"

1518

name="state"

1379

type="text"

1519

type="text"

1380

:rules="stateRules"

1520

:rules="stateRules"

1381

required

1521

required

1382

></v-text-field>

1522

></v-text-field>

1383

</v-flex>

1523

</v-flex>

1384

</v-layout>

1524

</v-layout>

1385

</v-flex>

1525

</v-flex>

1386

<v-flex xs12 sm6>

1526

<v-flex xs12 sm6>

1387

<v-layout>

1527

<v-layout>

1388

<v-flex xs4 class="pt-4 subheading">

1528

<v-flex xs4 class="pt-4 subheading">

1389

<label class="right">Pincode:</label>

1529

<label class="right">Pincode:</label>

1390

</v-flex>

1530

</v-flex>

1391

<v-flex xs8 class="ml-3">

1531

<v-flex xs8 class="ml-3">

1392

<v-text-field

1532

<v-text-field

1393

v-model="addStudents.pincode"

1533

v-model="addStudents.pincode"

1394

placeholder="fill your pincode"

1534

placeholder="fill your pincode"

1395

name="pincode"

1535

name="pincode"

1396

type="number"

1536

type="number"

1397

:rules="pincode"

1537

:rules="pincode"

1398

required

1538

required

1399

></v-text-field>

1539

></v-text-field>

1400

</v-flex>

1540

</v-flex>

1401

</v-layout>

1541

</v-layout>

1402

</v-flex>

1542

</v-flex>

1403

</v-layout>

1543

</v-layout>

1404

<v-layout wrap>

1544

<v-layout wrap>

1405

<v-flex xs12 sm6>

1545

<v-flex xs12 sm6>

1406

<v-layout>

1546

<v-layout>

1407

<v-flex xs4 class="pt-4 subheading">

1547

<v-flex xs4 class="pt-4 subheading">

1408

<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>

1548

<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>

1409

<label

1549

<label

1410

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1550

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1411

>Mobile:</label>

1551

>Mobile:</label>

1412

</v-flex>

1552

</v-flex>

1413

<v-flex xs8 class="ml-3">

1553

<v-flex xs8 class="ml-3">

1414

<v-text-field

1554

<v-text-field

1415

v-model="addStudents.mobile"

1555

v-model="addStudents.mobile"

1416

placeholder="fill your MobileNo"

1556

placeholder="fill your MobileNo"

1417

name="mobileNo"

1557

name="mobileNo"

1418

type="number"

1558

type="number"

1419

required

1559

required

1420

></v-text-field>

1560

></v-text-field>

1421

</v-flex>

1561

</v-flex>

1422

</v-layout>

1562

</v-layout>

1423

</v-flex>

1563

</v-flex>

1424

<v-flex xs12 sm6>

1564

<v-flex xs12 sm6>

1425

<v-layout>

1565

<v-layout>

1426

<v-flex xs4 class="pt-4 subheading">

1566

<v-flex xs4 class="pt-4 subheading">

1427

<label

1567

<label

1428

class="right hidden-xs-only hidden-sm-only"

1568

class="right hidden-xs-only hidden-sm-only"

1429

>Select Country:</label>

1569

>Select Country:</label>

1430

<label

1570

<label

1431

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1571

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1432

>Country:</label>

1572

>Country:</label>

1433

</v-flex>

1573

</v-flex>

1434

<v-flex xs8 class="ml-3">

1574

<v-flex xs8 class="ml-3">

1435

<v-autocomplete

1575

<v-autocomplete

1436

v-model="addStudents.country"

1576

v-model="addStudents.country"

1437

:rules="country"

1577

:rules="country"

1438

:items="countries"

1578

:items="countries"

1439

placeholder="Select Country Name"

1579

placeholder="Select Country Name"

1440

required

1580

required

1441

></v-autocomplete>

1581

></v-autocomplete>

1442

</v-flex>

1582

</v-flex>

1443

</v-layout>

1583

</v-layout>

1444

</v-flex>

1584

</v-flex>

1445

</v-layout>

1585

</v-layout>

1446

<v-layout wrap>

1586

<v-layout wrap>

1447

<v-flex xs12 sm6>

1587

<v-flex xs12 sm6>

1448

<v-layout>

1588

<v-layout>

1449

<v-flex xs4 class="pt-4 subheading">

1589

<v-flex xs4 class="pt-4 subheading">

1450

<label class="right">Gender:</label>

1590

<label class="right">Gender:</label>

1451

</v-flex>

1591

</v-flex>

1452

<v-flex xs8 class="ml-3">

1592

<v-flex xs8 class="ml-3">

1453

<v-select

1593

<v-select

1454

:items="gender"

1594

:items="gender"

1455

v-model="addStudents.gender"

1595

v-model="addStudents.gender"

1456

:rules="genderRules"

1596

:rules="genderRules"

1457

label="Select Gender"

1597

label="Select Gender"

1458

required

1598

required

1459

></v-select>

1599

></v-select>

1460

</v-flex>

1600

</v-flex>

1461

</v-layout>

1601

</v-layout>

1462

</v-flex>

1602

</v-flex>

1463

<v-flex xs12 sm6>

1603

<v-flex xs12 sm6>

1464

<v-layout>

1604

<v-layout>

1465

<v-flex xs4 class="pt-4 subheading">

1605

<v-flex xs4 class="pt-4 subheading">

1466

<label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>

1606

<label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>

1467

<label

1607

<label

1468

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1608

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1469

>Blood:</label>

1609

>Blood:</label>

1470

</v-flex>

1610

</v-flex>

1471

<v-flex xs8 class="ml-3">

1611

<v-flex xs8 class="ml-3">

1472

<v-text-field

1612

<v-text-field

1473

v-model="addStudents.bloodGroup"

1613

v-model="addStudents.bloodGroup"

1474

placeholder="Fill your Blood Group"

1614

placeholder="Fill your Blood Group"

1475

required

1615

required

1476

></v-text-field>

1616

></v-text-field>

1477

</v-flex>

1617

</v-flex>

1478

</v-layout>

1618

</v-layout>

1479

</v-flex>

1619

</v-flex>

1480

</v-layout>

1620

</v-layout>

1481

<v-layout wrap>

1621

<v-layout wrap>

1482

<!-- <v-flex xs12 sm6>

1622

<!-- <v-flex xs12 sm6>

1483

<v-layout>

1623

<v-layout>

1484

<v-flex xs4 class="pt-4 subheading">

1624

<v-flex xs4 class="pt-4 subheading">

1485

<label class="right">Allergies:</label>

1625

<label class="right">Allergies:</label>

1486

</v-flex>

1626

</v-flex>

1487

<v-flex xs8 class="ml-3">

1627

<v-flex xs8 class="ml-3">

1488

<v-text-field

1628

<v-text-field

1489

v-model="addStudents.allergies"

1629

v-model="addStudents.allergies"

1490

placeholder="Fill your Allergies"

1630

placeholder="Fill your Allergies"

1491

required

1631

required

1492

></v-text-field>

1632

></v-text-field>

1493

</v-flex>

1633

</v-flex>

1494

</v-layout>

1634

</v-layout>

1495

</v-flex>-->

1635

</v-flex>-->

1496

<v-flex xs12 sm6>

1636

<v-flex xs12 sm6>

1497

<v-layout>

1637

<v-layout>

1498

<v-flex xs4 class="pt-4 subheading">

1638

<v-flex xs4 class="pt-4 subheading">

1499

<label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>

1639

<label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>

1500

<label

1640

<label

1501

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1641

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1502

>Roll No:</label>

1642

>Roll No:</label>

1503

</v-flex>

1643

</v-flex>

1504

<v-flex xs8 class="ml-3">

1644

<v-flex xs8 class="ml-3">

1505

<v-text-field

1645

<v-text-field

1506

v-model="addStudents.rollNo"

1646

v-model="addStudents.rollNo"

1507

placeholder="Fill your Roll Number"

1647

placeholder="Fill your Roll Number"

1508

required

1648

required

1509

></v-text-field>

1649

></v-text-field>

1510

</v-flex>

1650

</v-flex>

1511

</v-layout>

1651

</v-layout>

1512

</v-flex>

1652

</v-flex>

1513

<v-flex xs12 sm6>

1653

<v-flex xs12 sm6>

1514

<v-layout>

1654

<v-layout>

1515

<v-flex xs4 class="pt-4 subheading">

1655

<v-flex xs4 class="pt-4 subheading">

1516

<label

1656

<label

1517

class="right hidden-xs-only hidden-sm-only"

1657

class="right hidden-xs-only hidden-sm-only"

1518

>Medical Notes:</label>

1658

>Medical Notes:</label>

1519

<label

1659

<label

1520

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1660

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1521

>Medical:</label>

1661

>Medical:</label>

1522

</v-flex>

1662

</v-flex>

1523

<v-flex xs8 class="ml-3">

1663

<v-flex xs8 class="ml-3">

1524

<v-text-field

1664

<v-text-field

1525

v-model="addStudents.medicalNotes"

1665

v-model="addStudents.medicalNotes"

1526

placeholder="Fill your Medical Notes"

1666

placeholder="Fill your Medical Notes"

1527

required

1667

required

1528

></v-text-field>

1668

></v-text-field>

1529

</v-flex>

1669

</v-flex>

1530

</v-layout>

1670

</v-layout>

1531

</v-flex>

1671

</v-flex>

1532

</v-layout>

1672

</v-layout>

1533

<v-layout wrap>

1673

<v-layout wrap>

1534

<v-flex xs12 sm6>

1674

<v-flex xs12 sm6>

1535

<v-layout>

1675

<v-layout>

1536

<v-flex xs4 class="pt-4 subheading">

1676

<v-flex xs4 class="pt-4 subheading">

1537

<label class="right">Height:</label>

1677

<label class="right">Height:</label>

1538

</v-flex>

1678

</v-flex>

1539

<v-flex xs8 class="ml-3">

1679

<v-flex xs8 class="ml-3">

1540

<v-text-field

1680

<v-text-field

1541

v-model="addStudents.height"

1681

v-model="addStudents.height"

1542

placeholder="Fill your Height"

1682

placeholder="Fill your Height"

1543

required

1683

required

1544

></v-text-field>

1684

></v-text-field>

1545

</v-flex>

1685

</v-flex>

1546

</v-layout>

1686

</v-layout>

1547

</v-flex>

1687

</v-flex>

1548

<v-flex xs12 sm6>

1688

<v-flex xs12 sm6>

1549

<v-layout>

1689

<v-layout>

1550

<v-flex xs4 class="pt-4 subheading">

1690

<v-flex xs4 class="pt-4 subheading">

1551

<label class="right">Weight:</label>

1691

<label class="right">Weight:</label>

1552

</v-flex>

1692

</v-flex>

1553

<v-flex xs8 class="ml-3">

1693

<v-flex xs8 class="ml-3">

1554

<v-text-field

1694

<v-text-field

1555

v-model="addStudents.weight"

1695

v-model="addStudents.weight"

1556

placeholder="Fill your Weight"

1696

placeholder="Fill your Weight"

1557

required

1697

required

1558

></v-text-field>

1698

></v-text-field>

1559

</v-flex>

1699

</v-flex>

1560

</v-layout>

1700

</v-layout>

1561

</v-flex>

1701

</v-flex>

1562

</v-layout>

1702

</v-layout>

1563

<v-layout wrap>

1703

<v-layout wrap>

1564

<v-flex xs12 sm6>

1704

<v-flex xs12 sm6>

1565

<v-layout>

1705

<v-layout>

1566

<v-flex xs4 class="pt-4 subheading">

1706

<v-flex xs4 class="pt-4 subheading">

1567

<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>

1707

<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>

1568

<label

1708

<label

1569

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1709

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1570

>Uplaod :</label>

1710

>Uplaod :</label>

1571

</v-flex>

1711

</v-flex>

1572

<v-flex xs8 class="ml-3">

1712

<v-flex xs8 class="ml-3">

1573

<v-text-field

1713

<v-text-field

1574

label="Select Image"

1714

label="Select Image"

1575

@click="pickFile"

1715

@click="pickFile"

1576

v-model="imageName"

1716

v-model="imageName"

1577

append-icon="attach_file"

1717

append-icon="attach_file"

1578

></v-text-field>

1718

></v-text-field>

1579

</v-flex>

1719

</v-flex>

1580

</v-layout>

1720

</v-layout>

1581

</v-flex>

1721

</v-flex>

1582

<v-flex xs12 sm6>

1722

<v-flex xs12 sm6>

1583

<v-layout>

1723

<v-layout>

1584

<v-flex xs4 class="pt-4 subheading">

1724

<v-flex xs4 class="pt-4 subheading">

1585

<label

1725

<label

1586

class="right hidden-xs-only hidden-sm-only"

1726

class="right hidden-xs-only hidden-sm-only"

1587

>Academic Year:</label>

1727

>Academic Year:</label>

1588

<label

1728

<label

1589

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1729

class="right hidden-lg-only hidden-md-only hidden-xl-only"

1590

>Year:</label>

1730

>Year:</label>

1591

</v-flex>

1731

</v-flex>

1592

<v-flex xs8 class="ml-3">

1732

<v-flex xs8 class="ml-3">

1593

<v-text-field

1733

<v-text-field

1594

v-model="addStudents.establishmentYear"

1734

v-model="addStudents.establishmentYear"

1595

placeholder="fill your Academic Year"

1735

placeholder="fill your Academic Year"

1596

name="state"

1736

name="state"

1597

type="number"

1737

type="number"

1598

:rules="establishmentYearRules"

1738

:rules="establishmentYearRules"

1599

required

1739

required

1600

></v-text-field>

1740

></v-text-field>

1601

</v-flex>

1741

</v-flex>

1602

</v-layout>

1742

</v-layout>

1603

</v-flex>

1743

</v-flex>

1604

</v-layout>

1744

</v-layout>

1605

<v-layout wrap>

1745

<v-layout wrap class="hidden-xs-only hidden-sm-only">

1606

<v-flex xs12 sm6 class="hidden-xs-only hidden-sm-only">

1746

<v-flex xs12 sm6 >

1607

<v-layout>

1747

<v-layout>

1608

<v-flex xs4 sm4 class="pt-4 subheading">

1748

<v-flex xs4 sm4 class="pt-4 subheading">

1609

<label class="right pr-4">Present Address:</label>

1749

<label class="right pr-4">Present Address:</label>

1610

</v-flex>

1750

</v-flex>

1611

<v-flex xs8 sm8 class="ml-3">

1751

<v-flex xs8 sm8 class="ml-3">

1612

<v-text-field

1752

<v-text-field

1613

name="input-4-3"

1753

name="input-4-3"

1614

v-model="addStudents.presentAddress"

1754

v-model="addStudents.presentAddress"

1615

:rules="presentAddress"

1755

:rules="presentAddress"

1616

placeholder="fill Your present Address"

1756

placeholder="fill Your present Address"

1617

required

1757

required

1618

></v-text-field>

1758

></v-text-field>

1619

</v-flex>

1759

</v-flex>

1620

</v-layout>

1760

</v-layout>

1621

</v-flex>

1761

</v-flex>

1622

<v-flex xs12 sm6>

1762

<v-flex xs12 sm6>

1623

<v-layout>

1763

<v-layout>

1624

<v-flex xs4 sm4 class="pt-4 subheading addressForm">

1764

<v-flex xs4 sm4 class="pt-4 subheading addressForm">

1625

<label class="right">Permanent Address:</label>

1765

<label class="right">Permanent Address:</label>

1626

</v-flex>

1766

</v-flex>

1627

<v-flex xs12 sm8 class="ml-3">

1767

<v-flex xs12 sm8 class="ml-3">

1628

<v-text-field

1768

<v-text-field

1629

name="input-4-3"

1769

name="input-4-3"

1630

v-model="addStudents.permanentAddress"

1770

v-model="addStudents.permanentAddress"

1631

:rules="permanentAddress"

1771

:rules="permanentAddress"

1632

placeholder="fill Your Permanent Address"

1772

placeholder="fill Your Permanent Address"

1633

required

1773

required

1634

></v-text-field>

1774

></v-text-field>

1635

</v-flex>

1775

</v-flex>

1636

</v-layout>

1776

</v-layout>

1637

</v-flex>

1777

</v-flex>

1638

</v-layout>

1778

</v-layout>

1639

<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>

1779

<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>

1640

<v-flex xs12 sm12>

1780

<v-flex xs12 sm12>

1641

<v-layout>

1781

<v-layout>

1642

<v-flex xs12 sm12 class="pt-4 subheading text-xs-center">

1782

<v-flex xs12 sm12 class="pt-4 subheading text-xs-center">

1643

<label class>Present Address :</label>

1783

<label class>Present Address :</label>

1644

</v-flex>

1784

</v-flex>

1645

</v-layout>

1785

</v-layout>

1646

<v-layout>

1786

<v-layout>

1647

<v-flex xs12 sm12>

1787

<v-flex xs12 sm12>

1648

<v-textarea

1788

<v-textarea

1649

name="input-4-3"

1789

name="input-4-3"

1650

v-model="addStudents.presentAddress"

1790

v-model="addStudents.presentAddress"

1651

:rules="presentAddress"

1791

:rules="presentAddress"

1652

placeholder="fill Your present Address"

1792

placeholder="fill Your present Address"

1653

required

1793

required

1654

></v-textarea>

1794

></v-textarea>

1655

</v-flex>

1795

</v-flex>

1656

</v-layout>

1796

</v-layout>

1657

</v-flex>

1797

</v-flex>

1658

<v-flex xs12 sm12>

1798

<v-flex xs12 sm12>

1659

<v-layout>

1799

<v-layout>

1660

<v-flex

1800

<v-flex

1661

xs12

1801

xs12

1662

sm12

1802

sm12

1663

class="pt-4 pr-4 subheading text-xs-center addressForm"

1803

class="pt-4 pr-4 subheading text-xs-center addressForm"

1664

>

1804

>

1665

<label>Permanent addr:</label>

1805

<label>Permanent addr:</label>

1666

</v-flex>

1806

</v-flex>

1667

</v-layout>

1807

</v-layout>

1668

<v-layout>

1808

<v-layout>

1669

<v-flex xs12 sm12>

1809

<v-flex xs12 sm12>

1670

<v-textarea

1810

<v-textarea

1671

name="input-4-3"

1811

name="input-4-3"

1672

v-model="addStudents.permanentAddress"

1812

v-model="addStudents.permanentAddress"

1673

:rules="permanentAddress"

1813

:rules="permanentAddress"

1674

placeholder="fill Your Permanent Address"

1814

placeholder="fill Your Permanent Address"

1675

required

1815

required

1676

></v-textarea>

1816

></v-textarea>

1677

</v-flex>

1817

</v-flex>

1678

</v-layout>

1818

</v-layout>

1679

</v-flex>

1819

</v-flex>

1680

</v-layout>

1820

</v-layout>

1681

<v-layout>

1821

<v-layout>

1682

<v-flex xs12 sm11 offset-sm1>

1822

<v-flex xs12 sm11 offset-sm1>

1683

<v-layout>

1823

<v-layout>

1684

<v-flex xs6>

1824

<v-flex xs6>

1685

<v-btn round dark @click="e2 = 1">Back</v-btn>

1825

<v-btn round dark @click="e2 = 1">Back</v-btn>

1686

</v-flex>

1826

</v-flex>

1687

<v-flex xs6>

1827

<v-flex xs6>

1688

<v-btn

1828

<v-btn

1689

@click="submit"

1829

@click="submit"

1690

round

1830

round

1691

dark

1831

dark

1692

:loading="loading"

1832

:loading="loading"

1693

class="right"

1833

class="right"

1694

>Add</v-btn>

1834

>Add</v-btn>

1695

</v-flex>

1835

</v-flex>

1696

</v-layout>

1836

</v-layout>

1697

</v-flex>

1837

</v-flex>

1698

</v-layout>

1838

</v-layout>

1699

</v-form>

1839

</v-form>

1700

</v-flex>

1840

</v-flex>

1701

</v-stepper-content>

1841

</v-stepper-content>

1702

</v-stepper-items>

1842

</v-stepper-items>

1703

</v-stepper>

1843

</v-stepper>

1704

</v-app>

1844

</v-app>

1705

</div>

1845

</div>

1706

</v-flex>

1846

</v-flex>

1707

</v-layout>

1847

</v-layout>

1708

</v-container>

1848

</v-container>

1709

</v-tab-item>

1849

</v-tab-item>

1710

</v-tabs>

1850

</v-tabs>

1711

1851

1712

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

1852

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

1713

</div>

1853

</div>

1714

</div>

1854

</div>

1715

</template>

1855

</template>

1716

1856

1717

1857

1718

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

1858

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

1719

import moment from "moment";

1859

import moment from "moment";

1720

import countryList from "@/script/country.js";

1860

import countryList from "@/script/country.js";

1721

import parent from "@/script/parents.js";

1861

import parent from "@/script/parents.js";

1722

1862

1723

export default {

1863

export default {

1724

data: () => ({

1864

data: () => ({

1725

e2: 0,

1865

e2: 0,

1726

showParent: true,

1866

showParent: true,

1727

showNext: false,

1867

showNext: false,

1728

snackbar: false,

1868

snackbar: false,

1729

y: "top",

1869

y: "top",

1730

x: "right",

1870

x: "right",

1731

mode: "",

1871

mode: "",

1732

timeout: 3000,

1872

timeout: 3000,

1733

text: "",

1873

text: "",

1734

showLoader: false,

1874

showLoader: false,

1735

loading: false,

1875

loading: false,

1736

date: null,

1876

date: null,

1737

search: "",

1877

search: "",

1738

menu: false,

1878

menu: false,

1739

menu1: false,

1879

menu1: false,

1740

dialog: false,

1880

dialog: false,

1741

dialog1: false,

1881

dialog1: false,

1742

valid: true,

1882

valid: true,

1743

isActive: true,

1883

isActive: true,

1744

newActive: false,

1884

newActive: false,

1745

addclass: [],

1885

addclass: [],

1746

addSection: [],

1886

addSection: [],

1747

gender: ["Male", "Female"],

1887

gender: ["Male", "Female"],

1748

pagination: {

1888

pagination: {

1749

rowsPerPage: 15

1889

rowsPerPage: 15

1750

},

1890

},

1751

imageData: {},

1891

imageData: {},

1752

imageName: "",

1892

imageName: "",

1753

imageUrl: "",

1893

imageUrl: "",

1754

imageFile: "",

1894

imageFile: "",

1755

nameRules: [v => !!v || " Full Name is required"],

1895

nameRules: [v => !!v || " Full Name is required"],

1756

dateRules: [v => !!v || " DOB is required"],

1896

dateRules: [v => !!v || " DOB is required"],

1757

cityRules: [v => !!v || " City Name is required"],

1897

cityRules: [v => !!v || " City Name is required"],

1758

pincode: [v => !!v || " Pincode is required"],

1898

pincode: [v => !!v || " Pincode is required"],

1759

country: [v => !!v || " Country Name is required"],

1899

country: [v => !!v || " Country Name is required"],

1760

permanentAddress: [v => !!v || " Permanent Address is required"],

1900

permanentAddress: [v => !!v || " Permanent Address is required"],

1761

presentAddress: [v => !!v || " Present Address is required"],

1901

presentAddress: [v => !!v || " Present Address is required"],

1762

stateRules: [v => !!v || "State Name is required"],

1902

stateRules: [v => !!v || "State Name is required"],

1763

classRules: [v => !!v || " Class Name is required"],

1903

classRules: [v => !!v || " Class Name is required"],

1764

sectionRules: [v => !!v || " Section Name is required"],

1904

sectionRules: [v => !!v || " Section Name is required"],

1765

genderRules: [v => !!v || " Select Gender is required"],

1905

genderRules: [v => !!v || " Select Gender is required"],

1766

fatheCellNoRules: [v => !!v || " father Cell Number is required"],

1906

fatheCellNoRules: [v => !!v || " father Cell Number is required"],

1767

establishmentYearRules: [v => !!v || " Academic Year is required"],

1907

establishmentYearRules: [v => !!v || " Academic Year is required"],

1768

errorMessages: "",

1908

errorMessages: "",

1769

countries: [],

1909

countries: [],

1770

headers: [

1910

headers: [

1771

{

1911

{

1772

text: "Roll No.",

1912

text: "Roll No.",

1773

align: "center",

1913

align: "center",

1774

sortable: false,

1914

sortable: false,

1775

value: "rollNo"

1915

value: "rollNo"

1776

},

1916

},

1777

{

1917

{

1778

text: "Profile Pic",

1918

text: "Profile Pic",

1779

value: "profilePicUrl",

1919

value: "profilePicUrl",

1780

sortable: false,

1920

sortable: false,

1781

align: "center"

1921

align: "center"

1782

},

1922

},

1783

{ text: "Name", value: "name", sortable: false, align: "center" },

1923

{ text: "Name", value: "name", sortable: false, align: "center" },

1784

{ text: "Email", value: "email", sortable: false, align: "center" },

1924

{ text: "Email", value: "email", sortable: false, align: "center" },

1785

{ text: "Dob", value: "dob", sortable: false, align: "center" },

1925

{ text: "Dob", value: "dob", sortable: false, align: "center" },

1786

{ text: "Gender", value: "gender", sortable: false, align: "center" },

1926

{ text: "Gender", value: "gender", sortable: false, align: "center" },

1787

{

1927

{

1788

text: "Father Name",

1928

text: "Father Name",

1789

value: "fatherName",

1929

value: "fatherName",

1790

sortable: false,

1930

sortable: false,

1791

align: "center"

1931

align: "center"

1792

},

1932

},

1793

{

1933

{

1794

text: "Mother Name",

1934

text: "Mother Name",

1795

value: "motherName",

1935

value: "motherName",

1796

sortable: false,

1936

sortable: false,

1797

align: "center"

1937

align: "center"

1798

},

1938

},

1799

{

1939

{

1800

text: "Academic Year",

1940

text: "Academic Year",

1801

value: "establishmentYear",

1941

value: "establishmentYear",

1802

sortable: false,

1942

sortable: false,

1803

align: "center"

1943

align: "center"

1804

},

1944

},

1805

{ text: "Mobile No", value: "mobile", sortable: false, align: "center" },

1945

{ text: "Mobile No", value: "mobile", sortable: false, align: "center" },

1806

{ text: "Action", value: "", sortable: false, align: "center" }

1946

{ text: "Action", value: "", sortable: false, align: "center" }

1807

],

1947

],

1808

desserts: [],

1948

desserts: [],

1809

parentId: "",

1949

parentId: "",

1810

editedIndex: -1,

1950

editedIndex: -1,

1811

parentData: {},

1951

parentData: {},

1812

addStudents: {

1952

addStudents: {

1813

role: "STUDENT",

1953

role: "STUDENT",

1814

1954

1815

email: "",

1955

email: "",

1816

date: "",

1956

date: "",

1817

city: "",

1957

city: "",

1818

pincode: "",

1958

pincode: "",

1819

country: "",

1959

country: "",

1820

permanentAddress: "",

1960

permanentAddress: "",

1821

presentAddress: "",

1961

presentAddress: "",

1822

mobile: "",

1962

mobile: "",

1823

state: "",

1963

state: "",

1824

gender: "",

1964

gender: "",

1825

select: "",

1965

select: "",

1826

selectSection: "",

1966

selectSection: "",

1827

bloodGroup: "",

1967

bloodGroup: "",

1828

allergies: "",

1968

allergies: "",

1829

medicalNotes: "",

1969

medicalNotes: "",

1830

height: "",

1970

height: "",

1831

weight: "",

1971

weight: "",

1832

rollNo: "",

1972

rollNo: "",

1833

establishmentYear: new Date().getFullYear()

1973

establishmentYear: new Date().getFullYear()

1834

},

1974

},

1835

selectStudents: {

1975

selectStudents: {

1836

select: "",

1976

select: "",

1837

selectSection: ""

1977

selectSection: ""

1838

},

1978

},

1839

editedItem: {

1979

editedItem: {

1840

role: "STUDENT",

1980

role: "STUDENT",

1841

1981

1842

email: "",

1982

email: "",

1843

dob: "",

1983

dob: "",

1844

city: "",

1984

city: "",

1845

pincode: "",

1985

pincode: "",

1846

country: "",

1986

country: "",

1847

permanentAddress: "",

1987

permanentAddress: "",

1848

presentAddress: "",

1988

presentAddress: "",

1849

mobile: "",

1989

mobile: "",

1850

state: "",

1990

state: "",

1851

gender: "",

1991

gender: "",

1852

select: "",

1992

select: "",

1853

selectSection: "",

1993

selectSection: "",

1854

bloodGroup: "",

1994

bloodGroup: "",

1855

allergies: "",

1995

allergies: "",

1856

medicalNotes: "",

1996

medicalNotes: "",

1857

height: "",

1997

height: "",

1858

weight: "",

1998

weight: "",

1859

rollNo: "",

1999

rollNo: "",

1860

establishmentYear: new Date().getFullYear()

2000

establishmentYear: new Date().getFullYear()

1861

}

2001

}

1862

}),

2002

}),

1863

watch: {

2003

watch: {

1864

menu(val) {

2004

menu(val) {

1865

val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));

2005

val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));

1866

},

2006

},

1867

menu1(val) {

2007

menu1(val) {

1868

val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));

2008

val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));

1869

}

2009

}

1870

},

2010

},

1871

methods: {

2011

methods: {

1872

findStudents() {

2012

findStudents() {

1873

this.showLoader = true;

2013

this.showLoader = true;

1874

http()

2014

http()

1875

.get("/getStudentWithClass", {

2015

.get("/getStudentWithClass", {

1876

params: {

2016

params: {

1877

classId: this.selectStudents.select,

2017

classId: this.selectStudents.select,

1878

sectionId: this.selectStudents.selectSection

2018

sectionId: this.selectStudents.selectSection

1879

}

2019

}

1880

})

2020

})

1881

.then(response => {

2021

.then(response => {

1882

this.desserts = response.data.data;

2022

this.desserts = response.data.data;

1883

this.showLoader = false;

2023

this.showLoader = false;

1884

console.log("getSectionsList=====>", this.addSection);

2024

console.log("getSectionsList=====>", this.addSection);

1885

})

2025

})

1886

.catch(err => {

2026

.catch(err => {

1887

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

2027

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

1888

this.showLoader = false;

2028

this.showLoader = false;

1889

});

2029

});

1890

},

2030

},

1891

getSections(_id) {

2031

getSections(_id) {

1892

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

2032

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

1893

this.showLoader = true;

2033

this.showLoader = true;

1894

http()

2034

http()

1895

.get(

2035

.get(

1896

"/getSectionsList",

2036

"/getSectionsList",

1897

{ params: { classId: _id } },

2037

{ params: { classId: _id } },

1898

{

2038

{

1899

headers: { Authorization: "Bearer " + token }

2039

headers: { Authorization: "Bearer " + token }

1900

}

2040

}

1901

)

2041

)

1902

.then(response => {

2042

.then(response => {

1903

this.addSection = response.data.data;

2043

this.addSection = response.data.data;

1904

this.showLoader = false;

2044

this.showLoader = false;

1905

// console.log("getSectionsList=====>", this.addSection);

2045

// console.log("getSectionsList=====>", this.addSection);

1906

})

2046

})

1907

.catch(err => {

2047

.catch(err => {

1908

this.showLoader = false;

2048

this.showLoader = false;

1909

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

2049

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

1910

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

2050

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

1911

});

2051

});

1912

},

2052

},

1913

getSection(_id) {

2053

getSection(_id) {

1914

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

2054

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

1915

this.showLoader = true;

2055

this.showLoader = true;

1916

http()

2056

http()

1917

.get(

2057

.get(

1918

"/getSectionsList",

2058

"/getSectionsList",

1919

{ params: { classId: _id } },

2059

{ params: { classId: _id } },

1920

{

2060

{

1921

headers: { Authorization: "Bearer " + token }

2061

headers: { Authorization: "Bearer " + token }

1922

}

2062

}

1923

)

2063

)

1924

.then(response => {

2064

.then(response => {

1925

this.addSection = response.data.data;

2065

this.addSection = response.data.data;

1926

this.showLoader = false;

2066

this.showLoader = false;

1927

// console.log("getSectionsList=====>", this.addSection);

2067

// console.log("getSectionsList=====>", this.addSection);

1928

})

2068

})

1929

.catch(err => {

2069

.catch(err => {

1930

this.showLoader = false;

2070

this.showLoader = false;

1931

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

2071

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

1932

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

2072

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

1933

});

2073

});

1934

},

2074

},

1935

pickFile() {

2075

pickFile() {

1936

this.$refs.image.click();

2076

this.$refs.image.click();

1937

},

2077

},

1938

dates: function(date) {

2078

dates: function(date) {

1939

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

2079

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

1940

},

2080

},

1941

onFilePicked(e) {

2081

onFilePicked(e) {

1942

// console.log(e)

2082

// console.log(e)

1943

const files = e.target.files;

2083

const files = e.target.files;

1944

this.imageData.upload = e.target.files[0];

2084

this.imageData.upload = e.target.files[0];

1945

if (files[0] !== undefined) {

2085

if (files[0] !== undefined) {

1946

this.imageName = files[0].name;

2086

this.imageName = files[0].name;

1947

if (this.imageName.lastIndexOf(".") <= 0) {

2087

if (this.imageName.lastIndexOf(".") <= 0) {

1948

return;

2088

return;

1949

}

2089

}

1950

const fr = new FileReader();

2090

const fr = new FileReader();

1951

fr.readAsDataURL(files[0]);

2091

fr.readAsDataURL(files[0]);

1952

fr.addEventListener("load", () => {

2092

fr.addEventListener("load", () => {

1953

this.imageUrl = fr.result;

2093

this.imageUrl = fr.result;

1954

this.imageFile = files[0]; // this is an image file that can be sent to server...

2094

this.imageFile = files[0]; // this is an image file that can be sent to server...

1955

this.imageData.imageUrl = URL.createObjectURL(this.imageFile);

2095

this.imageData.imageUrl = URL.createObjectURL(this.imageFile);

1956

});

2096

});

1957

} else {

2097

} else {

1958

this.imageName = "";

2098

this.imageName = "";

1959

this.imageFile = "";

2099

this.imageFile = "";

1960

this.imageUrl = "";

2100

this.imageUrl = "";

1961

}

2101

}

1962

},

2102

},

1963

// getStudentList() {

2103

// getStudentList() {

1964

// this.showLoader = true;

2104

// this.showLoader = true;

1965

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

2105

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

1966

// http()

2106

// http()

1967

// .get("/getStudentsList", {

2107

// .get("/getStudentsList", {

1968

// headers: { Authorization: "Bearer " + token }

2108

// headers: { Authorization: "Bearer " + token }

1969

// })

2109

// })

1970

// .then(response => {

2110

// .then(response => {

1971

// this.desserts = response.data.data;

2111

// this.desserts = response.data.data;

1972

// this.showLoader = false;

2112

// this.showLoader = false;

1973

// // console.log("getStudentList=====>",this.desserts)

2113

// // console.log("getStudentList=====>",this.desserts)

1974

// })

2114

// })

1975

// .catch(err => {

2115

// .catch(err => {

1976

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

2116

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

1977

// this.showLoader = false;

2117

// this.showLoader = false;

1978

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

2118

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

1979

// });

2119

// });

1980

// },

2120

// },

1981

editItem(item) {

2121

editItem(item) {

1982

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

2122

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

1983

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

2123

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

1984

this.editedItem.fatherName = item.parentId.fatherName;

2124

this.editedItem.fatherName = item.parentId.fatherName;

1985

this.editedItem.fatherCellNo = item.parentId.fatherCellNo;

2125

this.editedItem.fatherCellNo = item.parentId.fatherCellNo;

1986

this.editedItem.motherName = item.parentId.motherName;

2126

this.editedItem.motherName = item.parentId.motherName;

1987

this.editedItem.motherCellNo = item.parentId.motherCellNo;

2127

this.editedItem.motherCellNo = item.parentId.motherCellNo;

1988

this.editedItem.dob =

2128

this.editedItem.dob =

1989

this.editedItem.dob != undefined

2129

this.editedItem.dob != undefined

1990

? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))

2130

? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))

1991

: (this.editedItem.dob = "");

2131

: (this.editedItem.dob = "");

1992

this.dialog = true;

2132

this.dialog = true;

1993

},

2133

},

1994

profile(item) {

2134

profile(item) {

1995

console.log("item", item);

2135

console.log("item", item);

1996

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

2136

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

1997

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

2137

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

1998

this.editedItem.fatherName = item.parentId.fatherName;

2138

this.editedItem.fatherName = item.parentId.fatherName;

1999

this.editedItem.fatherCellNo = item.parentId.fatherCellNo;

2139

this.editedItem.fatherCellNo = item.parentId.fatherCellNo;

2000

this.editedItem.motherName = item.parentId.motherName;

2140

this.editedItem.motherName = item.parentId.motherName;

2001

this.editedItem.motherCellNo = item.parentId.motherCellNo;

2141

this.editedItem.motherCellNo = item.parentId.motherCellNo;

2002

2142

2003

this.dialog1 = true;

2143

this.dialog1 = true;

2004

},

2144

},

2005

deleteItem(item) {

2145

deleteItem(item) {

2006

let deleteStudent = {

2146

let deleteStudent = {

2007

studentId: item._id

2147

studentId: item._id

2008

};

2148

};

2009

http()

2149

http()

2010

.delete(

2150

.delete(

2011

"/deleteStudent",

2151

"/deleteStudent",

2012

confirm("Are you sure you want to delete this?") && {

2152

confirm("Are you sure you want to delete this?") && {

2013

params: deleteStudent

2153

params: deleteStudent

2014

}

2154

}

2015

)

2155

)

2016

.then(response => {

2156

.then(response => {

2017

// console.log("deleteUers",deleteStudent)

2157

// console.log("deleteUers",deleteStudent)

2018

if ((this.snackbar = true)) {

2158

if ((this.snackbar = true)) {

2019

this.text = "Successfully delete Existing Student";

2159

this.text = "Successfully delete Existing Student";

2020

}

2160

}

2021

this.getStudentList();

2161

this.getStudentList();

2022

})

2162

})

2023

.catch(error => {

2163

.catch(error => {

2024

// console.log(error);

2164

// console.log(error);

2025

});

2165

});

2026

},

2166

},

2027

activeTab(type) {

2167

activeTab(type) {

2028

switch (type) {

2168

switch (type) {

2029

case "existing":

2169

case "existing":

2030

this.newActive = false;

2170

this.newActive = false;

2031

this.isActive = true;

2171

this.isActive = true;

2032

break;

2172

break;

2033

2173

2034

default:

2174

default:

2035

this.newActive = true;

2175

this.newActive = true;

2036

this.isActive = false;

2176

this.isActive = false;

2037

break;

2177

break;

2038

}

2178

}

2039

},

2179

},

2040

close() {

2180

close() {

2041

this.dialog = false;

2181

this.dialog = false;

2042

setTimeout(() => {

2182

setTimeout(() => {

2043

this.editedItem = Object.assign({}, this.defaultItem);

2183

this.editedItem = Object.assign({}, this.defaultItem);

2044

this.editedIndex = -1;

2184

this.editedIndex = -1;

2045

}, 300);

2185

}, 300);

2046

},

2186

},

2047

close1() {

2187

close1() {

2048

this.dialog1 = false;

2188

this.dialog1 = false;

2049

},

2189

},

2050

submit() {

2190

submit() {

2051

if (this.$refs.form.validate()) {

2191

if (this.$refs.form.validate()) {

2052

let addStudent = {

2192

let addStudent = {

2053

parentId: this.parentId,

2193

parentId: this.parentId,

2054

2194

2055

email: this.addStudents.email,

2195

email: this.addStudents.email,

2056

role: this.addStudents.role,

2196

role: this.addStudents.role,

2057

dob: this.addStudents.date,

2197

dob: this.addStudents.date,

2058

city: this.addStudents.city,

2198

city: this.addStudents.city,

2059

pincode: this.addStudents.pincode,

2199

pincode: this.addStudents.pincode,

2060

country: this.addStudents.country,

2200

country: this.addStudents.country,

2061

permanentAddress: this.addStudents.permanentAddress,

2201

permanentAddress: this.addStudents.permanentAddress,

2062

presentAddress: this.addStudents.presentAddress,

2202

presentAddress: this.addStudents.presentAddress,

2063

mobile: this.addStudents.mobile,

2203

mobile: this.addStudents.mobile,

2064

state: this.addStudents.state,

2204

state: this.addStudents.state,

2065

gender: this.addStudents.gender,

2205

gender: this.addStudents.gender,

2066

establishmentYear: this.addStudents.establishmentYear,

2206

establishmentYear: this.addStudents.establishmentYear,

2067

classId: this.addStudents.select,

2207

classId: this.addStudents.select,

2068

sectionId: this.addStudents.selectSection,

2208

sectionId: this.addStudents.selectSection,

2069

bloodGroup: this.addStudents.bloodGroup,

2209

bloodGroup: this.addStudents.bloodGroup,

2070

allergies: this.addStudents.allergies,

2210

allergies: this.addStudents.allergies,

2071

medicalNotes: this.addStudents.medicalNotes,

2211

medicalNotes: this.addStudents.medicalNotes,

2072

height: this.addStudents.height,

2212

height: this.addStudents.height,

2073

weight: this.addStudents.weight,

2213

weight: this.addStudents.weight,

2074

rollNo: this.addStudents.rollNo

2214

rollNo: this.addStudents.rollNo

2075

};

2215

};

2076

if (this.imageUrl) {

2216

if (this.imageUrl) {

2077

var str = this.imageUrl;

2217

var str = this.imageUrl;

2078

const [baseUrl, imageUrl] = str.split(/,/);

2218

const [baseUrl, imageUrl] = str.split(/,/);

2079

addStudent.upload = imageUrl;

2219

addStudent.upload = imageUrl;

2080

}

2220

}

2081

this.loading = true;

2221

this.loading = true;

2082

http()

2222

http()

2083

.post("/createStudent", addStudent)

2223

.post("/createStudent", addStudent)

2084

.then(response => {

2224

.then(response => {

2085

console.log(addStudent);

2225

console.log(addStudent);

2086

if ((this.snackbar = true)) {

2226

if ((this.snackbar = true)) {

2087

this.text = "New Student added successfully";

2227

this.text = "New Student added successfully";

2088

}

2228

}

2089

// this.getStudentList();

2229

// this.getStudentList();

2090

this.clear();

2230

this.clear();

2091

this.loading = false;

2231

this.loading = false;

2092

})

2232

})

2093

.catch(error => {

2233

.catch(error => {

2094

// console.log(error);

2234

// console.log(error);

2095

if ((this.snackbar = true)) {

2235

if ((this.snackbar = true)) {

2096

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

2236

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

2097

}

2237

}

2098

this.loading = false;

2238

this.loading = false;

2099

});

2239

});

2100

}

2240

}

2101

},

2241

},

2102

clear() {

2242

clear() {

2103

this.$refs.form.reset();

2243

this.$refs.form.reset();

2104

this.imageUrl = "";

2244

this.imageUrl = "";

2105

},

2245

},

2106

save() {

2246

save() {

2107

let editStudent = {

2247

let editStudent = {

2108

studentId: this.editedItem._id,

2248

studentId: this.editedItem._id,

2109

2249

2110

email: this.editedItem.email,

2250

email: this.editedItem.email,

2111

role: this.editedItem.role,

2251

role: this.editedItem.role,

2112

dob: this.editedItem.dob,

2252

dob: this.editedItem.dob,

2113

city: this.editedItem.city,

2253

city: this.editedItem.city,

2114

pincode: this.editedItem.pincode,

2254

pincode: this.editedItem.pincode,

2115

country: this.editedItem.country,

2255

country: this.editedItem.country,

2116

permanentAddress: this.editedItem.permanentAddress,

2256

permanentAddress: this.editedItem.permanentAddress,

2117

presentAddress: this.editedItem.presentAddress,

2257

presentAddress: this.editedItem.presentAddress,

2118

mobile: this.editedItem.mobile,

2258

mobile: this.editedItem.mobile,

2119

state: this.editedItem.state,

2259

state: this.editedItem.state,

2120

gender: this.editedItem.gender,

2260

gender: this.editedItem.gender,

2121

establishmentYear: this.editedItem.establishmentYear,

2261

establishmentYear: this.editedItem.establishmentYear,

2122

classId: this.editedItem.select,

2262

classId: this.editedItem.select,

2123

sectionId: this.editedItem.selectSection,

2263

sectionId: this.editedItem.selectSection,

2124

bloodGroup: this.editedItem.bloodGroup,

2264

bloodGroup: this.editedItem.bloodGroup,

2125

allergies: this.editedItem.allergies,

2265

allergies: this.editedItem.allergies,

2126

medicalNotes: this.editedItem.medicalNotes,

2266

medicalNotes: this.editedItem.medicalNotes,

2127

height: this.editedItem.height,

2267

height: this.editedItem.height,

2128

weight: this.editedItem.weight,

2268

weight: this.editedItem.weight,

2129

rollNo: this.editedItem.rollNo

2269

rollNo: this.editedItem.rollNo

2130

};

2270

};

2131

if (this.imageUrl) {

2271

if (this.imageUrl) {

2132

var str = this.imageUrl;

2272

var str = this.imageUrl;

2133

const [baseUrl, imageUrl] = str.split(/,/);

2273

const [baseUrl, imageUrl] = str.split(/,/);

2134

editStudent.upload = imageUrl;

2274

editStudent.upload = imageUrl;

2135

}

2275

}

2136

http()

2276

http()

2137

.put("/updateStudent", editStudent)

2277

.put("/updateStudent", editStudent)

2138

.then(response => {

2278

.then(response => {

2139

this.snackbar = true;

2279

this.snackbar = true;

2140

this.text = "Successfully Student Existing User";

2280

this.text = "Successfully Student Existing User";

2141

this.imageUrl = "";

2281

this.imageUrl = "";

2142

this.findStudents();

2282

this.findStudents();

2143

this.close();

2283

this.close();

2144

})

2284

})

2145

.catch(error => {

2285

.catch(error => {

2146

// console.log(error);

2286

// console.log(error);

2147

if ((this.snackbar = true)) {

2287

if ((this.snackbar = true)) {

2148

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

2288

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

2149

}

2289

}

2150

});

2290

});

2151

},

2291

},

2152

submitParentDetails() {

2292

submitParentDetails() {

2153

if (this.$refs.parentForm.validate()) {

2293

if (this.$refs.parentForm.validate()) {

2154

let addparentDetails = {

2294

let addparentDetails = {

2155

email: this.parentData.email,

2295

email: this.parentData.email,

2156

fatherName: this.parentData.fatherName,

2296

fatherName: this.parentData.fatherName,

2157

fatherCellNo: this.parentData.fatherCellNo,

2297

fatherCellNo: this.parentData.fatherCellNo,

2158

motherName: this.parentData.motherName,

2298

motherName: this.parentData.motherName,

2159

motherCellNo: this.parentData.motherCellNo,

2299

motherCellNo: this.parentData.motherCellNo,

2160

role: "PARENT"

2300

role: "PARENT"

2161

};

2301

};

2162

this.loading = true;

2302

this.loading = true;

2163

http()

2303

http()

2164

.post("/createParent", addparentDetails)

2304

.post("/createParent", addparentDetails)

2165

.then(response => {

2305

.then(response => {

2166

this.parentId = response.data.data.id;

2306

this.parentId = response.data.data.id;

2167

this.e2 = 2;

2307

this.e2 = 2;

2168

if ((this.snackbar = true)) {

2308

if ((this.snackbar = true)) {

2169

this.text = "successfully";

2309

this.text = "successfully";

2170

}

2310

}

2171

// this.getStudentList();

2311

// this.getStudentList();

2172

this.clear();

2312

this.clear();

2173

this.loading = false;

2313

this.loading = false;

2174

})

2314

})

2175

.catch(error => {

2315

.catch(error => {

2176

console.log(error.response.data);

2316

console.log(error.response.data);

2177

if ((this.snackbar = true)) {

2317

if ((this.snackbar = true)) {

2178

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

2318

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

2179

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

2319

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

2180

}

2320

}

2181

this.loading = false;

2321

this.loading = false;

2182

});

2322

});

2183

}

2323

}

2184

},

2324

},

2185

getParentDetails() {

2325

getParentDetails() {

2186

if (this.parentData.fatherCellNo.length > 9) {

2326

if (this.parentData.fatherCellNo.length > 9) {

2187

http()

2327

http()

2188

.get("getParticularParent", {

2328

.get("getParticularParent", {

2189

params: { fatherCellNo: this.parentData.fatherCellNo },

2329

params: { fatherCellNo: this.parentData.fatherCellNo },

2190

headers: {

2330

headers: {

2191

Authorization: "Bearer " + this.$store.state.token

2331

Authorization: "Bearer " + this.$store.state.token

2192

}

2332

}

2193

})

2333

})

2194

.then(response => {

2334

.then(response => {

2195

this.showNext = true;

2335

this.showNext = true;

2196

this.showParent = false;

2336

this.showParent = false;

2197

this.parentData = response.data.data;

2337

this.parentData = response.data.data;

2198

this.parentId = response.data.data._id;

2338

this.parentId = response.data.data._id;

2199

})

2339

})

2200

.catch(error => {

2340

.catch(error => {

2201

console.log("err====>", error.response.data.message);

2341

console.log("err====>", error.response.data.message);

2202

});

2342

});

2203

}

2343

}

2204

}

2344

}

2205

},

2345

},

2206

mounted() {

2346

mounted() {

2207

const getCountryList = countryList();

2347

const getCountryList = countryList();

2208

this.countries = getCountryList;

2348

this.countries = getCountryList;

2209

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

2349

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

2210

http()

2350

http()

2211

.get("/getClassesList", {

2351

.get("/getClassesList", {

2212

headers: { Authorization: "Bearer " + token }

2352

headers: { Authorization: "Bearer " + token }

2213

})

2353

})

2214

.then(response => {

2354

.then(response => {

2215

this.addclass = response.data.data;

2355

this.addclass = response.data.data;

2216

})

2356

})

2217

.catch(error => {

2357

.catch(error => {

2218

this.showLoader = false;

2358

this.showLoader = false;

2219

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

2359

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

2220

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

2360

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

2221

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

2361

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

2222

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

2362

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

2223

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

2363

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

2224

}

2364

}

2225

});

2365

});

2226

},

2366

},

2227

created() {

2367

created() {

2228

this.$root.$on("app:search", search => {

2368

this.$root.$on("app:search", search => {

2229

this.search = search;

2369

this.search = search;

2230

});

2370

});

2231

},

2371

},

2232

beforeDestroy() {

2372

beforeDestroy() {

2233

// dont forget to remove the listener

2373

// dont forget to remove the listener

2234

this.$root.$off("app:search");

2374

this.$root.$off("app:search");

2235

}

2375

}

2236

};

2376

};

2237

</script>

2377

</script>

2238

2378

2239

.active {

2379

.active {

2240

background-color: gray;

2380

background-color: gray;

2241

color: white !important;

2381

color: white !important;

2242

}

2382

}

2243

.activebtn {

2383

.activebtn {

2244

color: black !important;

2384

color: black !important;

GITLAB

viithiisys / School-Management-dashboard

responsive design of parents

 <template>
   <div>
     <v-tabs grow slider-color="gray">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing Students</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add New Students</v-tab>
       <!-- ****** EDITS  STUDENTS DETAILS ****** -->
       <v-tab-item>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <v-dialog v-model="dialog" max-width="170 0px" scrollable>
           <v-card flat>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3>Edit Student Profile</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card-text style="height: 680px;">
               <v-form ref="form">
                 <v-container fluid>
                   <v-layout>
                     <v-flex
                       xs12
                       class="text-xs-center text-sm-center text-md-center text-lg-center"
                     >
                       <v-avatar size="160px">
                         <img
                           src="/static/icon/user.png"
                           v-if="!editedItem.profilePicUrl && !imageUrl"
                         />
                         <img
                           :src="editedItem.profilePicUrl"
                           v-else-if="editedItem.profilePicUrl && !imageUrl"
                         />
                         <img
                           v-if="imageUrl"
                           :src="imageUrl"
                           height="150"
                           style="border-radius:50%; width:200px"
                         />
                       </v-avatar>
                       <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
                             :items="addclass"
                             label="Select Class"
                             v-model="editedItem.select"
                             item-text="classNum"
                             item-value="_id"
                             name="Select Class"
                             @change="getSections(editedItem.select)"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
                             :items="addSection"
                             label="Select Section"
                             v-model="editedItem.selectSection"
                             item-text="name"
                             item-value="_id"
                             name="Select Section"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.name"
                             placeholder="fill your full Name"
                             name="name"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Email ID:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             placeholder="fill your email"
                             v-model="editedItem.email"
                             type="text"
                             name="email"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                           <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-menu
                             ref="menu"
                             :close-on-content-click="false"
                             v-model="menu1"
                             :nudge-right="40"
                             lazy
                             transition="scale-transition"
                             offset-y
                             full-width
                             min-width="290px"
                           >
                             <v-text-field
                               slot="activator"
                               v-model="editedItem.dob"
                               placeholder="Select Dob"
                             ></v-text-field>
                             <v-date-picker
                               ref="picker"
                               v-model="editedItem.dob"
                               :max="new Date().toISOString().substr(0, 10)"
                               min="1950-01-01"
                               @input="menu1 = false"
                             ></v-date-picker>
                           </v-menu>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">City:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.city"
                             placeholder="fill your City Name"
                             name="City"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.bloodGroup"
                             placeholder="fill your BloodGroup"
                             name="state"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Allergies:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.allergies"
                             placeholder="fill your Allergies"
                             name="pincode"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Medical Notes:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.medicalNotes"
                             placeholder="fill your medicalNotes"
                             name="mobileNo"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Height:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.height"
                             placeholder="fill your Height"
                             name="state"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Weight:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.weight"
                             placeholder="fill your Weight"
                             name="pincode"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="pickFile"
                             v-model="imageName"
                             append-icon="attach_file"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">State:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.state"
                             placeholder="fill your State Name"
                             name="state"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Pincode:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.pincode"
                             placeholder="fill your pincode"
                             name="pincode"
                             type="number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.mobile"
                             placeholder="fill your MobileNo"
                             name="mobileNo"
                             type="number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-autocomplete
                             v-model="editedItem.country"
                             :items="countries"
                             placeholder="Select Country Name"
                             required
                           ></v-autocomplete>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Gender:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
                             :items="gender"
                             v-model="editedItem.gender"
                             placeholder="Select Gender"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             :items="gender"
                             v-model="editedItem.rollNo"
                             placeholder="fill roll number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout class="hidden-xs-only hidden-sm-only">
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >Permanent Address:</label>
                         </v-flex>
                         <v-flex xs12 sm8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.permanentAddress"
                             placeholder="fill Your Permanent Address"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >Present Address:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.presentAddress"
                             placeholder="Select Country Name"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
                           <label class>Present Address :</label>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm12>
                           <v-textarea
                             v-model="editedItem.presentAddress"
                             placeholder="fill Your present Address"
                             required
                           ></v-textarea>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
                           <label>Permanent addr:</label>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm12>
                           <v-textarea
                             name="input-4-3"
                             v-model="editedItem.permanentAddress"
                             placeholder="fill Your Permanent Address"
                             required
                           ></v-textarea>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs6>
                           <v-btn round dark @click.native="close">Cancel</v-btn>
                         </v-flex>
                         <v-flex xs6>
                           <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-form>
             </v-card-text>
           </v-card>
         </v-dialog>
         <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
         <v-dialog v-model="dialog1" max-width="1100px" scrollable>
           <v-card>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>Student Profile</v-toolbar-title>
               <v-spacer></v-spacer>
               <v-icon @click="close1">close</v-icon>
             </v-toolbar>
             <v-card-text style="height: 700px;">
               <v-flex align-center justify-center layout text-xs-center class="mt-3">
                 <v-avatar size="160px">
                   <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
                   <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
                 </v-avatar>
               </v-flex>
               <v-container grid-list-md>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <h5 class="right my-1">
                           <b>Full Name:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.name }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <h5 class="right my-1">
                           <b>Email:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1 left">{{ editedItem.email }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Gender:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.gender }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>D.O.B:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Blood Group:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Allergies:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.allergies }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Height:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.height }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Weight:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.weight }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>City:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.city }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>State:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.state }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Pincode:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ editedItem.pincode }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Country:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ editedItem.country }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex sm5 xs6>
                         <b>
                           <h5 class="right my-1">
                             <b>Mobile No:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.mobile }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Fahter Name:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.fatherName }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Mother Name:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.motherName }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Father Cell No:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Mother Cell No:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>Academic Year:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs6>
                         <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>Medical Notes:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs6>
                         <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Roll No. :</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.rollNo }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap class="hidden-xs-only">
                   <v-flex xs12 sm5>
                     <v-layout wrap>
                       <v-flex sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>present Address:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5>
                         <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex sm6>
                     <v-layout wrap>
                       <v-flex sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>Permanent Address:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6>
                         <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
                   <v-flex xs12 sm5>
                     <v-layout wrap>
                       <v-flex xs8 sm6>
                         <b>
                           <h5 class="my-1">
                             <b>present Address:-</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs12>
                         <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout wrap>
                       <v-flex xs9 sm6>
                         <b>
                           <h5 class="my-1">
                             <b>Permanent Address:-</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs12>
                         <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
               </v-container>
             </v-card-text>
           </v-card>
         </v-dialog>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
         <v-card flat>
           <v-card-actions class="hidden-xs-only hidden-sm-only">
             <v-layout>
               <label class="right mt-4 ml-5">Select Class:</label>
               <v-select
                 :items="addclass"
                 label="Select Class"
                 v-model="selectStudents.select"
                 item-text="classNum"
                 item-value="_id"
                 name="Select Class"
                 :rules="classRules"
                 @change="getSections(selectStudents.select)"
                 class="px-4"
                 required
               ></v-select>
               <label class="right mt-4">Select Section:</label>
               <v-select
                 :items="addSection"
                 label="Select Section"
                 v-model="selectStudents.selectSection"
                 item-text="name"
                 item-value="_id"
                 name="Select Section"
                 :rules="sectionRules"
                 class="pl-3"
                 required
               ></v-select>
             </v-layout>
             <v-spacer></v-spacer>
             <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
           </v-card-actions>
           <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
             <v-layout>
               <v-flex xs4>
                 <label class="right mt-4">Select Class:</label>
               </v-flex>
               <v-flex xs8>
                 <v-select
                   :items="addclass"
                   label="Select Class"
                   v-model="selectStudents.select"
                   item-text="classNum"
                   item-value="_id"
                   name="Select Class"
                   :rules="classRules"
                   @change="getSections(selectStudents.select)"
                   class="px-2"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4>
                 <label class="right mt-4">Select Section:</label>
               </v-flex>
               <v-flex xs8>
                 <v-select
                   :items="addSection"
                   label="Select Section"
                   v-model="selectStudents.selectSection"
                   item-text="name"
                   item-value="_id"
                   name="Select Section"
                   :rules="sectionRules"
                   class="px-2"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs5 class="mx-auto mb-2">
                 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>
               </v-flex>
             </v-layout>
           </v-flex>
         </v-card>
         <v-data-table
           :headers="headers"
           :items="desserts"
           :pagination.sync="pagination"
           :search="search"
         >
           <template slot="items" slot-scope="props">
             <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
             <td id="td" class="text-xs-center">
               <v-avatar>
                 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
               </v-avatar>
             </td>
             <td id="td" class="text-xs-center">{{ props.item.name}}</td>
             <td id="td" class="text-xs-center">{{ props.item.email }}</td>
             <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
             <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
             <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
             <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
             <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
             <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
             <td class="text-xs-center">
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:18px; "
                     class="mr5"
                     @click="profile(props.item)"
                     src="/static/icon/eye1.png"
                   />
                   <span>View</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr5"
                     @click="editItem(props.item)"
                     src="/static/icon/edit1.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr5"
                     @click="deleteItem(props.item)"
                     src="/static/icon/delete1.png"
                   />
                   <span>Delete</span>
                 </v-tooltip>
               </span>
             </td>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** ADD STUDENTS DETAILS****** -->
       <v-tab-item>
         <v-container fluid>
           <v-layout align-center justify-center fill-height>
             <v-flex xs12 sm12 md10 lg11>
               <div>
                 <v-app>
                   <v-stepper v-model="e2">
                     <v-stepper-header>
                       <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
                       <v-divider></v-divider>
                       <v-stepper-step step="2">Fill Student Details</v-stepper-step>
                     </v-stepper-header>
                     <v-stepper-items>
                       <v-stepper-content step="1">
                         <v-container fluid class>
                           <v-snackbar
                             :timeout="timeout"
                             :top="y === 'top'"
                             :right="x === 'right'"
                             :vertical="mode === 'vertical'"
                             v-model="snackbar"
                             color="success"
                           >{{ text }}</v-snackbar>
-                          <v-flex xs12 sm12>
+                          <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">
+                            <v-form ref="parentForm" v-model="valid" lazy-validation>
+                              <v-layout wrap>
+                                <v-flex xs12 sm6>
+                                  <v-layout wrap>
+                                    <v-flex xs12 class="pt-4 subheading">
+                                      <label>Father Cell No:</label>
+                                    </v-flex>
+                                    <v-flex xs12 >
+                                      <v-text-field
+                                        v-model.trim="parentData.fatherCellNo"
+                                        placeholder="fill your father Cell Number"
+                                        type="number"
+                                        :rules="fatheCellNoRules"
+                                        v-on:keyup="getParentDetails()"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout wrap>
+                                    <v-flex xs12 class="pt-4 subheading">
+                                      <label>Parent Email Id:</label>
+                                    </v-flex>
+                                    <v-flex xs12 >
+                                      <v-text-field
+                                        placeholder="fill Parent email"
+                                        v-model="parentData.email"
+                                        type="text"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout wrap>
+                                <v-flex xs12 sm6>
+                                  <v-layout wrap>
+                                    <v-flex xs12 class="pt-4 subheading">
+                                      <label>Father Name:</label>
+                                    </v-flex>
+                                    <v-flex xs12>
+                                      <v-text-field
+                                        v-model="parentData.fatherName"
+                                        placeholder="Fill your father Name"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout wrap>
+                                    <v-flex xs12 class="pt-4 subheading">
+                                      <label>Mother Name:</label>
+                                    </v-flex>
+                                    <v-flex xs12>
+                                      <v-text-field
+                                        v-model="parentData.motherName"
+                                        placeholder="fill your Mother Name"
+                                        name="state"
+                                        type="text"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout wrap>
+                                <v-flex xs12 sm6>
+                                  <v-layout wrap>
+                                    <v-flex xs12 class="pt-4 subheading">
+                                      <label >Mother Cell No:</label>
+                                    </v-flex>
+                                    <v-flex xs12>
+                                      <v-text-field
+                                        v-model="parentData.motherCellNo"
+                                        placeholder="fill your  Mother Cell Number"
+                                        name="state"
+                                        type="number"
+                                        required
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                                <v-flex xs12 sm6>
+                                  <v-layout wrap>
+                                    <v-flex xs12 class="pt-4 subheading">
+                                      <label>Father Profession:</label>
+                                    </v-flex>
+                                    <v-flex xs12 >
+                                      <v-text-field
+                                        v-model="parentData.fatherProfession"
+                                        placeholder="fill your father profession"
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-layout wrap>
+                                <v-flex xs12 sm6>
+                                  <v-layout wrap>
+                                    <v-flex xs12 class="pt-4 subheading">
+                                      <label>Mother Profession:</label>
+                                    </v-flex>
+                                    <v-flex xs12 >
+                                      <v-text-field
+                                        v-model="parentData.motherProfession"
+                                        placeholder="fill your mother profession"
+                                      ></v-text-field>
+                                    </v-flex>
+                                  </v-layout>
+                                </v-flex>
+                              </v-layout>
+                              <v-flex sm12 class="hidden-xs-only">
+                                <v-card-actions>
+                                  <v-spacer></v-spacer>
+                                  <v-btn
+                                    @click="submitParentDetails"
+                                    round
+                                    dark
+                                    :loading="loading"
+                                    v-show="showParent"
+                                  >Add</v-btn>
+                                  <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
+                                </v-card-actions>
+                              </v-flex>
+                              <v-flex
+                                xs6
+                                class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
+                              >
+                                <v-btn
+                                  @click="submitParentDetails"
+                                  round
+                                  dark
+                                  :loading="loading"
+                                  v-show="showParent"
+                                >Add</v-btn>
+                                <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
+                              </v-flex>
+                            </v-form>
+                          </v-flex>
+                           <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
                             <v-form ref="parentForm" v-model="valid" lazy-validation>
                               <v-layout wrap>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Father Cell No:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model.trim="parentData.fatherCellNo"
                                         placeholder="fill your father Cell Number"
                                         type="number"
                                         :rules="fatheCellNoRules"
                                         v-on:keyup="getParentDetails()"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Parent Email Id:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         placeholder="fill Parent email"
                                         v-model="parentData.email"
                                         type="text"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                               </v-layout>
                               <v-layout wrap>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Father Name:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.fatherName"
                                         placeholder="Fill your father Name"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Mother Name:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.motherName"
                                         placeholder="fill your Mother Name"
                                         name="state"
                                         type="text"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                               </v-layout>
                               <v-layout wrap>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Mother Cell No:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.motherCellNo"
                                         placeholder="fill your  Mother Cell Number"
                                         name="state"
                                         type="number"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Father Profession:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.fatherProfession"
                                         placeholder="fill your father profession"
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                               </v-layout>
                               <v-layout wrap>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Mother Profession:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.motherProfession"
                                         placeholder="fill your mother profession"
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                               </v-layout>
                               <v-flex sm12 class="hidden-xs-only">
                                 <v-card-actions>
                                   <v-spacer></v-spacer>
                                   <v-btn
                                     @click="submitParentDetails"
                                     round
                                     dark
                                     :loading="loading"
                                     v-show="showParent"
                                   >Add</v-btn>
                                   <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                                 </v-card-actions>
                               </v-flex>
                               <v-flex
                                 xs6
                                 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                               >
                                 <v-btn
                                   @click="submitParentDetails"
                                   round
                                   dark
                                   :loading="loading"
                                   v-show="showParent"
                                 >Add</v-btn>
                                 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                               </v-flex>
                             </v-form>
                           </v-flex>
                         </v-container>
                       </v-stepper-content>
                       <v-stepper-content step="2">
-                        <!-- <v-container fluid> -->
                         <v-snackbar
                           :timeout="timeout"
                           :top="y === 'top'"
                           :right="x === 'right'"
                           :vertical="mode === 'vertical'"
                           v-model="snackbar"
                           color="success"
                         >{{ text }}</v-snackbar>
                         <v-flex xs12 sm12>
                           <v-form ref="form" v-model="valid" lazy-validation>
-                            <!-- <v-container fluid> -->
                             <v-layout>
                               <v-flex
                                 xs12
                                 class="text-xs-center text-sm-center text-md-center text-lg-center"
                               >
                                 <v-avatar size="100px">
                                   <img src="/static/icon/user.png" v-if="!imageUrl" />
                                 </v-avatar>
                                 <input
                                   type="file"
                                   style="display: none"
                                   ref="image"
                                   accept="image/*"
                                   @change="onFilePicked"
                                 />
                                 <img
                                   :src="imageData.imageUrl"
                                   height="150"
                                   v-if="imageUrl"
                                   style="border-radius:50%; width:200px"
                                 />
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex x4 sm4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Class:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-select
                                       :items="addclass"
                                       label="Select Class"
                                       v-model="addStudents.select"
                                       item-text="classNum"
                                       item-value="_id"
                                       name="Select Class"
                                       :rules="classRules"
                                       @change="getSection(addStudents.select)"
                                       required
                                     ></v-select>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-xs-only hidden-sm-only"
                                     >Select Section:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Section:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-select
                                       :items="addSection"
                                       label="Select Section"
                                       v-model="addStudents.selectSection"
                                       item-text="name"
                                       item-value="_id"
                                       name="Select Section"
                                       :rules="sectionRules"
                                       required
                                     ></v-select>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Name:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.name"
                                       placeholder="fill your full Name"
                                       name="name"
                                       type="text"
                                       :rules="nameRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading">
                                     <label class="right">Email ID:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-text-field
                                       placeholder="fill your email"
                                       v-model="addStudents.email"
                                       type="text"
                                       name="email"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-sm-only hidden-xs-only"
                                     >Date of Birth:</label>
                                     <label
                                       class="right hidden-lg-only hidden-xl-only hidden-md-only"
                                     >D.O.B:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-menu
                                       ref="menu"
                                       :close-on-content-click="false"
                                       v-model="menu"
                                       :nudge-right="40"
                                       lazy
                                       transition="scale-transition"
                                       offset-y
                                       full-width
                                       min-width="290px"
                                     >
                                       <v-text-field
                                         slot="activator"
                                         :rules="dateRules"
                                         v-model="addStudents.date"
                                         placeholder="Select date"
                                       ></v-text-field>
                                       <v-date-picker
                                         ref="picker"
                                         v-model="addStudents.date"
                                         :max="new Date().toISOString().substr(0, 10)"
                                         min="1950-01-01"
                                         @input="menu = false"
                                       ></v-date-picker>
                                     </v-menu>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">City:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.city"
                                       placeholder="fill your City Name"
                                       name="City"
                                       type="text"
                                       :rules="cityRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">State:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.state"
                                       placeholder="fill your State Name"
                                       name="state"
                                       type="text"
                                       :rules="stateRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Pincode:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.pincode"
                                       placeholder="fill your pincode"
                                       name="pincode"
                                       type="number"
                                       :rules="pincode"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Mobile:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.mobile"
                                       placeholder="fill your MobileNo"
                                       name="mobileNo"
                                       type="number"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-xs-only hidden-sm-only"
                                     >Select Country:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Country:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-autocomplete
                                       v-model="addStudents.country"
                                       :rules="country"
                                       :items="countries"
                                       placeholder="Select Country Name"
                                       required
                                     ></v-autocomplete>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Gender:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-select
                                       :items="gender"
                                       v-model="addStudents.gender"
                                       :rules="genderRules"
                                       label="Select Gender"
                                       required
                                     ></v-select>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Blood:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.bloodGroup"
                                       placeholder="Fill your Blood Group"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <!-- <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Allergies:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.allergies"
                                       placeholder="Fill your Allergies"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>-->
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Roll No:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.rollNo"
                                       placeholder="Fill your Roll Number"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-xs-only hidden-sm-only"
                                     >Medical Notes:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Medical:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.medicalNotes"
                                       placeholder="Fill your Medical Notes"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Height:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.height"
                                       placeholder="Fill your Height"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Weight:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.weight"
                                       placeholder="Fill your Weight"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Uplaod :</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       label="Select Image"
                                       @click="pickFile"
                                       v-model="imageName"
                                       append-icon="attach_file"
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-xs-only hidden-sm-only"
                                     >Academic Year:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Year:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.establishmentYear"
                                       placeholder="fill your Academic Year"
                                       name="state"
                                       type="number"
                                       :rules="establishmentYearRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
-                            <v-layout wrap>
+                            <v-layout wrap class="hidden-xs-only hidden-sm-only">
-                              <v-flex xs12 sm6 class="hidden-xs-only hidden-sm-only">
+                              <v-flex xs12 sm6 >
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading">
                                     <label class="right pr-4">Present Address:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-text-field
                                       name="input-4-3"
                                       v-model="addStudents.presentAddress"
                                       :rules="presentAddress"
                                       placeholder="fill Your present Address"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading addressForm">
                                     <label class="right">Permanent Address:</label>
                                   </v-flex>
                                   <v-flex xs12 sm8 class="ml-3">
                                     <v-text-field
                                       name="input-4-3"
                                       v-model="addStudents.permanentAddress"
                                       :rules="permanentAddress"
                                       placeholder="fill Your Permanent Address"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                               <v-flex xs12 sm12>
                                 <v-layout>
                                   <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
                                     <label class>Present Address :</label>
                                   </v-flex>
                                 </v-layout>
                                 <v-layout>
                                   <v-flex xs12 sm12>
                                     <v-textarea
                                       name="input-4-3"
                                       v-model="addStudents.presentAddress"
                                       :rules="presentAddress"
                                       placeholder="fill Your present Address"
                                       required
                                     ></v-textarea>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm12>
                                 <v-layout>
                                   <v-flex
                                     xs12
                                     sm12
                                     class="pt-4 pr-4 subheading text-xs-center addressForm"
                                   >
                                     <label>Permanent addr:</label>
                                   </v-flex>
                                 </v-layout>
                                 <v-layout>
                                   <v-flex xs12 sm12>
                                     <v-textarea
                                       name="input-4-3"
                                       v-model="addStudents.permanentAddress"
                                       :rules="permanentAddress"
                                       placeholder="fill Your Permanent Address"
                                       required
                                     ></v-textarea>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout>
                               <v-flex xs12 sm11 offset-sm1>
                                 <v-layout>
                                   <v-flex xs6>
                                     <v-btn round dark @click="e2 = 1">Back</v-btn>
                                   </v-flex>
                                   <v-flex xs6>
                                     <v-btn
                                       @click="submit"
                                       round
                                       dark
                                       :loading="loading"
                                       class="right"
                                     >Add</v-btn>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                           </v-form>
                         </v-flex>
                       </v-stepper-content>
                     </v-stepper-items>
                   </v-stepper>
                 </v-app>
               </div>
             </v-flex>
           </v-layout>
         </v-container>
       </v-tab-item>
     </v-tabs>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </div>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import countryList from "@/script/country.js";
 import parent from "@/script/parents.js";
 export default {
   data: () => ({
     e2: 0,
     showParent: true,
     showNext: false,
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     menu: false,
     menu1: false,
     dialog: false,
     dialog1: false,
     valid: true,
     isActive: true,
     newActive: false,
     addclass: [],
     addSection: [],
     gender: ["Male", "Female"],
     pagination: {
       rowsPerPage: 15
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     nameRules: [v => !!v || " Full Name is required"],
     dateRules: [v => !!v || " DOB is required"],
     cityRules: [v => !!v || " City Name is required"],
     pincode: [v => !!v || " Pincode is required"],
     country: [v => !!v || " Country Name is required"],
     permanentAddress: [v => !!v || " Permanent Address is required"],
     presentAddress: [v => !!v || " Present Address  is required"],
     stateRules: [v => !!v || "State Name is required"],
     classRules: [v => !!v || " Class Name is required"],
     sectionRules: [v => !!v || " Section Name is required"],
     genderRules: [v => !!v || " Select Gender is required"],
     fatheCellNoRules: [v => !!v || " father Cell Number  is required"],
     establishmentYearRules: [v => !!v || " Academic Year  is required"],
     errorMessages: "",
     countries: [],
     headers: [
       {
         text: "Roll No.",
         align: "center",
         sortable: false,
         value: "rollNo"
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center"
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "Dob", value: "dob", sortable: false, align: "center" },
       { text: "Gender", value: "gender", sortable: false, align: "center" },
       {
         text: "Father Name",
         value: "fatherName",
         sortable: false,
         align: "center"
       },
       {
         text: "Mother Name",
         value: "motherName",
         sortable: false,
         align: "center"
       },
       {
         text: "Academic Year",
         value: "establishmentYear",
         sortable: false,
         align: "center"
       },
       { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     desserts: [],
     parentId: "",
     editedIndex: -1,
     parentData: {},
     addStudents: {
       role: "STUDENT",
       name: "",
       email: "",
       date: "",
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobile: "",
       state: "",
       gender: "",
       select: "",
       selectSection: "",
       bloodGroup: "",
       allergies: "",
       medicalNotes: "",
       height: "",
       weight: "",
       rollNo: "",
       establishmentYear: new Date().getFullYear()
     },
     selectStudents: {
       select: "",
       selectSection: ""
     },
     editedItem: {
       role: "STUDENT",
       name: "",
       email: "",
       dob: "",
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobile: "",
       state: "",
       gender: "",
       select: "",
       selectSection: "",
       bloodGroup: "",
       allergies: "",
       medicalNotes: "",
       height: "",
       weight: "",
       rollNo: "",
       establishmentYear: new Date().getFullYear()
     }
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     }
   },
   methods: {
     findStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.selectStudents.select,
             sectionId: this.selectStudents.selectSection
           }
         })
         .then(response => {
           this.desserts = response.data.data;
           this.showLoader = false;
           console.log("getSectionsList=====>", this.addSection);
         })
         .catch(err => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getSections(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
           // console.log("getSectionsList=====>", this.addSection);
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: '/' });
         });
     },
     getSection(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
           // console.log("getSectionsList=====>", this.addSection);
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: '/' });
         });
     },
     pickFile() {
       this.$refs.image.click();
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.imageData.upload = e.target.files[0];
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     // getStudentList() {
     //   this.showLoader = true;
     //   var token = this.$store.state.token;
     //   http()
     //     .get("/getStudentsList", {
     //       headers: { Authorization: "Bearer " + token }
     //     })
     //     .then(response => {
     //       this.desserts = response.data.data;
     //       this.showLoader = false;
     //       // console.log("getStudentList=====>",this.desserts)
     //     })
     //     .catch(err => {
     //       // console.log("err====>", err);
     //       this.showLoader = false;
     //       this.$router.replace({ path: "/" });
     //     });
     // },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.fatherName = item.parentId.fatherName;
       this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
       this.editedItem.motherName = item.parentId.motherName;
       this.editedItem.motherCellNo = item.parentId.motherCellNo;
       this.editedItem.dob =
         this.editedItem.dob != undefined
           ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
           : (this.editedItem.dob = "");
       this.dialog = true;
     },
     profile(item) {
       console.log("item", item);
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.fatherName = item.parentId.fatherName;
       this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
       this.editedItem.motherName = item.parentId.motherName;
       this.editedItem.motherCellNo = item.parentId.motherCellNo;
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         studentId: item._id
       };
       http()
         .delete(
           "/deleteStudent",
           confirm("Are you sure you want to delete this?") && {
             params: deleteStudent
           }
         )
         .then(response => {
           // console.log("deleteUers",deleteStudent)
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing Student";
           }
           this.getStudentList();
         })
         .catch(error => {
           // console.log(error);
         });
     },
     activeTab(type) {
       switch (type) {
         case "existing":
           this.newActive = false;
           this.isActive = true;
           break;
         default:
           this.newActive = true;
           this.isActive = false;
           break;
       }
     },
     close() {
       this.dialog = false;
       setTimeout(() => {
         this.editedItem = Object.assign({}, this.defaultItem);
         this.editedIndex = -1;
       }, 300);
     },
     close1() {
       this.dialog1 = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addStudent = {
           parentId: this.parentId,
           name: this.addStudents.name,
           email: this.addStudents.email,
           role: this.addStudents.role,
           dob: this.addStudents.date,
           city: this.addStudents.city,
           pincode: this.addStudents.pincode,
           country: this.addStudents.country,
           permanentAddress: this.addStudents.permanentAddress,
           presentAddress: this.addStudents.presentAddress,
           mobile: this.addStudents.mobile,
           state: this.addStudents.state,
           gender: this.addStudents.gender,
           establishmentYear: this.addStudents.establishmentYear,
           classId: this.addStudents.select,
           sectionId: this.addStudents.selectSection,
           bloodGroup: this.addStudents.bloodGroup,
           allergies: this.addStudents.allergies,
           medicalNotes: this.addStudents.medicalNotes,
           height: this.addStudents.height,
           weight: this.addStudents.weight,
           rollNo: this.addStudents.rollNo
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addStudent.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createStudent", addStudent)
           .then(response => {
             console.log(addStudent);
             if ((this.snackbar = true)) {
               this.text = "New Student added successfully";
             }
             // this.getStudentList();
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             // console.log(error);
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
             }
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     save() {
       let editStudent = {
         studentId: this.editedItem._id,
         name: this.editedItem.name,
         email: this.editedItem.email,
         role: this.editedItem.role,
         dob: this.editedItem.dob,
         city: this.editedItem.city,
         pincode: this.editedItem.pincode,
         country: this.editedItem.country,
         permanentAddress: this.editedItem.permanentAddress,
         presentAddress: this.editedItem.presentAddress,
         mobile: this.editedItem.mobile,
         state: this.editedItem.state,
         gender: this.editedItem.gender,
         establishmentYear: this.editedItem.establishmentYear,
         classId: this.editedItem.select,
         sectionId: this.editedItem.selectSection,
         bloodGroup: this.editedItem.bloodGroup,
         allergies: this.editedItem.allergies,
         medicalNotes: this.editedItem.medicalNotes,
         height: this.editedItem.height,
         weight: this.editedItem.weight,
         rollNo: this.editedItem.rollNo
       };
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         editStudent.upload = imageUrl;
       }
       http()
         .put("/updateStudent", editStudent)
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully Student Existing User";
           this.imageUrl = "";
           this.findStudents();
           this.close();
         })
         .catch(error => {
           // console.log(error);
           if ((this.snackbar = true)) {
             this.text = error.response.data.statusText;
           }
         });
     },
     submitParentDetails() {
       if (this.$refs.parentForm.validate()) {
         let addparentDetails = {
           email: this.parentData.email,
           fatherName: this.parentData.fatherName,
           fatherCellNo: this.parentData.fatherCellNo,
           motherName: this.parentData.motherName,
           motherCellNo: this.parentData.motherCellNo,
           role: "PARENT"
         };
         this.loading = true;
         http()
           .post("/createParent", addparentDetails)
           .then(response => {
             this.parentId = response.data.data.id;
             this.e2 = 2;
             if ((this.snackbar = true)) {
               this.text = "successfully";
             }
             // this.getStudentList();
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             console.log(error.response.data);
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
               this.text = error.response.data.statusText;
             }
             this.loading = false;
           });
       }
     },
     getParentDetails() {
       if (this.parentData.fatherCellNo.length > 9) {
         http()
           .get("getParticularParent", {
             params: { fatherCellNo: this.parentData.fatherCellNo },
             headers: {
               Authorization: "Bearer " + this.$store.state.token
             }
           })
           .then(response => {
             this.showNext = true;
             this.showParent = false;
             this.parentData = response.data.data;
             this.parentId = response.data.data._id;
           })
           .catch(error => {
             console.log("err====>", error.response.data.message);
           });
       }
     }
   },
   mounted() {
     const getCountryList = countryList();
     this.countries = getCountryList;
     var token = this.$store.state.token;
     http()
       .get("/getClassesList", {
         headers: { Authorization: "Bearer " + token }
       })
       .then(response => {
         this.addclass = response.data.data;
       })
       .catch(error => {
         this.showLoader = false;
         if (error.response.status === 401) {
           this.$router.replace({ path: "/" });
           this.$store.dispatch("setToken", null);
           this.$store.dispatch("Id", null);
           this.$store.dispatch("Role", null);
         }
       });
   },
   created() {
     this.$root.$on("app:search", search => {
       this.search = search;
     });
   },
   beforeDestroy() {
     // dont forget to remove the listener
     this.$root.$off("app:search");
   }
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;