interactive-mining/interactive-mining-angular-frontend/src/app/manageprofiles/manageprofiles.component.html

<app-stepsnvabar></app-stepsnvabar>
<div *ngIf="isCommunityManager" class="uk-section uk-section-default">
  <div class="uk-container uk-container-expand">
    <h4>Administrate all profiles <span class="cm-tooltip" uk-icon="icon: info" title="Each <b>mining profile</b> consists of the data and the rules used to define a <b>mining procedure</b>.<br>Click the profile to <b>edit</b>." uk-tooltip="pos: right"></span></h4>
    <div class="uk-overflow-auto">
      <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
        <thead>
        <tr>
          <th class="uk-table-small cm-text-muted">Community</th>
          <th class="uk-table-expand cm-text-muted">Profile</th>
          <th class="uk-table-small cm-text-muted">Modified</th>
          <th class="uk-width-small cm-text-muted">Status</th>
          <th class="uk-table-shrink"></th>
          <!--<th class="uk-table-shrink uk-text-nowrap">Matches</th>-->
        </tr>
        </thead>
        <tfoot>
        </tfoot>
        <tbody>
        <tr *ngFor="let profile of allUsersProfiles | paginate: config; let i = index">
          <td class="uk-text-nowrap">{{profile.user}}</td>
          <td class="uk-table-link">
            <a class="uk-link-reset" (click)="loadUserProfileAdmin(profile.userId, profile.profileId, profile.profile)">{{profile.profile}}</a>
          </td>
          <td class="cm-text-muted uk-text-nowrap">{{profile.datecreated}}</td>
          <td class="uk-text-nowrap uk-text-warning">
            <select [(ngModel)]="profile.status" (ngModelChange)="onStatusChange(profile.userId, profile.profileId, $event)">
              <option *ngFor="let status of statusValues" [ngValue]="status">{{status}}</option>
            </select>
          </td>
          <td class="download">
            <a class="uk-icon-link uk-icon" uk-icon="icon: download" contenteditable="false" (click)="downloadUserProfileAdmin(profile.userId, profile.profileId, profile.profile)"></a>
          </td>
          <!--<td class="uk-text-nowrap">{{profile.matches}}</td>-->
        </tr>
        </tbody>
      </table>
      <pagination-template *ngIf="allUsersProfiles.length" #p="paginationApi"
                           [id]="config.id"
                           (pageChange)="config.currentPage = $event">
        <ul class="uk-pagination uk-flex-center" uk-margin>
          <li [class.uk-disabled]="p.isFirstPage()"><a (click)="p.previous()"><span uk-pagination-previous></span></a></li>
          <li *ngFor="let page of p.pages" [class.uk-active]="p.getCurrent() === page.value">
            <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
              <span>{{ page.label }}</span>
            </a>
            <span *ngIf="p.getCurrent() === page.value">{{ page.label }}</span>
          </li>
          <li [class.uk-disabled]="p.isLastPage()"><a (click)="p.next()"><span uk-pagination-next></span></a></li>
        </ul>
      </pagination-template>
    </div>
  </div>
</div>

