Search This Blog

Thursday, October 1, 2020

SPFx -AngularJs

 import {SalesLetterDataService,IList,ISLTypeMonthMaster,ISLCategoryMaster} from './SalesLetterService'; //class name(interface) mentioned here

export class SalesLetterController {
  public isLoading: boolean = false;
  public newItem: string = null;
  public userName: string = "";
  public userJobTitle: string = "";
  public webSiteTitle: string = "";
  public welComeMessage: string = "";
  public userImageUrl: string = "";
  public greetingMessage: string = "";
  public prefixWelcomeMessage: string = "Welcome to ";  

  //vairble
  public SalesLetterType: string = "";
  public SalesLetterTypeYear: string = "";
  public SalesLetterTypeMonth: string = "4";;   
  public SLTypeMaster:string="SLTypeMaster";
  public SLTypeMonthMaster:string="SLTypeMonthMaster";
  public SLTypeYearMaster:string="SLTypeYearMaster";
  public SLCategoryMaster:string="SLCategoryMaster";
  public SLTypeMasterListCollection: IList[] = [];  
  public SLTypeMonthMasterListCollection: ISLTypeMonthMaster[] = []; 
  public SLTypeYearMasterListCollection: IList[] = []; 
  public SLCategoryMasterListCollection: ISLCategoryMaster[] = []; 

   //NAInitiativeInfo
   public CheckboxNAInitiativeInfo = [];
   public SelectionCheckboxInformation = [];

  public static $inject: string[] = ['salesLetterDataService', '$window',"$scope"]; //import name based on app-mondule 
  constructor(private dataService: SalesLetterDataService, private $window: angular.IWindowService, private $scope: ng.IScope) {
       // tslint:disable-next-line: no-shadowed-variable 
       this.LoadAllMasterData();
  }
  private LoadAllMasterData(): void {
    this.isLoading = true;
   
    this.dataService.getListItems(this.SLTypeMaster,"/sites/dev/") .then((item: IList[]): void => {
        this.SLTypeMasterListCollection = item;
      })
      .finally((): void => {
        this.isLoading = false;
      });
      this.dataService.getListItems(this.SLTypeYearMaster,"/sites/dev/") .then((m: IList[]): void => {
        this.SLTypeYearMasterListCollection = m;
      })
      .finally((): void => {
        this.isLoading = false;
      });
      this.dataService.getMonthListItems(this.SLTypeMonthMaster,"/sites/dev/") .then((mItem: ISLTypeMonthMaster[]): void => {
        this.SLTypeMonthMasterListCollection = mItem;
        var i: number = 0;
        mItem.forEach(prd => {         
        if(mItem[i].QType=="1"){

        }          
          i++;
        });
      })
      .finally((): void => {
        this.isLoading = false;
      });
      this.dataService.getCategoryListItems(this.SLCategoryMaster,"/sites/dev/") .then((qItem: ISLCategoryMaster[]): void => {
        this.SLCategoryMasterListCollection = qItem;       
      })
      .finally((): void => {
        this.isLoading = false;
      });
    
  } 
  public getValues = () => {   
    if (new Date().getHours() > 0 && new Date().getHours() < 12) this.greetingMessage = "Good Morning ";
    else if (new Date().getHours() >= 12 && new Date().getHours() <= 5) this.greetingMessage = "Good Afternoon ";
    else if (new Date().getHours() > 5) this.greetingMessage = "Good Evening ";
    if (this.userName.length == 0) this.userName = "Jaisaravanan !";
    if (this.userJobTitle.length == 0) this.userJobTitle = "";
    if (this.webSiteTitle.length == 0) this.webSiteTitle = this.prefixWelcomeMessage + "Demo of SPFx Web Part";
    if (this.welComeMessage.length == 0) this.welComeMessage = this.greetingMessage + this.userName;
    // if (this.userImageUrl.length == 0)  
    // this.userImageUrl ="";  
    this.getUserInformation();
  }
  public getUserInformation = () => {
    this.dataService.getCurrentUserInformation().then(ig => {
      this.webSiteTitle = this.prefixWelcomeMessage + this.webSiteTitle;
      this.userImageUrl = ig.userImageUrl;
      //this.userName = this.userName;  
      this.userJobTitle = ig.userJobTitle;
      //this.$scope.$apply();
    });
  } 
}
export let SalesLetterComponent = {
  selector: "salesLetterComponent", //based on className and must be small case in first letter
  template: require("./CreateSalesLetter.html").toString(),
  bindings: {},
  controller: SalesLetterController 
};

--------------------------------------------------


