Migrate item edition form buttons to a separate component.

src/views/admin/components/edition/item-edition-form.vue

@@ -162,45 +162,6 @@
 
                         <div class="columns">
 
-                            <!-- Visibility (status public or private) -------------------------------- -->
-                            <div
-                                    v-if="!$adminOptions.hideItemEditionStatusOptions"
-                                    style="flex-wrap: wrap"
-                                    class="column is-narrow">
-                                <div class="section-label">
-                                    <label>{{ $i18n.get('label_status') }}</label>
-                                    <span class="required-metadatum-asterisk">*</span>
-                                    <help-button
-                                            :title="$i18n.getHelperTitle('items', 'status')"
-                                            :message="$i18n.getHelperMessage('items', 'status')"/>
-                                </div>
-                                <div class="section-status">
-                                    <div
-                                            style="display: flex; font-size: 1rem;"
-                                            class="field has-addons">
-                                        <b-radio
-                                                v-if="!$adminOptions.hideItemEditionStatusPublishOption"
-                                                v-model="visibility"
-                                                value="publish"
-                                                native-value="publish">
-                                            <span class="icon">
-                                                <i class="tainacan-icon tainacan-icon-public"/>
-                                            </span>
-                                            {{ $i18n.get('status_public') }}
-                                        </b-radio>
-                                        <b-radio
-                                                v-model="visibility"
-                                                value="private"
-                                                native-value="private">
-                                            <span class="icon">
-                                                <i class="tainacan-icon tainacan-icon-private"/>
-                                            </span>
-                                            {{ $i18n.get('status_private') }}
-                                        </b-radio>
-                                    </div>
-                                </div>
-                            </div>
-
                             <!-- Comment Status ------------------------ -->
                             <div
                                     class="column is-narrow"
@@ -679,201 +640,24 @@
                 </p>
             </div>
 
