kahuna/public/js/leases/leases.html

<span>
    <span ng-if="ctrl.receivingBatch">Updating...</span>
 </span>
<button ng-class="{'small': ctrl.grSmall}"
        ng-click="ctrl.editing = true"
        ng-if="ctrl.userCanEdit && !ctrl.receivingBatch"
        gr-tooltip="Add lease"
        gr-tooltip-position="left"
        aria-label="Add lease to image">

    <gr-icon data-cy="it-add-lease-icon" ng-show="!ctrl.editing" ng-class="{'spin': ctrl.adding}">add_box</gr-icon>
    <span>
       <span ng-show="ctrl.adding">Updating...</span>
    </span>
</button>
<span ng-if="ctrl.withBatch && !ctrl.leasesUpdatedByTemplate" class="leases__apply-all">
    <button
        title="Apply these leases to all your current uploads"
        ng-if="!ctrl.confirmDelete"
        ng-click="ctrl.batchApplyLeases()"
        aria-label="Apply these leases to all current uploads"
    >⇔</button>

    <button title="Remove ALL leases"
            class="button button--confirm-delete"
            ng-if="ctrl.confirmDelete"
            ng-click="ctrl.batchRemoveLeases()"
            aria-label="Remove all leases">
        <gr-icon>warning</gr-icon>Remove ALL leases in job?
    </button>
</span>


<form class="lease__form full-width"
      ng-show="!ctrl.adding && ctrl.editing"
      ng-submit="ctrl.save()">

  <select ng-model="ctrl.access" ng-required="required">
      <option ng-selected="true" value="">Please select access</option>
      <optgroup label="Usage">
          <option value="allow-use">Allow use</option>
          <option value="deny-use">Deny use</option>
      </optgroup>
      <optgroup label="Syndication">
          <option value="allow-syndication">Allow syndication</option>
          <option value="deny-syndication">Deny syndication</option>
      </optgroup>
  </select>

  <div ng-switch="ctrl.access">
    <div ng-switch-when="deny-syndication">
        <div class="flex-container">
            <label class="full-width">
                <input type="checkbox" ng-model="showCal" />
                Expire
            </label>
        </div>
        <gu-date ng-if="showCal"
                 class="full-width"
                 date="ctrl.newLease.endDate"
                 min-date="ctrl.midnightTomorrow"
                 label="after">
        </gu-date>
    </div>
    <div ng-switch-when="allow-syndication">
        <div class="flex-container">
            <label class="full-width">
                <input type="checkbox" ng-model="showCal" />
                Delay
            </label>
        </div>
        <gu-date ng-if="showCal"
                 class="full-width"
                 date="ctrl.newLease.startDate"
                 min-date="ctrl.midnightTomorrow"
                 label="after">
        </gu-date>

        <div class="flex-container">
            <label class="full-width">
                <input type="checkbox" ng-model="ctrl.noteCallAgencyClause" />
                Call Agency
            </label>
            <label class="full-width">
                <input type="checkbox" ng-model="ctrl.notePremiumClause" />
                Premium
            </label>
        </div>
    </div>
    <div ng-switch-default>
        <gu-date-range-x ng-if="ctrl.access"
                        start="ctrl.newLease.startDate"
                        end="ctrl.newLease.endDate">
        </gu-date-range-x>
    </div>
  </div>

  <input type="text"
         ng-if="ctrl.access"
         ng-model="ctrl.newLease.notes"
         placeholder="Notes..."/>

  <div class="lease__form__buttons">
    <button class="lease__form__buttons__button-cancel button-cancel" type="button" ng-click="ctrl.cancel()" title="Close">
        <gr-icon-label gr-icon="close"><span ng-hide="ctrl.grSmall">Cancel</span></gr-icon-label>
    </button>
    <button
        class="lease__form__buttons__button-save button-save"
        type="submit"
        title="Save new lease"
        ng-disabled="ctrl.adding">
        <gr-icon-label data-cy="it-save-lease" gr-icon="check">
            <span ng-hide="ctrl.grSmall">Save</span>
        </gr-icon-label>
    </button>
  </div>

</form>


<div class="leases__wrapper image-info__wrap" ng-if="!ctrl.receivingBatch">
  <div class="image-info__lease" ng-if="ctrl.totalImages > 1">
    {{ctrl.activeLeases(ctrl.leases)}} current leases + {{ctrl.inactiveLeases(ctrl.leases)}} inactive leases
  </div>

  <ul ng-if="ctrl.totalImages === 1" ng-switch="ctrl.leasesUpdatedByTemplate">
    <li ng-switch-when="true"
        ng-repeat="lease in ctrl.updatedLeases"
        class="lease__item"
        ng-class="{'lease__item-preview' : lease.fromTemplate}">
        <div class="lease__wrapper" ng-class="ctrl.leaseClass(lease)">
            <div class="lease">
                <div class="lease__text">
                    <div>{{ctrl.leaseName(lease)}}</div>
                    <p>{{::ctrl.formatStartTimestamp(lease.startDate)}}</p>
                    <p>{{::ctrl.formatEndTimestamp(lease.endDate)}}</p>
                    <div>{{lease.notes}}</div>
                </div>
            </div>
        </div>
    </li>
    <li ng-switch-default
        ng-repeat="lease in ctrl.leases.leases"
        gr-tooltip="{{ctrl.toolTip(lease)}}"
        class="lease__item"
        gr-tooltip-position="bottom">

        <div class="lease__wrapper" ng-class="ctrl.leaseClass(lease)">
          <div class="lease">
            <div class="lease__text">
              <div>{{ctrl.leaseName(lease)}}</div>
              <p>{{::ctrl.formatStartTimestamp(lease.startDate)}}</p>
              <p>{{::ctrl.formatEndTimestamp(lease.endDate)}}</p>
              <div>{{lease.notes}}</div>
            </div>
            <gr-confirm-delete ng-if="ctrl.userCanEdit" data-cy="it-confirm-delete-lease" class="gr-delete-lease flex-right"
              gr-on-confirm="ctrl.delete(lease)">
            </gr-confirm-delete>

          </div>
      </div>
    </li>
  </ul>
</div>