import * as angular from 'angular';
import * as $pnp from "sp-pnp-js";
import { SPListOperations } from 'spfxhelper';
export interface ILoginUserProp {
  userImageUrl: string;
  userJobTitle: string;
  userName: string;
  webSiteTitle: string
}
export interface IListItem {
  Id: string;
  Title: string;
  Modified: Date;
  Created: Date;
  Modifiedby: string;
  Createdby: string;
}
export interface IList {
  Id: string;
  Title: string;
  Modified: Date;
  Created: Date;
}
export interface IList {
  Id: string;
  Title: string;
  Modified: Date;
  Created: Date;
}
export interface ISLTypeMonthMaster extends IList {
  QType: string;
}
export interface ISLTypeMonthMasterListItem extends IListItem {
  QType: string;
}
export interface ISLCategoryMaster extends IList {
  CategoryCode: string;
}
export interface ISLCategoryMasterListItem extends IListItem {
  CategoryCode: string;
}
export class SalesLetterDataService {
  public static $inject: string[] = ['$q', '$http'];
  constructor(private $q: angular.IQService, private $http: angular.IHttpService) { }
  public getListItems(listName: string, absoluteUrl: string): angular.IPromise<IList[]> {
    const deferred: angular.IDeferred<IList[]> = this.$q.defer();
    let url: string = absoluteUrl + `/_api/web/lists/getbytitle('${listName}')/items?$select=* &$orderby=Modified desc`;
    this.$http({
      url: url,
      method: 'GET',
      headers: {
        'Accept': 'application/json;odata=nometadata'
      }
    }).then((result: angular.IHttpPromiseCallbackArg<{ value: IListItem[] }>): void => {
      const info: IList[] = [];
      for (let i: number = 0; i < result.data.value.length; i++) {
        const p: IListItem = result.data.value[i];
        info.push({
          Id: p.Id,
          Title: p.Title,
          Modified: p.Modified,
          Created: p.Created
        });
      }
      deferred.resolve(info);
    });
    return deferred.promise;
  }
  public getMonthListItems(listName: string, absoluteUrl: string): angular.IPromise<ISLTypeMonthMaster[]> {
    const deferred: angular.IDeferred<ISLTypeMonthMaster[]> = this.$q.defer();
    let url: string = absoluteUrl + `/_api/web/lists/getbytitle('${listName}')/items?$select=* &$orderby=Modified desc`;
    this.$http({
      url: url,
      method: 'GET',
      headers: {
        'Accept': 'application/json;odata=nometadata'
      }
    }).then((result: angular.IHttpPromiseCallbackArg<{ value: ISLTypeMonthMasterListItem[] }>): void => {
      const info: ISLTypeMonthMaster[] = [];
      for (let i: number = 0; i < result.data.value.length; i++) {
        const q: ISLTypeMonthMasterListItem = result.data.value[i];
        info.push({
          Id: q.Id,
          Title: q.Title,
          QType: q.QType,
          Modified: q.Modified,
          Created: q.Created
        });
      }
      deferred.resolve(info);
    });
    return deferred.promise;
  }
  public getCategoryListItems(listName: string, absoluteUrl: string): angular.IPromise<ISLCategoryMaster[]> {
    const deferred: angular.IDeferred<ISLCategoryMaster[]> = this.$q.defer();
    let url: string = absoluteUrl + `/_api/web/lists/getbytitle('${listName}')/items?$select=* &$orderby=Modified desc`;
    this.$http({
      url: url,
      method: 'GET',
      headers: {
        'Accept': 'application/json;odata=nometadata'
      }
    }).then((result: angular.IHttpPromiseCallbackArg<{ value: ISLCategoryMasterListItem[] }>): void => {
      const info: ISLCategoryMaster[] = [];
      for (let i: number = 0; i < result.data.value.length; i++) {
        const q: ISLCategoryMasterListItem = result.data.value[i];
        info.push({
          Id: q.Id,
          Title: q.Title,
          CategoryCode: q.CategoryCode,
          Modified: q.Modified,
          Created: q.Created
        });
      }
      deferred.resolve(info);
    });
    return deferred.promise;
  }
  public getCurrentUserInformation = (): Promise<ILoginUserProp> => {
    let promise = new Promise<ILoginUserProp>((resolve, reject) => {
      let ig: ILoginUserProp = {
        userImageUrl: "",
        userJobTitle: "",
        userName: "",
        webSiteTitle: ""
      };
      $pnp.sp.profiles.myProperties.get().then(data => {
        data.UserProfileProperties.forEach(property => {
          if (property.Key == "Title") {
            ig.userJobTitle = property.Value;
          }
          if (property.Key == "PictureURL") {
            if (property.Value !== '') {
              ig.userImageUrl = property.Value;
            } else {
              ig.userImageUrl = "#";
            }
            ig.userImageUrl = ig.userImageUrl.replace("MThumb", "LThumb");
          }
        });
        resolve(ig);
      }, error => {
        reject(error);
      });
    });
    return promise;
  }
}

---------------------------------------------
 <div class="row" data-ng-controller="salesLetterController as ctrl">
       <div class="col-md-6  pt-1">
          <select name="ddlSLTypeMaster" id="ddlSLTypeMaster" class="form-control form-control-sm" ng-model="ctrl.SalesLetterType" required>
                          <option ng-repeat="item in ctrl.SLTypeMasterListCollection" ng-selected="ctrl.SalesLetterType == item.Title" value="{{item.Title}}">{{item.Title}}</option>
                            <option value="">--Select--</option>
          </select>
                                                              </div>
   <div class="col-md-3  pt-1">
            <select name="ddlSLTypeMonth" id="ddlSLTypeMonth" class="form-control form-control-sm" ng-change="getSLMonthType()" ng-model="ctrl.SalesLetterTypeMonth" required>
                    <option ng-repeat="item in ctrl.SLTypeMonthMasterListCollection" ng-selected="ctrl.SalesLetterTypeMonth == item.QType" value="{{item.QType}}">{{item.Title}}</option>
                         <option value="">--Select--</option>
          </select>
        </div>
    <div class="col-md-3  pt-1">
            <select name="ddlSLTypeYear" id="ddlSLTypeYear" class="form-control form-control-sm" ng-change="getSLMonthType()" ng-model="ctrl.SalesLetterTypeYear " required>
                   <option ng-repeat="item in ctrl.SLTypeYearMasterListCollection" ng-selected="ctrl.SalesLetterTypeYear == item.Title" value="{{item.Title}}">{{item.Title}}</option>
                       <option value="">--Select--</option>
                         </select>
             </div>
  </div>



No comments:

Post a Comment