From 1d25e0f78bae04b7c4263d170bf6655d26b050af Mon Sep 17 00:00:00 2001
From: weichien <weichien00@gmail.com>
Date: Mon, 17 May 2021 17:37:43 +0800
Subject: [PATCH] feat: add edit user fullname component and its corresponding
 handler function and validator.

---
 .../elements/UserProfileComponent.vue         | 60 +++++++++++++++++++
 .../EditUserProfileFullnameFormComponent.vue  | 50 ++++++++++++++++
 .../mixins/accounts/updateProfileHandler.js   | 18 ++++++
 .../validation/updateProfileFormValidation.js | 10 ++++
 4 files changed, 138 insertions(+)
 create mode 100644 resources/assets/vue/components/settings/elements/UserProfileComponent.vue
 create mode 100644 resources/assets/vue/components/settings/forms/EditUserProfileFullnameFormComponent.vue
 create mode 100644 resources/assets/vue/general/mixins/accounts/updateProfileHandler.js
 create mode 100644 resources/assets/vue/general/mixins/accounts/validation/updateProfileFormValidation.js

diff --git a/resources/assets/vue/components/settings/elements/UserProfileComponent.vue b/resources/assets/vue/components/settings/elements/UserProfileComponent.vue
new file mode 100644
index 00000000..526c68a6
--- /dev/null
+++ b/resources/assets/vue/components/settings/elements/UserProfileComponent.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="col">
+
+        <div class="row align-items-center m-b-30">
+            <div class="col-3 p-l-0">
+                <div class="font-heading fs-11 bold text-info">Full Name</div>
+            </div>
+            <div class="col m-r-50">
+                <div class="font-heading fs-11 muted" v-text="$store.getters.getUserName"></div>
+            </div>
+            <div class="col-auto p-r-0">
+                <div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15 requestModal" data-type="editFullName">
+                    <i class="fa fa-pencil m-r-10"></i>Edit
+                </div>
+            </div>
+        </div>
+
+        <div class="row align-items-center m-b-30">
+            <div class="col-3 p-l-0">
+                <div class="font-heading fs-11 bold text-info">Password</div>
+            </div>
+            <div class="col m-r-50">
+                <div class="font-heading fs-11 muted">********</div>
+            </div>
+            <div class="col-auto p-r-0">
+                <div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15">
+                    <i class="fa fa-lock m-r-10"></i>Request Password Reset
+                </div>
+            </div>
+        </div>
+
+        <div class="row align-items-center">
+            <div class="col-3 p-l-0">
+                <div class="font-heading fs-11 bold text-info">Email Address</div>
+            </div>
+            <div class="col m-r-50">
+                <div class="font-heading fs-11 muted" v-text="$store.getters.getUserEmail"></div>
+            </div>
+            <div class="col-auto p-r-0">
+                <div class="btn btn-xs btn-default bg-master-lighter btn-rounded p-r-20 p-l-15">
+                    <i class="fa fa-envelope-open-o m-r-10"></i>Request Email Change
+                </div>
+            </div>
+        </div>
+
+        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editFullName">
+            <edit-user-profile-fullname-form-component :data="{name: $store.getters.getUserName}" :section="section"></edit-user-profile-fullname-form-component>
+        </modal-component>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    section: {
+      default: "editFullNameSection",
+    },
+  },
+};
+</script>
diff --git a/resources/assets/vue/components/settings/forms/EditUserProfileFullnameFormComponent.vue b/resources/assets/vue/components/settings/forms/EditUserProfileFullnameFormComponent.vue
new file mode 100644
index 00000000..73f5deab
--- /dev/null
+++ b/resources/assets/vue/components/settings/forms/EditUserProfileFullnameFormComponent.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <h3 class="all-caps m-b-5 bold no-margin">Edit Full Name</h3>
+                        </div>
+                    </div>
+                    <div class="row m-b-10">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.parameters.name">
+                                <input type="text" class="form-control" v-model="parameters.name">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                        <div class="col">
+                            <small class="bold fs-10 text-danger">{{error}}</small>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.account.user.update', '1'), 'put', section, true, true)">Update</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import updateProfileFormValidation from '../../../general/mixins/accounts/validation/updateProfileFormValidation';
+    export default {
+        data(){
+            return {
+                error: '',
+                parameters: {
+                    name: ''
+                }
+            }
+        },
+        mixins: [updateProfileFormValidation]
+
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/general/mixins/accounts/updateProfileHandler.js b/resources/assets/vue/general/mixins/accounts/updateProfileHandler.js
new file mode 100644
index 00000000..4979dfd4
--- /dev/null
+++ b/resources/assets/vue/general/mixins/accounts/updateProfileHandler.js
@@ -0,0 +1,18 @@
+import errorMessageHandler from "../errorMessageHandler";
+import formHandler from "../formHandler";
+
+export default {
+    methods: {
+        successHandler(response){
+            this.closeModal();
+            this.formHandler('');
+            this.$store.dispatch('updateProfile', {fullname:response.payload.data.name});
+        },
+        errorHandler(error){
+            console.log("error" ,error);
+            this.formHandler(error.message);
+        }
+    },
+    mixins: [errorMessageHandler, formHandler]
+
+}
\ No newline at end of file
diff --git a/resources/assets/vue/general/mixins/accounts/validation/updateProfileFormValidation.js b/resources/assets/vue/general/mixins/accounts/validation/updateProfileFormValidation.js
new file mode 100644
index 00000000..8be6ce0b
--- /dev/null
+++ b/resources/assets/vue/general/mixins/accounts/validation/updateProfileFormValidation.js
@@ -0,0 +1,10 @@
+import { required } from "vuelidate/lib/validators";
+import updateProfileHandler from "../updateProfileHandler";
+export default {
+    validations: {
+        parameters: {
+            name: { required }
+        }
+    },
+    mixins: [updateProfileHandler]
+};