refactor: replace custom CRM with Monica fork

resources/js/components/people/ContactSelect.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <p v-if="title" class="mb2" :class="{ b: required }">
+      {{ title }}
+    </p>
+    <input type="hidden" :name="name" :value="selected ? selected.id : ''" />
+    <v-select
+      :id="id ? id : ''"
+      :value="selected"
+      :placeholder="placeholder"
+      :label="'complete_name'"
+      :options="items"
+      :dir="$root.htmldir"
+      @search="search"
+      @search:blur="blur"
+      @search:focus="focus"
+      @input="selected = $event; $emit('input', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import vSelect from 'vue-select';
+import 'vue-select/dist/vue-select.css';
+import axios from 'axios';
+
+export default {
+  components: {
+    vSelect
+  },
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    value: {
+      type: Object,
+      default: null,
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    required: {
+      type: Boolean,
+      default: true,
+    },
+    userContactId: {
+      type: Number,
+      default: null,
+    },
+    defaultOptions: {
+      type: Array,
+      default: () => [],
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    wait : {
+      type: Number,
+      default: 200,
+    },
+  },
+
+  data () {
+    return {
+      selected: null,
+      items: [],
+      callUpdateItems: null,
+      cache: [],
+    };
+  },
+
+  watch: {
+    value(newValue) {
+      this.selected = newValue;
+    }
+  },
+
+  mounted() {
+    this.selected = this.value;
+    this.callUpdateItems = _.debounce((text) => {
+      this.getContacts(text, this)
+        .then((response) => {
+          this.cache[text] = response;
+          this.displayItems(text);
+        });
+    }, this.wait);
+    this.items = this.defaultOptions;
+  },
+
+  methods: {
+
+    updateItems(text) {
+      if (text === null) {
+        return;
+      }
+      if (text.length < this.minLen) {
+        this.items = [];
+        return;
+      }
+
+      if (this.cache[text] === undefined) {
+        this.callUpdateItems(text);
+      } else {
+        this.callUpdateItems.cancel();
+        this.displayItems(text);
+      }
+    },
+
+    displayItems(text) {
+      var datas = [];
+      if (text === undefined || text.length === 0) {
+        datas = this.defaultOptions;
+      } else {
+        datas = this.cache[text];
+      }
+
+      datas = datas.filter(this.filter);
+
+      this.items = datas;
+    },
+
+    getContacts(keyword, vm) {
+      return axios.post('people/search', {
+        needle: keyword
+      }).then(function(response) {
+        return response.data.data;
+      });
+    },
+
+    filter(item) {
+      return this.userContactId !== item.id;
+    },
+
+    search(keyword, loading) {
+      this.updateItems(keyword);
+    },
+  }
+};
+</script>