xref: /openbmc/webui-vue/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue (revision ce7db82c9582c4dac04ac81d9af6b557ae7965e3)
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 style="word-break: break-all">{{ 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/validators';
84import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
85import { useVuelidate } from '@vuelidate/core';
86import { useI18n } from 'vue-i18n';
87
88export default {
89  mixins: [VuelidateMixin],
90  props: {
91    roleGroup: {
92      type: Object,
93      default: null,
94      validator: (prop) => {
95        if (prop === null) return true;
96        return (
97          Object.prototype.hasOwnProperty.call(prop, 'groupName') &&
98          Object.prototype.hasOwnProperty.call(prop, 'groupPrivilege')
99        );
100      },
101    },
102  },
103  setup() {
104    return {
105      v$: useVuelidate(),
106    };
107  },
108  data() {
109    return {
110      $t: useI18n().t,
111      form: {
112        groupName: null,
113        groupPrivilege: null,
114      },
115    };
116  },
117  computed: {
118    accountRoles() {
119      return this.$store.getters['userManagement/accountRoles'];
120    },
121  },
122  watch: {
123    roleGroup: function (value) {
124      if (value === null) return;
125      this.form.groupName = value.groupName;
126      this.form.groupPrivilege = value.groupPrivilege;
127    },
128  },
129  validations() {
130    return {
131      form: {
132        groupName: {
133          required: requiredIf(function () {
134            return !this.roleGroup;
135          }),
136        },
137        groupPrivilege: {
138          required,
139        },
140      },
141    };
142  },
143  methods: {
144    handleSubmit() {
145      this.v$.$touch();
146      if (this.v$.$invalid) return;
147      this.$emit('ok', {
148        addNew: !this.roleGroup,
149        groupName: this.form.groupName,
150        groupPrivilege: this.form.groupPrivilege,
151      });
152      this.closeModal();
153    },
154    closeModal() {
155      this.$nextTick(() => {
156        this.$refs.modal.hide();
157      });
158    },
159    resetForm() {
160      this.form.groupName = null;
161      this.form.groupPrivilege = null;
162      this.v$.$reset();
163      this.$emit('hidden');
164    },
165    onOk(bvModalEvt) {
166      // prevent modal close
167      bvModalEvt.preventDefault();
168      this.handleSubmit();
169    },
170  },
171};
172</script>
173