manejo de usuarios

APP/pages/users.vue

@@ -0,0 +1,218 @@
+<template>
+<div>
+
+
+    <card class="col-12">
+        <el-table
+          :data="Users"
+          border
+          empty-text="No hay Ingresos registrados"
+          stripe
+          
+          style="width: 100%"
+        >
+          <el-TableColumn type="expand"> 
+              <template slot-scope="props">
+                   <p>Nombre: {{ props.row.name }}</p>
+                   <p>Correo: {{ props.row.email }}</p>
+                   <p>Permisos: {{ props.row.role }}</p> 
+                   <div class="imagen"><img  :src=props.row.image.secure_url width="200" height="200" /></div>
+       
+      </template>
+          </el-TableColumn>
+          <el-TableColumn prop="name" label="Nombre" sortable></el-TableColumn>
+          <el-TableColumn prop="email" label="Correo" sortable></el-TableColumn>
+                 
+          <el-TableColumn prop="role" label="Permisos" sortable></el-TableColumn>
+         
+         
+                    <el-TableColumn fixed="right">
+            <div slot-scope="{ row, $index }">
+                      <el-tooltip content="Delete" effect="light">
+                <base-button
+                  type="danger"
+                  icon
+                  size="sm"
+                  class="btn-link"
+                  @click="deleteUser(row._id)"
+                >
+                  <i class="el-icon-delete-solid"></i>
+                </base-button>
+              </el-tooltip>
+              </div>
+</el-TableColumn>
+  
+        </el-table>
+      </card>
+
+      <card class="card-login card-white">
+        <template slot="header">
+         <h1 class="card-title">Nuevo usuario </h1>
+        </template>
+
+        <div>
+          <base-input
+            name="name"
+            v-model="user.name"
+            placeholder="Name"
+            addon-left-icon="tim-icons icon-badge"
+            required
+          >
+          </base-input>
+
+          <base-input
+            name="email"
+            v-model="user.email"
+            placeholder="Email"
+            addon-left-icon="tim-icons icon-email-85"
+          >
+          </base-input>
+
+          <base-input
+            name="password"
+            v-model="user.password"
+            type="password"
+            placeholder="Password"
+            addon-left-icon="tim-icons icon-lock-circle"
+          >
+          </base-input>
+
+            <base-input>
+            <select class="form-control" v-model="user.role">
+              <option>USER</option>
+              <option>ADMIN</option>
+            </select>
+          </base-input>
+           
+      
+      
+      <input ref="upload"
+       type="file"
+       name="file-upload"
+       multiple=""
+       accept="image/jpeg, image/png"
+       @change="handleFileUpload( $event )">
+
+        </div>
+
+ 
+
+        <div slot="footer">
+          <base-button
+            native-type="submit"
+            type="info"
+            class="mb-3"
+            size="lg"
+            @click="register()"
+            block
+          >
+            Register
+          </base-button>
+
+        </div>
+      </card>
+    </div>
+  </div>
+</template>
+<script>
+import { Table, TableColumn } from "element-ui";
+import { Select, Option } from "element-ui";
+export default {
+  middleware: ["authenticated","authenticatedAdmin"],
+  components: {
+    [Table.name]: Table,
+    [TableColumn.name]: TableColumn,
+    [Option.name]: Option,
+    [Select.name]: Select,
+  },
+  //layout: "auth",
+  data() {
+    return {
+      user: {
+        name: "",
+        email: "",
+        password: "",
+        role:"USER",
+        files: "",
+      },
+      file: "",
+      Users: [],
+    };
+  },
+  mounted() {
+    
+    this.getUsers();
+  },
+  methods: {
+    handleFileUpload(event) {
+      this.user.files = event.target.files[0];
+    },
+    getUsers() {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+      };
+      this.$axios
+        .get("/users", axiosHeader)
+        .then((res) => {
+          this.Users = res.data.data;
+        })
+        .catch((e) => console.log(e));
+    },
+    register() {
+      let formData = new FormData();
+      formData.append("File", this.user.files);
+      this.user.files = "";
+      formData.append("user", JSON.stringify(this.user));
+      this.$axios
+        .post("/register", formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        })
+        .then((res) => {
+          this.$notify({
+            type: "success",
+            icon: "tim-icons icon-check-2",
+            message: "Success! Now you can login...",
+          });
+
+          this.user.name = "";
+          this.user.password = "";
+          this.user.email = "";
+          this.user.role="USER"
+          this.getUsers();
+        })
+        .catch((e) => {
+          this.$notify({
+            type: "danger",
+            icon: "tim-icons icon-alert-circle-exc",
+            message:
+              "No esta permitido la creaciøn de usuarios, o ya existe !!!",
+          });
+        });
+    },
+
+        deleteUser(id) {
+      const axiosHeader = {
+        headers: {
+          token: this.$store.state.auth.token,
+        },
+        params: {
+          id: id,
+        },
+      };
+      this.$axios
+        .delete("/user", axiosHeader)
+        .then((res) => {
+          this.getUsers();
+          
+        })
+        .catch((e) => console.log(e));
+    },
+  },
+};
+</script>
+<style>
+</style>