Skip to content

Commit cc93607

Browse files
solthsolth
authored
Refactor mass import page to use base list view instead of base edit view (#6983)
* Refactor mass import page to use base list view instead of base edit view * Implement change requests * Fix mass import button never being activated and refine mass import page layout * Add Selenium tests for adding and removing CSV rows during mass import * Add Selenium test for edting cell contents during mass import * Add missing 'form' element and some more 'partialSubmit's * Add 'enctype' of records form to 'multipart/form-data' * Deactivate cell editing after CSV upload * Activate import button after CSV file upload in mass import form * Temporarily disable test to edit mass import cell contents after CSV upload
1 parent e1fdd90 commit cc93607

File tree

7 files changed

+381
-242
lines changed

7 files changed

+381
-242
lines changed

‎Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css‎

Lines changed: 90 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -788,6 +788,7 @@ body .content-header > .ui-panel-content {
788788

789789
.content-header .ui-panel-content > form,
790790
.content-header .ui-panel-content > button,
791+
#massImportButtonForm > button,
791792
.ui-menubutton,
792793
.ui-selectbooleanbutton {
793794
white-space: nowrap;
@@ -1921,134 +1922,177 @@ body .functional-metadata-wrapper .help-button .ui-button-text {
19211922
float: unset;
19221923
}
19231924

1924-
#fileUploadForm .ui-fileupload .ui-fileupload-content,
1925-
#fileUploadForm .ui-fileupload .ui-fileupload-content .ui-fileupload-files {
1925+
#fileUploadForm\:uploadWrapper {
1926+
margin: 0;
1927+
}
1928+
1929+
#fileUploadForm\:uploadWrapper_content {
1930+
padding: 0;
1931+
}
1932+
1933+
#fileUploadForm .ui-fileupload .ui-fileupload-content {
19261934
border: none;
19271935
}
19281936

1937+
#fileUploadForm .ui-fileupload .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row {
1938+
border: 0 1px solid var(--focused-blue);
1939+
}
1940+
1941+
#fileUploadForm .ui-fileupload .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row:first-child {
1942+
border-top: 1px solid var(--focused-blue);
1943+
border-top-radius: var(--default-border-radius);
1944+
}
1945+
1946+
#fileUploadForm .ui-fileupload .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row:last-child {
1947+
border-bottom: 1px solid var(--focused-blue);
1948+
border-bottom-radius: var(--default-border-radius);
1949+
}
1950+
19291951

19301952
/*----------------------------------------------------------------------
19311953
Mass import
19321954
----------------------------------------------------------------------*/
19331955

1934-
#editForm\:fileUploadButtonWrapper {
1956+
#massImportTab,
1957+
#recordsForm\:recordsTableWrapper {
1958+
height: 100%;
1959+
}
1960+
1961+
#massImportTab #fileUploadForm {
1962+
height: 160px;
1963+
overflow-y: auto;
1964+
}
1965+
1966+
#massImportTab #recordsForm {
1967+
height: calc(100% - 160px);
1968+
overflow-y: hidden;
1969+
}
1970+
1971+
#massImportTab #recordsForm\:recordsTable {
1972+
height: calc(100% - 80px);
1973+
}
1974+
1975+
#massImportTab .ui-datatable-scrollable-body {
1976+
height: calc(100% - 50px);
1977+
}
1978+
1979+
#fileUploadForm\:fileUploadButtonWrapper {
19351980
padding: 0;
19361981
}
19371982

1938-
#editForm\:recordsTable th span.metadata-record-id::after,
1939-
#editForm\:recordsTable th span.metadata-doctype::after {
1983+
#recordsForm\:recordsTable th span.metadata-record-id::after,
1984+
#recordsForm\:recordsTable th span.metadata-doctype::after {
19401985
color: var(--medium-gray);
19411986
font-family: FontAwesome;
19421987
margin-left: var(--default-half-size);
19431988
}
19441989

1945-
#editForm\:recordsTable th span.metadata-record-id::after {
1990+
#recordsForm\:recordsTable th span.metadata-record-id::after {
19461991
content: "\f2c2";
19471992
}
19481993

1949-
#editForm\:recordsTable th span.metadata-doctype::after {
1994+
#recordsForm\:recordsTable th span.metadata-doctype::after {
19501995
content: "\f02d";
19511996
}
19521997

1953-
#editForm\:recordsTable .ui-datatable-scrollable-theadclone {
1998+
#recordsForm\:recordsTable .ui-datatable-scrollable-theadclone {
19541999
display: none;
19552000
}
19562001

