If a record is locked, I can see that in the publications and datasets overview

[mietcls]

Story

If a record is locked, I can see that in the publications and datasets overview.

Success criteria

• [x] The moment a librarian locks a record, I can see it in the overview
• [x] Whenever I hover over the lock, I can see a tooltip that explains what the lock means

Implementation

Intended design

Adapted design for current Biblio

Component

https://biblio-ugent-prototype-emily-v2.vercel.app/styleguide/b-tooltip.html

Note: Be sure to instantiate the tooltips yourself when using Bootstrap, this is not done automatically: $('[data-toggle="tooltip"]').tooltip();

Example code

Code from prototype

To view what the code could look like consistently in the Eliot environment scroll further

<div class="bc-toolbar-item my-2">
  <span class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Locked for editing">
    <i class="if if-lock if--small if--muted"></i>
  </span>
</div>

Code adapted from current implementation

<div class="list-group-item-meta-item">
  <span class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Locked for editing">
    <i class="if if-lock if--small if--muted"></I>
  </span>
</div>

Placement example

Note that these classes are taken from the eliot1 environment and that the prototype uses different classes and structures.

This is only the part next to the thumbnail.

<div class="c-thumbnail-text u-min-w-0">
  <div class="list-group-item-subline">
    <div class="list-group-item-subline-left">
      <span class="mr-3 pr-3 border-right">Book chapter: B2</span>
      <div class="d-flex align-items-center">
        <i class="if if-ghent-university if--small if--primary"></i>
        <span class="pl-2 text-muted">UGent Access</span>
      </div>
    </div>
    <div class="list-group-item-subline-right">
      <div class="dropdown">
        <button class="btn btn-link btn-icon-only btn-link-muted" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="if if-more"></i>
        </button>
        <div class="dropdown-menu" tabindex="0" x-placement="bottom" style="position: absolute; transform: translate3d(-60px, 36px, 0px); top: 0px; left: 0px; will-change: transform;">
          <a class="dropdown-item" href="/biblio-backend/publication/992109?redirect-url=%2Fbiblio-backend%2Fcuration%2Fpublication">
            <i class="if if-file-text"></i>
            <span>View details</span>
          </a>
          <button class="dropdown-item" hx-get="/biblio-backend/publication/992109/confirm-delete?redirect-url=%2Fbiblio-backend%2Fcuration%2Fpublication" hx-target="#modals">
            <i class="if if-delete"></i>
            <span>Delete</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <h4 class="c-h4">Le casier judiciaire belge: source d'informations des autorités publiques et instrument de contrôle social?</h4>
  <div class="c-author-list">   
    <div class="c-author">
      <i class="if if-ghent-university" data-toggle="tooltip" data-placement="bottom" data-original-title="UGent author"></i>
      <span>Lionel Petton</span>
    </div>
    <div class="c-author">
      <i class="if if-orcid" data-toggle="tooltip" data-placement="bottom" data-original-title="Author with ORCID"></i>
      <i class="if if-ghent-university" data-toggle="tooltip" data-placement="bottom" data-original-title="UGent author"></i>
      <span>Filip Du Prez</span>
    </div>
    <div class="c-author">
      <a href="link-to-contributors-overview">4 more authors</a>
    </div>
  </div>
  <span class="c-body-small text-muted">2011, Le casier judiciaire : approches critiques et perspectives comparées</span>
  <div class="list-group-item-meta mt-5">
    <div class="list-group-item-meta-right">
      <div class="list-group-item-meta-item">
        <span class="text-muted c-body-small">Biblio ID: 992109</span>
      </div>
      <div class="list-group-item-meta-item">
        <span class="text-muted c-body-small">Created 13 years ago</span>
      </div>
    </div>
    <div class="list-group-item-meta-left">
      <div class="list-group-item-meta-item">
        <span class="badge badge-pill badge-success">
          <span class="badge-text">Biblio Validated</span>
        </span>
      </div>
      <div class="list-group-item-meta-item">
        <span class="c-meta-item" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="Locked for editing">
          <i class="if if-lock if--small if--muted"></i>
        </span>
      </div>
    </div>
  </div>
</div>

[nics]

ok