superdesk/superdesk-client-core

View on GitHub
scripts/apps/dictionaries/views/dictionary-config-modal.html

Summary

Maintainability
Test Coverage
<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>