scripts/apps/dictionaries/views/dictionary-config-modal.html
<form name="editForm">
<div sd-modal data-model="dictionary" data-close="cancel()">
<div class="modal__header modal__header--flex">
<h3 class="modal__heading" ng-show="!dictionary._id && isAbbreviations()" translate>Add New Abbreviations Dictionary</h3>
<h3 class="modal__heading" ng-show="!dictionary._id && !isAbbreviations()" translate>Add New Dictionary</h3>
<h3 class="modal__heading" ng-show="dictionary._id && isAbbreviations()" translate>Edit Abbreviations Dictionary</h3>
<h3 class="modal__heading" ng-show="dictionary._id && !isAbbreviations()" translate>Edit Dictionary</h3>
<a href="" class="icn-btn close" ng-click="cancel()"><i class="icon-close-small"></i></a>
</div>
<div class="modal__body">
<div class="upload-progress" ng-if="progress.width">
<div class="bar" style="width: {{ progress.width}}%;"></div>
</div>
<ng-form name="dictionaryForm">
<fieldset>
<div class="form__row">
<span sd-switch ng-model="dictionary.is_active"></span>
<label>{{ :: 'Active' | translate }}</label>
</div>
<div class="sd-line-input sd-line-input--required sd-line-input--boxed" ng-class="{'sd-line-input--invalid' : _errorUniqueness && !dictionary.user}">
<label for="dict-name" class="sd-line-input__label">{{'Dictionary name' | translate}}</label>
<input id="dict-name" class="sd-line-input__input" type="text" ng-if="!dictionary.user" ng-model="dictionary.name" required>
<input class="sd-line-input__input" type="text" ng-if="dictionary.user" value="{{ :: (!isAbbreviations() ? 'Personal' : 'Abbreviations') | translate}}" disabled>
<div ng-show="_errorUniqueness && !dictionary.user" class="sd-line-input__message"><span translate>Dictionary with name {{dictionary.name}} already exists.</span></div>
</div>
<div class="sd-line-input sd-line-input--required" ng-class="{'sd-line-input--invalid' : _errorUniqueness && dictionary.user}">
<label class="sd-line-input__label" for="dict-lang-code">{{'Language code' | translate}}</label>
<input class="sd-line-input__input" id="dict-lang-code" type="text" ng-model="dictionary.language_id" required>
<div ng-show="_errorUniqueness && dictionary.user" class="sd-line-input__message"><span translate>Personal dictionary for language "{{dictionary.language_id}}" already exists.</span></div>
</div>
<div class="sd-line-input" ng-if="!isAbbreviations()">
<label class="sd-line-input__label" for="dict-file">{{'Dictionary file' | translate}}</label>
<input id="dict-file"
name="upload"
type="file"
class="sd-line-input__input"
accept="text/plain"
file-upload
ng-model="file"
sd-file-type-validator>
<div class="sd-line-input__message error" ng-show="editForm.$error.fileType">{{'Please use plain text dictionary. | translate'}}</div>
</div>
</fieldset>
<p ng-if="message">{{ message}}</p>
<p ng-show="_errorLimits" translate>Character limit exceeded, dictionary can not be created/updated.</p>
<span ng-show="_error" translate>There was a problem, dictionary not created/updated.</span>
</ng-form>
<ng-form ng-if="dictionary._id && !isAbbreviations()">
<fieldset>
<label for="words-search">{{ :: 'Search' | translate }} (<span translate translate-n="wordsCount" translate-plural="{{ $count}} words">{{wordsCount}} word</span>)</label>
<div class="form__row form__row--flex form__row--no-padding">
<div class="sd-line-input sd-line-input--no-label sd-line-input--no-margin">
<input id="words-search"
type="text"
class="sd-line-input__input"
ng-model="search"
ng-model-options="{debounce: 500}"
ng-change="filterWords(search)"
/>
</div>
<button class="btn flex-field no-shrink"
type="submit"
ng-disabled="!isNew"
ng-click="addWord(search)"
translate>ADD WORD</button>
</div>
<ul vs-repeat class="words-list" ng-show="words.length">
{{words.length}}
<li ng-repeat="word in words track by word">
{{ :: word}}
<button class="icn-btn"
ng-click="removeWord(word, search)">
<i class="icon-trash"></i>
</button>
</li>
</ul>
</fieldset>
</ng-form>
<ng-form name="abbreviationsForm" ng-if="isAbbreviations()">
<fieldset class="form__block">
<div class="sd-line-input">
<label class="sd-line-input__label" for="abbreviation" translate>Abbreviation</label>
<input class="sd-line-input__input" id="abbreviation" type="text" ng-model="abbreviation.key" required>
</div>
<div class="sd-line-input">
<label class="sd-line-input__label" for="phrase" translate>Phrase</label>
<input class="sd-line-input__input" id="phrase" type="text" ng-model="abbreviation.phrase" required>
</div>
<div class="sd-text__right">
<button class="btn btn--hollow btn--"
ng-click="addAbbreviation()"
ng-disabled="abbreviationsForm.$invalid"
translate>Add Abbreviation</button>
</div>
</fieldset>
<div class="abbreviations-list" ng-if="abbreviationKeys.length">
<div class="abbreviations-list__item abbreviations-list__item--heading">
<div class="abbreviations-field">
<label>{{ :: 'Abbreviation' | translate}}</label>
</div>
<div class="abbreviations-field">
<label>{{ :: 'Phrase' | translate}}</label>
</div>
</div>
<div class="abbreviations-list__item" ng-repeat="key in abbreviationKeys track by key">
<div class="abbreviations-field abbreviations-field--abbreviation">
<label>{{key}}</label>
</div>
<div class="abbreviations-field abbreviations-field--grow">
<div class="sd-line-input sd-line-input--no-margin sd-line-input--no-label sd-line-input--boxed sd-line-input--required">
<input type="text" ng-model="dictionary.content[key]" class="long-name sd-line-input__input">
</div>
</div>
<button class="icn-btn"
ng-click="removeAbbreviation(key)">
<i class="icon-small icon-trash"></i>
</button>
</div>
</div>
</ng-form>
</div>
<div class="modal__footer">
<button id="save-edit-btn" type="submit" class="btn btn--primary pull-right"
ng-click="save()"
ng-disabled="editForm.$invalid || progress.width" translate>Save</button>
<button id="cancel-edit-btn" type="button" class="btn pull-right" ng-click="cancel()" translate>Cancel</button>
</div>
</div>
</form>