From c9d17f59cbc6d6ed0a0d236fe2e5ade5ffa57199 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Thu, 2 Aug 2018 15:45:48 -0300 Subject: [PATCH 1/2] Adds loading state to Run button in importers. Adds highliting to recently sent process from importers. Removes search query from URL when text string is empty. --- .../edition/importer-edition-form.vue | 18 +++++++---- .../edition/importer-mapping-form.vue | 30 +++++++++++-------- src/admin/components/lists/processes-list.vue | 28 +++++++++++++++-- src/admin/js/utilities.js | 7 +++-- src/admin/theme-items-list.vue | 28 ++--------------- src/js/store/modules/search/mutations.js | 6 +++- 6 files changed, 68 insertions(+), 49 deletions(-) diff --git a/src/admin/components/edition/importer-edition-form.vue b/src/admin/components/edition/importer-edition-form.vue index 370880b80..84f32d905 100644 --- a/src/admin/components/edition/importer-edition-form.vue +++ b/src/admin/components/edition/importer-edition-form.vue @@ -127,6 +127,7 @@ (importer.accepts.file && importer.accepts.url && !importerFile && !url)" id="button-submit-collection-creation" @click.prevent="onFinishImporter()" + :class="{'is-loading': isLoadingRun }" class="button is-success">{{ $i18n.get('run') }}
{{ $i18n.get('label_metadata_mapping') }} + class="button is-success">{{ $i18n.get('next') }}
@@ -162,6 +163,7 @@ export default { importerId: Number, importer: null, isLoading: false, + isLoadingRun: false, isFetchingCollections: false, form: { @@ -310,19 +312,23 @@ export default { }); }, onFinishImporter() { - + this.isLoadingRun = true; this.onUpdateOptions().then(() => { this.uploadSource() .then(() => { - if (this.importer.manual_mapping) + if (this.importer.manual_mapping) { this.goToMappingPage(); - else + this.isLoadingRun = false; + } else { this.onRunImporter(); + } }).catch((errors) => { + this.isLoadingRun = false; this.$console.log(errors); }); }) .catch((errors) => { + this.isLoadingRun = false; this.$console.log(errors); }); @@ -331,9 +337,11 @@ export default { this.runImporter(this.sessionId) .then(backgroundProcess => { this.backgroundProcess = backgroundProcess; - this.$router.push(this.$routerHelper.getProcessesPage()); + this.isLoadingRun = false; + this.$router.push(this.$routerHelper.getProcessesPage(backgroundProcess.bg_process_id)); }) .catch((errors) => { + this.isLoadingRun = false; this.$console.log(errors); }); }, diff --git a/src/admin/components/edition/importer-mapping-form.vue b/src/admin/components/edition/importer-mapping-form.vue index 548f47ddc..5051fc415 100644 --- a/src/admin/components/edition/importer-mapping-form.vue +++ b/src/admin/components/edition/importer-mapping-form.vue @@ -152,6 +152,7 @@ :disabled="sessionId == undefined || importer == undefined" id="button-submit-collection-creation" @click.prevent="onRunImporter" + :class="{'is-loading': isLoadingRun }" class="button is-success">{{ $i18n.get('run') }} @@ -174,6 +175,7 @@ export default { importerId: Number, importer: null, isLoading: false, + isLoadingRun: false, mappedCollection: { 'id': Number, 'mapping': {}, @@ -284,12 +286,14 @@ export default { return undefined; }, onRunImporter() { + this.isLoadingRun = true; this.updateImporterCollection({ sessionId: this.sessionId, collection: this.mappedCollection }) .then(updatedImporter => { this.importer = updatedImporter; this.finishRunImporter(); }) .catch((errors) => { + this.isLoadingRun = false; this.$console.log(errors); }); @@ -298,27 +302,27 @@ export default { this.runImporter(this.sessionId) .then(backgroundProcess => { this.backgroundProcess = backgroundProcess; + this.isLoadingRun = false; this.$router.push(this.$routerHelper.getProcessesPage()); }) .catch((errors) => { + this.isLoadingRun = false; this.$console.log(errors); }); }, onSelectCollectionMetadata(selectedMetadatum, sourceMetadatum) { - - if (selectedMetadatum) - this.mappedCollection['mapping'][selectedMetadatum] = sourceMetadatum; - else { - let removedKey = ''; - for (let key in this.mappedCollection['mapping']) { - if(this.mappedCollection['mapping'][key] == sourceMetadatum) - removedKey = key; - } - - if (removedKey != '') - delete this.mappedCollection['mapping'][removedKey]; + + let removedKey = ''; + for (let key in this.mappedCollection['mapping']) { + if(this.mappedCollection['mapping'][key] == sourceMetadatum) + removedKey = key; } - + + if (removedKey != '') + delete this.mappedCollection['mapping'][removedKey]; + + this.mappedCollection['mapping'][selectedMetadatum] = sourceMetadatum; + // Necessary for causing reactivity to re-check if metadata remains available this.collectionMetadata.push(""); this.collectionMetadata.pop(); diff --git a/src/admin/components/lists/processes-list.vue b/src/admin/components/lists/processes-list.vue index a1c42a7d3..dd570022b 100644 --- a/src/admin/components/lists/processes-list.vue +++ b/src/admin/components/lists/processes-list.vue @@ -67,7 +67,7 @@ @@ -181,7 +181,8 @@ return { selected: [], allOnPageSelected: false, - isSelecting: false + isSelecting: false, + highlightedProcess: '' } }, props: { @@ -303,6 +304,11 @@ }, pauseProcess() { } + }, + mounted() { + if (this.$route.query.highlight) { + this.highlightedProcess = this.$route.query.highlight; + } } } @@ -332,6 +338,24 @@ top: 0; } + @keyframes highlight { + from { + background-color: $blue1; + } + to { + background-color: $white; + } + } + + .highlighted-process { + td, .checkbox-cell .checkbox, .actions-cell .actions-container { + transition: background-color 0.5s; + animation-name: highlight; + animation-duration: 1s; + animation-iteration-count: 2; + } + } + diff --git a/src/admin/js/utilities.js b/src/admin/js/utilities.js index 92f67f970..9ee16793b 100644 --- a/src/admin/js/utilities.js +++ b/src/admin/js/utilities.js @@ -205,8 +205,11 @@ RouterHelperPlugin.install = function (Vue, options = {}) { getAvailableImportersPath() { return '/importers/new'; }, - getProcessesPage() { - return '/events?tab=processes'; + getProcessesPage(highlightedProcess) { + if (highlightedProcess) + return '/events?tab=processes&highlight=' + highlightedProcess; + else + return '/events?tab=processes'; }, // Singles getCollectionPath(id) { diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue index 3acd56f16..6c0988717 100644 --- a/src/admin/theme-items-list.vue +++ b/src/admin/theme-items-list.vue @@ -40,6 +40,7 @@ export default { @import "../admin/scss/_checkboxes.scss"; @import "../admin/scss/_pagination.scss"; @import "../admin/scss/_tags.scss"; + // @import "../admin/scss/_tabs.scss"; @import "../admin/scss/_selects.scss"; @import "../admin/scss/_dropdown-and-autocomplete.scss"; @import "../admin/scss/_tooltips.scss"; @@ -104,31 +105,6 @@ export default { } } - // Tabs - .tabs { - a { - font-size: 13px; - margin-bottom: -3px; - &:hover{ - border-bottom-color: transparent; - } - } - li.is-active a { - border-bottom: 5px solid $turquoise3; - color: $turquoise3; - } - } - - .select select{ - border-radius: 1; - padding: 4px 16px; - color: #1d1d1d; - font-size: 1.0em; - font-weight: normal; - cursor: pointer; - background-color: white; - } - .filters-menu { // height: auto; position: absolute !important; @@ -175,7 +151,7 @@ export default { #items-list-area { width: 100%; - overflow-y: unset; + overflow-y: hidden; margin-left: 0; &.spaced-to-right { margin-left: $filter-menu-width-theme; diff --git a/src/js/store/modules/search/mutations.js b/src/js/store/modules/search/mutations.js index b5dee9a14..c46b1121a 100644 --- a/src/js/store/modules/search/mutations.js +++ b/src/js/store/modules/search/mutations.js @@ -120,7 +120,11 @@ export const setTotalItems = ( state, total ) => { }; export const setSearchQuery = ( state, searchQuery ) => { - state.postquery.search = searchQuery; + + if (searchQuery != '') + state.postquery.search = searchQuery; + else + state.postquery.search = undefined; }; export const setStatus = ( state, status ) => { From 8e4a2527601d881856f8f6e5e039e75080460bf8 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Thu, 2 Aug 2018 16:21:05 -0300 Subject: [PATCH 2/2] Hides pause an cancel buttons for bg process temporally. Little css adjustments. --- src/admin/components/lists/collections-list.vue | 4 ---- src/admin/components/lists/processes-list.vue | 4 ++-- src/admin/components/other/processes-popup.vue | 4 ++-- src/admin/pages/lists/items-page.vue | 5 ----- src/admin/pages/singles/item-page.vue | 2 +- src/admin/theme-items-list.vue | 4 ++++ 6 files changed, 9 insertions(+), 14 deletions(-) diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue index 1575ad21d..6ffc83bee 100644 --- a/src/admin/components/lists/collections-list.vue +++ b/src/admin/components/lists/collections-list.vue @@ -396,10 +396,6 @@ export default { } } - img.table-thumb { - border-radius: 50px !important; - } - .total-items-header { text-align: right; } diff --git a/src/admin/components/lists/processes-list.vue b/src/admin/components/lists/processes-list.vue index dd570022b..15fd0af6e 100644 --- a/src/admin/components/lists/processes-list.vue +++ b/src/admin/components/lists/processes-list.vue @@ -140,7 +140,7 @@ class="icon has-text-success loading-icon">
- @@ -151,7 +151,7 @@ class="icon has-text-gray action-icon" @click="pauseProcess(index)"> - + --> @@ -56,7 +56,7 @@ class="icon has-text-gray action-icon" @click="pauseProcess(index)"> - + --> diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue index 335a6ce19..ab6b8a2fd 100644 --- a/src/admin/pages/lists/items-page.vue +++ b/src/admin/pages/lists/items-page.vue @@ -1266,11 +1266,6 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - - - @media screen and (min-width: 768px) { - margin-bottom: $page-small-top-padding; - } } .search-control-item { diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue index 1af42a38f..c778077be 100644 --- a/src/admin/pages/singles/item-page.vue +++ b/src/admin/pages/singles/item-page.vue @@ -455,7 +455,7 @@ position: absolute; bottom: 0; z-index: 999999; - background-color: $turquoise1; + background-color: $gray1; width: 100%; height: 65px; diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue index 6c0988717..9537754a4 100644 --- a/src/admin/theme-items-list.vue +++ b/src/admin/theme-items-list.vue @@ -129,6 +129,10 @@ export default { .search-control { + @media screen and (min-width: 768px) { + margin-bottom: $page-small-top-padding; + } + .gray-icon, .gray-icon .icon { color: $gray4 !important; i::before {