1 files changed, 64 insertions, 0 deletions
diff --git a/dashboard/src/components/pdp/AddPolicy.vue b/dashboard/src/components/pdp/AddPolicy.vue
new file mode 100644
index 00000000..82ad07e2
--- /dev/null
+++ b/dashboard/src/components/pdp/AddPolicy.vue
@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <hr>
+      <h4>Select policy:</h4>
+      <form data-vv-scope="select">
+        <div class="form-group">
+          <select v-model="selectedPolicyId" v-validate.initial="'required'">
+            <option disabled value>Please select one</option>
+            <option
+              v-for="policy in policies"
+              :value="policy.id"
+              :key="policy.id"
+            >{{policy.name}}</option>
+          </select>
+        </div>
+        <button type="button" class="btn btn-secondary" @click="close()">Cancel</button>
+        <span>&nbsp;</span>
+        <button
+          type="button"
+          :disabled="errors.any('select')"
+          class="btn btn-primary"
+          @click="addPolicy()"
+        >Add</button>
+      </form>
+      <br>
+      <br>
+  </div>
+</template>
+
+<script>
+import PdpService from "./../../services/Pdp.service.js";
+import util from "./../../services/Util.service.js";
+
+export default {
+  name: "addPolicy",
+  data: function() {
+    return {
+      selectedPolicyId: null,
+    };
+  },
+  props: {
+    pdp: Object
+  },
+  methods: {
+    addPolicy() {
+      var policy = PdpService.getPolicy(this.selectedPolicyId);
+      var pdpCopy = util.clone(this.pdp);
+      pdpCopy.security_pipeline.push(policy);
+      PdpService.updatePdp(pdpCopy);
+      this.close();
+    },
+    close() {
+      this.$emit("close");
+    }
+  },
+  computed: {
+    policies() {
+      return PdpService.policies.filter(
+        el => !this.pdp.security_pipeline.includes(el)
+      );
+    }
+  }
+};
+</script>