Creating records in folders

This commit is contained in:
Magnus Åhall 2026-02-25 21:18:00 +01:00
parent df936baa8f
commit 8aef6d8a2e
2 changed files with 20 additions and 2 deletions

View file

@ -138,7 +138,7 @@ button {
&>.label { &>.label {
display: grid; display: grid;
grid-template-columns: min-content min-content 1fr; grid-template-columns: repeat(4, min-content);
align-items: center; align-items: center;
padding: 5px 0px; padding: 5px 0px;
cursor: pointer; cursor: pointer;
@ -149,6 +149,18 @@ button {
margin-right: 6px; margin-right: 6px;
display: none; display: none;
} }
img.create {
display: none;
height: 16px;
margin-left: 8px;
}
&:hover {
img.create {
display: block;
}
}
} }
&>.subfolders { &>.subfolders {

View file

@ -234,6 +234,7 @@ class Folder {
<img class="closed" src="/images/${_VERSION}/icon_folder.svg"> <img class="closed" src="/images/${_VERSION}/icon_folder.svg">
<img class="open" src="/images/${_VERSION}/icon_folder_open.svg"> <img class="open" src="/images/${_VERSION}/icon_folder_open.svg">
<span>${firstLabel}</span><span>${restLabels != '' ? '.' + restLabels : ''}</span> <span>${firstLabel}</span><span>${restLabels != '' ? '.' + restLabels : ''}</span>
<img class="create" src="/images/${_VERSION}/icon_create.svg">
</div> </div>
<div class="subfolders"></div> <div class="subfolders"></div>
<div class="records"> <div class="records">
@ -248,6 +249,7 @@ class Folder {
this.divRecords = this.div.querySelector('.records') this.divRecords = this.div.querySelector('.records')
this.div.querySelector('.label').addEventListener('click', event => this.toggleFolder(event)) this.div.querySelector('.label').addEventListener('click', event => this.toggleFolder(event))
this.div.querySelector('.label .create').addEventListener('click', event => this.createRecord(event))
} }
@ -265,7 +267,6 @@ class Folder {
this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'block') this.divRecords.querySelectorAll('.header').forEach(h => h.style.display = 'block')
// Remove old ones // Remove old ones
console.log(`removing records from ${this.name()}`)
for (const recdiv of this.divRecords.children) { for (const recdiv of this.divRecords.children) {
if (recdiv?.classList?.contains('fqdn')) { if (recdiv?.classList?.contains('fqdn')) {
const rec = this.records.find(r => r.id() == recdiv.dataset.record_id) const rec = this.records.find(r => r.id() == recdiv.dataset.record_id)
@ -289,6 +290,11 @@ class Folder {
return this.div return this.div
}// }}} }// }}}
createRecord(event) {// {{{
event.stopPropagation()
const record = new Record({ Name: this.name() })
new RecordDialog(record).show()
}// }}}
} }
class Record { class Record {