Activities 1 to 6

apps/vue-app/README.md

@@ -16,28 +16,20 @@ https://github.com/avil13/vue-sweetalert2
 
 https://vuelidate-next.netlify.app/
 
-# Activities Session 01
+## Activities
 
-## Render PostLayout.vue
+### /post-detail route
+1. Finish the functionality there to add a new comment. Create the axios call to add a new comment, you have to use validator in the input, sweet alerts, props, etc
 
-1. Existe el componente **/layouts/PostLayout.vue**, debes exportalo y rederizalo en **App.vue**
+### CategoryForm
+2. Implement the alerts mixin to show a success or error message when the api call is made
+3. Add the functionality to know when you are editing or creating a category (you can use a watch here)
+4. Add the call to update a category
 
-## Render PostView.vue component
+### CategoryList
+5. Implement the alerts mixin to show a success or error message when the api call delete is made
 
-1. Existe un archivo llamado **PostView.html**, copia y pega su contenido en el template de **PostView.vue**. Elimina el archivo html
-2. Del archivo **PostView.css** copia su contenido y pégalo dentro del style de **PostView.vue**
-3. Elimina el archivo css
-4. Rederiza este componente en **PostLayout.vue**
-
-## Render Header components
-
-1. Copiar y pegar todo el bloque que indica el comentario **Inicio HeaderPosts.vue** hasta **Fin HeaderPosts.vue** dentro del template de **HeaderPost.vue**. Renderizarlo una vez en el mismo lugar donde estaba su bloque de comentarios en **PostView.vue**
-2. Copiar y pegar todo el bloque que indica el comentario **Inicio CategoriesList.vue** hasta **Fin CategoriesList.vue** dentro del template de **CategoriesList.vue** y agregarlo al template del componente creado, renderizarlo una vez dentro de **HeaderPost.vue** en el mismo lugar donde se encontraba su bloque de comentario.
-3. Copiar y pegar todo el bloque del comentario de **Inicio CategoryItem.vue** dentro del template de **Fin CategoryItem.vue**, renderizar este componente dentro de **CategoriesList.vue** en el mismo lugar donde se encontraba su bloque de comentario.
-
-## Render PostItem component
-
-1. Copiar y pegar todo el contenido del bloque de comentario **Inicio PostItem.vue** hasta **Fin PostItem.vue** dentro del template de **PostItem.vue**
-2. Existe un archivo llamado **PostItem.css** copia y pegar su contenido en el **<style>** del componente creado en el punto anterior.
-3. Renderizarlo una vez en el mismo lugar donde se encontraba su bloque de código.
+### SignUpView
+6. Implement the alerts mixin to show a success or error message when the api call is made
 
+You're done!, test the complete application

apps/vue-app/src/app/App.vue

@@ -1,4 +1,37 @@
 <template>
-  <!-- Activity 1: Render PostLayout.vue  -->
-  <h1>TODO: Eliminar este h1 cuando se haga la actividad</h1>
+  <nav class="navbar bg-body-tertiary" v-show="store.showNavBar">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">
+        <img src="./assets/world.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top" />
+      </a>
+      <div>
+        <button class="btn btn-outline-warning me-2" v-on:click="openCategories">Categories</button>
+        <button class="btn btn-outline-warning"  v-on:click="openLogin">Login</button>
+      </div>
+    </div>
+  </nav>
+  <router-view />
 </template>
+
+<script>
+import { store } from './store/store';
+import router from './router/router';
+
+export default {
+  data() {
+    return { store };
+  },
+  methods: {
+    openCategories() {
+        router.push({
+          name: 'categories'
+        });
+    },
+    openLogin() {
+      router.push({
+        name: 'login'
+      });
+    }
+  }
+};
+</script>

apps/vue-app/src/app/api/capstoneApi.js

@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const token = localStorage.getItem('apiToken');
+const capstoneApi = axios.create({
+  baseURL: 'https://test.neuraac.com/api',
+  headers: {
+    Authorization: `Bearer ${token}`
+  }
+});
+export default capstoneApi;

apps/vue-app/src/app/helpers/alerts.js

@@ -0,0 +1,13 @@
+export const alerts = {
+  methods: {
+    showAlert(icon, title) {
+      this.$swal({
+        position: 'top-end',
+        icon,
+        title,
+        showConfirmButton: false,
+        timer: 1500
+      });
+    }
+  }
+};

apps/vue-app/src/app/helpers/auth/user.js

@@ -0,0 +1,33 @@
+import capstoneApi from "../../api/capstoneApi";
+
+export const register = async (credentials) => {
+  let status;
+  await capstoneApi
+    .post(`/auth/register`, credentials)
+    .then(() => {
+      status = true;
+    })
+    .catch((e) => {
+      status = false;
+      console.error(e);
+    });
+
+  return status;
+};
+
+export const loginRequest = async (credentials) => {
+  let status;
+  await capstoneApi
+    .post(`/auth/login`, credentials)
+    .then((response) => {
+      status = true;
+      const token = response.data.accessToken;
+      localStorage.setItem("apiToken", token);
+    })
+    .catch((e) => {
+      status = false;
+      console.error(e);
+    });
+
+  return status;
+};

apps/vue-app/src/app/helpers/categories.js

