attribute definition work in progress

This commit is contained in:
azivner 2018-08-03 22:56:49 +02:00
parent 96dc56098d
commit f437be7af0
2 changed files with 67 additions and 35 deletions

View file

@ -19,10 +19,27 @@ function AttributesModel() {
{ text: "Relation", value: "relation" }
];
this.availableValueTypes = [
{ text: "Text", value: "text" },
{ text: "Integer", value: "integer" },
{ text: "Decimal", value: "decimal" },
{ text: "Boolean", value: "boolean" },
{ text: "Date", value: "date" }
];
this.multiplicityTypes = [
{ text: "Single value", value: "singlevalue" },
{ text: "Multi value", value: "multivalue" }
];
this.typeChanged = function(data, event) {
self.getTargetAttribute(event.target).valueHasMutated();
};
this.valueTypeChanged = function(data, event) {
self.getTargetAttribute(event.target).valueHasMutated();
};
this.updateAttributePositions = function() {
let position = 0;
@ -43,6 +60,11 @@ function AttributesModel() {
for (const attr of attributes) {
attr.labelValue = attr.type === 'label' ? attr.value : '';
attr.relationValue = attr.type === 'relation' ? attr.value : '';
attr.definition = {
valueType: "text",
multiplicityType: "singlevalue",
showInUi: "true"
};
delete attr.value;
}
@ -127,7 +149,12 @@ function AttributesModel() {
relationValue: '',
isInheritable: false,
isDeleted: 0,
position: 0
position: 0,
definition: {
valueType: "text",
multiplicityType: "singlevalue",
showInUi: "true"
}
}));
}
}

View file

@ -566,7 +566,6 @@
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Type</th>
<th>Name</th>
<th>Value</th>
@ -575,41 +574,47 @@
</tr>
</thead>
<tbody data-bind="foreach: attributes">
<tr data-bind="if: isDeleted == 0" class="attribute-row">
<td class="handle">
<span class="glyphicon glyphicon-resize-vertical"></span>
<input type="hidden" name="position" data-bind="value: position"/>
</td>
<!-- ID column has specific width because if it's empty its size can be deformed when dragging -->
<td data-bind="text: attributeId" style="min-width: 10em; font-size: smaller;"></td>
<td>
<select data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
</td>
<td>
<!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
<input type="text" class="attribute-name form-control" data-bind="value: name, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"/>
<div style="color: yellowgreen" data-bind="if: $parent.isNotUnique($index())"><span class="glyphicon glyphicon-info-sign"></span> Duplicate attribute.</div>
<div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div>
</td>
<td>
<input type="text" class="label-value form-control" data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }" style="width: 300px"/>
<tr data-bind="if: isDeleted == 0">
<td class="handle">
<span class="glyphicon glyphicon-resize-vertical"></span>
<input type="hidden" name="position" data-bind="value: position"/>
</td>
<td>
<select data-bind="options: $parent.availableTypes, optionsText: 'text', optionsValue: 'value', value: type, event: { change: $parent.typeChanged }"></select>
</td>
<td>
<!-- Change to valueUpdate: blur is necessary because jQuery UI autocomplete hijacks change event -->
<input type="text" class="attribute-name form-control" data-bind="value: name, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"/>
<div style="color: yellowgreen" data-bind="if: $parent.isNotUnique($index())"><span class="glyphicon glyphicon-info-sign"></span> Duplicate attribute.</div>
<div style="color: red" data-bind="if: $parent.isEmptyName($index())">Attribute name can't be empty.</div>
</td>
<td>
<input type="text" class="label-value form-control" data-bind="visible: type == 'label', value: labelValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }" style="width: 300px"/>
<div class="relation-value input-group" data-bind="visible: type == 'relation'">
<input class="form-control relation-target-note-id"
placeholder="search for note by its name"
data-bind="value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"
style="width: 300px;">
<div class="relation-value input-group" data-bind="visible: type == 'relation'">
<input class="form-control relation-target-note-id"
placeholder="search for note by its name"
data-bind="value: relationValue, valueUpdate: 'blur', event: { blur: $parent.attributeChanged }"
style="width: 300px;">
<span class="input-group-addon relations-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
</div>
</td>
<td title="Inheritable relations are automatically inherited to the child notes">
<input type="checkbox" value="1" data-bind="checked: isInheritable" />
</td>
<td title="Delete" style="padding: 13px; cursor: pointer;">
<span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteAttribute"></span>
</td>
</tr>
<span class="input-group-addon relations-show-recent-notes" title="Show recent notes" style="background: url('/images/icons/clock-16.png') no-repeat center; cursor: pointer;"></span>
</div>
<div data-bind="visible: type == 'definition'">
<select data-bind="options: $parent.availableValueTypes, optionsText: 'text', optionsValue: 'value', value: definition.valueType"></select>
<select data-bind="options: $parent.multiplicityTypes, optionsText: 'text', optionsValue: 'value', value: definition.multiplicityType"></select>
<input type="checkbox" value="true" data-bind="checked: definition.showInUi" /> Show In UI
</div>
</td>
<td title="Inheritable relations are automatically inherited to the child notes">
<input type="checkbox" value="1" data-bind="checked: isInheritable" />
</td>
<td title="Delete" style="padding: 13px; cursor: pointer;">
<span class="glyphicon glyphicon-trash" data-bind="click: $parent.deleteAttribute"></span>
</td>
</tr>
</tbody>
</table>
</div>