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

Merge pull request #1702 from Ravikadri/master

This commit is contained in:
Hugo Bernier 2021-02-11 01:14:30 -05:00 committed by GitHub
parent e7110d587a 4cbf311829
commit 0e55eaa1c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 7947 additions and 8088 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
samples/js-modern-calendar/README.md
View File

@ -14,14 +14,22 @@ extensions:
# Modern Calendar # Modern Calendar
## Summary ## Summary
This is a modern webpart built on the GA version of the [SharePoint Framework](https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) demonstrating how to build a custom web part with a calendar capabilities in it.
This is a modern web part built on the GA version of the [SharePoint Framework](https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) demonstrating how to build a custom web part with a calendar capabilities in it.
![SS1](https://cloud.githubusercontent.com/assets/13068139/23584809/14c4333e-0121-11e7-9bf1-3117651222d3.png) ![SS1](https://cloud.githubusercontent.com/assets/13068139/23584809/14c4333e-0121-11e7-9bf1-3117651222d3.png)
![SS2](https://cloud.githubusercontent.com/assets/13068139/23584808/14c3ec26-0121-11e7-8be8-65fbcca32b62.png) ![SS2](https://cloud.githubusercontent.com/assets/13068139/23584808/14c3ec26-0121-11e7-8be8-65fbcca32b62.png)
![SS3](https://cloud.githubusercontent.com/assets/13068139/23584807/14b88f34-0121-11e7-8c91-56ecff9343e1.png) ![SS3](https://cloud.githubusercontent.com/assets/13068139/23584807/14b88f34-0121-11e7-8c91-56ecff9343e1.png)
## Used SharePoint Framework Version
![drop](https://img.shields.io/badge/version-1.6.0-green.svg) ## Compatibility
![SPFx 1.11](https://img.shields.io/badge/SPFx-1.11.0-green.svg)
![Node.js LTS 10.x](https://img.shields.io/badge/Node.js-LTS%2010.x-green.svg)
![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams")
![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
## Applies to ## Applies to
@ -38,6 +46,7 @@ Solution|Author(s)
--------|--------- --------|---------
js-modern-calendar | Jeremy Coleman (MCP, PC Professional, Inc.) js-modern-calendar | Jeremy Coleman (MCP, PC Professional, Inc.)
js-modern-calendar | Nanddeep Nachan ([@NanddeepNachan](twitter.com/NanddeepNachan)) js-modern-calendar | Nanddeep Nachan ([@NanddeepNachan](twitter.com/NanddeepNachan))
js-modern-calendar | Ravi Chandra ([Ravikadri](https://github.com/Ravikadri))
## Version history ## Version history
@ -45,8 +54,10 @@ Version|Date|Comments
-------|----|-------- -------|----|--------
1.0.0.0|February 11, 2017|Initial release 1.0.0.0|February 11, 2017|Initial release
1.0.0.1|June 05, 2020|Updated the external CDN references to public CDN references 1.0.0.1|June 05, 2020|Updated the external CDN references to public CDN references
1.0.2.0|February 9, 2021|Upgraded to SPFx 1.11 and fixed issues with missing dependencies
## Disclaimer ## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
--- ---

11
samples/js-modern-calendar/config/package-solution.json
View File

@ -2,8 +2,15 @@
"solution": { "solution": {
"name": "SPFx Modern Calendar", "name": "SPFx Modern Calendar",
"id": "3d593a2f-73f1-486f-9dae-555c6f6b584d", "id": "3d593a2f-73f1-486f-9dae-555c6f6b584d",
"version": "1.0.0.1", "version": "1.0.2.0",
"includeClientSideAssets": true "includeClientSideAssets": true,
"developer": {
"name": "",
"websiteUrl": "",
"privacyUrl": "",
"termsOfUseUrl": "",
"mpnId": ""
}
}, },
"paths": { "paths": {
"zippedPackage": "solution/modern-calendar.sppkg" "zippedPackage": "solution/modern-calendar.sppkg"

15336
samples/js-modern-calendar/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

23
samples/js-modern-calendar/package.json
View File

@ -1,26 +1,31 @@
{ {
"name": "modern-calendar", "name": "modern-calendar",
"version": "0.0.1", "version": "1.0.2",
"private": true, "private": true,
"main": "lib/index.js",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
}, },
"dependencies": { "dependencies": {
"@microsoft/sp-core-library": "1.6.0", "@microsoft/sp-core-library": "1.11.0",
"@microsoft/sp-webpart-base": "1.6.0", "@microsoft/sp-property-pane": "1.11.0",
"@microsoft/sp-webpart-base": "1.11.0",
"@types/fullcalendar": "^2.7.38", "@types/fullcalendar": "^2.7.38",
"@types/moment": "^2.13.0", "@types/moment": "^2.13.0",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"fullcalendar": "3.9.0", "fullcalendar": "3.9.0",
"sweetalert2": "^6.4.2" "sweetalert2": "^6.4.2"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/sp-build-web": "1.6.0", "@microsoft/rush-stack-compiler-3.3": "0.3.5",
"@microsoft/sp-module-interfaces": "1.6.0", "@microsoft/sp-build-web": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.6.0", "@microsoft/sp-module-interfaces": "1.11.0",
"gulp": "~3.9.1", "@microsoft/sp-tslint-rules": "1.11.0",
"@microsoft/sp-webpart-workbench": "1.11.0",
"@types/chai": ">=3.4.34 <3.6.0", "@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0" "@types/es6-promise": "0.0.33",
"@types/mocha": ">=2.2.33 <2.6.0",
"@types/webpack-env": "1.13.1",
"gulp": "~3.9.1"
}, },
"scripts": { "scripts": {
"build": "gulp bundle", "build": "gulp bundle",

119
samples/js-modern-calendar/src/webparts/modernCalendar/CalendarTemplate.ts
View File

@ -1,8 +1,6 @@
import { import styles from "./CalendarTemplate.module.scss";
IPropertyPaneDropdownOption import { escape } from "@microsoft/sp-lodash-subset";
} from '@microsoft/sp-webpart-base'; import { IPropertyPaneDropdownOption } from "@microsoft/sp-property-pane";
import styles from './CalendarTemplate.module.scss';
import { escape } from '@microsoft/sp-lodash-subset';
export interface ISPLists { export interface ISPLists {
value: ISPList[]; value: ISPList[];
@ -13,12 +11,12 @@ export interface ISPList {
Id: string; Id: string;
} }
export default class CalendarTemplate { export default class CalendarTemplate {
public static templateHtml: string = ` public static templateHtml: string = `
<div class='spfxcalendar'></div> <div class='spfxcalendar'></div>
`; `;
public static emptyHtml(title: string): string { public static emptyHtml(title: string): string {
return `<div class="${styles.EmptyCalendar}"> return `<div class="${styles.EmptyCalendar}">
<div class="${styles.container}"> <div class="${styles.container}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}"> <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1"> <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
@ -32,51 +30,68 @@ export default class CalendarTemplate {
</div> </div>
</div> </div>
`; `;
} }
public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`; public static themeBase: string = `https://code.jquery.com/ui/1.12.1/themes/`;
public static themeNames: Array<string> = [ public static themeNames: Array<string> = [
'default', "default",
'black-tie', "black-tie",
'blitzer', "blitzer",
'cupertino', "cupertino",
'dark-hive', "dark-hive",
'dot-luv', "dot-luv",
'eggplant', "eggplant",
'excite-bike', "excite-bike",
'flick', "flick",
'hot-sneaks', "hot-sneaks",
'humanity', "humanity",
'le-frog', "le-frog",
'mint-choc', "mint-choc",
'overcast', "overcast",
'pcpro', "pcpro",
'pepper-grinder', "pepper-grinder",
'redmond', "redmond",
'smoothness', "smoothness",
'south-street', "south-street",
'start', "start",
'sunny', "sunny",
'swanky-purse', "swanky-purse",
'trontastic', "trontastic",
'ui-darkness', "ui-darkness",
'ui-lightness', "ui-lightness",
'vader' "vader",
]; ];
public static theme(): IPropertyPaneDropdownOption[] { public static theme(): IPropertyPaneDropdownOption[] {
var themes: IPropertyPaneDropdownOption[] = []; var themes: IPropertyPaneDropdownOption[] = [];
CalendarTemplate.themeNames.forEach(function(name,index) { CalendarTemplate.themeNames.forEach(function (name, index) {
themes.push({key: CalendarTemplate.themeBase + name + '/jquery-ui.min.css', text: name.toLocaleUpperCase()}); themes.push({
}); key: CalendarTemplate.themeBase + name + "/jquery-ui.min.css",
return themes; text: name.toLocaleUpperCase(),
} });
});
return themes;
}
public static themes: IPropertyPaneDropdownOption[] = [ public static themes: IPropertyPaneDropdownOption[] = [
{ key: CalendarTemplate.themeBase + 'jquery-ui.theme.min.css', text: 'Default' }, {
{ key: CalendarTemplate.themeBase + 'ui-lightness/jquery-ui.min.css', text: 'Light' }, key: CalendarTemplate.themeBase + "jquery-ui.theme.min.css",
{ key: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css', text: 'Redmond' }, text: "Default",
{ key: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/overcast/jquery-ui.min.css', text: 'Overcast' } },
]; {
} key: CalendarTemplate.themeBase + "ui-lightness/jquery-ui.min.css",
text: "Light",
},
{
key:
"//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.min.css",
text: "Redmond",
},
{
key:
"//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/overcast/jquery-ui.min.css",
text: "Overcast",
},
];
}

2
samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.manifest.json
View File

@ -6,7 +6,7 @@
"componentType": "WebPart", "componentType": "WebPart",
"version": "*", "version": "*",
"manifestVersion": 2, "manifestVersion": 2,
"supportedHosts": ["SharePointWebPart"],
"preconfiguredEntries": [{ "preconfiguredEntries": [{
"groupId": "c2a397d3-8c8f-47ab-b731-897178313c15", "groupId": "c2a397d3-8c8f-47ab-b731-897178313c15",
"group": { "default": "Modern Web Parts" }, "group": { "default": "Modern Web Parts" },

517
samples/js-modern-calendar/src/webparts/modernCalendar/ModernCalendarWebPart.ts
View File

@ -1,33 +1,29 @@
import { Version } from '@microsoft/sp-core-library'; import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { import {
BaseClientSideWebPart,
IPropertyPaneConfiguration, IPropertyPaneConfiguration,
IPropertyPaneDropdownOption, IPropertyPaneDropdownOption,
IPropertyPaneTextFieldProps, IPropertyPaneTextFieldProps,
IWebPartContext,
PropertyPaneTextField, PropertyPaneTextField,
PropertyPaneDropdown, PropertyPaneDropdown,
IPropertyPaneDropdownProps IPropertyPaneDropdownProps,
} from '@microsoft/sp-webpart-base'; } from "@microsoft/sp-property-pane";
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './ModernCalendar.module.scss'; import { Version } from "@microsoft/sp-core-library";
import * as strings from 'modernCalendarStrings';
import { IModernCalendarWebPartProps } from './IModernCalendarWebPartProps'; import { escape } from "@microsoft/sp-lodash-subset";
import CalendarTemplate from './CalendarTemplate'; import styles from "./ModernCalendar.module.scss";
import * as jQuery from 'jquery'; import * as strings from "modernCalendarStrings";
import 'fullcalendar'; import { IModernCalendarWebPartProps } from "./IModernCalendarWebPartProps";
import * as moment from 'moment'; import CalendarTemplate from "./CalendarTemplate";
import * as swal2 from 'sweetalert2'; import * as jQuery from "jquery";
import { SPComponentLoader } from '@microsoft/sp-loader'; import "fullcalendar";
import { import * as moment from "moment";
SPHttpClient, SPHttpClientResponse import * as swal2 from "sweetalert2";
} from '@microsoft/sp-http'; import { SPComponentLoader } from "@microsoft/sp-loader";
import { import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
Environment, import { Environment, EnvironmentType } from "@microsoft/sp-core-library";
EnvironmentType import { EventObjectInput, OptionsInput } from "fullcalendar";
} from '@microsoft/sp-core-library'; import { Default as View } from "fullcalendar/View";
import { EventObjectInput, OptionsInput } from 'fullcalendar';
import { Default as View } from 'fullcalendar/View';
export interface ISPLists { export interface ISPLists {
value: ISPList[]; value: ISPList[];
@ -43,12 +39,15 @@ export interface EventObjects {
} }
export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModernCalendarWebPartProps> { export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModernCalendarWebPartProps> {
public constructor() { public constructor() {
super(); super();
// Modify with your a CDN or local path // Modify with your a CDN or local path
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css'); SPComponentLoader.loadCss(
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css'); "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.min.css"
);
SPComponentLoader.loadCss(
"https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css"
);
} }
public render(): void { public render(): void {
@ -57,12 +56,20 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
} }
if (!this.properties.other) { if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide(); jQuery("input[aria-label=hide-col]").parent().hide();
} }
//Check required properties before rendering list //Check required properties before rendering list
if (this.properties.listTitle == null || this.properties.start == null || this.properties.end == null || this.properties.title == null || this.properties.detail == null) { if (
this.domElement.innerHTML = CalendarTemplate.emptyHtml(this.properties.description); this.properties.listTitle == null ||
this.properties.start == null ||
this.properties.end == null ||
this.properties.title == null ||
this.properties.detail == null
) {
this.domElement.innerHTML = CalendarTemplate.emptyHtml(
this.properties.description
);
} else { } else {
this.domElement.innerHTML = CalendarTemplate.templateHtml; this.domElement.innerHTML = CalendarTemplate.templateHtml;
this._renderListAsync(); this._renderListAsync();
@ -70,7 +77,7 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
} }
protected get dataVersion(): Version { protected get dataVersion(): Version {
return Version.parse('1.0'); return Version.parse("1.0");
} }
protected onPropertyPaneConfigurationStart(): void { protected onPropertyPaneConfigurationStart(): void {
@ -82,109 +89,156 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
if (this.properties.site) { if (this.properties.site) {
this.listDisabled = false; this.listDisabled = false;
} }
if (this.properties.listTitle && (!this.properties.start || !this.properties.end || !this.properties.title || !this.properties.detail)) { if (
this.properties.listTitle &&
(!this.properties.start ||
!this.properties.end ||
!this.properties.title ||
!this.properties.detail)
) {
//this._getColumnsAsync(); //this._getColumnsAsync();
} }
if (!this.properties.other) { if (!this.properties.other) {
jQuery('input[aria-label=hide-col]').parent().hide(); jQuery("input[aria-label=hide-col]").parent().hide();
} }
if (this.properties.site && this.properties.listTitle && this.properties.start && this.properties.start && this.properties.end && this.properties.title && this.properties.detail) { if (
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration'); this.properties.site &&
this._getSiteRootWeb() this.properties.listTitle &&
.then((response0) => { this.properties.start &&
this._getSites(response0['Url']) this.properties.start &&
.then((response) => { this.properties.end &&
var sites: IPropertyPaneDropdownOption[] = []; this.properties.title &&
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' }); this.properties.detail
sites.push({ key: 'other', text: 'Other Site (Specify Url)' }); ) {
for (var _key in response.value) { this.context.statusRenderer.displayLoadingIndicator(
if (this.context.pageContext.web.absoluteUrl != response.value[_key]['Url']) { this.domElement,
sites.push({ key: response.value[_key]['Url'], text: response.value[_key]['Title'] }); "Configuration"
} );
} this._getSiteRootWeb().then((response0) => {
this._siteOptions = sites; this._getSites(response0["Url"]).then((response) => {
if (this.properties.site) { var sites: IPropertyPaneDropdownOption[] = [];
this._getListTitles(this.properties.site) sites.push({
.then((response2) => { key: this.context.pageContext.web.absoluteUrl,
this._dropdownOptions = response2.value.map((list: ISPList) => { text: "This Site",
return { });
key: list.Title, sites.push({ key: "other", text: "Other Site (Specify Url)" });
text: list.Title for (var _key in response.value) {
}; if (
}); this.context.pageContext.web.absoluteUrl !=
this._getListColumns(this.properties.listTitle, this.properties.site) response.value[_key]["Url"]
.then((response3) => { ) {
var col: IPropertyPaneDropdownOption[] = []; sites.push({
for (var _key in response3.value) { key: response.value[_key]["Url"],
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] }); text: response.value[_key]["Title"],
} });
this._columnOptions = col; }
this.colsDisabled = false; }
this.listDisabled = false; this._siteOptions = sites;
this.context.propertyPane.refresh(); if (this.properties.site) {
this.context.statusRenderer.clearLoadingIndicator(this.domElement); this._getListTitles(this.properties.site).then((response2) => {
this.render(); this._dropdownOptions = response2.value.map((list: ISPList) => {
}); return {
key: list.Title,
text: list.Title,
};
});
this._getListColumns(
this.properties.listTitle,
this.properties.site
).then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({
key: response3.value[_key]["InternalName"],
text: response3.value[_key]["Title"],
}); });
} }
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(
this.domElement
);
this.render();
});
}); });
}
}); });
});
} else { } else {
this._getSitesAsync(); this._getSitesAsync();
} }
} }
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void { protected onPropertyPaneFieldChanged(
if (newValue == 'other') { propertyPath: string,
oldValue: any,
newValue: any
): void {
if (newValue == "other") {
this.properties.other = true; this.properties.other = true;
this.properties.listTitle = null; this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().show(); jQuery("input[aria-label=hide-col]").parent().show();
} else if (oldValue === 'other' && newValue != 'other') { } else if (oldValue === "other" && newValue != "other") {
this.properties.other = false; this.properties.other = false;
this.properties.siteOther = null; this.properties.siteOther = null;
this.properties.listTitle = null; this.properties.listTitle = null;
jQuery('input[aria-label=hide-col]').parent().hide(); jQuery("input[aria-label=hide-col]").parent().hide();
} }
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'Configuration'); this.context.statusRenderer.displayLoadingIndicator(
if ((propertyPath === 'site' || propertyPath === 'siteOther') && newValue) { this.domElement,
"Configuration"
);
if ((propertyPath === "site" || propertyPath === "siteOther") && newValue) {
this.colsDisabled = true; this.colsDisabled = true;
this.listDisabled = true; this.listDisabled = true;
var siteUrl = newValue; var siteUrl = newValue;
if (this.properties.other) { siteUrl = this.properties.siteOther; } else { jQuery('input[aria-label=hide-col]').parent().hide(); } if (this.properties.other) {
if ((this.properties.other && this.properties.siteOther.length > 25) || !this.properties.other) { siteUrl = this.properties.siteOther;
this._getListTitles(siteUrl) } else {
.then((response) => { jQuery("input[aria-label=hide-col]").parent().hide();
this._dropdownOptions = response.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
} }
} else if (propertyPath === 'listTitle' && newValue) { if (
// tslint:disable-next-line:no-duplicate-variable (this.properties.other && this.properties.siteOther.length > 25) ||
var siteUrl = newValue; !this.properties.other
if (this.properties.other) { siteUrl = this.properties.siteOther; } ) {
this._getListColumns(newValue, siteUrl) this._getListTitles(siteUrl).then((response) => {
.then((response) => { this._dropdownOptions = response.value.map((list: ISPList) => {
var col: IPropertyPaneDropdownOption[] = []; return {
for (var _key in response.value) { key: list.Title,
col.push({ key: response.value[_key]['InternalName'], text: response.value[_key]['Title'] }); text: list.Title,
} };
this._columnOptions = col; });
this.colsDisabled = false; this.listDisabled = false;
this.context.propertyPane.refresh(); this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement); this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render(); this.render();
}); });
}
} else if (propertyPath === "listTitle" && newValue) {
// tslint:disable-next-line:no-duplicate-variable
var siteUrl = newValue;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListColumns(newValue, siteUrl).then((response) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response.value) {
col.push({
key: response.value[_key]["InternalName"],
text: response.value[_key]["Title"],
});
}
this._columnOptions = col;
this.colsDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
} else { } else {
//Handle other fields here //Handle other fields here
this.render(); this.render();
@ -195,63 +249,66 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
private listDisabled: boolean = true; private listDisabled: boolean = true;
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration { protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
var otherSiteAria = 'hide-col'; var otherSiteAria = "hide-col";
if (this.properties.other) { otherSiteAria = ''; } if (this.properties.other) {
otherSiteAria = "";
}
return { return {
pages: [ pages: [
{ {
header: { header: {
description: strings.PropertyPaneDescription description: strings.PropertyPaneDescription,
}, },
groups: [ groups: [
{ {
groupName: strings.BasicGroupName, groupName: strings.BasicGroupName,
groupFields: [ groupFields: [
PropertyPaneTextField('description', { PropertyPaneTextField("description", {
label: strings.DescriptionFieldLabel label: strings.DescriptionFieldLabel,
}), }),
PropertyPaneDropdown('theme', { PropertyPaneDropdown("theme", {
label: 'Theme', label: "Theme",
options: CalendarTemplate.theme() options: CalendarTemplate.theme(),
}), }),
PropertyPaneDropdown('site', { PropertyPaneDropdown("site", {
label: 'Site', label: "Site",
options: this._siteOptions options: this._siteOptions,
}), }),
PropertyPaneTextField('siteOther', { PropertyPaneTextField("siteOther", {
label: 'Other Site Url (i.e. https://contoso.sharepoint.com/path)', label:
ariaLabel: otherSiteAria "Other Site Url (i.e. https://contoso.sharepoint.com/path)",
ariaLabel: otherSiteAria,
}), }),
PropertyPaneDropdown('listTitle', { PropertyPaneDropdown("listTitle", {
label: 'List Title', label: "List Title",
options: this._dropdownOptions, options: this._dropdownOptions,
disabled: this.listDisabled disabled: this.listDisabled,
}), }),
PropertyPaneDropdown('start', { PropertyPaneDropdown("start", {
label: 'Start Date Field', label: "Start Date Field",
options: this._columnOptions, options: this._columnOptions,
disabled: this.colsDisabled disabled: this.colsDisabled,
}), }),
PropertyPaneDropdown('end', { PropertyPaneDropdown("end", {
label: 'End Date Field', label: "End Date Field",
options: this._columnOptions, options: this._columnOptions,
disabled: this.colsDisabled disabled: this.colsDisabled,
}), }),
PropertyPaneDropdown('title', { PropertyPaneDropdown("title", {
label: 'Event Title Field', label: "Event Title Field",
options: this._columnOptions, options: this._columnOptions,
disabled: this.colsDisabled disabled: this.colsDisabled,
}), }),
PropertyPaneDropdown('detail', { PropertyPaneDropdown("detail", {
label: 'Event Details', label: "Event Details",
options: this._columnOptions, options: this._columnOptions,
disabled: this.colsDisabled disabled: this.colsDisabled,
}) }),
] ],
} },
] ],
} },
] ],
}; };
} }
@ -265,35 +322,67 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
} }
private _getSiteRootWeb(): Promise<ISPLists> { private _getSiteRootWeb(): Promise<ISPLists> {
return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/Site/RootWeb?$select=Title,Url`, SPHttpClient.configurations.v1) return this.context.spHttpClient
.get(
this.context.pageContext.web.absoluteUrl +
`/_api/Site/RootWeb?$select=Title,Url`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => { .then((response: SPHttpClientResponse) => {
return response.json(); return response.json();
}); });
} }
private _getSites(rootWebUrl: string): Promise<ISPLists> { private _getSites(rootWebUrl: string): Promise<ISPLists> {
return this.context.spHttpClient.get(rootWebUrl + `/_api/web/webs?$select=Title,Url`, SPHttpClient.configurations.v1) return this.context.spHttpClient
.get(
rootWebUrl + `/_api/web/webs?$select=Title,Url`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => { .then((response: SPHttpClientResponse) => {
return response.json(); return response.json();
}); });
} }
private _getListTitles(site: string): Promise<ISPLists> { private _getListTitles(site: string): Promise<ISPLists> {
return this.context.spHttpClient.get(site + `/_api/web/lists?$filter=Hidden eq false and BaseType eq 0`, SPHttpClient.configurations.v1) return this.context.spHttpClient
.get(
site + `/_api/web/lists?$filter=Hidden eq false and BaseType eq 0`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => { .then((response: SPHttpClientResponse) => {
return response.json(); return response.json();
}); });
} }
private _getListColumns(listNameColumns: string, listsite: string): Promise<any> { private _getListColumns(
return this.context.spHttpClient.get(listsite + `/_api/web/lists/GetByTitle('${listNameColumns}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`, SPHttpClient.configurations.v1) listNameColumns: string,
listsite: string
): Promise<any> {
return this.context.spHttpClient
.get(
listsite +
`/_api/web/lists/GetByTitle('${listNameColumns}')/Fields?$filter=Hidden eq false and ReadOnlyField eq false`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => { .then((response: SPHttpClientResponse) => {
return response.json(); return response.json();
}); });
} }
private _getListData(listName: string, site: string): Promise<any> { private _getListData(listName: string, site: string): Promise<any> {
return this.context.spHttpClient.get(site + `/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(this.properties.title)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(this.properties.end)},${encodeURIComponent(this.properties.detail)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`, SPHttpClient.configurations.v1) return this.context.spHttpClient
.get(
site +
`/_api/web/lists/GetByTitle('${listName}')/items?$select=${encodeURIComponent(
this.properties.title
)},${encodeURIComponent(this.properties.start)},${encodeURIComponent(
this.properties.end
)},${encodeURIComponent(
this.properties.detail
)},Created,Author/ID,Author/Title&$expand=Author/ID,Author/Title&$orderby=Id desc&$limit=500`,
SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => { .then((response: SPHttpClientResponse) => {
return response.json(); return response.json();
}); });
@ -305,8 +394,8 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
title: list[this.properties.title], title: list[this.properties.title],
start: list[this.properties.start], start: list[this.properties.start],
end: list[this.properties.end], end: list[this.properties.end],
id: list['Id'], id: list["Id"],
detail: list[this.properties.detail] detail: list[this.properties.detail],
}; };
}); });
this.context.statusRenderer.clearLoadingIndicator(this.domElement); this.context.statusRenderer.clearLoadingIndicator(this.domElement);
@ -315,67 +404,89 @@ export default class ModernCalendarWebPart extends BaseClientSideWebPart<IModern
theme: true, theme: true,
events: calItems, events: calItems,
eventClick: (_event) => { eventClick: (_event) => {
var eventDetail = moment(_event['start']).format('MM/DD/YYYY hh:mm') + ' - ' + moment(_event['end']).format('MM/DD/YYYY hh:mm') + '<br>' + _event['detail']; var eventDetail =
swal2.default(_event.title, eventDetail, 'info'); moment(_event["start"]).format("MM/DD/YYYY hh:mm") +
} " - " +
moment(_event["end"]).format("MM/DD/YYYY hh:mm") +
"<br>" +
_event["detail"];
swal2.default(_event.title, eventDetail, "info");
},
}; };
jQuery('.spfxcalendar', this.domElement).fullCalendar(calendarOptions); jQuery(".spfxcalendar", this.domElement).fullCalendar(calendarOptions);
} }
private _getSitesAsync(): void { private _getSitesAsync(): void {
this._getSiteRootWeb() this._getSiteRootWeb().then((response) => {
.then((response) => { this._getSites(response["Url"]).then((response1) => {
this._getSites(response['Url']) var sites: IPropertyPaneDropdownOption[] = [];
.then((response1) => { sites.push({
var sites: IPropertyPaneDropdownOption[] = []; key: this.context.pageContext.web.absoluteUrl,
sites.push({ key: this.context.pageContext.web.absoluteUrl, text: 'This Site' }); text: "This Site",
sites.push({ key: 'other', text: 'Other Site (Specify Url)' }); });
for (var _key in response1.value) { sites.push({ key: "other", text: "Other Site (Specify Url)" });
sites.push({ key: response1.value[_key]['Url'], text: response1.value[_key]['Title'] }); for (var _key in response1.value) {
} sites.push({
this._siteOptions = sites; key: response1.value[_key]["Url"],
this.context.propertyPane.refresh(); text: response1.value[_key]["Title"],
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListTitles(siteUrl)
.then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(this.properties.listTitle, this.properties.site)
.then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({ key: response3.value[_key]['InternalName'], text: response3.value[_key]['Title'] });
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.render();
});
}
});
}); });
}
this._siteOptions = sites;
this.context.propertyPane.refresh();
var siteUrl = this.properties.site;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListTitles(siteUrl).then((response2) => {
this._dropdownOptions = response2.value.map((list: ISPList) => {
return {
key: list.Title,
text: list.Title,
};
});
this.context.propertyPane.refresh();
if (this.properties.listTitle) {
this._getListColumns(
this.properties.listTitle,
this.properties.site
).then((response3) => {
var col: IPropertyPaneDropdownOption[] = [];
for (var _key in response3.value) {
col.push({
key: response3.value[_key]["InternalName"],
text: response3.value[_key]["Title"],
});
}
this._columnOptions = col;
this.colsDisabled = false;
this.listDisabled = false;
this.context.propertyPane.refresh();
this.context.statusRenderer.clearLoadingIndicator(
this.domElement
);
this.render();
});
}
});
}); });
}
private _renderListAsync(): void {
var siteUrl = this.properties.site;
if (this.properties.other) { siteUrl = this.properties.siteOther; }
this._getListData(this.properties.listTitle, siteUrl).then((response) => {
this._renderList(response.value);
}).catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(this.domElement, "There was an error loading your list, please verify the selected list has Calendar Events or choose a new list.");
}); });
} }
private _renderListAsync(): void {
var siteUrl = this.properties.site;
if (this.properties.other) {
siteUrl = this.properties.siteOther;
}
this._getListData(this.properties.listTitle, siteUrl)
.then((response) => {
this._renderList(response.value);
})
.catch((err) => {
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
this.context.statusRenderer.renderError(
this.domElement,
"There was an error loading your list, please verify the selected list has Calendar Events or choose a new list."
);
});
}
} }

7
samples/js-modern-calendar/tsconfig.json
View File

@ -1,4 +1,5 @@
{ {
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
@ -8,8 +9,11 @@
"declaration": true, "declaration": true,
"sourceMap": true, "sourceMap": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"inlineSources": false,
"skipLibCheck": true, "skipLibCheck": true,
"outDir": "lib", "outDir": "lib",
"strictNullChecks": false,
"noUnusedLocals": false,
"typeRoots": [ "typeRoots": [
"./node_modules/@types", "./node_modules/@types",
"./node_modules/@microsoft" "./node_modules/@microsoft"
@ -25,7 +29,8 @@
] ]
}, },
"include": [ "include": [
"src/**/*.ts" "src/**/*.ts",
"src/**/*.tsx"
], ],
"exclude": [ "exclude": [
"node_modules", "node_modules",

1
samples/react-accordion/README.md
View File

@ -46,6 +46,7 @@ Version|Date|Comments
2.0|January 19, 2020|Upgrade to SPFx 1.10 2.0|January 19, 2020|Upgrade to SPFx 1.10
2.1|June 22, 2020|Added pagination (Abhishek Garg) 2.1|June 22, 2020|Added pagination (Abhishek Garg)
2.2|October 1, 2020 | Added new Pagination Configuration (@beau__cameron) 2.2|October 1, 2020 | Added new Pagination Configuration (@beau__cameron)
## Disclaimer ## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**

2
samples/react-accordion/package-lock.json generated
View File

@ -1,6 +1,6 @@
{ {
"name": "react-accordion", "name": "react-accordion",
"version": "0.0.1", "version": "2.2.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {