Update Layout Bootstrap

3-todo/package-lock.json

@@ -2623,6 +2623,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.0.0-beta",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.tgz",
+      "integrity": "sha512-I/r3fYtUZr+rUNkh8HI+twxZ56p6ehNn27eA1XSebLVQKAJ2xZHnEvZrSR+UR2A/bONcd9gHC3xatVhQlH6R6w==",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6785,6 +6791,12 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "jquery": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
+      "dev": true
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -8164,6 +8176,12 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "dev": true
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

3-todo/package.json

@@ -17,8 +17,11 @@
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
+    "bootstrap": "^4.0.0-beta",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "jquery": "^3.6.0",
+    "popper.js": "^1.16.1",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

3-todo/src/components/Task/TaskItem.vue

 <template>
-  <p>
+  <div>
     {{ item.name }}
-    <button v-on:click="removeTask(item.id)">Delete</button>
-  </p>
+  </div>
 </template>
 
 <script>

3-todo/src/components/Task/TaskList.vue

 <template>
+  <div class="row">
+    <div class="col"></div>
+    <div class="col">
       <div>
-    <input v-model="taskNew.name" />
-    <button v-on:click="createTaskNew()">Add</button>
-    <li class="item" v-for="item in getTaskList" :key="item.id">
+        <div class="mb-3">
+          <label for="exampleFormControlInput1" class="form-label"
+            >Enter to add new todo</label
+          >
+          <input
+            v-model="taskNew.name"
+            type="text"
+            class="form-control"
+            v-on:keyup.enter="createTaskNew()"
+            placeholder="To do"
+          />
+        </div>
+
+        <ul class="list-group  " v-for="item in getTaskList" :key="item.id">
+          <li
+            class="
+              list-group-item list-group-item-action
+              d-flex
+              justify-content-between
+              align-items-center
+            "
+          >
             <TaskItem v-bind:item="item" />
+            <button type="button" class="btn btn-primary badge bg-primary rounded-pill" v-on:click="removeTask(item.id)">x</button>
           </li>
+        </ul>
+        
+      </div>
+    </div>
+    <div class="col"></div>
   </div>
 </template>
 
@@ -25,7 +53,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["getTaskList","getTaskLast"]),
+    ...mapGetters(["getTaskList", "getTaskLast"]),
 
     createTaskId() {
       if (typeof this.getTaskLast !== "undefined") {
@@ -40,7 +68,7 @@ export default {
 
   mounted() {},
   methods: {
-    ...mapActions(["addTask"]),
+    ...mapActions(["addTask","removeTask"]),
 
     cleanTaskNew() {
       this.taskNew.name = "";
@@ -49,7 +77,6 @@ export default {
     createTaskNew() {
       const taskId = this.createTaskId;
       const taskName = this.taskNew.name;
-      console.log(taskId);
       const task = {
         id: taskId,
         name: taskName,
@@ -66,7 +93,5 @@ export default {
 </script>
 
 <style  >
-.item {
-  list-style-type: none;
-}
+
 </style>

3-todo/src/main.js

 import Vue from 'vue';
 import App from './App.vue';
 import store from '@/store';
+import 'bootstrap/dist/css/bootstrap.css'
+
 
 Vue.config.productionTip = false;
 

3-todo/src/store/modules/tasks.js

@@ -9,15 +9,15 @@ const state = {
 		list: [
 			{
 				id: 1,
-				name: 'Do something awesome!',
+				name: 'Sáng chạy bộ 30 phút ',
 			},
 			{
 				id: 2,
-				name: 'Buy toilet paper',
+				name: 'Báo cáo công việc',
 			},
 			{
 				id: 3,
-				name: 'Learn Vue',
+				name: 'Học tiếng anh',
 			}
 		]
 	}