Fixato header e visualizzazione ChatView e ChatList, FIX condizionali annidati in ChatLit

geografia-vue/src/App.vue

@@ -7,9 +7,9 @@ import Header from "@/components/Header.vue";
 <template>
   <main>
     <Header
-      :chat-picture="chat-picture"
+      :chat-picture="chatPicture"
-      :chat-name="chat-name"
+      :chat-name="chatName"
-      :header-chat="header-chat"
+      :header-chat="headerChat"
     />
     <ChatList @change-header="changeHeader" />
   </main>
@@ -17,14 +17,19 @@ import Header from "@/components/Header.vue";
 
 <script>
 export default {
-  chatPicture: { type: String, default: "" },
+  data() {
-  chatName: { type: String, default: "" },
+    return {
-  headerChat: { type: Boolean, default: false },
+      chatPicture: "",
+      chatName: "",
+      headerChat: false,
+    };
+  },
   methods: {
     changeHeader(e) {
-      this.chatPicture = e[1];
+      this.chatPicture = e[0];
-      this.chatName = e[2];
+      this.chatName = e[1];
       this.headerChat = true;
+      console.table("header", e);
     },
   },
 };

geografia-vue/src/assets/demo_chats.json

@@ -2,7 +2,7 @@
   "history": [
     {
       "id": 1,
-      "picture": "../assets/cat_skate.png",
+      "picture": "./cat_skate.png",
       "name": "test-name1",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -12,7 +12,7 @@
     },
     {
       "id": 2,
-      "picture": "../assets/cat_skate.png",
+      "picture": "./cat_skate.png",
       "name": "test-name2",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -22,7 +22,7 @@
     },
     {
       "id": 3,
-      "picture": "../assets/cat_skate.png",
+      "picture": "./cat_skate.png",
       "name": "test-name3",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -32,7 +32,7 @@
     },
     {
       "id": 4,
-      "picture": "../assets/cat_skate.png",
+      "picture": "./cat_skate.png",
       "name": "test-name4",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -42,7 +42,7 @@
     },
     {
       "id": 5,
-      "picture": "../assets/cat_skate.png",
+      "picture": "./cat_skate.png",
       "name": "test-name5",
       "last_message": "🐱⛸️➡️?",
       "seen": false,
@@ -52,7 +52,7 @@
     },
     {
       "id": 6,
-      "picture": "../assets/cat_skate.png",
+      "picture": "./cat_skate.png",
       "name": "test-name6",
       "last_message": "🐱⛸️➡️?",
       "seen": false,

geografia-vue/src/components/ChatList.vue

@@ -1,13 +1,16 @@
+<!-- eslint-disable vue/no-use-v-if-with-v-for -->
 <script setup>
 //Fix v-if riga 20
 import ChatPreview from "@/components/ChatPreview.vue";
-import ChatView from "@/components/single_chat/ChatView.vue";
+import ChatView from "./single_chat/ChatView.vue";
 </script>
 
 <template>
+  <!-- Fix nested conditions in ChatPreview -->
   <div id="background chat-list">
     <ChatPreview
       v-for="chat in $options.demo_chats.history"
+      v-if="!selectedChat"
       :key="chat.id"
       :chat-picture="chat.picture"
       :chat-name="chat.name"
@@ -17,7 +20,7 @@ import ChatView from "@/components/single_chat/ChatView.vue";
       :chat-new-messages="chat.new_messages"
       @click="showChat(chat)"
     />
-    <ChatView v-if="selectedChat" />
+    <ChatView v-if="selectedChat" :chat-id="chatId" @hideChat="hideChat" />
   </div>
 </template>
 
@@ -25,15 +28,18 @@ import ChatView from "@/components/single_chat/ChatView.vue";
 import demo_chats_json from "../assets/demo_chats.json";
 export default {
   demo_chats: demo_chats_json,
-  selectedChat: false,
+  data() {
-  chatId: Number,
+    return { selectedChat: false, chatId: null };
+  },
   methods: {
     showChat(chat) {
-      console.log(chat);
       this.$emit("change-header", [chat.picture, chat.name]);
-      this.selectedChat = true;
+      this.selectedChat = !this.selectedChat;
       this.chatId = chat.id;
     },
+    hideChat() {
+      this.selectedChat = false;
+    },
   },
 };
 </script>

geografia-vue/src/components/Header.vue

@@ -1,9 +1,6 @@
 <template>
   <header>
-    <div id="header">
+    <div v-if="headerChat" id="header-chat">
-      <p>Geografia</p>
-    </div>
-    <div v-if="header-chat" id="header-chat">
       <div class="chat-picture">
         <figure>
           <img src="chat-picture" alt="The chat picture" />
@@ -13,6 +10,11 @@
         <h3>{{ chatName }}</h3>
       </div>
     </div>
+    <div v-else>
+      <div id="header">
+        <p>Geografia</p>
+      </div>
+    </div>
   </header>
 </template>
 

geografia-vue/src/components/single_chat/ChatHistory.vue

@@ -19,10 +19,12 @@ per permettero lo scrolling e una dimensione fissa -->
 </template>
 
 <script>
-
 import demo_messages_json from "@/assets/demo_messages.json";
 export default {
   demo_messages: demo_messages_json,
+  props: {
+    chatId: Number,
+  },
 };
 </script>
 

geografia-vue/src/components/single_chat/ChatView.vue

@@ -5,22 +5,28 @@ import ChatHistory from "./ChatHistory.vue";
 
 <template>
   <div>
-    <ChatHistory />
+    <!-- Move this button in the header -->
+    <button alt="Back" name="Back" @click="this.$emit('hideChat')">←</button>
+    <ChatHistory :chat-id="chatId" />
     <button
-      alt="write-message"
+      alt="write message"
       name="write-message"
-      @click="write-message == true"
+      @click="$options.writeMessage = true"
     >
       +
     </button>
-    <Keyboard v-if="write-message" />
+    <Keyboard v-if="writeMessage" :chat-id="chatId" />
   </div>
 </template>
 
 <script>
 export default {
-  setup() {},
+  writeMessage: Boolean,
-  props: { chat: Object },
+  setup() {
+    this.writeMessage = false;
+    console.log(this.writeMessage);
+  },
+  props: { chatId: Number },
 };
 </script>