all api implement in class

Neeraj Sharma
1 parent ae898ca2b0
Showing 1 changed file with 603 additions and 0 deletions Show diff stats
src/pages/Class/addclass.vue
@@ -0,0 +1,603 @@
+<template>
+  <v-app id="pages-dasboard">
+    <v-toolbar class="fixcolors"  fixed app>
+      <v-toolbar-title class="ml-0 pl-3">
+        <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
+      </v-toolbar-title>
+
+      <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
+      <v-flex xs7 sm3 class="userSearch">
+        <v-text-field
+          flat
+          append-icon="search"
+          label="Find your Class"
+          v-model="search"
+          color="white"
+          dark
+        ></v-text-field>
+      </v-flex>
+      <v-spacer></v-spacer>
+      <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
+        <v-btn icon large flat slot="activator">
+          <v-avatar size="40px">
+            <img src="/static/icon/user.png">
+          </v-avatar>
+        </v-btn>
+        <v-list class="pa-0">
+          <v-list-tile
+            v-for="(item,index) in items"
+            :to="!item.href ? { name: item.name } : null"
+            :href="item.href"
+            @click="item.click"
+            ripple="ripple"
+            :disabled="item.disabled"
+            :target="item.target"
+            rel="noopener"
+            :key="index"
+          >
+            <v-list-tile-action v-if="item.icon">
+              <v-icon>{{ item.icon }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+            </v-list-tile-content>
+          </v-list-tile>
+        </v-list>
+      </v-menu>
+    </v-toolbar>
+    <v-tabs grow slider-color="black">
+      <v-tab
+        ripple
+        @click="activeTab('existing')"
+        v-bind:class="{ active: isActive }"
+        id="tab"
+        class="subheading"
+      >Existing Class</v-tab>
+      <v-tab
+        ripple
+        @click="activeTab('new')"
+        v-bind:class="{ active: newActive }"
+        id="tab1"
+        User
+        class="subheading"
+      >Add New Class</v-tab>
+
+      <!-- ****** EDITS  ADD ClASS  ****** -->
+      <v-tab-item>
+        <v-snackbar
+          :timeout="timeout"
+          :top="y === 'top'"
+          :right="x === 'right'"
+          :vertical="mode === 'vertical'"
+          v-model="snackbar"
+          color="success"
+        >{{ text }}</v-snackbar>
+        <v-dialog v-model="dialog" max-width="500px">
+          <v-toolbar color="white">
+            <v-spacer></v-spacer>
+            <v-toolbar-title>Edit Profile</v-toolbar-title>
+            <v-spacer></v-spacer>
+          </v-toolbar>
+          <v-card>
+            <v-card-text>
+              <v-container>
+                <v-layout wrap justify-center>
+                  <v-flex xs12 sm9>
+                    <v-form ref="form" v-model="valid" lazy-validation>
+                      <v-layout style="position:relative;">
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label>Class Name:</label>
+                        </v-flex>
+                        <v-flex xs8>
+                          <v-text-field
+                            v-model="editedItem.classNum"
+                            v-validate="'required'"
+                            :rules="nameRules"
+                            data-vv-name="Name"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                      <v-card-actions>
+                        <v-btn round dark @click.native="close">Cancel</v-btn>
+                        <v-spacer></v-spacer>
+                        <v-btn round dark @click="save">Save</v-btn>
+                      </v-card-actions>
+                    </v-form>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-card-text>
+          </v-card>
+        </v-dialog>
+
+        <!-- ****** PROFILE VIEW STUDENTS ******  -->
+        <v-dialog v-model="dialog1" max-width="600px">
+          <v-toolbar color="white">
+            <v-spacer></v-spacer>
+            <v-toolbar-title>Profile</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-icon @click="close1">close</v-icon>
+          </v-toolbar>
+          <v-card>
+            <v-flex align-center justify-center layout text-xs-center>
+              <v-avatar size="50px" style="position:absolute; top:20px;">
+                <img src="/static/icon/user.png">
+              </v-avatar>
+            </v-flex>
+            <v-card-text>
+              <v-container grid-list-md>
+                <v-layout wrap>
+                  <v-flex>
+                    <br>
+                    <br>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Class Name:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.classNum }}</h5>
+                      </v-flex>
+                    </v-layout>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-card-text>
+          </v-card>
+        </v-dialog>
+
+        <v-snackbar
+          :timeout="timeout"
+          :top="y === 'top'"
+          :right="x === 'right'"
+          :vertical="mode === 'vertical'"
+          v-model="snackbar"
+          color="success"
+        >{{ text }}</v-snackbar>
+
+        <!-- ****** EXISTING-USERS Classess Table ****** -->
+        <v-data-table
+          :headers="headers"
+          :items="desserts"
+          :pagination.sync="pagination"
+          :search="search"
+        >
+          <template slot="items" slot-scope="props">
+            <td id="td" class="text-xs-center">{{ props.index}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.classNum}}</td>
+            <td class="text-xs-center">
+              <span>
+                <img
+                  style="cursor:pointer; width:25px; height:18px; "
+                  class="mr-5"
+                  @click="profile(props.item)"
+                  src="/static/icon/eye1.png"
+                >
+                <img
+                  style="cursor:pointer; width:20px; height:18px; "
+                  class="mr-5"
+                  @click="editItem(props.item)"
+                  src="/static/icon/edit1.png"
+                >
+                <img
+                  style="cursor:pointer; height:20px; "
+                  class="mr-5"
+                  @click="deleteItem(props.item)"
+                  src="/static/icon/delete1.png"
+                >
+              </span>
+            </td>
+          </template>
+           <v-alert
+            slot="no-results"
+            :value="true"
+            color="error"
+            icon="warning"
+          >Your search for "{{ search }}" found no results.</v-alert>
+        </v-data-table>
+      </v-tab-item>
+
+      <!-- ****** ADD multiple Classess ****** -->
+      <v-tab-item>
+        <v-container>
+          <v-snackbar
+            :timeout="timeout"
+            :top="y === 'top'"
+            :right="x === 'right'"
+            :vertical="mode === 'vertical'"
+            v-model="snackbar"
+            color="success"
+          >{{ text }}</v-snackbar>
+          <v-flex xs12 sm8 offset-sm2 class="top">
+            <v-card flat>
+              <v-container fluid fill-height>
+                <v-layout align-center>
+                  <v-flex xs12>
+                    <v-flex offset-xs5>
+                      <v-avatar size="55px">
+                        <img src="/static/icon/user.png">
+                      </v-avatar>
+                    </v-flex>
+                    <v-form ref="form" v-model="valid" lazy-validation>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Class Name:</label>
+                        </v-flex>
+                        <v-flex xs6 class="ml-3">
+                          <v-text-field
+                            v-model="addclasses.classNum"
+                            placeholder="fill your class Name"
+                            name="name"
+                            type="text"
+                            :rules="nameRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm9 offset-sm2>
+                          <v-card-actions>
+                            <v-btn @click="clear" round dark>clear</v-btn>
+                            <v-spacer></v-spacer>
+                            <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
+                          </v-card-actions>
+                        </v-flex>
+                      </v-layout>
+                    </v-form>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-card>
+          </v-flex>
+        </v-container>
+      </v-tab-item>
+    </v-tabs>
+  </v-app>
+</template>
+
+<script>
+import http from "@/Services/http.js";
+import Util from "@/util";
+
+export default {
+  data: () => ({
+    snackbar: false,
+    y: "top",
+    x: "right",
+    mode: "",
+    timeout: 3000,
+    text: "",
+    loading: false,
+    date: null,
+    search: "",
+    menu: false,
+    menu1: false,
+    dialog: false,
+    dialog1: false,
+    valid: true,
+    isActive: true,
+    newActive: false,
+    AddUsercredentials: {},
+    pagination: {
+      rowsPerPage: 15
+    },
+    nameRules: [v => !!v || " Full Name is required"],
+    headers: [
+      {
+        text: "No",
+        align: "center",
+        sortable: false,
+        value: "No"
+      },
+      { text: "Class Name", value: "name", sortable: false, align: "center" },
+      { text: "Action", value: "", sortable: false, align: "center" }
+    ],
+    desserts: [],
+    editedIndex: -1,
+    editedItem: {
+      classNum: ""
+    },
+    addclasses:{
+      classNum: ""
+    },
+    defaultItem: {
+      classNum: ""
+    },
+    items: [
+      {
+        href: "/changepassword",
+        title: "Change Password",
+        click: e => {
+          console.log(e);
+        }
+      },
+      {
+        href: "#",
+        title: "Logout",
+        click: e => {
+          window.getApp.$emit("APP_LOGOUT");
+        }
+      }
+    ]
+  }),
+  watch: {
+    menu(val) {
+      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
+    },
+    menu1(val) {
+      val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
+    }
+  },
+  methods: {
+    getClassList() {
+      var token = this.$store.state.token;
+      http()
+        .get("/getClassesList", {
+          headers: { Authorization: "Bearer " + token }
+        })
+        .then(response => {
+          this.desserts = response.data.data;
+          console.log("getClassList=====>", this.desserts);
+        })
+        .catch(err => {
+          // console.log("err====>", err);
+          this.$router.replace({ path: "/" });
+        });
+    },
+    editItem(item) {
+      this.editedIndex = this.desserts.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialog = true;
+    },
+    profile(item) {
+      this.editedIndex = this.desserts.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialog1 = true;
+    },
+    deleteItem(item) {
+      let deleteStudent = {
+        classId: item._id
+      };
+      http()
+        .delete(
+          "/deleteClass",
+          confirm("Are you sure you want to delete this?") && {
+            params: deleteStudent
+          }
+        )
+        .then(response => {
+          // console.log("deleteUers",deleteStudent)
+          if ((this.snackbar = true)) {
+            this.text = "Successfully delete Existing User";
+          }
+          this.getClassList();
+        })
+        .catch(error => {
+          // console.log(error);
+        });
+    },
+    activeTab(type) {
+      switch (type) {
+        case "existing":
+          this.newActive = false;
+          this.isActive = true;
+          break;
+
+        default:
+          this.newActive = true;
+          this.isActive = false;
+          break;
+      }
+    },
+    close() {
+      this.dialog = false;
+      setTimeout(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
+      }, 300);
+    },
+    close1() {
+      this.dialog1 = false;
+    },
+    submit() {
+      if (this.$refs.form.validate()) {
+        let addClass = {
+          classNum: this.addclasses.classNum
+        };
+        console.log(addClass);
+        http()
+          .post("/createClass", addClass)
+          .then(response => {
+            this.getClassList();
+            if ((this.snackbar = true)) {
+              this.text = "New user added successfully";
+            }
+
+            this.clear();
+          })
+          .catch(error => {
+            // console.log(error);
+            if ((this.snackbar = true)) {
+              this.text = error.response.data.message;
+            }
+          });
+      }
+    },
+    mail() {},
+    download() {},
+    clear() {
+      this.$refs.form.reset();
+    },
+    save() {
+      let editClass = {
+        classId: this.editedItem._id,
+        classNum: this.editedItem.classNum
+      };
+      http()
+        .put("/updateClass", editClass)
+        .then(response => {
+          console.log("editClass", editClass);
+          if ((this.snackbar = true)) {
+            this.text = "Successfully Edit Existing User";
+          }
+          this.getClassList();
+        })
+        .catch(error => {
+          // console.log(error);
+        });
+      this.close();
+    },
+    handleDrawerToggle() {
+      window.getApp.$emit("APP_DRAWER_TOGGLED");
+    },
+    handleFullScreen() {
+      Util.toggleFullScreen();
+    }
+  },
+  mounted() {
+    this.getClassList();
+    // console.log("Id",this.$store.state.id)
+    // console.log("token",this.$store.state.token)
+  },
+  computed: {
+    toolbarColor() {
+      return this.$vuetify.options.extra.mainNav;
+    }
+  }
+};
+</script>
+<style scoped>
+.v-tabs__div {
+  text-transform: none;
+}
+.v-input__prepend-outer {
+  margin-right: 0px !important;
+}
+.v-card__actions .v-btn {
+  margin: 0 15px;
+  min-width: 120px;
+}
+.primary {
+  background-color: #aaa !important;
+  border-color: #aaa !important;
+}
+h4 {
+  background-repeat: no-repeat;
+  padding: 8px;
+  margin: auto;
+  font-size: 25px;
+}
+#name {
+  position: absolute;
+  left: 100px;
+  top: 17px;
+}
+#icon {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+#m {
+  position: relative;
+  left: 135px;
+  top: -15px;
+}
+#G {
+  position: absolute;
+  top: 38px;
+  color: white;
+}
+#bt {
+  position: relative;
+  top: -20px;
+  left: 115px;
+}
+#e {
+  position: relative;
+  top: 5px;
+  right: -30px;
+  height: 17px;
+  cursor: pointer;
+}
+#d {
+  position: relative;
+  top: 5px;
+  right: -70px;
+  height: 17px;
+  cursor: pointer;
+}
+#td {
+  border: 1px solid #dddddd;
+  text-align: left;
+  padding: 8px;
+}
+#dialog {
+  height: 550px;
+}
+.active {
+  background-color: black;
+  color: white !important;
+}
+.activebtn {
+  color: black !important;
+}
+#flex {
+  height: 300px;
+}
+.top {
+  margin-top: 100px;
+}
+.v-tabs__item a {
+  font-size: 16px !important;
+}
+@media screen and (max-width: 769px) {
+  .top {
+    margin-top: 0 !important;
+  }
+  .userSearch .v-icon {
+    font-size: 20px !important;
+    margin-left: 20px;
+  }
+}
+@media screen and (max-width: 380px) {
+  .right {
+    float: none !important;
+  }
+  .subheading {
+    font-size: 14px !important;
+  }
+  .v-card__actions .v-btn {
+    margin: 0 0px;
+    min-width: 100px;
+  }
+  .subheading {
+    font-size: 12px !important;
+  }
+  h5 {
+    font-size: 13px;
+  }
+}
+.v-icon {
+  font-size: 30px;
+}
+@media screen and (min-width: 1270px) {
+  .hide {
+    display: none;
+  }
+}
+@media screen and (max-width: 420px) {
+  .userSearch .v-text-field .v-label {
+    line-height: 24px !important;
+  }
+  .userSearch .v-label {
+    font-size: 13px !important;
+  }
+  .v-list__tile {
+    font-size: 14px;
+    padding: 0 10px;
+  }
+  .name {
+    font-size: 15px;
+  }
+}
+</style>
 \ No newline at end of file
