honeymoose/sp-dev-fx-webparts
1
0
Fork 0
mirror of https://github.com/pnp/sp-dev-fx-webparts.git synced 2025-03-02 09:49:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated sample to latest vue and spfx drops. (#399)

Browse Source
This commit is contained in:
Sergei Sergeev 2018-01-20 17:00:45 +03:00 committed by Vesa Juvonen
parent d8e4df3aca
commit 49f68636b2
12 changed files with 6766 additions and 3120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
samples/vuejs-todo-single-file-component/README.md
View File

@ -26,7 +26,8 @@ Version|Date|Comments
0.0.2|March 30, 2017|Updated to GA 0.0.2|March 30, 2017|Updated to GA
0.0.3|June 14, 2017|Fix webpack 2 issues 0.0.3|June 14, 2017|Fix webpack 2 issues
0.0.4|October 7, 2017|Updated packages to latest versions, misc fixing 0.0.4|October 7, 2017|Updated packages to latest versions, misc fixing
1.0.0|November 15, 2017|Added data provider that demonstrats the CRUD operations 0.0.5|November 15, 2017|Added data provider that demonstrates the CRUD operations
0.0.6|December 11, 2018|Updated sample to SPFx 1.4 and Vue 2.5.x
## 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.**

3
samples/vuejs-todo-single-file-component/config/config.json
View File

@ -13,8 +13,5 @@
}, },
"localizedResources": { "localizedResources": {
"toDoStrings": "lib/webparts/toDo/loc/{locale}.js" "toDoStrings": "lib/webparts/toDo/loc/{locale}.js"
},
"externals": {
"vue": "node_modules/vue/dist/vue.runtime.js"
} }
} }

5
samples/vuejs-todo-single-file-component/gulpfile.js
View File

