Merge branch 'feature-30660/FHC4_StudierendenGUI_Prototyp' of github.com:FH-Complete/FHC-Core into feature-30660/FHC4_StudierendenGUI_Prototyp

public/js/components/Form/Upload/Dms.js

@@ -1,4 +1,9 @@
+import DmsItem from './Dms/Item.js';
+
 export default {
+	components: {
+		DmsItem
+	},
 	emits: [
 		'update:modelValue'
 	],
@@ -81,13 +86,14 @@ export default {
 	<div class="form-upload-dms">
 		<input ref="upload" class="form-control" :class="inputClass" :id="id" :name="name" :multiple="multiple" type="file" @change="addFiles">
 		<ul v-if="modelValue.length && multiple && !noList" class="list-unstyled m-0">
-			<li v-for="(file, index) in modelValue" :key="index" class="d-flex mx-1 mt-1 align-items-start">
-				<span class="col-auto"><i class="fa fa-file me-1"></i></span>
-				<span class="col">{{ file.name }}</span>
-				<button class="col-auto btn btn-outline-secondary btn-p-0" @click="removeFile(index)">
-					<i class="fa fa-close"></i>
-				</button>
-			</li>
+			<dms-item
+				v-for="(file, index) in modelValue"
+				:key="index"
+				v-model="file"
+				class="d-flex mx-1 mt-1 align-items-start"
+				@delete="removeFile(index)"
+				>
+			</dms-item>
 		</ul>
 	</div>`
 }

public/js/components/Form/Upload/Dms/Item.js

@@ -0,0 +1,37 @@
+export default {
+	emits: [
+		'delete'
+	],
+	props: {
+		modelValue: {
+			type: [File, Object],
+			required: true
+		}
+	},
+	data() {
+		return {
+			preview: ''
+		};
+	},
+	watch: {
+		modelValue(n) {
+			if (n.type == 'application/x.fhc-dms+json') {
+				n.text().then(result => {
+					const obj = JSON.parse(result);
+					this.preview = obj.preview || '';
+				});
+			}
+		}
+	},
+	template: `
+	<li class="form-upload-dms-item">
+		<span class="col-auto"><i class="fa fa-file me-1"></i></span>
+		<span class="col">{{ modelValue.name }}</span>
+		<a v-if="preview" :href="preview" target="_blank" class="col-auto btn btn-outline-secondary btn-p-0 me-1">
+			<i class="fa fa-download"></i>
+		</a>
+		<button class="col-auto btn btn-outline-secondary btn-p-0" @click="$emit('delete')">
+			<i class="fa fa-close"></i>
+		</button>
+	</li>`
+}