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