jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Style checklists

Browse Source
This commit is contained in:
Johannes Zellner
2025-03-22 11:59:27 +01:00
parent 64b730a22e
commit 1db275707b
3 changed files with 61 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/app/Info.vue
+48 -20
View File
@@ -23,7 +23,11 @@ const placeholder = 'Add admin notes here...';
const noteContent = ref('');
async function onAckChecklistItem(item, key) {
// TODO
const [error] = await appsModel.ackChecklistItem(id.value, key, true);
if (error) return console.error(error);
item.acknowledged = true;
hasOldChecklist.value = true;
}
async function onSubmit() {
@@ -66,7 +70,6 @@ onMounted(() => {
checklist.value = app.checklist;
hasOldChecklist.value = !!Object.keys(app.checklist).find((k) => { return app.checklist[k].acknowledged; });
noteContent.value = app.notes === null ? app.manifest.postInstallMessage : app.notes;
console.log(app.manifest.postInstallMessage)
editing.value = false;
busy.value = false;
});
@@ -75,24 +78,6 @@ onMounted(() => {
<template>
<div>
<div class="actionable" @click="info.showDoneChecklist = true" v-show="hasOldChecklist && !showDoneChecklist">Show Checklist</div>
<div class="actionable" @click="info.showDoneChecklist = false" v-show="showDoneChecklist">Hide Checklist</div>
<div v-for="(item, key) in checklist" :key="key">
<div class="checklist-item" v-if="!item.acknowledged">
<span v-html="marked.parse(item.message)"></span>
<button class="btn btn-xs btn-default" style="margin-left: 10px;" @click="onAckChecklistItem(item, key)">Done</button>
</div>
</div>
<div v-for="(item, key) in checklist" :key="key" v-show="showDoneChecklist">
<div class="checklist-item checklist-item-acknowledged" v-if="item.acknowledged">
<span v-html="marked.parse(item.message)"></span>
<span class="text-muted text-small">{{ item.changedBy }} {{ prettyDate(item.changedAt) }}</span>
</div>
</div>
<div style="margin-top: 10px"></div>
<div class="info-row">
<div class="info-label">{{ $t('app.updates.info.description') }}</div>
@@ -123,6 +108,29 @@ onMounted(() => {
<br/>
<div style="display: flex; justify-content: end; align-items: center;">
<!-- TODO translate -->
<div class="actionable" @click="showDoneChecklist = true" v-show="hasOldChecklist && !showDoneChecklist">Show Checklist</div>
<div class="actionable" @click="showDoneChecklist = false" v-show="showDoneChecklist">Hide Checklist</div>
</div>
<div v-for="(item, key) in checklist" :key="key">
<div class="checklist-item" v-if="!item.acknowledged">
<span v-html="marked.parse(item.message)"></span>
<!-- TODO translate -->
<Button small plain tool style="margin-left: 10px;" @click="onAckChecklistItem(item, key)">Done</Button>
</div>
</div>
<div v-for="(item, key) in checklist" :key="key" v-show="showDoneChecklist">
<div class="checklist-item checklist-item-acknowledged" v-if="item.acknowledged">
<span v-html="marked.parse(item.message)"></span>
<span class="text-muted text-small">{{ item.changedBy }} - {{ prettyDate(item.changedAt) }}</span>
</div>
</div>
<br/>
<p>
<label class="control-label">{{ $t('app.info.notes.title') }}</label><i v-show="!editing" class="info-edit-indicator fa fa-pencil-alt" @click="onEdit()"></i>
</p>
@@ -161,4 +169,24 @@ onMounted(() => {
transform: scale(1.2);
}
.checklist-item {
padding: 8px;
border: none;
border-left: 2px solid rgb(255, 76, 76);
background-color: #ff000014;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.checklist-item-acknowledged {
border-left: 2px solid var(--pankow-color-success);
background-color: transparent;
}
.checklist-item > span > * {
margin: 0;
}
</style>