viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 8bb178441aee7abd2e62c4cb0282bf0dca89c8f0

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

implemnt api in social media and gallery

Showing 12 changed files with 2311 additions and 133 deletions   Show diff stats
... ... @@ -4,14 +4,16 @@
4 4 <head>
5 5 <meta charset="utf-8">
6 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7   - <!-- <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial+Icons' rel="stylesheet"> -->
8 7 <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet">
9   - <!-- <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts-en.min.js"></script> -->
10 8 <title>School Management</title>
11 9 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">
12 10 <meta name="description" content="School Management">
13   - <!-- <meta name="keywords" content="admin, dashboard, webapp, template, responsive, material, bootstrap, crm, uikit, framework, backend, app, widgets, premium, file manamger, mail, vue, vuetify, echarts"> -->
14 11 <link href="./static/css/custom.css" rel="stylesheet" />
  12 + <style>
  13 + [v-cloak] {
  14 + display: none;
  15 + }
  16 + </style>
15 17 </head>
16 18  
17 19 <body>
... ...
package-lock.json
Diff comments   View file @8bb1784
... ... @@ -3691,6 +3691,29 @@
3691 3691 "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
3692 3692 "dev": true
3693 3693 },
  3694 + "dayspan": {
  3695 + "version": "0.12.5",
  3696 + "resolved": "https://registry.npmjs.org/dayspan/-/dayspan-0.12.5.tgz",
  3697 + "integrity": "sha512-/IkvULBqTRJjUnmKcu3nAGpo04mIszC+ua1ItZadNRxfMKzplmxEljHytOpHdOyl6GF3V7de8oxgep7emeivNA=="
  3698 + },
  3699 + "dayspan-vuetify": {
  3700 + "version": "0.4.0",
  3701 + "resolved": "https://registry.npmjs.org/dayspan-vuetify/-/dayspan-vuetify-0.4.0.tgz",
  3702 + "integrity": "sha512-YoCFu1hZsvklDQXm8IBRvY00v/B06F/h6yS0k4GALEqrzlqY0EKF4UUdjlr5xMRoKuw7NTA//4V4twOQ8H3D/A==",
  3703 + "requires": {
  3704 + "dayspan": "^0.12.2",
  3705 + "material-design-icons-iconfont": "^3.0.3",
  3706 + "vue": "^2.3.3",
  3707 + "vuetify": "^1.3.9"
  3708 + },
  3709 + "dependencies": {
  3710 + "vuetify": {
  3711 + "version": "1.5.18",
  3712 + "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.18.tgz",
  3713 + "integrity": "sha512-TLtVYBlajKk+I99rUvQ7c/qlSJ3gqZZKkBaVWXy5bIDFzUyIChIIcaZM7k+J/JumxQYJqnJ9H24rAjddemWalQ=="
  3714 + }
  3715 + }
  3716 + },
3694 3717 "de-indent": {
3695 3718 "version": "1.0.2",
3696 3719 "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
... ... @@ -8927,6 +8950,11 @@
8927 8950 "object-visit": "^1.0.0"
8928 8951 }
8929 8952 },
  8953 + "material-design-icons-iconfont": {
  8954 + "version": "3.0.3",
  8955 + "resolved": "https://registry.npmjs.org/material-design-icons-iconfont/-/material-design-icons-iconfont-3.0.3.tgz",
  8956 + "integrity": "sha1-FUoQhAR9Ticjf6f1o34Qdc7qbfI="
  8957 + },
