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