Draft or user bio support (ready in Hall, TODO in Game)

[vchess.git] / client / src / components / UserBio.vue

diff --git a/client/src/components/UserBio.vue b/client/src/components/UserBio.vue
new file mode 100644 (file)
index 0000000..c954f3d
--- /dev/null
+++ b/client/src/components/UserBio.vue
@@ -0,0 +1,90 @@
+<template lang="pug">
+div
+  input#modalBio.modal(type="checkbox")
+  div#bioDiv(
+    role="dialog"
+    data-checkbox="modalBio"
+  )
+    .card
+      div(v-if="st.user.id == id")
+        h3.section(@click="modeEdit = !modeEdit") Click to edit
+        textarea(
+          v-if="userBio !== undefined"
+          v-show="modeEdit"
+          v-model="userBio"
+        )
+        button#submitBtn(@click="sendBio()") Submit
+      div(
+        v-if="userBio !== undefined"
+        v-html="userBio"
+        @click="modeEdit = !modeEdit"
+      )
+      #dialog.text-center {{ st.tr[infoMsg] }}
+  span.clickable(@click="showBio()") {{ name }}
+</template>
+
+<script>
+import { store } from "@/store";
+import { ajax } from "@/utils/ajax";
+import { processModalClick } from "@/utils/modalClick.js";
+export default {
+  name: "my-user-bio",
+  props: ["id", "name"],
+  data: function() {
+    return {
+      st: store.state,
+      userBio: undefined,
+      infoMsg: "",
+      modeEdit: false
+    };
+  },
+  mounted: function() {
+    document.getElementById("bioDiv")
+      .addEventListener("click", processModalClick);
+  },
+  methods: {
+    showBio: function() {
+      this.infoMsg = "";
+      document.getElementById("modalBio").checked = true;
+      if (this.userBio === undefined) {
+        ajax(
+          "/userbio",
+          "GET",
+          {
+            data: { id: this.id },
+            success: (res) => {
+              this.userBio = res.bio;
+            }
+          }
+        );
+      }
+    },
+    sendBio: function() {
+      ajax(
+        "/userbio",
+        "PUT",
+        {
+          data: { bio: this.userBio },
+          success: () => {
+            this.infoMsg = this.st.tr["Modifications applied!"];
+          }
+        }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="sass" scoped>
+[type="checkbox"].modal+div .card
+  max-width: 768px
+  max-height: 100%
+
+#submitBtn
+  width: 50%
+  margin: 0 auto
+
+#dialog
+  padding: 5px
+  color: blue
+</style>