fix : ticket style and issues

src/components/modal/ticket/NewMessage.vue

@@ -15,7 +15,17 @@
                             persistent-hint
                             prepend-icon="fas fa-search"
                             color="black"
-                        />
+                        >
+                          <template v-slot:no-data>
+                            <v-list-tile>
+                              <v-list-tile-content>
+                                <v-list-tile-title class="black--text">
+                                  {{ loading ? 'Searching...' : 'please search the contact name' }}
+                                </v-list-tile-title>
+                              </v-list-tile-content>
+                            </v-list-tile>
+                          </template>
+                        </v-autocomplete>
                     </v-flex>
                 </v-layout>
                 <ticket-send-message :user-id="user_id" />

src/components/modal/ticket/ShowMessages.vue

@@ -1,81 +1,127 @@
 <template>
-    <div>
-        <v-container>
-            <material-card class color="black" title="Show Message" text max-width="600px">
-                <v-layout row wrap>
-                    <v-flex xs12>
-                        <div
-                            class="mx-2 my-3"
-                            v-for="item in items"
-                            :key="item.id"
+  <div>
+    <v-container>
+      <material-card class="ma-auto" color="black" max-width="600px" text title="Show Message">
+        <div class="chat-container" ref="chatContainer">
+          <v-layout row wrap class="messages">
+            <v-flex v-for="item in items" :key="item.id" xs12>
 
-                        >
-                        <div class="Chat White" v-if="item.sender_user_id == user_id">
-                            <span>{{ item.text }}</span>
-                            <span class="caption"></span>
-                        </div>
-                        <div class="Chat Cyan" style="float:right" v-else>
-                            <span  >{{ item.text }}</span>
-                            <span class="caption"></span>
-                        </div>
-                        </div>
-                    </v-flex>
-                </v-layout>
-                <ticket-send-message :user-id="user_id" />
-            </material-card>
-        </v-container>
-    </div>
+                <div class="Chat White" v-if="item.sender_user_id == user_id">
+                  <pre>{{ item.text }}</pre>
+                  <span class="caption"></span>
+                </div>
+
+                <div class="Chat Cyan" style="float:right" v-else>
+                  <pre>{{ item.text }}</pre>
+                  <span class="caption"></span>
+                </div>
+
+            </v-flex>
+          </v-layout>
+        </div>
+        <ticket-send-message :user-id="user_id"/>
+      </material-card>
+    </v-container>
+  </div>
 </template>
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
-import { mapGetters } from "vuex";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
+import {mapGetters} from "vuex";
+
 export default {
-    data() {
-        return {
-            user_id: 0,
-            items: {}
-        }
-    },
-    created() {
-        this.user_id = this.getModalProperties.user_id;
-        this.load();
-    },
-    computed: {
-        ...mapGetters("modal", ["getModalProperties"])
-    },
-    methods: {
-        async load() {
-            const result = await ApiService.get(
-                urls.showMessages(this.user_id)
-            );
-            if (result && result.data.data) {
-                this.items = result.data.data;
-            }
-        }
+  data() {
+    return {
+      user_id: 0,
+      items: {}
     }
+  },
+  created() {
+    this.user_id = this.getModalProperties.user_id;
+    this.load();
+  },
+  computed: {
+    ...mapGetters("modal", ["getModalProperties"])
+  },
+  methods: {
+    async load() {
+      const result = await ApiService.get(
+          urls.showMessages(this.user_id)
+      );
+      if (result && result.data.data) {
+        this.items = result.data.data;
+      }
+    }
+  },
+  watch: {
+    items() {
+      this.$nextTick(() => {
+        const container = this.$refs.chatContainer;
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+        }
+      });
+    }
+  }
+
 };
 </script>
 <style lang="scss" scoped>
-.Chat {
+.chat-container {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 0 10px;
+  scrollbar-width: thin;
+  scrollbar-color: #d3d3d3 transparent;
+
+  .Chat {
     padding: 10px 15px;
-    margin: 1% 0;
+    margin-bottom: 5px;
     color: white;
     border-radius: 10px;
     width: fit-content;
     display: block;
-    box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
-}
-.Chat.Cyan {
+    //box-shadow: 5px 15px 20px rgba(0, 0, 0, 0.2);
+     pre {
+       margin: 0;
+       font-family: inherit;
+       font-size: 14px;
+       white-space: pre-wrap;
+       word-wrap: break-word;
+    }
+  }
+
+  .Chat.Cyan {
     background: cornflowerblue;
     text-align: right;
     float: right;
     clear: right;
-}
-.Chat.White {
-    background: #fff;
+  }
+
+  .Chat.White {
+    background: #efefef;
     color: black;
     float: left;
     clear: left;
+  }
 }
+
+.chat-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.chat-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-container::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 4px;
+  border: 1px solid transparent;
+}
+
+.chat-container::-webkit-scrollbar-thumb:hover {
+  background-color: #7d7d7d;
+}
+
 </style>

