mirror of
				https://github.com/zadam/trilium.git
				synced 2025-11-04 13:39:01 +01:00 
			
		
		
		
	infrastructure for editing attribute definitions
This commit is contained in:
		
							parent
							
								
									3d02f82c77
								
							
						
					
					
						commit
						64dc522b27
					
				@ -46,7 +46,7 @@ const TPL = `
 | 
			
		||||
    </style>
 | 
			
		||||
 | 
			
		||||
    <div style="display: flex; justify-content: space-between;">
 | 
			
		||||
        <h5>Label detail</h5>
 | 
			
		||||
        <h5 class="attr-detail-title"></h5>
 | 
			
		||||
        
 | 
			
		||||
        <span class="bx bx-x close-attr-detail-button"></span>
 | 
			
		||||
    </div>
 | 
			
		||||
@ -70,6 +70,39 @@ const TPL = `
 | 
			
		||||
                </div>
 | 
			
		||||
            </td>
 | 
			
		||||
        </tr>
 | 
			
		||||
        <tr class="attr-definition-promoted">
 | 
			
		||||
            <th>Promoted:</th>
 | 
			
		||||
            <td><input type="checkbox" class="attr-edit-inheritable form-control form-control-sm" /></td>
 | 
			
		||||
        </tr>
 | 
			
		||||
        <tr class="attr-definition-multiplicity">
 | 
			
		||||
            <th>Multiplicity:</th>
 | 
			
		||||
            <td>
 | 
			
		||||
                <select class="form-control">
 | 
			
		||||
                  <option>Single value</option>
 | 
			
		||||
                  <option>Multi value</option>
 | 
			
		||||
                </select>
 | 
			
		||||
            </td>
 | 
			
		||||
        </tr>
 | 
			
		||||
        <tr class="attr-definition-label-type">
 | 
			
		||||
            <th>Type:</th>
 | 
			
		||||
            <td>
 | 
			
		||||
                <select class="form-control">
 | 
			
		||||
                  <option>Text</option>
 | 
			
		||||
                  <option>Number</option>
 | 
			
		||||
                  <option>Boolean</option>
 | 
			
		||||
                  <option>Date</option>
 | 
			
		||||
                  <option>URL</option>
 | 
			
		||||
                </select>
 | 
			
		||||
            </td>
 | 
			
		||||
        </tr>
 | 
			
		||||
        <tr class="attr-definition-inverse-relation">
 | 
			
		||||
            <th>Inverse relation:</th>
 | 
			
		||||
            <td>
 | 
			
		||||
                <div class="input-group">
 | 
			
		||||
                    <input type="text" class="form-control" />
 | 
			
		||||
                </div>
 | 
			
		||||
            </td>
 | 
			
		||||
        </tr>
 | 
			
		||||
        <tr>
 | 
			
		||||
            <th>Inheritable:</th>
 | 
			
		||||
            <td><input type="checkbox" class="attr-edit-inheritable form-control form-control-sm" /></td>
 | 
			
		||||
@ -87,13 +120,21 @@ const TPL = `
 | 
			
		||||
    </div>
 | 
			
		||||
</div>`;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
const DISPLAYED_NOTES = 10;
 | 
			
		||||
 | 
			
		||||