@ -11,6 +11,11 @@ build.sass.setConfig({
build.configureWebpack.setConfig({ build.configureWebpack.setConfig({
additionalConfiguration: function (config) { additionalConfiguration: function (config) {
var vueConfig = { var vueConfig = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: { module: {
rules: [ rules: [
{ {

9712
samples/vuejs-todo-single-file-component/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
samples/vuejs-todo-single-file-component/package.json
View File

@ -1,35 +1,33 @@
{ {
"name": "vue-todo", "name": "vue-todo",
"version": "0.0.4", "version": "0.0.6",
"private": true, "private": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
}, },
"dependencies": { "dependencies": {
"@microsoft/sp-core-library": "~1.3.4", "@microsoft/sp-core-library": "~1.4.0",
"@microsoft/sp-webpart-base": "~1.3.4", "@microsoft/sp-lodash-subset": "~1.4.0",
"@microsoft/sp-lodash-subset": "~1.3.4", "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
"@microsoft/sp-office-ui-fabric-core": "~1.3.4", "@microsoft/sp-webpart-base": "~1.4.0",
"@types/webpack-env": ">=1.12.1 <1.14.0", "@types/webpack-env": ">=1.12.1 <1.14.0",
"vue": "^2.5.13",
"immutability-helper": "^2.5.0", "vue-class-component": "^6.1.2",
"vue": "~2.4.4", "vue-property-decorator": "^6.0.0",
"vue-class-component": "~5.0.1", "vue-template-compiler": "^2.5.13"
"vue-property-decorator": "~5.3.0",
"vue-template-compiler": "~2.4.4"
}, },
"devDependencies": { "devDependencies": {
"@microsoft/sp-build-web": "~1.3.4", "@microsoft/sp-build-web": "~1.4.0",
"@microsoft/sp-module-interfaces": "~1.3.4", "@microsoft/sp-module-interfaces": "~1.4.0",
"@microsoft/sp-webpart-workbench": "~1.3.4", "@microsoft/sp-webpart-workbench": "~1.4.0",
"gulp": "~3.9.1",
"@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/mocha": ">=2.2.33 <2.6.0",
"ajv": "~5.2.2", "ajv": "~5.2.2",
"gulp": "~3.9.1",
"webpack-merge": "^4.1.1",
"node-sass": "~4.5.3", "node-sass": "~4.5.3",
"sass-loader": "~6.0.6", "sass-loader": "~6.0.6",
"vue-loader": "~13.0.5", "vue-loader": "^13.7.0"
"webpack-merge": "~4.1.0"
}, },
"scripts": { "scripts": {
"build": "gulp bundle", "build": "gulp bundle",

1
samples/vuejs-todo-single-file-component/src/dataProviders/MockDataProvider.ts
View File

@ -64,7 +64,6 @@ export default class MockDataProvider implements ITodoDataProvider {
} }
public getTaskLists(): Promise<ITaskList[]> { public getTaskLists(): Promise<ITaskList[]> {
debugger;
const taskLists: ITaskList[] = this._taskLists; const taskLists: ITaskList[] = this._taskLists;
return new Promise<ITaskList[]>((resolve) => { return new Promise<ITaskList[]>((resolve) => {

9
samples/vuejs-todo-single-file-component/src/dataProviders/SharePointDataProvider.ts
View File

@ -85,7 +85,6 @@ export default class SharePointDataProvider implements ITodoDataProvider {
} }
private _getItems(requester: SPHttpClient): Promise<ITodoItem[]> { private _getItems(requester: SPHttpClient): Promise<ITodoItem[]> {
debugger;
const queryUrl: string = `${this._webPartContext.pageContext.web.absoluteUrl}` + const queryUrl: string = `${this._webPartContext.pageContext.web.absoluteUrl}` +
`/_api/web/lists(guid'${this._selectedList.Id}')/items?$select=Id,Title,PercentComplete`; `/_api/web/lists(guid'${this._selectedList.Id}')/items?$select=Id,Title,PercentComplete`;
@ -101,9 +100,7 @@ export default class SharePointDataProvider implements ITodoDataProvider {
// }); // });
//Approach 2: manually create the ITodoItem object; useful when the properties are different form the internal names of the list //Approach 2: manually create the ITodoItem object; useful when the properties are different form the internal names of the list
.then((json: any) => { .then((json: any) => {
debugger;
return json.value.map((item: any) => { return json.value.map((item: any) => {
debugger;
let newItem: ITodoItem = { let newItem: ITodoItem = {
Id: item.Id, Id: item.Id,
Title: item.Title, Title: item.Title,
@ -123,9 +120,7 @@ export default class SharePointDataProvider implements ITodoDataProvider {
return response.json(); return response.json();
}) })
.then((json: { value: ITodoItem[] }) => { .then((json: { value: ITodoItem[] }) => {
debugger;
return json.value.map((task: ITodoItem) => { return json.value.map((task: ITodoItem) => {
debugger;
return task; return task;
}); });
}); });
@ -163,7 +158,6 @@ export default class SharePointDataProvider implements ITodoDataProvider {
private _deleteItem2(requester: SPHttpClient, item: ITodoItem): Promise<ITodoItem[]> { private _deleteItem2(requester: SPHttpClient, item: ITodoItem): Promise<ITodoItem[]> {
const itemDeletedUrl: string = `${this._webPartContext.pageContext.web.absoluteUrl}/_api/web/lists(guid'${this._selectedList.Id}')/items(${item.Id})`; const itemDeletedUrl: string = `${this._webPartContext.pageContext.web.absoluteUrl}/_api/web/lists(guid'${this._selectedList.Id}')/items(${item.Id})`;
debugger;
const headers: Headers = new Headers(); const headers: Headers = new Headers();
headers.append('If-Match', '*'); headers.append('If-Match', '*');
@ -174,7 +168,6 @@ export default class SharePointDataProvider implements ITodoDataProvider {
method: 'DELETE' method: 'DELETE'
} }
).then((response: any) => { ).then((response: any) => {
debugger;
if (response.status >= 200 && response.status < 300) { if (response.status >= 200 && response.status < 300) {
return response; return response;
} else { } else {
@ -212,11 +205,9 @@ export default class SharePointDataProvider implements ITodoDataProvider {
.then(() => { .then(() => {
return Promise.all(promises); return Promise.all(promises);
}).then((values: any) => { }).then((values: any) => {
debugger;
return Promise.resolve(values[values.length - 1]); return Promise.resolve(values[values.length - 1]);
// return values[values.length - 1]; // return values[values.length - 1];
}).catch((ex) => { }).catch((ex) => {
debugger;
throw ex; throw ex;
}); });

8
samples/vuejs-todo-single-file-component/src/webparts/todo/TodoWebPart.ts
View File

@ -10,7 +10,7 @@ import {
} from '@microsoft/sp-webpart-base'; } from '@microsoft/sp-webpart-base';
import { findIndex } from '@microsoft/sp-lodash-subset'; import { findIndex } from '@microsoft/sp-lodash-subset';
import * as Vue from 'vue'; import Vue from 'vue';
import TodoComponent from './components/todo/Todo.vue'; import TodoComponent from './components/todo/Todo.vue';
import { ITodoProps } from './components/todo/ITodoProps'; import { ITodoProps } from './components/todo/ITodoProps';
@ -66,7 +66,6 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
*/ */
this._loadTaskLists() this._loadTaskLists()
.then(() => { .then(() => {
debugger;
/* /*
If a list is already selected, then we would have stored the list Id in the associated web part property. If a list is already selected, then we would have stored the list Id in the associated web part property.
So, check to see if we do have a selected list for the web part. If we do, then we set that as the selected list So, check to see if we do have a selected list for the web part. If we do, then we set that as the selected list
@ -92,6 +91,7 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
webPartDisplayMode: this.displayMode webPartDisplayMode: this.displayMode
}; };
// tslint:disable-next-line:no-unused-expression
new Vue({ new Vue({
el: `#app-${this.context.instanceId}`, el: `#app-${this.context.instanceId}`,
render: h => h(TodoComponent, { render: h => h(TodoComponent, {
@ -130,7 +130,6 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
} }
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void { protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
debugger;
/* /*
Check the property path to see which property pane feld changed. Check the property path to see which property pane feld changed.
If the property path matches the dropdown, then we set that list as the selected list for the web part. If the property path matches the dropdown, then we set that list as the selected list for the web part.
@ -147,10 +146,8 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
} }
private _loadTaskLists(): Promise<any> { private _loadTaskLists(): Promise<any> {
debugger;
return this._dataProvider.getTaskLists() return this._dataProvider.getTaskLists()
.then((taskLists: ITaskList[]) => { .then((taskLists: ITaskList[]) => {
debugger;
// Disable dropdown field if there are no results from the server. // Disable dropdown field if there are no results from the server.
this._disableDropdown = taskLists.length === 0; this._disableDropdown = taskLists.length === 0;
let utiility: Utils = new Utils(); let utiility: Utils = new Utils();
@ -166,7 +163,6 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
} }
private _setSelectedList(value: string) { private _setSelectedList(value: string) {
debugger;
const selectedIndex: number = findIndex(this._dropdownOptions, const selectedIndex: number = findIndex(this._dropdownOptions,
(item: IPropertyPaneDropdownOption) => item.key === value (item: IPropertyPaneDropdownOption) => item.key === value

3
samples/vuejs-todo-single-file-component/src/webparts/todo/components/todo-item/TodoItem.ts
View File

@ -1,4 +1,4 @@
import * as Vue from 'vue'; import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator'; import { Component, Prop } from 'vue-property-decorator';
import { ITodoItem } from '../../../../models/ICommonObjects'; import { ITodoItem } from '../../../../models/ICommonObjects';
@ -28,7 +28,6 @@ export default class TodoItem extends Vue {
This is a system Vue.js hook. Added here only for demonstrations This is a system Vue.js hook. Added here only for demonstrations
*/ */
public created(): void { public created(): void {
debugger;
console.log(this.todoItem.Title + " | " + this.todoItem.Id); console.log(this.todoItem.Title + " | " + this.todoItem.Id);
} }
} }

8
samples/vuejs-todo-single-file-component/src/webparts/todo/components/todo/Todo.ts
View File

@ -1,4 +1,4 @@
import * as Vue from 'vue'; import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator'; import { Component, Prop } from 'vue-property-decorator';
import TodoItem from '../todo-item/Todoitem.vue'; import TodoItem from '../todo-item/Todoitem.vue';
import { ITodoProps } from './ITodoProps'; import { ITodoProps } from './ITodoProps';
@ -27,7 +27,6 @@ export default class Todo extends Vue implements ITodoProps {
*/ */
public addTodo(): void { public addTodo(): void {
debugger;
if (!this.todoTitle) { if (!this.todoTitle) {
return; return;
} }
@ -36,7 +35,6 @@ export default class Todo extends Vue implements ITodoProps {
this.dataProvider.createItem(this.todoTitle).then( this.dataProvider.createItem(this.todoTitle).then(
(allItems: ITodoItem[]) => { (allItems: ITodoItem[]) => {
debugger;
if (allItems && allItems.length > 0) { if (allItems && allItems.length > 0) {
this.mytodos = allItems; this.mytodos = allItems;
} }
@ -53,13 +51,11 @@ export default class Todo extends Vue implements ITodoProps {
This method is triggered from the child componenets 'todo-item' This method is triggered from the child componenets 'todo-item'
*/ */
public completed(todo: ITodoItem): void { public completed(todo: ITodoItem): void {
debugger;
if (this.dataProvider.selectedList) { if (this.dataProvider.selectedList) {
//// Approach 1: delete item when the checkbox is clicked //// Approach 1: delete item when the checkbox is clicked
this.dataProvider.deleteItem(todo).then( this.dataProvider.deleteItem(todo).then(
(allItems: ITodoItem[]) => { (allItems: ITodoItem[]) => {
debugger;
if (allItems && allItems.length > 0) { if (allItems && allItems.length > 0) {
this.mytodos = allItems; this.mytodos = allItems;
} }
@ -85,12 +81,10 @@ export default class Todo extends Vue implements ITodoProps {
This is a system Vue.js hook. It is used here to communicate with SharePoint and get list items This is a system Vue.js hook. It is used here to communicate with SharePoint and get list items
*/ */
public created(): void { public created(): void {
debugger;
if (this.dataProvider.selectedList) { if (this.dataProvider.selectedList) {
this.dataProvider.getItems().then( this.dataProvider.getItems().then(
(results: ITodoItem[]) => { (results: ITodoItem[]) => {
debugger;
if (results && results.length > 0) { if (results && results.length > 0) {
this.mytodos = results; this.mytodos = results;
} }

2
samples/vuejs-todo-single-file-component/src/webparts/todo/sfc.d.ts vendored
View File

@ -1,4 +1,4 @@
declare module "*.vue" { declare module '*.vue' {
import Vue from 'vue'; import Vue from 'vue';
export default Vue; export default Vue;
} }

8
samples/vuejs-todo-single-file-component/tsconfig.json
View File

@ -3,15 +3,17 @@
"target": "es5", "target": "es5",
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"module": "commonjs", "module": "commonjs",
"jsx": "react",
"declaration": true, "declaration": true,
"sourceMap": true, "sourceMap": true,
"experimentalDecorators": true, "experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"types": [ "types": [
"es6-promise", "es6-promise",
"es6-collections",
"webpack-env" "webpack-env"
],
"lib": [
"es5",
"dom",
"es2015.collection"
] ]
} }
} }