c954f3d80b6ee2a834b8d61a6988742dfe996982
[vchess.git] / client / src / components / UserBio.vue
1 <template lang="pug">
2 div
3 input#modalBio.modal(type="checkbox")
4 div#bioDiv(
5 role="dialog"
6 data-checkbox="modalBio"
7 )
8 .card
9 div(v-if="st.user.id == id")
10 h3.section(@click="modeEdit = !modeEdit") Click to edit
11 textarea(
12 v-if="userBio !== undefined"
13 v-show="modeEdit"
14 v-model="userBio"
15 )
16 button#submitBtn(@click="sendBio()") Submit
17 div(
18 v-if="userBio !== undefined"
19 v-html="userBio"
20 @click="modeEdit = !modeEdit"
21 )
22 #dialog.text-center {{ st.tr[infoMsg] }}
23 span.clickable(@click="showBio()") {{ name }}
24 </template>
25
26 <script>
27 import { store } from "@/store";
28 import { ajax } from "@/utils/ajax";
29 import { processModalClick } from "@/utils/modalClick.js";
30 export default {
31 name: "my-user-bio",
32 props: ["id", "name"],
33 data: function() {
34 return {
35 st: store.state,
36 userBio: undefined,
37 infoMsg: "",
38 modeEdit: false
39 };
40 },
41 mounted: function() {
42 document.getElementById("bioDiv")
43 .addEventListener("click", processModalClick);
44 },
45 methods: {
46 showBio: function() {
47 this.infoMsg = "";
48 document.getElementById("modalBio").checked = true;
49 if (this.userBio === undefined) {
50 ajax(
51 "/userbio",
52 "GET",
53 {
54 data: { id: this.id },
55 success: (res) => {
56 this.userBio = res.bio;
57 }
58 }
59 );
60 }
61 },
62 sendBio: function() {
63 ajax(
64 "/userbio",
65 "PUT",
66 {
67 data: { bio: this.userBio },
68 success: () => {
69 this.infoMsg = this.st.tr["Modifications applied!"];
70 }
71 }
72 );
73 }
74 }
75 };
76 </script>
77
78 <style lang="sass" scoped>
79 [type="checkbox"].modal+div .card
80 max-width: 768px
81 max-height: 100%
82
83 #submitBtn
84 width: 50%
85 margin: 0 auto
86
87 #dialog
88 padding: 5px
89 color: blue
90 </style>