change Ticket

resources/js/vue/components/modal/ticket/NewMessage.vue

@@ -1,96 +1,59 @@
 <template>
-  <div id="">
-    <v-container >
-      <material-card class color="black" title="New Message" text>
-        <!-- <v-card> -->
-
-          <!-- <v-card-title>
-            <span class="headline"></span>
-          </v-card-title> -->
-          <v-layout wrap class="px-4 mb-3">
-          <!-- <v-toolbar-title>Search User</v-toolbar-title> -->
-          <v-flex xs12 sm12 md12>
-              <v-autocomplete
-                v-model="model"
-                :items="items"
-                :loading="loading"
-                :search-input.sync="search"
-                label="Search"
-                persistent-hint
-                prepend-icon="fas fa-search"
-                color="black"
-              >
-              </v-autocomplete>
-            </v-flex>
-            </v-layout>
-          <v-card-text>
-            <v-container grid-list-md>
-                <v-flex xs12 sm12 md12>
-                  <v-textarea
-                    name="input-7-1"
-                    color="black"
-                    label="Default style"
-                    value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
-                    hint="Hint text"
-                  ></v-textarea>
-                </v-flex>
-            </v-container>
-          </v-card-text>
-
-          <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-layout row wrap>
-              <v-btn color="pink" class="WM-ActionButton text-lg-left">
-                <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
-                <span>Cancel</span>
-              </v-btn>
-              <v-btn color="black" class="mr-2 WM-ActionButton">
-                <v-icon class="white--text mr-2 caption">fas fa-chevron-right</v-icon>
-                <span>Send</span>
-              </v-btn>
-            </v-layout>
-          </v-card-actions>
-        <!-- </v-card> -->
-      </v-layout>
-      </material-card>
-    </v-container>
-  </div>
+    <div>
+        <v-container>
+            <material-card class color="black" title="New Message" text>
+                <v-layout wrap class="px-4 mb-3">
+                    <v-flex xs12 sm12 md12>
+                        <v-autocomplete
+                            :items="items"
+                            :loading="loading"
+                            :search-input.sync="search"
+                            v-model="user_id"
+                            item-text="name"
+                            item-value="id"
+                            label="Search"
+                            persistent-hint
+                            prepend-icon="fas fa-search"
+                            color="black"
+                        ></v-autocomplete>
+                    </v-flex>
+                </v-layout>
+                <ticket-send-message :user-id="user_id" />
+            </material-card>
+        </v-container>
+    </div>
 </template>
 <script>
-  export default {
-    data () {
-      return {
-        loading: false,
-        items: [],
-        search: null,
-        select: null,
-        states: [
-          'Ali',
-          'Fatemeh',
-          'Mohsen',
-          'Sara',
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
 
-        ]
-      }
+export default {
+    data() {
+        return {
+            loading: false,
+            items: [],
+            search: "",
+            user_id: 0
+        };
     },
     watch: {
-      search (val) {
-        val && val !== this.select && this.querySelections(val)
-      }
+        search(val) {
+            val && this.querySelections(val);
+        }
     },
     methods: {
-      querySelections (v) {
-        this.loading = true
-        // Simulated ajax query
-        setTimeout(() => {
-          this.items = this.states.filter(e => {
-            return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
-          })
-          this.loading = false
-        }, 500)
-      }
+        async querySelections(val) {
+            if (!this.loading) {
+                this.loading = true;
+                const result = await ApiService.get(urls.userSearch(val));
+                if (result && result.data.data) {
+                    this.items = result.data.data;
+                    this.loading = false;
+                }
+            }
+        }
     }
-  }
+};
 </script>
 <style lang="scss" scoped>
 </style>