design and functionality add api add event,edit event,view event, delete event in Event page

Neeraj Sharma
1 parent 1ed5425530
Showing 1 changed file with 749 additions and 0 deletions Show diff stats
src/pages/Event/event.vue
@@ -0,0 +1,749 @@
+<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 EVENTS ****** -->
+      <v-flex xs7 sm3 class="userSearch">
+        <v-text-field
+          flat
+          append-icon="search"
+          label="Find your Teachers"
+          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 Event</v-tab>
+      <v-tab
+        ripple
+        @click="activeTab('new')"
+        v-bind:class="{ active: newActive }"
+        id="tab1"
+        User
+        class="subheading"
+      >Add New Event</v-tab>
+
+      <!-- ****** EDITS  EVENTS DETAILS ****** -->
+
+      <v-tab-item>
+        <v-snackbar
+          :timeout="timeout"
+          :top="y === 'top'"
+          :right="x === 'right'"
+          :vertical="mode === 'vertical'"
+          v-model="snackbar"
+          color="success"
+        >{{ text }}</v-snackbar>
+        <v-dialog v-model="dialog" max-width="600px">
+          <v-flex xs12 sm12 class>
+            <v-toolbar color="white">
+              <v-spacer></v-spacer>
+              <v-toolbar-title>Edit Profile</v-toolbar-title>
+              <v-spacer></v-spacer>
+            </v-toolbar>
+            <v-card flat>
+              <v-form ref="form">
+                <v-container fluid>
+                  <v-layout>
+                    <v-flex
+                      xs12
+                      class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
+                    >
+                      <v-avatar size="100px">
+                        <img src="/static/icon/user.png" v-if="!imageUrl">
+                      </v-avatar>
+                      <input
+                        type="file"
+                        style="display: none"
+                        ref="image"
+                        accept="image/*"
+                        @change="onFilePicked"
+                      >
+                      <img
+                        :src="imageData.imageUrl"
+                        height="150"
+                        v-if="imageUrl"
+                        style="border-radius:50%; width:200px"
+                      >
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <!-- <v-flex xs12 sm6> -->
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Title:</label>
+                        </v-flex>
+                        <v-flex xs6 class="ml-3">
+                          <v-text-field
+                            v-model="editedItem.title"
+                            placeholder="fill your Title"
+                            name="name"
+                            type="text"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    <!-- </v-flex> -->
+                    <!-- <v-flex xs12 sm6> -->
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Description:</label>
+                        </v-flex>
+                        <v-flex xs6 class="ml-3">
+                          <v-text-field
+                            placeholder="fill your Description"
+                            v-model="editedItem.description"
+                            type="text"
+                            name="email"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                  </v-layout>
+                    <v-flex xs12 sm9 offset-sm2>
+                      <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-flex>
+                  </v-layout>
+                </v-container>
+              </v-form>
+            </v-card>
+          </v-flex>
+        </v-dialog>
+
+        <!-- ****** VIEW PROFIL EVENTS ******  -->
+
+        <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">Title:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.title }}</h5>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs5 sm6>
+                        <h5 class="right my-1">Description:</h5>
+                      </v-flex>
+                      <v-flex sm6 xs8>
+                        <h5 class="my-1">{{ editedItem.description }}</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 EVENTS 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.title}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.description}}</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 EVENTS ****** -->
+
+      <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-form ref="form" v-model="valid" lazy-validation>
+                      <v-layout>
+                        <v-flex
+                          xs12
+                          class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
+                        >
+                          <v-avatar size="100px">
+                            <img src="/static/icon/user.png" v-if="!imageUrl">
+                          </v-avatar>
+                          <input
+                            type="file"
+                            style="display: none"
+                            ref="image"
+                            accept="image/*"
+                            @change="onFilePicked"
+                          >
+                          <img
+                            :src="imageData.imageUrl"
+                            height="150"
+                            v-if="imageUrl"
+                            style="border-radius:50%; width:200px"
+                          >
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Title:</label>
+                        </v-flex>
+                        <v-flex xs6 class="ml-3">
+                          <v-text-field
+                            v-model="addEvents.title"
+                            placeholder="fill your Title"
+                            name="name"
+                            type="text"
+                            :rules="titleRules"
+                            required
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Description:</label>
+                        </v-flex>
+                        <v-flex xs6 class="ml-3">
+                          <v-text-field
+                            v-model="addEvents.description"
+                            placeholder="fill your Description"
+                            name="name"
+                            type="text"
+                            :rules="descriptionRules"
+                            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,
+    addclass: [],
+    addSection: [],
+    gender: ["Male", "Female"],
+    AddUsercredentials: {},
+    pagination: {
+      rowsPerPage: 15
+    },
+    imageData: {},
+    imageName: "",
+    imageUrl: "",
+    imageFile: "",
+    titleRules: [v => !!v || " Title is required"],
+    descriptionRules: [v => !!v || " Description is required"],
+    headers: [
+      {
+        text: "No",
+        align: "center",
+        sortable: false,
+        value: "No"
+      },
+      { text: "Title", value: "title", sortable: false, align: "center" },
+      { text: "Description", value: "description", sortable: false, align: "center" },
+      { text: "Action", value: "", sortable: false, align: "center" }
+    ],
+    desserts: [],
+    editedIndex: -1,
+    addEvents: {
+      title: "",
+      description: ""
+    },
+    editedItem: {
+      title: "",
+      description: ""
+    },
+    defaultItem: {
+      title: "",
+      description: ""
+    },
+    userName: "",
+    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: {
+    pickFile() {
+      this.$refs.image.click();
+    },
+
+    onFilePicked(e) {
+      // console.log(e)
+      const files = e.target.files;
+      this.imageData.upload = e.target.files[0];
+      if (files[0] !== undefined) {
+        this.imageName = files[0].name;
+        if (this.imageName.lastIndexOf(".") <= 0) {
+          return;
+        }
+        const fr = new FileReader();
+        fr.readAsDataURL(files[0]);
+        fr.addEventListener("load", () => {
+          this.imageUrl = fr.result;
+          this.imageFile = files[0]; // this is an image file that can be sent to server...
+          this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
+          console.log("upload=======>", this.imageData.imageUrl);
+          console.log("imageFile", this.imageFile);
+        });
+      } else {
+        this.imageName = "";
+        this.imageFile = "";
+        this.imageUrl = "";
+      }
+    },
+    getEventList() {
+      var token = this.$store.state.token;
+      http()
+        .get("/getEventsList", {
+          headers: { Authorization: "Bearer " + token }
+        })
+        .then(response => {
+          this.desserts = response.data.data;
+          // console.log("getEventList=====>",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 deleteEvent = {
+        eventId: item._id
+      };
+      http()
+        .delete(
+          "/deleteEvent",
+          confirm("Are you sure you want to delete this?") && {
+            params: deleteEvent
+          }
+        )
+        .then(response => {
+          // console.log("deleteUers",deleteEvent)
+          if ((this.snackbar = true)) {
+            this.text = "Successfully delete Existing User";
+          }
+          this.getEventList();
+        })
+        .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 imageData = new FormData();
+        imageData.append("upload", this.imageFile);
+        console.log(imageData);
+        let addEvent = {
+          title: this.addEvents.title,
+          description: this.addEvents.description
+        };
+        http()
+          .post("/createEvent", addEvent)
+          .then(response => {
+            // console.log("addEvent=====>",addEvent)
+            if ((this.snackbar = true)) {
+              this.text = "New user added successfully";
+            }
+            this.getEventList();
+            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 imageData = new FormData();
+      imageData.append("upload", this.imageFile);
+      console.log(imageData);
+      let editEvent = {
+        eventId: this.editedItem._id,
+        title: this.editedItem.title,
+        description: this.editedItem.description,
+        imageData
+      };
+      http()
+        .put("/updateEvent", editEvent)
+        .then(response => {
+          // console.log("editEvent",editEvent);
+          if ((this.snackbar = true)) {
+            this.text = "Successfully Edit Existing User";
+          }
+          this.getEventList();
+        })
+        .catch(error => {
+          // console.log(error);
+        });
+      this.close();
+    },
+    handleDrawerToggle() {
+      window.getApp.$emit("APP_DRAWER_TOGGLED");
+    },
+    handleFullScreen() {
+      Util.toggleFullScreen();
+    }
+  },
+  mounted() {
+    this.getEventList();
+  },
+  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;
+  }
+  /* .searchIcon .v-icon {
+    font-size: 20px;
+    margin-left: 20px;
+} */
+  .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: 962px) {
+.imglogo{
+    position: absolute;
+    top: 13px;
+    left: 13px !important;
+    width: 70px;
+    height: 24px;
+} */
+}
+@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,749 @@
	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 EVENTS **** -->
	8	+ <v-flex xs7 sm3 class="userSearch">
	9	+ <v-text-field
	10	+ flat
	11	+ append-icon="search"
	12	+ label="Find your Teachers"
	13	+ v-model="search"
	14	+ color="white"
	15	+ dark
	16	+ ></v-text-field>
	17	+ </v-flex>
	18	+ <v-spacer></v-spacer>
	19	+ <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
	20	+ <v-btn icon large flat slot="activator">
	21	+ <v-avatar size="40px">
	22	+ <img src="/static/icon/user.png">
	23	+ </v-avatar>
	24	+ </v-btn>
	25	+ <v-list class="pa-0">
	26	+ <v-list-tile
	27	+ v-for="(item,index) in items"
	28	+ :to="!item.href ? { name: item.name } : null"
	29	+ :href="item.href"
	30	+ @click="item.click"
	31	+ ripple="ripple"
	32	+ :disabled="item.disabled"
	33	+ :target="item.target"
	34	+ rel="noopener"
	35	+ :key="index"
	36	+ >
	37	+ <v-list-tile-action v-if="item.icon">
	38	+ <v-icon>{{ item.icon }}</v-icon>
	39	+ </v-list-tile-action>
	40	+ <v-list-tile-content>
	41	+ <v-list-tile-title>{{ item.title }}</v-list-tile-title>
	42	+ </v-list-tile-content>
	43	+ </v-list-tile>
	44	+ </v-list>
	45	+ </v-menu>
	46	+ </v-toolbar>
	47	+ <v-tabs grow slider-color="black">
	48	+ <v-tab
	49	+ ripple
	50	+ @click="activeTab('existing')"
	51	+ v-bind:class="{ active: isActive }"
	52	+ id="tab"
	53	+ class="subheading"
	54	+ >Existing Event</v-tab>
	55	+ <v-tab
	56	+ ripple
	57	+ @click="activeTab('new')"
	58	+ v-bind:class="{ active: newActive }"
	59	+ id="tab1"
	60	+ User
	61	+ class="subheading"
	62	+ >Add New Event</v-tab>
	63	+
	64	+ <!-- **** EDITS EVENTS DETAILS **** -->
	65	+
	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="600px">
	76	+ <v-flex xs12 sm12 class>
	77	+ <v-toolbar color="white">
	78	+ <v-spacer></v-spacer>
	79	+ <v-toolbar-title>Edit Profile</v-toolbar-title>
	80	+ <v-spacer></v-spacer>
	81	+ </v-toolbar>
	82	+ <v-card flat>
	83	+ <v-form ref="form">
	84	+ <v-container fluid>
	85	+ <v-layout>
	86	+ <v-flex
	87	+ xs12
	88	+ class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
	89	+ >
	90	+ <v-avatar size="100px">
	91	+ <img src="/static/icon/user.png" v-if="!imageUrl">
	92	+ </v-avatar>
	93	+ <input
	94	+ type="file"
	95	+ style="display: none"
	96	+ ref="image"
	97	+ accept="image/*"
	98	+ @change="onFilePicked"
	99	+ >
	100	+ <img
	101	+ :src="imageData.imageUrl"
	102	+ height="150"
	103	+ v-if="imageUrl"
	104	+ style="border-radius:50%; width:200px"
	105	+ >
	106	+ </v-flex>
	107	+ </v-layout>
	108	+ <v-layout>
	109	+ <!-- <v-flex xs12 sm6> -->
	110	+ <v-layout>
	111	+ <v-flex xs4 class="pt-4 subheading">
	112	+ <label class="right">Title:</label>
	113	+ </v-flex>
	114	+ <v-flex xs6 class="ml-3">
	115	+ <v-text-field
	116	+ v-model="editedItem.title"
	117	+ placeholder="fill your Title"
	118	+ name="name"
	119	+ type="text"
	120	+ required
	121	+ ></v-text-field>
	122	+ </v-flex>
	123	+ </v-layout>
	124	+ <!-- </v-flex> -->
	125	+ <!-- <v-flex xs12 sm6> -->
	126	+ <v-layout>
	127	+ <v-flex xs4 class="pt-4 subheading">
	128	+ <label class="right">Description:</label>
	129	+ </v-flex>
	130	+ <v-flex xs6 class="ml-3">
	131	+ <v-text-field
	132	+ placeholder="fill your Description"
	133	+ v-model="editedItem.description"
	134	+ type="text"
	135	+ name="email"
	136	+ required
	137	+ ></v-text-field>
	138	+ </v-flex>
	139	+ </v-layout>
	140	+ </v-layout>
	141	+ <v-flex xs12 sm9 offset-sm2>
	142	+ <v-card-actions>
	143	+ <v-btn round dark @click.native="close">Cancel</v-btn>
	144	+ <v-spacer></v-spacer>
	145	+ <v-btn round dark @click="save">Save</v-btn>
	146	+ </v-card-actions>
	147	+ </v-flex>
	148	+ </v-layout>
	149	+ </v-container>
	150	+ </v-form>
	151	+ </v-card>
	152	+ </v-flex>
	153	+ </v-dialog>
	154	+
	155	+ <!-- **** VIEW PROFIL EVENTS **** -->
	156	+
	157	+ <v-dialog v-model="dialog1" max-width="600px">
	158	+ <v-toolbar color="white">
	159	+ <v-spacer></v-spacer>
	160	+ <v-toolbar-title>Profile</v-toolbar-title>
	161	+ <v-spacer></v-spacer>
	162	+ <v-icon @click="close1">close</v-icon>
	163	+ </v-toolbar>
	164	+ <v-card>
	165	+ <v-flex align-center justify-center layout text-xs-center>
	166	+ <v-avatar size="50px" style="position:absolute; top:20px;">
	167	+ <img src="/static/icon/user.png">
	168	+ </v-avatar>
	169	+ </v-flex>
	170	+ <v-card-text>
	171	+ <v-container grid-list-md>
	172	+ <v-layout wrap>
	173	+ <v-flex>
	174	+ <br>
	175	+ <br>
	176	+ <v-layout>
	177	+ <v-flex xs5 sm6>
	178	+ <h5 class="right my-1">Title:</h5>
	179	+ </v-flex>
	180	+ <v-flex sm6 xs8>
	181	+ <h5 class="my-1">{{ editedItem.title }}</h5>
	182	+ </v-flex>
	183	+ </v-layout>
	184	+ <v-layout>
	185	+ <v-flex xs5 sm6>
	186	+ <h5 class="right my-1">Description:</h5>
	187	+ </v-flex>
	188	+ <v-flex sm6 xs8>
	189	+ <h5 class="my-1">{{ editedItem.description }}</h5>
	190	+ </v-flex>
	191	+ </v-layout>
	192	+ </v-flex>
	193	+ </v-layout>
	194	+ </v-container>
	195	+ </v-card-text>
	196	+ </v-card>
	197	+ </v-dialog>
	198	+
	199	+ <v-snackbar
	200	+ :timeout="timeout"
	201	+ :top="y === 'top'"
	202	+ :right="x === 'right'"
	203	+ :vertical="mode === 'vertical'"
	204	+ v-model="snackbar"
	205	+ color="success"
	206	+ >{{ text }}</v-snackbar>
	207	+
	208	+ <!-- **** EXISTING-USERS EVENTS TABLE **** -->
	209	+ <v-data-table
	210	+ :headers="headers"
	211	+ :items="desserts"
	212	+ :pagination.sync="pagination"
	213	+ :search="search"
	214	+ >
	215	+ <template slot="items" slot-scope="props">
	216	+ <td id="td" class="text-xs-center">{{ props.index}}</td>
	217	+ <td id="td" class="text-xs-center">{{ props.item.title}}</td>
	218	+ <td id="td" class="text-xs-center">{{ props.item.description}}</td>
	219	+
	220	+ <td class="text-xs-center">
	221	+ <span>
	222	+ <img
	223	+ style="cursor:pointer; width:25px; height:18px; "
	224	+ class="mr-5"
	225	+ @click="profile(props.item)"
	226	+ src="/static/icon/eye1.png"
	227	+ >
	228	+ <img
	229	+ style="cursor:pointer; width:20px; height:18px; "
	230	+ class="mr-5"
	231	+ @click="editItem(props.item)"
	232	+ src="/static/icon/edit1.png"
	233	+ >
	234	+ <img
	235	+ style="cursor:pointer; height:20px; "
	236	+ class="mr-5"
	237	+ @click="deleteItem(props.item)"
	238	+ src="/static/icon/delete1.png"
	239	+ >
	240	+ </span>
	241	+ </td>
	242	+ </template>
	243	+ <v-alert
	244	+ slot="no-results"
	245	+ :value="true"
	246	+ color="error"
	247	+ icon="warning"
	248	+ >Your search for "{{ search }}" found no results.</v-alert>
	249	+ </v-data-table>
	250	+ </v-tab-item>
	251	+
	252	+ <!-- **** ADD MULTIPLE EVENTS **** -->
	253	+
	254	+ <v-tab-item>
	255	+ <v-container>
	256	+ <v-snackbar
	257	+ :timeout="timeout"
	258	+ :top="y === 'top'"
	259	+ :right="x === 'right'"
	260	+ :vertical="mode === 'vertical'"
	261	+ v-model="snackbar"
	262	+ color="success"
	263	+ >{{ text }}</v-snackbar>
	264	+ <v-flex xs12 sm8 offset-sm2 class="top">
	265	+ <v-card flat>
	266	+ <v-container fluid fill-height>
	267	+ <v-layout align-center>
	268	+ <v-flex xs12>
	269	+ <v-form ref="form" v-model="valid" lazy-validation>
	270	+ <v-layout>
	271	+ <v-flex
	272	+ xs12
	273	+ class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
	274	+ >
	275	+ <v-avatar size="100px">
	276	+ <img src="/static/icon/user.png" v-if="!imageUrl">
	277	+ </v-avatar>
	278	+ <input
	279	+ type="file"
	280	+ style="display: none"
	281	+ ref="image"
	282	+ accept="image/*"
	283	+ @change="onFilePicked"
	284	+ >
	285	+ <img
	286	+ :src="imageData.imageUrl"
	287	+ height="150"
	288	+ v-if="imageUrl"
	289	+ style="border-radius:50%; width:200px"
	290	+ >
	291	+ </v-flex>
	292	+ </v-layout>
	293	+ <v-layout>
	294	+ <v-flex xs4 class="pt-4 subheading">
	295	+ <label class="right">Title:</label>
	296	+ </v-flex>
	297	+ <v-flex xs6 class="ml-3">
	298	+ <v-text-field
	299	+ v-model="addEvents.title"
	300	+ placeholder="fill your Title"
	301	+ name="name"
	302	+ type="text"
	303	+ :rules="titleRules"
	304	+ required
	305	+ ></v-text-field>
	306	+ </v-flex>
	307	+ </v-layout>
	308	+ <v-layout>
	309	+ <v-flex xs4 class="pt-4 subheading">
	310	+ <label class="right">Description:</label>
	311	+ </v-flex>
	312	+ <v-flex xs6 class="ml-3">
	313	+ <v-text-field
	314	+ v-model="addEvents.description"
	315	+ placeholder="fill your Description"
	316	+ name="name"
	317	+ type="text"
	318	+ :rules="descriptionRules"
	319	+ required
	320	+ ></v-text-field>
	321	+ </v-flex>
	322	+ </v-layout>
	323	+ <v-layout>
	324	+ <v-flex xs12 sm9 offset-sm2>
	325	+ <v-card-actions>
	326	+ <v-btn @click="clear" round dark>clear</v-btn>
	327	+ <v-spacer></v-spacer>
	328	+ <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
	329	+ </v-card-actions>
	330	+ </v-flex>
	331	+ </v-layout>
	332	+ </v-form>
	333	+ </v-flex>
	334	+ </v-layout>
	335	+ </v-container>
	336	+ </v-card>
	337	+ </v-flex>
	338	+ </v-container>
	339	+ </v-tab-item>
	340	+ </v-tabs>
	341	+ </v-app>
	342	+</template>
	343	+
	344	+<script>
	345	+import http from "@/Services/http.js";
	346	+import Util from "@/util";
	347	+
	348	+export default {
	349	+ data: () => ({
	350	+ snackbar: false,
	351	+ y: "top",
	352	+ x: "right",
	353	+ mode: "",
	354	+ timeout: 3000,
	355	+ text: "",
	356	+ loading: false,
	357	+ date: null,
	358	+ search: "",
	359	+ menu: false,
	360	+ menu1: false,
	361	+ dialog: false,
	362	+ dialog1: false,
	363	+ valid: true,
	364	+ isActive: true,
	365	+ newActive: false,
	366	+ addclass: [],
	367	+ addSection: [],
	368	+ gender: ["Male", "Female"],
	369	+ AddUsercredentials: {},
	370	+ pagination: {
	371	+ rowsPerPage: 15
	372	+ },
	373	+ imageData: {},
	374	+ imageName: "",
	375	+ imageUrl: "",
	376	+ imageFile: "",
	377	+ titleRules: [v => !!v \|\| " Title is required"],
	378	+ descriptionRules: [v => !!v \|\| " Description is required"],
	379	+ headers: [
	380	+ {
	381	+ text: "No",
	382	+ align: "center",
	383	+ sortable: false,
	384	+ value: "No"
	385	+ },
	386	+ { text: "Title", value: "title", sortable: false, align: "center" },
	387	+ { text: "Description", value: "description", sortable: false, align: "center" },
	388	+ { text: "Action", value: "", sortable: false, align: "center" }
	389	+ ],
	390	+ desserts: [],
	391	+ editedIndex: -1,
	392	+ addEvents: {
	393	+ title: "",
	394	+ description: ""
	395	+ },
	396	+ editedItem: {
	397	+ title: "",
	398	+ description: ""
	399	+ },
	400	+ defaultItem: {
	401	+ title: "",
	402	+ description: ""
	403	+ },
	404	+ userName: "",
	405	+ items: [
	406	+ {
	407	+ href: "/changepassword",
	408	+ title: "Change Password",
	409	+ click: e => {
	410	+ console.log(e);
	411	+ }
	412	+ },
	413	+ {
	414	+ href: "#",
	415	+ title: "Logout",
	416	+ click: e => {
	417	+ window.getApp.$emit("APP_LOGOUT");
	418	+ }
	419	+ }
	420	+ ]
	421	+ }),
	422	+ watch: {
	423	+ menu(val) {
	424	+ val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
	425	+ },
	426	+ menu1(val) {
	427	+ val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
	428	+ }
	429	+ },
	430	+ methods: {
	431	+ pickFile() {
	432	+ this.$refs.image.click();
	433	+ },
	434	+
	435	+ onFilePicked(e) {
	436	+ // console.log(e)
	437	+ const files = e.target.files;
	438	+ this.imageData.upload = e.target.files[0];
	439	+ if (files[0] !== undefined) {
	440	+ this.imageName = files[0].name;
	441	+ if (this.imageName.lastIndexOf(".") <= 0) {
	442	+ return;
	443	+ }
	444	+ const fr = new FileReader();
	445	+ fr.readAsDataURL(files[0]);
	446	+ fr.addEventListener("load", () => {
	447	+ this.imageUrl = fr.result;
	448	+ this.imageFile = files[0]; // this is an image file that can be sent to server...
	449	+ this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
	450	+ console.log("upload=======>", this.imageData.imageUrl);
	451	+ console.log("imageFile", this.imageFile);
	452	+ });
	453	+ } else {
	454	+ this.imageName = "";
	455	+ this.imageFile = "";
	456	+ this.imageUrl = "";
	457	+ }
	458	+ },
	459	+ getEventList() {
	460	+ var token = this.$store.state.token;
	461	+ http()
	462	+ .get("/getEventsList", {
	463	+ headers: { Authorization: "Bearer " + token }
	464	+ })
	465	+ .then(response => {
	466	+ this.desserts = response.data.data;
	467	+ // console.log("getEventList=====>",this.desserts)
	468	+ })
	469	+ .catch(err => {
	470	+ // console.log("err====>", err);
	471	+ // this.$router.replace({ path: "/" });
	472	+ });
	473	+ },
	474	+ editItem(item) {
	475	+ this.editedIndex = this.desserts.indexOf(item);
	476	+ this.editedItem = Object.assign({}, item);
	477	+ this.dialog = true;
	478	+ },
	479	+ profile(item) {
	480	+ this.editedIndex = this.desserts.indexOf(item);
	481	+ this.editedItem = Object.assign({}, item);
	482	+ this.dialog1 = true;
	483	+ },
	484	+ deleteItem(item) {
	485	+ let deleteEvent = {
	486	+ eventId: item._id
	487	+ };
	488	+ http()
	489	+ .delete(
	490	+ "/deleteEvent",
	491	+ confirm("Are you sure you want to delete this?") && {
	492	+ params: deleteEvent
	493	+ }
	494	+ )
	495	+ .then(response => {
	496	+ // console.log("deleteUers",deleteEvent)
	497	+ if ((this.snackbar = true)) {
	498	+ this.text = "Successfully delete Existing User";
	499	+ }
	500	+ this.getEventList();
	501	+ })
	502	+ .catch(error => {
	503	+ // console.log(error);
	504	+ });
	505	+ },
	506	+ activeTab(type) {
	507	+ switch (type) {
	508	+ case "existing":
	509	+ this.newActive = false;
	510	+ this.isActive = true;
	511	+ break;
	512	+
	513	+ default:
	514	+ this.newActive = true;
	515	+ this.isActive = false;
	516	+ break;
	517	+ }
	518	+ },
	519	+ close() {
	520	+ this.dialog = false;
	521	+ setTimeout(() => {
	522	+ this.editedItem = Object.assign({}, this.defaultItem);
	523	+ this.editedIndex = -1;
	524	+ }, 300);
	525	+ },
	526	+ close1() {
	527	+ this.dialog1 = false;
	528	+ },
	529	+ submit() {
	530	+ if (this.$refs.form.validate()) {
	531	+ let imageData = new FormData();
	532	+ imageData.append("upload", this.imageFile);
	533	+ console.log(imageData);
	534	+ let addEvent = {
	535	+ title: this.addEvents.title,
	536	+ description: this.addEvents.description
	537	+ };
	538	+ http()
	539	+ .post("/createEvent", addEvent)
	540	+ .then(response => {
	541	+ // console.log("addEvent=====>",addEvent)
	542	+ if ((this.snackbar = true)) {
	543	+ this.text = "New user added successfully";
	544	+ }
	545	+ this.getEventList();
	546	+ this.clear();
	547	+ })
	548	+ .catch(error => {
	549	+ // console.log(error);
	550	+ if ((this.snackbar = true)) {
	551	+ this.text = error.response.data.message;
	552	+ }
	553	+ });
	554	+ }
	555	+ },
	556	+ mail() {},
	557	+ download() {},
	558	+ clear() {
	559	+ this.$refs.form.reset();
	560	+ },
	561	+ save() {
	562	+ let imageData = new FormData();
	563	+ imageData.append("upload", this.imageFile);
	564	+ console.log(imageData);
	565	+ let editEvent = {
	566	+ eventId: this.editedItem._id,
	567	+ title: this.editedItem.title,
	568	+ description: this.editedItem.description,
	569	+ imageData
	570	+ };
	571	+ http()
	572	+ .put("/updateEvent", editEvent)
	573	+ .then(response => {
	574	+ // console.log("editEvent",editEvent);
	575	+ if ((this.snackbar = true)) {
	576	+ this.text = "Successfully Edit Existing User";
	577	+ }
	578	+ this.getEventList();
	579	+ })
	580	+ .catch(error => {
	581	+ // console.log(error);
	582	+ });
	583	+ this.close();
	584	+ },
	585	+ handleDrawerToggle() {
	586	+ window.getApp.$emit("APP_DRAWER_TOGGLED");
	587	+ },
	588	+ handleFullScreen() {
	589	+ Util.toggleFullScreen();
	590	+ }
	591	+ },
	592	+ mounted() {
	593	+ this.getEventList();
	594	+ },
	595	+ computed: {
	596	+ toolbarColor() {
	597	+ return this.$vuetify.options.extra.mainNav;
	598	+ }
	599	+ }
	600	+};
	601	+</script>
	602	+<style scoped>
	603	+.v-tabs__div {
	604	+ text-transform: none;
	605	+}
	606	+.v-input__prepend-outer {
	607	+ margin-right: 0px !important;
	608	+}
	609	+.v-card__actions .v-btn {
	610	+ margin: 0 15px;
	611	+ min-width: 120px;
	612	+}
	613	+.primary {
	614	+ background-color: #aaa !important;
	615	+ border-color: #aaa !important;
	616	+}
	617	+h4 {
	618	+ background-repeat: no-repeat;
	619	+ padding: 8px;
	620	+ margin: auto;
	621	+ font-size: 25px;
	622	+}
	623	+#name {
	624	+ position: absolute;
	625	+ left: 100px;
	626	+ top: 17px;
	627	+}
	628	+#icon {
	629	+ position: absolute;
	630	+ right: 8px;
	631	+ top: 8px;
	632	+}
	633	+#m {
	634	+ position: relative;
	635	+ left: 135px;
	636	+ top: -15px;
	637	+}
	638	+#G {
	639	+ position: absolute;
	640	+ top: 38px;
	641	+ color: white;
	642	+}
	643	+#bt {
	644	+ position: relative;
	645	+ top: -20px;
	646	+ left: 115px;
	647	+}
	648	+#e {
	649	+ position: relative;
	650	+ top: 5px;
	651	+ right: -30px;
	652	+ height: 17px;
	653	+ cursor: pointer;
	654	+}
	655	+#d {
	656	+ position: relative;
	657	+ top: 5px;
	658	+ right: -70px;
	659	+ height: 17px;
	660	+ cursor: pointer;
	661	+}
	662	+#td {
	663	+ border: 1px solid #dddddd;
	664	+ text-align: left;
	665	+ padding: 8px;
	666	+}
	667	+#dialog {
	668	+ height: 550px;
	669	+}
	670	+.active {
	671	+ background-color: black;
	672	+ color: white !important;
	673	+}
	674	+.activebtn {
	675	+ color: black !important;
	676	+}
	677	+#flex {
	678	+ height: 300px;
	679	+}
	680	+.top {
	681	+ margin-top: 100px;
	682	+}
	683	+.v-tabs__item a {
	684	+ font-size: 16px !important;
	685	+}
	686	+@media screen and (max-width: 769px) {
	687	+ .top {
	688	+ margin-top: 0 !important;
	689	+ }
	690	+ .userSearch .v-icon {
	691	+ font-size: 20px !important;
	692	+ margin-left: 20px;
	693	+ }
	694	+}
	695	+@media screen and (max-width: 380px) {
	696	+ .right {
	697	+ float: none !important;
	698	+ }
	699	+ .subheading {
	700	+ font-size: 14px !important;
	701	+ }
	702	+ .v-card__actions .v-btn {
	703	+ margin: 0 0px;
	704	+ min-width: 100px;
	705	+ }
	706	+ /* .searchIcon .v-icon {
	707	+ font-size: 20px;
	708	+ margin-left: 20px;
	709	+} */
	710	+ .subheading {
	711	+ font-size: 12px !important;
	712	+ }
	713	+ h5 {
	714	+ font-size: 13px;
	715	+ }
	716	+}
	717	+.v-icon {
	718	+ font-size: 30px;
	719	+}
	720	+@media screen and (min-width: 1270px) {
	721	+ .hide {
	722	+ display: none;
	723	+ }
	724	+ /* }
	725	+@media screen and (max-width: 962px) {
	726	+.imglogo{
	727	+ position: absolute;
	728	+ top: 13px;
	729	+ left: 13px !important;
	730	+ width: 70px;
	731	+ height: 24px;
	732	+} */
	733	+}
	734	+@media screen and (max-width: 420px) {
	735	+ .userSearch .v-text-field .v-label {
	736	+ line-height: 24px !important;
	737	+ }
	738	+ .userSearch .v-label {
	739	+ font-size: 13px !important;
	740	+ }
	741	+ .v-list__tile {
	742	+ font-size: 14px;
	743	+ padding: 0 10px;
	744	+ }
	745	+ .name {
	746	+ font-size: 15px;
	747	+ }
	748	+}
	749	+</style>
0	750	\ No newline at end of file
...	...