8930 8958 "math-expression-evaluator": {
8931 8959 "version": "1.2.17",
8932 8960 "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
... ...
... ... @@ -15,6 +15,7 @@
15 15 },
16 16 "dependencies": {
17 17 "axios": "^0.18.0",
  18 + "dayspan-vuetify": "^0.4.0",
18 19 "font-awesome": "^4.7.0",
19 20 "lodash.truncate": "^4.4.2",
20 21 "moment": "^2.24.0",
... ...
src/Services/http.js
Diff comments   View file @8bb1784
... ... @@ -3,7 +3,7 @@ import store from &#39;@/store/store&#39;
3 3  
4 4 export default () => {
5 5 return axios.create({
6   - // baseURL:'http://192.168.2.221:3002/v1',
  6 + // baseURL: 'http://192.168.2.221:3002/v1',
7 7 baseURL: 'http://13.234.251.173:8001/v1',
8 8 headers: {
9 9 Authorization: `Bearer ${store.state.token}`
... ...
1 1 const Menu = [
2 2 // { header: 'Apps' },
  3 + // {
  4 + // title: 'Dashboard',
  5 + // // group: 'apps',
  6 + // name: 'Dashboard',
  7 + // icon: 'dashboard',
  8 + // },
3 9 {
4 10 title: 'Class',
5 11 // group: 'apps',
... ... @@ -38,12 +44,12 @@ const Menu = [
38 44 {
39 45 title: 'Notice Board',
40 46 name: 'NoticeBoard',
41   - icon: 'contactless',
  47 + icon: 'notifications',
42 48 },
43 49 {
44 50 title: 'News',
45 51 name: 'news',
46   - icon: 'notification_important',
  52 + icon: 'announcement',
47 53 },
48 54 // {
49 55 // title: 'Reminder',
... ... @@ -60,6 +66,16 @@ const Menu = [
60 66 name: 'notification',
61 67 icon: 'notifications_active',
62 68 },
  69 + {
  70 + title: 'Social Media',
  71 + name: 'SocialMedia',
  72 + icon: 'cloud_upload',
  73 + },
  74 + {
  75 + title: 'Gallery',
  76 + name: 'Gallery',
  77 + icon: 'photo',
  78 + },
63 79 ];
64 80  
65 81  
... ...
... ... @@ -4,40 +4,49 @@ import Vue from &#39;vue&#39;;
4 4 import App from './App';
5 5 import Vuetify from 'vuetify';
6 6 import router from './router';
7   -import 'font-awesome/css/font-awesome.css';
  7 +import 'font-awesome/css/font-awesome.css';
8 8 import './theme/default.styl';
9 9 import VeeValidate from 'vee-validate';
10 10 import colors from 'vuetify/es5/util/colors';
11 11 import Truncate from 'lodash.truncate';
  12 +import DaySpanVuetify from 'dayspan-vuetify'
  13 +
12 14 Vue.config.productionTip = false;
13 15 // import axios from 'axios';
14 16 // import VueAxios from 'vue-axios';
15 17 import store from '@/store/store'
  18 +import 'vuetify/dist/vuetify.css'
  19 +import 'material-design-icons-iconfont/dist/material-design-icons.css'
  20 +import 'dayspan-vuetify/dist/lib/dayspan-vuetify.min.css'
16 21  
17 22 // Helpers
18 23 // Global filters
19 24 // Vue.use(VueAxios, axios);
20 25 Vue.filter('truncate', Truncate);
21 26 Vue.use(VeeValidate, { fieldsBagName: 'formFields' });
  27 +Vue.use(DaySpanVuetify, {
  28 + methods: {
  29 + getDefaultEventColor: () => '#1976d2'
  30 + }
  31 +});
22 32 Vue.use(Vuetify, {
23   - // theme: {
24   - // primary: colors.indigo.base, // #E53935
25   - // secondary: colors.indigo.lighten4, // #FFCDD2
26   - // accent: colors.indigo.base // #3F51B5
27   - // },
28   - options: {
29   - themeVariations: ['primary', 'secondary', 'accent'],
30   - extra: {
31   - mainToolbar: {
32   - color: 'primary',
33   - },
34   - sideToolbar: {
35   - },
36   - sideNav: 'primary',
37   - mainNav: 'primary lighten-1',
38   - bodyBg: '',
  33 + // theme: {
  34 + // primary: colors.indigo.base, // #E53935
  35 + // secondary: colors.indigo.lighten4, // #FFCDD2
  36 + // accent: colors.indigo.base // #3F51B5
  37 + // },
  38 + options: {
  39 + themeVariations: ['primary', 'secondary', 'accent'],
  40 + extra: {
  41 + mainToolbar: {
  42 + color: 'primary',
  43 + },
  44 + sideToolbar: {},
  45 + sideNav: 'primary',
  46 + mainNav: 'primary lighten-1',
  47 + bodyBg: '',
  48 + }
39 49 }
40   - }
41 50 });
42 51 // Bootstrap application components
43 52  
... ... @@ -45,9 +54,9 @@ Vue.use(Vuetify, {
45 54  
46 55 /* eslint-disable no-new */
47 56 new Vue({
48   - el: '#app',
49   - router,
50   - store,
51   - components: { App },
52   - template: '<App/>'
53   -});
  57 + el: '#app',
  58 + router,
  59 + store,
  60 + components: { App },
  61 + template: '<App/>'
  62 +});
54 63 \ No newline at end of file
... ...
src/pages/Authentication/changepassword.vue
Diff comments   View file @8bb1784
1 1 <template>
2 2 <v-app id="login">
3   - <app-toolbar class="app--toolbar"></app-toolbar>
4   - <v-container fluid fill-height>
5   - <v-layout>
6   - <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
  3 + <app-toolbar class="app--toolbar"></app-toolbar>
  4 + <v-container fluid fill-height>
  5 + <v-layout>
  6 + <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
7 7 <v-toolbar class="fixcolors mt-5" dark>
8   - <v-spacer></v-spacer>
9   - <v-toolbar-title>Technology Succes</v-toolbar-title>
10   - <v-spacer></v-spacer>
11   -
  8 + <v-spacer></v-spacer>
  9 + <v-toolbar-title>Technology Succes</v-toolbar-title>
  10 + <v-spacer></v-spacer>
12 11 </v-toolbar>
13   - <v-card class="elevation-1 pa-3" id="form">
14   - <v-card-text>
15   - <v-flex xs12 sm8 md8 lg8 offset-sm2>
16   - <v-form class="mt-3" >
17   - <v-text-field
18   - :rules="[rules.required]"
19   - v-model="adminChangePasswordcredentials.oldPassword"
20   - label="Old Password">
21   - </v-text-field>
22   - <v-text-field
23   - v-model="adminChangePasswordcredentials.newPassword"
24   - :rules="[rules.required]"
25   -
26   - label="New Password"
27   - ></v-text-field>
28   - </v-form></v-flex>
29   - </v-card-text>
30   - <v-card-actions>
31   -
32   - <v-flex text-xs-center>
33   - <v-btn class="mt-3"
34   - round
35   - color="black"
36   - dark large
37   - :loading="loading"
38   - @click="reset">Reset Password</v-btn></v-flex>
39   - </v-card-actions>
40   - <v-snackbar
41   - :timeout="timeout"
42   - :top="y === 'top'"
43   - :right="x === 'right'"
44   - :vertical="mode === 'vertical'"
45   - v-model="snackbar"
46   - :color= color
47   - >
48   - {{ text }}
49   - </v-snackbar>
50   - </v-card>
51   - </v-flex>
52   - </v-layout>
53   - </v-container>
  12 + <v-card class="elevation-1 pa-3" id="form">
  13 + <v-card-text>
  14 + <v-flex xs12 sm8 md8 lg8 offset-sm2>
  15 + <v-form class="mt-3">
  16 + <v-text-field
  17 + :rules="[rules.required]"
  18 + v-model="adminChangePasswordcredentials.oldPassword"
  19 + label="Old Password"
  20 + ></v-text-field>
  21 + <v-text-field
  22 + v-model="adminChangePasswordcredentials.newPassword"
  23 + :rules="[rules.required]"
  24 + label="New Password"
  25 + ></v-text-field>
  26 + </v-form>
  27 + </v-flex>
  28 + </v-card-text>
  29 + <v-card-actions>
  30 + <v-flex text-xs-center>
  31 + <v-btn
  32 + class="mt-3"
  33 + round
  34 + color="black"
  35 + dark
  36 + large
  37 + :loading="loading"
  38 + @click="reset"
  39 + >Reset Password</v-btn>
  40 + </v-flex>
  41 + </v-card-actions>
  42 + <v-snackbar
  43 + :timeout="timeout"
  44 + :top="y === 'top'"
  45 + :right="x === 'right'"
  46 + :vertical="mode === 'vertical'"
  47 + v-model="snackbar"
  48 + :color="color"
  49 + >{{ text }}</v-snackbar>
  50 + </v-card>
  51 + </v-flex>
  52 + </v-layout>
  53 + </v-container>
54 54 </v-app>
55 55 </template>
56 56 <script>
57   -import http from '@/Services/http.js';
58   -import AppToolbar from '@/components/pageHeader/AppToolbar';
  57 +import http from "@/Services/http.js";
  58 +import AppToolbar from "@/components/pageHeader/AppToolbar";
59 59  
60 60 export default {
61 61 components: {
62   - AppToolbar,
  62 + AppToolbar
63 63 },
64   - data () {
  64 + data() {
65 65 return {
66 66 snackbar: false,
67   - y: 'top',
68   - x: 'right',
69   - mode: '',
  67 + y: "top",
  68 + x: "right",
  69 + mode: "",
70 70 timeout: 4000,
71   - text: '',
  71 + text: "",
72 72 adminChangePasswordcredentials: {},
73 73 e1: true,
74 74 e2: true,
75 75 e3: true,
76 76 loading: false,
77 77 valid: false,
78   - text: 'Password Changed',
79   - currentPassword: '',
80   - newPassword: '',
81   - confirmPassword: '',
  78 + text: "Password Changed",
  79 + currentPassword: "",
  80 + newPassword: "",
  81 + confirmPassword: "",
82 82 rules: {
83   - required: value => !!value || 'This password field is Required.',
  83 + required: value => !!value || "This password field is Required."
84 84 // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
85   - },
  85 + }
86 86 };
87 87 },
88 88 methods: {
89   - reset () {
  89 + reset() {
90 90 var token = this.$store.state.token;
91 91 var userdata = {
92   - "oldPassword":this.adminChangePasswordcredentials.oldPassword,
93   - "newPassword":this.adminChangePasswordcredentials.newPassword,
94   - }
95   - http().put('/schoolChangePassword',userdata,{headers: { Authorization: 'Bearer '+ token }})
  92 + oldPassword: this.adminChangePasswordcredentials.oldPassword,
  93 + newPassword: this.adminChangePasswordcredentials.newPassword
  94 + };
  95 + http()
  96 + .put("/schoolChangePassword", userdata, {
  97 + headers: { Authorization: "Bearer " + token }
  98 + })
96 99 .then(response => {
97 100 this.loading = true;
98   - if(this.snackbar=true){
99   - this.text= "Successfully changed password !!"
100   - console.log("snackbar",response.data.message)
101   - }
102   - setTimeout(() => {
103   - this.$router.push('/dashboard');
104   - }, 2000);
105   - }).catch(err => {
  101 + if ((this.snackbar = true)) {
  102 + this.text = "Successfully changed password !!";
  103 + console.log("snackbar", response.data.message);
  104 + }
  105 + setTimeout(() => {
  106 + this.$router.push("/dashboard");
  107 + }, 2000);
  108 + })
  109 + .catch(err => {
106 110 // console.log("err====>",err);
107   - this.text="User Not Found or Incorrect currentPassword"
108   - this.snackbar= true;
109   - this.loading = false;
110   - })
  111 + this.text = "User Not Found or Incorrect currentPassword";
  112 + this.snackbar = true;
  113 + this.loading = false;
  114 + });
111 115 }
112 116 },
113   - computed:{
114   - color(){
115   - return this.loading ? 'success' : 'error'
  117 + computed: {
  118 + color() {
  119 + return this.loading ? "success" : "error";
  120 + }
116 121 }
117   - }
118 122 };
119 123 </script>
120 124 <style scoped>
121   -img{
122   -position:absolute;
123   -top:13px;
124   -left:50px;
  125 +img {
  126 + position: absolute;
  127 + top: 13px;
  128 + left: 50px;
125 129 }
126 130 .v-btn--large {
127   - padding: 0px 74px;
  131 + padding: 0px 74px;
128 132 }
129   -@media screen and (max-width: 769px){
130   -.v-btn--large {
  133 +@media screen and (max-width: 769px) {
  134 + .v-btn--large {
131 135 font-size: 14px;
132 136 height: 44px;
133 137 padding: 0 32px;
134   -
135   -}
  138 + }
136 139 }
137 140 </style>
... ...
src/pages/Dashboard/dashboard.vue
Diff comments   View file @8bb1784
... ... @@ -0,0 +1,372 @@
  1 +<!--<template>
  2 + <v-app >
  3 + <v-toolbar class="fixcolors" fixed app>
  4 + <v-toolbar-title class="ml-0 pl-3">
  5 + <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
  6 + </v-toolbar-title>
  7 + <v-spacer></v-spacer>
  8 + <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
  9 + <v-btn icon large flat slot="activator">
  10 + <v-avatar size="40px">
  11 + <img src="/static/icon/user.png" />
  12 + </v-avatar>
  13 + </v-btn>
  14 + <v-list class="pa-0">
  15 + <v-list-tile
  16 + v-for="(item,index) in items"
  17 + :to="!item.href ? { name: item.name } : null"
  18 + :href="item.href"
  19 + @click="item.click"
  20 + ripple="ripple"
  21 + :disabled="item.disabled"
  22 + :target="item.target"
  23 + rel="noopener"
  24 + :key="index"
  25 + >
  26 + <v-list-tile-action v-if="item.icon">
  27 + <v-icon>{{ item.icon }}</v-icon>
  28 + </v-list-tile-action>
  29 + <v-list-tile-content>
  30 + <v-list-tile-title>{{ item.title }}</v-list-tile-title>
  31 + </v-list-tile-content>
  32 + </v-list-tile>
  33 + </v-list>
  34 + </v-menu>
  35 + </v-toolbar>
  36 + <ds-calendar-app ref="appRoot" :calendar="calendar" :read-only="readOnly" @change="saveState">
  37 + <template slot="title">DaySpan</template>
  38 +
  39 + <template slot="menuRight">
  40 + <v-btn icon large href="https://github.com/ClickerMonkey/dayspan-vuetify" target="_blank">
  41 + <v-avatar size="32px" tile>
  42 + <img src="https://simpleicons.org/icons/github.svg" alt="Github" />
  43 + </v-avatar>
  44 + </v-btn>
  45 + </template>
  46 +
  47 + <template slot="eventPopover" slot-scope="slotData">
  48 + <ds-calendar-event-popover v-bind="slotData" :read-only="readOnly" @finish="saveState"></ds-calendar-event-popover>
  49 + </template>
  50 +
  51 + <template slot="eventCreatePopover" slot-scope="{placeholder, calendar, close}">
  52 + <ds-calendar-event-create-popover
  53 + @create-edit="$refs.app.editPlaceholder"
  54 + @create-popover-closed="saveState"
  55 + ></ds-calendar-event-create-popover>
  56 + </template>
  57 +
  58 + <template slot="eventTimeTitle" slot-scope="{calendarEvent, details}">
  59 + <div>
  60 + <v-icon
  61 + class="ds-ev-icon"
  62 + v-if="details.icon"
  63 + size="14"
  64 + :style="{color: details.forecolor}"
  65 + >{{ details.icon }}</v-icon>
  66 + <strong class="ds-ev-title">{{ details.title }}</strong>
  67 + </div>
  68 + <div class="ds-ev-description">{{ getCalendarTime( calendarEvent ) }}</div>
  69 + </template>
  70 +
  71 + <template slot="drawerBottom">
  72 + <div class="pa-3">
  73 + <v-checkbox label="Read Only?" v-model="readOnly"></v-checkbox>
  74 + </div>
  75 + </template>
  76 + </ds-calendar-app>
  77 + <div class="loader" v-if="showLoader">
  78 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  79 + </div>
  80 + </v-app>
  81 +</template>
  82 +
  83 +<script>
  84 +import http from "@/Services/http.js";
  85 +import Util from "@/util";
  86 +import { Calendar, Weekday, Month } from "dayspan";
  87 +import Vue from "vue";
  88 +
  89 +export default {
  90 + data: () => ({
  91 + showLoader: false,
  92 + storeKey: "dayspanState",
  93 + calendar: Calendar.months(),
  94 + readOnly: true,
  95 + defaultEvents: [
  96 + {
  97 + data: {
  98 + title: "Weekly Meeting",
  99 + color: "#3F51B5"
  100 + },
  101 + schedule: {
  102 + dayOfWeek: [Weekday.MONDAY],
  103 + times: [9],
  104 + duration: 30,
  105 + durationUnit: "minutes"
  106 + }
  107 + },
  108 + {
  109 + data: {
  110 + title: "First Weekend",
  111 + color: "#4CAF50"
  112 + },
  113 + schedule: {
  114 + weekspanOfMonth: [0],
  115 + dayOfWeek: [Weekday.FRIDAY],
  116 + duration: 3,
  117 + durationUnit: "days"
  118 + }
  119 + },
  120 + {
  121 + data: {
  122 + title: "End of Month",
  123 + color: "#000000"
  124 + },
  125 + schedule: {
  126 + lastDayOfMonth: [1],
  127 + duration: 1,
  128 + durationUnit: "hours"
  129 + }
  130 + },
  131 + {
  132 + data: {
  133 + title: "Mother's Day",
  134 + color: "#2196F3",
  135 + calendar: "US Holidays"
  136 + },
  137 + schedule: {
  138 + month: [Month.MAY],
  139 + dayOfWeek: [Weekday.SUNDAY],
  140 + weekspanOfMonth: [1]
  141 + }
  142 + },
  143 + {
  144 + data: {
  145 + title: "New Year's Day",
  146 + color: "#2196F3",
  147 + calendar: "US Holidays"
  148 + },
  149 + schedule: {
  150 + month: [Month.JANUARY],
  151 + dayOfMonth: [1]
  152 + }
  153 + },
  154 + {
  155 + data: {
  156 + title: "Inauguration Day",
  157 + color: "#2196F3",
  158 + calendar: "US Holidays"
  159 + },
  160 + schedule: {
  161 + month: [Month.JANUARY],
  162 + dayOfMonth: [20]
  163 + }
  164 + },
  165 + {
  166 + data: {
  167 + title: "Martin Luther King, Jr. Day",
  168 + color: "#2196F3",
  169 + calendar: "US Holidays"
  170 + },
  171 + schedule: {
  172 + month: [Month.JANUARY],
  173 + dayOfWeek: [Weekday.MONDAY],
  174 + weekspanOfMonth: [2]
  175 + }
  176 + },
  177 + {
  178 + data: {
  179 + title: "George Washington's Birthday",
  180 + color: "#2196F3",
  181 + calendar: "US Holidays"
  182 + },
  183 + schedule: {
  184 + month: [Month.FEBRUARY],
  185 + dayOfWeek: [Weekday.MONDAY],
  186 + weekspanOfMonth: [2]
  187 + }
  188 + },
  189 + {
  190 + data: {
  191 + title: "Memorial Day",
  192 + color: "#2196F3",
  193 + calendar: "US Holidays"
  194 + },
  195 + schedule: {
  196 + month: [Month.MAY],
  197 + dayOfWeek: [Weekday.MONDAY],
  198 + lastWeekspanOfMonth: [0]
  199 + }
  200 + },
  201 + {
  202 + data: {
  203 + title: "Independence Day",
  204 + color: "#2196F3",
  205 + calendar: "US Holidays"
  206 + },
  207 + schedule: {
  208 + month: [Month.JULY],
  209 + dayOfMonth: [4]
  210 + }
  211 + },
  212 + {
  213 + data: {
  214 + title: "Labor Day",
  215 + color: "#2196F3",
  216 + calendar: "US Holidays"
  217 + },
  218 + schedule:
  219 + <template slot="menuRight">
  220 + <v-btn icon large href="https://github.com/ClickerMonkey/dayspan-vuetify" target="_blank">
  221 + <v-avatar size="32px" tile>
  222 + <img src="https://simpleicons.org/icons/github.svg" alt="Github" />
  223 + </v-avatar>
  224 + </v-btn>
  225 + </template> {
  226 + month: [Month.SEPTEMBER],
  227 + dayOfWeek: [Weekday.MONDAY],
  228 + lastWeekspanOfMonth: [0]
  229 + }
  230 + },
  231 + {
  232 + data: {
  233 + title: "Columbus Day",
  234 + color: "#2196F3",
  235 + calendar: "US Holidays"
  236 + },
  237 + schedule: {
  238 + month: [Month.OCTOBER],
  239 + dayOfWeek: [Weekday.MONDAY],
  240 + weekspanOfMonth: [1]
  241 + }
  242 + },
  243 + {
  244 + data: {
  245 + title: "Veterans Day",
  246 + color: "#2196F3",
  247 + calendar: "US Holidays"
  248 + },
  249 + schedule: {
  250 + month: [Month.NOVEMBER],
  251 + dayOfMonth: [11]
  252 + }
  253 + },
  254 + {
  255 + data: {
  256 + title: "Thanksgiving Day",
  257 + color: "#2196F3",
  258 + calendar: "US Holidays"
  259 + },
  260 + schedule: {
  261 + month: [Month.NOVEMBER],
  262 + dayOfWeek: [Weekday.THURSDAY],
  263 + weekspanOfMonth: [3]
  264 + }
  265 + },
  266 + {
  267 + data: {
  268 + title: "Christmas Day",
  269 + color: "#2196F3",
  270 + calendar: "US Holidays"
  271 + },
  272 + schedule: {
  273 + month: [Month.DECEMBER],
  274 + dayOfMonth: [25]
  275 + }
  276 + }
  277 + ],
  278 + items: [
  279 + {
  280 + href: "/changepassword",
  281 + title: "Change Password",
  282 + click: e => {
  283 + console.log(e);
  284 + }
  285 + },
  286 + {
  287 + href: "#",
  288 + title: "Logout",
  289 + click: e => {
  290 + window.getApp.$emit("APP_LOGOUT");
  291 + }
  292 + }
  293 + ]
  294 + }),
  295 + methods: {
  296 + handleDrawerToggle() {
  297 + window.getApp.$emit("APP_DRAWER_TOGGLED");
  298 + },
  299 + handleFullScreen() {
  300 + Util.toggleFullScreen();
  301 + },
  302 + // getCalendarTime(calendarEvent) {
  303 + // let sa = calendarEvent.start.format("a");
  304 + // let ea = calendarEvent.end.format("a");
  305 + // let sh = calendarEvent.start.format("h");
  306 + // let eh = calendarEvent.end.format("h");
  307 +
  308 + // if (calendarEvent.start.minute !== 0) {
  309 + // sh += calendarEvent.start.format(":mm");
  310 + // }
  311 +
  312 + // if (calendarEvent.end.minute !== 0) {
  313 + // eh += calendarEvent.end.format(":mm");
  314 + // }
  315 +
  316 + // return sa === ea ? sh + " - " + eh + ea : sh + sa + " - " + eh + ea;
  317 + // },
  318 +
  319 + // saveState() {
  320 + // let state = this.calendar.toInput(true);
  321 + // let json = JSON.stringify(state);
  322 +
  323 + // localStorage.setItem(this.storeKey, json);
  324 + // },
  325 +
  326 + loadState() {
  327 + let state = {};
  328 +
  329 + try {
  330 + let savedState = JSON.parse(localStorage.getItem(this.storeKey));
  331 +
  332 + if (savedState) {
  333 + state = savedState;
  334 + state.preferToday = false;
  335 + }
  336 + } catch (e) {
  337 + // eslint-disable-next-line
  338 + console.log(e);
  339 + }
  340 +
  341 + if (!state.events || !state.events.length) {
  342 + state.events = this.defaultEvents;
  343 + }
  344 +
  345 + state.events.forEach(ev => {
  346 + let defaults = this.$dayspan.getDefaultEventDetails();
  347 +
  348 + ev.data = Vue.util.extend(defaults, ev.data);
  349 + });
  350 +
  351 + this.$refs.appRoot.setState(state);
  352 + }
  353 + },
  354 + computed: {
  355 + toolbarColor() {
  356 + return this.$vuetify.options.extra.mainNav;
  357 + }
  358 + },
  359 + mounted() {
  360 + window.appRoot = this.$refs.appRoot;
  361 +
  362 + this.loadState();
  363 + }
  364 +};
  365 +</script>
  366 +
  367 +<style>
  368 +.ds-expand {
  369 + padding: 0 !important;
  370 +}
  371 +</style>
  372 +-->
... ...
src/pages/Gallery/gallery.vue
Diff comments   View file @8bb1784
... ... @@ -0,0 +1,979 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-toolbar class="fixcolors" fixed app>
  4 + <v-toolbar-title class="ml-0 pl-3">
  5 + <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
  6 + </v-toolbar-title>
  7 + <!-- ****** SEARCH ALL EXISTING GALLERY ****** -->
  8 + <v-flex xs7 sm3 class="userSearch">
  9 + <v-text-field
  10 + flat
  11 + append-icon="search"
  12 + label="Find your gallery"
  13 + v-model="search"
  14 + color="white"
  15 + class="pa-3"
  16 + dark
  17 + ></v-text-field>
  18 + </v-flex>
  19 + <v-spacer></v-spacer>
  20 + <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
  21 + <v-btn icon large flat slot="activator">
  22 + <v-avatar size="40px">
  23 + <img src="/static/icon/user.png" />
  24 + </v-avatar>
  25 + </v-btn>
  26 + <v-list class="pa-0">
  27 + <v-list-tile
  28 + v-for="(item,index) in items"
  29 + :to="!item.href ? { name: item.name } : null"
  30 + :href="item.href"
  31 + @click="item.click"
  32 + ripple="ripple"
  33 + :disabled="item.disabled"
  34 + :target="item.target"
  35 + rel="noopener"
  36 + :key="index"
  37 + >
  38 + <v-list-tile-action v-if="item.icon">
  39 + <v-icon>{{ item.icon }}</v-icon>
  40 + </v-list-tile-action>
  41 + <v-list-tile-content>
  42 + <v-list-tile-title>{{ item.title }}</v-list-tile-title>
  43 + </v-list-tile-content>
  44 + </v-list-tile>
  45 + </v-list>
  46 + </v-menu>
  47 + </v-toolbar>
  48 + <v-tabs grow slider-color="black">
  49 + <v-tab
  50 + ripple
  51 + @click="activeTab('existing')"
  52 + v-bind:class="{ active: isActive }"
  53 + id="tab"
  54 + class="subheading"
  55 + >Existing Gallery</v-tab>
  56 + <v-tab
  57 + ripple
  58 + @click="activeTab('new')"
  59 + v-bind:class="{ active: newActive }"
  60 + id="tab1"
  61 + User
  62 + class="subheading"
  63 + >Add Gallery</v-tab>
  64 +
  65 + <!-- ****** EDITS ALL Gallery DETAILS ****** -->
  66 +
  67 + <v-tab-item>
  68 + <v-snackbar
  69 + :timeout="timeout"
  70 + :top="y === 'top'"
  71 + :right="x === 'right'"
  72 + :vertical="mode === 'vertical'"
  73 + v-model="snackbar"
  74 + color="success"
  75 + >{{ text }}</v-snackbar>
  76 + <v-dialog v-model="dialog" max-width="1000px" scrollable>
  77 + <v-card flat>
  78 + <v-toolbar class="grey lighten-2" flat>
  79 + <v-spacer></v-spacer>
  80 + <v-toolbar-title>
  81 + <h3>Edit Gallery</h3>
  82 + </v-toolbar-title>
  83 + <v-spacer></v-spacer>
  84 + </v-toolbar>
  85 + <v-card-text style="height:600px;">
  86 + <v-form ref="form">
  87 + <v-container fluid>
  88 + <v-layout row>
  89 + <v-flex
  90 + xs12
  91 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  92 + >
  93 + <input
  94 + type="file"
  95 + style="display: none"
  96 + ref="image"
  97 + accept="image/*"
  98 + multiple
  99 + @change="onFilePicked"
  100 + />
  101 + <v-layout justify-center>
  102 + <v-flex
  103 + xs3
  104 + v-for="Image in editedItem.imageUrl"
  105 + :key="Image._id"
  106 + v-if="editedItem.imageUrl"
  107 + class="profile-image-wrapper"
  108 + >
  109 + <img :src="Image" height="160" width="160" alt="Gallery" class="pa-2" />
  110 + <v-icon
  111 + class="red edit-profile-icon"
  112 + dark
  113 + @click="deleteImage(Image._id,editedItem._id)"
  114 + >close</v-icon>
  115 + </v-flex>
  116 + <v-flex v-for="(file, index) in files" :key="index">
  117 + <img :src="file" height="160" width="160" class="pa-2" />
  118 + </v-flex>
  119 + </v-layout>
  120 + <img
  121 + src="/static/icon/user.png"
  122 + v-if="editedItem.imageUrl ==''"
  123 + height="160"
  124 + width="160"
  125 + alt="Gallery"
  126 + />
  127 + </v-flex>
  128 + </v-layout>
  129 + <!-- </v-layout> -->
  130 + <v-layout>
  131 + <v-flex xs12 sm12>
  132 + <v-layout>
  133 + <v-flex xs4 class="pt-4 subheading">
  134 + <label class="right">Title:</label>
  135 + </v-flex>
  136 + <v-flex xs5 class="ml-3">
  137 + <v-text-field
  138 + v-model="editedItem.title"
  139 + placeholder="fill your Title"
  140 + name="name"
  141 + type="text"
  142 + required
  143 + ></v-text-field>
  144 + </v-flex>
  145 + </v-layout>
  146 + </v-flex>
  147 + <v-flex xs12 sm12>
  148 + <v-layout>
  149 + <v-flex xs4 class="pt-4 subheading">
  150 + <label class="right">Description:</label>
  151 + </v-flex>
  152 + <v-flex xs5 class="ml-3">
  153 + <v-text-field
  154 + placeholder="fill your Description"
  155 + v-model="editedItem.description"
  156 + type="text"
  157 + name="email"
  158 + required
  159 + ></v-text-field>
  160 + </v-flex>
  161 + </v-layout>
  162 + </v-flex>
  163 + <v-layout>
  164 + <v-flex xs4 class="pt-4 subheading">
  165 + <label class="right">Select Class:</label>
  166 + </v-flex>
  167 + <v-flex xs5 class="ml-3">
  168 + <v-select
  169 + :items="addclass"
  170 + label="Select Class"
  171 + v-model="editItem.classNum"
  172 + item-text="classNum"
  173 + item-value="_id"
  174 + name="Select Class"
  175 + required
  176 + ></v-select>
  177 + </v-flex>
  178 + </v-layout>
  179 + <v-flex xs12>
  180 + <v-layout>
  181 + <v-flex xs4 class="pt-4 subheading">
  182 + <label class="right">Add New Images:</label>
  183 + </v-flex>
  184 + <v-flex xs5 class="ml-3">
  185 + <v-text-field
  186 + label="Select Image"
  187 + @click="pickFile"
  188 + v-model="imageName"
  189 + append-icon="attach_file"
  190 + multiple
  191 + ></v-text-field>
  192 + </v-flex>
  193 + </v-layout>
  194 + </v-flex>
  195 + </v-layout>
  196 + <v-layout>
  197 + <v-flex xs12 sm8 offset-sm2>
  198 + <v-card-actions>
  199 + <v-btn round dark @click.native="close">Cancel</v-btn>
  200 + <v-spacer></v-spacer>
  201 + <v-btn round dark @click="save">Save</v-btn>
  202 + </v-card-actions>
  203 + </v-flex>
  204 + </v-layout>
  205 + </v-container>
  206 + </v-form>
  207 + </v-card-text>
  208 + </v-card>
  209 + </v-dialog>
  210 +
  211 + <!-- ****** PROFILE VIEW Gallery ****** -->
  212 +
  213 + <v-dialog v-model="dialog1" max-width="800px">
  214 + <v-card>
  215 + <v-toolbar color="grey lighten-2" flat>
  216 + <v-spacer></v-spacer>
  217 + <v-toolbar-title>
  218 + <h3>Gallery</h3>
  219 + </v-toolbar-title>
  220 + <v-spacer></v-spacer>
  221 + <v-icon @click="close1">close</v-icon>
  222 + </v-toolbar>
  223 + <v-flex align-center justify-center layout text-xs-center>
  224 + <v-avatar size="100" v-if="editedItem.imageUrl == ''" class="mt-4 pa-2">
  225 + <img src="/static/icon/user.png" width="240" height="180" />
  226 + </v-avatar>
  227 + <span
  228 + v-for="(image,i) in editedItem.imageUrl"
  229 + :key="i"
  230 + class="mt-4 pa-2"
  231 + v-if="editedItem.imageUrl"
  232 + >
  233 + <img :src="image" alt="Gallery" width="240" height="180" />
  234 + </span>
  235 + </v-flex>
  236 + <v-card-text>
  237 + <v-container grid-list-md>
  238 + <v-layout wrap>
  239 + <v-flex>
  240 + <v-layout>
  241 + <v-flex xs5 sm6>
  242 + <h5 class="right my-1">
  243 + <b>Title:</b>
  244 + </h5>
  245 + </v-flex>
  246 + <v-flex sm6 xs8>
  247 + <h5 class="my-1">{{ editedItem.title }}</h5>
  248 + </v-flex>
  249 + </v-layout>
  250 + <v-layout>
  251 + <v-flex xs5 sm6>
  252 + <h5 class="right my-1">
  253 + <b>Description:</b>
  254 + </h5>
  255 + </v-flex>
  256 + <v-flex sm6 xs8>
  257 + <h5 class="my-1">{{ editedItem.description }}</h5>
  258 + </v-flex>
  259 + </v-layout>
  260 + </v-flex>
  261 + </v-layout>
  262 + </v-container>
  263 + </v-card-text>
  264 + </v-card>
  265 + </v-dialog>
  266 +
  267 + <v-snackbar
  268 + :timeout="timeout"
  269 + :top="y === 'top'"
  270 + :right="x === 'right'"
  271 + :vertical="mode === 'vertical'"
  272 + v-model="snackbar"
  273 + color="success"
  274 + >{{ text }}</v-snackbar>
  275 +
  276 + <!-- ****** EXISTING-USERS Gallery TABLE ****** -->
  277 + <v-data-table
  278 + :headers="headers"
  279 + :items="desserts"
  280 + :pagination.sync="pagination"
  281 + :search="search"
  282 + >
  283 + <template slot="items" slot-scope="props">
  284 + <td class="text-xs-center">{{ props.index}}</td>
  285 + <td id="td" class="text-xs-center">
  286 + <span v-for="(image,_id) in props.item.imageUrl" class="pa-2">
  287 + <img :src="image" alt="newsImage" width="100" height="70" />
  288 + </span>
  289 + </td>
  290 + <td id="td" class="text-xs-center">{{ props.item.title}}</td>
  291 + <td id="td" class="text-xs-center">{{ props.item.description}}</td>
  292 +
  293 + <td class="text-xs-center">
  294 + <span>
  295 + <img
  296 + style="cursor:pointer; width:25px; height:18px; "
  297 + class="mr-5"
  298 + @click="profile(props.item)"
  299 + src="/static/icon/eye1.png"
  300 + />
  301 + <img
  302 + style="cursor:pointer; width:20px; height:18px; "
  303 + class="mr-5"
  304 + @click="editItem(props.item)"
  305 + src="/static/icon/edit1.png"
  306 + />
  307 + <img
  308 + style="cursor:pointer;width:20px; height:20px; "
  309 + class="mr-5"
  310 + @click="deleteItem(props.item)"
  311 + src="/static/icon/delete1.png"
  312 + />
  313 + </span>
  314 + </td>
  315 + </template>
  316 + <v-alert
  317 + slot="no-results"
  318 + :value="true"
  319 + color="error"
  320 + icon="warning"
  321 + >Your search for "{{ search }}" found no results.</v-alert>
  322 + </v-data-table>
  323 + </v-tab-item>
  324 +
  325 + <!-- ****** ADD MULTIPLE Gallery Data ****** -->
  326 +
  327 + <v-tab-item>
  328 + <v-container>
  329 + <v-snackbar
  330 + :timeout="timeout"
  331 + :top="y === 'top'"
  332 + :right="x === 'right'"
  333 + :vertical="mode === 'vertical'"
  334 + v-model="snackbar"
  335 + color="success"
  336 + >{{ text }}</v-snackbar>
  337 + <v-flex xs12 sm12 class="my-4">
  338 + <v-card flat>
  339 + <v-form ref="form" v-model="valid" lazy-validation>
  340 + <v-container fluid>
  341 + <v-layout>
  342 + <v-flex
  343 + xs12
  344 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  345 + >
  346 + <input
  347 + type="file"
  348 + style="display: none"
  349 + ref="image"
  350 + accept="image/*"
  351 + multiple
  352 + @change="onFilePicked"
  353 + />
  354 + <v-layout justify-center>
  355 + <v-flex v-for="(file,index) in files" :key="index" v-if="files">
  356 + <img :src="file" height="160" width="160px;" />
  357 + </v-flex>
  358 + </v-layout>
  359 + <img
  360 + src="/static/icon/user.png"
  361 + v-if="files ==''"
  362 + height="140"
  363 + width="180px;"
  364 + />
  365 + </v-flex>
  366 + </v-layout>
  367 + <v-flex xs12>
  368 + <v-layout>
  369 + <v-flex xs4 class="pt-4 subheading">
  370 + <label class="right">Title:</label>
  371 + </v-flex>
  372 + <v-flex xs4 class="ml-3">
  373 + <v-text-field
  374 + v-model="addGallery.title"
  375 + placeholder="fill your Title"
  376 + name="name"
  377 + type="text"
  378 + :rules="titleRules"
  379 + required
  380 + ></v-text-field>
  381 + </v-flex>
  382 + </v-layout>
  383 + </v-flex>
  384 + <v-flex xs12>
  385 + <v-layout>
  386 + <v-flex xs4 class="pt-4 subheading">
  387 + <label class="right">Description:</label>
  388 + </v-flex>
  389 + <v-flex xs4 class="ml-3">
  390 + <v-text-field
  391 + placeholder="fill your Description"
  392 + :rules="descriptionRules"
  393 + v-model="addGallery.description"
  394 + type="text"
  395 + name="email"
  396 + required
  397 + ></v-text-field>
  398 + </v-flex>
  399 + </v-layout>
  400 + </v-flex>
  401 + <v-flex xs12>
  402 + <v-layout>
  403 + <v-flex xs4 class="pt-4 subheading">
  404 + <label class="right">Select Class:</label>
  405 + </v-flex>
  406 + <v-flex xs4 class="ml-3">
  407 + <v-select
  408 + :items="addclass"
  409 + label="Select Class"
  410 + v-model="addGallery.classNum"
  411 + item-text="classNum"
  412 + item-value="_id"
  413 + name="Select Class"
  414 + required
  415 + ></v-select>
  416 + </v-flex>
  417 + </v-layout>
  418 + </v-flex>
  419 + <v-flex xs12>
  420 + <v-layout>
  421 + <v-flex xs4 class="pt-4 subheading">
  422 + <label class="right">Uplaod Image:</label>
  423 + </v-flex>
  424 + <v-flex xs4 class="ml-3">
  425 + <v-text-field
  426 + label="Select Image"
  427 + @click="pickFile"
  428 + v-model="imageName"
  429 + append-icon="attach_file"
  430 + multiple
  431 + ></v-text-field>
  432 + </v-flex>
  433 + </v-layout>
  434 + </v-flex>
  435 + <v-layout>
  436 + <v-flex xs12>
  437 + <div v-for="(youTubeLink,index) in finds" :key="index">
  438 + <v-layout>
  439 + <v-flex xs4 class="pt-4 subheading">
  440 + <label class="right">You Tube Link Url:</label>
  441 + </v-flex>
  442 + <v-flex xs4 class="ml-3">
  443 + <v-text-field
  444 + placeholder="fill your youtube link"
  445 + v-model="youTubeLink.value"
  446 + type="text"
  447 + name="link"
  448 + required
  449 + ></v-text-field>
  450 + <!-- </div> -->
  451 + </v-flex>
  452 + <v-flex xs2 class="pt-4">
  453 + <v-icon @click="deleteFind(index)">cancel</v-icon>
  454 + <v-icon @click="addFind">add_circle</v-icon>
  455 + </v-flex>
  456 + </v-layout>
  457 + </div>
  458 + </v-flex>
  459 + <v-flex xs12 sm6 offset-sm3>
  460 + <v-card-actions>
  461 + <v-btn @click="clear" round dark>clear</v-btn>
  462 + <v-spacer></v-spacer>
  463 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  464 + </v-card-actions>
  465 + </v-flex>
  466 + </v-layout>
  467 + </v-container>
  468 + </v-form>
  469 + </v-card>
  470 + </v-flex>
  471 + </v-container>
  472 + </v-tab-item>
  473 + </v-tabs>
  474 + <div class="loader" v-if="showLoader">
  475 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  476 + </div>
  477 + </v-app>
  478 +</template>
  479 +
  480 +<script>
  481 +import http from "@/Services/http.js";
  482 +import Util from "@/util";
  483 +
  484 +export default {
  485 + data: () => ({
  486 + snackbar: false,
  487 + y: "top",
  488 + x: "right",
  489 + mode: "",
  490 + timeout: 3000,
  491 + text: "",
  492 + loading: false,
  493 + date: null,
  494 + search: "",
  495 + showLoader: false,
  496 + dialog: false,
  497 + dialog1: false,
  498 + valid: true,
  499 + isActive: true,
  500 + newActive: false,
  501 + addclass: [],
  502 + addSection: [],
  503 + finds: [{ value: "" }],
  504 + youTubeLinkUrl: "",
  505 + addGallery: {
  506 + youTubeLinkUrl: []
  507 + },
  508 + pagination: {
  509 + rowsPerPage: 15
  510 + },
  511 + imageName: "",
  512 + imageUrl: "",
  513 + imageFile: "",
  514 + image: [],
  515 + upload: "",
  516 + files: [],
  517 + addclass: [],
  518 + token: "",
  519 + titleRules: [v => !!v || " Tilte is required"],
  520 + descriptionRules: [v => !!v || " Description is required"],
  521 + headers: [
  522 + {
  523 + align: "justify-center",
  524 + text: "No",
  525 + sortable: false,
  526 + value: "No"
  527 + },
  528 + { text: "Image", vaue: "image", sortable: false, align: "center" },
  529 + { text: "Title", value: "title", sortable: false, align: "center" },
  530 + {
  531 + text: "Description",
  532 + value: "description",
  533 + sortable: false,
  534 + align: "center"
  535 + },
  536 + { text: "Action", value: "", sortable: false, align: "center" }
  537 + ],
  538 + desserts: [],
  539 + editedIndex: -1,
  540 + editedItem: {},
  541 + userName: "",
  542 + items: [
  543 + {
  544 + href: "/changepassword",
  545 + title: "Change Password",
  546 + click: e => {
  547 + console.log(e);
  548 + }
  549 + },
  550 + {
  551 + href: "#",
  552 + title: "Logout",
  553 + click: e => {
  554 + window.getApp.$emit("APP_LOGOUT");
  555 + }
  556 + }
  557 + ]
  558 + }),
  559 + methods: {
  560 + getSections(_id) {
  561 + console.log("_id", _id);
  562 + var token = this.$store.state.token;
  563 + http()
  564 + .get(
  565 + "/getSectionsList",
  566 + { params: { classId: _id } },
  567 + {
  568 + headers: { Authorization: "Bearer " + token }
  569 + }
  570 + )
  571 + .then(response => {
  572 + this.addSection = response.data.data;
  573 + // console.log("getSectionsList=====>", this.addSection);
  574 + })
  575 + .catch(err => {
  576 + console.log("err====>", err);
  577 + // this.$router.replace({ path: '/' });
  578 + });
  579 + },
  580 + pickFile() {
  581 + this.$refs.image.click();
  582 + },
  583 + onFilePicked(e) {
  584 + // console.log(e)
  585 + const files = e.target.files;
  586 + /** fetch Image Name **/
  587 + if (files[0] !== undefined) {
  588 + this.imageName = files[0].name;
  589 + if (this.imageName.lastIndexOf(".") <= 0) {
  590 + return;
  591 + }
  592 + this.files = [];
  593 + // console.log("files", this.files);
  594 + /** Select many image and showing many image add to Gallery card **/
  595 + const test = Array.from(files).forEach((file, idx) => {
  596 + const fr = new FileReader();
  597 + const getResult = new Promise(resolve => {
  598 + fr.onload = e => {
  599 + this.files.push(
  600 + // id: idx,
  601 + e.target.result
  602 + );
  603 + };
  604 + });
  605 + fr.readAsDataURL(file);
  606 + return getResult.then(file => {
  607 + return file;
  608 + });
  609 + });
  610 + const fr = new FileReader();
  611 + fr.readAsDataURL(files[0]);
  612 + fr.addEventListener("load", () => {
  613 + this.imageFile = files; // this is an image file that can be sent to server...
  614 + // console.log("uploadImage=======>", this.imageFile );
  615 + });
  616 + } else {
  617 + this.imageName = "";
  618 + this.imageFile = "";
  619 + this.imageUrl = "";
  620 + }
  621 + },
  622 + getGalleryList() {
  623 + this.showLoader = true;
  624 + http()
  625 + .get("/getGalleryList", {
  626 + headers: { Authorization: "Bearer " + this.token }
  627 + })
  628 + .then(response => {
  629 + this.desserts = response.data.data;
  630 + this.showLoader = false;
  631 + })
  632 + .catch(err => {
  633 + // console.log("err====>", err);
  634 + this.showLoader = false;
  635 + // this.$router.replace({ path: "/" });
  636 + });
  637 + },
  638 + editItem(item) {
  639 + this.files = [];
  640 + this.editedIndex = this.desserts.indexOf(item);
  641 + this.editedItem = Object.assign({}, item);
  642 + this.dialog = true;
  643 + },
  644 + profile(item) {
  645 + this.editedIndex = this.desserts.indexOf(item);
  646 + this.editedItem = Object.assign({}, item);
  647 + this.dialog1 = true;
  648 + },
  649 + deleteItem(item) {
  650 + let deleteGallery = {
  651 + gelleryId: item._id
  652 + };
  653 + http()
  654 + .delete(
  655 + "/deleteGellery",
  656 + confirm("Are you sure you want to delete this?") && {
  657 + params: deleteGallery
  658 + }
  659 + )
  660 + .then(response => {
  661 + if ((this.snackbar = true)) {
  662 + this.text = "Successfully delete Existing News";
  663 + }
  664 + this.getNewsList();
  665 + })
  666 + .catch(error => {
  667 + // console.log(error);
  668 + });
  669 + },
  670 + deleteImage(imageId, newsId) {
  671 + console.log(imageId, newsId);
  672 + let deleteImages = {
  673 + newsId: newsId,
  674 + imageId: imageId
  675 + };
  676 + http()
  677 + .put("/deleteImages", deleteImages)
  678 + .then(response => {
  679 + console.log("deleteNews", deleteImages);
  680 + if ((this.snackbar = true)) {
  681 + this.text = "Image deleted Successfully";
  682 + }
  683 + this.getNewsList();
  684 + this.close();
  685 + })
  686 + .catch(error => {
  687 + console.log(error);
  688 + });
  689 + },
  690 + activeTab(type) {
  691 + switch (type) {
  692 + case "existing":
  693 + this.newActive = false;
  694 + this.isActive = true;
  695 + break;
  696 +
  697 + default:
  698 + this.newActive = true;
  699 + this.isActive = false;
  700 + break;
  701 + }
  702 + },
  703 + close() {
  704 + this.dialog = false;
  705 + setTimeout(() => {
  706 + this.editedItem = Object.assign({}, this.defaultItem);
  707 + this.editedIndex = -1;
  708 + }, 300);
  709 + },
  710 + close1() {
  711 + this.dialog1 = false;
  712 + },
  713 + submit() {
  714 + this.loading = true;
  715 + this.addGallery.youTubeLinkUrl.push(this.youTubeLinkUrl);
  716 + if (this.$refs.form.validate()) {
  717 + if (this.files) {
  718 + var ary = [];
  719 + var imageData = [];
  720 + ary = this.files;
  721 + for (let i = 0; i < ary.length; i++) {
  722 + const [baseUrl, imageUrl] = ary[i].split(/,/);
  723 + imageData.push(imageUrl);
  724 + this.addGallery.upload = imageData;
  725 + }
  726 + }
  727 + http()
  728 + .post("/createGallery", this.addGallery)
  729 + .then(response => {
  730 + this.loading = false;
  731 + this.snackbar = true;
  732 + this.text = response.data.message;
  733 + this.getGelleryList();
  734 + this.clear();
  735 + })
  736 + .catch(error => {
  737 + if ((this.snackbar = true)) {
  738 + this.text = error.response.data.message;
  739 + }
  740 + });
  741 + }
  742 + },
  743 + clear() {
  744 + this.$refs.form.reset();
  745 + },
  746 + save() {
  747 + this.editedItem.gelleryId = this.editedItem._id;
  748 + if (this.files) {
  749 + var ary = [];
  750 + var imageData = [];
  751 + ary = this.files;
  752 + for (let i = 0; i < ary.length; i++) {
  753 + const [baseUrl, imageUrl] = ary[i].split(/,/);
  754 + imageData.push(imageUrl);
  755 + this.editedItem.upload = imageData;
  756 + }
  757 + }
  758 + http()
  759 + .put("/updateGellery", this.editedItem)
  760 + .then(response => {
  761 + this.snackbar = true;
  762 + this.text = response.data.message;
  763 + this.getGelleryList();
  764 + this.close();
  765 + })
  766 + .catch(error => {
  767 + console.log(error);
  768 + });
  769 + },
  770 + getAllClasses() {
  771 + http()
  772 + .get("/getClassesList", {
  773 + headers: { Authorization: "Bearer " + this.token }
  774 + })
  775 + .then(response => {
  776 + this.addclass = response.data.data;
  777 + })
  778 + .catch(err => {
  779 + // console.log("err====>", err);
  780 + // this.$router.replace({ path: "/" });
  781 + });
  782 + },
  783 + handleDrawerToggle() {
  784 + window.getApp.$emit("APP_DRAWER_TOGGLED");
  785 + },
  786 + handleFullScreen() {
  787 + Util.toggleFullScreen();
  788 + },
  789 + addFind: function() {
  790 + this.finds.push({ value: "" });
  791 + },
  792 + deleteFind: function(index) {
  793 + this.finds.splice(index, 1);
  794 + if (index === 0) this.addFind();
  795 + }
  796 + },
  797 + mounted() {
  798 + this.token = this.$store.state.token;
  799 + this.getAllClasses();
  800 + this.getGalleryList();
  801 + },
  802 + computed: {
  803 + toolbarColor() {
  804 + return this.$vuetify.options.extra.mainNav;
  805 + }
  806 + }
  807 +};
  808 +</script>
  809 +<style scoped>
  810 +.pl-3 {
  811 + padding-left: 0px !important;
  812 +}
  813 +.v-tabs__div {
  814 + text-transform: none;
  815 +}
  816 +.v-input__prepend-outer {
  817 + margin-right: 0px !important;
  818 +}
  819 +.v-card__actions .v-btn {
  820 + margin: 0 15px;
  821 + min-width: 120px;
  822 +}
  823 +.primary {
  824 + background-color: #aaa !important;
  825 + border-color: #aaa !important;
  826 +}
  827 +h4 {
  828 + background-repeat: no-repeat;
  829 + padding: 8px;
  830 + margin: auto;
  831 + font-size: 25px;
  832 +}
  833 +#name {
  834 + position: absolute;
  835 + left: 100px;
  836 + top: 17px;
  837 +}
  838 +#icon {
  839 + position: absolute;
  840 + right: 8px;
  841 + top: 8px;
  842 +}
  843 +#m {
  844 + position: relative;
  845 + left: 135px;
  846 + top: -15px;
  847 +}
  848 +#G {
  849 + position: absolute;
  850 + top: 38px;
  851 + color: white;
  852 +}
  853 +#bt {
  854 + position: relative;
  855 + top: -20px;
  856 + left: 115px;
  857 +}
  858 +#e {
  859 + position: relative;
  860 + top: 5px;
  861 + right: -30px;
  862 + height: 17px;
  863 + cursor: pointer;
  864 +}
  865 +#d {
  866 + position: relative;
  867 + top: 5px;
  868 + right: -70px;
  869 + height: 17px;
  870 + cursor: pointer;
  871 +}
  872 +#td {
  873 + border: 1px solid #dddddd;
  874 + text-align: left;
  875 + padding: 8px;
  876 +}
  877 +#dialog {
  878 + height: 550px;
  879 +}
  880 +.active {
  881 + background-color: black;
  882 + color: white !important;
  883 +}
  884 +.activebtn {
  885 + color: black !important;
  886 +}
  887 +#flex {
  888 + height: 300px;
  889 +}
  890 +.top {
  891 + margin-top: 100px;
  892 +}
  893 +.v-tabs__item a {
  894 + font-size: 16px !important;
  895 +}
  896 +.list {
  897 + padding: 0 0px !important;
  898 +}
  899 +.profile-image-wrapper {
  900 + position: relative;
  901 +}
  902 +.edit-profile-icon {
  903 + position: absolute;
  904 + right: 15px;
  905 + top: 15px;
  906 + cursor: pointer;
  907 +}
  908 +.profile-image-wrapper > .edit-profile-icon {
  909 + right: 10%;
  910 + top: 0%;
  911 + margin-top: 8px;
  912 + border-radius: 50%;
  913 + padding: 7px;
  914 + font-size: 20px;
  915 +}
  916 +@media screen and (max-width: 769px) {
  917 + .top {
  918 + margin-top: 0 !important;
  919 + }
  920 + .userSearch .v-icon {
  921 + font-size: 20px !important;
  922 + margin-left: 20px;
  923 + }
  924 +}
  925 +@media screen and (max-width: 380px) {
  926 + .right {
  927 + float: none !important;
  928 + }
  929 + .subheading {
  930 + font-size: 14px !important;
  931 + }
  932 + .v-card__actions .v-btn {
  933 + margin: 0 0px;
  934 + min-width: 100px;
  935 + }
  936 + /* .searchIcon .v-icon {
  937 + font-size: 20px;
  938 + margin-left: 20px;
  939 +} */
  940 + .subheading {
  941 + font-size: 12px !important;
  942 + }
  943 + h5 {
  944 + font-size: 13px;
  945 + }
  946 +}
  947 +.v-icon {
  948 + font-size: 30px;
  949 +}
  950 +@media screen and (min-width: 1270px) {
  951 + .hide {
  952 + display: none;
  953 + }
  954 + /* }
  955 +@media screen and (max-width: 962px) {
  956 +.imglogo{
  957 + position: absolute;
  958 + top: 13px;
  959 + left: 13px !important;
  960 + width: 70px;
  961 + height: 24px;
  962 +} */
  963 +}
  964 +@media screen and (max-width: 420px) {
  965 + .userSearch .v-text-field .v-label {
  966 + line-height: 24px !important;
  967 + }
  968 + .userSearch .v-label {
  969 + font-size: 13px !important;
  970 + }
  971 + .v-list__tile {
  972 + font-size: 14px;
  973 + padding: 0 10px;
  974 + }
  975 + .name {
  976 + font-size: 15px;
  977 + }
  978 +}
  979 +</style>
