design and functionality add Reminder data and showing Data in table by getData…

… api,edit Reminder,view Reminder, delete Reminder in Reminder page

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