Commit | Line | Data |
---|---|---|
dd10eb93 BA |
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> |