superdesk/superdesk-client-core

View on GitHub
scripts/apps/templates/views/template-editor-modal.html

Summary

Maintainability
Test Coverage
<div sd-modal data-model="template" data-close="cancel()" class="modal--fill template-editor-modal" data-test-id="'template-edit-view'">
    <div class="modal__header modal__header--flex">
        <h3 class="modal__heading" ng-show="template._id">{{ :: 'Edit Template'}}: <span>{{ origTemplate.template_name}}</span></h3>
        <h3 class="modal__heading" ng-hide="template._id" translate>Add New Template</h3>
        <a href="" class="icn-btn close-modal" ng-click="cancel()"><i class="icon-close-small"></i></a>
    </div>

    <div class="modal__body sd-padding--0 ">
        <div class="template-container">
            <form class="template-container__content template-content" name="templateForm">
                <div class="template-icon">
                    <i class="icon-text"></i>
                </div>

                <div class="template-header">
                    <div class="form__row form__row--s-padding">
                        <div sd-validation-error="error.template_name"
                            data-required="true"
                            class="sd-line-input sd-line-input--no-label sd-line-input--boxed sd-line-input--no-margin"
                            ng-class="{'sd-line-input--invalid': templateForm.name.$error.maxlength}">
                           <input type="text" id="template-name" class="sd-line-input__input" name="name" ng-model="template.template_name" placeholder="{{ :: 'Template name' | translate }}" required data-field="template_name" ng-disabled="template.template_name && template.template_type === 'kill'" ng-maxlength="40">
                           <div class="sd-line-input__message" ng-show="templateForm.name.$error.maxlength" translate>Please use less than 40 characters</div>
                       </div>
                    </div>

                    <div class="form__row form__row--flex form__row--s-padding">
                        <div class="sd-line-input sd-line-input--label-left" ng-if="template.template_type !== 'kill' && !content_types.length">
                            <label class="sd-line-input__label" for="template-profile" translate>Content Profile</label>
                            <input type="text" class="sd-line-input__input" id="template-profile" ng-model="item.profile">
                        </div>

                        <div
                            sd-validation-error="error.profile"
                            data-required="true"
                            class="sd-line-input sd-line-input--label-left sd-line-input--is-select"
                            ng-if="template.template_type !== 'kill' && content_types.length"
                        >
                            <label class="sd-line-input__label" for="template-profile" translate>Content Profile</label>
                            <select required id="template-profile" class="sd-line-input__select" ng-model="item.profile" ng-options="type._id as type.label for type in content_types | orderBy: 'label'">
                                <option value=""></option>
                            </select>
                        </div>

                        <div sd-validation-error="error.template_type" data-required="true"
                                class="sd-line-input sd-line-input--label-left sd-line-input--is-select">
                            <label class="sd-line-input__label" for="template-type" translate>Template Type</label>
                            <select id="template-type"
                                    class="sd-line-input__select"
                                    ng-model="template.template_type"
                                    ng-change="resetDesks()"
                                    ng-options="type._id as type.label | translate for type in types| filter:templatesFilter"
                                    required>
                            </select>
                        </div>
                    </div>

                    <div ng-if="privileges.content_templates" class="form__row form__row--no-padding">
                        <span sd-switch ng-model="template.is_public"></span>
                        <label for="template-is-private" translate>Make Public</label>
                    </div>
                </div>

                <div style="height: 100%;" ng-if="authoringReactViewEnabled && item != null && item.profile != null">
                    <sd-edit-template style="height: 100%;" data-scope-apply="setDirtyFromReact" data-template="template"></sd-edit-template>
                </div>

                <div class="template-editor" ng-if="authoringReactViewEnabled === false">
                    <header sd-authoring-header></header>
                    <div class="main-article">
                        <div class="fieldset" sd-article-edit></div>
                    </div>
                </div>
            </form>
            <form class="template-container__metadata" name="metadataForm">
                <div class="template-metadata">
                    <div ng-if="showDesks()">

                        <div for="template-desk" ng-if="template.template_type !== 'create'">
                            <div class="sd-line-input sd-line-input--is-select">
                                <label class="sd-line-input__label" translate>Desk</label>
                                <select id="template-desk" ng-if="template.template_type !== 'create'"
                                    ng-model="template_desk" ng-change="setTemplateDesks(template_desk)"
                                    class="sd-line-input__select">
                                    <option value="" translate>None</option>
                                    <option ng-repeat="desk in desks._items track by desk._id" value="{{ desk._id }}"
                                    ng-selected="desk.selected">{{ :: desk.name }}</option>
                                </select>
                            </div>
                        </div>

                        <div for="template-desks" ng-if="template.template_type === 'create'" sd-toggle-box data-title="{{:: 'Desks' | translate }}" data-open="true" data-style="circle" data-test-id="desks">
                            <div class="multi-select" ng-if="template.template_type === 'create'">
                                <ul class="sd-check__group sd-check__group--grid">
                                    <li ng-repeat="desk in desks._items track by desk._id">
                                        <sd-check ng-model="desk.selected" ng-click="onDeskToggle(desk)" label-position="inside" data-test-id="desk--{{desk.name}}">{{desk.name}}</sd-check>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div sd-toggle-box data-title="{{:: 'Metadata' | translate }}" data-open="false" id="template-editor-metadata" data-style="circle">
                        <div class="form__row form__row--s-padding">
                            <span sd-switch ng-model="item.flags.marked_for_not_publication"></span><label translate>Not For Publication</label>
                        </div>

                        <div class="form__row form__row--l-padding">
                            <span sd-switch ng-model="item.flags.marked_for_legal"></span><label translate>Legal</label>
                        </div>

                        <div class="form__row form__row--s-padding">
                            <div class="sd-line-input">
                                <label class="sd-line-input__label" translate>Usage terms</label>
                                <input class="sd-line-input__input" type="text" ng-model="item.usageterms" ng-disabled="!_editable" ng-change="autosave(item)">
                            </div>
                        </div>
                        <div class="form__row form__row--s-padding">
                            <div class="sd-line-input">
                                <label class="sd-line-input__label" translate>Language</label>
                                <input class="sd-line-input__input" type="text" ng-if="!metadata.languages" ng-model="item.language" ng-disabled="!_editable" ng-change="autosave(item)">
                                <div sd-meta-dropdown
                                    ng-if="metadata.languages"
                                    class="data"
                                    data-item="item"
                                    data-field="language"
                                    data-key="qcode"
                                    data-list="metadata.languages"
                                    ng-disabled="!_editable"
                                    data-change="autosave(item)">
                                </div>
                            </div>
                        </div>

                        <div class="form__row">
                            <label class="form-label" translate>Target Subscribers</label>
                            <sd-target-subscribers on-change="onChangeData" value="template.data"></sd-target-subscribers>
                        </div>
                    </div>

                    <div class="" ng-if="showScheduling()">
                        <div class="toggle-box">
                            <div class="toggle-box__header">
                                <span class="toggle-box__chevron" sd-switch ng-model="template.schedule.is_active"></span>
                                <div class="toggle-box__label" translate>Automatically create item</div>
                                <div class="toggle-box__line"></div>
                            </div>
                        </div>
                        <div>
                            <div class="sd-line-input sd-line-input--required"
                                    ng-if="template.schedule.is_active && template.template_type !== 'kill'">
                                <label class="sd-line-input__label" translate>On</label>
                                <div class="day-filter-box clearfix sd-line-input__select" sd-weekday-picker data-model="template.schedule.day_of_week"></div>
                            </div>
                            <div ng-if="template.schedule.is_active && template.template_type !== 'kill'">
                                <div class="form__row form__row--flex form__row--padding-s sd-line-input form__row--no-padding sd-margin-b--1-5">
                                    <label class="sd-line-input__label sd-line-input__label--required" translate>Scheduled at</label>
                                    <span sd-timepicker ng-model="new_time.picked" data-style="line-input"></span>
                                    <button id="add_time" class="btn pull-right" ng-click="addCronTime()"
                                    translate>Add</button>

                                </div>
                                <div class="terms-list sd-margin-b--3">
                                    <ul>
                                        <li ng-repeat="time in cron_times" class="pull-left" ng-click="removeCronTime(time)">{{time}}<i role="button" aria-label="{{'Remove item'| translate }}" class="icon-close-small"></i></li>
                                    </ul>
                                </div>
                                <div class="form__row">
                                    <span sd-timezone data-timezone="template.schedule.time_zone"></span>
                                </div>
                            </div>
                        </div>

                        <div class="form__row" ng-if="showScheduling() && template.schedule.is_active">
                            <div class="sd-line-input sd-line-input--is-select sd-line-input--required">
                                <label for="schedule-desk" class="sd-line-input__label" translate>Schedule Desk</label>
                                <select id="schedule-desk" ng-model="template.schedule_desk"
                                        ng-change="updateStages(template.schedule_desk)" class="sd-line-input__select">
                                    <option value="" translate>None</option>
                                    <option ng-repeat="desk in desks._items track by desk._id" value="{{ desk._id }}"
                                        ng-selected="desk._id === template.schedule_desk">{{ :: desk.name }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form__row" ng-if="showStages() && template.schedule.is_active">
                            <div class="sd-line-input sd-line-input--is-select sd-line-input--required">
                                <label for="template-stage" class="sd-line-input__label" translate>Schedule Stage</label>
                                <select id="template-stage" ng-model="template.schedule_stage" class="sd-line-input__select">
                                    <option ng-repeat="stage in stages track by stage._id" value="{{ stage._id }}"
                                        ng-selected="stage._id === template.schedule_stage">{{ :: stage.name }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form__row" ng-if="macros != null">
                            <div class="sd-line-input sd-line-input--is-select">
                                <label for="template-macro" class="sd-line-input__label" translate>Schedule Macro</label>
                                <select id="template-macro" ng-model="template.schedule_macro" class="sd-line-input__select">
                                    <option
                                        ng-value="null"
                                        ng-selected="template.schedule_macro == null"
                                    ></option>

                                    <option
                                        ng-repeat="macro in macros track by macro.name"
                                        value="{{macro.name}}"
                                        ng-selected="macro.name === template.schedule_macro"
                                    >
                                        {{:: macro.name}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>

    <div class="modal__footer">
        <button class="btn" ng-click="cancel()" translate>Cancel</button>
        <button class="btn btn--primary"
            ng-click="save()"
            ng-disabled="templateForm.$invalid || !isScheduleValid() || !isDirty(templateForm, metadataForm)"
            translate
            data-test-id="save"
        >
            Save
        </button>
    </div>

</div>