pkp/pkp-lib#7505 Support Versioning for SubmissionFiles

pkp · Nov 24, 2023 · de17696 · de17696
1 parent 2c24286
commit de17696
Showing 1 changed file with 82 additions and 63 deletions.
diff --git a/src/components/ListPanel/jats/SubmissionJatsListPanel.vue b/src/components/ListPanel/jats/SubmissionJatsListPanel.vue
@@ -1,68 +1,80 @@
 <template>
 	<div class="jatsPanel">
 		<slot>
-			<div class="filePanel__header">
-				<pkp-header>
-					<h2>{{ title }}</h2>
-					<template #actions>
-						<div v-if="existingJatsFile">
-							<pkp-button
-								:disabled="isLoading"
-								:isWarnable="true"
-								@click="openDeleteModal"
-							>
-								{{ t('common.delete') }}
+			<div v-if="hasLoadedContent" class="filePanel__ready">
+				<div class="filePanel__header">
+					<pkp-header>
+						<h2>{{ title }}</h2>
+						<template #actions>
+							<div v-if="existingJatsFile">
+								<pkp-button
+									v-if="
+										publication.status !== getConstant('STATUS_PUBLISHED') &&
+										canEditPublication
+									"
+									:disabled="isLoading"
+									:isWarnable="true"
+									@click="openDeleteModal"
+								>
+									{{ t('common.delete') }}
+								</pkp-button>
+							</div>
+							<div v-else>
+								<pkp-button 
+									v-if="
+										publication.status !== getConstant('STATUS_PUBLISHED') &&
+										canEditPublication
+									"
+									ref="uploadXMLButton" @click="openFileBrowser">
+									{{ t('common.upload') }}
+								</pkp-button>
+							</div>
+							<pkp-button ref="downloadJatsXMLButton" @click="downloadJatsXML">
+								{{ t('common.download') }}
 							</pkp-button>
-						</div>
-						<div v-else>
-							<pkp-button ref="uploadXMLButton" @click="openFileBrowser">
-								{{ t('common.upload') }}
-							</pkp-button>
-
-							<file-uploader
-								ref="uploader"
-								:apiUrl="publicationApiUrl"
-								:filenameLocale="primaryLocale"
-								:id="id + '-uploader'"
-								:files="newJatsFiles"
-								:options="options"
-								:queryParams="{fileStage}"
-								:uploadProgressLabel="uploadProgressLabel"
-								@updated:files="setJatsFile"
-							/>
-
-						</div>
-						<pkp-button ref="downloadJatsXMLButton" @click="downloadJatsXML">
-							{{ t('common.download') }}
-						</pkp-button>
-					</template>
-				</pkp-header>
-			</div>
-			<div class="filePanel__items">
-				<div class="filePanel__fileContent">
-					<pre>
-						<code>
-							{{ workingJatsContent }}
-						</code>
-
-					</pre>
+						</template>
+					</pkp-header>
 				</div>
-				<div>
-					<div v-if="existingJatsFile" class="filePanel__hasData">
-						<div class="filePanel__fileContentFooter">
-							<span>Last Modification at </span>
-							<span>{{ existingJatsFile.updatedAt }}</span>
-							<span> by </span>
-							<span> {{ existingJatsFile.uploaderUserName }}</span>
-						</div>
+				<div class="filePanel__items">
+					<div class="filePanel__fileContent">
+						<pre>
+							<code>
+								{{ workingJatsContent }}
+							</code>
+
+						</pre>
 					</div>
-					<div v-else>
-						<div class="filePanel__defaultContentFooter">
-							<span>{{ t('publication.jats.autoCreatedMessage') }}</span>
+					<div>
+						<div v-if="existingJatsFile" class="filePanel__hasData">
+							<div class="filePanel__fileContentFooter">
+								<span>Last Modification at </span>
+								<span>{{ existingJatsFile.updatedAt }}</span>
+								<span> by </span>
+								<span> {{ existingJatsFile.uploaderUserName }}</span>
+							</div>
+						</div>
+						<div v-else>
+							<div class="filePanel__defaultContentFooter">
+								<span>{{ t('publication.jats.autoCreatedMessage') }}</span>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
+			<div v-else class="filePanel__loading">
+				<span class="pkpSpinner" aria-hidden="true"></span>
+			</div>
+			<file-uploader
+				ref="uploader"
+				:apiUrl="publicationApiUrl"
+				:filenameLocale="primaryLocale"
+				:id="id + '-uploader'"
+				:files="newJatsFiles"
+				:options="options"
+				:queryParams="{fileStage}"
+				:uploadProgressLabel="uploadProgressLabel"
+				@updated:files="setJatsFile"
+			/>
 		</slot>
 	</div>
 </template>
@@ -142,6 +154,7 @@ export default {
 			isLoading: false,
 			isModalOpenedForm: false,
 			workingJatsProps: [],
+			hasLoadedContent: false,
 		};
 	},
 	created() {
@@ -181,7 +194,7 @@ export default {
 	},
 	methods: {
 		fetchWorkingJatsFile() {
-			this.isLoading = true;
+			this.hasLoadedContent = false;
 
 			$.ajax({
 				url: this.publicationApiUrl,
@@ -195,7 +208,7 @@ export default {
 					this.workingJatsProps = r;
 				},
 				complete(r) {
-					this.isLoading = false;
+					this.hasLoadedContent = true;
 				},
 			});
 		},
@@ -231,6 +244,7 @@ export default {
 						isWarnable: true,
 						callback: (close) => {
 							this.isLoading = true;
+							this.hasLoadedContent = false;
 
 							$.ajax({
 								url: this.publicationApiUrl,
@@ -249,6 +263,7 @@ export default {
 								},
 								complete(r) {
 									this.isLoading = false;
+									this.hasLoadedContent = true;
 								},
 							});
 						},
@@ -312,11 +327,21 @@ export default {
 	},
 	watch: {
 		newJatsFiles(newValue, oldValue) {
+			if (oldValue != null && oldValue[0] == null) {
+				this.hasLoadedContent = false;
+			} 
+
 			if (newValue != null && newValue[0] != null) {
 				if (newValue[0].hasOwnProperty('existingJatsFile')) {
 					this.workingJatsProps = newValue[0];
+					this.hasLoadedContent = true;
 				}
 			}
+		},
+		publication(newValue, oldValue) {
+			if (newValue != null) {
+				this.fetchWorkingJatsFile();
+			}
 		}
 	}
 };
@@ -325,12 +350,6 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
-.jatsPanel {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: 16px;
-}
-
 .jatsPanel {
 	.filePanel__header {
 		grid-column: span 12;