Skip to content

Commit 1b46e3b

Browse files
prakhyatoxprakhyatox
committed
added SystemMessages.vue and reffactoring Curator.vue
1 parent d88abf2 commit 1b46e3b

File tree

12 files changed

+567
-494
lines changed

12 files changed

+567
-494
lines changed

‎jest.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ module.exports = {
1313
"!views/Records/NetworkGraph.vue",
1414
"!src/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/index.js",
1515
"!src/components/Records/Search/SaveSearch/StepperComponents/index.js",
16+
"!src/components/Curators/index.js",
1617
],
1718
testMatch: [
1819
"**/**.spec.js",

‎src/components/Curators/SystemMessages.vue

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
<template>
2+
<div>
3+
<v-col cols12>
4+
<v-card
5+
v-if="user().role === 'super_curator' || user().role === 'developer'"
6+
class="mb-2"
7+
>
8+
<v-card-text v-if="systemMessages">
9+
<v-card-title
10+
id="system-messages"
11+
class="green white--text"
12+
>
13+
SYSTEM MESSAGES
14+
<v-btn
15+
class="info ml-5"
16+
@click.stop="showAddMessage()"
17+
>
18+
<v-icon
19+
color="white"
20+
class="mr-1"
21+
>
22+
fa fa-plus
23+
</v-icon>
24+
<span class="white--text">Add message</span>
25+
</v-btn>
26+
<v-spacer />
27+
</v-card-title>
28+
<v-data-table
29+
:loading="loading"
30+
:headers="headerItems"
31+
:items="systemMessages"
32+
class="elevation-1"
33+
:footer-props="{ 'items-per-page-options': [5, 10, 20, 25, 30] }"
34+
>
35+
<template
36+
v-if="systemMessages"
37+
#item="props"
38+
>
39+
<tr>
40+
<td>
41+
{{ props.item.id }}
42+
</td>
43+
<td>
44+
<v-edit-dialog
45+
:return-value.sync="props.item.message"
46+
large
47+
@save="
48+
saveEditedMessage(props.item.id, props.item.message)
49+
"
50+
>
51+
{{ props.item.message }}
52+
<template #input>
53+
<div class="dialogMessageEdit">
54+
<div class="mt-4 title">
55+
Update Message
56+
</div>
57+
<v-textarea
58+
v-model="props.item.message"
59+
width="1200px"
60+
label="Edit away!"
61+
filled
62+
/>
63+
</div>
64+
</template>
65+
</v-edit-dialog>
66+
</td>
67+
<td>
68+
{{ props.item.created_at }}
69+
</td>
70+
<td>
71+
{{ props.item.updated_at }}
72+
</td>
73+
<td>
74+
<v-icon
75+
color="red"
76+
dark
77+
right
78+
small
79+
@click="deleteMessage(props.item.id)"
80+
>
81+
fas fa-trash
82+
</v-icon>
83+
</td>
84+
</tr>
85+
</template>
86+
</v-data-table>
87+
</v-card-text>
88+
</v-card>
89+
</v-col>
90+
<!-- this shouldn't appear as an unauthorised user shouldn't be here -->
91+
<v-row>
92+
<!-- dialogs -->
93+
<v-layout
94+
row
95+
justify-center
96+
>
97+
<v-dialog
98+
v-model="dialogs.addMessage"
99+
max-width="700px"
100+
>
101+
<v-card>
102+
<v-card-title class="headline">
103+
Add new message
104+
</v-card-title>
105+
<v-card-text>
106+
<v-textarea
107+
v-model="dialogs.newMessage"
108+
name="new-message-field"
109+
label="New message"
110+
placeholder="Type a message here..."
111+
regular
112+
clearable
113+
/>
114+
</v-card-text>
115+
<v-card-actions>
116+
<v-spacer />
117+
<v-btn
118+
color="blue darken-1"
119+
text
120+
@click="closeAddMessageMenu()"
121+
>
122+
Cancel
123+
</v-btn>
124+
<v-btn
125+
color="blue darken-1"
126+
text
127+
:disabled="!dialogs.newMessage"
128+
@click="addMessage()"
129+
>
130+
OK
131+
</v-btn>
132+
<v-spacer />
133+
</v-card-actions>
134+
</v-card>
135+
</v-dialog>
136+
</v-layout>
137+
<v-layout
138+
row
139+
justify-center
140+
>
141+
<v-dialog
142+
v-model="dialogs.deleteMessage"
143+
max-width="700px"
144+
>
145+
<v-card>
146+
<v-card-title class="headline">
147+
Are you sure you want to
148+
<span style="color: red; padding-left: 5px; padding-right: 5px">
149+
DELETE
150+
</span>
151+
this message?
152+
<ul style="list-style-type: none">
153+
<li>ID: {{ dialogs.messageId }}</li>
154+
</ul>
155+
</v-card-title>
156+
<v-card-actions>
157+
<v-spacer />
158+
<v-btn
159+
color="blue darken-1"
160+
text
161+
@click="closeDeleteMessageMenu()"
162+
>
163+
Cancel
164+
</v-btn>
165+
<v-btn
166+
color="blue darken-1"
167+
text
168+
@click="confirmDeleteMessage()"
169+
>
170+
OK
171+
</v-btn>
172+
<v-spacer />
173+
</v-card-actions>
174+
</v-card>
175+
</v-dialog>
176+
</v-layout>
177+
</v-row>
178+
</div>
179+
</template>
180+
181+
<script>
182+
import { mapState } from "vuex";
183+
184+
import RestClient from "@/lib/Client/RESTClient";
185+
import GraphClient from "@/lib/GraphClient/GraphClient";
186+
import getMessages from "@/lib/GraphClient/queries/getMessages.json"
187+
import store from "@/store";
188+
import formatDate from "@/utils/generalUtils";
189+
190+
const restClient = new RestClient();
191+
const client = new GraphClient();
192+
193+
export default {
194+
name: "SystemMessages",
195+
mixins: [formatDate],
196+
props:{
197+
headerItems: {
198+
type: Array,
199+
default: null
200+
},
201+
},
202+
data: () => {
203+
return {
204+
systemMessages:[],
205+
loading: false,
206+
dialogs: {
207+
id: null,
208+
message: null,
209+
addMessage: false,
210+
deleteMessage: false,
211+
newMessage: null,
212+
messageId: null,
213+
},
214+
error: {
215+
general: null,
216+
},
217+
};
218+
},
219+
computed: {
220+
...mapState("users", ["user", "messages"]),
221+
},
222+
223+
async mounted() {
224+
this.loading = true;
225+
client.setHeader(this.user().credentials.token);
226+
//Fetching hidden records
227+
let messages = await client.executeQuery(getMessages);
228+
this.prepareSystemMessages(messages)
229+
this.loading = false;
230+
},
231+
methods: {
232+
233+
/**
234+
* Method to fetch messages from system
235+
* @param dataCuration
236+
*/
237+
prepareSystemMessages(dataCuration) {
238+
if(Array.isArray(dataCuration.messages) && dataCuration.messages.length) {
239+
dataCuration.messages.forEach((item) => {
240+
this.systemMessages.push({
241+
id: item.id,
242+
message: item.message,
243+
created_at: this.formatDate(item.createdAt),
244+
updated_at: this.formatDate(item.updatedAt),
245+
});
246+
});
247+
}
248+
},
249+
250+
showAddMessage() {
251+
const _module = this;
252+
_module.dialogs.addMessage = true;
253+
},
254+
255+
async saveEditedMessage(id, message) {
256+
let _module = this;
257+
let data = {
258+
id: id,
259+
message: message,
260+
};
261+
let response = await restClient.updateMessage(
262+
data,
263+
this.user().credentials.token
264+
);
265+
if (response.error) {
266+
_module.error.general = response.error;
267+
} else {
268+
_module.systemMessages.forEach(function (m) {
269+
if (m.id === id) {
270+
m.message = message;
271+
}
272+
});
273+
await store.dispatch("messages/setMessages");
274+
}
275+
},
276+
277+
deleteMessage(messageId) {
278+
const _module = this;
279+
_module.dialogs.messageId = messageId;
280+
_module.dialogs.deleteMessage = true;
281+
},
282+
283+
closeAddMessageMenu() {
284+
const _module = this;
285+
_module.dialogs.addMessage = false;
286+
},
287+
288+
async addMessage() {
289+
const _module = this;
290+
let data = {
291+
message: _module.dialogs.newMessage,
292+
};
293+
let response = await restClient.createMessage(
294+
data,
295+
this.user().credentials.token
296+
);
297+
if (response.error) {
298+
_module.error.general = response.error;
299+
} else {
300+
_module.systemMessages.push({
301+
id: response.id,
302+
message: response.message,
303+
created_at: this.formatDate(response.created_at),
304+
updated_at: this.formatDate(response.updated_at),
305+
});
306+
await store.dispatch("messages/setMessages");
307+
}
308+
_module.dialogs.addMessage = false;
309+
_module.dialogs.newMessage = null;
310+
},
311+
312+
closeDeleteMessageMenu() {
313+
const _module = this;
314+
_module.dialogs.messageId = null;
315+
_module.dialogs.deleteMessage = false;
316+
},
317+
318+
async confirmDeleteMessage() {
319+
const _module = this;
320+
let response = await restClient.deleteMessage(
321+
_module.dialogs.messageId,
322+
this.user().credentials.token
323+
);
324+
if (response.error) {
325+
_module.error.general = response.error;
326+
} else {
327+
let filtered = _module.systemMessages.filter(function (f) {
328+
return f.id !== _module.dialogs.messageId;
329+
});
330+
_module.systemMessages = filtered;
331+
await store.dispatch("messages/setMessages");
332+
}
333+
_module.dialogs.deleteMessage = false;
334+
_module.dialogs.messageId = null;
335+
},
336+
},
337+
};
338+
</script>

‎src/components/Curators/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,5 @@ export const RecentCuratorCreation = () =>
88
import("@/components/Curators/RecentCuratorCreation.vue");
99
export const RecordsAwaitingApproval = () =>
1010
import("@/components/Curators/RecordsAwaitingApproval.vue");
11+
export const SystemMessages = () =>
12+
import("@/components/Curators/SystemMessages.vue");

‎src/lib/GraphClient/queries/curators/getLeastRecentlyUpdated.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"queryName": "leastRecentlyUpdated",
3+
"queryParam": null,
4+
"fields": [
5+
"id",
6+
"name",
7+
"updatedAt"
8+
]
9+
}

‎src/lib/GraphClient/queries/getMessages.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
"queryName": "messages",
33
"queryParam": null,
44
"fields": [
5+
"id",
56
"message",
6-
"updatedAt"
7+
"updatedAt",
8+
"createdAt"
79
]
810
}

0 commit comments

Comments
 (0)