superdesk/superdesk-client-core

View on GitHub
scripts/apps/vocabularies/views/vocabulary-config-modal.html

Summary

Maintainability
Test Coverage
<form name="editForm">
    <div sd-modal data-model="vocabulary" class="modal--x-large">
        <div class="modal__header modal__header--flex">
            <h3 class="modal__heading" ng-show="vocabulary._id"><span translate>Edit</span> {{vocabulary.display_name}}
            </h3>
            <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</span></h3>
            <a href="" class="icn-btn close-modal" ng-click="cancel()"><i class="icon-close-small"></i></a>
        </div>
        <div class="modal__body modal__body--with-navigation">
            <ul class="modal__navigation" ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                <li ng-class="{'active': tab === 'general'}"><button ng-click="setTab('general')" translate>General</button></li>
                <li ng-class="{'active': tab === 'items'}"><button ng-click="setTab('items')" translate>Items</button></li>
            </ul>

            <div class="modal__navigation--content">
                <ng-form name="vocabularyForm" class="vocabularyForm">
                    <div ng-show="tab === 'items' && matchFieldTypeToTab('vocabularies', vocabulary.field_type)" style="height: 100%">
                        <div style="height: 100%" id="vocabulary-items-view-edit-placeholder"></div>
                    </div>

                    <div class="sd-padding--3" ng-show="tab === 'general' || !matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                        <div class="sd-line-input"
                            ng-class="{'sd-line-input--invalid': issues._id, 'sd-line-input--required': !vocabulary._id}"
                            ng-if="!vocabulary._links || !matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                            <label for="cv_id" class="sd-line-input__label" translate>ID</label>
                            <input id="cv_id" class="sd-line-input__input" type="text" ng-model="vocabulary._id"
                                ng-pattern="idRegex" ng-readonly="!!vocabulary._links" required>
                            <div class="sd-line-input__message" ng-show="issues._id.unique || issues._id.deleted"
                                translate>ID must be unique.</div>
                            <div class="sd-line-input__message" ng-show="issues._id.conflict" translate>ID conflicts
                                with system field.</div>
                            <div class="sd-line-input__message" ng-show="issues._id.indexOf('regex') >= 0" translate>ID
                                must contain only letters, digits and characters -, _.</div>
                        </div>

                        <div class="form__row">
                            <div
                                class="sd-line-input sd-line-input--required sd-line-input--boxed  sd-line-input--no-margin">
                                <label for="cv_display_name" class="sd-line-input__label" translate>Name</label>
                                <input
                                    id="cv_display_name"
                                    class="sd-line-input__input"
                                    type="text"
                                    ng-model="vocabulary.display_name"
                                    required
                                    data-test-id="vocabulary-edit-field--name"
                                />
                            </div>
                        </div>

                        <div class="form__row" ng-if="matchFieldTypeToTab('custom-fields', vocabulary.field_type)">
                            <div class="sd-line-input sd-line-input--is-select sd-line-input--required">
                                <label for="custom_field_specs" class="sd-line-input__label" translate>Field
                                    type</label>
                                <select id="custom_field_specs" class="sd-line-input__select"
                                    ng-model="vocabulary.custom_field_type" required>
                                    <option value="{{type.id}}" ng-repeat="type in customFieldTypes" translate>
                                        {{type.label}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form__row">
                            <div class="sd-line-input sd-line-input--no-margin">
                                <label for="cv_description" class="sd-line-input__label" translate>Description</label>
                                <input id="cv_description" class="sd-line-input__input" type="text"
                                    ng-model="vocabulary.description">
                            </div>
                        </div>

                        <div class="form__row">
                            <div class="sd-line-input sd-line-input--no-margin sd-line-input--no-label">
                                <sd-tag-input ng-model="vocabulary.tags" data-max-items="1"
                                    data-label="{{'Label' | translate}}" data-items="tags" data-field="text"
                                    data-min-length="1"
                                    placeholder="{{'Type to search or create a new label' | translate}}"
                                    data-freetext="true">
                                </sd-tag-input>
                                <div class="sd-line-input__message" translate>Choose existing labels or create new
                                    ones by typing. The labels are only used to organize the controlled vocabularies
                                    in the list. The CVs are grouped under each label. You can choose only one
                                    label.</div>
                            </div>
                        </div>

                        <div class="form__row"
                            ng-if="vocabulary.service && vocabulary.field_type === null || vocabulary._id === 'categories'">
                            <div class="sd-line-input" ng-class="{'sd-line-input--invalid': vocabularyForm.$error.min}">
                                <label for="cv_popup_width" class="sd-line-input__label" translate>Width of the
                                    popup window (in pixels)</label>
                                <input id="cv_popup_width" class="sd-line-input__input" type="number" min="20"
                                    placeholder="{{ :: '200 minimum' | translate}}" ng-model="vocabulary.popup_width">
                                <div class="sd-line-input__hint" translate>Defines the width of the pop-up in the
                                    article header. A minimal value of 200 is required.</div>
                            </div>
                        </div>

                        <div class="form__row">
                            <div class="sd-line-input"
                                ng-class="{'sd-line-input--invalid': vocabularyForm.$error.maxlength}">
                                <label for="cv_helper_text" class="sd-line-input__label" translate>Helper
                                    text</label>
                                <input id="cv_helper_text" class="sd-line-input__input" type="text"
                                    ng-model="vocabulary.helper_text" ng-maxlength="120">
                                <div class="sd-line-input__hint" translate>This will appear below the field in the
                                    Editor.</div>
                                <div class="sd-line-input__message" ng-show="vocabularyForm.$error.maxlength" translate>
                                    The helper text must not exceed 120 characters.</div>
                            </div>
                        </div>

                        <div class="sd-line-input sd-line-input--is-select"
                            ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                            <label for="cv_selection_type" class="sd-line-input__label" translate>Show to users
                                as</label>
                            <select id="cv_selection_type" class="sd-line-input__select"
                                ng-model="vocabulary.selection_type">
                                <option value="{{type.id}}" ng-repeat="type in selectionTypes" translate>
                                    {{type.label}}</option>
                            </select>
                        </div>

                        <div class="sd-line-input" ng-if="matchFieldTypeToTab('date-fields', vocabulary.field_type)">
                            <label class="sd-line-input__label" translate>Shortcuts</label>
                            <ul class="date_shortcuts">
                                <li ng-repeat="shortcut in vocabulary.date_shortcuts">
                                    <div class="form__row form__row--flex">
                                        <div class="sd-line-input">
                                            <label class="sd-line-input__label" translate>Label</label>
                                            <input type="text" class="sd-line-input__input" ng-model="shortcut.label">
                                        </div>
                                        <div class="sd-line-input date_shortcuts--smaller">
                                            <label class="sd-line-input__label" translate>Value</label>
                                            <input type="number" min="0" class="sd-line-input__input"
                                                ng-model="shortcut.value">
                                        </div>
                                        <div class="sd-line-input sd-line-input--is-select">
                                            <select class="sd-line-input__select" ng-model="shortcut.term">
                                                <option value="days" translate>days</option>
                                                <option value="weeks" translate>weeks</option>
                                                <option value="months" translate>months</option>
                                                <option value="years" translate>years</option>
                                            </select>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                        <div class="sd-line-input"
                            ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                            <sd-check ng-model="vocabulary.disable_entire_category_selection">
                                <span translate>Disable selection of an entire category</span>
                            </sd-check>
                        </div>

                        <div class="sd-line-input" ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                            <sd-check ng-model="vocabulary.preffered_items">
                                {{ :: 'Available in user/desk preferences' | translate }}</sd-check>
                        </div>

                        <div class="form__row" ng-show="matchFieldTypeToTab('text-fields', vocabulary.field_type)">
                            <sd-check id="field-text-single" ng-model="vocabulary.field_options.single">
                                {{'Single line' | translate}}</sd-check>
                        </div>

                        <div class="form__row"
                            ng-show="matchFieldTypeToTab('related-content-fields', vocabulary.field_type)">
                            <label for="field-media-type" class="form-label form__row-label" translate>Content
                                Type</label>

                            <div class="form__row form__row--inner form__row--flex">
                                <div class="form__row-item form__row-item--no-grow">
                                    <div class="sd-line-input sd-line-input--is-select sd-line-input--no-label sd-line-input--no-margin">
                                        <select class="input-medium sd-line-input__select" ng-model="vocabulary.field_type">
                                            <option value="{{type.id}}" ng-repeat="type in mediaTypes">{{type.label}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form__row-item form__row-item--no-grow">
                                    <div class="form__row">
                                        <sd-check name="field_type"
                                            ng-model="vocabulary.field_options.allowed_types.picture" data-icon="photo">
                                            {{'Image' | translate}}</sd-check>
                                        <sd-check name="field_type"
                                            ng-model="vocabulary.field_options.allowed_types.video" data-icon="video">
                                            {{'Video' | translate}}</sd-check>
                                        <sd-check name="field_type"
                                            ng-model="vocabulary.field_options.allowed_types.audio" data-icon="audio">
                                            {{'Audio' | translate}}</sd-check>
                                    </div>
                                    <div class="form__row"
                                        ng-if="vocabulary.field_type === mediaTypes.RELATED_CONTENT.id">
                                        <sd-check name="field_type"
                                            ng-model="vocabulary.field_options.allowed_types.text" data-icon="text">
                                            {{'Text' | translate}}</sd-check>
                                        <sd-check name="field_type"
                                            ng-model="vocabulary.field_options.allowed_types.preformatted"
                                            data-icon="text">{{'Preformatted' | translate}}</sd-check>
                                        <sd-check name="field_type"
                                            ng-model="vocabulary.field_options.allowed_types.graphic"
                                            data-icon="graphic">{{'Graphic' | translate}}</sd-check>
                                        <sd-check name="field_type"
                                            ng-model="vocabulary.field_options.allowed_types.composite"
                                            data-icon="composite">{{'Package' | translate}}</sd-check>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form__row"
                            ng-show="matchFieldTypeToTab('related-content-fields', vocabulary.field_type)">
                            <div class="form__row-item">
                                <span id="multiple_items" sd-switch
                                    ng-model="vocabulary.field_options.multiple_items.enabled"></span>
                                <label for="multiple_items" translate>Allow Multiple Items</label>
                            </div>
                            <div class="form__row form__row--inner form__row--flex"
                                ng-if="vocabulary.field_options.multiple_items.enabled">
                                <div class="form__row-item form__row-item--no-grow">
                                    <span translate>Max. number of items</span>
                                </div>
                                <div class="form__row-item form__row-item--no-grow">
                                    <input id="max_items" name="max_items" type="number" min="2" max="99"
                                        class="input-small line-input"
                                        ng-model="vocabulary.field_options.multiple_items.max_items"
                                        style="width: 60px; text-align: center;">
                                </div>
                                <div ng-if="vocabularyForm.max_items.$invalid"
                                    class="sd-line-input sd-line-input--invalid">
                                    <p ng-if="vocabularyForm.max_items.$error.min" class="sd-line-input__message"
                                        translate>Value must be greater than or equal to 2.</p>
                                    <p ng-if="vocabularyForm.max_items.$error.max" class="sd-line-input__message"
                                        translate>Value must be less than or equal to 99.</p>
                                </div>
                            </div>
                        </div>

                        <div class="sd-line-input"
                            ng-if="matchFieldTypeToTab('related-content-fields', vocabulary.field_type)">
                            <label class="form-label form__row-label" translate>Filters</label>
                            <div class="sd-line-input__message sd-margin-b--1" translate>Only allow content with the
                                following status:</div>
                            <div class="form__row-item form__row-item--no-grow">
                                <div class="form__row">
                                    <sd-check ng-model="vocabulary.field_options.allowed_workflows.in_progress">
                                        <span translate>In Progress</span>
                                    </sd-check>
                                    <sd-check ng-model="vocabulary.field_options.allowed_workflows.published">
                                        <span translate>Published</span>
                                    </sd-check>
                                </div>
                            </div>
                        </div>

                        <div ng-if="errorMessage" class="sd-line-input sd-line-input--invalid">
                            <p class="sd-line-input__message">{{ errorMessage }}</p>
                        </div>

                        <div class="form__row" ng-if="matchFieldTypeToTab('custom-fields', vocabulary.field_type)">
                            <sd-custom-field-configs vocabulary="vocabulary" on-change="setCustomFieldConfig">
                            </sd-custom-field-configs>
                        </div>
                    </div>
                </ng-form>
            </div>
        </div>

        <div class="modal__footer">
            <div class="button-group button-group--end button-group--comfort" role="group">
                <button
                    id="cancel-edit-btn"
                    type="button"
                    class="btn pull-right"
                    ng-click="cancel()"
                    translate
                    data-test-id="vocabulary-edit-modal--cancel"
                >
                    Cancel
                </button>
                <button
                    id="save-edit-btn"
                    type="submit"
                    class="btn btn--primary"
                    ng-click="save()"
                    ng-disabled="!editForm.$dirty || editForm.$invalid || !itemsValidation.valid || requireAllowedTypesSelection()"
                    translate
                >
                    Save
                </button>
            </div>
        </div>
    </div>
</form>