openaire-library/claims/directLinking/directLinking.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
  </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">
      <div *ngIf="validInput != null && !validInput" class="uk-alert uk-alert-warning" role="alert">No valid arguments provided in order to start linking openAIRE entities. </div>
      <div *ngIf="validInput != null && validInput">
      <!--div class="uk-clearfix">
          <a  class="uk-float-right" uk-toggle="target: #linkingInfo; animation:  uk-animation-fade"><span class="uk-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
            </span> More Information </a>
      </div>
      <div id="linkingInfo" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
          <a uk-toggle="target: #linkingInfo; animation:  uk-animation-fade" class="uk-float-right"><span class="uk-icon">
      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
      </span></a>
           <div class="uk-text-bold"><span class="uk-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" icon="info" ratio="1"><path d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg>
      </span> Linking Functionality:</div>
           <p>Through linking functioanilty you are able to create links from {{type}} to {{(linkTo =='context')?"communities/ concepts":((linkTo =='project')?"projects":"research results")}}. You have to select at least one {{(linkTo =='context')?"community/ concept":((linkTo =='project')?"project":"research result")}} in order to be able to proceed.</p>

           <p *ngIf="linkTo=='project'"><span class="uk-text-bold">Projects:</span> Search & add projects using keyword search. Limit the search space by specifying project Funder. </p>
           <p *ngIf="linkTo=='context'"><span class="uk-text-bold">Communities:</span> Search & add communities/ concepts by selecting community, category and using keyword search for . Or browse through the categories and add communities. </p>
           <p *ngIf="linkTo=='result'"><span class="uk-text-bold">Research Results:</span> You can search for reasearch results (publication and/ or research data) to link, in openaire, crossref, Orcid, and/ or Datacite. Use search mode, to search and add results through keyword search. Use upload mode, to upload a list of DOIs of results. </p>
           <p *ngIf="show=='claim' && linkTo=='result'"><span class="uk-text-bold">Review Metadata of research results:</span> The selected research results that came from 3rd party repositories (Datacite, Crossreff, Orcid), need review and change of metadata (such as access mode, and type)  before they are included in openaire information space.
           Please have in mind that ignoring this step, the research results will get the default values, that may be wrong.
           </p>



       </div-->
       <ul uk-accordion *ngIf=" ! (linkTo =='result' && show=='claim') ">
         <li>
             <h3 class=" uk-text-right uk-margin-remove-vertical uk-width-small uk-margin-auto-left uk-accordion-title basket-title ">
             <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 *ngIf=" linkTo == 'project' "   title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
                (showChange)="showChange($event)"   > </claim-selected-projects>

             <claim-selected-contexts *ngIf=" linkTo == 'context' "  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=" linkTo == 'result' "   title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" showSearch=false  showAccessRights=false>
             </claim-selected-results>
             </div>
         </li>
     </ul>
       <!--div *ngIf=" ! (linkTo =='result' && show=='claim') " >
         <div class="uk-clearfix">
             <a  class="uk-float-right" uk-toggle="target: #selected; animation:  uk-animation-fade">
               <span class="uk-icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="my-box"  x="0px" y="0px" width="28px" height="28px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><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"/></g>
                   </svg>
                 </span>

                </a>
         </div>
         <div id="selected" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>
              <claim-selected-projects *ngIf=" linkTo == 'project' "   title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType
               (showChange)="showChange($event)"   > </claim-selected-projects>

            <claim-selected-contexts *ngIf=" linkTo == 'context' "  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=" linkTo == 'result' "   title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" showSearch=false  showAccessRights=false>
            </claim-selected-results>
        </div>
      </div-->
        <div class="uk-text-large">
              Link {{(type=="project")?'Project':' Research result'}}:
        </div>
          <div class="uk-clearfix">
            <!--start-over [results]="results" [contexts]="contexts" [projects]="projects" [linkTo]="linkTo" [type]="type" ></start-over-->
          </div>
            <!-- inline result -->
              <div *ngIf="displayedResult != null && (type =='publication' || type =='dataset' || type=='software' )" class=" uk-margin-top  uk-card uk-card-default uk-padding uk-padding-large uk-padding-remove-left uk-margin-left uk-grid uk-grid-stack" uk-grid="">
                <div class="uk-width-1-1" >
                    <div>
                      <a *ngIf="displayedResult.url" target="_blank" href="{{displayedResult.url}}" > <span class="custom-external"></span> {{displayedResult.title}}</a>
                      <span *ngIf="!displayedResult.url" >{{displayedResult.title}}</span>
                    </div>
                    <div *ngIf="displayedResult.result.authors && displayedResult.result.authors.length >0 " class="uk-article-meta">Authors: <span *ngFor="let author of displayedResult.result.authors.slice(0,10) let i = index">{{author}}{{(i < (displayedResult.result.authors.slice(0,10).length-1))?"; ":""}}{{(i == displayedResult.result.authors.slice(0,10).length-1 && displayedResult.result.authors.length > 10)?"...":""}}</span></div>

                </div>

            </div>
            <!-- inline project -->
            <div *ngIf=" type == 'project' && projects.length > 0 "  class="uk-margin-top  uk-card uk-card-default uk-padding uk-padding-large uk-padding-remove-left uk-margin-left uk-grid uk-grid-stack" uk-grid="">
            {{projects[0].funderName}} | {{projects[0].projectName}} {{(projects[0].projectAcronym)?'('+projects[0].projectAcronym+')':''}}

            </div>

      <!-- search for entity -->

        <div class = "uk-margin-top">

                  <claim-projects-search-form *ngIf=" linkTo =='project'  "    [(selectedProjects)]="projects"   [(properties)] = properties > </claim-projects-search-form>

                  <claim-contexts-search-form   *ngIf=" linkTo =='context'  "   [(selectedList)]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineResult" [(properties)]=properties> </claim-contexts-search-form>

                  <claim-result-search-form *ngIf=" linkTo =='result' && show!='claim' "  [selectedResults]="results"  [(properties)]=properties > </claim-result-search-form>

          </div>
          <div  *ngIf="  show == 'claim'  "  class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l ">
            <claim-selected-results *ngIf=" linkTo =='result'  "  title= "Selected Research Results" [results]="results"  [bulkMode]=false showSearch = false  showAccessRights = true>
            </claim-selected-results>
            <div class="uk-width-1-1  uk-margin-small-top">
               <claim-insert   class="uk-float-right"  [contexts]="contexts" [results]="results"  [projects]="projects" [inlineEntity] = inlineResult  [show] = "show"
                        [(properties)]=properties></claim-insert>

              </div>
          </div>
          <ul *ngIf="linkTo == 'result'"  class="uk-pagination">
            <li  *ngIf="show == 'claim'"  (click)="show='result';"><a><span class="uk-margin-small-right" uk-pagination-previous></span>  Previous</a></li>
            <li  *ngIf="show != 'claim'"(click)="show='claim';" class="uk-margin-auto-left">
              <a>Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>
          </ul>


        </div>
        </div>
        <helper position="right" styleName=" uk-width-1-5"></helper>
    </div>
    <helper position="bottom"></helper>
  </div>
</div>
</div>
</div>