주소 삭제 기능 추가

client/pages/address/add.vue

@@ -153,7 +153,7 @@
                   <div class="a-spacing-top-large">
                     <span class="a-button-register">
                       <span class="a-button-inner">
-                        <span class="a-button-text">Add address</span>
+                        <span @click="onAddAddress" class="a-button-text">Add address</span>
                       </span>
                     </span>
                   </div>
@@ -206,8 +206,7 @@ export default {
         let data = {
           country: this.country,
           fullName: this.fullName,
-          streetAddress1: this.streetAddress1,
-          streetAddress2: this.streetAddress2,
+          streetAddress1: this.streetAddress1 + ' ' + this.streetAddress2,
           city: this.city,
           state: this.state,
           zipCode: this.zipCode,
@@ -216,13 +215,13 @@ export default {
           securityCode: this.securityCode,
         }
 
-        let response = await $axios.$post('/api/address', data)
+        let response = await this.$axios.$post('/api/address', data)
 
         if (response.success) {
           this.$router.push('/address')
         }
       } catch (err) {
-
+        console.log(err)
       }
 
     }

client/pages/address/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <!--MAIN-->
+  <main>
+    <!--REGISTER ADDRESS-->
+    <div class="registerAddress mt-3">
+      <div class="container-fluid c-section">
+        <div class="row">
+          <div class="col-sm-2"></div>
+          <div class="col-sm-10">
+            <div class="a-section a-spacing-medium">
+              <div class="a-subheader a-breadcrumb a-spacing-small">
+                <ul>
+                  <li>
+                    <a href="#">
+                      <span>Your Account</span>
+                    </a>
+                  </li>
+                  <li class="a-breadcrumb-divider">›</li>
+                  <li class="active">
+                    <a href="#">
+                      <span>Your Adresses</span>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <h1 class="a-spacing-medium a-spacing-top-medium">Your Addresses</h1>
+              <!-- Message from Server -->
+              <div class="a-section a-spacing-none a-spacing-top-small">
+                <b>{{ message }}</b>
+              </div>
+              <div class="a-spacing-double-large">
+                <div class="row a-spacing-micro">
+                  <div class="col-lg-4 col-md-5 col-sm-12 pb-2">
+                    <nuxt-link
+                      to="/address/add"
+                      class="a-link-normal add-new-address-button"
+                      style="text-decoration:none;"
+                    >
+                      <div class="a-box first-desktop-address-tile">
+                        <div class="a-box-inner a-padding-extra-large">
+                          <i class="far fa-plus"></i>
+                          <h2 class="a-color-tertiary">Add Address</h2>
+                        </div>
+                      </div>
+                    </nuxt-link>
+                  </div>
+                  <!-- Address -->
+                  <div v-for="(address, index) in addresses" :key="address._id" class="col-lg-4 col-md-4 col-sm-12 pl-md-0 pb-2">
+                    <div class="a-box a-spacing-none normal-desktop-address-tile">
+                      <div class="a-box-inner a-padding-none">
+                        <div class="address-section-no-default">
+                          <div class="a-spacing-small">
+                            <ul class="a-unordered-list a-nostyle a-vertical">
+                              <li>
+                                <h5>
+                                  <!-- Address Fullname -->
+                                  <b>{{ address.fullName }}</b>
+                                </h5>
+                              </li>
+                              <!-- Address street address -->
+                              <li>{{ address.streetAddress }}</li>
+                              <!-- Address city state zip code -->
+                              <li>{{ address.city }}, {{ address.state }} {{ address.zipCode }}</li>
+                              <!-- Address country -->
+                              <li>{{ address.country }}</li>
+                              <!-- Address Phone number -->
+                              <li>Phone number: {{ address.phoneNumber }}</li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- Delete Button -->
+                      <div class="edit-address-desktop-link">
+                        <a href="#">Edit</a>
+                        &nbsp; | &nbsp;
+                        <a @click="onDeleteAddress(address._id, index)" href="#">Delete</a>
+                        &nbsp; | &nbsp;
+                        <!-- Set Address as Default -->
+                        <a @click="onSetDefault(address._id)" href="#">Set as Default</a>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-lg-4 col-md-3 col-sm-12"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--/REGISTER ADDRESS-->
+  </main>
+  <!--/MAIN-->
+</template>
+
+<script>
+export default {
+  async asyncData ({ $axios }) {
+    try {
+      let response = await $axios.$get('/api/address')
+
+      return {
+        addresses: response.addresses
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  },
+
+  data () {
+    return {
+      message: ''
+    }
+  },
+
+  methods: {
+    async onDeleteAddress (id, index) {
+      try {
+        let response = await this.$axios.$delete(`/api/address/${id}`)
+
+        if (response.success) {
+          this.message = response.message
+          this.addresses.splice(index, 1)
+        }
+      } catch (err) {
+        this.message = err.message
+        console.log(err)
+      }
+    },
+
+    async onSetDefault (id) {
+      try {
+        let response = await this.$axios.$put(`/api/address/set/default`, {
+          id: id
+        })
+
+        if (response.success) {
+          this.message = response.message
+          await this.$auth.fetchUser()
+        }
+      } catch (err) {
+        this.message = err.message
+        console.log(err)
+      }
+    }
+  }
+}
+</script>
+
+

server/routes/address.js

@@ -1,5 +1,6 @@
 const router = require('express').Router()
 const Address = require('../models/address')
+const User = require('../models/user')
 const virifyToken = require('../middlewares/verify-token')
 const axios = require('axios')
 
@@ -59,4 +60,78 @@ router.get('/countries', async (req, res) => {
     })
   }
 })
