implementovane pridavanie priloh typu "comment",

dynamicka uprava komentarov dvojklikom

webapp/src/assets/css/style.css

@@ -405,6 +405,34 @@ button:focus-visible,
 	text-align: justify;
 	white-space: pre-line
 }
+#report .attachments {
+	display: flex;
+	flex-direction: column;
+}
+#report .attachments .attachment {
+	display: flex;
+	flex-direction: column;
+	background-color: var(--color-bg2);
+	text-align: justify;
+	white-space: pre-line;
+	margin-top: 10px;
+}
+#report .attachments .attachment .attachment-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	background-color: var(--color-bg0);
+}
+#report .attachments .attachment .attachment-header .created,
+#report .attachments .attachment .attachment-header .author {
+	padding: 2px 10px;
+}
+#report .attachments .attachment .attachment-content {
+	padding: 10px;
+}
+#report .attachment-new {
+	margin-top: 30px;
+}
 @media (max-width: 600px) {
 	#report .report-header {
 

webapp/src/backend.js

@@ -70,19 +70,31 @@ export const backend = {
 	},
 
 	getAll() {
-		return this.callPromise('getall', {});
+		return this.callPromise('getAll', {});
 	},
 
 	getAllGrouped(status) {
-		return this.callPromise('getallgrouped', {});
+		return this.callPromise('getAllGrouped', {});
 	},
 
 	updateOrdnum(ordnums) {
-		return this.callPromise('updateordnum', {ordnums: ordnums});
+		return this.callPromise('updateOrdNum', {ordnums: ordnums});
 	},
 
 	updateStatus(id, status) {
-		return this.callPromise('updatestatus', {report_id: id, status: status});
+		return this.callPromise('updateStatus', {report_id: id, status: status});
+	},
+
+	attachmentAdd(report_id, attachment_type, attachment_content) {
+		return this.callPromise('attachmentAdd', {report_id: report_id, attachment_type: attachment_type, attachment_content: attachment_content});
+	},
+
+	attachmentUpdate(attachment_id, attachment_content) {
+		return this.callPromise('attachmentUpdate', {attachment_id: attachment_id, attachment_content: attachment_content});
+	},
+
+	attachmentGetAll(report_id) {
+		return this.callPromise('attachmentGetAll', {report_id: report_id});
 	},
 
 };

webapp/src/views/Report.vue

@@ -24,13 +24,65 @@
 				<strong>{{ report.report_group }}</strong>
 			</div>
 			<div>
-				<button @click="reportDelete"><font-awesome-icon :icon="['fas', 'trash-can']" />  Zmazať</button>
+				<button @click="reportDelete">
+					<font-awesome-icon :icon="['fas', 'trash-can']" /> Zmazať
+				</button>
 			</div>
 		</div>
 		<h1 contenteditable="true" @blur="onTitleChange" ref="reportTitle">
 			{{ report.report_title }}
 		</h1>
-		<p class="description" contenteditable="true" @blur="onDescriptionChange" ref="reportDescription">{{ report.report_description }}</p>
+		<p
+			class="description"
+			contenteditable="true"
+			@blur="onDescriptionChange"
+			ref="reportDescription"
+		>
+			{{ report.report_description }}
+		</p>
+		<div class="attachments">
+			<div
+				class="attachment"
+				v-for="attachment in attachments"
+				:key="attachment.attachment_id"
+			>
+				<div class="attachment-header">
+					<span class="created"
+						><font-awesome-icon :icon="['fas', 'calendar-days']" />
+						{{ attachment.created_dt }}</span
+					>
+					<span class="author"
+						><font-awesome-icon :icon="['fas', 'user']" />
+						{{ attachment.attachment_author }}</span
+					>
+				</div>
+				<div
+					class="attachment-content"
+					:contenteditable="attachment.editable ?? false"
+					@dblclick="attachment.editable = true"
+					@blur="attachment.editable = false; updateAttachmentContent($event, attachment);"
+				>
+					{{ attachment.attachment_content }}
+				</div>
+			</div>
+		</div>
+		<div class="attachment-new">
+			<div class="form-group">
+				<label for="description">Nový komentár:</label>
+				<textarea
+					ref="attachmentNewContent"
+					rows="5"
+					class="form-control"
+					placeholder="Nove zistenia alebo riesenia"
+					required
+				></textarea>
+			</div>
+			<div class="form-actions">
+				<button @click="attachmentAdd">
+					<font-awesome-icon :icon="['fas', 'circle-plus']" /> Pridať
+				</button>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -55,24 +107,38 @@ export default {
 				created_dt: "--",
 				ordnum: 0,
 			},
+			attachments: [
+				{
+					attachment_id: 0,
+					attachment_type: "comment",
+					attachment_content: "Nacitavam report",
+					created_dt: "--",
+				},
+			],
 		};
 	},
 	mounted() {
-		console.log(this.report_id);
+		// console.log(this.report_id);
 		this.loadReportData();
 	},
 	methods: {
 		loadReportData() {
 			backend.get(this.report_id).then((report) => {
 				this.report = report;
-				console.log(this.report);
+				// console.log(this.report);
+			});
+			backend.attachmentGetAll(this.report_id).then((attachments) => {
+				this.attachments = attachments;
+				// console.log(this.attachments);
 			});
 		},
 		onTitleChange(event) {
 			backend.update(this.report_id, { report_title: event.target.innerText });
 		},
 		onDescriptionChange(event) {
-			backend.update(this.report_id, { report_description: event.target.innerText });
+			backend.update(this.report_id, {
+				report_description: event.target.innerText,
+			});
 		},
 		reportDelete() {
 			if (!confirm("Naozaj chcete report zmazať?")) return;
@@ -81,8 +147,29 @@ export default {
 				this.$router.push("/");
 			});
 		},
+		attachmentAdd() {
+			this.loading = true;
+			backend
+				.attachmentAdd(
+					this.report_id,
+					"comment",
+					this.$refs.attachmentNewContent.value
+				)
+				.then(() => {
+					this.$refs.attachmentNewContent.value = "";
+					this.loadReportData();
+					this.loading = false;
+				});
+		},
+		updateAttachmentContent(event, attachment) {
+			this.loading = true;
+			backend
+				.attachmentUpdate(attachment.attachment_id, event.target.innerText)
+				.then(() => {
+					this.loadReportData();
+					this.loading = false;
+				});
+		},
 	},
-	components: {},
-	watch: {},
 };
 </script>