refactor: replace custom CRM with Monica fork

resources/js/components/people/Participant.vue

@@ -0,0 +1,128 @@
+<style scoped>
+.participant {
+  background: #E5F3F9;
+  border-radius: 7px;
+}
+.participant-list {
+  height: 150px;
+}
+input[type=text] {
+  background-color: #f5f5f5;
+}
+input[type=text]:focus {
+  background-color: #fff;
+}
+.potential-participant:hover {
+  background-color: #f1f5fd;
+}
+</style>
+
+<template>
+  <div class="relative">
+    <ul v-show="chosenParticipants.length !== 0" class="mr2 mb3">
+      <li v-for="chosenParticipant in chosenParticipants"
+          :key="chosenParticipant.id"
+          class="dib participant br5 mr2"
+      >
+        <span class="ph2 pv1 dib">
+          {{ chosenParticipant.name }}
+        </span>
+        <span class="bl ph2 pv1 f6 pointer" @click.prevent="remove(chosenParticipant)">
+          ❌
+        </span>
+      </li>
+    </ul>
+    <div v-show="participants.length !== 0" class="ba b--gray-monica">
+      <span class="db bb b--gray-monica pa2">
+        <input v-model="search" type="text" :placeholder="$t('app.filter')" class="br2 f5 w-100 ba b--black-20 pa2 outline-0" />
+      </span>
+      <ul class="overflow-auto participant-list">
+        <li v-for="fparticipant in filteredList"
+            :key="fparticipant.id"
+            class="bb b--gray-monica pa2 pointer potential-participant"
+            @click.prevent="select(fparticipant)"
+        >
+          {{ fparticipant.name }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  props: {
+    initialParticipants: {
+      type: Array,
+      default: () => [],
+    },
+    hash: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      search: '',
+      participants: [],
+      chosenParticipants: [],
+    };
+  },
+
+  computed: {
+    filteredList() {
+      // filter the list when searching
+      // also, sort the list by name
+      var list;
+      list = this.participants.filter(participant => {
+        return participant.name.toLowerCase().includes(this.search.toLowerCase())
+               && this.chosenParticipants.find(p => p.id === participant.id) === undefined;
+      });
+
+      function compare(a, b) {
+        if (a.name < b.name) {
+          return -1;
+        }
+        if (a.name > b.name) {
+          return 1;
+        }
+        return 0;
+      }
+
+      return list.sort(compare);
+    }
+  },
+
+  mounted() {
+    this.prepareComponent();
+    this.chosenParticipants = this.initialParticipants;
+  },
+
+  methods: {
+    prepareComponent() {
+      this.getParticipants();
+    },
+
+    getParticipants: function () {
+      axios.get('people/' + this.hash + '/activities/contacts')
+        .then(response => {
+          this.participants = _.toArray(response.data);
+        });
+    },
+
+    select(participant) {
+      this.chosenParticipants.push(participant);
+      this.participants.splice(this.participants.indexOf(participant), 1);
+      this.$emit('update', this.chosenParticipants);
+    },
+
+    remove(participant) {
+      this.participants.push(participant);
+      this.chosenParticipants.splice(this.chosenParticipants.indexOf(participant), 1);
+    },
+  }
+};
+</script>