+
+router.put('/address/:id', virifyToken, async (req, res) => {
+  try {
+    let foundAddress = await Address.findOne({ user: req.decoded._id, _id: req.params.id })
+
+    if (foundAddress) {
+      if (req.body.country) foundAddress.country = req.body.country
+      if (req.body.fullName) foundAddress.fullName = req.body.fullName
+      if (req.body.streetAddress) foundAddress.streetAddress = req.body.streetAddress
+      if (req.body.city) foundAddress.city = req.body.city
+      if (req.body.state) foundAddress.state = req.body.state
+      if (req.body.zipCode) foundAddress.zipCode = req.body.zipCode
+      if (req.body.phoneNumber) foundAddress.phoneNumber = req.body.phoneNumber
+      if (req.body.deliverInstructions) foundAddress.deliverInstructions = req.body.deliverInstructions
+      if (req.body.securityCode) foundAddress.securityCode = req.body.securityCode
+    }
+
+    await foundAddress.save()
+
+    res.json({
+      success: true,
+      message: 'success updatea address'
+    })
+  } catch (err) {
+    res.status(500).json({
+      success: false,
+      message: err.message
+    })
+  }
+})
+
+router.delete('/address/:id', virifyToken, async (req, res) => {
+  try {
+    let deleteAddress = await Address.remove({
+      user: req.decoded._id,
+      _id: req.params.id
+    })
+
+    if (deleteAddress) {
+      res.json({
+        success: true,
+        message: 'Addres has been delete'
+      })
+    }
+  } catch (err) {
+    res.status(500).json({
+      success: false,
+      message: err.message
+    })
+  }
+})
+
+router.put('/address/set/default', virifyToken, async (req, res) => {
+  try {
+    const updatedAddressUser = await User.findOneAndUpdate(
+      { _id: req.decoded._id },
+      { $set: { address: req.body.id }}
+    )
+
+    if (updatedAddressUser) {
+      res.json({
+        success: true,
+        message: 'Successfully set this address a default'
+      })
+    }
+  } catch (err) {
+    console.log(err)
+    res.status(500).json({
+      success: false,
+      message: err.message
+    })
+  }
+})
+
 module.exports = router