0 980 \ No newline at end of file
... ...
src/pages/News/news.vue
Diff comments   View file @8bb1784
... ... @@ -473,13 +473,7 @@ export default {
473 473 },
474 474 { text: "Action", value: "", sortable: false, align: "center" }
475 475 ],
476   - desserts: [
477   - {
478   - image: "https://picsum.photos/500/300?image",
479   - title: "title",
480   - description: "description"
481   - }
482   - ],
  476 + desserts: [],
483 477 editedIndex: -1,
484 478 addNews: {
485 479 title: "",
... ...
src/pages/socialMedia/socialMedia.vue
Diff comments   View file @8bb1784
... ... @@ -0,0 +1,740 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <v-toolbar class="fixcolors" fixed app>
  4 + <v-toolbar-title class="ml-0 pl-3">
  5 + <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
  6 + </v-toolbar-title>
  7 +
  8 + <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
  9 +
  10 + <v-flex xs7 sm3 class="userSearch">
  11 + <v-text-field
  12 + flat
  13 + append-icon="search"
  14 + label="Find your Media"
  15 + v-model="search"
  16 + color="white"
  17 + dark
  18 + ></v-text-field>
  19 + </v-flex>
  20 + <v-spacer></v-spacer>
  21 + <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
  22 + <v-btn icon large flat slot="activator">
  23 + <v-avatar size="40px">
  24 + <img src="/static/icon/user.png" />
  25 + </v-avatar>
  26 + </v-btn>
  27 + <v-list class="pa-0">
  28 + <v-list-tile
  29 + v-for="(item,index) in items"
  30 + :to="!item.href ? { name: item.name } : null"
  31 + :href="item.href"
  32 + @click="item.click"
  33 + ripple="ripple"
  34 + :disabled="item.disabled"
  35 + :target="item.target"
  36 + rel="noopener"
  37 + :key="index"
  38 + >
  39 + <v-list-tile-action v-if="item.icon">
  40 + <v-icon>{{ item.icon }}</v-icon>
  41 + </v-list-tile-action>
  42 + <v-list-tile-content>
  43 + <v-list-tile-title>{{ item.title }}</v-list-tile-title>
  44 + </v-list-tile-content>
  45 + </v-list-tile>
  46 + </v-list>
  47 + </v-menu>
  48 + </v-toolbar>
  49 + <v-tabs grow slider-color="black">
  50 + <v-tab
  51 + ripple
  52 + @click="activeTab('existing')"
  53 + v-bind:class="{ active: isActive }"
  54 + id="tab"
  55 + class="subheading"
  56 + >Existing Social Media</v-tab>
  57 + <v-tab
  58 + ripple
  59 + @click="activeTab('new')"
  60 + v-bind:class="{ active: newActive }"
  61 + id="tab1"
  62 + User
  63 + class="subheading"
  64 + >Add New Social Media</v-tab>
  65 +
  66 + <!-- ****** EDITS Social Media DETAILS ****** -->
  67 +
  68 + <v-tab-item>
  69 + <v-snackbar
  70 + :timeout="timeout"
  71 + :top="y === 'top'"
  72 + :right="x === 'right'"
  73 + :vertical="mode === 'vertical'"
  74 + v-model="snackbar"
  75 + color="success"
  76 + >{{ text }}</v-snackbar>
  77 + <v-dialog v-model="dialog" max-width="600px">
  78 + <v-flex xs12 sm12>
  79 + <v-toolbar color="v-toolbar">
  80 + <v-spacer></v-spacer>
  81 + <v-toolbar-title>
  82 + <h3>Edit Social Media</h3>
  83 + </v-toolbar-title>
  84 + <v-spacer></v-spacer>
  85 + </v-toolbar>
  86 + <v-card flat>
  87 + <v-form ref="form">
  88 + <v-container fluid>
  89 + <v-layout>
  90 + <v-flex
  91 + xs12
  92 + class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
  93 + >
  94 + <v-avatar size="100px">
  95 + <img src="/static/icon/user.png" v-if="!imageUrl" />
  96 + </v-avatar>
  97 + <!-- <input
  98 + type="file"
  99 + style="display: none"
  100 + ref="image"
  101 + accept="image/*"
  102 + @change="onFilePicked"
  103 + />-->
  104 + <img
  105 + :src="imageData.imageUrl"
  106 + height="150"
  107 + v-if="imageUrl"
  108 + style="border-radius:50%; width:200px"
  109 + />
  110 + </v-flex>
  111 + </v-layout>
  112 + <v-flex xs12 sm12>
  113 + <v-layout>
  114 + <v-flex xs4 class="pt-4 subheading">
  115 + <label class="right">Title:</label>
  116 + </v-flex>
  117 + <v-flex xs5 class="ml-3">
  118 + <v-select
  119 + v-model="editedItem.type"
  120 + placeholder="fill your Title"
  121 + :items="socialLink"
  122 + item-text="name"
  123 + item-value="value"
  124 + name="name"
  125 + type="text"
  126 + ></v-select>
  127 + </v-flex>
  128 + </v-layout>
  129 + </v-flex>
  130 + <v-flex xs12 sm12>
  131 + <v-layout>
  132 + <v-flex xs4 class="pt-4 subheading">
  133 + <label class="right">Description:</label>
  134 + </v-flex>
  135 + <v-flex xs5 class="ml-3">
  136 + <v-text-field
  137 + placeholder="fill your Description"
  138 + v-model="editedItem.linkUrl"
  139 + type="text"
  140 + ></v-text-field>
  141 + </v-flex>
  142 + </v-layout>
  143 + </v-flex>
  144 + <v-layout>
  145 + <v-flex xs12 sm10 offset-sm1>
  146 + <v-card-actions>
  147 + <v-btn round dark @click.native="close">Cancel</v-btn>
  148 + <v-spacer></v-spacer>
  149 + <v-btn round dark @click="save">Save</v-btn>
  150 + </v-card-actions>
  151 + </v-flex>
  152 + </v-layout>
  153 + </v-container>
  154 + </v-form>
  155 + </v-card>
  156 + </v-flex>
  157 + </v-dialog>
  158 +
  159 + <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
  160 +
  161 + <v-dialog v-model="dialog1" max-width="600px">
  162 + <v-toolbar color="white">
  163 + <v-spacer></v-spacer>
  164 + <v-toolbar-title>
  165 + <h3>Social Media</h3>
  166 + </v-toolbar-title>
  167 + <v-spacer></v-spacer>
  168 + <v-icon @click="close1">close</v-icon>
  169 + </v-toolbar>
  170 + <v-card>
  171 + <v-flex align-center justify-center layout text-xs-center>
  172 + <v-avatar size="50px" style="position:absolute; top:20px;">
  173 + <img src="/static/icon/user.png" />
  174 + </v-avatar>
  175 + </v-flex>
  176 + <v-card-text>
  177 + <v-container grid-list-md>
  178 + <v-layout wrap>
  179 + <v-flex>
  180 + <br />
  181 + <br />
  182 + <v-layout>
  183 + <v-flex xs5 sm6>
  184 + <h5 class="right my-1">Title:</h5>
  185 + </v-flex>
  186 + <v-flex sm6 xs8>
  187 + <h5 class="my-1">{{ editedItem.type }}</h5>
  188 + </v-flex>
  189 + </v-layout>
  190 + <v-layout>
  191 + <v-flex xs5 sm6>
  192 + <h5 class="right my-1">Description:</h5>
  193 + </v-flex>
  194 + <v-flex sm6 xs8>
  195 + <h5 class="my-1">{{ editedItem.linkUrl }}</h5>
  196 + </v-flex>
  197 + </v-layout>
  198 + </v-flex>
  199 + </v-layout>
  200 + </v-container>
  201 + </v-card-text>
  202 + </v-card>
  203 + </v-dialog>
  204 + <v-snackbar
  205 + :timeout="timeout"
  206 + :top="y === 'top'"
  207 + :right="x === 'right'"
  208 + :vertical="mode === 'vertical'"
  209 + v-model="snackbar"
  210 + color="success"
  211 + >{{ text }}</v-snackbar>
  212 +
  213 + <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
  214 +
  215 + <v-data-table
  216 + :headers="headers"
  217 + :items="desserts"
  218 + :pagination.sync="pagination"
  219 + :search="search"
  220 + >
  221 + <template slot="items" slot-scope="props">
  222 + <td id="td" class="text-xs-center">{{ props.index}}</td>
  223 + <td id="td" class="text-xs-center">{{ props.item.type}}</td>
  224 + <td id="td" class="text-xs-center">{{ props.item.linkUrl}}</td>
  225 +
  226 + <td class="text-xs-center">
  227 + <span>
  228 + <img
  229 + style="cursor:pointer; width:25px; height:18px; "
  230 + class="mr-5"
  231 + @click="profile(props.item)"
  232 + src="/static/icon/eye1.png"
  233 + />
  234 + <img
  235 + style="cursor:pointer; width:20px; height:18px; "
  236 + class="mr-5"
  237 + @click="editItem(props.item)"
  238 + src="/static/icon/edit1.png"
  239 + />
  240 + <img
  241 + style="cursor:pointer;width:20px; height:20px; "
  242 + class="mr-5"
  243 + @click="deleteItem(props.item)"
  244 + src="/static/icon/delete1.png"
  245 + />
  246 + </span>
  247 + </td>
  248 + </template>
  249 + <v-alert
  250 + slot="no-results"
  251 + :value="true"
  252 + color="error"
  253 + icon="warning"
  254 + >Your search for "{{ search }}" found no results.</v-alert>
  255 + </v-data-table>
  256 + </v-tab-item>
  257 +
  258 + <!-- ****** ADD MULTIPLE REMINDER ****** -->
  259 +
  260 + <v-tab-item>
  261 + <v-container>
  262 + <v-snackbar
  263 + :timeout="timeout"
  264 + :top="y === 'top'"
  265 + :right="x === 'right'"
  266 + :vertical="mode === 'vertical'"
  267 + v-model="snackbar"
  268 + color="success"
  269 + >{{ text }}</v-snackbar>
  270 + <v-flex xs12 sm12 class="my-4">
  271 + <v-card flat>
  272 + <v-form ref="form" v-model="valid" lazy-validation>
  273 + <v-container fluid>
  274 + <v-layout>
  275 + <v-flex
  276 + xs12
  277 + class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
  278 + >
  279 + <v-avatar size="100px">
  280 + <img src="/static/icon/user.png" v-if="!imageUrl" />
  281 + </v-avatar>
  282 + <!-- <input
  283 + type="file"
  284 + style="display: none"
  285 + ref="image"
  286 + accept="image/*"
  287 + @change="onFilePicked"
  288 + />-->
  289 + <img
  290 + :src="imageData.imageUrl"
  291 + height="150"
  292 + v-if="imageUrl"
  293 + style="border-radius:50%; width:200px"
  294 + />
  295 + </v-flex>
  296 + </v-layout>
  297 + <v-flex xs12>
  298 + <v-layout>
  299 + <v-flex xs4 class="pt-4 subheading">
  300 + <label class="right">Type:</label>
  301 + </v-flex>
  302 + <v-flex xs4 class="ml-3">
  303 + <v-select
  304 + v-model="socialMedia.type"
  305 + :items="socialLink"
  306 + item-text="name"
  307 + item-value="value"
  308 + label="Selct Type"
  309 + type="text"
  310 + :rules="socialRules"
  311 + required
  312 + ></v-select>
  313 + </v-flex>
  314 + </v-layout>
  315 + </v-flex>
  316 + <v-flex xs12>
  317 + <v-layout>
  318 + <v-flex xs4 class="pt-4 subheading">
  319 + <label class="right">Link Url:</label>
  320 + </v-flex>
  321 + <v-flex xs4 class="ml-3">
  322 + <v-text-field
  323 + placeholder="fill your link url"
  324 + :rules="linkUrlnRules"
  325 + v-model="socialMedia.linkUrl"
  326 + type="text"
  327 + required
  328 + ></v-text-field>
  329 + </v-flex>
  330 + </v-layout>
  331 + </v-flex>
  332 + <v-layout>
  333 + <v-flex xs12 sm6 offset-sm3>
  334 + <v-card-actions>
  335 + <v-btn @click="clear" round dark>clear</v-btn>
  336 + <v-spacer></v-spacer>
  337 + <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
  338 + </v-card-actions>
  339 + </v-flex>
  340 + </v-layout>
  341 + </v-container>
  342 + </v-form>
  343 + </v-card>
  344 + </v-flex>
  345 + </v-container>
  346 + </v-tab-item>
  347 + </v-tabs>
  348 + <div class="loader" v-if="showLoader">
  349 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  350 + </div>
  351 + </v-app>
  352 +</template>
  353 +
  354 +<script>
  355 +import http from "@/Services/http.js";
  356 +import Util from "@/util";
  357 +
  358 +export default {
  359 + data: () => ({
  360 + snackbar: false,
  361 + y: "top",
  362 + x: "right",
  363 + mode: "",
  364 + timeout: 3000,
  365 + text: "",
  366 + loading: false,
  367 + date: null,
  368 + search: "",
  369 + showLoader: false,
  370 + dialog: false,
  371 + dialog1: false,
  372 + valid: true,
  373 + isActive: true,
  374 + newActive: false,
  375 + pagination: {
  376 + rowsPerPage: 15
  377 + },
  378 + imageData: {},
  379 + imageName: "",
  380 + imageUrl: "",
  381 + imageFile: "",
  382 + socialRules: [v => !!v || " Social media type is required"],
  383 + linkUrlnRules: [v => !!v || " Link Url is required"],
  384 + headers: [
  385 + {
  386 + text: "No",
  387 + align: "center",
  388 + sortable: false,
  389 + value: "No"
  390 + },
  391 + { text: "Title", value: "type", sortable: false, align: "center" },
  392 + {
  393 + text: "Description",
  394 + value: "linkUrl",
  395 + sortable: false,
  396 + align: "center"
  397 + },
  398 + { text: "Action", value: "", sortable: false, align: "center" }
  399 + ],
  400 + desserts: [],
  401 + editedIndex: -1,
  402 + socialMedia: {},
  403 + editedItem: {},
  404 + socialLink: [
  405 + {
  406 + name: "Face Book",
  407 + value: "FACEBOOK"
  408 + },
  409 + {
  410 + name: "You Tube",
  411 + value: "YOUTUBE"
  412 + },
  413 + {
  414 + name: "Instagram",
  415 + value: "INSTAGRAM"
  416 + },
  417 + {
  418 + name: "Linkedin",
  419 + value: "LINKEDIN"
  420 + }
  421 + ],
  422 + userName: "",
  423 + items: [
  424 + {
  425 + href: "/changepassword",
  426 + title: "Change Password",
  427 + click: e => {
  428 + console.log(e);
  429 + }
  430 + },
  431 + {
  432 + href: "#",
  433 + title: "Logout",
  434 + click: e => {
  435 + window.getApp.$emit("APP_LOGOUT");
  436 + }
  437 + }
  438 + ]
  439 + }),
  440 + methods: {
  441 + // pickFile() {
  442 + // this.$refs.image.click();
  443 + // },
  444 +
  445 + // onFilePicked(e) {
  446 + // // console.log(e)
  447 + // const files = e.target.files;
  448 + // this.imageData.upload = e.target.files[0];
  449 + // if (files[0] !== undefined) {
  450 + // this.imageName = files[0].name;
  451 + // if (this.imageName.lastIndexOf(".") <= 0) {
  452 + // return;
  453 + // }
  454 + // const fr = new FileReader();
  455 + // fr.readAsDataURL(files[0]);
  456 + // fr.addEventListener("load", () => {
  457 + // this.imageUrl = fr.result;
  458 + // this.imageFile = files[0]; // this is an image file that can be sent to server...
  459 + // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
  460 + // console.log("upload=======>", this.imageData.imageUrl);
  461 + // console.log("imageFile", this.imageFile);
  462 + // });
  463 + // } else {
  464 + // this.imageName = "";
  465 + // this.imageFile = "";
  466 + // this.imageUrl = "";
  467 + // }
  468 + // },
  469 + getSocialMedia() {
  470 + this.showLoader = true;
  471 + var token = this.$store.state.token;
  472 + http()
  473 + .get("/getSocialList", {
  474 + headers: { Authorization: "Bearer " + token }
  475 + })
  476 + .then(response => {
  477 + this.desserts = response.data.data;
  478 + this.showLoader = false;
  479 + })
  480 + .catch(err => {
  481 + this.showLoader = false;
  482 + this.$router.replace({ path: "/" });
  483 + });
  484 + },
  485 + editItem(item) {
  486 + this.editedIndex = this.desserts.indexOf(item);
  487 + this.editedItem = Object.assign({}, item);
  488 + this.dialog = true;
  489 + },
  490 + profile(item) {
  491 + this.editedIndex = this.desserts.indexOf(item);
  492 + this.editedItem = Object.assign({}, item);
  493 + this.dialog1 = true;
  494 + },
  495 +
  496 + deleteItem(item) {
  497 + let deleteSocialMedia = {
  498 + socialId: item._id
  499 + };
  500 + http()
  501 + .delete(
  502 + "/deleteSocial",
  503 + confirm("Are you sure you want to delete this?") && {
  504 + params: deleteSocialMedia
  505 + }
  506 + )
  507 + .then(response => {
  508 + this.text = response.data.message;
  509 + this.getSocialMedia();
  510 + })
  511 + .catch(error => {
  512 + console.log(error);
  513 + });
  514 + },
  515 + activeTab(type) {
  516 + switch (type) {
  517 + case "existing":
  518 + this.newActive = false;
  519 + this.isActive = true;
  520 + break;
  521 +
  522 + default:
  523 + this.newActive = true;
  524 + this.isActive = false;
  525 + break;
  526 + }
  527 + },
  528 + close() {
  529 + this.dialog = false;
  530 + setTimeout(() => {
  531 + this.editedItem = Object.assign({}, this.defaultItem);
  532 + this.editedIndex = -1;
  533 + }, 300);
  534 + },
  535 + close1() {
  536 + this.dialog1 = false;
  537 + },
  538 + submit() {
  539 + if (this.$refs.form.validate()) {
  540 + this.loading = true;
  541 + http()
  542 + .post("/addSocialLinks", this.socialMedia)
  543 + .then(response => {
  544 + this.snackbar = true;
  545 + this.text = response.data.message;
  546 + this.getSocialMedia();
  547 + this.clear();
  548 + this.loading = false;
  549 + })
  550 + .catch(error => {
  551 + this.snackbar = true;
  552 + this.text = error.response.data.message;
  553 + this.loading = false;
  554 + });
  555 + }
  556 + },
  557 + clear() {
  558 + this.$refs.form.reset();
  559 + },
  560 + save() {
  561 + (this.editedItem.socialId = this.editedItem._id),
  562 + http()
  563 + .put("/updateSocial", this.editedItem)
  564 + .then(response => {
  565 + this.text = "Successfully Edit Notification";
  566 + this.getSocialMedia();
  567 + this.close();
  568 + })
  569 + .catch(error => {
  570 + console.log(error);
  571 + });
  572 + },
  573 + handleDrawerToggle() {
  574 + window.getApp.$emit("APP_DRAWER_TOGGLED");
  575 + },
  576 + handleFullScreen() {
  577 + Util.toggleFullScreen();
  578 + }
  579 + },
  580 + mounted() {
  581 + this.getSocialMedia();
  582 + },
  583 + computed: {
  584 + toolbarColor() {
  585 + return this.$vuetify.options.extra.mainNav;
  586 + }
  587 + }
  588 +};
  589 +</script>
  590 +<style scoped>
  591 +.v-tabs__div {
  592 + text-transform: none;
  593 +}
  594 +.v-input__prepend-outer {
  595 + margin-right: 0px !important;
  596 +}
  597 +.v-card__actions .v-btn {
  598 + margin: 0 15px;
  599 + min-width: 120px;
  600 +}
  601 +.primary {
  602 + background-color: #aaa !important;
  603 + border-color: #aaa !important;
  604 +}
  605 +h4 {
  606 + background-repeat: no-repeat;
  607 + padding: 8px;
  608 + margin: auto;
  609 + font-size: 25px;
  610 +}
  611 +#name {
  612 + position: absolute;
  613 + left: 100px;
  614 + top: 17px;
  615 +}
  616 +#icon {
  617 + position: absolute;
  618 + right: 8px;
  619 + top: 8px;
  620 +}
  621 +#m {
  622 + position: relative;
  623 + left: 135px;
  624 + top: -15px;
  625 +}
  626 +#G {
  627 + position: absolute;
  628 + top: 38px;
  629 + color: white;
  630 +}
  631 +#bt {
  632 + position: relative;
  633 + top: -20px;
  634 + left: 115px;
  635 +}
  636 +#e {
  637 + position: relative;
  638 + top: 5px;
  639 + right: -30px;
  640 + height: 17px;
  641 + cursor: pointer;
  642 +}
  643 +#d {
  644 + position: relative;
  645 + top: 5px;
  646 + right: -70px;
  647 + height: 17px;
  648 + cursor: pointer;
  649 +}
  650 +#td {
  651 + border: 1px solid #dddddd;
  652 + text-align: left;
  653 + padding: 8px;
  654 +}
  655 +#dialog {
  656 + height: 550px;
  657 +}
  658 +.active {
  659 + background-color: black;
  660 + color: white !important;
  661 +}
  662 +.activebtn {
  663 + color: black !important;
  664 +}
  665 +#flex {
  666 + height: 300px;
  667 +}
  668 +.top {
  669 + margin-top: 100px;
  670 +}
  671 +.v-tabs__item a {
  672 + font-size: 16px !important;
  673 +}
  674 +@media screen and (max-width: 769px) {
  675 + .top {
  676 + margin-top: 0 !important;
  677 + }
  678 + .userSearch .v-icon {
  679 + font-size: 20px !important;
  680 + margin-left: 20px;
  681 + }
  682 +}
  683 +@media screen and (max-width: 380px) {
  684 + .right {
  685 + float: none !important;
  686 + }
  687 + .subheading {
  688 + font-size: 14px !important;
  689 + }
  690 + .v-card__actions .v-btn {
  691 + margin: 0 0px;
  692 + min-width: 100px;
  693 + }
  694 + /* .searchIcon .v-icon {
  695 + font-size: 20px;
  696 + margin-left: 20px;
  697 +} */
  698 + .subheading {
  699 + font-size: 12px !important;
  700 + }
  701 + h5 {
  702 + font-size: 13px;
  703 + }
  704 +}
  705 +.v-icon {
  706 + font-size: 30px;
  707 +}
  708 +@media screen and (min-width: 1270px) {
  709 + .hide {
  710 + display: none;
  711 + }
  712 + /* }
  713 +@media screen and (max-width: 962px) {
  714 +.imglogo{
  715 + position: absolute;
  716 + top: 13px;
  717 + left: 13px !important;
  718 + width: 70px;
  719 + height: 24px;
  720 +} */
  721 +}
  722 +@media screen and (max-width: 420px) {
  723 + .pl-3 {
  724 + padding-left: 0px !important;
  725 + }
  726 + .userSearch .v-text-field .v-label {
  727 + line-height: 24px !important;
  728 + }
  729 + .userSearch .v-label {
  730 + font-size: 13px !important;
  731 + }
  732 + .v-list__tile {
  733 + font-size: 14px;
  734 + padding: 0 10px;
  735 + }
  736 + .name {
  737 + font-size: 15px;
  738 + }
  739 +}
  740 +</style>
