openaire-library/dashboard/plugins/components/learn-and-connect/plugin-learn-and-connect.form.component.ts

import {Component, EventEmitter, OnChanges, Output, SimpleChanges} from '@angular/core';
import {PluginBaseComponent, PluginEditEvent} from "../../utils/base-plugin.component";
import {HttpClient} from "@angular/common/http";
import {PluginLearnAndConnect} from "./plugin-learn-and-connect.component";
import {PluginOpenAIREProducts} from "../openaireProducts/plugin-openaire-products.component";

@Component({
  selector: 'plugin-learn-and-connect-form',
  template: `
    <div *ngIf="pluginObject" class="uk-padding-xsmall">
          <plugin-field-edit [value]=" pluginObject.title" 
                             type="text" field="title"   (changed)="valueChanged($event)" ></plugin-field-edit>
      
      <div class="uk-margin-top uk-text-muted">
        Cards:
      </div>
      
          <ng-container *ngFor="let card of  pluginObject.cardInfoArray;  let i = index">
              <div class="uk-grid uk-grid-small uk-margin-xsmall-top">
                    <div  *ngIf="selectedIndex != i" class="uk-text-small uk-width-3-4">{{card.title}}</div>
                <div   *ngIf="selectedIndex == i"class="uk-margin-top">
                  <plugin-field-edit [value]="pluginObject.cardInfoArray[i].title"
                                     type="text" field="title"   (changed)="cardValueChanged(i, $event)" ></plugin-field-edit>
                </div>
                    <div class=" uk-width-auto">
                      <plugin-field-edit  [value]=" pluginObject.cardInfoArray[i].show"
                                         type="boolean" field="cardInfoArray"  (editClicked)="pluginEditEvent = $event" (changed)="cardShowChanged(i,$event)" >
                      
                      </plugin-field-edit>
                    </div>
                    <div class=" uk-width-auto">
                      <a *ngIf="selectedIndex != i" (click)="edit(i)">edit</a>
                        <a *ngIf="selectedIndex == i" (click)="selectedIndex = null">hide</a>
                    </div>
                <div *ngIf="selectedIndex == i" class="width-1-1">
                  
                  <div class="uk-margin-top">
                    <plugin-field-edit [value]="  pluginObject.cardInfoArray[i].description"
                                       type="text" field="description"   (changed)="cardValueChanged(i, $event)" ></plugin-field-edit>
                  </div>
                  <div class="uk-margin-top">
                    <plugin-field-edit [value]="  pluginObject.cardInfoArray[i].url"
                                       type="text" field="url"   (changed)="cardValueChanged(i, $event)" ></plugin-field-edit>
                  </div>
                  <div class="uk-margin-top">
                    <plugin-field-edit [value]="  pluginObject.cardInfoArray[i].linkText"
                                       type="text" field="linkText"   (changed)="cardValueChanged(i, $event)" ></plugin-field-edit>
                  </div>
                  <!--<div class="uk-margin-top">
                    <plugin-field-edit [value]="pluginObject && pluginObject.cardInfoArray[i].show?pluginObject.cardInfoArray[i].show:pluginDefaultObject.cardInfoArray[i].show"
                                       type="boolean" field="show"   (changed)="cardValueChanged(i, $event)" ></plugin-field-edit>
                  </div>-->
                </div>
              </div>
          
     
          </ng-container>
    </div>
  
  `,


})
export class PluginLearnAndConnectFormComponent extends PluginBaseComponent<PluginLearnAndConnect> /*implements OnChanges*/{
  selectedIndex = null;
  default = new PluginLearnAndConnect();
  constructor(http:HttpClient) {
    super()
    // this.default = new PluginLearnAndConnect();
  }
  /*ngOnInit(): void {
    if(this.pluginTemplate && (!this.pluginDefaultObject || !this.pluginDefaultObject.title)){
      this.pluginTemplate.object = new PluginLearnAndConnect();
    }
  }*/

  /*ngOnChanges(changes: SimpleChanges) {
    console.log("changes")
    if(changes.plugin){
      console.log("changes plugin", changes.plugin)
    }else if (changes.pluginTemplate){
      console.log("changes pluginTemplate", changes.pluginTemplate)
    }
  }

*/
  cardShowChanged(i,$event:PluginEditEvent){
    if(this.editTemplate){
      this.pluginTemplate.object.cardInfoArray[i].show=$event.value;
      $event.value =this.pluginTemplate.object.cardInfoArray;
    }else{
      this.plugin.object.cardInfoArray[i].show=$event.value;
      $event.value =this.plugin.object.cardInfoArray;
    }

    this.valuesChanged.emit({field:$event.field, value: $event.value, type: 'parent'})
  }

  cardValueChanged(i,$event:PluginEditEvent){
    if(this.editTemplate){
      this.pluginTemplate.object.cardInfoArray[i][$event.field]=$event.value;
      $event.value =this.pluginTemplate.object.cardInfoArray;
    }else{
      this.plugin.object.cardInfoArray[i][$event.field]=$event.value;
      $event.value =this.plugin.object.cardInfoArray;
    }

    this.valuesChanged.emit({field:"cardInfoArray", value: $event.value, type: 'parent'})
  }

  edit(i){
    this.selectedIndex = i;
  }

}