Display profile in Me page

legendword · Jun 4, 2022 · 7c8db08 · 7c8db08
1 parent 255fe52
commit 7c8db08
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/src/pages/Me.vue b/src/pages/Me.vue
@@ -38,8 +38,18 @@
                 </q-tabs>
                 <q-tab-panels v-model="tab" animated>
                     <q-tab-panel name="profile">
-                        <div class="text-h6 q-my-md">Profile</div>
-                        <upcoming-feature version="0.4"></upcoming-feature>
+                        <div class="text-h6 q-my-md">
+                            {{ $t("userProfile.profile") }}
+                            <div class="float-right">
+                                <q-btn color="primary" @click="enterProfileEdit">{{ $t("userProfile.editProfile") }}</q-btn>
+                            </div>
+                        </div>
+                        <q-card>
+                            <q-card-section>
+                                <div class="text-body1" v-if="user.description">{{ user.description }}</div>
+                                <div class="text-body1 text-grey-8" v-else><i>You have not added a description yet.</i></div>
+                            </q-card-section>
+                        </q-card>
                     </q-tab-panel>
                     <q-tab-panel name="commented">
                         <div class="text-h6 q-my-md">Commented</div>
@@ -59,6 +69,7 @@
 import { mapState } from "vuex";
 import api from "../api";
 import UpcomingFeature from "../components/UpcomingFeature.vue";
+import UserInfoEdit from "../components/dialogs/UserInfoEdit.vue";
 import { apiError } from "src/apiError";
 import logger from "src/logger";
 import requireLoggedIn from "src/mixins/requireLoggedIn";
@@ -93,6 +104,22 @@ export default {
                 this.$router.push("/user/"+this.user.id);
             }
         },
+        enterProfileEdit() {
+            this.$q.dialog({
+                component: UserInfoEdit,
+                parent: this,
+                initialValues: {
+                    username: this.user.username,
+                    description: this.user.description
+                }
+            }).onOk((val) => {
+                logger(val);
+                this.$store.commit("userDataChange", {
+                    username: val.username
+                });
+                this.init();
+            });
+        },
         tabChange(val) {
 
         },