anonymous_github/public/partials/pr-dashboard.htm

<div class="container page dashboard-page paper-page">
  <div class="row">
    <div class="w-100">
      <div class="paper-crumbs">My work &nbsp;/&nbsp; <span class="here">Pull requests</span></div>
      <div class="d-flex align-items-end justify-content-between flex-wrap" style="gap: 12px;">
        <div>
          <h1 class="paper-page-title">Anonymized <em>pull requests</em></h1>
          <p class="paper-page-lede">Track PR mirrors you&rsquo;ve created and their reviewer traffic.</p>
        </div>
        <div class="d-flex flex-wrap" style="gap: 6px">
          <a href="/anonymize" class="btn btn-ink">
            <i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> Anonymize Repo
          </a>
          <a href="/pull-request-anonymize" class="btn btn-ink">
            <i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> Anonymize PR
          </a>
          <a title="Claim the ownership of an existing anonymized repository." data-toggle="tooltip" data-placement="bottom" href="/claim" class="btn">
            Claim
          </a>
        </div>
      </div>

      <!-- Search + filters row -->
      <form class="w-100" aria-label="Pull Requests" accept-charset="UTF-8" v-form="viewState">
        <div class="d-flex flex-column flex-md-row align-items-md-center" style="gap: 8px">
          <div class="flex-grow-1">
            <input type="search" id="search" class="form-control" aria-label="Find a pull request..." placeholder="Find a pull request..." autocomplete="off" v-field="{ state: viewState, set: value =&gt; { search = value }, value: search, form: null, options: {} }">
          </div>
          <div class="d-flex flex-wrap" style="gap: 6px">
            <div class="dropdown">
              <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownSort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Sort
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownSort">
                <h6 class="dropdown-header">Select order</h6>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortFullName" value="fullName" v-field="{ state: viewState, set: value =&gt; { orderBy = value }, value: orderBy, form: null, options: {} }">
                  <label class="form-check-label" for="sortFullName">Pull Request</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortAnonymizeDate" value="-anonymizeDate" v-field="{ state: viewState, set: value =&gt; { orderBy = value }, value: orderBy, form: null, options: {} }">
                  <label class="form-check-label" for="sortAnonymizeDate">Anonymize Date</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortStatus" value="-status" v-field="{ state: viewState, set: value =&gt; { orderBy = value }, value: orderBy, form: null, options: {} }">
                  <label class="form-check-label" for="sortStatus">Status</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortLastView" value="-lastView" v-field="{ state: viewState, set: value =&gt; { orderBy = value }, value: orderBy, form: null, options: {} }">
                  <label class="form-check-label" for="sortLastView">Last View</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="radio" name="sort" id="sortPageView" value="-pageView" v-field="{ state: viewState, set: value =&gt; { orderBy = value }, value: orderBy, form: null, options: {} }">
                  <label class="form-check-label" for="sortPageView">Page View</label>
                </div>
              </div>
            </div>

            <div class="dropdown">
              <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Status
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownStatus">
                <h6 class="dropdown-header">Select status</h6>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="checkbox" name="sort" id="statusReady" value="ready" v-field="{ state: viewState, set: value =&gt; { filters.status.ready = value }, value: filters?.status?.ready, form: null, options: {} }">
                  <label class="form-check-label" for="statusReady">Ready</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="checkbox" name="sort" id="statusExpired" value="expired" v-field="{ state: viewState, set: value =&gt; { filters.status.expired = value }, value: filters?.status?.expired, form: null, options: {} }">
                  <label class="form-check-label" for="statusExpired">Expired</label>
                </div>
                <div class="form-check dropdown-item">
                  <input class="form-check-input" type="checkbox" name="sort" id="statusRemoved" value="removed" v-field="{ state: viewState, set: value =&gt; { filters.status.removed = value }, value: filters?.status?.removed, form: null, options: {} }">
                  <label class="form-check-label" for="statusRemoved">Removed</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>

      <!-- Active filter chips -->
      <div class="d-flex flex-wrap mt-2" style="gap: 6px" v-show="filters?.status?.ready === false || filters?.status?.expired === false || filters?.status?.removed === false">
        <span class="filter-chip" v-for="(v, f, index) in filters?.status" v-show="!v">
          {{ fmt?.title(f) }}
          <button type="button" class="filter-chip-close" aria-label="Remove filter" @click="filters.status[f] = true;">
            &times;
          </button>
        </span>
      </div>
    </div>

    <!-- Pull request list -->
    <ul class="repo-list w-100">
      <li class="repo-list-item" v-for="(pr, index) in filteredPullRequests" :class="{&#x27;repo-inactive&#x27;: pr?.status == &#x27;expired&#x27; || pr?.status == &#x27;removed&#x27; || pr?.status == &#x27;error&#x27;}">
        <div class="repo-list-item-content">
          <div class="repo-list-item-main">
            <div class="repo-list-item-header">
              <a class="repo-name" v-text="pr?.pullRequestId" :href="safeUrl(&quot;/pr/&quot; + (pr?.pullRequestId))"></a>
              <span class="status-badge" :class="{&#x27;status-removed&#x27;: pr?.status == &#x27;removed&#x27; || pr?.status == &#x27;expired&#x27; || pr?.status == &#x27;removing&#x27; || pr?.status == &#x27;expiring&#x27;, &#x27;status-preparing&#x27;: pr?.status == &#x27;preparing&#x27; || pr?.status == &#x27;download&#x27;, &#x27;status-ready&#x27;: pr?.status == &#x27;ready&#x27;, &#x27;status-error&#x27;: pr?.status == &#x27;error&#x27;}"><span v-text="fmt?.title(pr?.status)"></span><span v-if="pr?.status == &#x27;error&#x27;" v-text="&#x27;: &#x27; + pr?.statusMessage"></span></span>
            </div>
            <div class="repo-source">
              <span>
                <i class="fab fa-github" aria-hidden="true"></i>
                <a :href="safeUrl(&quot;https://github.com/&quot; + (pr?.source?.repositoryFullName) + &quot;/pull/&quot; + (pr?.source?.pullRequestId))">{{ pr?.source?.repositoryFullName }}#{{ pr?.source?.pullRequestId }}</a>
              </span>
              <span class="status-badge" style="font-size: 10px;" :class="{&#x27;status-ready&#x27;: pr?.merged, &#x27;status-removed&#x27;: pr?.state==&#x27;open&#x27;, &#x27;status-error&#x27;: pr?.state==&#x27;closed&#x27; &amp;&amp; !pr?.merged}">
                {{ fmt?.title(pr?.merged ? "merged" : pr?.state) }}
              </span>
              <span class="repo-date">anonymized {{ fmt?.humanTime(pr?.anonymizeDate) }}</span>
            </div>
          </div>
          <div class="repo-meta">
            <span title="Conference" v-if="pr?.conference">
              <i class="fas fa-chalkboard-teacher"></i> {{ pr?.conference }}
            </span>
            <span data-toggle="tooltip" data-placement="bottom" :title="&quot;Terms: &quot; + (pr?.options?.terms?.join(&#x27;, &#x27;))">
              <i class="fas fa-shield-alt"></i> {{ fmt?.number(pr?.options?.terms?.length) }}
            </span>
            <span data-toggle="tooltip" data-placement="bottom" :title="&quot;Views: &quot; + (fmt?.number(pr?.pageView))">
              <i class="far fa-eye"></i> {{ fmt?.number(pr?.pageView) }}
            </span>
            <span data-toggle="tooltip" data-placement="bottom" :title="&quot;Last view: &quot; + (fmt?.date(pr?.lastView))">
              <i class="far fa-calendar-alt"></i> {{ fmt?.humanTime(pr?.lastView) }}
            </span>
            <span v-if="pr?.options?.expirationMode!=&#x27;never&#x27; &amp;&amp; pr?.status == &#x27;ready&#x27;">
              <i class="far fa-clock"></i> Expire: {{ fmt?.humanTime(pr?.options?.expirationDate) }}
            </span>
          </div>
        </div>
        <div class="repo-list-item-actions">
          <div class="dropdown">
            <button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Actions
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" :href="safeUrl(&quot;/pull-request-anonymize/&quot; + (pr?.pullRequestId))">
                <i class="far fa-edit" aria-hidden="true"></i> Edit
              </a>
              <a class="dropdown-item" href="#" v-show="pr?.status == &#x27;ready&#x27; || pr?.status == &#x27;error&#x27;" @click.prevent="updatePullRequest(pr)">
                <i class="fas fa-sync"></i> Force update
              </a>
              <a class="dropdown-item" href="#" v-show="pr?.status == &#x27;removed&#x27;" @click.prevent="updatePullRequest(pr)">
                <i class="fas fa-check-circle"></i> Enable
              </a>
              <a class="dropdown-item" href="#" v-show="pr?.status == &#x27;ready&#x27;" @click.prevent="removePullRequest(pr)">
                <i class="fas fa-trash-alt"></i> Remove
              </a>
              <a class="dropdown-item" :href="safeUrl(&quot;/pr/&quot; + (pr?.pullRequestId) + &quot;/&quot;)">
                <i class="fa fa-eye" aria-hidden="true"></i> View PR
              </a>
            </div>
          </div>
        </div>
      </li>
      <li class="repo-list-empty" v-if="filteredPullRequests?.length == 0">
        <i class="fas fa-inbox"></i>
        <span>No pull requests to display.</span>
      </li>
    </ul>
  </div>
</div>