tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Advancements on bulk add initial form.

This commit is contained in:
Mateus Machado Luna 2018-10-25 17:18:26 -03:00
parent 6bbce33ed8
commit 78b7638193
2 changed files with 100 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/admin/components/edition/item-bulk-edition-form.vue
View File

@ -14,7 +14,6 @@
<hr> <hr>
</div> </div>
<form <form
@submit.prevent="createBulkEditGroup()"
v-if="!isLoading" v-if="!isLoading"
class="tainacan-form" class="tainacan-form"
label-width="120px"> label-width="120px">
@ -44,7 +43,26 @@
</b-field> </b-field>
<div class="document-list"> <div class="document-list">
<!-- Sequence Progress --> <!-- Sequence Progress -->
<div class="sequence-progress-info">
<p v-if="uploadedItems.length > 0 && uploadedItems.length != amountFinished">
<span class="icon is-small">
<i class="mdi mdi-18px mdi-autorenew"/>
</span>
{{ $i18n.get('label_upload_file_prepare_items') }}
</p>
<p
v-if="uploadedItems.length > 0 && (uploadedItems.length - amountFinished) > 1"
class="has-text-gray">
{{ (uploadedItems.length - amountFinished) + " " + $i18n.get('label_files_remaining') }}
</p>
<p
v-if="uploadedItems.length > 0 && (uploadedItems.length - amountFinished) == 1"
class="has-text-gray">
{{ "1 " + $i18n.get('label_file_remaining') }}
</p>
</div>
<div <div
v-if="uploadedItems.length > 0" v-if="uploadedItems.length > 0"
:style="{ width: (amountFinished/uploadedItems.length)*100 + '%' }" :style="{ width: (amountFinished/uploadedItems.length)*100 + '%' }"
@ -52,7 +70,8 @@
<div <div
v-if="uploadedItems.length > 0" v-if="uploadedItems.length > 0"
class="sequence-progress-background"/> class="sequence-progress-background"/>
<!-- Uploaded Items -->
<transition-group name="item-appear"> <transition-group name="item-appear">
<div <div
class="document-item" class="document-item"
@ -79,7 +98,7 @@
</span> </span>
<span <span
v-tooltip="{ v-tooltip="{
content: $i18n.get('label_remove'), content: $i18n.get('delete'),
autoHide: false, autoHide: false,
placement: 'auto-start' placement: 'auto-start'
}" }"
@ -92,21 +111,33 @@
</div> </div>
</transition-group> </transition-group>
</div> </div>
<div class="field is-grouped form-submit"> <footer class="footer">
<div class="control"> <div class="form-submission-footer field is-grouped form-submit">
<button <div class="control">
type="button" <button
class="button is-outlined" type="button"
@click.prevent="$router.go(-1)" class="button is-outlined"
slot="trigger">{{ $i18n.get('cancel') }}</button> @click.prevent="$router.go(-1)"
slot="trigger">{{ $i18n.get('cancel') }}</button>
</div>
<div
style="margin-left: auto"
class="control">
<button
:disabled="uploadedItems.length <= 0"
class="button is-turquoise5"
@click.prevent="sequenceEditGroup()"
type="submit">{{ $i18n.get('label_sequence_edit_items') }}</button>
</div>
<div class="control">
<button
:disabled="uploadedItems.length <= 0"
class="button is-turquoise5"
@click.prevent="createBulkEditGroup()"
type="submit">{{ $i18n.get('label_bulk_edit_items') }}</button>
</div>
</div> </div>
<div class="control"> </footer>
<button
:disabled="uploadedItems.length <= 0 "
class="button is-success"
type="submit">{{ $i18n.get('save') }}</button>
</div>
</div>
</form> </form>
</div> </div>
</template> </template>
@ -203,9 +234,19 @@ export default {
} }
}, },
sequenceEditGroup() {
let onlyItemIds = this.uploadedItems.map(item => item.id);
console.log(onlyItemIds)
this.createEditGroup({
object: onlyItemIds,
collectionID: this.collectionId
}).then((group) => {
let sequenceId = group.id;
this.$router.push(this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, sequenceId, 1));
});
},
createBulkEditGroup() { createBulkEditGroup() {
let onlyItemIds = this.uploadedItems.map(item => item.id); let onlyItemIds = this.uploadedItems.map(item => item.id);
this.createEditGroup({ this.createEditGroup({
object: onlyItemIds, object: onlyItemIds,
collectionID: this.collectionId collectionID: this.collectionId
@ -298,6 +339,7 @@ export default {
.document-list { .document-list {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
padding: 1rem $page-side-padding;
.document-item { .document-item {
display: flex; display: flex;
@ -305,7 +347,7 @@ export default {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 0.75rem; padding: 0.5rem 0.75rem;
cursor: default; cursor: default;
.document-thumb { .document-thumb {
@ -317,7 +359,6 @@ export default {
.document-actions { .document-actions {
margin-left: auto; margin-left: auto;
.loading-icon .control.is-loading::after { .loading-icon .control.is-loading::after {
position: relative !important; position: relative !important;
right: 0; right: 0;
@ -329,22 +370,55 @@ export default {
margin-left: auto; margin-left: auto;
} }
} }
.sequence-progress-info {
display: flex;
justify-content: space-between;
.i::before {
font-size: 18px;
}
}
.sequence-progress { .sequence-progress {
height: 5px; height: 5px;
background: $turquoise5; background: $turquoise5;
width: 0%; width: 0%;
transition: width 0.2s; transition: width 0.2s;
margin-bottom: 1rem;
} }
.sequence-progress-background { .sequence-progress-background {
height: 5px; height: 5px;
background: $gray3; background: $gray3;
width: 100%; width: 100%;
top: -5px; top: -21px;
z-index: -1; z-index: -1;
position: relative; position: relative;
margin-bottom: 1rem;
} }
} }
.footer {
padding: 18px $page-side-padding;
position: absolute;
bottom: 0;
z-index: 999999;
background-color: $gray1;
width: 100%;
height: 65px;
display: flex;
justify-content: flex-end;
align-items: center;
left: 0;
.form-submission-footer {
.button {
margin-left: 16px;
margin-right: 6px;
}
// .is-outlined {
// border: none;
// }
}
}
} }
</style> </style>

5
src/admin/tainacan-admin-i18n.php
View File

@ -315,6 +315,11 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_selected_terms' => __( 'Selected terms', 'tainacan'), 'label_selected_terms' => __( 'Selected terms', 'tainacan'),
'label_editing_item_number' => __( 'Editing item n.', 'tainacan'), 'label_editing_item_number' => __( 'Editing item n.', 'tainacan'),
'label_sequence_editing_item' => __( 'Sequence editing: Item', 'tainacan'), 'label_sequence_editing_item' => __( 'Sequence editing: Item', 'tainacan'),
'label_files_remaining' => __( 'files remaining.', 'tainacan'),
'label_file_remaining' => __( 'file remaining.', 'tainacan'),
'label_upload_file_prepare_items' => __( 'Uploading files and preparing items', 'tainacan'),
'label_bulk_edit_items' => __( 'Bulk edit items', 'tainacan'),
'label_sequence_edit_items' => __( 'Sequence edit items', 'tainacan'),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),