1957-
#editForm\:recordsTable_scrollableThead > tr > th:last-child span {
2002+
#recordsForm\:recordsTable_scrollableThead > tr > th:last-child span {
19582003
float: right;
19592004
}
19602005

1961-
#editForm\:recordsTable th.ui-state-default,
1962-
#editForm\:recordsTable td.ui-editable-column,
1963-
#editForm\:recordsTable td.remove-column,
1964-
#editForm\:recordsTable tr.ui-datatable-empty-message {
2006+
#recordsForm\:recordsTable th.ui-state-default,
2007+
#recordsForm\:recordsTable td.ui-editable-column,
2008+
#recordsForm\:recordsTable td.remove-column,
2009+
#recordsForm\:recordsTable tr.ui-datatable-empty-message {
19652010
border: 1px solid var(--carbon-blue);
19662011
}
19672012

1968-
#editForm\:addCsvRecord,
1969-
#editForm\:catalogSelectionWrapper {
2013+
#recordsForm\:addCsvRecord,
2014+
#fileUploadForm\:catalogSelectionWrapper {
19702015
margin-top: var(--default-half-size);
19712016
}
19722017

1973-
#editForm\:recordsTable th:has(> span.ui-column-title > span.invalid-configuration) {
2018+
#recordsForm\:recordsTable th:has(> span.ui-column-title > span.invalid-configuration) {
19742019
background-color: var(--orange);
19752020
}
19762021

1977-
#editForm\:recordsTable th:has(> span.ui-column-title > span.unknown-metadata) {
2022+
#recordsForm\:recordsTable th:has(> span.ui-column-title > span.unknown-metadata) {
19782023
background-color: var(--light-orange);
19792024
}
19802025

1981-
#editForm\:recordsTable td.ui-editable-column {
2026+
#recordsForm\:recordsTable td.ui-editable-column {
19822027
overflow-x: hidden;
19832028
text-overflow: ellipsis;
19842029
white-space: nowrap;
19852030
}
19862031

1987-
#editForm .ui-panelgrid-cell {
2032+
#fileUploadForm .ui-panelgrid-cell {
19882033
padding-left: var(--default-full-size);
19892034
}
19902035

1991-
#editForm .ui-fileupload-buttonbar {
2036+
#fileUploadForm .ui-fileupload-buttonbar {
19922037
padding: 0;
19932038
}
19942039

1995-
#editForm .ui-fileupload-buttonbar .ui-button {
2040+
#fileUploadForm .ui-fileupload-buttonbar .ui-button {
19962041
margin-right: var(--default-full-size);
19972042
}
19982043

1999-
#editForm\:fileUploadButtonWrapper .ui-fileupload-files:not(:has(div.ui-fileupload-row)) {
2044+
#fileUploadForm\:fileUploadButtonWrapper .ui-fileupload-files:not(:has(div.ui-fileupload-row)) {
20002045
border: none;
20012046
}
20022047

2003-
#editForm\:recordsTableWrapper {
2048+
#recordsForm\:recordsTableWrapper {
20042049
padding: 0 var(--default-full-size);
20052050
}
20062051

2007-
#editForm\:recordsTable tr {
2052+
#recordsForm\:recordsTable tr {
20082053
height: var(--input-height);
20092054
overflow-y: hidden;
20102055
}
20112056

2012-
#editForm\:recordsTable .remove-column {
2057+
#recordsForm\:recordsTable .remove-column {
20132058
width: 50px;
20142059
}
20152060

2016-
#editForm\:recordsTable .remove-column button.secondary,
2017-
#editForm\:recordsTable .remove-metadata-column {
2061+
#recordsForm\:recordsTable .remove-column button.secondary,
2062+
#recordsForm\:recordsTable .remove-metadata-column {
20182063
border: none;
20192064
}
20202065

2021-
#editForm\:addCsvRecord,
2022-
#editForm\:recordsTable .remove-column button.secondary {
2066+
#recordsForm\:addCsvRecord,
2067+
#recordsForm\:recordsTable .remove-column button.secondary {
20232068
float: right;
20242069
}
20252070

2026-
#editForm\:recordsTable input.ui-inputtext {
2071+
#recordsForm\:recordsTable input.ui-inputtext {
20272072
width: 100%;
20282073
}
20292074

2030-
#editForm\:csvSeparator {
2075+
#fileUploadForm\:csvSeparator {
20312076
display: block;
20322077
width: 60px;
20332078
}
20342079

