openaire-library/claims/linking/linkingGeneric.component.html

<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >
  <div uk-grid uk-grid>
   <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">

<div class="uk-container uk-margin-top">
<div class="uk-article-title custom-article-title">
    Link your research results
</div>
<!--div *ngIf="step==0">
  <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-margin-top" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 style="color: #4687E6 !important" class="uk-card-title uk-text-center">1 Select communities and projects</h3>
            <p>Select a community or search for community concepts to link</p>
             <p>Search for OpenAIRE projects to link</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 style="color: #4687E6 !important" class="uk-card-title uk-text-center">2 Select research results</h3>
            <p>
              Search for publications, research data & software
            </p>
            <div>Search in
              <ul>
                <li>Openaire</li>
                <li>Crossref</li>
                <li>Datacite</li>
                <li>Orcid</li>
              </ul>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 style="color: #4687E6 !important" class="uk-card-title uk-text-center">3 Review metadata</h3>
            <p>Confirm your selections</p>
            <p>Review results metadata if needed</p>
        </div>
    </div>
</div>
<ul  class=" uk-pagination uk-flex-center uk-margin-auto  uk-float-right">

     <li   (click)="step=1;"  >
      <a>Start <span uk-pagination-next></span></a>
    </li>

</ul>
</div-->
<div  >
  <div class="uk-width-1-1">
    <helper position="top"></helper>
  </div>
