Merge pull request #80 from thuongtruong1009/api/address-buyer

feat(connect): buyer profile account

.env.production

@@ -1 +1 @@
-VITE_BASE_DOMAIN=https://127.0.0.1:444
+VITE_BASE_DOMAIN=https://tp-o.tk/ec

locales/en.yml

@@ -33,8 +33,8 @@ caccount:
   orders: Orders
   download: Download
   payment-method: Payment Method
+  credit-card: Credit Card
   address: Address
-  account-details: Account Details
   Logout: Logout
 ccategory:
   men-fashion: Men's Fashion

src/App.vue

@@ -38,8 +38,8 @@ window.addEventListener('scroll', scrollFunction)
     </div>
   </Transition>
   <CToast />
-  <router-view v-if="useLoading.isLoading === false" />
-  <CBLoading v-if="useLoading.isLoading === true" />
+  <router-view />
+  <CProgress v-if="useLoading.isLoading === true" />
   <!-- <router-view v-slot="{ Component, route }">
     <transition :name="route.meta.transition || 'fade'" mode="out-in">
       <keep-alive>

src/components.d.ts

@@ -36,9 +36,9 @@ declare module 'vue' {
     CBTopProducts: typeof import('./components/buyer/CBTopProducts.vue')['default']
     CBTrending: typeof import('./components/buyer/CBTrending.vue')['default']
     CExtension: typeof import('./components/CExtension.vue')['default']
-    CLoading: typeof import('./components/CLoading.vue')['default']
     CMap: typeof import('./components/CMap.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']
+    CProgress: typeof import('./components/CProgress.vue')['default']
     CSFooter: typeof import('./components/seller/CSFooter.vue')['default']
     CSlick: typeof import('./components/CSlick.vue')['default']
     CToast: typeof import('./components/CToast.vue')['default']

src/components/CLoading.vue → src/components/CProgress.vue

@@ -18,6 +18,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    background: #7a7a7a59 10%;
 }
 
 .load-wrapp {

src/components/buyer/CBAccount.vue

@@ -1,5 +1,19 @@
 <script setup>
+import { useRouter } from 'vue-router'
+import AuthRequest from '~/services/auth-request'
+
 const { t } = useI18n()
+
+const router = useRouter()
+
+const signOut = async() => {
+  await AuthRequest.logoutUser().then(() => {
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+    router.push({ path: '/buyer/login' })
+  })
+}
+
 </script>
 
 <template>
@@ -27,29 +41,29 @@ const { t } = useI18n()
 
     <router-link to="/buyer/account/payment" :title="payment">
       <div class="items">
-        <i class="fa fa-credit-card" />
+        <!-- <i class="fa fa-credit-card" /> -->
+        <i class="fas fa-university" />
         {{ t('caccount.payment-method') }}
       </div>
     </router-link>
 
-    <router-link to="/buyer/account/address" :title="address">
+    <router-link to="/buyer/account/credit" :title="credit">
       <div class="items">
-        <i class="fa fa-map-marker" />
-        {{ t('caccount.address') }}
+        <i class="fa fa-credit-card" />
+        {{ t('caccount.credit-card') }}
       </div>
     </router-link>
 
-    <router-link to="/buyer/account/details" :title="details" class="active">
+    <router-link to="/buyer/account/address" :title="address">
       <div class="items">
-        <i class="fa fa-user" /> {{ t('caccount.account-details') }}
+        <i class="fa fa-map-marker" />
+        {{ t('caccount.address') }}
       </div>
     </router-link>
 
-    <router-link to="/buyer/login" :title="logout">
-      <div class="items rounded-b-lg">
-        <i class="fa fa-sign-out" /> {{ t('caccount.Logout') }}
-      </div>
-    </router-link>
+    <div class="items rounded-b-lg" @click="signOut">
+      <i class="fa fa-sign-out" /> {{ t('caccount.Logout') }}
+    </div>
   </div>
 </template>
 

src/components/header/RMenu.vue

@@ -1,5 +1,18 @@
 <script setup>
+import { useRouter } from 'vue-router'
+import AuthRequest from '~/services/auth-request'
 const { t } = useI18n()
+
+const router = useRouter()
+
+const signOut = async() => {
+  await AuthRequest.logoutUser().then(() => {
+    localStorage.removeItem('token')
+    localStorage.removeItem('user')
+    router.push({ path: '/buyer/login' })
+  })
+}
+
 </script>
 
 <template>
@@ -54,7 +67,7 @@ const { t } = useI18n()
               {{ t('header.login') }} <ILogin />
             </a>
           </li>
-          <li class="menu-child-item">
+          <li class="menu-child-item" @click="signOut">
             <a href="/buyer/login" class="menu-child-link">
               {{ t('header.sign out') }} <ILogout />
             </a>

src/helpers/error.ts

@@ -1 +1 @@
-export const handleError = (error: any) => process.stdout.write(error.toJSON())
+export const handleError = (error: any) => (`Error message: ${error.message}`)

src/layouts/seller/shop/LSShopRegister.vue

@@ -0,0 +1,8 @@
+<template>
+  <main class="text-gray-700 dark:text-gray-200 overflow-x-hidden bg-[#F6F6F6] h-screen">
+    <SHead />
+    <div class="w-screen bg-[#F6F6F6] dark:bg-black">
+      <router-view />
+    </div>
+  </main>
+</template>

src/pages/buyer/account/address.vue

@@ -3,6 +3,73 @@ meta:
   layout: buyer/account/LBAddress
 </route>
 
+<script setup>
+import { useRouter } from 'vue-router'
+import { toast } from '~/stores/toast'
+import { handleError } from '~/helpers/error'
+import AccountRequest from '~/services/account-request'
+
+useHead({
+  title: 'buyer | address',
+})
+
+const router = useRouter()
+const useToast = toast()
+const id = JSON.parse(localStorage.getItem('user')).data.id
+
+const payload = reactive({
+  full_name: '',
+  phone: '',
+  state: '',
+  city: '',
+  town: '',
+  address: '',
+  is_home: false,
+  is_pickup_address: false,
+  is_default_address: false,
+  is_return_address: false,
+})
+
+const isEdit = ref(false)
+
+watchOnce(() => {
+  AccountRequest.getAddress().then((res) => {
+    payload.full_name = res.data.full_name
+    payload.address = res.data.address
+    payload.phone = res.data.phone
+  }).catch((error) => {
+    return handleError(error)
+  })
+})
+
+const handleCreate = async(e) => {
+  e.preventDefault()
+  await AccountRequest.createAddress(payload).then(() => {
+    useToast.updateToast('created', 'Address has been created successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+
+const handleUpdate = async(e) => {
+  e.preventDefault()
+  await AccountRequest.creatupdateAddressById(id, payload).then(() => {
+    useToast.updateToast('updated', 'Address has been updated successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+const handleDelete = async(e) => {
+  e.preventDefault()
+  await AccountRequest.deleteAddressById(id).then(() => {
+    useToast.updateToast('updated', 'Address has been updated successfully!', true)
+  }).catch((error) => {
+    return handleError(error)
+  })
+}
+
+</script>
+
 <template>
   <div class="myaccount-content border-1 border-solid border-light-700 rounded-md p-5 bg-[#EBF6FC] dark:bg-cool-gray-800">
     <div class="border-b-1 border-b-solid border-b-light-700 py-3 font-medium flex items-center gap-1">
@@ -11,7 +78,6 @@ meta:
         Billing Address
       </h3>
     </div>
-
     <div class="py-5">
       <p class="font-medium text-gray-500 text-md">
         Thuong Truong
@@ -23,39 +89,83 @@ meta:
         Mobile: (+84) 917-085-937
       </p>
     </div>
-
-    <a href="#" class="edit-address-btn text-sm text-blue-700 gap-1 flex items-center"><i
+    <a class="edit-address-btn text-sm text-blue-700 gap-1 flex items-center cursor-pointer" @click="isEdit = !isEdit"><i
       class="fa fa-edit"
     />Edit Address</a>
 
-    <form action="" method="post">
+    <form>
       <div>
         <label>Full name</label>
-        <input type="text" name="full_name" required>
+        <input v-model="payload.full_name" type="text" required>
       </div>
       <div>
         <label>Phone number</label>
-        <input type="number" name="phone" required>
+        <input v-model="payload.phone" type="number" required>
       </div>
       <div>
         <label>State</label>
-        <input type="text" name="state" required>
+        <input v-model="payload.state" type="text" required>
       </div>
       <div>
         <label>City</label>
-        <input type="text" name="city" required>
+        <input v-model="payload.city" type="text" required>
       </div>
       <div>
         <label>Town</label>
-        <input type="text" name="town" required>
+        <input v-model="payload.town" type="text" required>
       </div>
       <div>
         <label>Address</label>
-        <input type="text" name="address" required>
+        <input v-model="payload.address" type="text" required>
       </div>
 
-      <div class="pt-5 flex justify-end">
-        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium">
+      <div class="dark:text-black">
+        <select v-model="payload.is_home">
+          <option>Is Home</option>
+          <option value="false">
+            False
+          </option>
+          <option value="true">
+            True
+          </option>
+        </select>
+        <select v-model="payload.is_pickup_address">
+          <option>Is Pickup Address</option>
+          <option value="false">
+            False
+          </option>
+          <option value="true">
+            True
+          </option>
+        </select>
+        <select v-model="payload.is_default_address">
+          <option>Is Default Address</option>
+          <option value="false">
+            False
+          </option>
+          <option value="true">
+            True
+          </option>
+        </select>
+        <select v-model="payload.is_return_address">
+          <option>Is Return Address</option>
+          <option value="false">
+            False
+          </option>
+          <option value="true">
+            True
+          </option>
+        </select>
+      </div>
+
+      <div class="pt-5 flex gap-5 justify-end">
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleDelete">
+          <ISave />Delete address
+        </button>
+        <button type="submit" class="btn bg-black  duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium opacity-80" :disabled="!isEdit" @click="handleUpdate">
+          <ISave />Update address
+        </button>
+        <button type="submit" class="btn bg-black hover:bg-[#F33535] duration-200 flex items-center gap-1 shadow-md shadow-gray-300 font-medium" @click="handleCreate">
           <ISave />Save Changes
         </button>
       </div>
@@ -64,7 +174,7 @@ meta:
 </template>
 
 <style scoped>
-input{
+input, select{
   width: 80%;
   outline: none;
   border: 1px solid rgba(233, 236, 239);