Aggiunto json con lista preview chat demo, fixato ChatMsg, impostato flow dati history

geografia-vue/README.md

@@ -1,48 +0,0 @@
-# geografia_vue
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-npm run test:unit
-```
-
-### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
-
-```sh
-npm run build
-npm run test:e2e # or `npm run test:e2e:ci` for headless testing
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```

geografia-vue/src/assets/demo_chats.json

@@ -0,0 +1,58 @@
+{
+  "history": [
+    {
+      "id": 1,
+      "name": "test-name1",
+      "last_message": "🐱⛸️➡️?",
+      "seen": false,
+      "date": "25/08/22",
+      "new_messages": 1,
+      "is_user": false
+    },
+    {
+      "id": 2,
+      "name": "test-name2",
+      "last_message": "🐱⛸️➡️?",
+      "seen": false,
+      "date": "25/08/22",
+      "new_messages": 1,
+      "is_user": true
+    },
+    {
+      "id": 3,
+      "name": "test-name3",
+      "last_message": "🐱⛸️➡️?",
+      "seen": false,
+      "date": "25/08/22",
+      "new_messages": 1,
+      "is_user": false
+    },
+    {
+      "id": 4,
+      "name": "test-name4",
+      "last_message": "🐱⛸️➡️?",
+      "seen": false,
+      "date": "25/08/22",
+      "new_messages": 1,
+      "is_user": true
+    },
+    {
+      "id": 5,
+      "name": "test-name5",
+      "last_message": "🐱⛸️➡️?",
+      "seen": false,
+      "date": "25/08/22",
+      "new_messages": 1,
+      "is_user": false
+    },
+    {
+      "id": 6,
+      "name": "test-name6",
+      "last_message": "🐱⛸️➡️?",
+      "seen": false,
+      "date": "25/08/22",
+      "new_messages": 1,
+      "is_user": true
+    }
+  ]
+}

geografia-vue/src/components/ChatHistory.vue

@@ -6,7 +6,7 @@
 <script>
 
 export default {
-  components: { },
+  components: {},
   setup() {},
 };
 </script>

geografia-vue/src/components/ChatList.vue

@@ -5,40 +5,22 @@ import ChatMsg from "@/components/ChatMsg.vue";
 
 <template>
   <div id="background">
-    <li :key="chat.id" v-for="chat in history">
+    <li :key="chat.id" v-for="chat in $options.demo_chats.history">
       <ChatPreview
         :chat-name="chat.name"
-        :chat-last-msg="chat.last_msg"
+        :chat-last-message="chat.last_message"
         :chat-seen="chat.seen"
         :chat-date="chat.date"
         :chat-new-messages="chat.new_messages"
       />
     </li>
-    <ChatMsg
-      :msg-text="history.chats.last_msg"
-      :is-user="history.chats.is_user"
-    />
   </div>
 </template>
 
 <script>
+import demo_chats_json from "../assets/demo_chats.json";
 export default {
-  setup() {},
+  demo_chats: demo_chats_json,
-  data() {
-    return {
-      history: {
-        chats: {
-          id: 1,
-          name: "test-name",
-          last_msg: "🐱⛸️➡️?",
-          seen: false,
-          date: "25/08/22",
-          new_messages: 1,
-          is_user: false,
-        },
-      },
-    };
-  },
 };
 </script>
 

geografia-vue/src/components/ChatMsg.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    v-bind:class="[isUser ? 'mainUserMsg' : 'secondaryUserMsg']"
+    v-bind:class="[isUser ? 'mainUserMessage' : 'secondaryUserMessage']"
     class="bubble bubble-bottom-left"
   >
-    <p>{{ msgText }}</p>
+    <p>{{ messageText }}</p>
   </div>
 </template>
 
@@ -11,33 +11,33 @@
 export default {
   setup() {},
   props: {
-    msgText: String,
+    messageText: String,
     isUser: Boolean,
   },
 };
 </script>
 
 <style scoped>
-.mainUserMsg {
+.mainUserMessage {
   --chat-bg-color: #368dda;
-  --msg-position: absolute;
+  --message-position: absolute;
-  --msg-right: 0;
+  --message-right: 0;
-  --msg-border-right: 24px solid var(--chat-bg-color);
+  --message-border-right: 24px solid var(--chat-bg-color);
-  --msg-border-left: 12px solid transparent;
+  --message-border-left: 12px solid transparent;
-  --msg-border-position-left: 70%;
+  --message-border-position-left: 70%;
 }
-.secondaryUserMsg {
+.secondaryUserMessage {
   --chat-bg-color: green;
-  --msg-position: relative;
+  --message-position: relative;
-  --msg-right: none;
+  --message-right: none;
-  --msg-border-right: 12px solid transparent;
+  --message-border-right: 12px solid transparent;
-  --msg-border-left: 24px solid var(--chat-bg-color);
+  --message-border-left: 24px solid var(--chat-bg-color);
-  --msg-border-position-left: 12%;
+  --message-border-position-left: 12%;
 }
 
 .bubble {
-  position: var(--msg-position);
+  position: var(--message-position);
-  right: var(--msg-right);
+  right: var(--message-right);
   font-family: sans-serif;
   font-size: 18px;
   line-height: 24px;
@@ -54,12 +54,12 @@ export default {
   width: 0px;
   height: 0px;
   position: absolute;
-  border-right: var(--msg-border-right);
+  border-right: var(--message-border-right);
-  border-left: var(--msg-border-left);
+  border-left: var(--message-border-left);
   border-top: 12px solid var(--chat-bg-color) fff;
   border-bottom: 25px solid transparent;
-  left: var(--msg-border-position-left);
+  left: var(--message-border-position-left);
-  right: var(--msg-border-position-right);
+  right: var(--message-border-position-right);
   bottom: -24px;
 }
 </style>

geografia-vue/src/components/ChatPreview.vue

@@ -7,8 +7,8 @@
       <div class="chat-name">
         <h3>{{ chatName }}</h3>
       </div>
-      <div class="chat-last-msg">
+      <div class="chat-last-message">
-        <p>{{ chatLastMsg }}</p>
+        <p>{{ chatLastMessage }}</p>
       </div>
       <div class="chat-info">
         <div class="chat-seen" color="green">
@@ -36,7 +36,7 @@ export default {
   props: {
     picProfile: String,
     chatName: String,
-    chatLastMsg: String,
+    chatLastMessage: String,
     chatSeen: Boolean,
     chatDate: String,
     chatNewMessages: Number,

geografia-vue/src/stores/counter.js

@@ -1,16 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useCounterStore = defineStore({
-  id: "counter",
-  state: () => ({
-    counter: 0,
-  }),
-  getters: {
-    doubleCount: (state) => state.counter * 2,
-  },
-  actions: {
-    increment() {
-      this.counter++;
-    },
-  },
-});

geografia-vue/src/views/HomeView.vue

@@ -1,9 +0,0 @@
-<script setup>
-import ChatList from "@/components/ChatList.vue";
-</script>
-
-<template>
-  <main>
-    <ChatList />
-  </main>
-</template>

geografia-vue/vite.config.js

@@ -7,6 +7,9 @@ import vueJsx from "@vitejs/plugin-vue-jsx";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), vueJsx()],
+  build: {
+    sourcemap: true,
+  },
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),