TPsoft.org/BugReport
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implementovane pridavanie priloh typu "comment",

Browse Source 
dynamicka uprava komentarov dvojklikom
This commit is contained in:
Igor Miňo
2025-05-14 00:36:56 +02:00
parent e870a62b89
commit 82e14b8fa4
5 changed files with 226 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
webapp/src/assets/css/style.css
View File

@ -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 {

20
webapp/src/backend.js
View File

@ -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});
},
};

101
webapp/src/views/Report.vue
View File

@ -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>