kahuna/public/js/edits/image-editor.html

<!-- TODO: results editor is a shit name -->
<div class="result-editor">

    <div class="result-editor__result">

        <!-- only give the image link if the image is valid -->
        <div ng-switch="ctrl.status === 'ready'" class="image-actions-container">
            <a class="result-editor__img-link"
               ng-switch-when="true"
               ui-sref="image({imageId: ctrl.image.data.id})"
               ui-drag-data="ctrl.image | asImageDragData"
               aria-label="View image">

                <img class="result-editor__img"
                     alt="original image thumbnail"
                     ng-src="{{:: ctrl.image.data.thumbnail | assetFile}}"
                     gr-image-fade-on-load
                 />
            </a>

            <img class="result-editor__img"
                 alt="original image thumbnail"
                 ng-switch-default
                 ng-src="{{:: ctrl.image.data.thumbnail | assetFile}}"
                 gr-image-fade-on-load
             />

            <ul class="image-actions"
                ng-if="ctrl.image.data.valid">
                <li>
                    <a class="image-action image-action--first"
                       rel="noopener"
                       target="_blank"
                       title="Pop out"
                       ng-href="/images/{{:: ctrl.image.data.id}}"
                       role="link"
                       aria-label="View image">
                        <gr-icon>open_in_new</gr-icon>
                    </a>
                </li>

                <li>
                    <a class="image-action"
                       title="crop"
                       ui-sref="crop({ imageId: ctrl.image.data.id })"
                       role="link"
                       aria-label="Go to image crop">
                        <gr-icon>crop</gr-icon>
                    </a>
                </li>
            </ul>
        </div>

        <div class="result-editor__info">
            <div class="result-editor__info-item result-editor__info-item--first"
                 ng-switch="ctrl.image.data.usageRights.usageRestrictions ? 'conditional' : ctrl.image.data.cost">
                <span class="result-editor__status status status--invalid"
                      ng-switch-when="pay">Pay to use</span>

                <span class="result-editor__status status status--invalid"
                      ng-switch-when="overquota">Quota exceeded for this supplier</span>

                <span class="result-editor__status status status--valid"
                      ng-switch-when="free">Free to use</span>

                <span class="result-editor__status status"
                      ng-switch-when="conditional">Restricted use</span>
            </div>

            <div class="result-editor__info-item"
                 ng-switch="ctrl.status">
                <a ng-if="ctrl.isDeleted" class="result-editor__status status status--valid"
                   ui-sref="image({imageId: ctrl.image.data.id})" aria-label="View image">View image ▸</a>

                <a ng-if="!ctrl.isDeleted" class="result-editor__status status status--valid"
                   ng-switch-when="ready"
                   ui-sref="image({imageId: ctrl.image.data.id})" aria-label="View image">View image ▸</a>

                <a ng-if="!ctrl.isDeleted" class="result-editor__status status status--invalid"
                   ng-switch-when="invalid"
                   ui-sref="image({imageId: ctrl.image.data.id})" aria-label="View image">
                        Unusable
                   <gr-icon title="This image cannot be used in content, a lease is required.">help</gr-icon>
                </a>
            </div>
            <a ng-if="ctrl.canUndelete && ctrl.isDeleted"
               type="button"
               class="gr-archiver-status__button inner-clickable  gr-archiver-status--archived"
               title="Undelete"
               ng-click="ctrl.undelete()">
                <gr-library-add-icon class="gr-archiver-status__icon"></gr-library-add-icon>
            </a>


            <gr-archiver-status ng-if="!ctrl.isDeleted" class="result-editor__archiver"
                                image="ctrl.image"
                                isDeleted="ctrl.isDeleted">
            </gr-archiver-status>
        </div>

        <div ng-if="ctrl.isDeleted" class="job-status status deleted_image_warning"
             ng-class="{
                         'status--invalid': !ctrl.canUndelete
                     }">
            <span ng-if="ctrl.canUndelete && ctrl.isDeleted">Image deleted (this image already exists and has been deleted. Click Undelete to recover it)</span>
            <span ng-if="!ctrl.canUndelete">Image deleted (this image already exists and has been deleted. Click View image to see details)</span>
        </div>

        <div class="image-actions-container" ng-if="ctrl.displayMetadataTemplates">
            <div class="result-editor__usage-rights-container">
                <gr-metadata-templates
                   image="ctrl.image"
                   metadata="ctrl.image.data.metadata"
                   usage-rights="ctrl.image.data.usageRights"
                   gr-on-metadata-template-selected="ctrl.onMetadataTemplateSelected(metadata, usageRights, collection, leasesWithConfig)"
                   gr-on-metadata-template-applying="ctrl.onMetadataTemplateApplying(leases)"
                   gr-on-metadata-template-applied="ctrl.onMetadataTemplateApplied()"
                   gr-on-metadata-template-cancelled="ctrl.onMetadataTemplateCancelled(metadata, usageRights)"
                   class="metadata-templates-flex">
                </gr-metadata-templates>
            </div>
        </div>

        <span class="result-editor__save-status-container">
            <span class="result-editor__save-status"
                  ng-show="ctrl.saving">Saving… <span class="saving">⧖</span>
            </span>
            <span class="result-editor__save-status"
                  ng-show="ctrl.saved">Saved</span>

            <span class="result-editor__save-status result-editor__save-status--error"
                  ng-show="ctrl.error">Something went wrong… try again?</span>
        </span>
    </div>

    <div class="result-editor__editor">

        <section aria-label="Image usage rights">
            <h1 class="results-editor__top-heading">Image Rights</h1>
            <div class="result-editor__field-container image-info__wrap">
                <span class="result-editor__field-label flex-no-shrink text-small">
                    Rights &amp; restrictions
                </span>

                <div class="result-editor__usage-rights-container">
                    <div ng-hide="ctrl.showUsageRights" class="result-editor__field-value">
                        <span>{{ctrl.usageRightsCategory || 'None'}}</span>
                        <button
                          data-cy="edit-rights-button"
                          class="image-info__edit"
                          ng-click="ctrl.showUsageRights = !ctrl.showUsageRights">
                            <gr-icon>edit</gr-icon>
                        </button>
                        <button
                            class="job-editor__apply-to-all"
                            title="Apply these rights &amp; restrictions to all your current uploads"
                            type="button"
                            ng-if="ctrl.withBatch"
                            ng-click="ctrl.batchApplyUsageRights()"
                            >⇔</button>
                    </div>

                    <gr-usage-rights-editor
                        ng-if="ctrl.showUsageRights"
                        class="result-editor__usage-rights"
                        gr-usage-rights="[ctrl.usageRights]"
                        gr-on-save="ctrl.showUsageRights = false"
                        gr-on-cancel="ctrl.showUsageRights = false"
                        gr-usage-rights-updated-by-template="ctrl.usageRightsUpdatedByTemplate">
                    </gr-usage-rights-editor>
                </div>
            </div>

            <div class="result-editor__field-container flex-container">
                <span class="result-editor__field-label flex-no-shrink text-small">
                    Leases
                </span>
                <div class="result-editor__field-container__leases flex-spacer">
                    <gr-leases gr-images="[ctrl.image]"
                        gr-leases-updated-by-template="ctrl.leasesUpdatedByTemplate"
                        gr-leases-updating-by-template="ctrl.leasesUpdatingByTemplate"
                        gr-updated-leases="ctrl.updatedLeases"
                        with-batch="ctrl.withBatch"
                        class="leases-flex"
                        gr-user-can-edit="true">
                    </gr-leases>
                </div>
            </div>
        </section>

        <section aria-label="Image metadata">
            <span class="edit_metadata__warning" ng-if="!ctrl.userCanEdit">WARNING: This image is already in {{ctrl.systemName}}. Since you're not the original uploader, you are not allowed to edit its metadata.</span>
            <h1 ng-class="{'section__disabled': !ctrl.userCanEdit}" class="results-editor__heading">Image Metadata</h1>
            <ui-required-metadata-editor
                class="result-editor__metadata-editor"
                resource="ctrl.image.data.userMetadata.data.metadata"
                metadata="ctrl.image.data.metadata"
                save-when-changed-from="ctrl.image.data.originalMetadata || ctrl.image.data.metadata"
                image="ctrl.image"
                with-batch="ctrl.withBatch"
            ></ui-required-metadata-editor>
        </section>

        <section aria-label="Organisation and grouping">
            <h1 class="results-editor__heading">Organisation and Grouping</h1>
            <div class="result-editor__field-container flex-container flex-center">
                <span class="result-editor__field-label  flex-no-shrink text-small">
                    Collections
                </span>
               <gr-collection-overlay
                   image="ctrl.image"
                   gr-collection-updated-by-template="ctrl.collectionUpdatedByTemplate"
               ></gr-collection-overlay>
               <span class="preview__collections__collection__apply-all" ng-if="ctrl.withBatch">
                    <button ng-if="! ctrl.confirmDelete && !ctrl.collectionUpdatedByTemplate"
                            title="Apply these collections to all your current uploads"
                            ng-click="ctrl.batchApplyCollections()"
                    >⇔</button>
                    <button title="Remove ALL collections"
                            class="button button--confirm-delete"
                            ng-if="ctrl.confirmDelete && !ctrl.collectionUpdatedByTemplate"
                            ng-click="ctrl.batchRemoveCollections()">
                        <gr-icon>warning</gr-icon>Remove ALL collections in job?
                    </button>
                </span>
                <div class="result-editor__field-container__collections" ng-switch="ctrl.collectionUpdatedByTemplate">
                    <ul class="preview__collections" ng-switch-when="true">
                        <li class="preview__collections__collection"
                            ng-repeat="collection in ctrl.updatedCollections">
                            <a class="preview__collections__collection__value"
                               ng-class="{'result-editor__field-container__collections-preview' : collection.fromTemplate}">
                                {{collection.description}}
                            </a>
                        </li>
                    </ul>
                    <ul class="preview__collections" ng-switch-default>
                        <li class="preview__collections__collection"
                            ng-repeat="collection in ctrl.image.data.collections track by collection.data.pathId">
                            <a gr-tooltip="Click to open collection: {{::collection.data.path.join(' ▸ ')}}"
                               gr-tooltip-position="top"
                               ui-sref="search.results({query: (collection.data.pathId | queryCollectionFilter), nonFree: ctrl.srefNonfree()})"
                               ng-attr-style="{{::ctrl.getCollectionStyle(collection)}}"
                               class="preview__collections__collection__value">
                                {{::collection.data.description}}
                            </a>
                            <button gr-tooltip="Click to remove image from this collection"
                                    gr-tooltip-position="top"
                                    class="preview__collections__collection__remove"
                                    ng-attr-style="{{::ctrl.getCollectionStyle(collection)}}"
                                    ng-click="ctrl.removeImageFromCollection(collection)">
                                <gr-icon>close</gr-icon>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="result-editor__field-container flex-container flex-center">
                <span class="result-editor__field-label  flex-no-shrink text-small">
                    Labels
                </span>
                <div class="result-editor__field-container__labels" ng-class="{'result-editor__field-container__labels--hidden' : ctrl.inputtingLabel}">
                    <gr-add-label
                        images="[ctrl.image]"
                        active="ctrl.inputtingLabel"
                        class="result-editor__field-container__add-button">
                    </gr-add-label>
                    <ui-list-editor-upload
                        images="ctrl.imageAsArray"
                        with-batch="ctrl.withBatch"
                        add-to-images="ctrl.addLabelToImages"
                        remove-from-images="ctrl.removeLabelFromImages"
                        remove-as-array="false"
                        accessor="ctrl.labelAccessor"
                        query-filter="queryLabelFilter"
                        element-name="label"
                        element-name-plural="labels">
                    </ui-list-editor-upload>
                </div>
            </div>

            <div class="result-editor__field-container flex-container flex-center">
                <span class="result-editor__field-label  flex-no-shrink text-small">
                    Keywords
                </span>
                <div class="result-editor__field-container__labels" ng-class="{'result-editor__field-container__labels--hidden' : ctrl.inputtingKeyword}">
                    <gr-add-keyword
                        images="[ctrl.image]"
                        active="ctrl.inputtingKeyword"
                        class="result-editor__field-container__add-button">
                    </gr-add-keyword>
                    <dd class="image-info__pills">
                        <ui-list-editor-upload
                            images="ctrl.imageAsArray"
                            with-batch="ctrl.withBatch"
                            add-to-images="ctrl.addKeywordToImages"
                            remove-from-images="ctrl.removeKeywordFromImages"
                            remove-as-array="true"
                            accessor="ctrl.keywordAccessor"
                            query-filter="queryFilter:'keyword'"
                            element-name="keyword"
                            element-name-plural="keywords">
                        </ui-list-editor-upload>
                    </dd>
                </div>
            </div>

            <div class="result-editor__field-container flex-container flex-center">
                <span class="result-editor__field-label flex-no-shrink text-small">
                    Photoshoot
                </span>
                <gr-photoshoot class="flex-spacer"
                          images="[ctrl.image]"
                          with-batch="ctrl.withBatch"
                          edit-inline="true">
                </gr-photoshoot>
            </div>
        </section>

        <section aria-label="File information">
            <h1 class="results-editor__heading">File information</h1>
            <div class="result-editor__field-container" ng-if=":: ctrl.image.data.uploadInfo.filename">
                <div class="result-editor__field-label text-small">File name</div>
                <div class="result-editor__field-value">{{:: ctrl.image.data.uploadInfo.filename}}</div>
            </div>
            <div class="result-editor__field-container">
                <div class="result-editor__field-label text-small">File type</div>
                <div class="result-editor__field-value">{{ctrl.image.data.source.mimeType}}</div>
            </div>
        </section>
        <section>
            <button ng-if="ctrl.canUndelete"
                    type="button"
                    class="clickable side-padded batch-archive__button undelete_button"
                    ng-click="ctrl.undelete()">
                <gr-library-add-icon class="batch-archive__icon"></gr-library-add-icon>
                <span>Undelete</span>
            </button>
        </section>
    </div>
</div>