moved the psPerScreen to sharedState

src/backend/gs_index/src/App.vue

@@ -3,14 +3,16 @@
 	import RestAuth from "./components/RestAuth.vue"
 	import AnnotatorSelect from "./components/AnnotatorSelect.vue"
 	import LocalAnnotatorOptions from "./components/LocalAnnotatorOptions.vue"
+	import MiscOptions from "./components/MiscOptions.vue"
 	import CorpusesView from "./components/CorpusesView.vue"
 	import UploadView from "./components/UploadView.vue"
 	import AlertsView from "./components/AlertsView.vue"
 	import TasksView from "./components/TasksView.vue"
 
 	export default {
 		components: {
-			Header, RestAuth, AnnotatorSelect, LocalAnnotatorOptions,
+			Header, RestAuth, AnnotatorSelect,
+			LocalAnnotatorOptions, MiscOptions,
 			CorpusesView, UploadView, AlertsView,
 			TasksView,
 		},
@@ -34,6 +36,8 @@
 		<hr>
 		<LocalAnnotatorOptions />
 		<hr>
+		<MiscOptions />
+		<hr>
 		<CorpusesView />
 		<hr>
 		<UploadView />

src/backend/gs_index/src/components/Corpus.vue

@@ -28,8 +28,6 @@
 				api: new GsApi(),
 				sharedState,
 
-				psPerScreen: 8,
-
 				showPre: false,
 				mounted: false,
 			}
@@ -55,6 +53,9 @@
 					targets.includes(i)
 				);
 			},
+			psPerScreen() {
+				return (sharedState.psPerScreen > 0) ? sharedState.psPerScreen : this.corpus.paragraphs.length;
+			},
 
 			pseudoState() {
 				const psEmpty = !this.corpus.paragraphs || this.corpus.paragraphs.length <= 0;

src/backend/gs_index/src/components/LocalAnnotatorOptions.vue

@@ -1,6 +1,5 @@
 <script>
 	import { sharedState } from '../sharedState.js';
-	import { watch } from 'vue';
 
 	export default {
 		data() {
@@ -40,37 +39,7 @@
 				sharedState.maxGloss = this.maxGloss;
 				sharedState.fullPrompt = this.fullPrompt;
 			},
-			exportData() {
-				console.log("test");
-				const dataStr = JSON.stringify(sharedState, null, 2);
-				const blob = new Blob([dataStr], { type: 'application/json' });
-				const url = URL.createObjectURL(blob);
-				const a = document.createElement('a');
-				a.href = url;
-				a.download = 'sharedState.json';
-				a.click();
-				URL.revokeObjectURL(url);
-			},
-			async importData(event) {
-				const file = event.target.files[0];
-				const content = await file.text();
-				const importedState = JSON.parse(content);
-								
-				Object.keys(importedState).forEach(key => {
-					if (sharedState.hasOwnProperty(key))
-						sharedState[key] = importedState[key];
-				});
-			},
 		},
-		mounted() {
-			watch(
-				() => sharedState,
-				(newState) => {
-					localStorage.setItem("sharedState", JSON.stringify(newState));
-				},
-				{ deep: true }
-			);
-		}
 	}
 </script>
 
@@ -141,12 +110,6 @@
 			<div class="col-md-2 d-flex align-items-center">
 				<button class="btn btn-link mt-3"><a href="https://github.com/parkchamchi/GlossySnake/blob/master/docs/design/local.md">Info</a></button>
 			</div>
-			<div class="col-md-2 d-flex align-items-center">
-				<button class="btn btn-link mt-3" @click="exportData">Export</button>
-			</div>
-			<div class="col-md-2 d-flex align-items-center">
-				<input type="file" @change="importData" class="form-control">
-			</div>
 		</div>
 	</div>
 </template>

src/backend/gs_index/src/components/MiscOptions.vue

@@ -0,0 +1,77 @@
+<script>
+	import { sharedState } from '../sharedState.js';
+	import { watch } from 'vue';
+
+	export default {
+		data() {
+			return sharedState;
+		},
+		watch: {
+			psPerScreen() {
+				this.emitChange();
+			},
+		},
+		methods: {
+			emitChange() {
+				sharedState.psPerScreen = this.psPerScreen;
+			},
+			exportData() {
+				console.log("Exporting");
+				const dataStr = JSON.stringify(sharedState, null, 2);
+				const blob = new Blob([dataStr], { type: 'application/json' });
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement('a');
+				a.href = url;
+				a.download = 'sharedState.json';
+				a.click();
+				URL.revokeObjectURL(url);
+			},
+			async importData(event) {
+				const file = event.target.files[0];
+				const content = await file.text();
+				const importedState = JSON.parse(content);
+								
+				Object.keys(importedState).forEach(key => {
+					if (sharedState.hasOwnProperty(key))
+						sharedState[key] = importedState[key];
+				});
+			},
+		},
+		mounted() {
+			//Set localStorage
+			watch(
+				() => sharedState,
+				(newState) => {
+					localStorage.setItem("sharedState", JSON.stringify(newState));
+				},
+				{ deep: true }
+			);
+		}
+	}
+</script>
+
+<template>
+	<h4>Misc. Options</h4>
+	<div class="container mt-3">
+		<div class="row">
+			<div class="col-md-2">
+				<label for="psPerScreen">Paragraphs per screen <em>(0 for inf)</em></label>
+				<input
+					type="number"
+					class="form-control"
+					id="psPerScreen"
+					v-model="psPerScreen"
+					min="0"
+				/>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-md-2 d-flex align-items-center">
+				<button class="btn btn-link mt-3" @click="exportData">Export</button>
+			</div>
+			<div class="col-md-2 d-flex align-items-center">
+				<input type="file" @change="importData" class="form-control">
+			</div>
+		</div>
+	</div>
+</template>

src/backend/gs_index/src/sharedState.js

@@ -1,5 +1,6 @@
 import { reactive } from 'vue';
 
+//Load localStorage. It is set in `MiscOptions`
 const savedState = JSON.parse(localStorage.getItem('sharedState')) || {};
 
 export const sharedState = reactive({
@@ -17,6 +18,7 @@ export const sharedState = reactive({
 	fullPrompt: true,
 
 	currentOpenCorpus: "",
+	psPerScreen: 16,
 
 	...savedState, //Load
 });