single-document-details.hbs

<div class="uk-position-relative" data-test-single-doc-details>
  <button
    class="uk-icon-button uk-position-top-right"
    type="button"
    uk-icon="chevron-right"
    data-test-close
    {{on "click" this.sidePanel.toggle}}
  ></button>

  <div class="uk-margin uk-margin-remove-top">
    <label class="uk-text-meta" for="alexandria-details-title">
      <button
        type="button"
        {{on "click" (fn this.toggle "editTitle")}}
        data-test-edit-title
      >
        {{t "alexandria.document-details.document-title"}}
        <UkIcon @icon={{if this.editTitle "close" "pencil"}} />
      </button>
    </label>

    <div
      class="uk-flex uk-flex-middle uk-text-break"
      data-test-title-container
    >
      <FaIcon
        @icon="file-alt"
        @prefix="far"
        class="uk-margin-small-right"
        data-test-title-icon
        {{set-style color=@document.category.color}}
      />
      {{#if this.editTitle}}
        <form {{on "submit" (perform this.saveDocument)}} class="uk-flex uk-width-expand">
          <input
            class="uk-input uk-width-expand
              {{unless this.validTitle 'uk-form-danger'}}"
            id="alexandria-details-title"
            type="text"
            placeholder={{t "alexandria.document-details.title-placeholder"}}
            value={{@document.title}}
            data-test-title-input
            {{on "input" this.updateDocumentTitle}}
          />
          <button
            class="uk-icon-button uk-margin-small-left cursor-pointer"
            disabled={{not this.validTitle}}
            uk-icon="icon: check"
            type="submit"
            data-test-save
          ></button>
        </form>
      {{else}}
        <span class="uk-text-bolder" data-test-title>{{@document.title}}</span>
      {{/if}}
    </div>
  </div>

  <MarkManager @documents={{array @document}} class="uk-margin" />

  <div class="uk-margin">
    <label
      class="uk-text-meta uk-display-block"
      for="alexandria-details-description"
    >
      <button type="button" {{on "click" (fn this.toggle "editDescription")}}>
        {{t "alexandria.document-details.document-description"}}
        <UkIcon @icon={{if this.editDescription "close" "pencil"}} />
      </button>
    </label>

    {{#if this.editDescription}}
      <textarea
        class="uk-textarea"
        id="alexandria-details-description"
        rows="10"
        value="{{~@document.description~}}"
        {{on "input" this.updateDocumentDescription}}
      ></textarea>
      <div class="uk-text-right uk-margin-small-top">
        <button
          class="uk-icon-button cursor-pointer"
          uk-icon="icon: check"
          type="button"
          {{on "click" (perform this.saveDocument)}}
        ></button>
      </div>
    {{else}}
      {{#if @document.description}}
        <div class="document-description">{{@document.description}}</div>
      {{else}}
        <div class="uk-text-italic">{{t
            "alexandria.document-details.add-description"
          }}</div>
      {{/if}}
    {{/if}}
  </div>

  <div class="uk-margin">
    <label class="uk-text-meta uk-display-block" for="date">
      <button
        type="button"
        {{on "click" (fn this.toggle "editDate")}}
        data-test-edit-date
      >
        {{t "alexandria.document-details.document-date"}}
        <UkIcon @icon={{if this.editDate "close" "pencil"}} />
      </button>
    </label>

    {{#if this.editDate}}
      <EmberFlatpickr
        id="date"
        name="date"
        class="uk-input"
        @locale={{this.locale}}
        @date={{or @document.date null}}
        @altFormat={{this.dateFormat}}
        @altInput={{true}}
        @allowInput={{true}}
        @onChange={{this.updateDate}}
        data-test-date-input
      />
    {{else if @document.date}}
      <div data-test-date>
        {{format-date
          @document.date
          month="2-digit"
          day="2-digit"
          year="numeric"
        }}
      </div>
    {{else}}
      <div class="uk-text-italic">{{t
          "alexandria.document-details.add-date"
        }}</div>
    {{/if}}
  </div>

  <div class="uk-margin">
    <p class="uk-text-meta uk-margin-remove">
      {{t "alexandria.document-details.metadata"}}
    </p>
    <ul class="uk-list uk-list-collapse uk-margin-remove">
      <li data-test-file-type>
        <FaIcon
          @icon={{@document.latestFile.value.fileTypeInfo.icon}}
          @fixedWidth={{true}}
          class="uk-margin-small-right"
          {{uk-tooltip (t "alexandria.document-details.file-type") pos="left"}}
        />
        {{@document.latestFile.value.fileTypeInfo.label}}
      </li>
      <li data-test-created-at>
        <FaIcon
          @icon="clock"
          @fixedWidth={{true}}
          class="uk-margin-small-right"
          {{uk-tooltip (t "alexandria.document-details.created-at") pos="left"}}
        />
        {{format-date
          @document.createdAt
          month="2-digit"
          day="2-digit"
          year="numeric"
          hour="2-digit"
          minute="2-digit"
        }}
      </li>
      <li data-test-created-by-user>
        <FaIcon
          @icon="user"
          @fixedWidth={{true}}
          class="uk-margin-small-right"
          {{uk-tooltip
            (t "alexandria.document-details.created-by-user")
            pos="left"
          }}
        />
        {{await (resolve-user @document.createdByUser)}}
      </li>
      <li data-test-created-by-group>
        <FaIcon
          @icon="users"
          @fixedWidth={{true}}
          class="uk-margin-small-right"
          {{uk-tooltip
            (t "alexandria.document-details.created-by-group")
            pos="left"
          }}
        />
        {{await (resolve-group @document.createdByGroup)}}
      </li>
    </ul>
  </div>

  <div class="uk-grid uk-grid-small uk-child-width-1-2" uk-grid>
    {{#if this.displayWebDAVButton}}
      <div>
        <UkButton
          @size="small"
          @onClick={{this.openWebDAV.perform}}
          @loading={{this.openWebDAV.isRunning}}
          class="uk-width-1"
          data-test-web-dav-button
        >
          {{t "alexandria.document-details.web-dav"}}
        </UkButton>
      </div>
    {{/if}}

    {{#if this.displayConvertButton}}
      <div>
        <UkButton
          @size="small"
          @onClick={{this.convertDocument.perform}}
          @loading={{this.convertDocument.isRunning}}
          class="uk-width-1"
          data-test-convert-button
        >
          {{t "alexandria.document-details.convert"}}
        </UkButton>
      </div>
    {{/if}}

    <div uk-form-custom>
      <input
        data-test-replace
        type="file"
        aria-label="File input"
        accept={{@document.category.allowedMimeTypes}}
        {{on "change" this.uploadReplacement.perform}}
      />

      <button
        class="uk-width-1 uk-button uk-button-default uk-button-small"
        type="button"
        tabindex="-1"
      >
        {{~t "alexandria.document-details.replace"~}}
      </button>
    </div>

    <div>
      <DocumentDeleteButton @docsToDelete={{@document}} as |showDialog|>
        <UkButton
          data-test-delete
          @size="small"
          @color="danger"
          class="uk-width-1"
          {{on "click" showDialog}}
          {{did-insert (fn this.registerDeleteDialog showDialog)}}
        >
          {{t "alexandria.delete"}}
        </UkButton>
      </DocumentDeleteButton>
    </div>
  </div>

  <hr />

  <ul uk-accordion="multiple: true">
    <li class="uk-open">
      <a class="uk-accordion-title" href="#">
        {{~t "alexandria.document-details.version-history"~}}
      </a>
      <div class="uk-accordion-content">
        <ul class="uk-list uk-list-divider version-history">
          {{#each (filter-by "variant" "original" @document.files) as |file|}}
            <li data-test-file class="uk-flex">
              <span class="uk-margin-right">
                {{format-date
                  file.createdAt
                  month="2-digit"
                  day="2-digit"
                  year="numeric"
                  hour="2-digit"
                  minute="2-digit"
                }}
              </span>
              <span class="uk-width-expand">
                {{~await (resolve-user file.createdByUser)~}}
              </span>
              <span class="uk-flex uk-flex-middle">
                <UkIcon @icon="info" class="uk-icon-link" />
                <div uk-dropdown pos="left-bottom">
                  <p>
                    <span class="uk-text-bold">{{t
                        "alexandria.document-details.version.filename"
                      }}</span>
                    <br />
                    <span class="uk-text-break">{{file.name}}</span>
                  </p>
                  {{#if file.checksum}}
                    <p>
                      <span class="uk-text-bold">{{t
                          "alexandria.document-details.version.checksum"
                        }}</span>
                      <br />
                      <span class="uk-text-break">{{file.checksum}}</span>
                    </p>
                  {{/if}}
                </div>
                <button
                  type="button"
                  class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-small-left"
                  data-test-file-download-link
                  {{on "click" file.download.perform}}
                >
                  <UkIcon @icon="download" />
                  <span hidden>{{t "alexandria.download"}}</span>
                </button>
              </span>
            </li>
          {{/each}}
        </ul>
      </div>
    </li>
  </ul>

  <TagManager @documents={{array @document}} />
</div>