-            <div
+            <item-form-footer-buttons
-                    class="form-submission-footer"
+                    :status="form.status"
-                    v-if="isEditingItemMetadataInsideIframe">
+                    :collection-id="form.collectionId"
-                <button
+                    :is-on-sequence-edit="isOnSequenceEdit"
-                        @click="onSubmit()"
+                    :group="group"
-                        type="button"
+                    :item-position="itemPosition"
-                        class="button is-secondary">
+                    :is-mobile-screen="isMobileScreen"
-                    {{ $i18n.get('label_back_to_related_item') }}
+                    :has-some-error="formErrorMessage != undefined && formErrorMessage != ''"
-                </button>
+                    :current-user-can-delete="item && item.current_user_can_delete"
-            </div>
+                    :current-user-can-publish="collection && collection.current_user_can_publish_items"
-            <div
+                    :is-editing-item-metadata-inside-iframe="isEditingItemMetadataInsideIframe"
-                    class="form-submission-footer"
+                    :visibility="visibility"
-                    v-if="form.status == 'trash' && !isEditingItemMetadataInsideIframe">
+                    @onSubmit="onSubmit"
-                <button 
+                    @onDiscard="onDiscard"
-                        v-if="item && item.current_user_can_delete"
+                    @onDeletePermanently="onDeletePermanently"
-                        @click="onDeletePermanently()"
+                    @onPrevInSequence="onPrevInSequence"
-                        type="button"
+                    @onNextInSequence="onNextInSequence" />
-                        class="button is-outlined">{{ $i18n.get('label_delete_permanently') }}</button>
+
-                <button
-                        @click="onSubmit('draft')"
-                        type="button"
-                        class="button is-secondary">
-                    <span v-if="!isMobileScreen">{{ $i18n.get('label_save_as_draft') }}</span>
-                    <span v-else>{{ $i18n.get('status_draft') }}</span>
-                </button>
-                <button 
-                        v-if="collection && collection.current_user_can_publish_items"
-                        @click="onSubmit(visibility)"
-                        type="button"
-                        class="button is-success">{{ $i18n.get('label_verb_publish') }}</button>
-            </div>
-            <div
-                    class="form-submission-footer"
-                    v-if="(form.status == 'auto-draft' || form.status == 'draft' || form.status == undefined) && !isEditingItemMetadataInsideIframe">
-                <button
-                        v-if="isOnSequenceEdit && itemPosition > 1"
-                        @click="onPrevInSequence()"
-                        type="button"
-                        class="button sequence-button">
-                    <span class="icon is-large">
-                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-previous"/>
-                    </span>
-                    <span>{{ $i18n.get('previous') }}</span>
-                </button>
-                <button 
-                        v-if="form.status == 'draft' && !isOnSequenceEdit && item && item.current_user_can_delete"
-                        @click="onSubmit('trash')"
-                        type="button"
-                        class="button is-outlined">
-                    <span v-if="!isMobileScreen">{{ $i18n.get('label_send_to_trash') }}</span>
-                    <span v-else>{{ $i18n.get('status_trash') }}</span>
-                </button>
-                <button
-                        v-if="form.status == 'auto-draft'"
-                        @click="onDiscard()"
-                        type="button"
-                        class="button is-outlined">{{ $i18n.get('label_discard') }}</button>
-                <button
-                        v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
-                        @click="onSubmit('draft')"
-                        type="button"
-                        class="button is-secondary">{{ form.status == 'draft' ? $i18n.get('label_update') : $i18n.get('label_save_as_draft') }}</button>
-                <button
-                        v-else
-                        @click="onSubmit('draft'); onNextInSequence();"
-                        type="button"
-                        class="button is-secondary">
-                    <span v-if="!isMobileScreen">{{ $i18n.get('label_update_draft') }}</span>
-                    <span v-else>{{ $i18n.get('status_draft') }}</span>
-                    <span class="icon is-large">
-                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
-                    </span>
-                </button>
-                <template v-if="collection && collection.current_user_can_publish_items">
-                    <button 
-                            v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
-                            @click="onSubmit(visibility)"
-                            type="button"
-                            class="button is-success">{{ !$adminOptions.hideItemEditionStatusPublishOption ? $i18n.get('label_verb_publish') : $i18n.get('label_verb_publish_privately') }}</button>
-                    <button 
-                            v-else
-                            @click="onSubmit(visibility, 'next')"
-                            type="button"
-                            class="button is-success">
-                        <span>{{ !$adminOptions.hideItemEditionStatusPublishOption ? $i18n.get('label_verb_publish') : $i18n.get('label_verb_publish_privately') }}</span>
-                        <span class="icon is-large">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
-                        </span>
-                    </button>
-                </template>
-                <template v-else>
-                    <button 
-                            v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count < itemPosition)"
-                            @click="onNextInSequence()"
-                            type="button"
-                            class="button is-success">
-                        <span>{{ $i18n.get('label_next') }}</span>
-                        <span class="icon is-large">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
-                        </span>
-                    </button>
-                </template>
-                <button 
-                        v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count == itemPosition)"
-                        @click="$router.push($routerHelper.getCollectionPath(form.collectionId))"
-                        type="button"
-                        class="button sequence-button">
-                    <span class="icon is-large">
-                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approved"/>
-                    </span>
-                    <span>{{ $i18n.get('finish') }}</span>
-                </button>
-            </div>
-            <div
-                    class="form-submission-footer"
-                    v-if="(form.status == 'publish' || form.status == 'private') && !isEditingItemMetadataInsideIframe">
-                <button
-                        v-if="isOnSequenceEdit && itemPosition > 1"
-                        @click="onPrevInSequence()"
-                        type="button"
-                        class="button sequence-button">
-                    <span class="icon is-large">
-                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-previous"/>
-                    </span>
-                    <span>{{ $i18n.get('previous') }}</span>
-                </button>
-                <button 
-                        v-if="!isOnSequenceEdit && item && item.current_user_can_delete"
-                        @click="onSubmit('trash')"
-                        type="button"
-                        class="button is-outlined">
-                    <span v-if="!isMobileScreen">{{ $i18n.get('label_send_to_trash') }}</span>
-                    <span v-else>{{ $i18n.get('status_trash') }}</span>
-                </button>
-                <button
-                        v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
-                        @click="onSubmit('draft')"
-                        type="button"
-                        class="button is-secondary">
-                    <span v-if="!isMobileScreen">{{ isOnSequenceEdit ? $i18n.get('label_save_as_draft') : $i18n.get('label_return_to_draft') }}</span>
-                    <span v-else>{{ $i18n.get('status_draft') }}</span>
-                </button>
-                <button
-                        v-else
-                        @click="onSubmit('draft', 'next')"
-                        type="button"
-                        class="button is-secondary">
-                    <span>{{ $i18n.get('label_save_as_draft') }}</span>
-                    <span class="icon is-large">
-                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
-                    </span>
-                </button>
-                <template v-if="collection && collection.current_user_can_publish_items">
-                    <button 
-                            v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
-                            :disabled="formErrorMessage != undefined && formErrorMessage != ''"
-                            @click="onSubmit(visibility)"
-                            type="button"
-                            class="button is-success">{{ $i18n.get('label_update') }}</button>
-                    <button 
-                            v-else
-                            :disabled="formErrorMessage != undefined && formErrorMessage != ''"
-                            @click="onSubmit(visibility, 'next')"
-                            type="button"
-                            class="button is-success">
-                        <span>{{ $i18n.get('label_update') }}</span>
-                        <span class="icon is-large">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
-                        </span>
-                    </button>
-                </template>
-                <template v-else>
-                    <button 
-                            v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count < itemPosition)"
-                            :disabled="formErrorMessage != undefined && formErrorMessage != ''"
-                            @click="onNextInSequence()"
-                            type="button"
-                            class="button is-success">
-                        <span>{{ $i18n.get('label_next') }}</span>
-                        <span class="icon is-large">
-                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
-                        </span>
-                    </button>
-                </template>
-                <button 
-                        v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count == itemPosition)"
-                        @click="$router.push($routerHelper.getCollectionPath(form.collectionId))"
-                        type="button"
-                        class="button sequence-button">
-                    <span class="icon is-large">
-                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approved"/>
-                    </span>
-                    <span>{{ $i18n.get('finish') }}</span>
-                </button>
-            </div>
         </footer>
     </div>
 </template>