...	...	@@ -0,0 +1,603 @@
	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 STUDENTS **** -->
	9	+ <v-flex xs7 sm3 class="userSearch">
	10	+ <v-text-field
	11	+ flat
	12	+ append-icon="search"
	13	+ label="Find your Class"
	14	+ v-model="search"
	15	+ color="white"
	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 Class</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 New Class</v-tab>
	64	+
	65	+ <!-- **** EDITS ADD ClASS **** -->
	66	+ <v-tab-item>
	67	+ <v-snackbar
	68	+ :timeout="timeout"
	69	+ :top="y === 'top'"
	70	+ :right="x === 'right'"
	71	+ :vertical="mode === 'vertical'"
	72	+ v-model="snackbar"
	73	+ color="success"
	74	+ >{{ text }}</v-snackbar>
	75	+ <v-dialog v-model="dialog" max-width="500px">
	76	+ <v-toolbar color="white">
	77	+ <v-spacer></v-spacer>
	78	+ <v-toolbar-title>Edit Profile</v-toolbar-title>
	79	+ <v-spacer></v-spacer>
	80	+ </v-toolbar>
	81	+ <v-card>
	82	+ <v-card-text>
	83	+ <v-container>
	84	+ <v-layout wrap justify-center>
	85	+ <v-flex xs12 sm9>
	86	+ <v-form ref="form" v-model="valid" lazy-validation>
	87	+ <v-layout style="position:relative;">
	88	+ <v-flex xs4 class="pt-4 subheading">
	89	+ <label>Class Name:</label>
	90	+ </v-flex>
	91	+ <v-flex xs8>
	92	+ <v-text-field
	93	+ v-model="editedItem.classNum"
	94	+ v-validate="'required'"
	95	+ :rules="nameRules"
	96	+ data-vv-name="Name"
	97	+ required
	98	+ ></v-text-field>
	99	+ </v-flex>
	100	+ </v-layout>
	101	+ <v-card-actions>
	102	+ <v-btn round dark @click.native="close">Cancel</v-btn>
	103	+ <v-spacer></v-spacer>
	104	+ <v-btn round dark @click="save">Save</v-btn>
	105	+ </v-card-actions>
	106	+ </v-form>
	107	+ </v-flex>
	108	+ </v-layout>
	109	+ </v-container>
	110	+ </v-card-text>
	111	+ </v-card>
	112	+ </v-dialog>
	113	+
	114	+ <!-- **** PROFILE VIEW STUDENTS **** -->
	115	+ <v-dialog v-model="dialog1" max-width="600px">
	116	+ <v-toolbar color="white">
	117	+ <v-spacer></v-spacer>
	118	+ <v-toolbar-title>Profile</v-toolbar-title>
	119	+ <v-spacer></v-spacer>
	120	+ <v-icon @click="close1">close</v-icon>
	121	+ </v-toolbar>
	122	+ <v-card>
	123	+ <v-flex align-center justify-center layout text-xs-center>
	124	+ <v-avatar size="50px" style="position:absolute; top:20px;">
	125	+ <img src="/static/icon/user.png">
	126	+ </v-avatar>
	127	+ </v-flex>
	128	+ <v-card-text>
	129	+ <v-container grid-list-md>
	130	+ <v-layout wrap>
	131	+ <v-flex>
	132	+ <br>
	133	+ <br>
	134	+ <v-layout>
	135	+ <v-flex xs5 sm6>
	136	+ <h5 class="right my-1">Class Name:</h5>
	137	+ </v-flex>
	138	+ <v-flex sm6 xs8>
	139	+ <h5 class="my-1">{{ editedItem.classNum }}</h5>
	140	+ </v-flex>
	141	+ </v-layout>
	142	+ </v-flex>
	143	+ </v-layout>
	144	+ </v-container>
	145	+ </v-card-text>
	146	+ </v-card>
	147	+ </v-dialog>
	148	+
	149	+ <v-snackbar
	150	+ :timeout="timeout"
	151	+ :top="y === 'top'"
	152	+ :right="x === 'right'"
	153	+ :vertical="mode === 'vertical'"
	154	+ v-model="snackbar"
	155	+ color="success"
	156	+ >{{ text }}</v-snackbar>
	157	+
	158	+ <!-- **** EXISTING-USERS Classess Table **** -->
	159	+ <v-data-table
	160	+ :headers="headers"
	161	+ :items="desserts"
	162	+ :pagination.sync="pagination"
	163	+ :search="search"
	164	+ >
	165	+ <template slot="items" slot-scope="props">
	166	+ <td id="td" class="text-xs-center">{{ props.index}}</td>
	167	+ <td id="td" class="text-xs-center">{{ props.item.classNum}}</td>
	168	+ <td class="text-xs-center">
	169	+ <span>
	170	+ <img
	171	+ style="cursor:pointer; width:25px; height:18px; "
	172	+ class="mr-5"
	173	+ @click="profile(props.item)"
	174	+ src="/static/icon/eye1.png"
	175	+ >
	176	+ <img
	177	+ style="cursor:pointer; width:20px; height:18px; "
	178	+ class="mr-5"
	179	+ @click="editItem(props.item)"
	180	+ src="/static/icon/edit1.png"
	181	+ >
	182	+ <img
	183	+ style="cursor:pointer; height:20px; "
	184	+ class="mr-5"
	185	+ @click="deleteItem(props.item)"
	186	+ src="/static/icon/delete1.png"
	187	+ >
	188	+ </span>
	189	+ </td>
	190	+ </template>
	191	+ <v-alert
	192	+ slot="no-results"
	193	+ :value="true"
	194	+ color="error"
	195	+ icon="warning"
	196	+ >Your search for "{{ search }}" found no results.</v-alert>
	197	+ </v-data-table>
	198	+ </v-tab-item>
	199	+
	200	+ <!-- **** ADD multiple Classess **** -->
	201	+ <v-tab-item>
	202	+ <v-container>
	203	+ <v-snackbar
	204	+ :timeout="timeout"
	205	+ :top="y === 'top'"
	206	+ :right="x === 'right'"
	207	+ :vertical="mode === 'vertical'"
	208	+ v-model="snackbar"
	209	+ color="success"
	210	+ >{{ text }}</v-snackbar>
	211	+ <v-flex xs12 sm8 offset-sm2 class="top">
	212	+ <v-card flat>
	213	+ <v-container fluid fill-height>
	214	+ <v-layout align-center>
	215	+ <v-flex xs12>
	216	+ <v-flex offset-xs5>
	217	+ <v-avatar size="55px">
	218	+ <img src="/static/icon/user.png">
	219	+ </v-avatar>
	220	+ </v-flex>
	221	+ <v-form ref="form" v-model="valid" lazy-validation>
	222	+ <v-layout>
	223	+ <v-flex xs4 class="pt-4 subheading">
	224	+ <label class="right">Class Name:</label>
	225	+ </v-flex>
	226	+ <v-flex xs6 class="ml-3">
	227	+ <v-text-field
	228	+ v-model="addclasses.classNum"
	229	+ placeholder="fill your class Name"
	230	+ name="name"
	231	+ type="text"
	232	+ :rules="nameRules"
	233	+ required
	234	+ ></v-text-field>
	235	+ </v-flex>
	236	+ </v-layout>
	237	+ <v-layout>
	238	+ <v-flex xs12 sm9 offset-sm2>
	239	+ <v-card-actions>
	240	+ <v-btn @click="clear" round dark>clear</v-btn>
	241	+ <v-spacer></v-spacer>
	242	+ <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
	243	+ </v-card-actions>
	244	+ </v-flex>
	245	+ </v-layout>
	246	+ </v-form>
	247	+ </v-flex>
	248	+ </v-layout>
	249	+ </v-container>
	250	+ </v-card>
	251	+ </v-flex>
	252	+ </v-container>
	253	+ </v-tab-item>
	254	+ </v-tabs>
	255	+ </v-app>
	256	+</template>
	257	+
	258	+<script>
	259	+import http from "@/Services/http.js";
	260	+import Util from "@/util";
	261	+
	262	+export default {
	263	+ data: () => ({
	264	+ snackbar: false,
	265	+ y: "top",
	266	+ x: "right",
	267	+ mode: "",
	268	+ timeout: 3000,
	269	+ text: "",
	270	+ loading: false,
	271	+ date: null,
	272	+ search: "",
	273	+ menu: false,
	274	+ menu1: false,
	275	+ dialog: false,
	276	+ dialog1: false,
	277	+ valid: true,
	278	+ isActive: true,
	279	+ newActive: false,
	280	+ AddUsercredentials: {},
	281	+ pagination: {
	282	+ rowsPerPage: 15
	283	+ },
	284	+ nameRules: [v => !!v \|\| " Full Name is required"],
	285	+ headers: [
	286	+ {
	287	+ text: "No",
	288	+ align: "center",
	289	+ sortable: false,
	290	+ value: "No"
	291	+ },
	292	+ { text: "Class Name", value: "name", sortable: false, align: "center" },
	293	+ { text: "Action", value: "", sortable: false, align: "center" }
	294	+ ],
	295	+ desserts: [],
	296	+ editedIndex: -1,
	297	+ editedItem: {
	298	+ classNum: ""
	299	+ },
	300	+ addclasses:{
	301	+ classNum: ""
	302	+ },
	303	+ defaultItem: {
	304	+ classNum: ""
	305	+ },
	306	+ items: [
	307	+ {
	308	+ href: "/changepassword",
	309	+ title: "Change Password",
	310	+ click: e => {
	311	+ console.log(e);
	312	+ }
	313	+ },
	314	+ {
	315	+ href: "#",
	316	+ title: "Logout",
	317	+ click: e => {
	318	+ window.getApp.$emit("APP_LOGOUT");
	319	+ }
	320	+ }
	321	+ ]
	322	+ }),
	323	+ watch: {
	324	+ menu(val) {
	325	+ val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
	326	+ },
	327	+ menu1(val) {
	328	+ val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
	329	+ }
	330	+ },
	331	+ methods: {
	332	+ getClassList() {
	333	+ var token = this.$store.state.token;
	334	+ http()
	335	+ .get("/getClassesList", {
	336	+ headers: { Authorization: "Bearer " + token }
	337	+ })
	338	+ .then(response => {
	339	+ this.desserts = response.data.data;
	340	+ console.log("getClassList=====>", this.desserts);
	341	+ })
	342	+ .catch(err => {
	343	+ // console.log("err====>", err);
	344	+ this.$router.replace({ path: "/" });
	345	+ });
	346	+ },
	347	+ editItem(item) {
	348	+ this.editedIndex = this.desserts.indexOf(item);
	349	+ this.editedItem = Object.assign({}, item);
	350	+ this.dialog = true;
	351	+ },
	352	+ profile(item) {
	353	+ this.editedIndex = this.desserts.indexOf(item);
	354	+ this.editedItem = Object.assign({}, item);
	355	+ this.dialog1 = true;
	356	+ },
	357	+ deleteItem(item) {
	358	+ let deleteStudent = {
	359	+ classId: item._id
	360	+ };
	361	+ http()
	362	+ .delete(
	363	+ "/deleteClass",
	364	+ confirm("Are you sure you want to delete this?") && {
	365	+ params: deleteStudent
	366	+ }
	367	+ )
	368	+ .then(response => {
	369	+ // console.log("deleteUers",deleteStudent)
	370	+ if ((this.snackbar = true)) {
	371	+ this.text = "Successfully delete Existing User";
	372	+ }
	373	+ this.getClassList();
	374	+ })
	375	+ .catch(error => {
	376	+ // console.log(error);
	377	+ });
	378	+ },
	379	+ activeTab(type) {
	380	+ switch (type) {
	381	+ case "existing":
	382	+ this.newActive = false;
	383	+ this.isActive = true;
	384	+ break;
	385	+
	386	+ default:
	387	+ this.newActive = true;
	388	+ this.isActive = false;
	389	+ break;
	390	+ }
	391	+ },
	392	+ close() {
	393	+ this.dialog = false;
	394	+ setTimeout(() => {
	395	+ this.editedItem = Object.assign({}, this.defaultItem);
	396	+ this.editedIndex = -1;
	397	+ }, 300);
	398	+ },
	399	+ close1() {
	400	+ this.dialog1 = false;
	401	+ },
	402	+ submit() {
	403	+ if (this.$refs.form.validate()) {
	404	+ let addClass = {
	405	+ classNum: this.addclasses.classNum
	406	+ };
	407	+ console.log(addClass);
	408	+ http()
	409	+ .post("/createClass", addClass)
	410	+ .then(response => {
	411	+ this.getClassList();
	412	+ if ((this.snackbar = true)) {
	413	+ this.text = "New user added successfully";
	414	+ }
	415	+
	416	+ this.clear();
	417	+ })
	418	+ .catch(error => {
	419	+ // console.log(error);
	420	+ if ((this.snackbar = true)) {
	421	+ this.text = error.response.data.message;
	422	+ }
	423	+ });
	424	+ }
	425	+ },
	426	+ mail() {},
	427	+ download() {},
	428	+ clear() {
	429	+ this.$refs.form.reset();
	430	+ },
	431	+ save() {
	432	+ let editClass = {
	433	+ classId: this.editedItem._id,
	434	+ classNum: this.editedItem.classNum
	435	+ };
	436	+ http()
	437	+ .put("/updateClass", editClass)
	438	+ .then(response => {
	439	+ console.log("editClass", editClass);
	440	+ if ((this.snackbar = true)) {
	441	+ this.text = "Successfully Edit Existing User";
	442	+ }
	443	+ this.getClassList();
	444	+ })
	445	+ .catch(error => {
	446	+ // console.log(error);
	447	+ });
	448	+ this.close();
	449	+ },
	450	+ handleDrawerToggle() {
	451	+ window.getApp.$emit("APP_DRAWER_TOGGLED");
	452	+ },
	453	+ handleFullScreen() {
	454	+ Util.toggleFullScreen();
	455	+ }
	456	+ },
	457	+ mounted() {
	458	+ this.getClassList();
	459	+ // console.log("Id",this.$store.state.id)
	460	+ // console.log("token",this.$store.state.token)
	461	+ },
	462	+ computed: {
	463	+ toolbarColor() {
	464	+ return this.$vuetify.options.extra.mainNav;
	465	+ }
	466	+ }
	467	+};
	468	+</script>
	469	+<style scoped>
	470	+.v-tabs__div {
	471	+ text-transform: none;
	472	+}
	473	+.v-input__prepend-outer {
	474	+ margin-right: 0px !important;
	475	+}
	476	+.v-card__actions .v-btn {
	477	+ margin: 0 15px;
	478	+ min-width: 120px;
	479	+}
	480	+.primary {
	481	+ background-color: #aaa !important;
	482	+ border-color: #aaa !important;
	483	+}
	484	+h4 {
	485	+ background-repeat: no-repeat;
	486	+ padding: 8px;
	487	+ margin: auto;
	488	+ font-size: 25px;
	489	+}
	490	+#name {
	491	+ position: absolute;
	492	+ left: 100px;
	493	+ top: 17px;
	494	+}
	495	+#icon {
	496	+ position: absolute;
	497	+ right: 8px;
	498	+ top: 8px;
	499	+}
	500	+#m {
	501	+ position: relative;
	502	+ left: 135px;
	503	+ top: -15px;
	504	+}
	505	+#G {
	506	+ position: absolute;
	507	+ top: 38px;
	508	+ color: white;
	509	+}
	510	+#bt {
	511	+ position: relative;
	512	+ top: -20px;
	513	+ left: 115px;
	514	+}
	515	+#e {
	516	+ position: relative;
	517	+ top: 5px;
	518	+ right: -30px;
	519	+ height: 17px;
	520	+ cursor: pointer;
	521	+}
	522	+#d {
	523	+ position: relative;
	524	+ top: 5px;
	525	+ right: -70px;
	526	+ height: 17px;
	527	+ cursor: pointer;
	528	+}
	529	+#td {
	530	+ border: 1px solid #dddddd;
	531	+ text-align: left;
	532	+ padding: 8px;
	533	+}
	534	+#dialog {
	535	+ height: 550px;
	536	+}
	537	+.active {
	538	+ background-color: black;
	539	+ color: white !important;
	540	+}
	541	+.activebtn {
	542	+ color: black !important;
	543	+}
	544	+#flex {
	545	+ height: 300px;
	546	+}
	547	+.top {
	548	+ margin-top: 100px;
	549	+}
	550	+.v-tabs__item a {
	551	+ font-size: 16px !important;
	552	+}
	553	+@media screen and (max-width: 769px) {
	554	+ .top {
	555	+ margin-top: 0 !important;
	556	+ }
	557	+ .userSearch .v-icon {
	558	+ font-size: 20px !important;
	559	+ margin-left: 20px;
	560	+ }
	561	+}
	562	+@media screen and (max-width: 380px) {
	563	+ .right {
	564	+ float: none !important;
	565	+ }
	566	+ .subheading {
	567	+ font-size: 14px !important;
	568	+ }
	569	+ .v-card__actions .v-btn {
	570	+ margin: 0 0px;
	571	+ min-width: 100px;
	572	+ }
	573	+ .subheading {
	574	+ font-size: 12px !important;
	575	+ }
	576	+ h5 {
	577	+ font-size: 13px;
	578	+ }
	579	+}
	580	+.v-icon {
	581	+ font-size: 30px;
	582	+}
	583	+@media screen and (min-width: 1270px) {
	584	+ .hide {
	585	+ display: none;
	586	+ }
	587	+}
	588	+@media screen and (max-width: 420px) {
	589	+ .userSearch .v-text-field .v-label {
	590	+ line-height: 24px !important;
	591	+ }
	592	+ .userSearch .v-label {
	593	+ font-size: 13px !important;
	594	+ }
	595	+ .v-list__tile {
	596	+ font-size: 14px;
	597	+ padding: 0 10px;
	598	+ }
	599	+ .name {
	600	+ font-size: 15px;
	601	+ }
	602	+}
	603	+</style>
0	604	\ No newline at end of file
...	...