0 741 \ No newline at end of file
... ...
src/router/paths.js
Diff comments   View file @8bb1784
1   -export default [
2   -
3   - {
  1 +export default [{
4 2 path: '*',
5 3 meta: {
6 4 public: true,
... ... @@ -202,5 +200,41 @@ export default [
202 200 /* webpackMode: "lazy-once" */
203 201 `@/pages/Subjects/subjects.vue`
204 202 )
  203 + },
  204 + {
  205 + path: '/dashboard',
  206 + meta: {},
  207 + name: 'Dashboard',
  208 + props: (route) => ({ type: route.query.type }),
  209 + component: () =>
  210 + import (
  211 + /* webpackChunkName: "routes" */
  212 + /* webpackMode: "lazy-once" */
  213 + `@/pages/Dashboard/dashboard.vue`
  214 + )
  215 + },
  216 + {
  217 + path: '/socialMedia',
  218 + meta: {},
  219 + name: 'SocialMedia',
  220 + props: (route) => ({ type: route.query.type }),
  221 + component: () =>
  222 + import (
  223 + /* webpackChunkName: "routes" */
  224 + /* webpackMode: "lazy-once" */
  225 + `@/pages/socialMedia/socialMedia.vue`
  226 + )
  227 + },
  228 + {
  229 + path: '/gallery',
  230 + meta: {},
  231 + name: 'Gallery',
  232 + props: (route) => ({ type: route.query.type }),
  233 + component: () =>
  234 + import (
  235 + /* webpackChunkName: "routes" */
  236 + /* webpackMode: "lazy-once" */
  237 + `@/pages/Gallery/gallery.vue`
  238 + )
205 239 }
206 240 ];
207 241 \ No newline at end of file
... ...