@@ -0,0 +1,59 @@
+import capstoneApi from '../api/capstoneApi';
+
+export const getCategories = async () => {
+  let categories = [];
+
+  await capstoneApi
+    .get('/categories')
+    .then(({ data }) => {
+      categories = data;
+    })
+    .catch((e) => console.error(e));
+
+  return categories;
+};
+
+export const createCategory = async (newCategory) => {
+  let status = false
+
+  await capstoneApi
+    .post('/categories', newCategory)
+    .then(() => {
+      status = true;
+    })
+    .catch((e) => console.error(e));
+
+  return status;
+};
+
+export const updateCategory = async (category) => {
+  let status;
+  const updatedCategory = { name: category.name };
+
+  await capstoneApi
+    .patch(`/categories/${category._id}`, updatedCategory)
+    .then(() => {
+      status = true;
+    })
+    .catch((e) => {
+      status = false;
+      console.error(e);
+    });
+
+  return status;
+};
+
+export const deleteCategory = async (id) => {
+  let status;
+  await capstoneApi
+    .delete(`/categories/${id}`)
+    .then(() => {
+      status = true;
+    })
+    .catch((e) => {
+      status = false;
+      console.error(e);
+    });
+
+  return status;
+};

apps/vue-app/src/app/helpers/comments.js

@@ -0,0 +1,17 @@
+import capstoneApi from '../api/capstoneApi';
+
+export const createComment = async (comment) => {
+  let status;
+  const { postId, author, content } = comment;
+  await capstoneApi
+    .post(`/posts/${postId}/comments`, { author, content })
+    .then(() => {
+      status = true;
+    })
+    .catch((e) => {
+      status = false;
+      console.error(e);
+    });
+
+  return status;
+};

apps/vue-app/src/app/helpers/posts.js

@@ -0,0 +1,72 @@
+import capstoneApi from '../api/capstoneApi';
+
+export const getPosts = async () => {
+  let posts = [];
+
+  await capstoneApi
+    .get('/posts')
+    .then(({ data }) => {
+      posts = data;
+    })
+    .catch((e) => console.error(e));
+
+  return posts;
+};
+
+export const getPostById = async (id) => {
+  let post;
+
+  await capstoneApi
+    .get(`/posts/${id}`)
+    .then(({ data }) => {
+      post = data;
+    })
+    .catch((e) => console.error(e));
+
+  return post;
+};
+
+export const createPost = async (post) => {
+  let status;
+  await capstoneApi
+    .post(`/posts`, post)
+    .then(() => {
+      status = true;
+    })
+    .catch((e) => {
+      status = false;
+      console.error(e);
+    });
+
+  return status;
+};
+
+export const updatePost = async (post) => {
+  let status;
+  await capstoneApi
+    .patch(`/posts/${post._id}`, post)
+    .then(() => {
+      status = true;
+    })
+    .catch((e) => {
+      status = false;
+      console.error(e);
+    });
+
+  return status;
+};
+
+export const deletePost = async (id) => {
+  let status;
+  await capstoneApi
+    .delete(`/posts/${id}`)
+    .then(() => {
+      status = true;
+    })
+    .catch((e) => {
+      status = false;
+      console.error(e);
+    });
+
+  return status;
+};

apps/vue-app/src/app/modules/auth/views/LoginView.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="d-flex justify-content-center align-items-center" style="height: 100vh">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title text-center">Login</h5>
+        <form>
+          <div class="form-group pb-3">
+            <label>Username</label>
+            <input type="text" class="form-control is-invalid" v-model="credentials.username"/>
+            <span class="form-text text-danger" v-for="error of v$.credentials.username.$errors" :key="error.$uid"> {{ error.$message }}<br></span>
+          </div>
+          <div class="form-group pb-3">
+            <label>Password</label>
+            <input type="password" class="form-control" v-model="credentials.password"/>
+            <span class="form-text text-danger" v-for="error of v$.credentials.password.$errors" :key="error.$uid"> {{ error.$message }} <br></span>
+          </div>
+
+          <span v-if="error" class="form-text text-danger"> {{ error }} </span>
+          <div class="d-flex justify-content-end mt-1">
+            <button style="margin-right: 5px;" class="btn btn-outline-primary me-1" v-on:click="signUp">Sign Up</button>
+            <button class="btn btn-primary" v-on:click="login">Login</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import useVuelidate from '@vuelidate/core';
+import router from '../../../router/router';
+import { required, email, helpers } from '@vuelidate/validators';
+import { loginRequest } from '../../../helpers/auth/user';
+import { store } from '../../../store/store';
+import { alerts} from '../../../helpers/alerts';
+
+export default {
+   mixins:[alerts],
+    data() {
+        return {
+          credentials: {
+            username: '',
+            password: ''
+          },
+          v$: useVuelidate(),
+          error: null,
+    };
+  },
+  beforeCreate() {
+    store.setShowNavBar(false);
+  },
+  methods: {
+      signUp() {
+        router.push({
+          name: 'signUp'
+        });
+      },
+      login() {
+        this.v$.$touch();
+        if (this.v$.$invalid) {
+          return;
+        }
+        loginRequest(this.credentials)
+          .then( result => {
+            if(result){
+              console.log('Login success');
+              store.setShowNavBar(true);
+              router.push({
+                name: 'home'
+              });
+            }else{
+              this.showAlert('error', "Incorrect Username or Password");
+            }
+          })
+          .catch((error) => {
+            console.log('Error', error);
+            this.error = error;
+          });
+      }
+    },
+    validations() {
+      return {
+        credentials: {
+          username: {
+            required: helpers.withMessage('Username is required', required),
+            $autoDirty: true,
+            email: helpers.withMessage('Invalid email', email)
+          },
+          password: { required: helpers.withMessage('Password is required', required), $autoDirty: true }
+        }
+      };
+    }
+};
+</script>