51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script>
|
|
import { GlAlert } from '@gitlab/ui';
|
|
import { mapActions, mapState } from 'vuex';
|
|
import { s__ } from '~/locale';
|
|
import UserListForm from './user_list_form.vue';
|
|
|
|
export default {
|
|
components: {
|
|
GlAlert,
|
|
UserListForm,
|
|
},
|
|
inject: ['userListsDocsPath', 'featureFlagsPath'],
|
|
translations: {
|
|
pageTitle: s__('UserLists|New list'),
|
|
createButtonLabel: s__('UserLists|Create'),
|
|
},
|
|
computed: {
|
|
...mapState(['userList', 'errorMessage']),
|
|
isError() {
|
|
return Array.isArray(this.errorMessage) && this.errorMessage.length > 0;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(['createUserList', 'dismissErrorAlert']),
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<gl-alert v-if="isError" variant="danger" @dismiss="dismissErrorAlert">
|
|
<ul class="gl-mb-0">
|
|
<li v-for="(message, index) in errorMessage" :key="index">
|
|
{{ message }}
|
|
</li>
|
|
</ul>
|
|
</gl-alert>
|
|
|
|
<h3 class="gl-font-weight-bold gl-pb-5 gl-border-b-solid gl-border-gray-100 gl-border-1">
|
|
{{ $options.translations.pageTitle }}
|
|
</h3>
|
|
|
|
<user-list-form
|
|
:cancel-path="featureFlagsPath"
|
|
:save-button-label="$options.translations.createButtonLabel"
|
|
:user-lists-docs-path="userListsDocsPath"
|
|
:user-list="userList"
|
|
@submit="createUserList"
|
|
/>
|
|
</div>
|
|
</template>
|