Manage data sources

app/init/src/components/EditDataSource.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="col">
+    <data-source-form></data-source-form>
+  </div>
+</template>
+
+<script>
+import DataSourceForm from "./datasource/DataSourceForm.vue";
+
+export default {
+  components: {
+    "data-source-form": DataSourceForm
+  }
+};
+</script>

app/init/src/components/EditUserGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="col-8">
+  <div class="col">
     <user-group-form></user-group-form>
   </div>
 </template>

app/init/src/components/ViewDataSource.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="col">
+    <h1 class="mt-5">Data Sources</h1>
+    <data-source-button-create></data-source-button-create>
+    <data-source-search></data-source-search>
+  </div>
+</template>
+
+<script>
+import DataSourceButtonCreate from "./datasource/DataSourceButtonCreate.vue";
+import DataSourceSearch from "./datasource/DataSourceSearch.vue";
+
+export default {
+  components: {
+    "data-source-button-create": DataSourceButtonCreate,
+    "data-source-search": DataSourceSearch
+  }
+};
+</script>

app/init/src/components/datasource/DataSourceButtonClose.vue

@@ -0,0 +1,17 @@
+<template>
+  <button type="button" class="btn btn-outline-secondary ml-1" v-on:click="close">
+    Close
+  </button>
+</template>
+
+<script>
+export default {
+  methods: {
+    close() {
+      this.$router.push({
+        name: "view-data-source"
+      });
+    }
+  }
+};
+</script>

app/init/src/components/datasource/DataSourceButtonCreate.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- Use router-link rather than v-on:click to allow user to open page in new window -->
+  <router-link v-if="show" v-bind:to="'datasources/new'">
+    <button type="button" class="btn btn-success">
+      Create Data Source
+    </button>
+  </router-link>
+</template>
+
+<script>
+export default {
+  computed: {
+    show() {
+      let roles = ["admin"];
+      return roles.includes(this.$store.state.currentUser.role);
+    }
+  }
+};
+</script>

app/init/src/components/datasource/DataSourceButtonDelete.vue

@@ -0,0 +1,31 @@
+<template>
+  <span>
+    <button v-if="show" type="button" class="btn btn-danger float-right" data-toggle="modal" data-target="#ModalBoxDelete">
+      Delete
+    </button>
+
+    <!-- Modal box to confirm deletion -->
+    <modal-box-delete v-bind:objectType="'dataSource'" v-bind:dataSourceId="dataSourceId"> </modal-box-delete>
+  </span>
+</template>
+
+<script>
+import ModalBoxDelete from "../utils/ModalBoxDelete.vue";
+import Mixins from "../utils/Mixins.vue";
+
+export default {
+  mixins: [Mixins],
+  components: {
+    "modal-box-delete": ModalBoxDelete
+  },
+  props: {
+    dataSourceId: Number
+  },
+  computed: {
+    show() {
+      let roles = ["admin", "advanced"];
+      return roles.includes(this.$store.state.currentUser.role);
+    }
+  }
+};
+</script>

app/init/src/components/datasource/DataSourceButtonResetPassword.vue

@@ -0,0 +1,23 @@
+<template>
+  <button v-if="show" type="button" class="btn btn-secondary ml-1" v-on:click="resetPassword">
+    Reset Password
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    dataSourceId: String
+  },
+  methods: {
+    resetPassword() {
+      this.$emit("resetPassword", true);
+    }
+  },
+  computed: {
+    show() {
+      return this.dataSourceId != "new";
+    }
+  }
+};
+</script>

app/init/src/components/datasource/DataSourceButtonSave.vue

@@ -0,0 +1,106 @@
+<template>
+  <button v-if="show" type="button" class="btn btn-success" v-on:click="saveDataSource">
+    Save
+  </button>
+</template>
+
+<script>
+import Mixins from "../utils/Mixins.vue";
+
+export default {
+  mixins: [Mixins],
+  props: {
+    dataSource: Object,
+    showPasswordField: Boolean
+  },
+  methods: {
+    saveDataSource() {
+      // Method to create or update a data source
+      // If dataSource.id exists, update existing data source
+      if (this.dataSource.id) {
+        let payload = {
+          query: this.$store.state.mutationUpdateDataSource,
+          variables: {
+            id: this.dataSource.id,
+            dataSourcePatch: {
+              name: this.dataSource.name,
+              dataSourceTypeId: this.dataSource.dataSourceTypeId,
+              connectionString: this.dataSource.connectionString,
+              login: this.dataSource.login
+            }
+          }
+        };
+
+        // Update password only if value is supplied by user
+        if (this.showPasswordField && this.dataSource.password) {
+          payload.variables.dataSourcePatch['password'] = this.dataSource.password;
+        }
+
+        let headers = {};
+        if (this.$session.exists()) {
+          headers = { Authorization: "Bearer " + this.$session.get("jwt") };
+        }
+        this.$http.post(this.$store.state.graphqlUrl, payload, { headers }).then(
+          function(response) {
+            if (response.data.errors) {
+              this.displayError(response);
+            } else {
+              this.dataSource.updatedDate = response.data.data.updateDataSourceById.dataSource.updatedDate;
+              this.dataSource.userByUpdatedById.email = response.data.data.updateDataSourceById.dataSource.userByUpdatedById.email;
+            }
+          },
+          // Error callback
+          function(response) {
+            this.displayError(response);
+          }
+        );
+      }
+      // If dataSource.id does not exist, create a new data source
+      else {
+        let payload = {
+          query: this.$store.state.mutationCreateDataSource,
+          variables: {
+            dataSource: {
+              name: this.dataSource.name,
+              dataSourceTypeId: this.dataSource.dataSourceTypeId,
+              connectionString: this.dataSource.connectionString,
+              login: this.dataSource.login,
+              password: this.dataSource.password
+            }
+          }
+        };
+        let headers = {};
+        if (this.$session.exists()) {
+          headers = { Authorization: "Bearer " + this.$session.get("jwt") };
+        }
+        this.$http.post(this.$store.state.graphqlUrl, payload, { headers }).then(
+          function(response) {
+            if (response.data.errors) {
+              this.displayError(response);
+            } else {
+              // Capture new data source Id in case user wants to delete or update it
+              this.dataSource.id = response.data.data.createDataSource.dataSource.id;
+              this.$router.push({
+                name: "edit-data-source",
+                params: {
+                  dataSourceId: this.dataSource.id
+                }
+              });
+            }
+          },
+          // Error callback
+          function(response) {
+            this.displayError(response);
+          }
+        );
+      }
+    }
+  },
+  computed: {
+    show() {
+      let roles = ["admin"];
+      return roles.includes(this.$store.state.currentUser.role);
+    }
+  }
+};
+</script>

app/init/src/components/datasource/DataSourceButtonTestConnectivity.vue

@@ -0,0 +1,21 @@
+<template>
+  <span>
+    <button v-if="show" type="button" class="btn btn-secondary ml-1">
+      Test Connectivity
+    </button>
+  </span>
+</template>
+
+<script>
+
+export default {
+  props: {
+    dataSourceId: String
+  },
+  computed: {
+    show() {
+      return this.dataSourceId != "new";
+    }
+  }
+};
+</script>