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>