scripts/apps/vocabularies/views/vocabulary-config-modal.html
<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>