109 lines
4.1 KiB
HTML
109 lines
4.1 KiB
HTML
<page-title title="Vocabulary Editor"></page-title>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p>
|
|
<b>Vocabulary ID: </b>{{vocId}}<br />
|
|
<b>Vocabulary Name: </b>{{vocInfo.name}}<br />
|
|
<b>Description: </b>{{vocInfo.description}}
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-sm btn-info" href="#!/vocs">Return to vocabulary list</a>
|
|
<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareNewTerm()">create a new term</button>
|
|
<a class="btn btn-sm btn-success" href="/api/vocs/{{vocId}}/terms" target="_blank">Download</a>
|
|
</p>
|
|
|
|
<page-filter filter="termFilter" list="terms"></page-filter>
|
|
|
|
<table class="table table-sm table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 20%">Code</th>
|
|
<th style="width: 20%">Name</th>
|
|
<th style="width: 10%">Encoding</th>
|
|
<th style="width: 40%">Synonyms</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-show="(terms|filter:termFilter).length == 0">
|
|
<td colspan="5" class="text-muted">no terms</td>
|
|
</tr>
|
|
<tr ng-repeat="t in terms|filter:termFilter">
|
|
<th>{{t.code}}</th>
|
|
<td>{{t.name}}</td>
|
|
<td><span class="badge badge-warning">{{t.encoding}}</span></td>
|
|
<td><span class="text-muted" ng-show="t.synonyms.length == 0">0 synonym(s)</span> <span class="badge badge-primary mr-1" ng-repeat="s in t.synonyms">{{s.term}}</span></td>
|
|
<td align="right">
|
|
<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#editVocabularyTermModal" ng-click="prepareEditTerm(t)">edit</button>
|
|
<button type="button" class="btn btn-sm btn-danger" ng-click="deleteTerm(t.code)">delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
|
|
<div class="modal fade" tabindex="-1" id="editVocabularyTermModal">
|
|
<form>
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" ng-if="mode == 'new'">New term</h4>
|
|
<h4 class="modal-title" ng-if="mode == 'edit'">Edit term</h4>
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form-textfield label="Code" value="tmpTerm.code"></form-textfield>
|
|
<form-textfield label="Name" value="tmpTerm.name"></form-textfield>
|
|
<form-textfield label="Encoding" value="tmpTerm.encoding" optional="true"></form-textfield>
|
|
|
|
<div class="form-group">
|
|
<table class="table table-sm table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Synonym</th>
|
|
<th>Encoding</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-show="tmpTerm.synonyms.length == 0">
|
|
<td colspan="3">0 synonym(s)</td>
|
|
</tr>
|
|
<tr ng-repeat="s in tmpTerm.synonyms">
|
|
<td>{{s.term}}</td>
|
|
<td>{{s.encoding}}</td>
|
|
<td align="right"><button class="btn btn-sm btn-danger" type="button" ng-click="tmpTerm.synonyms.splice($index, 1)">
|
|
<i class="fa fa-trash"></i>
|
|
</button></td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr ng-init="newSynomym=newEncoding=''">
|
|
<td><input type="text" class="form-control form-control-sm" placeholder="new synomym..." ng-model="newSynomym" /></td>
|
|
<td><input type="text" class="form-control form-control-sm" placeholder="encoding..." ng-model="newEncoding" /></td>
|
|
<td align="right">
|
|
<button type="button" class="btn btn-sm btn-outline-success" ng-click="tmpTerm.synonyms.push({'term': newSynomym, 'encoding': newEncoding}); newSynomym=newEncoding=''" ng-disabled="!newSynomym">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="submit" class="btn btn-sm btn-primary" data-dismiss="modal" ng-click="saveTerm(tmpTerm)" ng-disabled="newSynomym || !tmpTerm.code || !tmpTerm.name">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|