8 files changed, 174 insertions, 40 deletions

diff --git a/.gitignore b/.gitignore
index 403adbc..26d02e3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+.dir-locals.el
diff --git a/src/components/GroupMaker.vue b/src/components/GroupMaker.vue
new file mode 100644
index 0000000..59f83fd
--- /dev/null
+++ b/src/components/GroupMaker.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="group_maker">
+      Group maker
+      <form @submit="make_group">
+          <input
+              v-model="group_name"
+              ref='input'
+              type="text"
+              placeholder="Type group name..."
+          />
+
+          <select multiple v-model="users_selection">
+
+            <option
+              v-for="user in users"
+              :key="user.id"
+              :value="user.id">
+              {{user.username}}
+            </option>
+
+          </select>
+      </form>
+  </div>
+</template>
+
+<script>
+import ChatService from "@/services/ChatService.js"
+import AuthService from "@/services/AuthService.js"
+
+export default {
+  data() {
+    return {
+      group_name: "",
+      users_selection: [],
+      users: []
+    }
+  },
+
+  methods: {
+      close() {
+        this.$emit('close')
+      },
+
+      async make_group(e) {
+        e.preventDefault()
+        console.log(this.users_selection)
+        const {status} = await ChatService.group_create({
+          "name": this.group_name,
+          "users": this.users_selection
+        })
+
+        if(status === 201)
+          this.$notify({
+            type: "success",
+            text: "Group created!"
+          })
+      },
+
+    async set_users() {
+      const {status, data} = await AuthService.info("all=true")
+
+      if(status === 200)
+        this.users = data.users
+      else
+        this.close()
+
+      console.log(this.users)
+    }
+  },
+
+  created() {
+    this.$nextTick(function () {
+      this.$refs.input.focus()
+
+      this.set_users()
+    })
+  }
+}
+</script>
diff --git a/src/components/Searcher.vue b/src/components/Searcher.vue
index 43dd7bd..8488fd4 100644
--- a/src/components/Searcher.vue
+++ b/src/components/Searcher.vue
@@ -38,7 +38,7 @@ export default {
       let is_current_set = false
 
       Object.entries(this.commands).forEach((element) => {
-        if(element[0].startsWith(this.search)) {
+        if(element[0].startsWith(this.search) && element[1] instanceof Function) {
           sugestions.push(element)
           if(!is_current_set){ 
             this.current = element
@@ -62,7 +62,7 @@ export default {
     },
 
     execute_current() {
-      let out = this.current[1]()
+      let out = this.current[1](this)
       
       if(out instanceof Object) {
         this.search = ''
diff --git a/src/services/AuthService.js b/src/services/AuthService.js
index 758157c..2f58076 100644
--- a/src/services/AuthService.js
+++ b/src/services/AuthService.js
@@ -1,25 +1,8 @@
 import axios from "axios";
-import Vue from 'vue'
+import error_notify from './NotifyErrorService.js'
 
 const url = 'http://localhost:8000/api/auth/'
 
-const error_notify = (error) => {
-    for (const [key, values] of Object.entries(error.response.data)) {
-        console.log(values)
-        values.forEach(value => {
-            Vue.notify({
-                type: 'error',
-                title: value,
-                text: (key !== 'non_field_errors') ? key : ''
-            })
-        })
-    }
-    return {
-        data: error.response.data,
-        status: error.response.status
-    }
-}
-
 export default {
     async login(data) {
         return await axios
@@ -46,6 +29,19 @@ export default {
 
     },
 
+    async info(data) {
+        return await axios
+        .get(url+'info/?'+data)
+        .then(res => {
+            return {
+                data: res.data,
+                status: res.status
+            }
+        })
+        .catch(error => error_notify(error))
+
+    },
+
     async logout() {
         return await axios
         .post(url+'logout/')
@@ -56,4 +52,4 @@ export default {
         })
         .catch(error => error_notify(error))
     }
-}
\ No newline at end of file
+}
diff --git a/src/services/ChatService.js b/src/services/ChatService.js
new file mode 100644
index 0000000..ab1e6c2
--- /dev/null
+++ b/src/services/ChatService.js
@@ -0,0 +1,17 @@
+import axios from "axios";
+import error_notify from './NotifyErrorService.js'
+
+const url = 'http://localhost:8000/api/chat/'
+
+export default {
+    async group_create(data) {
+        return await axios
+        .post(url+'groups/', data)
+        .then(res => {
+            return {
+                status: res.status
+            }
+        })
+        .catch(error => error_notify(error))
+    }
+}
diff --git a/src/services/CommandsService.js b/src/services/CommandsService.js
index f8a815f..01a758e 100644
--- a/src/services/CommandsService.js
+++ b/src/services/CommandsService.js
@@ -3,18 +3,19 @@ import store from "@/store/index.js"
 import router from '@/router/index.js'
 
 export default {
-    logout() { 
+    groups() {
+        return {
+            send(searcher) {console.log(searcher)},
+
+            make(searcher) {
+                searcher.$emit('toogle_group_maker')
+            },
+        }
+    },
+
+    logout() {
         AuthService.logout()
         store.dispatch('logout')
         router.push('/login')
     },
-    friends() {
-        console.log("list")
-    },
-    tab() {
-        return {
-            on() {},
-            off() {}
-        }
-    }
 }
diff --git a/src/services/NotifyErrorService.js b/src/services/NotifyErrorService.js
new file mode 100644
index 0000000..b28e664
--- /dev/null
+++ b/src/services/NotifyErrorService.js
@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+const error_notify = (error) => {
+    for (const [key, values] of Object.entries(error.response.data)) {
+        console.log(values)
+        values.forEach(value => {
+            Vue.notify({
+                type: 'error',
+                title: value,
+                text: (key !== 'non_field_errors') ? key : ''
+            })
+        })
+    }
+    return {
+        data: error.response.data,
+        status: error.response.status
+    }
+}
+
+export default error_notify
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2954857..abf6fc8 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,33 @@
 <template>
   <div class="home" v-hotkey="keymap">
     Hi {{get_username}}!
-    <input type="button" value="Logout!" @click="logout">
-    <Searcher v-if="show" @close="hide" />
+      <Searcher
+          v-if="popups.searcher_show"
+          @close="hideSearcher"
+          @toogle_group_maker="toogleGroupShow"
+      />
+
+      <GroupMaker
+          v-if="popups.group_maker_show"
+          @close="hideGroup"
+
+      />
   </div>
 </template>
 
 <script>
 import Searcher from '@/components/Searcher.vue'
+import GroupMaker from '@/components/GroupMaker.vue'
+
+const popups = {
+    searcher_show: false,
+    group_maker_show: false
+ }
 
 export default {
   data() {
     return {
-      show: false,
+        popups
     }
   },
 
@@ -22,8 +37,11 @@ export default {
       this.$router.push('/login')
     },
     
-    toogleShow() { this.show = !this.show },
-    hide() { this.show = false }
+    toogleSearcherShow() { this.popups.searcher_show = !this.popups.searcher_show },
+    hideSearcher() { this.popups.searcher_show = false },
+
+    toogleGroupShow() { this.popups.group_maker_show = !this.popups.group_maker_show },
+    hideGroup() { this.popups.group_maker_show = false }
   },
 
   computed: {
@@ -33,15 +51,16 @@ export default {
 
     keymap() {
       return { 
-        'ctrl+esc': this.toogleShow,
-        'ctrl+shift+p': this.toogleShow,
-        'esc': this.hide
+        'ctrl+esc': this.toogleSearcherShow,
+        'ctrl+shift+p': this.toogleSearcherShow,
+        'esc': this.hideGroup
       }
     }
   },
 
   components: {
-    Searcher
+      Searcher,
+      GroupMaker
   },
 
   created() {