src/components/ticket/SendMessage.vue

@@ -1,72 +1,80 @@
 <template>
-    <div>
-        <v-card-text>
-            <v-container grid-list-md>
-                <v-flex xs12 sm12 md12>
-                    <v-textarea name="input-7-1" v-model="form.message" color="black" label="Message" hint="Hint text"></v-textarea>
-                </v-flex>
-            </v-container>
-        </v-card-text>
+  <div>
+    <v-card-text class="py-0">
+      <v-container grid-list-md class="pa-0">
+        <v-flex md12 sm12 xs12>
+          <v-textarea v-model="form.message" color="black" label="Message"
+                      name="input-7-1" rows="2"/>
+        </v-flex>
+      </v-container>
+    </v-card-text>
 
-        <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-layout row wrap>
-                <v-btn color="black" class="mr-2 WM-ActionButton" @click="register()">
-                    <v-icon class="white--text mr-2 caption">fas fa-chevron-right</v-icon>
-                    <span>Send</span>
-                </v-btn>
-            </v-layout>
-        </v-card-actions>
-    </div>
+    <v-card-actions>
+      <v-layout align-center class="px-3" justify-center row wrap>
+        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black" style="padding:10px 60px"
+               @click="closeModal">
+          <v-icon class="black--text mr-2 caption">fas fa-times</v-icon>
+          <span class="black--text">Close</span>
+        </v-btn>
+        <v-spacer/>
+        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="register()">
+          <v-icon class="white--text mr-2 caption">fas fa-chevron-right</v-icon>
+          <span class="white--text">Send</span>
+        </v-btn>
+      </v-layout>
+
+    </v-card-actions>
+  </div>
 </template>
 <script>
-import { ApiService } from "@/services";
-import { urls } from "@/config/urls";
+import {ApiService} from "@/services";
+import {urls} from "@/config/urls";
 import toast from "@/services/global/toast.service";
-import { mapMutations, mapGetters } from "vuex";
+import {mapMutations, mapGetters} from "vuex";
+
 export default {
-    data() {
-        return {
-            form : {
-                message: '',
-                user_id : '',
-            }
-        };
+  data() {
+    return {
+      form: {
+        message: '',
+        user_id: '',
+      }
+    };
+  },
+  props: {
+    userId: {
+      type: Number,
+      default: 0
     },
-     props: {
-        userId: {
-            type : Number,
-            default : 0
-        },
-        message: {
-            type : String,
-            default : ''
-        },
+    message: {
+      type: String,
+      default: ''
     },
-    mounted() {
-        this.form.user_id = this.userId;
-    },
-    methods: {
-        ...mapMutations("modal", ["closeModal", "setResultModal"]),
-        async register() {
-            if(this.userId > 0) {
-                const result = await ApiService.post( urls.storeMessages, this.form );
-                if (result && result.status == 200) {
-                    this.setResultModal(Math.random(12));
-                    this.closeModal();
-                }
-            } else {
-                toast.error('please Select User');
-            }
+  },
+  mounted() {
+    this.form.user_id = this.userId;
+  },
+  methods: {
+    ...mapMutations("modal", ["closeModal", "setResultModal"]),
+    async register() {
+      if (this.userId > 0) {
+        const result = await ApiService.post(urls.storeMessages, this.form);
+        if (result && result.status == 200) {
+          this.setResultModal(Math.random(12));
+          this.closeModal();
         }
-    },
-    watch: {
-        userId(val) {
-            this.form.user_id = val;
-        }
-    },
-    computed: {
-        ...mapGetters("modal", ["getModalProperties"])
+      } else {
+        toast.error('please Select User');
+      }
     }
+  },
+  watch: {
+    userId(val) {
+      this.form.user_id = val;
+    }
+  },
+  computed: {
+    ...mapGetters("modal", ["getModalProperties"])
+  }
 };
 </script>

src/views/Tickets/List.vue

@@ -2,8 +2,8 @@
   <v-container fluid>
     <material-card class color="black" text title="My Recent ChatList">
       <v-toolbar color="white" flat>
-        <v-toolbar-title></v-toolbar-title>
-        <v-divider class="mx-2" inset vertical></v-divider>
+        <v-toolbar-title/>
+        <v-divider class="mx-2" inset vertical/>
         <v-spacer/>
         <v-btn class="WM-ActionButton mb-2 mr-4" color="black" @click="newmessage">
           <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>