<div class="uk-section uk-section-default">
  <div class="uk-container uk-container-expand">
    <h4>My mining profiles <span class="cm-tooltip" uk-icon="icon: info" title="Each <b>mining profile</b> consists of the data and the rules used to define a <b>mining procedure</b>.<br>Click the profile to <b>edit</b>." uk-tooltip="pos: right"></span></h4>
    <!--<div uk-grid>-->
      <!--<div class="uk-width-expand@m">-->
        <div class="uk-overflow-auto">
          <table class="uk-table uk-table-hover uk-table-middle uk-table-divider">
            <thead>
            <tr>
              <!--<th class="uk-table-shrink"></th>-->
              <th class="uk-table-expand cm-text-muted">Profile</th>
              <th class="uk-table-small cm-text-muted">Modified</th>
              <th class="uk-table-small cm-text-muted">Notified <span class="cm-tooltip" uk-icon="icon: info" title="When your profile is in its final version, notify the OpenAIRE Mining experts to process it" uk-tooltip="pos: right"></span></th>
              <th class="uk-width-small cm-text-muted">Status</th>
              <!--<th class="uk-table-shrink uk-text-nowrap">Matches</th>-->
              <th></th>
            </tr>
            </thead>
            <tfoot>
            </tfoot>
            <tbody>
            <tr *ngIf="!userSavedProfiles.length">
              <!-- <td class="cm-table-number"></td> -->
              <td colspan="5">
                <div class="uk-text-center uk-padding uk-padding-remove-bottom">
                  <h3>Not created your profile yet?</h3>
                  <p class="uk-text-lead">
                    Try to play with an example profile below!
                  </p>
                  <div class="uk-heading-line uk-text-center uk-margin-auto cm-margin-medium" style="width: 335px;"><span>or</span></div>
                  <a class="test-upload uk-button cm-button-primary uk-text-center cm-margin" (click)="createNewProfile()">
                    <span class="uk-text-middle">Create a new mining profile</span>
                  </a>
                </div>
              </td>
            </tr>
            <tr *ngFor="let profile of userSavedProfiles | paginate: config; let i = index">
              <!--<td class="download">-->
                <!--<a class="uk-icon-link uk-icon" uk-icon="icon: download" contenteditable="false" (click)="downloadProfile(profile.id, profile.name)"></a>-->
              <!--</td>-->
              <td class="uk-table-link">
                <a class="uk-link-reset" (click)="loadSavedProfile(profile.id, profile.name)">{{profile.name}}</a>
              </td>
              <td class="cm-text-muted uk-text-nowrap">{{profile.datecreated}}</td>
              <td class="cm-text-muted uk-text-nowrap">
                <button *ngIf="!profile.notified && !pending" class="uk-button uk-button-secondary uk-button-small uk-text-center cm-margin" (click)="notifyProfile(profile)">Notify</button>
                <button *ngIf="pending" class="uk-button uk-button-secondary uk-button-small uk-text-center cm-margin" disabled>Notifing... <span uk-spinner="ratio: 0.8"></span></button>
                <span *ngIf="profile.notified " class="uk-label uk-label-success">Notified</span>
              </td>
              <td class="uk-text-nowrap uk-text-warning">{{profile.status}}</td>
              <!--<td class="uk-text-nowrap">{{profile.matches}}</td>-->
              <td class="delete">
                <a class="uk-icon-link uk-icon" uk-icon="icon: trash" contenteditable="false" (click)="deleteProfilePrompt(i)"></a>
              </td>
            </tr>
            </tbody>
          </table>
          <pagination-template *ngIf="userSavedProfiles.length" #p="paginationApi"
                               [id]="config.id"
                               (pageChange)="config.currentPage = $event">
            <ul class="uk-pagination uk-flex-center" uk-margin>
              <li [class.uk-disabled]="p.isFirstPage()"><a (click)="p.previous()"><span uk-pagination-previous></span></a></li>
              <li *ngFor="let page of p.pages" [class.uk-active]="p.getCurrent() === page.value">
                <a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
                  <span>{{ page.label }}</span>
                </a>
                <span *ngIf="p.getCurrent() === page.value">{{ page.label }}</span>
              </li>
              <li [class.uk-disabled]="p.isLastPage()"><a (click)="p.next()"><span uk-pagination-next></span></a></li>
            </ul>
          </pagination-template>
        </div>
      <!--</div>-->
      <!--<div class="uk-width-1-3@m">-->
        <!--<a class="test-upload uk-button cm-button-primary uk-width-1-1 uk-text-center uk-margin-small-bottom" (click)="createNewProfile()">-->
          <!--<span class="uk-text-middle">Create a new mining profile</span>-->
        <!--</a>-->
        <!--&lt;!&ndash;<div class="test-upload uk-button uk-button-link uk-width-1-1 uk-text-center uk-margin-small-top">&ndash;&gt;-->
          <!--&lt;!&ndash;<div uk-form-custom>&ndash;&gt;-->
            <!--&lt;!&ndash;<form id="profile-input-form" method="post" enctype="multipart/form-data" accept-charset="UTF-8">&ndash;&gt;-->
              <!--&lt;!&ndash;<input type="file" name="upload" id="profile-file-input" class="inputfile" (change)="fileChangeUpload($event)" accept=".oamp">&ndash;&gt;-->
            <!--&lt;!&ndash;</form>&ndash;&gt;-->
            <!--&lt;!&ndash;<span class="uk-text-middle">UPLOAD an .oamp profile file</span>&ndash;&gt;-->
          <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--</div>-->
    <!--</div>-->
    <div *ngIf="userSavedProfiles.length" class="uk-container-small">
      <a class="test-upload uk-button cm-button-primary uk-text-center cm-margin" (click)="createNewProfile()">
        <span class="uk-text-middle">Create a new mining profile</span>
      </a>
    </div>
  </div>
</div>
<h4>Start with an example profile</h4>
<div class="uk-section uk-section-secondary cm-section-examples">
  <div class="uk-container uk-container-small">
    <div uk-slider="autoplay: true">
      <div class="uk-position-relative">
        <div class="uk-slider-container uk-light">
          <ul class="uk-slider-items cm-child-width-examples-cards uk-grid">
            <li *ngFor="let profile of exampleProfiles">
              <a (click)="loadExampleProfile(profile.name)">
                <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-text-center uk-margin-medium-top uk-margin-medium-bottom">
                  <h3 class="uk-card-title uk-text-bold">{{profile.name | uppercase}}</h3>
                  <h4 class="uk-card-title uk-margin-remove-bottom">{{profile.contents}}</h4>
                  <p class="uk-text-small uk-margin-remove-top">concepts</p>
                  <h4 class="uk-card-title uk-margin-remove-bottom">{{profile.documents}}</h4>
                  <p class="uk-text-small uk-margin-remove-top">documents</p>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <div class="uk-hidden@s">
          <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
          <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
        </div>
        <div class="uk-visible@s">
          <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
          <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
        </div>
      </div>
      <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
    </div>
  </div>
</div>