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

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

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.3|June 14, 2017|Fix webpack 2 issues
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
**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": {
"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({
additionalConfiguration: function (config) {
var vueConfig = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
rules: [
{

9802
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",
"version": "0.0.4",
"version": "0.0.6",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"@microsoft/sp-core-library": "~1.3.4",
"@microsoft/sp-webpart-base": "~1.3.4",
"@microsoft/sp-lodash-subset": "~1.3.4",
"@microsoft/sp-office-ui-fabric-core": "~1.3.4",
"@microsoft/sp-core-library": "~1.4.0",
"@microsoft/sp-lodash-subset": "~1.4.0",
"@microsoft/sp-office-ui-fabric-core": "~1.4.0",
"@microsoft/sp-webpart-base": "~1.4.0",
"@types/webpack-env": ">=1.12.1 <1.14.0",
"immutability-helper": "^2.5.0",
"vue": "~2.4.4",
"vue-class-component": "~5.0.1",
"vue-property-decorator": "~5.3.0",
"vue-template-compiler": "~2.4.4"
"vue": "^2.5.13",
"vue-class-component": "^6.1.2",
"vue-property-decorator": "^6.0.0",
"vue-template-compiler": "^2.5.13"
},
"devDependencies": {
"@microsoft/sp-build-web": "~1.3.4",
"@microsoft/sp-module-interfaces": "~1.3.4",
"@microsoft/sp-webpart-workbench": "~1.3.4",
"gulp": "~3.9.1",
"@microsoft/sp-build-web": "~1.4.0",
"@microsoft/sp-module-interfaces": "~1.4.0",
"@microsoft/sp-webpart-workbench": "~1.4.0",
"@types/chai": ">=3.4.34 <3.6.0",
"@types/mocha": ">=2.2.33 <2.6.0",
"ajv": "~5.2.2",
"gulp": "~3.9.1",
"webpack-merge": "^4.1.1",
"node-sass": "~4.5.3",
"sass-loader": "~6.0.6",
"vue-loader": "~13.0.5",
"webpack-merge": "~4.1.0"
"vue-loader": "^13.7.0"
},
"scripts": {
"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[]> {
debugger;
const taskLists: ITaskList[] = this._taskLists;
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[]> {
debugger;
const queryUrl: string = `${this._webPartContext.pageContext.web.absoluteUrl}` +
`/_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
.then((json: any) => {
debugger;
return json.value.map((item: any) => {
debugger;
let newItem: ITodoItem = {
Id: item.Id,
Title: item.Title,
@ -123,9 +120,7 @@ export default class SharePointDataProvider implements ITodoDataProvider {
return response.json();
})
.then((json: { value: ITodoItem[] }) => {
debugger;
return json.value.map((task: ITodoItem) => {
debugger;
return task;
});
});
@ -163,7 +158,6 @@ export default class SharePointDataProvider implements ITodoDataProvider {
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})`;
debugger;
const headers: Headers = new Headers();
headers.append('If-Match', '*');
@ -174,7 +168,6 @@ export default class SharePointDataProvider implements ITodoDataProvider {
method: 'DELETE'
}
).then((response: any) => {
debugger;
if (response.status >= 200 && response.status < 300) {
return response;
} else {
@ -212,11 +205,9 @@ export default class SharePointDataProvider implements ITodoDataProvider {
.then(() => {
return Promise.all(promises);
}).then((values: any) => {
debugger;
return Promise.resolve(values[values.length - 1]);
// return values[values.length - 1];
}).catch((ex) => {
debugger;
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';
import { findIndex } from '@microsoft/sp-lodash-subset';
import * as Vue from 'vue';
import Vue from 'vue';
import TodoComponent from './components/todo/Todo.vue';
import { ITodoProps } from './components/todo/ITodoProps';
@ -66,7 +66,6 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
*/
this._loadTaskLists()
.then(() => {
debugger;
/*
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
@ -92,6 +91,7 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
webPartDisplayMode: this.displayMode
};
// tslint:disable-next-line:no-unused-expression
new Vue({
el: `#app-${this.context.instanceId}`,
render: h => h(TodoComponent, {
@ -130,7 +130,6 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
}
protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
debugger;
/*
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.
@ -147,10 +146,8 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
}
private _loadTaskLists(): Promise<any> {
debugger;
return this._dataProvider.getTaskLists()
.then((taskLists: ITaskList[]) => {
debugger;
// Disable dropdown field if there are no results from the server.
this._disableDropdown = taskLists.length === 0;
let utiility: Utils = new Utils();
@ -166,7 +163,6 @@ export default class TodoWebPart extends BaseClientSideWebPart<ITodoWebPartProps
}
private _setSelectedList(value: string) {
debugger;
const selectedIndex: number = findIndex(this._dropdownOptions,
(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 { 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
*/
public created(): void {
debugger;
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 TodoItem from '../todo-item/Todoitem.vue';
import { ITodoProps } from './ITodoProps';
@ -27,7 +27,6 @@ export default class Todo extends Vue implements ITodoProps {
*/
public addTodo(): void {
debugger;
if (!this.todoTitle) {
return;
}
@ -36,7 +35,6 @@ export default class Todo extends Vue implements ITodoProps {
this.dataProvider.createItem(this.todoTitle).then(
(allItems: ITodoItem[]) => {
debugger;
if (allItems && allItems.length > 0) {
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'
*/
public completed(todo: ITodoItem): void {
debugger;
if (this.dataProvider.selectedList) {
//// Approach 1: delete item when the checkbox is clicked
this.dataProvider.deleteItem(todo).then(
(allItems: ITodoItem[]) => {
debugger;
if (allItems && allItems.length > 0) {
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
*/
public created(): void {
debugger;
if (this.dataProvider.selectedList) {
this.dataProvider.getItems().then(
(results: ITodoItem[]) => {
debugger;
if (results && results.length > 0) {
this.mytodos = results;
}

4
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';
export default Vue;
}
}

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

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