diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-04 12:09:00 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-04 12:09:00 +0000 |
commit | 88a0824944720b6edaaef56376713541b9a02118 (patch) | |
tree | f5fcc4f9755f249779cda9a8f02902d734af6e7e /app/assets/javascripts/registry/settings/components/settings_form.vue | |
parent | 7d19df2d34a9803d9f077c16315ba919b7ae2aa2 (diff) | |
download | gitlab-ce-88a0824944720b6edaaef56376713541b9a02118.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/registry/settings/components/settings_form.vue')
-rw-r--r-- | app/assets/javascripts/registry/settings/components/settings_form.vue | 61 |
1 files changed, 51 insertions, 10 deletions
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue index ad2fdb4fd40..cab3c7fff85 100644 --- a/app/assets/javascripts/registry/settings/components/settings_form.vue +++ b/app/assets/javascripts/registry/settings/components/settings_form.vue @@ -1,16 +1,20 @@ <script> import { mapActions, mapState, mapGetters } from 'vuex'; +import { GlCard, GlButton, GlLoadingIcon } from '@gitlab/ui'; import Tracking from '~/tracking'; import { UPDATE_SETTINGS_ERROR_MESSAGE, UPDATE_SETTINGS_SUCCESS_MESSAGE, } from '../../shared/constants'; import { mapComputed } from '~/vuex_shared/bindings'; -import ExpirationPolicyForm from '../../shared/components/expiration_policy_form.vue'; +import ExpirationPolicyFields from '../../shared/components/expiration_policy_fields.vue'; export default { components: { - ExpirationPolicyForm, + GlCard, + GlButton, + GlLoadingIcon, + ExpirationPolicyFields, }, mixins: [Tracking.mixin()], labelsConfig: { @@ -22,12 +26,19 @@ export default { tracking: { label: 'docker_container_retention_and_expiration_policies', }, + formIsValid: true, }; }, computed: { ...mapState(['formOptions', 'isLoading']), ...mapGetters({ isEdited: 'getIsEdited' }), ...mapComputed([{ key: 'settings', getter: 'getSettings' }], 'updateSettings'), + isSubmitButtonDisabled() { + return !this.formIsValid || this.isLoading; + }, + isCancelButtonDisabled() { + return !this.isEdited || this.isLoading; + }, }, methods: { ...mapActions(['resetSettings', 'saveSettings']), @@ -46,12 +57,42 @@ export default { </script> <template> - <expiration-policy-form - v-model="settings" - :form-options="formOptions" - :is-loading="isLoading" - :disable-cancel-button="!isEdited" - @submit="submit" - @reset="reset" - /> + <form ref="form-element" @submit.prevent="submit" @reset.prevent="reset"> + <gl-card> + <template #header> + {{ s__('ContainerRegistry|Tag expiration policy') }} + </template> + <template #default> + <expiration-policy-fields + v-model="settings" + :form-options="formOptions" + :is-loading="isLoading" + @validated="formIsValid = true" + @invalidated="formIsValid = false" + /> + </template> + <template #footer> + <div class="d-flex justify-content-end"> + <gl-button + ref="cancel-button" + type="reset" + class="mr-2 d-block" + :disabled="isCancelButtonDisabled" + > + {{ __('Cancel') }} + </gl-button> + <gl-button + ref="save-button" + type="submit" + :disabled="isSubmitButtonDisabled" + variant="success" + class="d-flex justify-content-center align-items-center js-no-auto-disable" + > + {{ __('Save expiration policy') }} + <gl-loading-icon v-if="isLoading" class="ml-2" /> + </gl-button> + </div> + </template> + </gl-card> + </form> </template> |