aboutsummaryrefslogtreecommitdiffstats
path: root/dashboard/src/components/assignment/Category.vue
blob: 0f2f921b49b9fbcea7203e0fb34d492cecb4e47b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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>