added SystemMessages.vue and reffactoring Curator.vue

jest.config.js

@@ -13,6 +13,7 @@ module.exports = {
     "!views/Records/NetworkGraph.vue",
     "!src/components/Records/Search/Input/AdvancedSearch/QueryBuilderComponents/index.js",
     "!src/components/Records/Search/SaveSearch/StepperComponents/index.js",
+    "!src/components/Curators/index.js",
   ],
   testMatch: [
     "**/**.spec.js",

src/components/Curators/SystemMessages.vue

@@ -0,0 +1,338 @@
+<template>
+  <div>
+    <v-col cols12>
+      <v-card
+        v-if="user().role === 'super_curator' || user().role === 'developer'"
+        class="mb-2"
+      >
+        <v-card-text v-if="systemMessages">
+          <v-card-title
+            id="system-messages"
+            class="green white--text"
+          >
+            SYSTEM MESSAGES
+            <v-btn
+              class="info ml-5"
+              @click.stop="showAddMessage()"
+            >
+              <v-icon
+                color="white"
+                class="mr-1"
+              >
+                fa fa-plus
+              </v-icon>
+              <span class="white--text">Add message</span>
+            </v-btn>
+            <v-spacer />
+          </v-card-title>
+          <v-data-table
+            :loading="loading"
+            :headers="headerItems"
+            :items="systemMessages"
+            class="elevation-1"
+            :footer-props="{ 'items-per-page-options': [5, 10, 20, 25, 30] }"
+          >
+            <template
+              v-if="systemMessages"
+              #item="props"
+            >
+              <tr>
+                <td>
+                  {{ props.item.id }}
+                </td>
+                <td>
+                  <v-edit-dialog
+                    :return-value.sync="props.item.message"
+                    large
+                    @save="
+                      saveEditedMessage(props.item.id, props.item.message)
+                    "
+                  >
+                    {{ props.item.message }}
+                    <template #input>
+                      <div class="dialogMessageEdit">
+                        <div class="mt-4 title">
+                          Update Message
+                        </div>
+                        <v-textarea
+                          v-model="props.item.message"
+                          width="1200px"
+                          label="Edit away!"
+                          filled
+                        />
+                      </div>
+                    </template>
+                  </v-edit-dialog>
+                </td>
+                <td>
+                  {{ props.item.created_at }}
+                </td>
+                <td>
+                  {{ props.item.updated_at }}
+                </td>
+                <td>
+                  <v-icon
+                    color="red"
+                    dark
+                    right
+                    small
+                    @click="deleteMessage(props.item.id)"
+                  >
+                    fas fa-trash
+                  </v-icon>
+                </td>
+              </tr>
+            </template>
+          </v-data-table>
+        </v-card-text>
+      </v-card>
+    </v-col>
+    <!-- this shouldn't appear as an unauthorised user shouldn't be here -->
+    <v-row>
+      <!-- dialogs -->
+      <v-layout
+        row
+        justify-center
+      >
+        <v-dialog
+          v-model="dialogs.addMessage"
+          max-width="700px"
+        >
+          <v-card>
+            <v-card-title class="headline">
+              Add new message
+            </v-card-title>
+            <v-card-text>
+              <v-textarea
+                v-model="dialogs.newMessage"
+                name="new-message-field"
+                label="New message"
+                placeholder="Type a message here..."
+                regular
+                clearable
+              />
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="closeAddMessageMenu()"
+              >
+                Cancel
+              </v-btn>
+              <v-btn
+                color="blue darken-1"
+                text
+                :disabled="!dialogs.newMessage"
+                @click="addMessage()"
+              >
+                OK
+              </v-btn>
+              <v-spacer />
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-layout>
+      <v-layout
+        row
+        justify-center
+      >
+        <v-dialog
+          v-model="dialogs.deleteMessage"
+          max-width="700px"
+        >
+          <v-card>
+            <v-card-title class="headline">
+              Are you sure you want to
+              <span style="color: red; padding-left: 5px; padding-right: 5px">
+                DELETE
+              </span>
+              this message?
+              <ul style="list-style-type: none">
+                <li>ID: {{ dialogs.messageId }}</li>
+              </ul>
+            </v-card-title>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="closeDeleteMessageMenu()"
+              >
+                Cancel
+              </v-btn>
+              <v-btn
+                color="blue darken-1"
+                text
+                @click="confirmDeleteMessage()"
+              >
+                OK
+              </v-btn>
+              <v-spacer />
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-layout>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+import RestClient from "@/lib/Client/RESTClient";
+import GraphClient from "@/lib/GraphClient/GraphClient";
+import getMessages from "@/lib/GraphClient/queries/getMessages.json"
+import store from "@/store";
+import formatDate from "@/utils/generalUtils";
+
+const restClient = new RestClient();
+const client = new GraphClient();
+
+export default {
+  name: "SystemMessages",
+  mixins: [formatDate],
+  props:{
+    headerItems: {
+      type: Array,
+      default: null
+    },
+  },
+  data: () => {
+    return {
+      systemMessages:[],
+      loading: false,
+      dialogs: {
+        id: null,
+        message: null,
+        addMessage: false,
+        deleteMessage: false,
+        newMessage: null,
+        messageId: null,
+      },
+      error: {
+        general: null,
+      },
+    };
+  },
+  computed: {
+    ...mapState("users", ["user", "messages"]),
+  },
+
+  async mounted() {
+    this.loading = true;
+    client.setHeader(this.user().credentials.token);
+    //Fetching hidden records
+    let messages = await client.executeQuery(getMessages);
+    this.prepareSystemMessages(messages)
+    this.loading = false;
+  },
+  methods: {
+
+    /**
+     * Method to fetch messages from system
+     * @param dataCuration
+     */
+    prepareSystemMessages(dataCuration) {
+      if(Array.isArray(dataCuration.messages) && dataCuration.messages.length) {
+        dataCuration.messages.forEach((item) => {
+          this.systemMessages.push({
+            id: item.id,
+            message: item.message,
+            created_at: this.formatDate(item.createdAt),
+            updated_at: this.formatDate(item.updatedAt),
+          });
+        });
+      }
+    },
+
+    showAddMessage() {
+      const _module = this;
+      _module.dialogs.addMessage = true;
+    },
+
+    async saveEditedMessage(id, message) {
+      let _module = this;
+      let data = {
+        id: id,
+        message: message,
+      };
+      let response = await restClient.updateMessage(
+          data,
+          this.user().credentials.token
+      );
+      if (response.error) {
+        _module.error.general = response.error;
+      } else {
+        _module.systemMessages.forEach(function (m) {
+          if (m.id === id) {
+            m.message = message;
+          }
+        });
+        await store.dispatch("messages/setMessages");
+      }
+    },
+
+    deleteMessage(messageId) {
+      const _module = this;
+      _module.dialogs.messageId = messageId;
+      _module.dialogs.deleteMessage = true;
+    },
+
+    closeAddMessageMenu() {
+      const _module = this;
+      _module.dialogs.addMessage = false;
+    },
+
+    async addMessage() {
+      const _module = this;
+      let data = {
+        message: _module.dialogs.newMessage,
+      };
+      let response = await restClient.createMessage(
+          data,
+          this.user().credentials.token
+      );
+      if (response.error) {
+        _module.error.general = response.error;
+      } else {
+        _module.systemMessages.push({
+          id: response.id,
+          message: response.message,
+          created_at: this.formatDate(response.created_at),
+          updated_at: this.formatDate(response.updated_at),
+        });
+        await store.dispatch("messages/setMessages");
+      }
+      _module.dialogs.addMessage = false;
+      _module.dialogs.newMessage = null;
+    },
+
+    closeDeleteMessageMenu() {
+      const _module = this;
+      _module.dialogs.messageId = null;
+      _module.dialogs.deleteMessage = false;
+    },
+
+    async confirmDeleteMessage() {
+      const _module = this;
+      let response = await restClient.deleteMessage(
+          _module.dialogs.messageId,
+          this.user().credentials.token
+      );
+      if (response.error) {
+        _module.error.general = response.error;
+      } else {
+        let filtered = _module.systemMessages.filter(function (f) {
+          return f.id !== _module.dialogs.messageId;
+        });
+        _module.systemMessages = filtered;
+        await store.dispatch("messages/setMessages");
+      }
+      _module.dialogs.deleteMessage = false;
+      _module.dialogs.messageId = null;
+    },
+  },
+};
+</script>

src/components/Curators/index.js

@@ -8,3 +8,5 @@ export const RecentCuratorCreation = () =>
     import("@/components/Curators/RecentCuratorCreation.vue");
 export const RecordsAwaitingApproval = () =>
     import("@/components/Curators/RecordsAwaitingApproval.vue");
+export const SystemMessages = () =>
+    import("@/components/Curators/SystemMessages.vue");

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

@@ -0,0 +1,9 @@
+{
+  "queryName": "leastRecentlyUpdated",
+  "queryParam": null,
+  "fields": [
+    "id",
+    "name",
+    "updatedAt"
+  ]
+}

src/lib/GraphClient/queries/getMessages.json

@@ -2,7 +2,9 @@
   "queryName": "messages",
   "queryParam": null,
   "fields": [
+    "id",
     "message",
-    "updatedAt"
+    "updatedAt",
+    "createdAt"
   ]
 }