2035-
#editForm\:separatorCharacterWrapper .separator-selection {
2080+
#fileUploadForm\:separatorCharacterWrapper .separator-selection {
20362081
display: inline-block;
20372082
margin-right: var(--default-double-size);
2038-
width: 45%;
20392083
}
20402084

2041-
#editForm\:skipEmptyColumnsWrapper {
2085+
#fileUploadForm\:skipEmptyColumnsWrapper {
20422086
display: inline-block;
20432087
vertical-align: top;
20442088
}
20452089

2046-
#editForm\:csvFileUpload {
2090+
#fileUploadForm\:csvFileUpload {
20472091
overflow-x: hidden;
20482092
white-space: nowrap;
20492093
}
20502094

2051-
#editForm\:csvFileUpload .ui-fileupload-buttonbar {
2095+
#fileUploadForm\:csvFileUpload .ui-fileupload-buttonbar {
20522096
background: transparent;
20532097
border: none;
20542098
}
@@ -2062,26 +2106,26 @@ Mass import
20622106
padding: 0;
20632107
}
20642108

2065-
#editForm\:recordsTable\:addMetadataColumn,
2066-
#editForm\:recordsTable button.remove-metadata-column {
2109+
#recordsForm\:recordsTable\:addMetadataColumn,
2110+
#recordsForm\:recordsTable button.remove-metadata-column {
20672111
background: transparent;
20682112
overflow: hidden;
20692113
height: inherit;
20702114
}
20712115

2072-
#editForm\:recordsTable span.ui-column-title {
2116+
#recordsForm\:recordsTable span.ui-column-title {
20732117
white-space: nowrap;
20742118
}
20752119

2076-
#editForm\:recordsTable span.ui-column-title span {
2120+
#recordsForm\:recordsTable span.ui-column-title span {
20772121
display: inline-block;
20782122
overflow: hidden;
20792123
text-overflow: ellipsis;
20802124
vertical-align: middle;
20812125
width: calc(100% - 20px);
20822126
}
20832127

2084-
#editForm\:recordsTable_data tr td {
2128+
#recordsForm\:recordsTable_data tr td {
20852129
box-sizing: content-box;
20862130
}
20872131

@@ -2093,10 +2137,14 @@ Mass import
20932137
padding-right: var(--default-half-size);
20942138
}
20952139

2096-
#fileUploadForm, #searchEditForm {
2140+
#searchEditForm {
20972141
padding: 0 var(--default-double-size);
20982142
}
20992143

2144+
#fileUploadForm\:csvParserOptions_content {
2145+
padding: 0;
2146+
}
2147+
21002148
#catalogSearchForm div.ui-panelgrid-cell {
21012149
padding-right: var(--default-half-size);
21022150
}

‎Kitodo/src/main/webapp/WEB-INF/templates/includes/massImport/dialogs/addMetadata.xhtml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
styleClass="dialogButtonWrapper">
125125
<p:commandButton id="apply"
126126
action="#{MassImportForm.addMetadataDialog.addMetadata()}"
127-
update="editForm:recordsTableWrapper"
127+
update="recordsForm:recordsTableWrapper"
128128
oncomplete="PF('addMetadataDialog').hide();"
129129
value="#{msgs.apply}"
130130
styleClass="primary right"/>

‎Kitodo/src/main/webapp/WEB-INF/templates/includes/massImport/dialogs/massImportResults.xhtml‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,16 @@
8585
<div class="select-selector">
8686
<p:panelGrid>
8787
<p:row>
88-
<p:button id="goToProcesses"
89-
value="#{msgs['processes']}"
90-
styleClass="primary right"
91-
outcome="/pages/processes?tabId=processTab&amp;faces-redirect=true"/>
92-
<p:commandButton id="close"
93-
value="#{msgs.close}"
94-
styleClass="secondary right"
95-
onclick="PF('massImportResultDialog').hide();"/>
88+
<h:form id="massImportResultDialogButtonForm">
89+
<p:button id="goToProcesses"
90+
value="#{msgs['processes']}"
91+
styleClass="primary right"
92+
outcome="/pages/processes?tabId=processTab&amp;faces-redirect=true"/>
93+
<p:commandButton id="close"
94+
value="#{msgs.close}"
95+
styleClass="secondary right"
96+
onclick="PF('massImportResultDialog').hide();"/>
97+
</h:form>
9698
</p:row>
9799
</p:panelGrid>
98100
</div>

0 commit comments

Comments
 (0)