honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added office ui fabric responsive classes (note: still facing responsive issues) and added a office ui fabric refresh icon. The icon for some reason isn't displaying (same issue with the property pane)

This commit is contained in:
dhartman 2016-10-12 16:21:31 -04:00
parent 385ac09078
commit e2e9108b77
4 changed files with 64 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/angular-search/src/webparts/angularSearch/AngularSearch.module.scss
View File

@ -19,3 +19,8 @@
text-decoration: none;
}
}
//removes the checkbox from the hover event of ms-ListItem's
:global .ms-ListItem.is-selectable:hover:before {
border: none !important;
}

3
samples/angular-search/src/webparts/angularSearch/app/DataService.ts
View File

@ -13,7 +13,8 @@ export default class DataService implements IDataService {
const deferred: ng.IDeferred<ISearchResults> = this.$q.defer();
this.$http({
url: `${webUrl}/_api/search/query?queryText='ContentType:"${contentType}"'`,
url: `${webUrl}/_api/search/query?queryText='ContentType:"${contentType}"
Path:${webUrl}'&selectproperties='Title,Author,HitHighlightedSummary,PublishingImage,Url'`,
method: 'GET',
headers: {
'Accept': 'application/json;odata=verbose'

22
samples/angular-search/src/webparts/angularSearch/app/HomeController.ts
View File

@ -12,6 +12,7 @@ export default class HomeController {
public styles: any = null;
public searchNotConfigured: boolean = true;
public items: any[] = [];
public searching: boolean = false;
private _web: string = null;
private _contentType: string = undefined;
@ -19,7 +20,7 @@ export default class HomeController {
constructor(private dataService: IDataService, private $rootScope: ng.IRootScopeService, private $scope: ng.IScope, private $attrs: ng.IAttributes) {
const vm: HomeController = this;
vm.styles = $attrs['style'];
vm.styles = angular.fromJson($attrs['style']);
vm._web = $attrs['web'];
vm._contentType = $attrs['contenttype'] === "" ? undefined : $attrs['contenttype'];
@ -55,11 +56,15 @@ export default class HomeController {
}
public getSearchResults(): void {
this.status = 'Loading search results...';
//display searching message
this.searching = true;
this.dataService.getSearchResults(this._web, this._contentType)
.then((results: ISearchResults): void => {
this.items = this._setSearchResults(results.PrimaryQueryResult.RelevantResults.Table.Rows.results);
console.log(this.items);
//hide searching message
this.searching = false;
});
}
@ -71,7 +76,20 @@ export default class HomeController {
var val: Object = {};
result.Cells.results.forEach((cell: ICellValue) => {
if (cell.Key == 'HitHighlightedSummary'){
//need to replace <ddd> markup
val[cell.Key] = cell.Value.replace(/ <ddd\/>/g, '.');
}
else if (cell.Key == 'PublishingImage' && cell.Value !== null) {
//need to pull image url out of PublishingImage field
let div = document.createElement('div');
div.innerHTML = cell.Value;
let img = div.getElementsByTagName('img')[0];
val[cell.Key] = img.src;
}
else {
val[cell.Key] = cell.Value;
}
});
temp.push(val);

64
samples/angular-search/src/webparts/angularSearch/app/home-template.html
View File

@ -1,30 +1,40 @@
<div class="{{::vm.styles.angularTemplate}}">
<div class="{{::vm.styles.container}}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white {{::vm.styles.row}}">
<div class="ms-Grid-col ms-u-lg10 ms-u-x-18 ms-u-xlPush2 ms-u-lgPush1">
<span class="ms-font-xl ms-fontColor-white">
<div class="ms-Grid">
<div class="">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white {{::vm.styles.row}}">
<div class="ms-Grid-col ms-u-lg10 ms-u-x-18 ms-u-xlPush2 ms-u-lgPush1">
<span class="ms-font-xl ms-fontColor-white">
Sample SharePoint Search in Angular
</span>
</div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark mg-fontColor-white ${::vm.styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-x-18 ms-u-xlPush2 ms-u-lgPush1">
<uif-button ng-click="vm.getSearchResults()" ng-disabled="vm.searchNotConfigured">
Refresh Search Results
</uif-button>
</div>
</div>
<div class="ms-Grid-row ms-bgColor-themeDark mg-fontColor-white ${::vm.styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-x-18 ms-u-xlPush2 ms-u-lgPush1">
<div class="ms-fontColor-white">{{vm.status}}</div>
</div>
</div>
<uif-list>
<uif-list-item ng-repeat="item in vm.items">
<uif-list-item-primary-text>{{item.Title}}</uif-list-item-primary-text>
<uif-list-item-secondary-text>By: {{item.Author}}</uif-list-item-secondary-text>
<uif-list-item-tertiary-text>{{item.HitHighlightedSummary}}</uif-list-item-tertiary-text>
</uif-list>
</div>
<uif-button type="button" ng-click="vm.getSearchResults()" ng-disabled="vm.searchNotConfigured">
<i class="ms-Icon ms-Icon--Refresh" title="Refresh" aria-hidden="true"></i>
</uif-button>
</div>
</div>
<div class="ms-Grid-row" ng-show="vm.searching">
<div class="ms-Grid-col ms-u-smPush6 ms-u-mdPush6 ms-u-lgPush6 ms-u-xlPush6">
<uif-spinner uif-size="large">Searching...</uif-spinner>
</div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm-12">
<div ng-show="!vm.searching">
<uif-list uif-item-select-mode="single">
<uif-list-item ng-repeat="item in vm.items" uif-item="item">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm-12">
<uif-link ng-href="{{item.Url}}" style="text-decoration: none;">
<uif-list-item-image>
<img ng-src="{{item.PublishingImage}}" style="width: 80%" />
</uif-list-item-image>
<uif-list-item-primary-text>{{item.Title}}</uif-list-item-primary-text>
<uif-list-item-secondary-text>By: {{item.Author}}</uif-list-item-secondary-text>
<uif-list-item-tertiary-text>{{item.HitHighlightedSummary}}</uif-list-item-tertiary-text>
</uif-link>
</div>
</div>
</uif-list>
</div>
</div>
</div>
</div>
</div>