Iniciado meta 20

Criado componente para comparação de emails
ajustes de estilo CSS para responsividade

components/emailListCompare.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="box">
+    <b-tabs position="is-centered" class="block">
+      <b-tab-item label="Emails a serem adicionados">
+        <div v-for="student in students" :key="student.id">{{ student }}</div>
+      </b-tab-item>
+      <b-tab-item label="Emails a serem removidos"></b-tab-item>
+    </b-tabs>
+    <div class="level">
+      <div class="level-right">
+        <div class="level-item">
+          <button class="button is-primary">
+            Confirmar Alterações
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'EmailCompare',
+  data() {
+    return {
+      students: [
+        { id: 1, name: 'something1', email: '[email protected]' },
+        { id: 2, name: 'something1', email: '[email protected]' }
+      ]
+    }
+  }
+}
+</script>
+
+<style></style>

layouts/default.vue

@@ -247,4 +247,7 @@ export default {
   height: unset;
   min-height: 100vh;
 }
+.container {
+  margin: 4rem auto 4rem auto;
+}
 </style>

package.json

@@ -35,7 +35,7 @@
     "nuxt-fontawesome": "^0.4.0",
     "p-debounce": "^2.1.0",
     "rimraf": "^2.6.3",
-    "sqlite3": "^4.0.6"
+    "sqlite3": "^4.0.8"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^0.0.1",

pages/allStudents.vue

@@ -29,9 +29,3 @@ export default {
   }
 }
 </script>
-
-<style>
-.container {
-  height: 100vh;
-}
-</style>

pages/emailList.vue

@@ -1,32 +1,48 @@
 <template>
   <div class="container">
-    <div v-if="courseTag" class="container">
-      <export-email-list></export-email-list>
+    <div class="container">
+      <search-input
+        :key="courseTag"
+        :default-course="courseTag"
+        :title="'Lista de Email - Ativos'"
+        :is-active="1"
+      ></search-input>
+      <button class="button is-primary" @click="activateModal"></button>
+      <b-modal :active.sync="activate">
+        <email-compare></email-compare>
+      </b-modal>
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import ExportEmailList from '~/components/exportEmailList'
+import EmailCompare from '../components/emailListCompare'
+import SearchInput from '../components/searchInput'
 
 export default {
   name: 'Email',
-  middleware: 'auth',
+  middleware: ['auth', 'course'],
   components: {
-    ExportEmailList
+    EmailCompare,
+    SearchInput
+  },
+  data() {
+    return {
+      activate: false
+    }
   },
 
   computed: {
     ...mapState({
       courseTag: state => state.courseTag
     })
+  },
+
+  methods: {
+    activateModal() {
+      this.activate = !this.activate
+    }
   }
 }
 </script>
-
-<style>
-.container {
-  height: 100vh;
-}
-</style>

pages/formingStudents.vue

@@ -196,9 +196,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.container {
-  margin: 50px auto 50px auto;
-}
-</style>