anonymous_github/public/partials/conferences.htm

<div class="container page paper-page">
  <div class="row">
    <div class="w-100">
      <div class="paper-crumbs"><a href="/dashboard">My work</a> &nbsp;/&nbsp; <span class="here">Conferences</span></div>
      <div class="d-flex align-items-end justify-content-between flex-wrap" style="gap: 12px;">
        <div>
          <h1 class="paper-page-title">Your <em>conferences</em></h1>
          <p class="paper-page-lede">Group anonymizations by venue, give chairs a shared dashboard, and set one expiry for every submission.</p>
        </div>
        <a href="/conference/new" class="btn btn-ink">
          <i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> New conference
        </a>
      </div>

      <form class="w-100 dashboard-filter-row" aria-label="Filter conferences" accept-charset="UTF-8" v-form="viewState" @submit.prevent="submitForm($event, () =&gt; { $event.preventDefault() })">
        <div class="search-wrap">
          <input type="search" id="search" class="form-control" aria-label="Search conferences" placeholder="Search by name or ID…" autocomplete="off" v-field="{ state: viewState, set: value =&gt; { search = value }, value: search, form: null, options: {} }">
        </div>
        <div class="dashboard-filter-controls">
          <div class="dropdown">
            <button class="btn dropdown-toggle" type="button" id="dropdownSort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="filter-btn-label">Sort</span>
              <span class="filter-btn-value">{{ ({name: 'Name', conferenceID: 'ID', '-status': 'Status'})[orderBy] || 'Custom' }}</span>
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownSort">
              <h6 class="dropdown-header">Order by</h6>
              <div class="form-check dropdown-item">
                <input class="form-check-input" type="radio" name="sort" id="sortName" value="name" v-field="{ state: viewState, set: value =&gt; { orderBy = value }, value: orderBy, form: null, options: {} }">
                <label class="form-check-label" for="sortName">Name</label>
              </div>
              <div class="form-check dropdown-item">
                <input class="form-check-input" type="radio" name="sort" id="sortID" value="conferenceID" v-field="{ state: viewState, set: value =&gt; { orderBy = value }, value: orderBy, form: null, options: {} }">
                <label class="form-check-label" for="sortID">ID</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>
          </div>

          <div class="dropdown">
            <button class="btn dropdown-toggle" type="button" id="dropdownStatus" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="filter-btn-label">Status</span>
              <span class="filter-btn-value" v-if="filters?.status?.ready &amp;&amp; filters?.status?.expired &amp;&amp; filters?.status?.removed">All</span>
              <span class="filter-btn-value" v-if="!(filters?.status?.ready &amp;&amp; filters?.status?.expired &amp;&amp; filters?.status?.removed)">
                {{ (filters?.status?.ready ? 0 : 1) + (filters?.status?.expired ? 0 : 1) + (filters?.status?.removed ? 0 : 1) }} hidden
              </span>
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownStatus">
              <h6 class="dropdown-header">Show statuses</h6>
              <div class="form-check dropdown-item" v-for="(label, key, index) in statusLabels">
                <input class="form-check-input" type="checkbox" v-field="{ state: viewState, set: value =&gt; { filters.status[key] = value }, value: filters?.status[key], form: null, options: {} }" :id="&quot;status-&quot; + (key)">
                <label class="form-check-label" :for="&quot;status-&quot; + (key)">{{ label }}</label>
              </div>
            </div>
          </div>
        </div>
      </form>

      <div class="dashboard-meta">
        <span class="dashboard-count">
          <span v-if="filteredConferences?.length === conferences?.length">{{ fmt?.number(conferences?.length) }} conference<span v-if="conferences?.length !== 1">s</span></span>
          <span v-if="filteredConferences?.length !== conferences?.length">{{ fmt?.number(filteredConferences?.length) }} of {{ fmt?.number(conferences?.length) }} shown</span>
        </span>
        <template v-for="(v, f, index) in filters?.status"><span class="filter-chip" v-if="v === false">
          Hiding {{ statusLabels[f] }}
          <button type="button" class="filter-chip-close" @click="filters.status[f] = true;" :aria-label="&quot;Show &quot; + (statusLabels[f]) + &quot; again&quot;">&times;</button>
        </span></template>
      </div>
    </div>

    <div class="paper-table paper-table-conferences w-100" role="table" aria-label="Conferences">
      <div class="paper-table-head" role="row">
        <div role="columnheader">Conference</div>
        <div role="columnheader">Status</div>
        <div role="columnheader" class="num">Repos</div>
        <div role="columnheader">Review window</div>
        <div role="columnheader"><span class="sr-only">Actions</span></div>
      </div>
      <div class="paper-table-row row-clickable" role="row" v-for="(conference, index) in filteredConferences" :key="conference?.conferenceID" :class="{&#x27;repo-inactive&#x27;: conference?.status == &#x27;expired&#x27; || conference?.status == &#x27;removed&#x27;}">
        <div class="cell-anon" role="cell">
          <span class="type-badge type-repo">Conf</span>
          <div class="anon-text">
            <a class="repo-name" v-text="conference?.name" :href="safeUrl(&quot;/conference/&quot; + (conference?.conferenceID))"></a>
            <div class="anon-sub">
              <span class="anon-source">ID <span class="commit-hash" v-text="conference?.conferenceID"></span><span v-if="conference?.url"> &middot; <a target="_blank" rel="noopener" v-text="fmt?.limitTo(conference?.url, 60)" :href="safeUrl((conference?.url))"></a></span></span>
            </div>
          </div>
        </div>
        <div class="cell-status" role="cell">
          <div class="status-line">
            <span class="status-dot" aria-hidden="true" :class="&#x27;status-&#x27; + conference?.status"></span>
            <span class="status-word" v-text="fmt?.statusLabel(conference?.status)"></span>
          </div>
        </div>
        <div class="cell-views num" role="cell" v-text="fmt?.number(conference?.nbRepositories || 0)"></div>
        <div class="cell-expires" role="cell">
          <span v-if="conference?.startDate">{{ fmt?.date(conference?.startDate, 'mediumDate') }} &ndash; {{ fmt?.date(conference?.endDate, 'mediumDate') }}</span>
          <span class="empty-dash" aria-label="No review window" v-if="!conference?.startDate">&mdash;</span>
        </div>
        <div class="cell-actions" role="cell">
          <div class="dropdown">
            <button class="btn btn-icon-dots" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" :aria-label="&quot;Actions for &quot; + (conference?.name)">
              <i class="fas fa-ellipsis-h" aria-hidden="true"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" :href="safeUrl(&quot;/conference/&quot; + (conference?.conferenceID) + &quot;/&quot;)">
                <i class="fa fa-eye" aria-hidden="true"></i> View
              </a>
              <a class="dropdown-item" :href="safeUrl(&quot;/conference/&quot; + (conference?.conferenceID) + &quot;/edit&quot;)">
                <i class="far fa-edit" aria-hidden="true"></i> Edit
              </a>
              <div v-if="conference?.status != &#x27;removed&#x27;">
                <div class="dropdown-divider"></div>
                <button type="button" class="dropdown-item dropdown-item-danger" @click="removeConference(conference)">
                  <i class="fas fa-trash-alt" aria-hidden="true"></i> Remove
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="paper-table-empty" v-if="filteredConferences?.length == 0">
        <i class="fas fa-inbox" aria-hidden="true"></i>
        <span v-if="conferences?.length == 0">You have not created a conference yet.</span>
        <span v-if="conferences?.length &gt; 0">Nothing matches the current filters.</span>
        <div class="paper-table-empty-actions">
          <button type="button" class="btn btn-outline-ink" v-if="conferences?.length &gt; 0" @click="search = &#x27;&#x27;; filters.status.ready = true; filters.status.expired = true; filters.status.removed = true;">Clear filters</button>
          <a href="/conference/new" class="btn btn-ink" v-if="conferences?.length == 0"><i class="fa fa-plus-circle mr-1" aria-hidden="true"></i> New conference</a>
        </div>
      </div>
    </div>
  </div>
</div>