diff options
author | jdlugosz963 <jdlugosz963@gmail.com> | 2021-12-12 23:09:20 +0100 |
---|---|---|
committer | jdlugosz963 <jdlugosz963@gmail.com> | 2021-12-12 23:09:20 +0100 |
commit | 4b6be9f09ff56dfae1c719cb744f2312e11be317 (patch) | |
tree | 35ea43304a32dc47ed1a7289052d1b97fca944dd /src/components/GroupMaker.vue | |
parent | 10abd20260050174dd508038f0b95c5f8f740933 (diff) | |
download | lom_frontend-4b6be9f09ff56dfae1c719cb744f2312e11be317.tar.gz lom_frontend-4b6be9f09ff56dfae1c719cb744f2312e11be317.zip |
add group maker
Diffstat (limited to 'src/components/GroupMaker.vue')
-rw-r--r-- | src/components/GroupMaker.vue | 79 |
1 files changed, 79 insertions, 0 deletions
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 @@ | |||
1 | <template> | ||
2 | <div class="group_maker"> | ||
3 | Group maker | ||
4 | <form @submit="make_group"> | ||
5 | <input | ||
6 | v-model="group_name" | ||
7 | ref='input' | ||
8 | type="text" | ||
9 | placeholder="Type group name..." | ||
10 | /> | ||
11 | |||
12 | <select multiple v-model="users_selection"> | ||
13 | |||
14 | <option | ||
15 | v-for="user in users" | ||
16 | :key="user.id" | ||
17 | :value="user.id"> | ||
18 | {{user.username}} | ||
19 | </option> | ||
20 | |||
21 | </select> | ||
22 | </form> | ||
23 | </div> | ||
24 | </template> | ||
25 | |||
26 | <script> | ||
27 | import ChatService from "@/services/ChatService.js" | ||
28 | import AuthService from "@/services/AuthService.js" | ||
29 | |||
30 | export default { | ||
31 | data() { | ||
32 | return { | ||
33 | group_name: "", | ||
34 | users_selection: [], | ||
35 | users: [] | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | methods: { | ||
40 | close() { | ||
41 | this.$emit('close') | ||
42 | }, | ||
43 | |||
44 | async make_group(e) { | ||
45 | e.preventDefault() | ||
46 | console.log(this.users_selection) | ||
47 | const {status} = await ChatService.group_create({ | ||
48 | "name": this.group_name, | ||
49 | "users": this.users_selection | ||
50 | }) | ||
51 | |||
52 | if(status === 201) | ||
53 | this.$notify({ | ||
54 | type: "success", | ||
55 | text: "Group created!" | ||
56 | }) | ||
57 | }, | ||
58 | |||
59 | async set_users() { | ||
60 | const {status, data} = await AuthService.info("all=true") | ||
61 | |||
62 | if(status === 200) | ||
63 | this.users = data.users | ||
64 | else | ||
65 | this.close() | ||
66 | |||
67 | console.log(this.users) | ||
68 | } | ||
69 | }, | ||
70 | |||
71 | created() { | ||
72 | this.$nextTick(function () { | ||
73 | this.$refs.input.focus() | ||
74 | |||
75 | this.set_users() | ||
76 | }) | ||
77 | } | ||
78 | } | ||
79 | </script> | ||