Make adding librarian tags work smoother

[mietcls]

Story

As a librarian, I can add librarian tags, visible only to other librarians so I can communicate with them efficiently about those records via filters.

Full story on epic https://github.com/ugent-library/biblio-backend/issues/511 Original, simplified story on https://github.com/ugent-library/biblio-backend/issues/510 Related: simplifying keywords: https://github.com/ugent-library/biblio-backend/issues/270

Success criteria

• [ ] As a librarian I can add librarian tags to a specific record
• [ ] As a librarian I can see the librarian tags added to a specific record added by my colleagues
• [ ] As a librarian I can remove librarian tags from a specific record, whether they are added by myself or a colleague
• [ ] I can filter immediately on the created librarian tags in the publication and dataset overview

Implementation

Design

Overview

Available in the "Biblio activity" tab

Adding and removing a tag

• Tags are separated by typing and adding a comma (,) in between tags
• Tags are removed by clicking the "X"

Implementation

Modal

https://biblio-ugent-prototype-emily-v2.vercel.app/styleguide/b-modals.html#component-03-modal-large

Mulitiple select

https://biblio-ugent-prototype-emily-v2.vercel.app/styleguide/b-inputs.html#component-09-multiple-select

Example code

https://biblio-ugent-prototype-emily-v2.vercel.app/biblio/reviewer/publication-detail/biblio-activity.html

Overview (with librarian messages) columns

<div class="row">
  <div class="col-lg-4">
    <div class="card mb-6">
      <div class="card-header">
        <div class="bc-toolbar">
          <div class="bc-toolbar-left">
            <h3 class="card-title">Librarian tags</h3>
          </div>
          <div class="bc-toolbar-right">
            <button class="btn btn-outline-primary" type="button" data-toggle="modal" data-target="#editTags">
              <i class="if if-edit"></i>
              <div class="btn-text">Edit</div>
            </button>
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="badge-list">
          <a class="badge badge-secondary" href="/biblio/reviewer/publications/overview.html">funding to do: belgium</a>
          <a class="badge badge-secondary" href="/biblio/reviewer/publications/overview.html">group author publication</a>
          <a class="badge badge-secondary" href="/biblio/reviewer/publications/overview.html">funding to do: cost</a>
          <a class="badge badge-secondary" href="/biblio/reviewer/publications/overview.html">cc-by-2.0</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4">    
    <div class="card mb-6">
      <div class="card-header">
        <div class="bc-toolbar">
          <div class="bc-toolbar-left">
            <h3 class="card-title">Internal librarian message</h3>
          </div>
        </div>
      </div>
      <div class="card-body">
        <textarea class="form-control" placeholder="" rows="4"></textarea>
        <p><small class="form-text text-muted">Add internal notes here.</small></p>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card mb-6">
      <div class="card-header">
        <div class="bc-toolbar">
          <div class="bc-toolbar-left">
            <h3 class="card-title">Librarian record message</h3>
          </div>
        </div>
      </div>
      <div class="card-body">
        <textarea class="form-control" placeholder="" rows="4"></textarea>
        <p><small class="form-text text-muted">This message will be seen by researchers in the overview and record details.</small></p>
      </div>
    </div>
  </div>
</div>

Context

Simplified implementation

https://github.com/ugent-library/biblio-backend/issues/510

Old back-end

Multiple tags:

New tag: click "+"

[mietcls]

Will reopen this when the need arises again