kahuna/public/js/upload/jobs/required-metadata-editor.html

<form class="job-editor" name="jobEditor" ng-submit="ctrl.save()"
      novalidate ng-class="{'job-editor__disabled': !ctrl.userCanEdit}"
      aria-label="Image metadata">
    <div class="job-editor__ianputs">
        <span ng-if="ctrl.validImageTypes.length > 0">
            <label class="job-info--editor__field">
                <div class="job-info--editor__label job-info--editor__multiline text-small">Image type</div>
                <select
                    name="imageType"
                    ng-model="ctrl.metadata.imageType"
                    ng-model-options="{updateOn: 'default blur', debounce: { default: ctrl.saveOnTime, blur: 0 }}"
                    ng-change="ctrl.save()"
                    ng-class="{ 'job-info--editor__input--with-batch': ctrl.withBatch, 'job-info--editor__input-preview': ctrl.originalMetadata['imageType'] !== ctrl.metadata['imageType'] }"
                    ng-disabled="!ctrl.userCanEdit"
                    ng-readonly="ctrl.metadataUpdatedByTemplate.length > 0"
                    ng-options="type for type in ctrl.validImageTypes"
                >
                    <option value="">-- choose type --</option>
                </select>

                <button
                    class="job-editor__apply-to-all"
                    title="Apply this image type to all your current uploads"
                    type="button"
                    ng-if="ctrl.withBatch && ctrl.userCanEdit && (ctrl.originalMetadata['imageType'] === ctrl.metadata['imageType'])"
                    ng-click="ctrl.batchApplyMetadata('imageType')"
                >⇔</button>
            </label>
        </span>

        <label class="job-info--editor__field">
            <div class="job-info--editor__label job-info--editor__multiline text-small">Description</div>
            <textarea
                name="description"
                placeholder="eg {{funnyDescription}}…"
                required
                class="text-input job-info--editor__input job-info--editor__input--description"
                msd-elastic
                ng-model="ctrl.metadata.description"
                ng-controller="DescriptionPlaceholderCtrl"
                ng-change="ctrl.save()"
                ng-model-options="{updateOn: 'default blur', debounce: { default: ctrl.saveOnTime, blur: 0 }}"
                ng-class="{ 'job-info--editor__input--with-batch': ctrl.withBatch, 'job-info--editor__input-preview': ctrl.originalMetadata['description'] !== ctrl.metadata['description'] }"
                ng-disabled="!ctrl.userCanEdit"
                ng-readonly="ctrl.metadataUpdatedByTemplate.length > 0"
            ></textarea>

            <button
                class="job-editor__apply-to-all"
                title="Apply this description to all your current uploads"
                type="button"
                ng-if="ctrl.withBatch && ctrl.userCanEdit && (ctrl.originalMetadata['description'] === ctrl.metadata['description'])"
                ng-click="ctrl.batchApplyMetadata('description')"
            >⇔</button>
        </label>

        <gr-description-warning description="ctrl.metadata.description"></gr-description-warning>

        <label class="job-info--editor__field flex-center">
            <!-- TODO: autocomplete on byline when API responds correctly with results -->
            <div class="job-info--editor__label text-small text-small">Byline</div>
            <input
                type="text"
                name="byline"
                placeholder="eg Tom Jenkins (author’s name ONLY, leave empty if unknown)"
                class="text-input job-info--editor__input job-info--editor__input--byline"
                ng-model="ctrl.metadata.byline"
                ng-change="ctrl.save()"
                ng-model-options="{updateOn: 'default blur', debounce: { default: ctrl.saveOnTime, blur: 0 }}"
                ng-class="{ 'job-info--editor__input--with-batch': ctrl.withBatch, 'job-info--editor__input-preview': ctrl.metadataUpdatedByTemplate.includes('byline')  }"
                ng-disabled="!ctrl.userCanEdit"
                ng-readonly="ctrl.metadataUpdatedByTemplate.length > 0"
            />

            <button
                class="job-editor__apply-to-all"
                title="Apply this byline to all your current uploads"
                type="button"
                ng-if="ctrl.withBatch && ctrl.userCanEdit && !ctrl.metadataUpdatedByTemplate.includes('byline')"
                ng-click="ctrl.batchApplyMetadata('byline')"
            >⇔</button>

        </label>
        <div class="job-info--editor__field flex-center">
            <div class="job-info--editor__label text-small">Credit</div>

            <gr-datalist
                class="job-info--editor__input"
                gr-search="ctrl.metadataSearch('credit', q)">

                <input
                    data-cy="image-metadata-credit"
                    type="text"
                    placeholder="eg {{ctrl.institution}} (source, agency or institution which owns the image)"
                    class="text-input job-info__credit"
                    required
                    gr-datalist-input
                    ng-model="ctrl.metadata.credit"
                    ng-change="ctrl.save()"
                    ng-class="{ 'job-info--editor__input-preview': ctrl.metadataUpdatedByTemplate.includes('credit')  }"
                    ng-disabled="!ctrl.userCanEdit"
                    ng-readonly="ctrl.metadataUpdatedByTemplate.length > 0"
                    ng-model-options="{ updateOn: 'gr-datalist:update blur' }" />
            </gr-datalist>

            <button
                class="job-editor__apply-to-all"
                title="Apply this credit to all"
                type="button"
                ng-if="ctrl.withBatch && ctrl.userCanEdit && !ctrl.metadataUpdatedByTemplate.includes('credit')"
                ng-click="ctrl.batchApplyMetadata('credit')"
            >⇔</button>
        </div>
        <label ng-if="ctrl.copyrightWasInitiallyThere" class="job-info--editor__field flex-center">
            <div class="job-info--editor__label text-small">Copyright</div>
            <input
                type="text"
                name="copyright"
                class="text-input job-info--editor__input job-info--editor__input--copyright"
                ng-model="ctrl.metadata.copyright"
                ng-change="ctrl.save()"
                ng-model-options="{updateOn: 'default blur', debounce: { default: ctrl.saveOnTime, blur: 0 }}"
                ng-class="{ 'job-info--editor__input--with-batch': ctrl.withBatch, 'job-info--editor__input-preview': ctrl.metadataUpdatedByTemplate.includes('copyright') }"
                ng-disabled="!ctrl.userCanEdit"
                ng-readonly="ctrl.metadataUpdatedByTemplate.length > 0"
            />

            <button
                class="job-editor__apply-to-all"
                title="Apply this copyright to all your current uploads"
                type="button"
                ng-if="ctrl.withBatch && ctrl.userCanEdit && !ctrl.metadataUpdatedByTemplate.includes('copyright')"
                ng-click="ctrl.batchApplyMetadata('copyright')"
            >⇔</button>
        </label>

        <label class="job-info--editor__field">
            <div class="job-info--editor__label job-info--editor__multiline text-small">Special Instructions</div>

            <div ng-if="!!ctrl.metadata.usageInstructions" style="flex:1;">
                <div class="text-small job-usage-instructions">{{ctrl.metadata.usageInstructions}}</div>
                <div class="text-small job-additional-special-instructions">Add further instructions</div>
                <div class="job-info--editor__field flex-center">
                    <input
                        type="text"
                        name="special-instructions"
                        class="text-input job-info--editor__input"
                        ng-model="ctrl.metadata.specialInstructions"
                        ng-change="ctrl.save()"
                        ng-model-options="{updateOn: 'default blur', debounce: { default: ctrl.saveOnTime, blur: 0 }}"
                        ng-class="{ 'job-info--editor__input--with-batch': ctrl.withBatch, 'job-info--editor__input-preview': ctrl.metadataUpdatedByTemplate.includes('specialInstructions') }"
                        ng-disabled="!ctrl.userCanEdit"
                        ng-readonly="ctrl.metadataUpdatedByTemplate.length > 0"
                    />
                    <button
                        class="job-editor__apply-to-all"
                        title="Apply these instructions to all your current uploads"
                        type="button"
                        ng-if="ctrl.withBatch && ctrl.userCanEdit && !ctrl.metadataUpdatedByTemplate.includes('specialInstructions')"
                        ng-click="ctrl.batchApplyMetadata('specialInstructions')"
                    >⇔</button>
                </div>
            </div>

            <input
                type="text"
                name="special-instructions"
                class="text-input job-info--editor__input"
                ng-model="ctrl.metadata.specialInstructions"
                ng-change="ctrl.save()"
                ng-model-options="{updateOn: 'default blur', debounce: { default: ctrl.saveOnTime, blur: 0 }}"
                ng-class="{ 'job-info--editor__input--with-batch': ctrl.withBatch, 'job-info--editor__input-preview': ctrl.metadataUpdatedByTemplate.includes('specialInstructions') }"
                ng-disabled="!ctrl.userCanEdit"
                ng-if="!!!ctrl.metadata.usageInstructions"
                ng-readonly="ctrl.metadataUpdatedByTemplate.length > 0"
            />

            <button
                class="job-editor__apply-to-all"
                title="Apply these instructions to all your current uploads"
                type="button"
                ng-if="!!!ctrl.metadata.usageInstructions && ctrl.withBatch && ctrl.userCanEdit && !ctrl.metadataUpdatedByTemplate.includes('specialInstructions')"
                ng-click="ctrl.batchApplyMetadata('specialInstructions')"
            >⇔</button>
        </label>

    </div>
    <!-- Angular doesn't submit a form without a submit element, bonza!
    see: https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action -->
    <input type="submit" class="ng-hide" />
</form>