Merge pull request #18 from Lenni009/dev

add drag'n'drop support for file upload

.github/workflows/build.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Build App
         run: |

.github/workflows/test-build.yml

@@ -19,7 +19,7 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Test Build
         uses: Lenni009/test-build-vite-action@main

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "rewardtable-tools-v2",
+  "name": "rewardtable-tools",
   "version": "0.0.0",
   "private": true,
   "scripts": {

src/components/inputs/file-input.vue

@@ -1,25 +1,39 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { useDocumentStore } from 'src/stores/document';
+import { ref } from 'vue';
 
 defineProps<{
 	inputId: string;
 }>()
 
 const fileInput = ref<HTMLInputElement | null>(null);
 const fileName = ref('');
+const dragActive = ref(false);
 
-function updateLabel() {
-	if (fileInput.value?.files && fileInput.value.files.length > 0) {
-		fileName.value = fileInput.value.files[0].name
-	}
+const documentStore = useDocumentStore();
+
+function updateLabel(file: File) {
+	fileName.value = file.name
 }
 
+function addFile(file: File | null = null) {
+	const uploadedFile = file ?? fileInput.value?.files?.[0];
+	if (!uploadedFile) return;
+	updateLabel(uploadedFile);
+	documentStore.readFile(uploadedFile);
+}
+
+function dropFile(e: DragEvent) {
+  dragActive.value = false;
+  const uploadedFile = e.dataTransfer?.files?.[0];
+  if (uploadedFile) addFile(uploadedFile);
+}
 </script>
 
 <template>
 	<div class="file has-name is-boxed">
-		<label class="file-label">
-			<input ref="fileInput" class="file-input" type="file" :id="inputId" @change="updateLabel">
+		<label :class="{'drag-active': dragActive}" class="file-label" :for="inputId" @dragenter="dragActive = true" @dragleave="dragActive = false" @drop.prevent="dropFile" @dragover.prevent>
+			<input ref="fileInput" class="file-input" type="file" :id="inputId" @change="addFile()" />
 			<span class="file-cta">
 				<span class="file-icon">
 					<i class="material-icons file-icon-element">upload</i>
@@ -36,6 +50,17 @@ function updateLabel() {
 </template>
 
 <style scoped lang="scss">
+.file-label {
+	* {
+		pointer-events: none;
+	}
+
+	&.drag-active .file-cta,
+	&:hover .file-cta {
+		background-color: #eeeeee;
+}
+}
+
 .file-icon {
 	margin-right: 0;
 

src/components/inputs/file-upload.vue

@@ -2,9 +2,6 @@
 import TextLabel from 'src/components/text-label.vue';
 import Tooltip from 'src/components/tooltip.vue';
 import FileInput from './file-input.vue';
-import { useDocumentStore } from 'src/stores/document';
-
-const documentStore = useDocumentStore();
 </script>
 
 <template>
@@ -13,7 +10,7 @@ const documentStore = useDocumentStore();
 			<text-label inputId="fileUpload">Upload REWARDTABLE.EXML</text-label>
 			<tooltip>Can be found in METADATA/REALITY/TABLES.</tooltip>
 		</div>
-		<file-input type="file" input-id="fileUpload" @change="documentStore.readFile($event.target)" />
+		<file-input type="file" input-id="fileUpload" />
 	</div>
 </template>
 

src/components/output/chances-table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref, type Ref } from 'vue';
+import { computed } from 'vue';
 import TextLabel from 'src/components/text-label.vue';
 import { rewardChances, searchRewardSection } from 'src/logic/logic';
 import { useRewardStore } from 'src/stores/reward';
@@ -49,12 +49,12 @@ const divTable = computed(() => {
 <style scoped lang="scss">
 .chancesTable {
 	display: grid;
-	grid-template-columns: 0.1fr 1.5fr 1fr 0.3fr;
+	grid-template-columns: repeat(4, auto);
 	border: 1px solid black;
 
 	&>* {
 		border: 1px solid black;
-		padding: 0 2px;
+		padding-inline: 3px;
 		white-space: nowrap;
 	}
 

src/components/output/exml-snippet.vue

@@ -25,7 +25,7 @@ watch(data, (newValue) => {
 	if (newValue.exmlOutput) newValue.exmlOutput.innerText = xmlString;
 })
 
-function getXmlString(fileXmlDoc: XMLDocument | undefined, rewardSearchTerm: string) {
+function getXmlString(fileXmlDoc: XMLDocument | null, rewardSearchTerm: string) {
 	if (!fileXmlDoc || !rewardSearchTerm) return;
 	const domSection = searchRewardSection(fileXmlDoc, rewardSearchTerm);
 	if (!domSection) return;

src/logic/logic.ts

@@ -10,7 +10,7 @@ export function processEXML(contents: string) {
 /**
  * searches the EXML section for a given reward and returns its DOM element
  */
-export function searchRewardSection(xmlDoc: XMLDocument | undefined, rewardId: string): Element | undefined {
+export function searchRewardSection(xmlDoc: XMLDocument | null, rewardId: string): Element | undefined {
 	if (!xmlDoc) return;
 	const xmlSectionDom = xmlDoc.querySelector(`[value="GcGenericRewardTableEntry.xml"] > [name="Id"][value=${rewardId} i], [value="GcRewardTableEntry.xml"] > [name="Id"][value=${rewardId} i]`)?.parentNode as Element | undefined;
 	return xmlSectionDom;

src/stores/document.ts

@@ -2,28 +2,23 @@ import { processEXML } from 'src/logic/logic';
 import { defineStore } from 'pinia'
 
 interface DocumentState {
-	fileXmlDoc: XMLDocument | undefined;
+	fileXmlDoc: XMLDocument | null;
 }
 
 export const useDocumentStore = defineStore('document', {
 	state: (): DocumentState => {
 		return {
-			fileXmlDoc: undefined,
+			fileXmlDoc: null,
 		}
 	},
 
 	actions: {
-		readFile(element: HTMLInputElement) {
-			if (!element?.files) return;
-
-			const file = element.files[0];
-			if (!file) return;
-
+		readFile(file: File) {
 			const reader = new FileReader();
 			reader.readAsText(file);
 			reader.onload = (e) => {
 				const contents = e.target?.result;
-				this.fileXmlDoc = typeof contents === 'string' ? processEXML(contents) : undefined;
+				this.fileXmlDoc = typeof contents === 'string' ? processEXML(contents) : null;
 			}
 		},
 	}