New client random catchup (#8891)

* Added initial challenge pages

* Added challenge item and find guilds page

* Added challenge detail

* Added challenge modals

* Ported over challenge service code

* Ported over challenge ctrl code

* Added styles and column

* Minor modal updates

* Removed duplicate keys

* Fixed casing

* Added initial chat component

* Added copy as todo modal

* Added sync

* Added chat to groups

* Fixed lint

* Added notification service

* Added tag services

* Added notifications

* Added hall

* Added analytics

* Added http interceptor

* Added initial autocomplete

* Added initial footer component

* Began coding and designing footer

* Added inital hall

* Ported over inital group plan ctrl code

* Added initial invite modal

* Added initial member detail modal

* Added initial notification menu

* Ported over inital notification code

* Fixed import line

* Fixed autocomplete import casing

website/client/components/chat/autoComplete.vue

@@ -0,0 +1,66 @@
+<template lang="pug">
+div.autocomplete-selection
+  div(v-for='result in searchResults', @click='select(result)') {{ result }}
+</template>
+
+<style scoped>
+
+</style>
+
+<script>
+export default {
+  props: ['selections', 'text'],
+  data () {
+    return {
+      currentSearch: '',
+      searchActive: false,
+      currentSearchPosition: 0,
+      // @TODO: HAve this passed
+      tmpSelections: [
+        'TheHollidayInn',
+        'Paglias',
+      ],
+    };
+  },
+  computed: {
+    searchResults () {
+      if (!this.searchActive) return [];
+      let currentSearch = this.text.substring(this.currentSearchPosition + 1, this.text.length);
+      return this.tmpSelections.filter((option) => {
+        return option.toLowerCase().indexOf(currentSearch.toLowerCase()) !== -1;
+      });
+    },
+  },
+  watch: {
+    text (newText) {
+      if (newText[newText.length - 1] !== '@') return;
+      this.searchActive = true;
+      this.currentSearchPosition = newText.length - 1;
+    },
+    // @TODO: implement position
+    // caretChanged = function(newCaretPos) {
+    //   var relativeelement = $('.chat-form div:first');
+    //   var textarea = $('.chat-form textarea');
+    //   var userlist = $('.list-at-user');
+    //   var offset = {
+    //     x: textarea.offset().left - relativeelement.offset().left,
+    //     y: textarea.offset().top - relativeelement.offset().top,
+    //   };
+    //   if(relativeelement) {
+    //     var caretOffset = InputCaret.getPosition(textarea);
+    //     userlist.css({
+    //               left: caretOffset.left + offset.x,
+    //               top: caretOffset.top + offset.y + 16
+    //             });
+    //   }
+    // }
+  },
+  methods: {
+    select (result) {
+      let newText = this.text.slice(0, this.currentSearchPosition + 1) + result;
+      this.searchActive = false;
+      this.$emit('select', newText);
+    },
+  },
+};
+</script>