edit user profile section

pages/admin/gps/users/index.vue

@@ -1,18 +1,34 @@
+
 <template>
   <div>
-    <el-dialog title="اطلاعات کاربر" :visible.sync="centerDialogVisible" width="40%" center>
+    <el-dialog dir="rtl" title="اطلاعات کاربر" :visible.sync="centerDialogVisible" width="40%" center>
       <el-descriptions title=""  direction="vertical" :column="4" border>
-
-        <el-descriptions-item label="نام و نام خانودگی">{{ user.first_name +" "+ user.last_name }}</el-descriptions-item>
-        <el-descriptions-item label="شماره همراه">{{ user.mobile_number }}</el-descriptions-item>
-        <el-descriptions-item label="استان" >{{ user.province_name?.provinceName }}</el-descriptions-item>
+        <el-descriptions-item label="نام">
+          <input class="editInput" type="text" v-model="newUser.first_name" />
+        </el-descriptions-item>
+        <el-descriptions-item label="نام خانودگی">
+          <input class="editInput" type="text" v-model="newUser.last_name" />
+        </el-descriptions-item>
+        <el-descriptions-item label="شماره همراه">
+          <input class="editInput" type="text" v-model="newUser.mobile_number" />
+        </el-descriptions-item>
+        <el-descriptions-item label="استان">{{ user.province_name?.provinceName }}</el-descriptions-item>
         <el-descriptions-item label="شهر">{{ user.city_name?.cityName }}</el-descriptions-item>
-        <el-descriptions-item label="کد ملی ">{{ user.national_code }}</el-descriptions-item>
-        <el-descriptions-item label="نام فروشگاه">{{ user.shopName }}</el-descriptions-item>
-        <el-descriptions-item label="شماره ثابت">{{ user.cell_number }}</el-descriptions-item>
-        <el-descriptions-item label="تاریخ تولد">{{ user.birthDate }}</el-descriptions-item>
-        <el-descriptions-item label="آدرس">{{ user.address }}</el-descriptions-item>
-
+        <el-descriptions-item label="کد ملی ">
+          <input class="editInput" type="text" v-model="newUser.national_code" />
+          </el-descriptions-item>
+        <el-descriptions-item label="نام فروشگاه">
+          <input class="editInput" type="text" v-model="newUser.shopName" />
+        </el-descriptions-item>
+        <el-descriptions-item label="شماره ثابت">
+          <input class="editInput" type="text" v-model="newUser.cell_number" />
+        </el-descriptions-item>
+        <el-descriptions-item label="تاریخ تولد">
+          <input class="editInput" type="text" v-model="newUser.birthDate" />
+        </el-descriptions-item>
+        <el-descriptions-item label="آدرس">
+          <input class="editInput" type="text" v-model="newUser.address" />
+          </el-descriptions-item>
       </el-descriptions>
       <CCardBody>
         <el-table :data="user.cardBank" style="width: 100%">
@@ -23,9 +39,8 @@
         </el-table>
       </CCardBody>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="centerDialogVisible = false">{{
-          $route.query?.type == 'req' ? 'بستن' : 'بستن'
-        }}</el-button>
+        <el-button @click="centerDialogVisible = false">{{ $route.query?.type == 'req' ? 'بستن' : 'بستن' }}</el-button>
+        <el-button @click="update_user">{{ $route.query?.type == 'req' ? 'ذخیره' : 'ذخیره' }}</el-button>
         <el-button v-if="$route.query?.type == 'req'" type="primary" @click="confirmUser(user._id)">تایید</el-button>
       </span>
     </el-dialog>
@@ -99,6 +114,7 @@
   </div>
 </template>
 
+
 <script>
 export default {
   name: 'AdminGpsUsersList',
@@ -124,8 +140,8 @@ export default {
       users: [],
       centerDialogVisible: false,
       user: {},
-     filterText :''
-
+      filterText: '',
+      newUser: {}
     }
   },
 
@@ -172,12 +188,46 @@ export default {
     }
   },
   methods: {
+    //  edit_form() {
+    //   this.newUser = 'this.user.first_name'
+    //   console.log(this.user.first_name);
+    //   console.log(this.newUser);
+
+    // },
+
     async showUserDialog(id) {
-      const {data}= await this.$axios.get(`/api/admin/gps/users/${id}`)
+      const { data } = await this.$axios.get(`/api/admin/gps/users/${id}`)
+      console.log(data)
+
       this.user = data
       this.centerDialogVisible = true
+      this.newUser = {
+        first_name: data?.first_name ?? '',
+        last_name: data?.last_name ?? '',
+        national_code: data?.national_code ?? '',
+        shopName: data?.shopName ?? '',
+        mobile_number: data?.mobile_number ?? '',
+        birthDate: data?.birthDate ?? '',
+        cell_number: data?.cell_number ?? '',
+        address: data?.address ?? ''
+      }
     },
-    async confirmUser(id){
+    async update_user() {
+      try {
+        const { data, status } = await this.$axios.put(`/api/admin/gps/users/${this.user.id}`, this.newUser)
+        console.log('after changed', data, status)
+        if(status === 200 || status === 201){
+          this.$nuxt.refresh()
+          this.centerDialogVisible = false
+        }else{
+           alert('خطا در برقراری ارتباط با سرور')
+        }
+      } catch (error) {
+        alert(Object.values(error?.response?.data?.validation)[0]?.msg)
+      //  console.log('after log', Object.values(error.response.data.validation)[0].msg)
+      }
+    },
+    async confirmUser(id) {
       try {
         await this.$axios.patch(`/api/admin/gps/users/${id}/true`)
         this.$nuxt.refresh()
@@ -188,8 +238,17 @@ export default {
           message: err.response.data.message
         })
       }
-
     }
   }
 }
 </script>
+
+<style>
+.editInput {
+  width: 100% !important;
+  border: 1px solid rgb(214, 214, 214);
+  padding: 2px;
+  border-radius: 3px;
+}
+
+</style>