<div class="uk-grid  helper-grid">


  <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>
  <div class="uk-width-expand">
    <ul uk-accordion class="uk-padding-small uk-margin-remove-bottom basket-accordion">
      <li>
        <h3 class="  uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title uk-text-danger" uk-tooltip="title:Click to see your selections">

          <span class="uk-icon"><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="28px" id="my-box" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="28px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g>	<path d="M480,320v128H32V320h78.859l64.016,96h162.25l64-96H480 M384,32H128L0,288v192h512V288L384,32L384,32z M35.781,288l112-224 h216.438l112,224H384l-64,96H192l-64.016-96H35.781L35.781,288z" fill="#b5b5b5"></path></g> </svg> </span>
          <span   class="uk-badge basket-badge ">{{(projects.length + contexts.length + results.length) | number}}</span>
        </h3>
          <div class="uk-accordion-content uk-background-muted uk-margin-remove-top uk-margin-left uk-margin-right dropbasket uk-padding-small uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-1@m uk-grid uk-grid-stack">
            <claim-selected-projects   title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
              (showChange)="showChange($event)"  [localStoragePrefix]=localStoragePrefix > </claim-selected-projects>

           <claim-selected-contexts  title="link Communities" [contexts]="contexts"  [projects]="projects"  [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType
           (showChange)="showChange($event)"  [localStoragePrefix]=localStoragePrefix> </claim-selected-contexts>
           <claim-selected-results *ngIf="step!=3"  title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" showSearch=false  showAccessRights=false [localStoragePrefix]=localStoragePrefix>
           </claim-selected-results>
          </div>
      </li>
  </ul>
  <!--start-over [results]="results" [contexts]="contexts" [projects]="projects" ></start-over-->
  <!-- add here pagination to be visible when results list is long -->

      <ul class="uk-subnav uk-margin-remove-bottom uk-subnav-pill linkingSteps" uk-margin="">
          <li  [class]="(step==1)?'uk-active':' '" ><a (click)="step=1;"> 1  Select Projects <span  >or  Communities  </span></a></li>
           <li [class]="(step==2)?'uk-active':' '" ><a  (click)="step=2;">2 Select Research Results  </a></li>
          <li [class]="(step==3)?'uk-active':' '" (click)="step=3;"><a [class]="(results.length == 0)?'uk-disabled':''"  (click)="show='claim';" >3 Review metadata</a></li>
      </ul>
      <ul  class=" uk-pagination uk-flex-center uk-margin-auto uk-text-center">
          <li   *ngIf="step !=1 "   (click)="step=step-1;"  ><a><span class=" " uk-pagination-previous></span> Previous</a></li>
           <li  *ngIf="step !=3 " (click)="step=step + 1;"  >
            <a>Next <span uk-pagination-next></span></a>
          </li>
          <!--li  *ngIf=" step == 3  " (click)="next()"  >
          <claim-insert   [contexts]="contexts" [results]="results"  [projects]="projects" [show] = "show"
            (showChange)="showChange($event)" [(properties)] = properties></claim-insert>

          </li-->
      </ul>
  <div class="uk-section uk-section-default uk-padding-remove-top">
     <div style="border: 1px solid #eee;" class="uk-container uk-margin-top">

      <!--ul uk-accordion class="uk-background-muted uk-padding-small uk-margin-remove-bottom basket-accordion">
        <li>
            <h3 class=" uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title uk-text-danger">

            <span class="uk-icon"><svg xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" height="28px" id="my-box" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="28px" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px"><g>	<path d="M480,320v128H32V320h78.859l64.016,96h162.25l64-96H480 M384,32H128L0,288v192h512V288L384,32L384,32z M35.781,288l112-224 h216.438l112,224H384l-64,96H192l-64.016-96H35.781L35.781,288z" fill="#b5b5b5"></path></g> </svg> </span>
            <span *ngIf="(projects.length + contexts.length + results.length)> 0" class="uk-badge basket-badge ">{{(projects.length + contexts.length + results.length) | number}}</span>
          </h3>
            <div class="uk-accordion-content dropbasket uk-padding-small uk-margin uk-grid-match uk-child-width-1-1 uk-child-width-1-1@m uk-grid uk-grid-stack">
              <claim-selected-projects   title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
                (showChange)="showChange($event)"   > </claim-selected-projects>

             <claim-selected-contexts  title="link Communities" [contexts]="contexts"  [projects]="projects"  [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType
             (showChange)="showChange($event)"  > </claim-selected-contexts>
             <claim-selected-results *ngIf="step!=3"  title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" showSearch=false  showAccessRights=false>
             </claim-selected-results>
            </div>
        </li>
    </ul-->

                <div *ngIf="step==1">

                   <ul class=" uk-tab uk-margin-remove-bottom" uk-tab="connect: #tabs; animation: uk-animation-fade">
                           <li>
                              <a>Projects ({{projects.length | number}})</a>
                          </li>
                          <li>
                             <a>Communities ({{contexts.length | number}})</a>
                         </li>
                    </ul>
                    <ul id="tabs" class="uk-switcher   uk-width-1-1">
                      <li>

                               <claim-projects-search-form     [(selectedProjects)]="projects"    [(properties)] = properties [localStoragePrefix]=localStoragePrefix> </claim-projects-search-form>
                     </li>
                      <li>

                          <claim-contexts-search-form   [communityId]=communityId   [(selectedList)]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineResult" [(properties)]=properties [localStoragePrefix]=localStoragePrefix> </claim-contexts-search-form>
                      </li>

              </ul>
            </div>


        <div *ngIf="step==2 ">

            <div  class="uk-width-1-1 uk-card uk-card-default uk-padding ">
              <div class=" uk-padding-small uk-padding-remove-bottom   ">
              <!--span *ngIf="bulkMode"   class=" uk-animation uk-float-right">
                <span   title= "Bulk mode"> Upload  DOIs in bulk mode <i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></span>
                <a   title= "Switch to Search mode"  (click)="bulkMode = !bulkMode;"> Search online for research results <span class="uk-icon">
                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
                    </span></a>
              </span>
              <span *ngIf="!bulkMode"   class=" uk-animation uk-float-right">
                <a   title= "Upload  DOIs in bulk mode"   (click)="bulkMode = !bulkMode;">Upload  DOIs in bulk mode <i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></a>
                <span   title= "Search mode"> Search online for research results <span class="uk-icon">
                    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
                    </span></span>
              </span-->
              </div>
              <claim-result-search-form   [selectedResults]="results"  [(properties)]=properties [localStoragePrefix]=localStoragePrefix> </claim-result-search-form>
              <div class="uk-text-lead">Or </div>

              <bulk-claim   [results]="results" [(properties)] = properties [localStoragePrefix]=localStoragePrefix> </bulk-claim>
            </div>
        </div>
        <div *ngIf="step==3" class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">
          <div class=" uk-grid uk-margin-small-top">
            <div class="uk-width-expand uk-margin-left">
              <claim-selected-results   title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" showSearch = false  showAccessRights = true [localStoragePrefix]=localStoragePrefix>
              </claim-selected-results>
            </div>
            <helper  div="link-metadata" styleName="uk-width-medium"></helper>
          </div>
        </div>


    </div>
</div>
        <ul class=" uk-pagination uk-flex-center uk-margin-auto uk-text-center">
            <li  *ngIf="step !=1 " (click)="step=step-1;"  ><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>
             <li  *ngIf="step !=3 " (click)="step=step + 1;"  >
              <a>Next <span uk-pagination-next></span></a>
            </li>
            <li  *ngIf=" step == 3  " (click)="next()"  >
            <!--claim-insert   [contexts]="contexts" [results]="results"  [projects]="projects" [show] = "show"
              (showChange)="showChange($event)" [(properties)] = properties></claim-insert-->

            </li>
        </ul>
        <claim-insert *ngIf=" step == 3  "  [contexts]="contexts" [results]="results"  [projects]="projects" [show] = "show"
          (showChange)="showChange($event)" [(properties)] = properties [localStoragePrefix]=localStoragePrefix></claim-insert>
      </div>
      <helper position="right" styleName=" uk-width-1-5"></helper>
    </div>
    <helper position="bottom"></helper>
  </div>


</div>

</div>
</div>
</div>