const ATTR_TITLES = {
 | 
			
		||||
    "label": "Label detail",
 | 
			
		||||
    "label-definition": "Label definition detail",
 | 
			
		||||
    "relation": "Relation detail",
 | 
			
		||||
    "relation-definition": "Relation definition detail"
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default class AttributeDetailWidget extends BasicWidget {
 | 
			
		||||
    doRender() {
 | 
			
		||||
        this.$widget = $(TPL);
 | 
			
		||||
 | 
			
		||||
        this.$title = this.$widget.find('.attr-detail-title');
 | 
			
		||||
 | 
			
		||||
        this.$relatedNotesContainer = this.$widget.find('.related-notes-container');
 | 
			
		||||
        this.$relatedNotesTitle = this.$relatedNotesContainer.find('.related-notes-tile');
 | 
			
		||||
        this.$relatedNotesList = this.$relatedNotesContainer.find('.related-notes-list');
 | 
			
		||||
@ -106,6 +147,11 @@ export default class AttributeDetailWidget extends BasicWidget {
 | 
			
		||||
        this.$attrEditValue = this.$widget.find('.attr-edit-value');
 | 
			
		||||
        this.$attrEditValue.on('keyup', () => this.updateParent());
 | 
			
		||||
 | 
			
		||||
        this.$attrDefinitionPromoted = this.$widget.find('.attr-definition-promoted');
 | 
			
		||||
        this.$attrDefinitionMultiplicity = this.$widget.find('.attr-definition-multiplicity');
 | 
			
		||||
        this.$attrDefinitionLabelType = this.$widget.find('.attr-definition-label-type');
 | 
			
		||||
        this.$attrDefinitionInverseRelation = this.$widget.find('.attr-definition-inverse-relation');
 | 
			
		||||
 | 
			
		||||
        this.$attrTargetNoteRow = this.$widget.find('.attr-target-note-row');
 | 
			
		||||
        this.$attrEditTargetNote = this.$widget.find('.attr-edit-target-note');
 | 
			
		||||
 | 
			
		||||
@ -145,6 +191,10 @@ export default class AttributeDetailWidget extends BasicWidget {
 | 
			
		||||
            return;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        const attrType = this.getAttrType(attribute);
 | 
			
		||||
 | 
			
		||||
        this.$title.text(ATTR_TITLES[attrType]);
 | 
			
		||||
 | 
			
		||||
        this.allAttributes = allAttributes;
 | 
			
		||||
        this.attribute = attribute;
 | 
			
		||||
 | 
			
		||||
@ -200,8 +250,13 @@ export default class AttributeDetailWidget extends BasicWidget {
 | 
			
		||||
            .val(attribute.name)
 | 
			
		||||
            .attr('readonly', () => !isOwned);
 | 
			
		||||
 | 
			
		||||
        this.$attrValueRow.toggle(attribute.type === 'label');
 | 
			
		||||
        this.$attrTargetNoteRow.toggle(attribute.type === 'relation');
 | 
			
		||||
        this.$attrValueRow.toggle(attrType === 'label');
 | 
			
		||||
        this.$attrTargetNoteRow.toggle(attrType === 'relation');
 | 
			
		||||
 | 
			
		||||
        this.$attrDefinitionPromoted.toggle(['label-definition', 'relation-definition'].includes(attrType));
 | 
			
		||||
        this.$attrDefinitionMultiplicity.toggle(['label-definition', 'relation-definition'].includes(attrType));
 | 
			
		||||
        this.$attrDefinitionLabelType.toggle(attrType === 'label-definition');
 | 
			
		||||
        this.$attrDefinitionInverseRelation.toggle(attrType === 'relation-definition');
 | 
			
		||||
 | 
			
		||||
        if (attribute.type === 'label') {
 | 
			
		||||
            this.$attrEditValue
 | 
			
		||||
@ -227,6 +282,24 @@ export default class AttributeDetailWidget extends BasicWidget {
 | 
			
		||||
        this.$widget.css("top", y + 25);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    getAttrType(attribute) {
 | 
			
		||||
        if (attribute.type === 'label') {
 | 
			
		||||
            if (attribute.name.startsWith('label:')) {
 | 
			
		||||
                return "label-definition";
 | 
			
		||||
            } else if (attribute.name.startsWith('relation:')) {
 | 
			
		||||
                return "relation-definition";
 | 
			
		||||
            } else {
 | 
			
		||||
                return "label";
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
        else if (attribute.type === 'relation') {
 | 
			
		||||
            return "relation";
 | 
			
		||||
        }
 | 
			
		||||
        else {
 | 
			
		||||
            this.$title.text('');
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    updateParent() {
 | 
			
		||||
        this.attribute.name = this.$attrEditName.val();
 | 
			
		||||
        this.attribute.value = this.$attrEditValue.val();
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user