3 files changed, 301 insertions, 0 deletions
diff --git a/dashboard/src/components/assignment/Category.vue b/dashboard/src/components/assignment/Category.vue
new file mode 100644
index 00000000..0f2f921b
--- /dev/null
+++ b/dashboard/src/components/assignment/Category.vue
@@ -0,0 +1,103 @@
+<template>
+    <details class="list-group" >
+        <summary @click="populatePolicy()">
+            <h4 class="inline-block width-200">
+                {{name}}
+                <i class="fa fa-question-circle" style="margin-left: 2%" v-if="categoryHelpStrings[name.toLowerCase()]" data-toggle="tooltip"  :title="categoryHelpStrings[name.toLowerCase()]"></i>
+            </h4>
+        </summary>
+        <div class="assignments-details">
+            <FormHeader
+                    :placeholder="placeholder"
+                    v-model="filter"
+                    needButton
+                    :buttonText="buttonText"
+                    @click="creatingData"
+            ></FormHeader>
+            <create-data
+                    class="m-3"
+                    @close="creatingDataOpen = false"
+                    :policy="policy"
+                    :type="name.toLowerCase()"
+                    :categoryId="categoryId"
+                    v-if="creatingDataOpen"
+            ></create-data>
+            <br/>
+            <details class="list-group"  v-for="item in filteredData" :key="item.id">
+                <summary @click="assignData(name.toLowerCase(), item)">
+                    <h4 class="inline-block width-200">{{item.name}}</h4>
+                </summary>
+                <AssignPerimeter :policy="policy" :dataToAssign="dataToAssign"></AssignPerimeter>
+            </details>
+        </div>
+    </details>
+</template>
+
+<script>
+    import AssignPerimeter from "../policy/AssignPerimeter";
+    import FormHeader from "../FormHeader";
+    import CreateData from "./CreateData";
+    import util from "../../services/Util.service";
+    import PolicyService from "../../services/Policy.service";
+    import helpstrings from "../../helpstrings";
+
+    export default {
+        props:{
+            policy: Object,
+            data: Array,
+            name: String
+        },
+        name: "Assignment",
+        components: {
+            AssignPerimeter,
+            FormHeader,
+            CreateData
+        },
+        data() {
+            return{
+                placeholder: "",
+                buttonText: "",
+                creatingDataOpen: false,
+                filter: "",
+                dataToAssign: {},
+                categoryId: "",
+                categoryHelpStrings: {}
+            }
+        },
+        created() {
+            this.categoryHelpStrings = helpstrings.metarule;
+            this.placeholder = "Filter by " + this.name;
+            this.buttonText = "Create " + this.name;
+            if (this.policy.model.meta_rules.length){
+                let category = this.name.toLowerCase()+ "_categories";
+                let metaRule = this.policy.model.meta_rules[0];
+                this.categoryId = metaRule[category][0].id;
+            }
+
+        },
+        methods: {
+            populatePolicy() {
+                PolicyService.populatePolicy(this.policy);
+            },
+            assignData(type, data) {
+                this.dataToAssign = {
+                    selectedData: data,
+                    selectedDataType: type,
+                };
+            },
+            creatingData(){
+                this.creatingDataOpen = true;
+
+            }
+        },
+        computed: {
+            filteredData() {
+                return util.filterAndSortByName(this.data, this.filter);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
+\ No newline at end of file
diff --git a/dashboard/src/components/assignment/CreateData.vue b/dashboard/src/components/assignment/CreateData.vue
new file mode 100644
index 00000000..63c69650
--- /dev/null
+++ b/dashboard/src/components/assignment/CreateData.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="list-group-item row">
+    <form>
+      <div class="form-group">
+        <label for="dataName">Name</label>
+        <input
+          type="text"
+          name="name"
+          v-model="dataCreate.name"
+          v-validate.initial="'alpha_dash|required|min:3'"
+          class="form-control"
+          id="dataName"
+        />
+      </div>
+      <div class="form-group">
+        <label for="dataDescription">Description</label>
+        <textarea
+          name="description"
+          v-model="dataCreate.description"
+          v-validate.initial="'required|min:3'"
+          class="form-control"
+        ></textarea>
+      </div>
+      <ul>
+        <li v-for="error in errors.all()" :key="error.id">{{ error }}</li>
+      </ul>
+      <button type="button" class="btn btn-secondary" @click="close()">Cancel</button>
+      <span>&nbsp;</span>
+      <button
+        type="button"
+        :disabled="errors.any()"
+        class="btn btn-primary"
+        @click="createData()"
+      >Create</button>
+    </form>
+  </div>
+</template>
+
+<script>
+import PolicyService from "./../../services/Policy.service.js";
+
+export default {
+  name: "createData",
+  props: {
+    policy: Object,
+    type: String,
+    categoryId: String,
+  },
+  data: function() {
+    return {
+      dataCreate: {
+        name: "",
+        description: ""
+      }
+    };
+  },
+  methods: {
+    createData() {
+      var self = this;
+      PolicyService.createData(
+        this.type,
+        this.policy,
+        this.categoryId,
+        this.dataCreate
+      ).then(function(datas) {
+        self.$emit("dataCreated", datas[0]);
+        self.close();
+      });
+    },
+    close() {
+      this.$emit("close");
+    }
+  }
+};
+</script>
diff --git a/dashboard/src/components/assignment/Policy.vue b/dashboard/src/components/assignment/Policy.vue
new file mode 100644
index 00000000..6fd4afb4
--- /dev/null
+++ b/dashboard/src/components/assignment/Policy.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <template v-if="edit">
+      <form>
+        <div class="form-group" >
+          <label for="policyName">Name</label>
+          <input
+            type="text"
+            name="name"
+            v-model="policyEdit.name"
+            v-validate="'alpha_dash|required|min:3'"
+            class="form-control"
+            id="policyName"
+          />
+        </div>
+        <div class="form-group">
+          <label for="policyDescription">Description</label>
+          <textarea
+            name="description"
+            v-model="policyEdit.description"
+            v-validate="'required|min:3'"
+            class="form-control"
+          ></textarea>
+        </div>
+        <div class="form-group">
+          <label for="policyGenre">Genre</label>
+          <select
+            v-model="policyEdit.genre"
+            class="form-control"
+            id="policyGenre"
+            v-validate.initial="'required'"
+            name="genre"
+          >
+            <option>admin</option>
+            <option>authz</option>
+          </select>
+        </div>
+        <ul>
+          <li v-for="error in errors.all()" :key="error.id">{{ error }}</li>
+        </ul>
+        <button type="button" class="btn btn-secondary" @click="edit = false">Cancel</button>
+        <span>&nbsp;</span>
+        <button
+          type="button"
+          :disabled="errors.any()"
+          class="btn btn-primary"
+          @click="updatePolicy()"
+        >Update</button>
+      </form>
+    </template>
+    <template v-else>
+      <h3 class="list-group-item-heading inline " data-toggle="tooltip" data-placement="top" title="Tooltip on top">{{ policy.name }}</h3>
+      <div class="pull-right">
+        <button
+          type="button"
+          class="fa fa-trash btn-dark btn-sm"
+          title="Remove Policy"
+          @click="removePolicy()"
+        ></button>
+        <button
+          type="button"
+          class="fa fa-edit btn-dark btn-sm"
+          title="Edit Policy"
+          @click="updatingPolicy()"
+        ></button>
+      </div>
+      <p class="list-group-item-text">{{ policy.description }}</p>
+
+        <Category :policy="policy" :data="policy.subjectData" name="Subject" ></Category>
+        <Category :policy="policy" :data="policy.objectData" name="Object" ></Category>
+        <Category :policy="policy" :data="policy.actionData" name="Action" ></Category>
+    </template>
+    <hr />
+  </div>
+</template>
+
+<script>
+import PolicyService from "./../../services/Policy.service.js";
+import util from "./../../services/Util.service.js";
+import Category from "./Category";
+
+export default {
+  props: {
+    policy: Object
+  },
+  data() {
+    return {
+      filter: "",
+      edit: false,
+      policyEdit: {},
+      assignments: []
+    };
+  },
+  computed: {
+
+  },
+  components: {
+    Category
+  },
+  methods: {
+
+    removePolicy() {
+      if (
+        confirm(
+          "Are you sure to delete this Policy? (Associated perimeter, data an PDP will be deleted too)"
+        )
+      )
+        PolicyService.removePolicy(this.policy);
+    },
+    updatingPolicy() {
+      this.policyEdit = util.clone(this.policy);
+      this.edit = true;
+    },
+    updatePolicy() {
+      this.edit = false;
+      PolicyService.updatePolicy(this.policyEdit);
+    },
+    showAssignments(data){
+      this.assignments = this.policy[data];
+    }
+  }
+};
+</script>
+\ No newline at end of file