viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 895062f9a8e45c1b895ee03da1f88ed1644f896b

Authored by Neeraj Sharma
1 parent c39f609dfc
Exists in master and in 3 other branches amber-development, development, ui-design

add loader on submit gallery

Showing 1 changed file with 10 additions and 6 deletions   Show diff stats
src/pages/Gallery/gallery.vue
Diff comments   View file @895062f
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
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 Gallery</v-tab> 10 >Existing Gallery</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 Gallery</v-tab> 18 >Add Gallery</v-tab>
19 19
20 <!-- ****** EDITS ALL Gallery DETAILS ****** --> 20 <!-- ****** EDITS ALL Gallery DETAILS ****** -->
21 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="1000px" scrollable> 31 <v-dialog v-model="dialog" max-width="1000px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar class="grey lighten-2" flat> 33 <v-toolbar class="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 Gallery</h3> 36 <h3>Edit Gallery</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:700px;"> 40 <v-card-text style="height:700px;">
41 <v-layout row> 41 <v-layout row>
42 <v-flex 42 <v-flex
43 xs12 43 xs12
44 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 44 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
45 > 45 >
46 <input 46 <input
47 type="file" 47 type="file"
48 style="display: none" 48 style="display: none"
49 ref="editImage" 49 ref="editImage"
50 accept="image/*" 50 accept="image/*"
51 multiple 51 multiple
52 @change="editFilePicked" 52 @change="editFilePicked"
53 /> 53 />
54 <v-layout justify-center> 54 <v-layout justify-center>
55 <v-flex 55 <v-flex
56 xs6 56 xs6
57 sm12 57 sm12
58 md3 58 md3
59 v-for="Image in editedItem.imageUrl" 59 v-for="Image in editedItem.imageUrl"
60 :key="Image._id" 60 :key="Image._id"
61 v-if="editedItem.imageUrl" 61 v-if="editedItem.imageUrl"
62 class="profile-image-wrapper imgNews" 62 class="profile-image-wrapper imgNews"
63 > 63 >
64 <img 64 <img
65 :src="Image.imageLink" 65 :src="Image.imageLink"
66 height="160" 66 height="160"
67 width="160" 67 width="160"
68 alt="Gallery" 68 alt="Gallery"
69 class="pa-2 imgNews" 69 class="pa-2 imgNews"
70 /> 70 />
71 <v-icon 71 <v-icon
72 class="red edit-profile-icon" 72 class="red edit-profile-icon"
73 dark 73 dark
74 @click="deleteImage(Image._id,editedItem._id)" 74 @click="deleteImage(Image._id,editedItem._id)"
75 >close</v-icon> 75 >close</v-icon>
76 </v-flex> 76 </v-flex>
77 <v-flex v-for="(file, index) in editFiles" :key="index"> 77 <v-flex v-for="(file, index) in editFiles" :key="index">
78 <img :src="file" height="160" width="160" class="pa-2 imgNews" /> 78 <img :src="file" height="160" width="160" class="pa-2 imgNews" />
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 <img 81 <img
82 src="/static/icon/user.png" 82 src="/static/icon/user.png"
83 v-if="editedItem.imageUrl == '' && editFiles == ''" 83 v-if="editedItem.imageUrl == '' && editFiles == ''"
84 height="160" 84 height="160"
85 width="160" 85 width="160"
86 alt="Gallery" 86 alt="Gallery"
87 /> 87 />
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 <v-layout wrap> 90 <v-layout wrap>
91 <v-flex xs12 sm12> 91 <v-flex xs12 sm12>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right">Title:</label> 94 <label class="right">Title:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs8 sm5 class="ml-3"> 96 <v-flex xs8 sm5 class="ml-3">
97 <v-text-field 97 <v-text-field
98 v-model="editedItem.title" 98 v-model="editedItem.title"
99 placeholder="fill your Title" 99 placeholder="fill your Title"
100 name="name" 100 name="name"
101 type="text" 101 type="text"
102 required 102 required
103 ></v-text-field> 103 ></v-text-field>
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 </v-flex> 106 </v-flex>
107 <v-flex xs12 sm12> 107 <v-flex xs12 sm12>
108 <v-layout> 108 <v-layout>
109 <v-flex xs4 class="pt-4 subheading"> 109 <v-flex xs4 class="pt-4 subheading">
110 <label class="right">Description:</label> 110 <label class="right">Description:</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs8 sm5 class="ml-3"> 112 <v-flex xs8 sm5 class="ml-3">
113 <v-text-field 113 <v-text-field
114 placeholder="fill your Description" 114 placeholder="fill your Description"
115 v-model="editedItem.description" 115 v-model="editedItem.description"
116 type="text" 116 type="text"
117 name="email" 117 name="email"
118 required 118 required
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-layout> 123 <v-layout>
124 <v-flex xs4 class="pt-4 subheading"> 124 <v-flex xs4 class="pt-4 subheading">
125 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 125 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
126 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 126 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs8 sm5 class="ml-3"> 128 <v-flex xs8 sm5 class="ml-3">
129 <v-select 129 <v-select
130 :items="addclass" 130 :items="addclass"
131 label="Select Class" 131 label="Select Class"
132 v-model="editedItem.classNum" 132 v-model="editedItem.classNum"
133 item-text="classNum" 133 item-text="classNum"
134 item-value="_id" 134 item-value="_id"
135 name="Select Class" 135 name="Select Class"
136 required 136 required
137 ></v-select> 137 ></v-select>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 <v-flex xs12> 140 <v-flex xs12>
141 <v-layout> 141 <v-layout>
142 <v-flex xs4 class="pt-4 subheading"> 142 <v-flex xs4 class="pt-4 subheading">
143 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label> 143 <label class="right hidden-xs-only hidden-sm-only">Add New Images:</label>
144 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label> 144 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
145 </v-flex> 145 </v-flex>
146 <v-flex xs8 sm5 class="ml-3"> 146 <v-flex xs8 sm5 class="ml-3">
147 <v-text-field 147 <v-text-field
148 label="Select Image" 148 label="Select Image"
149 @click="editPickFile" 149 @click="editPickFile"
150 v-model="editImageName" 150 v-model="editImageName"
151 append-icon="attach_file" 151 append-icon="attach_file"
152 multiple 152 multiple
153 ></v-text-field> 153 ></v-text-field>
154 </v-flex> 154 </v-flex>
155 </v-layout> 155 </v-layout>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 <v-flex xs12> 158 <v-flex xs12>
159 <div 159 <div
160 v-for="(editImage,index) in editedItem.youTubeLinkUrl" 160 v-for="(editImage,index) in editedItem.youTubeLinkUrl"
161 :key="index" 161 :key="index"
162 v-if="editImage.youTubeLink !=[]" 162 v-if="editImage.youTubeLink !=[]"
163 > 163 >
164 <v-layout> 164 <v-layout>
165 <v-flex xs4 class="pt-4 subheading"> 165 <v-flex xs4 class="pt-4 subheading">
166 <label class="right">You Tube Link Url:</label> 166 <label class="right">You Tube Link Url:</label>
167 </v-flex> 167 </v-flex>
168 <v-flex xs8 sm5 class="ml-3"> 168 <v-flex xs8 sm5 class="ml-3">
169 <v-text-field 169 <v-text-field
170 v-model="editImage.youTubeLink" 170 v-model="editImage.youTubeLink"
171 type="text" 171 type="text"
172 name="link" 172 name="link"
173 required 173 required
174 ></v-text-field> 174 ></v-text-field>
175 </v-flex> 175 </v-flex>
176 <v-flex xs2 class="pt-4"> 176 <v-flex xs2 class="pt-4">
177 <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon> 177 <v-icon @click="deleteUrl(index,editImage._id,editedItem._id)">cancel</v-icon>
178 </v-flex> 178 </v-flex>
179 </v-layout> 179 </v-layout>
180 </div> 180 </div>
181 </v-flex> 181 </v-flex>
182 <v-flex xs12> 182 <v-flex xs12>
183 <div v-for="(updateImage,index) in updates" :key="index"> 183 <div v-for="(updateImage,index) in updates" :key="index">
184 <v-layout> 184 <v-layout>
185 <v-flex xs4 class="pt-4 subheading"> 185 <v-flex xs4 class="pt-4 subheading">
186 <label class="right">You Tube Url:</label> 186 <label class="right">You Tube Url:</label>
187 </v-flex> 187 </v-flex>
188 <v-flex xs5 sm5 class="ml-3"> 188 <v-flex xs5 sm5 class="ml-3">
189 <v-text-field 189 <v-text-field
190 v-model="updateImage.youTubeLink" 190 v-model="updateImage.youTubeLink"
191 label="Upload new you tube link url" 191 label="Upload new you tube link url"
192 required 192 required
193 ></v-text-field> 193 ></v-text-field>
194 </v-flex> 194 </v-flex>
195 <v-flex xs2 class="pt-4"> 195 <v-flex xs2 class="pt-4">
196 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> 196 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
197 <v-icon @click="update">add_circle</v-icon> 197 <v-icon @click="update">add_circle</v-icon>
198 </v-flex> 198 </v-flex>
199 </v-layout> 199 </v-layout>
200 </div> 200 </div>
201 </v-flex> 201 </v-flex>
202 <v-layout> 202 <v-layout>
203 <v-flex xs12 sm8 offset-sm2> 203 <v-flex xs12 sm8 offset-sm2>
204 <v-card-actions> 204 <v-card-actions>
205 <v-btn round dark @click.native="close">Cancel</v-btn> 205 <v-btn round dark @click.native="close">Cancel</v-btn>
206 <v-spacer></v-spacer> 206 <v-spacer></v-spacer>
207 <v-btn round dark @click="save" :loading="editGalleryLoading">Save</v-btn> 207 <v-btn round dark @click="save" :loading="editGalleryLoading">Save</v-btn>
208 </v-card-actions> 208 </v-card-actions>
209 </v-flex> 209 </v-flex>
210 </v-layout> 210 </v-layout>
211 <!-- </v-container> 211 <!-- </v-container>
212 </v-form>--> 212 </v-form>-->
213 </v-card-text> 213 </v-card-text>
214 </v-card> 214 </v-card>
215 </v-dialog> 215 </v-dialog>
216 216
217 <!-- ****** PROFILE VIEW Gallery ****** --> 217 <!-- ****** PROFILE VIEW Gallery ****** -->
218 218
219 <v-dialog v-model="dialog1" max-width="940px" scrollable> 219 <v-dialog v-model="dialog1" max-width="940px" scrollable>
220 <v-card> 220 <v-card>
221 <v-toolbar color="grey lighten-2" flat> 221 <v-toolbar color="grey lighten-2" flat>
222 <v-spacer></v-spacer> 222 <v-spacer></v-spacer>
223 <v-toolbar-title> 223 <v-toolbar-title>
224 <h3>Gallery</h3> 224 <h3>Gallery</h3>
225 </v-toolbar-title> 225 </v-toolbar-title>
226 <v-spacer></v-spacer> 226 <v-spacer></v-spacer>
227 <v-icon @click="close1">close</v-icon> 227 <v-icon @click="close1">close</v-icon>
228 </v-toolbar> 228 </v-toolbar>
229 <v-card-text > 229 <v-card-text>
230 <v-layout row wrap> 230 <v-layout row wrap>
231 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"> 231 <v-flex
232 xs12
233 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
234 >
232 <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2"> 235 <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2">
233 <img src="/static/icon/user.png" width="240" height="180" /> 236 <img src="/static/icon/user.png" width="240" height="180" />
234 </v-avatar> 237 </v-avatar>
235 <span 238 <span
236 v-for="(image,i) in editedItem.imageUrl" 239 v-for="(image,i) in editedItem.imageUrl"
237 :key="i" 240 :key="i"
238 class="mt-4 pa-2" 241 class="mt-4 pa-2"
239 v-if="editedItem.imageUrl" 242 v-if="editedItem.imageUrl"
240 > 243 >
241 <img 244 <img
242 :src="image.imageLink" 245 :src="image.imageLink"
243 alt="Gallery" 246 alt="Gallery"
244 width="240" 247 width="240"
245 height="180" 248 height="180"
246 class="imgNews" 249 class="imgNews"
247 /> 250 />
248 </span> 251 </span>
249 </v-flex> 252 </v-flex>
250 </v-layout> 253 </v-layout>
251 <v-container grid-list-md> 254 <v-container grid-list-md>
252 <v-layout wrap> 255 <v-layout wrap>
253 <v-flex xs12> 256 <v-flex xs12>
254 <v-layout> 257 <v-layout>
255 <v-flex xs5 sm6> 258 <v-flex xs5 sm6>
256 <h5 class="right my-1"> 259 <h5 class="right my-1">
257 <b>Title:</b> 260 <b>Title:</b>
258 </h5> 261 </h5>
259 </v-flex> 262 </v-flex>
260 <v-flex sm6 xs8> 263 <v-flex sm6 xs8>
261 <h5 class="my-1">{{ editedItem.title }}</h5> 264 <h5 class="my-1">{{ editedItem.title }}</h5>
262 </v-flex> 265 </v-flex>
263 </v-layout> 266 </v-layout>
264 <v-layout> 267 <v-layout>
265 <v-flex xs5 sm6> 268 <v-flex xs5 sm6>
266 <h5 class="right my-1"> 269 <h5 class="right my-1">
267 <b>Description:</b> 270 <b>Description:</b>
268 </h5> 271 </h5>
269 </v-flex> 272 </v-flex>
270 <v-flex sm6 xs8> 273 <v-flex sm6 xs8>
271 <h5 class="my-1">{{ editedItem.description }}</h5> 274 <h5 class="my-1">{{ editedItem.description }}</h5>
272 </v-flex> 275 </v-flex>
273 </v-layout> 276 </v-layout>
274 <v-layout> 277 <v-layout>
275 <v-flex xs5 sm6> 278 <v-flex xs5 sm6>
276 <h5 class="right my-1"> 279 <h5 class="right my-1">
277 <b>You Tube Link Url:</b> 280 <b>You Tube Link Url:</b>
278 </h5> 281 </h5>
279 </v-flex> 282 </v-flex>
280 <v-flex sm6 xs8> 283 <v-flex sm6 xs8>
281 <h5 class="my-1 ml-3"> 284 <h5 class="my-1 ml-3">
282 <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl"> 285 <ul v-for="youTubeLinkUrl in editedItem.youTubeLinkUrl">
283 <li>{{ youTubeLinkUrl.youTubeLink }}</li> 286 <li>{{ youTubeLinkUrl.youTubeLink }}</li>
284 </ul> 287 </ul>
285 </h5> 288 </h5>
286 </v-flex> 289 </v-flex>
287 </v-layout> 290 </v-layout>
288 </v-flex> 291 </v-flex>
289 </v-layout> 292 </v-layout>
290 </v-container> 293 </v-container>
291 </v-card-text> 294 </v-card-text>
292 </v-card> 295 </v-card>
293 </v-dialog> 296 </v-dialog>
294 297
295 <v-snackbar 298 <v-snackbar
296 :timeout="timeout" 299 :timeout="timeout"
297 :top="y === 'top'" 300 :top="y === 'top'"
298 :right="x === 'right'" 301 :right="x === 'right'"
299 :vertical="mode === 'vertical'" 302 :vertical="mode === 'vertical'"
300 v-model="snackbar" 303 v-model="snackbar"
301 color="success" 304 color="success"
302 >{{ text }}</v-snackbar> 305 >{{ text }}</v-snackbar>
303 306
304 <!-- ****** EXISTING-USERS Gallery TABLE ****** --> 307 <!-- ****** EXISTING-USERS Gallery TABLE ****** -->
305 <v-data-table 308 <v-data-table
306 :headers="headers" 309 :headers="headers"
307 :items="desserts" 310 :items="desserts"
308 :pagination.sync="pagination" 311 :pagination.sync="pagination"
309 :search="search" 312 :search="search"
310 > 313 >
311 <template slot="items" slot-scope="props"> 314 <template slot="items" slot-scope="props">
312 <td class="text-xs-center">{{ props.index + 1}}</td> 315 <td class="text-xs-center">{{ props.index + 1}}</td>
313 <td id="td" class="text-xs-center"> 316 <td id="td" class="text-xs-center">
314 <span v-for="(image,_id) in props.item.imageUrl" class="pa-2"> 317 <span v-for="(image,_id) in props.item.imageUrl" class="pa-2">
315 <img :src="image.imageLink" alt="newsImage" width="100" height="70" /> 318 <img :src="image.imageLink" alt="newsImage" width="100" height="70" />
316 </span> 319 </span>
317 <img 320 <img
318 src="/static/icon/user.png" 321 src="/static/icon/user.png"
319 v-if="props.item.imageUrl == '' && editFiles == ''" 322 v-if="props.item.imageUrl == '' && editFiles == ''"
320 width="60" 323 width="60"
321 alt="Gallery" 324 alt="Gallery"
322 /> 325 />
323 </td> 326 </td>
324 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 327 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
325 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 328 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
326 329
327 <td id="td" class="text-xs-center"> 330 <td id="td" class="text-xs-center">
328 <span> 331 <span>
329 <v-tooltip top> 332 <v-tooltip top>
330 <img 333 <img
331 slot="activator" 334 slot="activator"
332 style="cursor:pointer; width:25px; height:18px; " 335 style="cursor:pointer; width:25px; height:18px; "
333 class="mr5" 336 class="mr5"
334 @click="profile(props.item)" 337 @click="profile(props.item)"
335 src="/static/icon/eye1.png" 338 src="/static/icon/eye1.png"
336 /> 339 />
337 <span>View</span> 340 <span>View</span>
338 </v-tooltip> 341 </v-tooltip>
339 <v-tooltip top> 342 <v-tooltip top>
340 <img 343 <img
341 slot="activator" 344 slot="activator"
342 style="cursor:pointer; width:20px; height:18px; " 345 style="cursor:pointer; width:20px; height:18px; "
343 class="mr5" 346 class="mr5"
344 @click="editItem(props.item)" 347 @click="editItem(props.item)"
345 src="/static/icon/edit1.png" 348 src="/static/icon/edit1.png"
346 /> 349 />
347 <span>Edit</span> 350 <span>Edit</span>
348 </v-tooltip> 351 </v-tooltip>
349 <v-tooltip top> 352 <v-tooltip top>
350 <img 353 <img
351 slot="activator" 354 slot="activator"
352 style="cursor:pointer; width:20px; height:20px; " 355 style="cursor:pointer; width:20px; height:20px; "
353 class="mr5" 356 class="mr5"
354 @click="deleteItem(props.item)" 357 @click="deleteItem(props.item)"
355 src="/static/icon/delete1.png" 358 src="/static/icon/delete1.png"
356 /> 359 />
357 <span>Delete</span> 360 <span>Delete</span>
358 </v-tooltip> 361 </v-tooltip>
359 </span> 362 </span>
360 </td> 363 </td>
361 </template> 364 </template>
362 <v-alert 365 <v-alert
363 slot="no-results" 366 slot="no-results"
364 :value="true" 367 :value="true"
365 color="error" 368 color="error"
366 icon="warning" 369 icon="warning"
367 >Your search for "{{ search }}" found no results.</v-alert> 370 >Your search for "{{ search }}" found no results.</v-alert>
368 </v-data-table> 371 </v-data-table>
369 </v-tab-item> 372 </v-tab-item>
370 373
371 <!-- ****** ADD MULTIPLE Gallery Data ****** --> 374 <!-- ****** ADD MULTIPLE Gallery Data ****** -->
372 375
373 <v-tab-item> 376 <v-tab-item>
374 <v-container> 377 <v-container>
375 <v-snackbar 378 <v-snackbar
376 :timeout="timeout" 379 :timeout="timeout"
377 :top="y === 'top'" 380 :top="y === 'top'"
378 :right="x === 'right'" 381 :right="x === 'right'"
379 :vertical="mode === 'vertical'" 382 :vertical="mode === 'vertical'"
380 v-model="snackbar" 383 v-model="snackbar"
381 color="success" 384 color="success"
382 >{{ text }}</v-snackbar> 385 >{{ text }}</v-snackbar>
383 <v-flex xs12 sm12 class="my-4"> 386 <v-flex xs12 sm12 class="my-4">
384 <v-card flat> 387 <v-card flat>
385 <v-form ref="form" v-model="valid" lazy-validation> 388 <v-form ref="form" v-model="valid" lazy-validation>
386 <v-container fluid> 389 <v-container fluid>
387 <v-layout> 390 <v-layout>
388 <v-flex 391 <v-flex
389 xs12 392 xs12
390 class="text-xs-center text-sm-center text-md-center text-lg-center my-4" 393 class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
391 > 394 >
392 <input 395 <input
393 type="file" 396 type="file"
394 style="display: none" 397 style="display: none"
395 ref="image" 398 ref="image"
396 accept="image/*" 399 accept="image/*"
397 multiple 400 multiple
398 @change="onFilePicked" 401 @change="onFilePicked"
399 /> 402 />
400 <v-layout justify-center> 403 <v-layout justify-center>
401 <v-flex v-for="(file,index) in files" :key="index" v-if="files"> 404 <v-flex v-for="(file,index) in files" :key="index" v-if="files">
402 <img :src="file" height="160" width="160px;" class="imgNews" /> 405 <img :src="file" height="160" width="160px;" class="imgNews" />
403 </v-flex> 406 </v-flex>
404 </v-layout> 407 </v-layout>
405 <img 408 <img
406 src="/static/icon/user.png" 409 src="/static/icon/user.png"
407 v-if="files ==''" 410 v-if="files ==''"
408 height="140" 411 height="140"
409 width="180px;" 412 width="180px;"
410 class="imgNews" 413 class="imgNews"
411 /> 414 />
412 </v-flex> 415 </v-flex>
413 </v-layout> 416 </v-layout>
414 <v-flex xs12> 417 <v-flex xs12>
415 <v-layout> 418 <v-layout>
416 <v-flex xs4 class="pt-4 subheading"> 419 <v-flex xs4 class="pt-4 subheading">
417 <label class="right">Title:</label> 420 <label class="right">Title:</label>
418 </v-flex> 421 </v-flex>
419 <v-flex xs8 sm4 class="ml-3"> 422 <v-flex xs8 sm4 class="ml-3">
420 <v-text-field 423 <v-text-field
421 v-model="addGallery.title" 424 v-model="addGallery.title"
422 placeholder="fill your Title" 425 placeholder="fill your Title"
423 name="name" 426 name="name"
424 type="text" 427 type="text"
425 :rules="titleRules" 428 :rules="titleRules"
426 required 429 required
427 ></v-text-field> 430 ></v-text-field>
428 </v-flex> 431 </v-flex>
429 </v-layout> 432 </v-layout>
430 </v-flex> 433 </v-flex>
431 <v-flex xs12> 434 <v-flex xs12>
432 <v-layout> 435 <v-layout>
433 <v-flex xs4 class="pt-4 subheading"> 436 <v-flex xs4 class="pt-4 subheading">
434 <label class="right">Description:</label> 437 <label class="right">Description:</label>
435 </v-flex> 438 </v-flex>
436 <v-flex xs8 sm4 class="ml-3"> 439 <v-flex xs8 sm4 class="ml-3">
437 <v-text-field 440 <v-text-field
438 placeholder="fill your Description" 441 placeholder="fill your Description"
439 :rules="descriptionRules" 442 :rules="descriptionRules"
440 v-model="addGallery.description" 443 v-model="addGallery.description"
441 type="text" 444 type="text"
442 name="email" 445 name="email"
443 required 446 required
444 ></v-text-field> 447 ></v-text-field>
445 </v-flex> 448 </v-flex>
446 </v-layout> 449 </v-layout>
447 </v-flex> 450 </v-flex>
448 <v-flex xs12> 451 <v-flex xs12>
449 <v-layout> 452 <v-layout>
450 <v-flex xs4 class="pt-4 subheading"> 453 <v-flex xs4 class="pt-4 subheading">
451 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 454 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
452 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 455 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
453 </v-flex> 456 </v-flex>
454 <v-flex xs8 sm4 class="ml-3"> 457 <v-flex xs8 sm4 class="ml-3">
455 <v-select 458 <v-select
456 :items="addclass" 459 :items="addclass"
457 label="Select Class" 460 label="Select Class"
458 v-model="addGallery.classNum" 461 v-model="addGallery.classNum"
459 item-text="classNum" 462 item-text="classNum"
460 item-value="_id" 463 item-value="_id"
461 name="Select Class" 464 name="Select Class"
462 required 465 required
463 ></v-select> 466 ></v-select>
464 </v-flex> 467 </v-flex>
465 </v-layout> 468 </v-layout>
466 </v-flex> 469 </v-flex>
467 <v-flex xs12> 470 <v-flex xs12>
468 <v-layout> 471 <v-layout>
469 <v-flex xs4 class="pt-4 subheading"> 472 <v-flex xs4 class="pt-4 subheading">
470 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 473 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
471 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 474 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
472 </v-flex> 475 </v-flex>
473 <v-flex xs8 sm4 class="ml-3"> 476 <v-flex xs8 sm4 class="ml-3">
474 <v-text-field 477 <v-text-field
475 label="Select Image" 478 label="Select Image"
476 @click="pickFile" 479 @click="pickFile"
477 v-model="imageName" 480 v-model="imageName"
478 append-icon="attach_file" 481 append-icon="attach_file"
479 multiple 482 multiple
480 ></v-text-field> 483 ></v-text-field>
481 </v-flex> 484 </v-flex>
482 </v-layout> 485 </v-layout>
483 </v-flex> 486 </v-flex>
484 <v-layout> 487 <v-layout>
485 <v-flex xs12> 488 <v-flex xs12>
486 <div v-for="(youTubeLink,index) in finds" :key="index"> 489 <div v-for="(youTubeLink,index) in finds" :key="index">
487 <v-layout> 490 <v-layout>
488 <v-flex xs4 class="pt-4 subheading"> 491 <v-flex xs4 class="pt-4 subheading">
489 <label class="right">You Tube Url:</label> 492 <label class="right">You Tube Url:</label>
490 </v-flex> 493 </v-flex>
491 <v-flex xs6 sm4 class="ml-3"> 494 <v-flex xs6 sm4 class="ml-3">
492 <v-text-field 495 <v-text-field
493 placeholder="fill your youtube link" 496 placeholder="fill your youtube link"
494 v-model="youTubeLink.value" 497 v-model="youTubeLink.value"
495 type="text" 498 type="text"
496 name="link" 499 name="link"
497 required 500 required
498 ></v-text-field> 501 ></v-text-field>
499 </v-flex> 502 </v-flex>
500 <v-flex xs2 class="pt-4"> 503 <v-flex xs2 class="pt-4">
501 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> 504 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
502 <v-icon @click="addFind">add_circle</v-icon> 505 <v-icon @click="addFind">add_circle</v-icon>
503 </v-flex> 506 </v-flex>
504 </v-layout> 507 </v-layout>
505 </div> 508 </div>
506 </v-flex> 509 </v-flex>
507 <v-layout> 510 <v-layout>
508 <v-flex xs12 sm5 offset-sm3> 511 <v-flex xs12 sm5 offset-sm3>
509 <v-layout> 512 <v-layout>
510 <v-flex xs6> 513 <v-flex xs6>
511 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 514 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
512 </v-flex> 515 </v-flex>
513 <v-flex xs6> 516 <v-flex xs6>
514 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 517 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
515 </v-flex> 518 </v-flex>
516 </v-layout> 519 </v-layout>
517 </v-flex> 520 </v-flex>
518 </v-layout> 521 </v-layout>
519 </v-layout> 522 </v-layout>
520 </v-container> 523 </v-container>
521 </v-form> 524 </v-form>
522 </v-card> 525 </v-card>
523 </v-flex> 526 </v-flex>
524 </v-container> 527 </v-container>
525 </v-tab-item> 528 </v-tab-item>
526 </v-tabs> 529 </v-tabs>
527 <div class="loader" v-if="showLoader"> 530 <div class="loader" v-if="showLoader">
528 <v-progress-circular indeterminate color="white"></v-progress-circular> 531 <v-progress-circular indeterminate color="white"></v-progress-circular>
529 </div> 532 </div>
530 </v-app> 533 </v-app>
531 </template> 534 </template>
532 535
533 <script> 536 <script>
534 import http from "@/Services/http.js"; 537 import http from "@/Services/http.js";
535 import Util from "@/util"; 538 import Util from "@/util";
536 539
537 export default { 540 export default {
538 data: () => ({ 541 data: () => ({
539 snackbar: false, 542 snackbar: false,
540 y: "top", 543 y: "top",
541 x: "right", 544 x: "right",
542 mode: "", 545 mode: "",
543 timeout: 3000, 546 timeout: 3000,
544 text: "", 547 text: "",
545 loading: false, 548 loading: false,
546 date: null, 549 date: null,
547 search: "", 550 search: "",
548 showLoader: false, 551 showLoader: false,
549 dialog: false, 552 dialog: false,
550 dialog1: false, 553 dialog1: false,
551 valid: true, 554 valid: true,
552 isActive: true, 555 isActive: true,
553 newActive: false, 556 newActive: false,
554 editGalleryLoading: false, 557 editGalleryLoading: false,
555 addclass: [], 558 addclass: [],
556 addSection: [], 559 addSection: [],
557 finds: [{ value: "" }], 560 finds: [{ value: "" }],
558 updates: [{ youTubeLink: "" }], 561 updates: [{ youTubeLink: "" }],
559 youTubeLink: {}, 562 youTubeLink: {},
560 addGallery: { 563 addGallery: {
561 youTubeLinkUrl: [] 564 youTubeLinkUrl: []
562 }, 565 },
563 pagination: { 566 pagination: {
564 rowsPerPage: 15 567 rowsPerPage: 15
565 }, 568 },
566 imageName: "", 569 imageName: "",
567 imageUrl: "", 570 imageUrl: "",
568 imageFile: "", 571 imageFile: "",
569 image: [], 572 image: [],
570 upload: "", 573 upload: "",
571 editImageName: "", 574 editImageName: "",
572 editFiles: [], 575 editFiles: [],
573 files: [], 576 files: [],
574 token: "", 577 token: "",
575 titleRules: [v => !!v || " Tilte is required"], 578 titleRules: [v => !!v || " Tilte is required"],
576 descriptionRules: [v => !!v || " Description is required"], 579 descriptionRules: [v => !!v || " Description is required"],
577 headers: [ 580 headers: [
578 { 581 {
579 align: "justify-center", 582 align: "justify-center",
580 text: "No", 583 text: "No",
581 sortable: false, 584 sortable: false,
582 value: "index" 585 value: "index"
583 }, 586 },
584 { text: "Image", vaue: "image", sortable: false, align: "center" }, 587 { text: "Image", vaue: "image", sortable: false, align: "center" },
585 { text: "Title", value: "title", sortable: false, align: "center" }, 588 { text: "Title", value: "title", sortable: false, align: "center" },
586 { 589 {
587 text: "Description", 590 text: "Description",
588 value: "description", 591 value: "description",
589 sortable: false, 592 sortable: false,
590 align: "center" 593 align: "center"
591 }, 594 },
592 { text: "Action", value: "", sortable: false, align: "center" } 595 { text: "Action", value: "", sortable: false, align: "center" }
593 ], 596 ],
594 desserts: [], 597 desserts: [],
595 editedIndex: -1, 598 editedIndex: -1,
596 editedItem: {}, 599 editedItem: {},
597 index: "" 600 index: ""
598 }), 601 }),
599 methods: { 602 methods: {
600 pickFile() { 603 pickFile() {
601 this.$refs.image.click(); 604 this.$refs.image.click();
602 }, 605 },
603 editPickFile() { 606 editPickFile() {
604 this.$refs.editImage.click(); 607 this.$refs.editImage.click();
605 }, 608 },
606 onFilePicked(e) { 609 onFilePicked(e) {
607 const files = e.target.files; 610 const files = e.target.files;
608 /** fetch Image Name **/ 611 /** fetch Image Name **/
609 if (files[0] !== undefined) { 612 if (files[0] !== undefined) {
610 this.imageName = files[0].name; 613 this.imageName = files[0].name;
611 if (this.imageName.lastIndexOf(".") <= 0) { 614 if (this.imageName.lastIndexOf(".") <= 0) {
612 return; 615 return;
613 } 616 }
614 this.files = []; 617 this.files = [];
615 // console.log("files", this.files); 618 // console.log("files", this.files);
616 /** Select many image and showing many image add to Gallery card **/ 619 /** Select many image and showing many image add to Gallery card **/
617 const test = Array.from(files).forEach((file, idx) => { 620 const test = Array.from(files).forEach((file, idx) => {
618 const fr = new FileReader(); 621 const fr = new FileReader();
619 const getResult = new Promise(resolve => { 622 const getResult = new Promise(resolve => {
620 fr.onload = e => { 623 fr.onload = e => {
621 this.files.push( 624 this.files.push(
622 // id: idx, 625 // id: idx,
623 e.target.result 626 e.target.result
624 ); 627 );
625 }; 628 };
626 console.log("uploadImage=======>", this.files); 629 console.log("uploadImage=======>", this.files);
627 }); 630 });
628 fr.readAsDataURL(file); 631 fr.readAsDataURL(file);
629 return getResult.then(file => { 632 return getResult.then(file => {
630 return file; 633 return file;
631 }); 634 });
632 }); 635 });
633 const fr = new FileReader(); 636 const fr = new FileReader();
634 fr.readAsDataURL(files[0]); 637 fr.readAsDataURL(files[0]);
635 fr.addEventListener("load", () => { 638 fr.addEventListener("load", () => {
636 this.imageFile = files; // this is an image file that can be sent to server... 639 this.imageFile = files; // this is an image file that can be sent to server...
637 }); 640 });
638 } else { 641 } else {
639 this.imageName = ""; 642 this.imageName = "";
640 this.imageFile = ""; 643 this.imageFile = "";
641 this.imageUrl = ""; 644 this.imageUrl = "";
642 } 645 }
643 }, 646 },
644 editFilePicked(e) { 647 editFilePicked(e) {
645 const files = e.target.files; 648 const files = e.target.files;
646 /** fetch Image Name **/ 649 /** fetch Image Name **/
647 if (files[0] !== undefined) { 650 if (files[0] !== undefined) {
648 this.editImageName = files[0].name; 651 this.editImageName = files[0].name;
649 if (this.editImageName.lastIndexOf(".") <= 0) { 652 if (this.editImageName.lastIndexOf(".") <= 0) {
650 return; 653 return;
651 } 654 }
652 /** Select many image and showing many image add to Gallery card **/ 655 /** Select many image and showing many image add to Gallery card **/
653 const test = Array.from(files).forEach((file, idx) => { 656 const test = Array.from(files).forEach((file, idx) => {
654 const fr = new FileReader(); 657 const fr = new FileReader();
655 const getResult = new Promise(resolve => { 658 const getResult = new Promise(resolve => {
656 fr.onload = e => { 659 fr.onload = e => {
657 this.editFiles.push( 660 this.editFiles.push(
658 // id: idx, 661 // id: idx,
659 e.target.result 662 e.target.result
660 ); 663 );
661 }; 664 };
662 console.log("uploadeditFilesImage=======>", this.editFiles); 665 console.log("uploadeditFilesImage=======>", this.editFiles);
663 }); 666 });
664 fr.readAsDataURL(file); 667 fr.readAsDataURL(file);
665 return getResult.then(file => { 668 return getResult.then(file => {
666 return file; 669 return file;
667 }); 670 });
668 }); 671 });
669 const fr = new FileReader(); 672 const fr = new FileReader();
670 fr.readAsDataURL(files[0]); 673 fr.readAsDataURL(files[0]);
671 // fr.addEventListener("load", () => { 674 // fr.addEventListener("load", () => {
672 // this.imageFile = files; // this is an image file that can be sent to server... 675 // this.imageFile = files; // this is an image file that can be sent to server...
673 // }); 676 // });
674 } else { 677 } else {
675 this.editImageName = ""; 678 this.editImageName = "";
676 this.editFiles = []; 679 this.editFiles = [];
677 } 680 }
678 }, 681 },
679 getGalleryList() { 682 getGalleryList() {
680 this.showLoader = true; 683 this.showLoader = true;
681 http() 684 http()
682 .get("/getGalleryList", { 685 .get("/getGalleryList", {
683 headers: { Authorization: "Bearer " + this.token } 686 headers: { Authorization: "Bearer " + this.token }
684 }) 687 })
685 .then(response => { 688 .then(response => {
686 this.desserts = response.data.data; 689 this.desserts = response.data.data;
687 this.showLoader = false; 690 this.showLoader = false;
688 }) 691 })
689 .catch(error => { 692 .catch(error => {
690 // console.log("err====>", err); 693 // console.log("err====>", err);
691 this.showLoader = false; 694 this.showLoader = false;
692 if (error.response.status === 401) { 695 if (error.response.status === 401) {
693 this.$router.replace({ path: "/" }); 696 this.$router.replace({ path: "/" });
694 this.$store.dispatch("setToken", null); 697 this.$store.dispatch("setToken", null);
695 this.$store.dispatch("Id", null); 698 this.$store.dispatch("Id", null);
696 } 699 }
697 }); 700 });
698 }, 701 },
699 editItem(item) { 702 editItem(item) {
700 this.files = []; 703 this.files = [];
701 this.editedIndex = this.desserts.indexOf(item); 704 this.editedIndex = this.desserts.indexOf(item);
702 this.editedItem = Object.assign({}, item); 705 this.editedItem = Object.assign({}, item);
703 this.dialog = true; 706 this.dialog = true;
704 }, 707 },
705 profile(item) { 708 profile(item) {
706 this.editedIndex = this.desserts.indexOf(item); 709 this.editedIndex = this.desserts.indexOf(item);
707 this.editedItem = Object.assign({}, item); 710 this.editedItem = Object.assign({}, item);
708 this.dialog1 = true; 711 this.dialog1 = true;
709 }, 712 },
710 deleteItem(item) { 713 deleteItem(item) {
711 let deleteGallery = { 714 let deleteGallery = {
712 galleryId: item._id 715 galleryId: item._id
713 }; 716 };
714 http() 717 http()
715 .delete( 718 .delete(
716 "/deleteGallery", 719 "/deleteGallery",
717 confirm("Are you sure you want to delete this?") && { 720 confirm("Are you sure you want to delete this?") && {
718 params: deleteGallery, 721 params: deleteGallery,
719 headers: { 722 headers: {
720 Authorization: "Bearer " + this.token 723 Authorization: "Bearer " + this.token
721 } 724 }
722 } 725 }
723 ) 726 )
724 .then(response => { 727 .then(response => {
725 this.snackbar = true; 728 this.snackbar = true;
726 this.text = "Successfully delete Existing Gallery"; 729 this.text = "Successfully delete Existing Gallery";
727 this.getGalleryList(); 730 this.getGalleryList();
728 }) 731 })
729 .catch(error => { 732 .catch(error => {
730 // console.log(error); 733 // console.log(error);
731 this.snackbar = true; 734 this.snackbar = true;
732 this.text = error.response.data.message; 735 this.text = error.response.data.message;
733 }); 736 });
734 }, 737 },
735 deleteImage(imageId, id) { 738 deleteImage(imageId, id) {
736 let deleteImages = { 739 let deleteImages = {
737 galleryId: id, 740 galleryId: id,
738 imageId: imageId 741 imageId: imageId
739 }; 742 };
740 http() 743 http()
741 .put("/deleteImage", deleteImages) 744 .put("/deleteImage", deleteImages)
742 .then(response => { 745 .then(response => {
743 this.snackbar = true; 746 this.snackbar = true;
744 this.text = response.data.message; 747 this.text = response.data.message;
745 this.getGalleryList(); 748 this.getGalleryList();
746 this.close(); 749 this.close();
747 }) 750 })
748 .catch(error => { 751 .catch(error => {
749 console.log(error); 752 console.log(error);
750 }); 753 });
751 }, 754 },
752 activeTab(type) { 755 activeTab(type) {
753 switch (type) { 756 switch (type) {
754 case "existing": 757 case "existing":
755 this.newActive = false; 758 this.newActive = false;
756 this.isActive = true; 759 this.isActive = true;
757 break; 760 break;
758 761
759 default: 762 default:
760 this.newActive = true; 763 this.newActive = true;
761 this.isActive = false; 764 this.isActive = false;
762 break; 765 break;
763 } 766 }
764 }, 767 },
765 close() { 768 close() {
766 this.dialog = false; 769 this.dialog = false;
767 setTimeout(() => { 770 setTimeout(() => {
768 this.editedItem = Object.assign({}, this.defaultItem); 771 this.editedItem = Object.assign({}, this.defaultItem);
769 this.editedIndex = -1; 772 this.editedIndex = -1;
770 }, 300); 773 }, 300);
771 }, 774 },
772 close1() { 775 close1() {
773 this.dialog1 = false; 776 this.dialog1 = false;
774 }, 777 },
775 submit() { 778 submit() {
776 for (let i = 0; i < this.finds.length; i++) { 779 for (let i = 0; i < this.finds.length; i++) {
777 this.addGallery.youTubeLinkUrl.push(this.finds[i].value); 780 this.addGallery.youTubeLinkUrl.push(this.finds[i].value);
778 } 781 }
779 if (this.$refs.form.validate()) { 782 if (this.$refs.form.validate()) {
780 if (this.files) { 783 if (this.files) {
781 var ary = []; 784 var ary = [];
782 var imageData = []; 785 var imageData = [];
783 ary = this.files; 786 ary = this.files;
784 for (let i = 0; i < ary.length; i++) { 787 for (let i = 0; i < ary.length; i++) {
785 const [baseUrl, imageUrl] = ary[i].split(/,/); 788 const [baseUrl, imageUrl] = ary[i].split(/,/);
786 imageData.push(imageUrl); 789 imageData.push(imageUrl);
787 this.addGallery.upload = imageData; 790 this.addGallery.upload = imageData;
788 } 791 }
789 } 792 }
790 if (this.addGallery.youTubeLinkUrl == "") { 793 if (this.addGallery.youTubeLinkUrl == "") {
791 var galleryData = { 794 var galleryData = {
792 classId: this.addGallery.classNum, 795 classId: this.addGallery.classNum,
793 title: this.addGallery.title, 796 title: this.addGallery.title,
794 description: this.addGallery.description, 797 description: this.addGallery.description,
795 upload: this.addGallery.upload 798 upload: this.addGallery.upload
796 }; 799 };
797 // this.loading = true; 800 this.loading = true;
798 http() 801 http()
799 .post("/createGallery", galleryData) 802 .post("/createGallery", galleryData)
800 .then(response => { 803 .then(response => {
801 this.getGalleryList(); 804 this.getGalleryList();
802 this.loading = false; 805 this.loading = false;
803 this.snackbar = true; 806 this.snackbar = true;
804 this.text = response.data.message; 807 this.text = response.data.message;
805 this.clear(); 808 this.clear();
806 this.files = ""; 809 this.files = "";
807 }) 810 })
808 .catch(error => { 811 .catch(error => {
809 this.snackbar = true; 812 this.snackbar = true;
810 this.text = error.response.data.message; 813 this.text = error.response.data.message;
811 this.loading = false; 814 this.loading = false;
812 }); 815 });
813 } else if (this.addGallery.youTubeLinkUrl) { 816 } else if (this.addGallery.youTubeLinkUrl) {
817 this.loading = true;
814 http() 818 http()
815 .post("/createGallery", this.addGallery) 819 .post("/createGallery", this.addGallery)
816 .then(response => { 820 .then(response => {
817 this.getGalleryList(); 821 this.getGalleryList();
818 this.files = []; 822 this.files = [];
819 this.loading = false; 823 this.loading = false;
820 this.snackbar = true; 824 this.snackbar = true;
821 this.text = response.data.message; 825 this.text = response.data.message;
822 this.clear(); 826 this.clear();
823 this.files = ""; 827 this.files = "";
824 }) 828 })
825 .catch(error => { 829 .catch(error => {
826 if ((this.snackbar = true)) { 830 this.snackbar = true;
827 this.text = error.response.data.message; 831 this.text = error.response.data.message;
828 } 832 this.loading = false;
829 }); 833 });
830 } 834 }
831 } 835 }
832 }, 836 },
833 clear() { 837 clear() {
834 this.$refs.form.reset(); 838 this.$refs.form.reset();
835 this.files = []; 839 this.files = [];
836 }, 840 },
837 save() { 841 save() {
838 this.editedItem.gelleryId = this.editedItem._id; 842 this.editedItem.gelleryId = this.editedItem._id;
839 var linkUrl = []; 843 var linkUrl = [];
840 for (let i = 0; i < this.updates.length; i++) { 844 for (let i = 0; i < this.updates.length; i++) {
841 linkUrl.push(this.updates[i].youTubeLink); 845 linkUrl.push(this.updates[i].youTubeLink);
842 } 846 }
843 console.log("uploadeditFilesImage--BBBBBBBBB", this.editFiles); 847 console.log("uploadeditFilesImage--BBBBBBBBB", this.editFiles);
844 if (this.editFiles) { 848 if (this.editFiles) {
845 var ary = []; 849 var ary = [];
846 var imageData = []; 850 var imageData = [];
847 ary = this.editFiles; 851 ary = this.editFiles;
848 for (let i = 0; i < ary.length; i++) { 852 for (let i = 0; i < ary.length; i++) {
849 const [baseUrl, imageUrl] = ary[i].split(/,/); 853 const [baseUrl, imageUrl] = ary[i].split(/,/);
850 imageData.push(imageUrl); 854 imageData.push(imageUrl);
851 this.editedItem.editFiles = imageData; 855 this.editedItem.editFiles = imageData;
852 } 856 }
853 } 857 }
854 if (linkUrl != "") { 858 if (linkUrl != "") {
855 var updateData = { 859 var updateData = {
856 galleryId: this.editedItem._id, 860 galleryId: this.editedItem._id,
857 description: this.editedItem.description, 861 description: this.editedItem.description,
858 classId: this.editedItem.classNum, 862 classId: this.editedItem.classNum,
859 uploadImage: this.editedItem.editFiles, 863 uploadImage: this.editedItem.editFiles,
860 title: this.editedItem.title, 864 title: this.editedItem.title,
861 updateYouTubeLinkUrl: linkUrl 865 updateYouTubeLinkUrl: linkUrl
862 }; 866 };
863 } else if (linkUrl == "") { 867 } else if (linkUrl == "") {
864 var updateData = { 868 var updateData = {
865 galleryId: this.editedItem._id, 869 galleryId: this.editedItem._id,
866 description: this.editedItem.description, 870 description: this.editedItem.description,
867 classId: this.editedItem.classNum, 871 classId: this.editedItem.classNum,
868 uploadImage: this.editedItem.editFiles, 872 uploadImage: this.editedItem.editFiles,
869 title: this.editedItem.title 873 title: this.editedItem.title
870 }; 874 };
871 } 875 }
872 this.editGalleryLoading = true; 876 this.editGalleryLoading = true;
873 http() 877 http()
874 .put("/updateGallery", updateData) 878 .put("/updateGallery", updateData)
875 .then(response => { 879 .then(response => {
876 this.getGalleryList(); 880 this.getGalleryList();
877 this.close(); 881 this.close();
878 this.snackbar = true; 882 this.snackbar = true;
879 this.text = response.data.message; 883 this.text = response.data.message;
880 this.editGalleryLoading = false; 884 this.editGalleryLoading = false;
881 (this.editImageName = ""), (this.editFiles = []); 885 (this.editImageName = ""), (this.editFiles = []);
882 }) 886 })
883 .catch(error => { 887 .catch(error => {
884 this.editGalleryLoading = false; 888 this.editGalleryLoading = false;
885 this.snackbar = true; 889 this.snackbar = true;
886 this.text = error.response.data.message; 890 this.text = error.response.data.message;
887 }); 891 });
888 }, 892 },
889 getAllClasses() { 893 getAllClasses() {
890 http() 894 http()
891 .get("/getClassesList", { 895 .get("/getClassesList", {
892 headers: { Authorization: "Bearer " + this.token } 896 headers: { Authorization: "Bearer " + this.token }
893 }) 897 })
894 .then(response => { 898 .then(response => {
895 this.addclass = response.data.data; 899 this.addclass = response.data.data;
896 }) 900 })
897 .catch(err => { 901 .catch(err => {
898 // console.log("err====>", err); 902 // console.log("err====>", err);
899 }); 903 });
900 }, 904 },
901 addFind: function() { 905 addFind: function() {
902 this.finds.push({ value: "" }); 906 this.finds.push({ value: "" });
903 }, 907 },
904 update: function() { 908 update: function() {
905 this.updates.push({ youTubeLink: "" }); 909 this.updates.push({ youTubeLink: "" });
906 }, 910 },
907 deleteFind: function(index) { 911 deleteFind: function(index) {
908 this.finds.splice(index, 1); 912 this.finds.splice(index, 1);
909 if (index === 0) this.addFind(); 913 if (index === 0) this.addFind();
910 }, 914 },
911 deleteUpdate: function(index) { 915 deleteUpdate: function(index) {
912 this.updates.splice(index, 1); 916 this.updates.splice(index, 1);
913 if (index === 0) this.update(); 917 if (index === 0) this.update();
914 }, 918 },
915 deleteUrl: function(index, youTubelinkId, id) { 919 deleteUrl: function(index, youTubelinkId, id) {
916 this.editedItem.youTubeLinkUrl.splice(index, 1); 920 this.editedItem.youTubeLinkUrl.splice(index, 1);
917 if (index === 0) this.update(); 921 if (index === 0) this.update();
918 let deleteYouTubeUrl = { 922 let deleteYouTubeUrl = {
919 galleryId: id, 923 galleryId: id,
920 youTubeId: youTubelinkId 924 youTubeId: youTubelinkId
921 }; 925 };
922 http() 926 http()
923 .put("/deleteYoutubeLink", deleteYouTubeUrl) 927 .put("/deleteYoutubeLink", deleteYouTubeUrl)
924 .then(response => { 928 .then(response => {
925 this.snackbar = true; 929 this.snackbar = true;
926 this.text = response.data.message; 930 this.text = response.data.message;
927 this.getGalleryList(); 931 this.getGalleryList();
928 this.close(); 932 this.close();
929 }) 933 })
930 .catch(error => { 934 .catch(error => {
931 console.log(error); 935 console.log(error);
932 }); 936 });
933 } 937 }
934 }, 938 },
935 mounted() { 939 mounted() {
936 this.token = this.$store.state.token; 940 this.token = this.$store.state.token;
937 this.getAllClasses(); 941 this.getAllClasses();
938 this.getGalleryList(); 942 this.getGalleryList();
939 // console.log("index",index); 943 // console.log("index",index);
940 }, 944 },
941 created() { 945 created() {
942 this.$root.$on("app:search", search => { 946 this.$root.$on("app:search", search => {
943 this.search = search; 947 this.search = search;
944 }); 948 });
945 }, 949 },
946 beforeDestroy() { 950 beforeDestroy() {
947 // dont forget to remove the listener 951 // dont forget to remove the listener
948 this.$root.$off("app:search"); 952 this.$root.$off("app:search");
949 } 953 }
950 }; 954 };
951 </script> 955 </script>
952 <style scoped> 956 <style scoped>
953 #td { 957 #td {
954 border: 1px solid #dddddd; 958 border: 1px solid #dddddd;
955 text-align: left; 959 text-align: left;
956 padding: 2px 0px; 960 padding: 2px 0px;
957 max-width: 200px; 961 max-width: 200px;
958 } 962 }
959 .active { 963 .active {
960 background-color: gray; 964 background-color: gray;
961 color: white !important; 965 color: white !important;
962 } 966 }
963 .activebtn { 967 .activebtn {
964 color: black !important; 968 color: black !important;
965 } 969 }
966 </style> 970 </style>