From 6566e8f2919d5b05a5b8f55a53881b9af6810b99 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Fri, 29 Mar 2019 13:05:59 +0530
Subject: [PATCH] design and functionality add api add News,edit News,view
 News, delete News in News page

---
 src/pages/News/news.vue | 872 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 872 insertions(+)
 create mode 100644 src/pages/News/news.vue

diff --git a/src/pages/News/news.vue b/src/pages/News/news.vue
new file mode 100644
index 0000000..439b151
--- /dev/null
+++ b/src/pages/News/news.vue
@@ -0,0 +1,872 @@
+<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 NEWS ****** -->
+      <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 News</v-tab>
+      <v-tab
+        ripple
+        @click="activeTab('new')"
+        v-bind:class="{ active: newActive }"
+        id="tab1"
+        User
+        class="subheading"
+      >Add News</v-tab>
+
+      <!-- ****** EDITS ALL NEWS 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="1000px">
+          <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">Select Class:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-select
+                            :items="addclass"
+                            label="Select Class"
+                            v-model="editedItem.select"
+                            item-text="classNum"
+                            item-value="_id"
+                            name="Select Class"
+                            @change="getSections(editedItem.select)"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12 sm6>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Select Section:</label>
+                        </v-flex>
+                        <v-flex xs8 class="ml-3">
+                          <v-select
+                            :items="addSection"
+                            label="Select Section"
+                            v-model="editedItem.selectSection"
+                            item-text="name"
+                            item-value="_id"
+                            name="Select Section"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </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 xs8 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 xs8 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-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs12 sm12>
+                      <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 ALL NEWS 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 NEWS 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 NEWS ****** -->
+
+      <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">Select Class:</label>
+                        </v-flex>
+                        <v-flex xs4 class="ml-3">
+                          <v-select
+                            :items="addclass"
+                            label="Select Class"
+                            v-model="editedItem.select"
+                            item-text="classNum"
+                            item-value="_id"
+                            name="Select Class"
+                            @change="getSections(editedItem.select)"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <v-flex xs12>
+                      <v-layout>
+                        <v-flex xs4 class="pt-4 subheading">
+                          <label class="right">Select Section:</label>
+                        </v-flex>
+                        <v-flex xs4 class="ml-3">
+                          <v-select
+                            :items="addSection"
+                            label="Select Section"
+                            v-model="editedItem.selectSection"
+                            item-text="name"
+                            item-value="_id"
+                            name="Select Section"
+                            required
+                          ></v-select>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                    <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="addNews.title"
+                            placeholder="fill your Title"
+                            name="name"
+                            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="addNews.description"
+                            type="text"
+                            name="email"
+                            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"],
+    headers: [
+      {
+        text: "No",
+        align: "center",
+        sortable: false,
+        value: "No"
+      },
+      { text: "Title", value: "title", sortable: false, align: "center" },
+      // { text: "Email", value: "email", sortable: false, align: "center" },
+      { text: "Description", value: "description", sortable: false, align: "center" },
+      { text: "Action", value: "", sortable: false, align: "center" }
+    ],
+    desserts: [],
+    editedIndex: -1,
+    addNews: {
+      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 = "";
+      }
+    },
+    getNewsList() {
+      var token = this.$store.state.token;
+      http()
+        .get("/getNewsList", {
+          headers: { Authorization: "Bearer " + token }
+        })
+        .then(response => {
+          this.desserts = response.data.data;
+          // console.log("getNewsList=====>",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;
+    },
+    // report(item) {
+    //   this.editedIndex = this.desserts.indexOf(item);
+    //   this.editedItem = Object.assign({}, item);
+    // this.dialog2 = true;
+    // },
+
+    deleteItem(item) {
+      let deleteNews = {
+        newsId: item._id
+      };
+      http()
+        .delete(
+          "/deleteNews",
+          confirm("Are you sure you want to delete this?") && {
+            params: deleteNews
+          }
+        )
+        .then(response => {
+          // console.log("deleteNews",deleteNews)
+          if ((this.snackbar = true)) {
+            this.text = "Successfully delete Existing User";
+          }
+          this.getNewsList();
+        })
+        .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;
+    },
+    // close2() {
+    //   this.dialog2 = false;
+    // },
+    submit() {
+      if (this.$refs.form.validate()) {
+        let imageData = new FormData();
+        imageData.append("upload", this.imageFile);
+        console.log(imageData);
+        let addNewses = {
+          title: this.addNews.title,
+          description: this.addNews.description,
+          // imageData
+        };
+        http()
+          .post("/createNews", addNewses)
+          .then(response => {
+            // console.log(addNewses)
+            if ((this.snackbar = true)) {
+              this.text = "New user added successfully";
+            }
+            this.getNewsList();
+            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 editNews = {
+        newsId: this.editedItem._id,
+        title: this.editedItem.title,
+        description: this.editedItem.description,
+        // imageData
+      };
+      http()
+        .put("/updateNews", editNews)
+        .then(response => {
+          // console.log("updateNews",updateNews);
+          if ((this.snackbar = true)) {
+            this.text = "Successfully Edit Existing User";
+          }
+          this.getNewsList();
+        })
+        .catch(error => {
+          // console.log(error);
+        });
+      this.close();
+    },
+    handleDrawerToggle() {
+      window.getApp.$emit("APP_DRAWER_TOGGLED");
+    },
+    handleFullScreen() {
+      Util.toggleFullScreen();
+    }
+  },
+  mounted() {
+    this.getNewsList();
+    var token = this.$store.state.token;
+    http()
+      .get("/getClassesList", {
+        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: "/" });
+      });
+  },
+
+  // 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;
+  }
+  /* .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
-- 
2.0.0