@@ -893,6 +677,7 @@ import ItemDocumentURLModal from '../modals/item-document-url-modal.vue';
 import ItemDocumentEditionForm from '../edition/item-document-edition-form.vue';
 import ItemThumbnailEditionForm from '../edition/item-thumbnail-edition-form.vue';
 import ItemAttachmentsEditionForm from '../edition/item-attachments-edition-form.vue';
+import ItemFormFooterButtons from './item-form-footer-buttons.vue';
 
 import 'swiper/css';
 import 'swiper/css/mousewheel';
@@ -906,7 +691,8 @@ export default {
         ItemMetadatumErrorsTooltip,
         ItemThumbnailEditionForm,
         ItemDocumentEditionForm,
-        ItemAttachmentsEditionForm
+        ItemAttachmentsEditionForm,
+        ItemFormFooterButtons
     },
     mixins: [ formHooks ],
     beforeRouteLeave ( to, from, next ) {

src/views/admin/components/edition/item-form-footer-buttons.vue

@@ -0,0 +1,218 @@
+<template>
+    <div class="form-submission-footer">
+
+        <!-- Item edition inside iframe -->
+        <template v-if="isEditingItemMetadataInsideIframe">
+            <button
+                    @click="$emit('onSubmit')"
+                    type="button"
+                    class="button is-secondary">
+                {{ $i18n.get('label_back_to_related_item') }}
+            </button>
+        </template>
+
+        <!-- Item is on trash -->
+        <template v-if="status == 'trash' && !isEditingItemMetadataInsideIframe">
+            <button 
+                    v-if="currentUserCanDelete"
+                    @click="$emit('onDeletePermanently')"
+                    type="button"
+                    class="button is-outlined">{{ $i18n.get('label_delete_permanently') }}</button>
+            <button
+                    @click="$emit('onSubmit', 'draft')"
+                    type="button"
+                    class="button is-secondary">
+                <span v-if="!isMobileScreen">{{ $i18n.get('label_save_as_draft') }}</span>
+                <span v-else>{{ $i18n.get('status_draft') }}</span>
+            </button>
+            <button 
+                    v-if="currentUserCanPublish"
+                    @click="$emit('onSubmit', visibility)"
+                    type="button"
+                    class="button is-success">{{ $i18n.get('label_verb_publish') }}</button>
+        </template>
+
+        <!-- Item is an autodraft or draft -->
+        <template v-if="(status == 'auto-draft' || status == 'draft' || status == undefined) && !isEditingItemMetadataInsideIframe">
+            <button
+                    v-if="isOnSequenceEdit && itemPosition > 1"
+                    @click="$emit('onPrevInSequence')"
+                    type="button"
+                    class="button sequence-button">
+                <span class="icon is-large">
+                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-previous"/>
+                </span>
+                <span>{{ $i18n.get('previous') }}</span>
+            </button>
+            <button 
+                    v-if="status == 'draft' && !isOnSequenceEdit && currentUserCanDelete"
+                    @click="$emit('onSubmit', 'trash')"
+                    type="button"
+                    class="button is-outlined">
+                <span v-if="!isMobileScreen">{{ $i18n.get('label_send_to_trash') }}</span>
+                <span v-else>{{ $i18n.get('status_trash') }}</span>
+            </button>
+            <button
+                    v-if="status == 'auto-draft'"
+                    @click="$emit('onDiscard')"
+                    type="button"
+                    class="button is-outlined">{{ $i18n.get('label_discard') }}</button>
+            <button
+                    v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                    @click="$emit('onSubmit', 'draft')"
+                    type="button"
+                    class="button is-secondary">{{ status == 'draft' ? $i18n.get('label_update') : $i18n.get('label_save_as_draft') }}</button>
+            <button
+                    v-else
+                    @click="$emit('onSubmit', 'draft'); $emit('onNextInSequence');"
+                    type="button"
+                    class="button is-secondary">
+                <span v-if="!isMobileScreen">{{ $i18n.get('label_update_draft') }}</span>
+                <span v-else>{{ $i18n.get('status_draft') }}</span>
+                <span class="icon is-large">
+                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
+                </span>
+            </button>
+            <template v-if="currentUserCanPublish">
+                <button 
+                        v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                        @click="$emit('onSubmit', visibility)"
+                        type="button"
+                        class="button is-success">{{ !$adminOptions.hideItemEditionStatusPublishOption ? $i18n.get('label_verb_publish') : $i18n.get('label_verb_publish_privately') }}</button>
+                <button 
+                        v-else
+                        @click="$emit('onSubmit', visibility, 'next')"
+                        type="button"
+                        class="button is-success">
+                    <span>{{ !$adminOptions.hideItemEditionStatusPublishOption ? $i18n.get('label_verb_publish') : $i18n.get('label_verb_publish_privately') }}</span>
+                    <span class="icon is-large">
+                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
+                    </span>
+                </button>
+            </template>
+            <template v-else>
+                <button 
+                        v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count < itemPosition)"
+                        @click="$emit('onNextInSequence')"
+                        type="button"
+                        class="button is-success">
+                    <span>{{ $i18n.get('label_next') }}</span>
+                    <span class="icon is-large">
+                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
+                    </span>
+                </button>
+            </template>
+            <button 
+                    v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                    @click="$router.push($routerHelper.getCollectionPath(collectionId))"
+                    type="button"
+                    class="button sequence-button">
+                <span class="icon is-large">
+                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approved"/>
+                </span>
+                <span>{{ $i18n.get('finish') }}</span>
+            </button>
+        </template>
+
+        <!-- Item is published as public or private -->
+        <template v-if="(status == 'publish' || status == 'private') && !isEditingItemMetadataInsideIframe">
+            <button
+                    v-if="isOnSequenceEdit && itemPosition > 1"
+                    @click="$emit('onPrevInSequence')"
+                    type="button"
+                    class="button sequence-button">
+                <span class="icon is-large">
+                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-previous"/>
+                </span>
+                <span>{{ $i18n.get('previous') }}</span>
+            </button>
+            <button 
+                    v-if="!isOnSequenceEdit && currentUserCanDelete"
+                    @click="$emit('onSubmit', 'trash')"
+                    type="button"
+                    class="button is-outlined">
+                <span v-if="!isMobileScreen">{{ $i18n.get('label_send_to_trash') }}</span>
+                <span v-else>{{ $i18n.get('status_trash') }}</span>
+            </button>
+            <button
+                    v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                    @click="$emit('onSubmit', 'draft')"
+                    type="button"
+                    class="button is-secondary">
+                <span v-if="!isMobileScreen">{{ isOnSequenceEdit ? $i18n.get('label_save_as_draft') : $i18n.get('label_return_to_draft') }}</span>
+                <span v-else>{{ $i18n.get('status_draft') }}</span>
+            </button>
+            <button
+                    v-else
+                    @click="$emit('onSubmit', 'draft', 'next')"
+                    type="button"
+                    class="button is-secondary">
+                <span>{{ $i18n.get('label_save_as_draft') }}</span>
+                <span class="icon is-large">
+                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
+                </span>
+            </button>
+            <template v-if="currentUserCanPublish">
+                <button 
+                        v-if="!isOnSequenceEdit || (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                        :disabled="hasSomeError"
+                        @click="$emit('onSubmit', visibility)"
+                        type="button"
+                        class="button is-success">{{ $i18n.get('label_update') }}</button>
+                <button 
+                        v-else
+                        :disabled="hasSomeError"
+                        @click="$emit('onSubmit', visibility, 'next')"
+                        type="button"
+                        class="button is-success">
+                    <span>{{ $i18n.get('label_update') }}</span>
+                    <span class="icon is-large">
+                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
+                    </span>
+                </button>
+            </template>
+            <template v-else>
+                <button 
+                        v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count < itemPosition)"
+                        :disabled="hasSomeError"
+                        @click="$emit('onNextInSequence')"
+                        type="button"
+                        class="button is-success">
+                    <span>{{ $i18n.get('label_next') }}</span>
+                    <span class="icon is-large">
+                        <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-next"/>
+                    </span>
+                </button>
+            </template>
+            <button 
+                    v-if="isOnSequenceEdit && (group != null && group.items_count != undefined && group.items_count == itemPosition)"
+                    @click="$router.push($routerHelper.getCollectionPath(collectionId))"
+                    type="button"
+                    class="button sequence-button">
+                <span class="icon is-large">
+                    <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-approved"/>
+                </span>
+                <span>{{ $i18n.get('finish') }}</span>
+            </button>
+        </template>
+
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        status: String,
+        collectionId: Number,
+        isOnSequenceEdit: Boolean,
+        group: Object,
+        itemPosition: Number,
+        isMobileScreen: Boolean,
+        hasSomeError: Boolean,
+        currentUserCanDelete: Boolean,
+        currentUserCanPublish: Boolean,
+        isEditingItemMetadataInsideIframe: Boolean,
+        visibility: String
+    }
+}
+</script>