From 3e4630fe362435b1de6c360cc18d363bac9fad5c Mon Sep 17 00:00:00 2001
From: reddigriz <reddigriz@protonmail.ch>
Date: Thu, 22 Sep 2022 21:50:50 +0200
Subject: [PATCH] Iniziata keyboard, sposto su branch
 feature_message_composition

---
 .../src/components/keyboard/Keyboard.vue      | 13 ++++++-
 .../src/components/keyboard/KeyboardWord.vue  |  8 ++---
 .../keyboard/MessageComposition.vue           | 18 ++++++++--
 .../src/components/single_chat/ChatView.vue   | 34 +++++++++++--------
 4 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/geografia-vue/src/components/keyboard/Keyboard.vue b/geografia-vue/src/components/keyboard/Keyboard.vue
index 29a8c41..e9fd4a1 100644
--- a/geografia-vue/src/components/keyboard/Keyboard.vue
+++ b/geografia-vue/src/components/keyboard/Keyboard.vue
@@ -1,5 +1,16 @@
 <template>
-  <div class="msg-composition"><p>I'm writing hereee</p></div>
+  <div class="keyboard" @click="selectWord">
+    <p>I'm writing hereee</p>
+  </div>
 </template>
 
+<script>
+export default {
+  methods: {
+    selectedWord() {
+      this.$emit("selectedWord", "a");
+    },
+  },
+};
+</script>
 <style scoped></style>
\ No newline at end of file
diff --git a/geografia-vue/src/components/keyboard/KeyboardWord.vue b/geografia-vue/src/components/keyboard/KeyboardWord.vue
index c20b598..cf75232 100644
--- a/geografia-vue/src/components/keyboard/KeyboardWord.vue
+++ b/geografia-vue/src/components/keyboard/KeyboardWord.vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="msg-composition">
-   <KeyboardWord />
+  <div class="keyboard-word">
+    <p>placeholder word</p>
   </div>
 </template>
 
 <script>
-import KeyboardWord from "./KeyboardWord.vue";
 export default {
-   components: { KeyboardWord },
-  setup() {},
+  props: {},
 };
 </script>
 
diff --git a/geografia-vue/src/components/keyboard/MessageComposition.vue b/geografia-vue/src/components/keyboard/MessageComposition.vue
index b9a2739..63c8e68 100644
--- a/geografia-vue/src/components/keyboard/MessageComposition.vue
+++ b/geografia-vue/src/components/keyboard/MessageComposition.vue
@@ -5,14 +5,26 @@ import KeyboardWord from "./KeyboardWord.vue";
 
 <template>
   <div>
-    <KeyboardWord />
-    <Keyboard />
+    <KeyboardWord :key="soggetto" @click="test" />
+    <KeyboardWord :key="oggetto" @click="test" />
+    <KeyboardWord :key="verbo" @click="test" />
+    <Keyboard @selectedWord="selectedWord" />
   </div>
 </template>
 
 <script>
 export default {
-  setup() {},
+  data() {
+    return { focus: "" };
+  },
+  methods: {
+    test(e) {
+      console.log(e);
+    },
+    selectedWord() {
+      console.log("selectedWord");
+    },
+  },
 };
 </script>
 
diff --git a/geografia-vue/src/components/single_chat/ChatView.vue b/geografia-vue/src/components/single_chat/ChatView.vue
index ab20601..3156901 100644
--- a/geografia-vue/src/components/single_chat/ChatView.vue
+++ b/geografia-vue/src/components/single_chat/ChatView.vue
@@ -1,30 +1,34 @@
 <script setup>
-import Keyboard from "../keyboard/Keyboard.vue";
+import MessageComposition from "../keyboard/MessageComposition.vue";
 import ChatHistory from "./ChatHistory.vue";
 </script>
 
 <template>
   <div>
     <!-- Move this button in the header -->
-    <button alt="Back" name="Back" @click="this.$emit('hideChat')">←</button>
-    <ChatHistory :chat-id="chatId" />
-    <button
-      alt="write message"
-      name="write-message"
-      @click="$options.writeMessage = true"
-    >
-      +
-    </button>
-    <Keyboard v-if="writeMessage" :chat-id="chatId" />
+    <div id="chat-view" v-show="!writeMessage">
+      <button alt="Back" name="Back" @click="this.$emit('hideChat')">←</button>
+      <ChatHistory :chat-id="chatId" />
+      <button
+        alt="write message"
+        name="write-message"
+        @click="this.writeMessage = true"
+      >
+        +
+      </button>
+    </div>
+    <MessageComposition
+      v-if="writeMessage"
+      :chat-id="chatId"
+      @hideMessageHistory="this.writeMessage = false"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  writeMessage: Boolean,
-  setup() {
-    this.writeMessage = false;
-    console.log(this.writeMessage);
+  data() {
+    return { writeMessage: false };
   },
   props: { chatId: Number },
 };