Continuando a implementar!

Author: markleymsm

client/src/App.vue

@@ -21,7 +21,7 @@
           </a>
         </li>
         <li>
-          <a href="/lists">
+          <a href="#/lists">
             <i class="material-icons">supervisor_account</i>
           </a>
         </li>

client/src/components/lists/lead.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="row">
+    <div class="col s12">
+      <h5>{{lead.email}}</h5>
+    </div>
+
+    <div class="col s6">
+      <div class="card">
+        <div class="card-content">
+          <table>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>campo</th>
+                <th>valor</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="data in lead.data">
+                <td>{{data.label}}</td>
+                <td>{{data.value}}</td>
+                <td>
+                  <a :href="'#/lists/' + list._id" class="btn">ver</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div class="col s6">
+      <div class="card">
+        <div class="card-content">
+          <span class="card-title">Listas ativas</span>
+          <table>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>campo</th>
+                <th>valor</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(list) in lead.lists">
+                <td>{{list.label}}</td>
+                <td>
+                  <a :href="'#/lists/' + list._id" class="btn">ver</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  computed: {
+    lead: function () {
+      return this.$store.state.lead.lead
+    }
+  },
+  mounted: function () {
+    this.$store.dispatch('getOneLead', this.$router.params.id)
+  }
+}
+</script>

client/src/components/lists/lists-view.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="row">
+    <div class="col s12">
+      <h5>Exibindo leads</h5>
+    </div>
+    <div class="col s12">
+      <div class="card">
+        <div class="card-content">
+          <table>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Emails</th>
+                <th>Listas</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(lead, index) in leads">
+                <td>{{ index }}</td>
+                <td>{{ lead.email }}</td>
+                <td>
+                  <div class="chip" v-for="chip in lead.lists">
+                    {{ chip.title }}
+                  </div>
+                </td>
+                <td>
+                  <a :href="'#/leads/' + lead._id" class="btn"></a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  computed: {
+    leads: function () {
+      return this.$store.state.lead.leads
+    }
+  },
+  mounted () {
+    this.$store.dispatch('getAllLeads', this.$route.params.id)
+  }
+}
+</script>

client/src/router/index.js

@@ -9,7 +9,10 @@ import EmailNew from '@/components/email/email-new'
 import EmailView from '@/components/email/email-view'
 import EmailEdit from '@/components/email/email-edit'
 import EmailRemove from '@/components/email/email-remove'
+
 import ListsList from '@/components/lists/lists-list'
+import ListsView from '@/components/lists/lists-view'
+import ListsLead from '@/components/lists/lead'
 
 Vue.use(Router)
 
@@ -57,6 +60,18 @@ let router = new Router({
       component: ListsList,
       meta: {requiresAuth: true}
     },
+    {
+      path: '/lists/:id',
+      name: 'ListsView',
+      component: ListsView,
+      meta: {requiresAuth: true}
+    },
+    {
+      path: '/leads/:id',
+      name: 'ListsLead',
+      component: ListsLead,
+      meta: {requiresAuth: true}
+    },
     {
       path: '/login',
       name: 'Login',

client/src/states/index.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex'
 import user from './modules/user'
 import email from './modules/email'
 import list from './modules/list'
+import lead from './modules/lead'
 
 window.axios = require('axios')
 window.axios.defaults.baseURL = process.env.SERVER
@@ -13,7 +14,8 @@ let config = {
   modules: {
     user: user,
     email: email,
-    list: list
+    list: list,
+    lead: lead
   }
 }
 

client/src/states/modules/lead.js

@@ -0,0 +1,29 @@
+
+export default {
+  state: {
+    leads: [],
+    lead: {}
+  },
+  mutations: {
+    updateLeads (state, data) {
+      state.leads = data
+    },
+    updateLead (state, data) {
+      state.lead = data
+    }
+  },
+  actions: {
+    getAllLeads (context, id) {
+      return window.axios.get('/api/leads-by-list/' + id).then((response) => {
+        context.commit('updateLeads', response.data.data)
+        return response
+      })
+    },
+    getOneLead (context, id) {
+      return window.axios.get('/api/leads/' + id).then((response) => {
+        context.commit('updateLead', response.data.data)
+        return response
+      })
+    }
+  }
+}

server/app.js

@@ -6,7 +6,7 @@ const logger = require('morgan');
 const mongoose = require('./src/db/connection');
 const cors = require('cors');
 const routes = require('./src/routes');
-const validator = require('express-validator');
+// const validator = require('express-validator');
 
 // let indexRouter = require('./routes/index');
 // let usersRouter = require('./routes/users');
@@ -23,7 +23,7 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
-app.use(validator());
+// app.use(validator());
 
 
 // app.use('/', indexRouter);

server/src/controllers/leads.js

@@ -1,15 +1,25 @@
 const model = require("../models/lead");
 const listModel = require("../models/list");
 const GenericController = require("./generic");
+const { check, validationResult } = require("express-validator");
 
 module.exports = function() {
   const controller = new GenericController(model);
 
   controller.subscribe = async function(req, res) {
-    req.checkBody("email", "Enter a valid email").isEmail();
-    req.checkBody("list", "List is required").exists();
+    // req.checkBody("email", "Enter a valid email").isEmail();
+    // req.checkBody("list", "List is required").exists();
 
-    let errors = req.validationErrors();
+    // let errors = req.validationErrors();
+
+    // if (errors) {
+    // return res.status(422).json(errors);
+    // }
+
+    check("email", "Enter a valid email").isEmail();
+    check("list", "List is required").exists();
+
+    errors = validationResult(req);
 
     if (errors) {
       return res.status(422).json(errors);
@@ -64,11 +74,31 @@ module.exports = function() {
       }
     });
 
-
     return res.json({
       status: "success"
     });
   };
 
+  controller.leadsByList = function(res, req) {
+    model
+      .find({ lists: { $in: [req.params.id] } })
+      .populate("lists")
+      .exec(function(err, leads) {
+        return res.json({ data: leads });
+      });
+  };
+
+  controller.view = function(req, res) {
+    model
+      .findById(req.params.id)
+      .populate("lists")
+      .exec((err, result) => {
+        if (err) {
+          return res.status(404).json(err);
+        }
+        return res.json({ data: result });
+      });
+  };
+
   return controller;
 };

server/src/routes/leads.js

@@ -3,6 +3,7 @@ module.exports = function(app) {
 
   app.post("/leads/subscribe", controller.subscribe);
 
+  app.get("/api/leads-by-list/:id", controller.leadsByList);
   app.get("/api/leads", controller.index);
   app.post("/api/leads", controller.add);
   app.get("/api/leads/:id", controller.view);