unserver-unify/src/app/mystudy/mycertificate.html

<div ng-controller="CertificateRecordsCtrl as ctrl" class="myspace my_space">
  <div class="panel panel-body">
    <div class="myspace_hed">
      {{'Certificates'|translate}} <span class="badge badge-green rounded-2x">{{ctrl.totalrecords}}</span>
    </div>
    <ul class="right_icon alignment" style="top:-10px; right: 0; z-index: 10;" ng-init="showTab = 'list'">
      <li>
        <b translate="">
          Layout
        </b>
        :
      </li>
      <li class="active" ng-class="{active:showTab == 'list'}">
        <a ng-click="showTab = 'list'">
          <i class="fa fa-list">
          </i>
        </a>
      </li>
      <li ng-class="{active:showTab == 'grid'}" ng-click="ctrl.showTab1 = 'grid'">
        <a ng-click="showTab = 'grid'">
          <i class="fa fa-th">
          </i>
        </a>
      </li>
    </ul>
    <table class="table table-striped table-hover tbl_aln" st-pipe="ctrl.getRecord" st-table="userrecords" ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'list'}">
      <thead>
        <tr class="info">
          <th class="sortable" style="width:10%" st-sort="" translate="">
            Course
          </th>
          <th class="sortable" style="width:6%" st-sort="" translate="">
            User
          </th>
          <th translate="" style="width:8%">
            User ID
          </th>
          <th translate="" style="width:8%">
            Time
          </th>
          <th class="sortable" style="width:6%" st-sort="" translate="">
            Scores
          </th>
          <th class="sortable" style="width:6%" st-sort="" translate="">
            Good
          </th>
          <th style="width:15%">
            {{'Action'| translate}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-if="userrecords | isEmpty">
          <td class="text-center" colspan="11" style="font-size: 25px; padding: 30px 0;">
            {{ 'No Records' | translate }}
          </td>
        </tr>
        <tr ng-repeat="item in userrecords">
          <td>
            {{item.courseName}}
          </td>
          <td>
            {{item.fullName}}
          </td>
          <td>
            <span class="g-word-break pull-left" style="width: 100px;">{{item.userId}}</span>
          </td>
          <td class="text_indent10">
            {{item.time | date:'yyyy-MM-dd HH:mm:ss'}}
          </td>
          <td class="text_indent15">
            {{(item.course_score||0)|number:2}}
          </td>
          <td>
            <span>{{item.good | good}}<span>
          </td>
          <td>
            <a class="btn btn-info btn-xs" ui-sref=".view({courseid:item.courseId,certid:item._id})" >
              <i class="fa fa-eye">
              </i>
              {{'Preview'|translate}}
            </a> &nbsp;
            <a class="btn btn-u btn-xs" ng-click="ctrl.qrCodeCert(item)" ng-if="loginService.school.qrcodeCertificateFlag">
              <i class="fa fa-qrcode">
              </i>
              {{'QR Code'|translate}}
            </a>
          </td>
        </tr>
        <tr>
          <td class="per_page" colspan="7">
            <span class="text-center pull-right" st-items-by-page="ctrl.itemNumber" st-pagination="" st-template="components/content/tablePagination.html">
            </span>
          </td>
        </tr>
      </tbody>
    </table>
    <div ng-class="{'profile-edit tab-pane fade':true, 'in active':showTab == 'grid'}">
      <ul class="event_album">
        <li ng-repeat="item in userrecords">
          <div class="event_image_container" ui-sref=".view({courseid:item.courseId,certid:item._id})" >
            <div class="photo_holder">
              <div class="inner_photo_holder">
                <img src="assets/images/certificate_dummy.png"  class="img-thumbnail" />
                <span class="portfolio-box-in rounded-x">
                  <i class="fa fa-search-plus"></i>
                </span>
                <h3>{{item.courseName}}</h3>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>