Bugfix: Added backwards compability for old sort configurations

Bugfix: Added backwards compability for old empty refiner configurations
This commit is contained in:
Mikael Svenson 2019-01-07 13:32:25 +01:00
parent e587071d01
commit 2ec6d1504f
3 changed files with 162 additions and 133 deletions

View File

@ -56,14 +56,15 @@ Version|Date|Comments
1.3 | Apr1, 2018 | Added the result count + entered keywords option 1.3 | Apr1, 2018 | Added the result count + entered keywords option
1.4 | May 10, 2018 | <ul><li>Added the query suggestions feature to the search box Web Part</li><li>Added the automatic translation for taxonomy filter values according to the current site locale.</li> <li>Added the option in the search box Web Part to send the query to an other page</ul> 1.4 | May 10, 2018 | <ul><li>Added the query suggestions feature to the search box Web Part</li><li>Added the automatic translation for taxonomy filter values according to the current site locale.</li> <li>Added the option in the search box Web Part to send the query to an other page</ul>
1.5 | Jul 2, 2018 | <ul><li>Added a templating feature for search results with Handlebars inspired by the [react-content-query-webpart](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-content-query-webpart) sample.</li><li>Upgraded to 1.5.1-plusbeta to use the new SPFx dynamic data feature instead of event aggregator for Web Parts communication.</li> <li>Code refactoring and reorganization.</ul> 1.5 | Jul 2, 2018 | <ul><li>Added a templating feature for search results with Handlebars inspired by the [react-content-query-webpart](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-content-query-webpart) sample.</li><li>Upgraded to 1.5.1-plusbeta to use the new SPFx dynamic data feature instead of event aggregator for Web Parts communication.</li> <li>Code refactoring and reorganization.</ul>
2.0.0.5 | Sept 18, 2018 | <ul><li>Upgraded to 1.6.0-plusbeta.</li><li>Added dynamic loading of parts needed in edit mode to reduce web part footprint.</li><li>Added configuration to sort.</li><li>Added option to set web part title.</li><li>Added result count tokens.</li><li>Added toggle to load/use handlebars helpers/moment.</li></ul> 2.0.5 | Sept 18, 2018 | <ul><li>Upgraded to 1.6.0-plusbeta.</li><li>Added dynamic loading of parts needed in edit mode to reduce web part footprint.</li><li>Added configuration to sort.</li><li>Added option to set web part title.</li><li>Added result count tokens.</li><li>Added toggle to load/use handlebars helpers/moment.</li></ul>
2.1.0.0 | Oct 14, 2018 | <ul><li>Bug fixes ([#641](https://github.com/SharePoint/sp-dev-fx-webparts/issues/641),[#642](https://github.com/SharePoint/sp-dev-fx-webparts/issues/642))</li><li>Added document and Office 365 videos previews for the list template.</li><li>Added SharePoint best bets support.</li></ul> 2.1.0 | Oct 14, 2018 | <ul><li>Bug fixes ([#641](https://github.com/SharePoint/sp-dev-fx-webparts/issues/641),[#642](https://github.com/SharePoint/sp-dev-fx-webparts/issues/642))</li><li>Added document and Office 365 videos previews for the list template.</li><li>Added SharePoint best bets support.</li></ul>
2.1.1.0 | Oct 30, 2018 | <ul><li>Bug fix for editing custom template.</li><li>Bug fix for dynamic loading of video helper library.</li><li>Added support for Page context query variables.</li><li>Added `getUniqueCount` helper function.</li></ul> 2.1.1 | Oct 30, 2018 | <ul><li>Bug fix for editing custom template.</li><li>Bug fix for dynamic loading of video helper library.</li><li>Added support for Page context query variables.</li><li>Added `getUniqueCount` helper function.</li></ul>
2.1.2.0 | Nov 9, 2018 | <ul><li>Bug fix for IE11.</li><li>Added date query variables.</li><li>Added support for both result source id and query template.</li><li>Added `getUniqueCount` helper function.</li></ul> 2.1.2 | Nov 9, 2018 | <ul><li>Bug fix for IE11.</li><li>Added date query variables.</li><li>Added support for both result source id and query template.</li><li>Added `getUniqueCount` helper function.</li></ul>
2.2.0.0 | Nov 11, 2018 | <ul><li>Upgraded to SPFx 1.7.0</li><li>Added a TypeScript Azure Function to demonstrate NLP processing on search query</li><li>Removed extension data source. Now we use the default SPFx 'Page Environment' data source.</li></ul> 2.2.0 | Nov 11, 2018 | <ul><li>Upgraded to SPFx 1.7.0</li><li>Added a TypeScript Azure Function to demonstrate NLP processing on search query</li><li>Removed extension data source. Now we use the default SPFx 'Page Environment' data source.</li></ul>
2.2.0.1 | Dec 3, 2018 | <ul><li>Remove switch for handlebar helpers, and instead load helpers if used in the template.</li></ul> 2.2.0 | Dec 3, 2018 | <ul><li>Remove switch for handlebar helpers, and instead load helpers if used in the template.</li></ul>
2.3.0.0 | Dec 13, 2018 | <ul><li>Upgraded to @pnp/controls 1.13.0</li><li>Added a result types features</li><li>Fix bug regarding dynamic data source connection</li></ul> 2.3.0 | Dec 13, 2018 | <ul><li>Upgraded to @pnp/controls 1.13.0</li><li>Added a result types features</li><li>Fix bug regarding dynamic data source connection</li></ul>
2.4.0.0 | Jan 03, 2019 | Added custom code renderer support. 2.4.0 | Jan 03, 2019 | Added custom code renderer support.
2.4.1 | Jan 07, 2019 | Added backwards compability for older sort configurations, and old empty refiner configurations
## Important notice on upgrading the solution from pre v2.2.0.0 ## Important notice on upgrading the solution from pre v2.2.0.0
**Due to code restucturing we have hit an edge case which impacts upgrades from previous versions. To solve the issue go to `https://<tenant>.sharepoint.com/sites/<appcatalog>/Lists/ComponentManifests` and remove the entries for SearchBox and Search Results, and then upload the .sppkg for the new release.** **Due to code restucturing we have hit an edge case which impacts upgrades from previous versions. To solve the issue go to `https://<tenant>.sharepoint.com/sites/<appcatalog>/Lists/ComponentManifests` and remove the entries for SearchBox and Search Results, and then upload the .sppkg for the new release.**

View File

@ -1,6 +1,6 @@
{ {
"name": "pnp-react-search-refiners", "name": "pnp-react-search-refiners",
"version": "2.4.0", "version": "2.4.1",
"private": true, "private": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"

View File

@ -2,21 +2,21 @@
import * as ReactDom from 'react-dom'; import * as ReactDom from 'react-dom';
import { Version, Text, Environment, EnvironmentType, DisplayMode, Log } from '@microsoft/sp-core-library'; import { Version, Text, Environment, EnvironmentType, DisplayMode, Log } from '@microsoft/sp-core-library';
import { import {
BaseClientSideWebPart, BaseClientSideWebPart,
IPropertyPaneConfiguration, IPropertyPaneConfiguration,
PropertyPaneTextField, PropertyPaneTextField,
IWebPartPropertiesMetadata, IWebPartPropertiesMetadata,
PropertyPaneDynamicFieldSet, PropertyPaneDynamicFieldSet,
PropertyPaneDynamicField, PropertyPaneDynamicField,
DynamicDataSharedDepth, DynamicDataSharedDepth,
IPropertyPaneConditionalGroup, IPropertyPaneConditionalGroup,
IPropertyPaneField, IPropertyPaneField,
PropertyPaneToggle, PropertyPaneToggle,
PropertyPaneSlider, PropertyPaneSlider,
IPropertyPaneChoiceGroupOption, IPropertyPaneChoiceGroupOption,
PropertyPaneChoiceGroup, PropertyPaneChoiceGroup,
PropertyPaneCheckbox, PropertyPaneCheckbox,
PropertyPaneHorizontalRule, PropertyPaneHorizontalRule,
} from '@microsoft/sp-webpart-base'; } from '@microsoft/sp-webpart-base';
import * as strings from 'SearchResultsWebPartStrings'; import * as strings from 'SearchResultsWebPartStrings';
import SearchResultsContainer from './components/SearchResultsContainer/SearchResultsContainer'; import SearchResultsContainer from './components/SearchResultsContainer/SearchResultsContainer';
@ -94,34 +94,34 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
let queryKeywords; let queryKeywords;
let renderElement = null; let renderElement = null;
let dataSourceValue; let dataSourceValue;
let source = this.properties.queryKeywords.tryGetSource(); let source = this.properties.queryKeywords.tryGetSource();
// Try to get the source if a source id is present // Try to get the source if a source id is present
if (!source && this.properties.sourceId) { if (!source && this.properties.sourceId) {
source = this.context.dynamicDataProvider.tryGetSource(this.properties.sourceId); source = this.context.dynamicDataProvider.tryGetSource(this.properties.sourceId);
if (source && this.properties.propertyId) { if (source && this.properties.propertyId) {
dataSourceValue = source.getPropertyValue(this.properties.propertyId)[this.properties.propertyPath]; dataSourceValue = source.getPropertyValue(this.properties.propertyId)[this.properties.propertyPath];
} }
} else { } else {
dataSourceValue = this.properties.queryKeywords.tryGetValue(); dataSourceValue = this.properties.queryKeywords.tryGetValue();
} }
if (typeof(dataSourceValue) !== 'string') { if (typeof (dataSourceValue) !== 'string') {
dataSourceValue = ''; dataSourceValue = '';
this.context.propertyPane.refresh(); this.context.propertyPane.refresh();
} }
if (!dataSourceValue) { if (!dataSourceValue) {
queryKeywords = this.properties.defaultSearchQuery; queryKeywords = this.properties.defaultSearchQuery;
} else { } else {
queryKeywords = dataSourceValue; queryKeywords = dataSourceValue;
} }
const isValueConnected = !!source; const isValueConnected = !!source;
const searchContainer: React.ReactElement<ISearchResultsContainerProps> = React.createElement( const searchContainer: React.ReactElement<ISearchResultsContainerProps> = React.createElement(
SearchResultsContainer, SearchResultsContainer,
{ {
@ -163,7 +163,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
); );
if (isValueConnected && !this.properties.useDefaultSearchQuery || if (isValueConnected && !this.properties.useDefaultSearchQuery ||
isValueConnected && this.properties.useDefaultSearchQuery && this.properties.defaultSearchQuery || isValueConnected && this.properties.useDefaultSearchQuery && this.properties.defaultSearchQuery ||
!isValueConnected && !isEmpty(queryKeywords)) { !isValueConnected && !isEmpty(queryKeywords)) {
renderElement = searchContainer; renderElement = searchContainer;
} else { } else {
@ -176,7 +176,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
ReactDom.render(renderElement, this.domElement); ReactDom.render(renderElement, this.domElement);
} }
protected async onInit(): Promise<void> { protected async onInit(): Promise<void> {
this.initializeRequiredProperties(); this.initializeRequiredProperties();
@ -195,11 +195,11 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
this._resultService = new ResultService(); this._resultService = new ResultService();
this._codeRenderers = this._resultService.getRegisteredRenderers(); this._codeRenderers = this._resultService.getRegisteredRenderers();
if (this.properties.sourceId) { if (this.properties.sourceId) {
// Needed to retrieve manually the value for the dynamic property at render time. See the associated SPFx bug // Needed to retrieve manually the value for the dynamic property at render time. See the associated SPFx bug
// https://github.com/SharePoint/sp-dev-docs/issues/2985 // https://github.com/SharePoint/sp-dev-docs/issues/2985
this.context.dynamicDataProvider.registerSourceChanged(this.properties.sourceId, this.render); this.context.dynamicDataProvider.registerSourceChanged(this.properties.sourceId, this.render);
} }
// Set the default search results layout // Set the default search results layout
this.properties.selectedLayout = this.properties.selectedLayout ? this.properties.selectedLayout : ResultsLayoutOption.List; this.properties.selectedLayout = this.properties.selectedLayout ? this.properties.selectedLayout : ResultsLayoutOption.List;
@ -207,9 +207,27 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
return super.onInit(); return super.onInit();
} }
private _convertToSortConfig(sortList: string): ISortFieldConfiguration[] {
let pairs = sortList.split(',');
return pairs.map(sort => {
let direction;
let kvp = sort.split(':');
if (kvp[1].toLocaleLowerCase().trim() === "ascending") {
direction = ISortFieldDirection.Ascending;
} else {
direction = ISortFieldDirection.Descending;
}
return {
sortField: kvp[0].trim(),
sortDirection: direction
} as ISortFieldConfiguration;
});
}
private _convertToSortList(sortList: ISortFieldConfiguration[]): Sort[] { private _convertToSortList(sortList: ISortFieldConfiguration[]): Sort[] {
return sortList.map(e => { return sortList.map(e => {
let direction; let direction;
switch (e.sortDirection) { switch (e.sortDirection) {
@ -247,31 +265,41 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
private initializeRequiredProperties() { private initializeRequiredProperties() {
this.properties.queryTemplate = this.properties.queryTemplate ? this.properties.queryTemplate : "{searchTerms} Path:{Site}"; this.properties.queryTemplate = this.properties.queryTemplate ? this.properties.queryTemplate : "{searchTerms} Path:{Site}";
if(isEmpty(this.properties.refiners)) {
this.properties.refiners = [];
}
this.properties.refiners = Array.isArray(this.properties.refiners) ? this.properties.refiners : [ this.properties.refiners = Array.isArray(this.properties.refiners) ? this.properties.refiners : [
{ {
refinerName: "Created", refinerName: "Created",
displayValue: "Created Date" displayValue: "Created Date"
}, },
{ {
refinerName: "Size", refinerName: "Size",
displayValue: "Size of the file" displayValue: "Size of the file"
}, },
{ {
refinerName: "owstaxidmetadataalltagsinfo", refinerName: "owstaxidmetadataalltagsinfo",
displayValue: "Tags" displayValue: "Tags"
} }
]; ];
if(!Array.isArray(this.properties.sortList) && !isEmpty(this.properties.sortList)) {
this.properties.sortList = this._convertToSortConfig(this.properties.sortList);
}
this.properties.sortList = Array.isArray(this.properties.sortList) ? this.properties.sortList : [ this.properties.sortList = Array.isArray(this.properties.sortList) ? this.properties.sortList : [
{ {
sortField: "Created", sortField: "Created",
sortDirection: ISortFieldDirection.Ascending sortDirection: ISortFieldDirection.Ascending
}, },
{ {
sortField: "Size", sortField: "Size",
sortDirection: ISortFieldDirection.Descending sortDirection: ISortFieldDirection.Descending
} }
]; ];
this.properties.sortableFields = Array.isArray(this.properties.sortableFields) ? this.properties.sortableFields : []; this.properties.sortableFields = Array.isArray(this.properties.sortableFields) ? this.properties.sortableFields : [];
this.properties.selectedProperties = this.properties.selectedProperties ? this.properties.selectedProperties : "Title,Path,Created,Filename,SiteLogo,PreviewUrl,PictureThumbnailURL,ServerRedirectedPreviewURL,ServerRedirectedURL,HitHighlightedSummary,FileType,contentclass,ServerRedirectedEmbedURL,DefaultEncodingURL,owstaxidmetadataalltagsinfo"; this.properties.selectedProperties = this.properties.selectedProperties ? this.properties.selectedProperties : "Title,Path,Created,Filename,SiteLogo,PreviewUrl,PictureThumbnailURL,ServerRedirectedPreviewURL,ServerRedirectedURL,HitHighlightedSummary,FileType,contentclass,ServerRedirectedEmbedURL,DefaultEncodingURL,owstaxidmetadataalltagsinfo";
this.properties.maxResultsCount = this.properties.maxResultsCount ? this.properties.maxResultsCount : 10; this.properties.maxResultsCount = this.properties.maxResultsCount ? this.properties.maxResultsCount : 10;
this.properties.resultTypes = Array.isArray(this.properties.resultTypes) ? this.properties.resultTypes : []; this.properties.resultTypes = Array.isArray(this.properties.resultTypes) ? this.properties.resultTypes : [];
@ -287,7 +315,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
}, },
groups: [ groups: [
this._getSearchQueryFields() this._getSearchQueryFields()
] ]
}, },
{ {
header: { header: {
@ -320,7 +348,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
} }
}; };
} }
protected async loadPropertyPaneResources(): Promise<void> { protected async loadPropertyPaneResources(): Promise<void> {
// Code editor component for result types // Code editor component for result types
@ -330,10 +358,10 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
); );
// tslint:disable-next-line:no-shadowed-variable // tslint:disable-next-line:no-shadowed-variable
const { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } = await import ( const { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } = await import(
/* webpackChunkName: 'search-property-pane' */ /* webpackChunkName: 'search-property-pane' */
'@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor' '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor'
); );
this._propertyFieldCodeEditor = PropertyFieldCodeEditor; this._propertyFieldCodeEditor = PropertyFieldCodeEditor;
this._propertyFieldCodeEditorLanguages = PropertyFieldCodeEditorLanguages; this._propertyFieldCodeEditorLanguages = PropertyFieldCodeEditorLanguages;
@ -347,10 +375,10 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
if (propertyPath === 'selectedLayout') { if (propertyPath === 'selectedLayout') {
// Refresh setting the right template for the property pane // Refresh setting the right template for the property pane
if(!this.codeRendererIsSelected()) { if (!this.codeRendererIsSelected()) {
await this._getTemplateContent(); await this._getTemplateContent();
} }
if(this.codeRendererIsSelected) { if (this.codeRendererIsSelected) {
this.properties.customTemplateFieldValues = undefined; this.properties.customTemplateFieldValues = undefined;
} }
@ -375,7 +403,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
await this.loadPropertyPaneResources(); await this.loadPropertyPaneResources();
} }
protected onBeforeSerialize() { protected onBeforeSerialize() {
this._saveDataSourceInfo(); this._saveDataSourceInfo();
super.onBeforeSerialize(); super.onBeforeSerialize();
} }
@ -384,18 +412,18 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
* Save the useful information for the connected data source. * Save the useful information for the connected data source.
* They will be used to get the value of the dynamic property if this one fails. * They will be used to get the value of the dynamic property if this one fails.
*/ */
private _saveDataSourceInfo() { private _saveDataSourceInfo() {
if (this.properties.queryKeywords.reference) { if (this.properties.queryKeywords.reference) {
this.properties.sourceId = this.properties.queryKeywords["_reference"]._sourceId; this.properties.sourceId = this.properties.queryKeywords["_reference"]._sourceId;
this.properties.propertyId = this.properties.queryKeywords["_reference"]._property; this.properties.propertyId = this.properties.queryKeywords["_reference"]._property;
this.properties.propertyPath = this.properties.queryKeywords["_reference"]._propertyPath; this.properties.propertyPath = this.properties.queryKeywords["_reference"]._propertyPath;
} else { } else {
this.properties.sourceId = null; this.properties.sourceId = null;
this.properties.propertyId = null; this.properties.propertyId = null;
this.properties.propertyPath = null; this.properties.propertyPath = null;
} }
} }
/** /**
* Opens the Web Part property pane * Opens the Web Part property pane
@ -522,12 +550,12 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
let itemProp; let itemProp;
if (pageProp.indexOf(".Label") !== -1 || pageProp.indexOf(".TermID") !== -1) { if (pageProp.indexOf(".Label") !== -1 || pageProp.indexOf(".TermID") !== -1) {
let term = pageProp.split("."); let term = pageProp.split(".");
// Handle multi or single values // Handle multi or single values
if (item[term[0]].length > 0) { if (item[term[0]].length > 0) {
itemProp = item[term[0]].map(e => { return e[term[1]]; }).join(','); itemProp = item[term[0]].map(e => { return e[term[1]]; }).join(',');
} else { } else {
itemProp = item[term[0]][term[1]]; itemProp = item[term[0]][term[1]];
} }
} else { } else {
itemProp = item[pageProp]; itemProp = item[pageProp];
@ -548,7 +576,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
const d = new Date(); const d = new Date();
queryTemplate = queryTemplate.replace(currentDate, d.getDate().toString()); queryTemplate = queryTemplate.replace(currentDate, d.getDate().toString());
queryTemplate = queryTemplate.replace(currentMonth, (d.getMonth()+1).toString()); queryTemplate = queryTemplate.replace(currentMonth, (d.getMonth() + 1).toString());
queryTemplate = queryTemplate.replace(currentYear, d.getFullYear().toString()); queryTemplate = queryTemplate.replace(currentYear, d.getFullYear().toString());
return queryTemplate; return queryTemplate;
@ -558,7 +586,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
* Determines the group fields for the search settings options inside the property pane * Determines the group fields for the search settings options inside the property pane
*/ */
private _getSearchSettingsFields(): IPropertyPaneField<any>[] { private _getSearchSettingsFields(): IPropertyPaneField<any>[] {
// Sets up search settings fields // Sets up search settings fields
const searchSettingsFields: IPropertyPaneField<any>[] = [ const searchSettingsFields: IPropertyPaneField<any>[] = [
PropertyPaneTextField('queryTemplate', { PropertyPaneTextField('queryTemplate', {
@ -707,7 +735,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
return { return {
primaryGroup: { primaryGroup: {
groupFields: [ groupFields: [
PropertyPaneTextField('queryKeywords', { PropertyPaneTextField('queryKeywords', {
label: strings.SearchQueryKeywordsFieldLabel, label: strings.SearchQueryKeywordsFieldLabel,
description: strings.SearchQueryKeywordsFieldDescription, description: strings.SearchQueryKeywordsFieldDescription,
@ -720,20 +748,20 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
] ]
}, },
secondaryGroup: { secondaryGroup: {
groupFields: [ groupFields: [
PropertyPaneDynamicFieldSet({ PropertyPaneDynamicFieldSet({
label: strings.SearchQueryKeywordsFieldLabel, label: strings.SearchQueryKeywordsFieldLabel,
fields: [ fields: [
PropertyPaneDynamicField('queryKeywords', { PropertyPaneDynamicField('queryKeywords', {
label: strings.SearchQueryKeywordsFieldLabel label: strings.SearchQueryKeywordsFieldLabel
}) })
], ],
sharedConfiguration: { sharedConfiguration: {
depth: DynamicDataSharedDepth.Source, depth: DynamicDataSharedDepth.Source,
}, },
}), }),
].concat(defaultSearchQueryFields) ].concat(defaultSearchQueryFields)
}, },
// Show the secondary group only if the web part has been // Show the secondary group only if the web part has been
// connected to a dynamic data source // connected to a dynamic data source
@ -746,7 +774,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
this.properties.queryKeywords.setValue(''); this.properties.queryKeywords.setValue('');
this.render(); this.render();
} }
} as IPropertyPaneConditionalGroup; } as IPropertyPaneConditionalGroup;
} }
/** /**
@ -771,14 +799,14 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
key: ResultsLayoutOption.Tiles key: ResultsLayoutOption.Tiles
} }
] as IPropertyPaneChoiceGroupOption[]; ] as IPropertyPaneChoiceGroupOption[];
layoutOptions.push(...this.getCodeRenderers()); layoutOptions.push(...this.getCodeRenderers());
layoutOptions.push({ layoutOptions.push({
iconProps: { iconProps: {
officeFabricIconFontName: 'Code' officeFabricIconFontName: 'Code'
}, },
text: strings.CustomLayoutOption, text: strings.CustomLayoutOption,
key: ResultsLayoutOption.Custom, key: ResultsLayoutOption.Custom,
}); });
@ -786,14 +814,14 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
const canEditTemplate = this.properties.externalTemplateUrl && this.properties.selectedLayout === ResultsLayoutOption.Custom ? false : true; const canEditTemplate = this.properties.externalTemplateUrl && this.properties.selectedLayout === ResultsLayoutOption.Custom ? false : true;
let dialogTextFieldValue; let dialogTextFieldValue;
if(!this.codeRendererIsSelected()) { if (!this.codeRendererIsSelected()) {
switch (this.properties.selectedLayout) { switch (this.properties.selectedLayout) {
case ResultsLayoutOption.List: case ResultsLayoutOption.List:
dialogTextFieldValue = BaseTemplateService.getDefaultResultTypeListItem(); dialogTextFieldValue = BaseTemplateService.getDefaultResultTypeListItem();
break; break;
case ResultsLayoutOption.Tiles: case ResultsLayoutOption.Tiles:
dialogTextFieldValue = BaseTemplateService.getDefaultResultTypeTileItem(); dialogTextFieldValue = BaseTemplateService.getDefaultResultTypeTileItem();
break; break;
default: default:
@ -826,7 +854,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
}), }),
]; ];
console.log(stylingFields); console.log(stylingFields);
if(!this.codeRendererIsSelected()) { if (!this.codeRendererIsSelected()) {
stylingFields.push( stylingFields.push(
this._propertyFieldCodeEditor('inlineTemplateText', { this._propertyFieldCodeEditor('inlineTemplateText', {
label: strings.DialogButtonLabel, label: strings.DialogButtonLabel,
@ -906,21 +934,21 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
title: "Inline template", title: "Inline template",
type: CustomCollectionFieldType.custom, type: CustomCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate) => { onCustomRender: (field, value, onUpdate) => {
return ( return (
React.createElement("div", null, React.createElement("div", null,
React.createElement(this._textDialogComponent.TextDialog, { React.createElement(this._textDialogComponent.TextDialog, {
language: this._propertyFieldCodeEditorLanguages.Handlebars, language: this._propertyFieldCodeEditorLanguages.Handlebars,
dialogTextFieldValue: value ? value : dialogTextFieldValue, dialogTextFieldValue: value ? value : dialogTextFieldValue,
onChanged: (fieldValue) => onUpdate(field.id, fieldValue), onChanged: (fieldValue) => onUpdate(field.id, fieldValue),
strings: { strings: {
cancelButtonText: strings.CancelButtonText, cancelButtonText: strings.CancelButtonText,
dialogButtonText: strings.DialogButtonText, dialogButtonText: strings.DialogButtonText,
dialogTitle: strings.DialogTitle, dialogTitle: strings.DialogTitle,
saveButtonText: strings.SaveButtonText saveButtonText: strings.SaveButtonText
} }
}) })
) )
); );
} }
}, },
{ {
@ -943,9 +971,9 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
onGetErrorMessage: this._onTemplateUrlChange.bind(this) onGetErrorMessage: this._onTemplateUrlChange.bind(this)
})); }));
} }
if(this.codeRendererIsSelected()) { if (this.codeRendererIsSelected()) {
const currentCodeRenderer = find(this._codeRenderers, (renderer) => renderer.id === (this.properties.selectedLayout as any)); const currentCodeRenderer = find(this._codeRenderers, (renderer) => renderer.id === (this.properties.selectedLayout as any));
if(!this.properties.customTemplateFieldValues) { if (!this.properties.customTemplateFieldValues) {
this.properties.customTemplateFieldValues = currentCodeRenderer.customFields.map(field => { this.properties.customTemplateFieldValues = currentCodeRenderer.customFields.map(field => {
return { return {
fieldName: field, fieldName: field,
@ -953,7 +981,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
}; };
}); });
} }
if(currentCodeRenderer.customFields && currentCodeRenderer.customFields.length > 0) { if (currentCodeRenderer.customFields && currentCodeRenderer.customFields.length > 0) {
const searchPropertyOptions = this.properties.selectedProperties.split(',').map(prop => { const searchPropertyOptions = this.properties.selectedProperties.split(',').map(prop => {
return ({ return ({
key: prop, key: prop,
@ -980,7 +1008,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
} }
] ]
})); }));
} }
} }
return stylingFields; return stylingFields;
@ -988,7 +1016,7 @@ export default class SearchResultsWebPart extends BaseClientSideWebPart<ISearchR
protected getCodeRenderers(): IPropertyPaneChoiceGroupOption[] { protected getCodeRenderers(): IPropertyPaneChoiceGroupOption[] {
const registeredRenderers = this._codeRenderers; const registeredRenderers = this._codeRenderers;
if(registeredRenderers && registeredRenderers.length > 0) { if (registeredRenderers && registeredRenderers.length > 0) {
return registeredRenderers.map(ca => { return registeredRenderers.map(ca => {
return { return {
key: ca.id, key: ca.id,