Activities session 1

apps/vue-app/README.md

@@ -15,3 +15,141 @@ https://getbootstrap.com/
 https://github.com/avil13/vue-sweetalert2
 
 https://vuelidate-next.netlify.app/
+
+### Activities
+
+1. Create **auth** and **categories** folders inside **modules** folder
+2. Create **LoginView** and **SignUpView** component inside **auth/views**
+3. Create **CategoryView** component inside **categories/views**
+4. Create **CategoryForm** and **CategoryList** components inside **categories/components**
+
+It should looks like this: 
+
+![Screenshot 2024-07-09 at 12 52 42 p m](https://github.com/gus-code/mfee-project/assets/52582787/302d6ce6-8c8b-4c6c-90e7-fb176e30db00)
+
+  5. For **LoginView** you can use this 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" />
+            <span class="form-text text-danger"> Error </span>
+          </div>
+          <div class="form-group pb-3">
+            <label>Password</label>
+            <input type="password" class="form-control" />
+            <span class="form-text text-danger"> Error </span>
+          </div>
+
+          <span class="form-text text-danger"> Error </span>
+          <div class="d-flex justify-content-end mt-1">
+            <button class="btn btn-outline-primary me-1">Sign Up</button>
+            <button class="btn btn-primary">Login</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+```
+
+6. For **SignUpView** you can use this one:
+
+```
+   <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">Sign Up</h5>
+        <form>
+          <div class="form-group pb-3">
+            <label>Username</label>
+            <input type="text" class="form-control" />
+            <span class="form-text text-danger"> Error </span>
+          </div>
+          <div class="form-group pb-3">
+            <label>Password</label>
+            <input type="password" class="form-control" />
+            <span class="form-text text-danger"> Error </span>
+          </div>
+          <div class="form-group pb-3">
+            <label>Confirm Password</label>
+            <input type="password" class="form-control" />
+            <span class="form-text text-danger"> Error </span>
+          </div>
+          <span class="form-text text-danger"> Error </span>
+          <div class="d-flex justify-content-center mt-1">
+            <button class="btn btn-primary">Sign Up</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+```
+7. For **CategoryForm** you can use this:
+
+```
+  <div class="modal fade" id="createCategoryModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header text-center">
+          <h5 class="modal-title">(Action) Category</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <form>
+            <div class="form-group pb-3">
+              <label>Name</label>
+              <input type="text" class="form-control" />
+              <span class="form-text text-danger"> Error </span>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" ref="btnCloseModal">Cancel</button>
+          <button class="btn btn-primary">Save</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+```
+
+8. For **CategoryList** you can use this:
+
+```
+  <div class="container mt-5">
+    <div class="d-flex justify-content-between">
+      <h1 class="display-6">Categories</h1>
+      <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#createCategoryModal">Add Category</button>
+    </div>
+
+    <hr />
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">Name</th>
+          <th scope="col">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Category name</td>
+          <td>
+            <i class="fa-solid fa-pen me-3" data-bs-toggle="modal" data-bs-target="#createCategoryModal"></i>
+            <i class="fa-solid fa-trash"></i>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+```
+
+9. Render **CategoryForm** at the end of **CategoryList** in such a way that clicking on the Add Category button triggered the modal.
+10. Render **CategoryList** in **CategoryView**
+
+Note: You can test that your new components are working redering them on **App.vue**

apps/vue-app/index.html

@@ -4,6 +4,13 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <title>vue-app</title>
   </head>
   <body>

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

@@ -1,3 +1,13 @@
 <template>
-  <h1>VTS Template</h1>
+  <PostView />
 </template>
+
+<script>
+import PostView from './modules/posts/views/PostView.vue';
+
+export default {
+  components: {
+    PostView
+  }
+};
+</script>

apps/vue-app/src/app/modules/posts/components/CategoriesList.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="btn-group" role="group">
+    <CategoryItem />
+    <CategoryItem />
+    <CategoryItem />
+    <CategoryItem />
+  </div>
+</template>
+
+<script>
+import CategoryItem from './CategoryItem.vue';
+
+export default {
+  name: 'CategoriesList',
+  components: {
+    CategoryItem
+  },
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>

apps/vue-app/src/app/modules/posts/components/CategoryItem.vue

@@ -0,0 +1,10 @@
+<template>
+  <button type="button" class="btn btn-light active">Category name</button>
+</template>
+
+<script>
+export default {
+  name: 'CategoryItem',
+  methods: {}
+};
+</script>

apps/vue-app/src/app/modules/posts/components/HeaderPosts.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="container pt-5">
+    <div class="row">
+      <div class="col-12 d-flex justify-content-center">
+        <h6 class="sub-title">[ Making your Life Easier ]</h6>
+      </div>
+      <div class="col-12 d-flex justify-content-center">
+        <h1 class="display-1">Discovering the World</h1>
+      </div>
+      <div class="col-12 d-flex justify-content-end p-2">
+        <i class="fa-solid fa-square-pen fa-2xl create-post" data-bs-toggle="modal" data-bs-target="#createPostModal"></i>
+      </div>
+      <div class="col-12 d-flex justify-content-center">
+        <CategoriesList />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CategoriesList from './CategoriesList.vue';
+
+export default {
+  name: 'HeaderPosts',
+  components: {
+    CategoriesList
+  },
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>
+
+<style scoped>
+.sub-title {
+  color: #f0a441;
+  font-weight: 300;
+}
+.create-post {
+  height: 20px;
+  color: #f0a441;
+}
+.create-post:hover {
+  cursor: pointer;
+}
+</style>

apps/vue-app/src/app/modules/posts/components/PostItem.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="col-md-12 col-lg-6">
+    <div class="card bg-dark text-white">
+      <img src="https://cdn.pixabay.com/photo/2017/02/22/17/06/wave-2089959_960_720.jpg" class="card-img" />
+
+      <div class="card-img-overlay mt-3 ms-3 card-img">
+        <div class="card-content">
+          <h1 class="display-5">Post title</h1>
+          <p class="card-text fs-5">
+            <em>10 comments </em>
+            <i class="fa-solid fa-comment"></i>
+          </p>
+          <p class="card-text fs-5">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis auctor risus. Donec ullamcorper risus lorem, id malesuada
+            sem porta vitae. Vivamus nec felis ante.
+          </p>
+          <p class="card-text fs-5 text-uppercase">
+            <strong>Category name</strong>
+          </p>
+        </div>
+      </div>
+      <div class="card-img-overlay card-buttons">
+        <div class="d-flex justify-content-end align-items-center ms-4">
+          <i class="fa-solid fa-pen pe-3" data-bs-toggle="modal" data-bs-target="#createPostModal"></i>
+          <i class="fa-solid fa-trash"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PostItem',
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>
+
+<style scoped>
+.col-md-12,
+.col-lg-6 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+.card {
+  border: 0;
+  border-radius: 0;
+}
+.card:hover {
+  cursor: pointer;
+}
+.card-content {
+  display: flex;
+  justify-content: end;
+  flex-direction: column;
+  height: 100%;
+}
+.card-img {
+  bottom: 40px;
+}
+.card-buttons {
+  top: 85%;
+}
+</style>

apps/vue-app/src/app/modules/posts/views/PostView.vue

@@ -0,0 +1,24 @@
+<template>
+  <HeaderPosts />
+  <div class="row pt-5">
+    <PostItem />
+    <PostItem />
+    <PostItem />
+  </div>
+  <div class="alert alert-warning m-3" role="alert">There are not results.</div>
+</template>
+
+<script>
+import HeaderPosts from '../components/HeaderPosts.vue';
+import PostItem from '../components/PostItem.vue';
+
+export default {
+  components: {
+    HeaderPosts,
+    PostItem
+  },
+  data() {
+    return {};
+  }
+};
+</script>