1<template>
2  <b-modal id="modal-role-group" ref="modal" @ok="onOk" @hidden="resetForm">
3    <template #modal-title>
4      <template v-if="roleGroup">
5        {{ $t('pageLdap.modal.editRoleGroup') }}
6      </template>
7      <template v-else>
8        {{ $t('pageLdap.modal.addNewRoleGroup') }}
9      </template>
10    </template>
11    <b-container>
12      <b-row>
13        <b-col sm="8">
14          <b-form id="role-group" @submit.prevent="handleSubmit">
15            <!-- Edit role group -->
16            <template v-if="roleGroup !== null">
17              <dl class="mb-4">
18                <dt>{{ $t('pageLdap.modal.groupName') }}</dt>
19                <dd>{{ form.groupName }}</dd>
20              </dl>
21            </template>
22
23            <!-- Add new role group -->
24            <template v-else>
25              <b-form-group
26                :label="$t('pageLdap.modal.groupName')"
27                label-for="role-group-name"
28              >
29                <b-form-input
30                  id="role-group-name"
31                  v-model="form.groupName"
32                  :state="getValidationState($v.form.groupName)"
33                  @input="$v.form.groupName.$touch()"
34                />
35                <b-form-invalid-feedback role="alert">
36                  {{ $t('global.form.fieldRequired') }}
37                </b-form-invalid-feedback>
38              </b-form-group>
39            </template>
40
41            <b-form-group
42              :label="$t('pageLdap.modal.groupPrivilege')"
43              label-for="privilege"
44            >
45              <b-form-select
46                id="privilege"
47                v-model="form.groupPrivilege"
48                :options="accountRoles"
49                :state="getValidationState($v.form.groupPrivilege)"
50                @input="$v.form.groupPrivilege.$touch()"
51              >
52                <template v-if="!roleGroup" #first>
53                  <b-form-select-option :value="null" disabled>
54                    {{ $t('global.form.selectAnOption') }}
55                  </b-form-select-option>
56                </template>
57              </b-form-select>
58              <b-form-invalid-feedback role="alert">
59                {{ $t('global.form.fieldRequired') }}
60              </b-form-invalid-feedback>
61            </b-form-group>
62          </b-form>
63        </b-col>
64      </b-row>
65    </b-container>
66    <template #modal-footer="{ cancel }">
67      <b-button variant="secondary" @click="cancel()">
68        {{ $t('global.action.cancel') }}
69      </b-button>
70      <b-button form="role-group" type="submit" variant="primary" @click="onOk">
71        <template v-if="roleGroup">
72          {{ $t('global.action.save') }}
73        </template>
74        <template v-else>
75          {{ $t('global.action.add') }}
76        </template>
77      </b-button>
78    </template>
79  </b-modal>
80</template>
81
82<script>
83import { required, requiredIf } from 'vuelidate/lib/validators';
84import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
85
86export default {
87  mixins: [VuelidateMixin],
88  props: {
89    roleGroup: {
90      type: Object,
91      default: null,
92      validator: (prop) => {
93        if (prop === null) return true;
94        return (
95          Object.prototype.hasOwnProperty.call(prop, 'groupName') &&
96          Object.prototype.hasOwnProperty.call(prop, 'groupPrivilege')
97        );
98      },
99    },
100  },
101  data() {
102    return {
103      form: {
104        groupName: null,
105        groupPrivilege: null,
106      },
107    };
108  },
109  computed: {
110    accountRoles() {
111      return this.$store.getters['userManagement/accountRoles'];
112    },
113  },
114  watch: {
115    roleGroup: function (value) {
116      if (value === null) return;
117      this.form.groupName = value.groupName;
118      this.form.groupPrivilege = value.groupPrivilege;
119    },
120  },
121  validations() {
122    return {
123      form: {
124        groupName: {
125          required: requiredIf(function () {
126            return !this.roleGroup;
127          }),
128        },
129        groupPrivilege: {
130          required,
131        },
132      },
133    };
134  },
135  methods: {
136    handleSubmit() {
137      this.$v.$touch();
138      if (this.$v.$invalid) return;
139      this.$emit('ok', {
140        addNew: !this.roleGroup,
141        groupName: this.form.groupName,
142        groupPrivilege: this.form.groupPrivilege,
143      });
144      this.closeModal();
145    },
146    closeModal() {
147      this.$nextTick(() => {
148        this.$refs.modal.hide();
149      });
150    },
151    resetForm() {
152      this.form.groupName = null;
153      this.form.groupPrivilege = null;
154      this.$v.$reset();
155      this.$emit('hidden');
156    },
157    onOk(bvModalEvt) {
158      // prevent modal close
159      bvModalEvt.preventDefault();
160      this.handleSubmit();
161    },
162  },
163};
164</script>
165