xref: /openbmc/webui-vue/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00) 
1<template>
2  <b-modal
3    id="modal-role-group"
4    ref="modal"
5    :title="modalTitle"
6    @ok="onOk"
7    @hidden="resetForm"
8  >
9    <b-container>
10      <b-row>
11        <b-col sm="8">
12          <b-form id="role-group" @submit.prevent="handleSubmit">
13            <!-- Edit role group -->
14            <template v-if="roleGroup !== null">
15              <dl class="mb-4">
16                <dt>{{ i18n.t('pageLdap.modal.groupName') }}</dt>
17                <dd style="word-break: break-all">{{ form.groupName }}</dd>
18              </dl>
19            </template>
20
21            <!-- Add new role group -->
22            <template v-else>
23              <b-form-group
24                :label="i18n.t('pageLdap.modal.groupName')"
25                label-for="role-group-name"
26              >
27                <b-form-input
28                  id="role-group-name"
29                  v-model="form.groupName"
30                  :state="getValidationState(v$.form.groupName)"
31                  @input="v$.form.groupName.$touch()"
32                />
33                <b-form-invalid-feedback role="alert">
34                  {{ i18n.t('global.form.fieldRequired') }}
35                </b-form-invalid-feedback>
36              </b-form-group>
37            </template>
38
39            <b-form-group
40              :label="i18n.t('pageLdap.modal.groupPrivilege')"
41              label-for="privilege"
42            >
43              <b-form-select
44                id="privilege"
45                v-model="form.groupPrivilege"
46                :options="accountRoles"
47                :state="getValidationState(v$.form.groupPrivilege)"
48                @input="v$.form.groupPrivilege.$touch()"
49              >
50                <template v-if="!roleGroup" #first>
51                  <b-form-select-option :value="null" disabled>
52                    {{ i18n.t('global.form.selectAnOption') }}
53                  </b-form-select-option>
54                </template>
55              </b-form-select>
56              <b-form-invalid-feedback role="alert">
57                {{ i18n.t('global.form.fieldRequired') }}
58              </b-form-invalid-feedback>
59            </b-form-group>
60          </b-form>
61        </b-col>
62      </b-row>
63    </b-container>
64    <template #footer="{ cancel }">
65      <b-button variant="secondary" @click="cancel()">
66        {{ i18n.t('global.action.cancel') }}
67      </b-button>
68      <b-button form="role-group" type="submit" variant="primary" @click="onOk">
69        <template v-if="roleGroup">
70          {{ i18n.t('global.action.save') }}
71        </template>
72        <template v-else>
73          {{ i18n.t('global.action.add') }}
74        </template>
75      </b-button>
76    </template>
77  </b-modal>
78</template>
79
80<script>
81import { required, requiredIf } from '@vuelidate/validators';
82import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
83import { useVuelidate } from '@vuelidate/core';
84import { useI18n } from 'vue-i18n';
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  emits: ['ok', 'hidden'],
102  setup() {
103    const i18n = useI18n();
104    return {
105      v$: useVuelidate(),
106      i18n,
107    };
108  },
109  data() {
110    return {
111      form: {
112        groupName: null,
113        groupPrivilege: null,
114      },
115    };
116  },
117  computed: {
118    modalTitle() {
119      return this.roleGroup
120        ? this.i18n.t('pageLdap.modal.editRoleGroup')
121        : this.i18n.t('pageLdap.modal.addNewRoleGroup');
122    },
123    accountRoles() {
124      return this.$store.getters['userManagement/accountRoles'];
125    },
126  },
127  watch: {
128    roleGroup: function (value) {
129      if (value === null) return;
130      this.form.groupName = value.groupName;
131      this.form.groupPrivilege = value.groupPrivilege;
132    },
133  },
134  validations() {
135    return {
136      form: {
137        groupName: {
138          required: requiredIf(function () {
139            return !this.roleGroup;
140          }),
141        },
142        groupPrivilege: {
143          required,
144        },
145      },
146    };
147  },
148  methods: {
149    handleSubmit() {
150      this.v$.$touch();
151      if (this.v$.$invalid) return;
152      this.$emit('ok', {
153        addNew: !this.roleGroup,
154        groupName: this.form.groupName,
155        groupPrivilege: this.form.groupPrivilege,
156      });
157      this.closeModal();
158    },
159    closeModal() {
160      this.$nextTick(() => {
161        this.$refs.modal.hide();
162      });
163    },
164    resetForm() {
165      this.form.groupName = null;
166      this.form.groupPrivilege = null;
167      this.v$.$reset();
168      this.$emit('hidden');
169    },
170    onOk(bvModalEvt) {
171      // prevent modal close
172      bvModalEvt.preventDefault();
173      this.handleSubmit();
174    },
175  },
176};
177</script>
178