Skip to content

Commit

Permalink
Update READMEs
Browse files Browse the repository at this point in the history
  • Loading branch information
@nasdan
nasdan committed Apr 26, 2017
1 parent 244a55e commit 1db3504
Show file tree
Hide file tree
Showing 3 changed files with 220 additions and 12 deletions.
4 changes: 2 additions & 2 deletions 01 Hello VueJS/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ Summary steps:
- Install Vue.js devtools.
- Install `vue.js` library.
- Configure webpack to work with `vue.js`.
- Update `index.html`
- Update `main.ts`
- Update `index.html`.
- Update `main.ts`.

# Steps to build it

Expand Down
130 changes: 120 additions & 10 deletions 06 Edit Recipe/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ Summary steps:
- Create `API` methods.
- Create `pageContainer`.
- Update `page`.
- Create `common` components.
- Create `edit recipe` form.
- Add `form validations` with `lc-form-validation`.

# Steps to build it

Expand Down Expand Up @@ -718,12 +720,85 @@ export const FormComponent = Vue.extend({

### ./src/pages/recipe/edit/validations/editFormValidation.ts
```javascript
import {
ValidationConstraints, createFormValidation, Validators
} from 'lc-form-validation';
import {hasItems} from './arrayValidation';

const constraints: ValidationConstraints = {
fields: {
name: [
{ validator: Validators.required }
],
ingredients: [
{ validator: hasItems('Should has one or more ingredients')}
]
}
};

export const editFormValidation = createFormValidation(constraints);

```

- Create custom `validator`:

### ./src/pages/recipe/edit/validations/arrayValidation.ts
```javascript
import {FieldValidationResult} from 'lc-form-validation';

export const hasItems = (message) => (value: any[]): FieldValidationResult => {
return {
type: 'ARRAY_HAS_ITEMS',
succeeded: value.length > 0,
errorMessage: message,
}
}

```

- Update `constraints`:

### ./src/pages/recipe/edit/validations/editFormValidation.ts
```diff
import {
ValidationConstraints, createFormValidation, Validators
} from 'lc-form-validation';
+ import {hasItems} from './arrayValidation';

const constraints: ValidationConstraints = {
fields: {
name: [
{ validator: Validators.required }
],
+ ingredients: [
+ { validator: hasItems('Should has one or more ingredients')}
+ ]
}
};

export const editFormValidation = createFormValidation(constraints);

```

- Create `recipe error` model:

### ./src/model/recipeError.ts
```javascript
import {FieldValidationResult} from 'lc-form-validation';

export class RecipeError {
name: FieldValidationResult;
ingredients: FieldValidationResult;

constructor() {
this.name = new FieldValidationResult();
this.name.succeeded = true;

this.ingredients = new FieldValidationResult();
this.ingredients.succeeded = true;
}
}

```

- Update `pageContainer`:
Expand All @@ -735,9 +810,11 @@ import {RecipeEntity} from '../../../model/recipe';
import {recipeAPI} from '../../../api/recipe';
import {EditRecipePage} from './page';
import {router} from '../../../router';
+ import {editFormValidation} from './validations/editFormValidation';

interface State extends Vue {
recipe: RecipeEntity;
+ recipeError: RecipeError;
updateRecipe: (field, value) => void;
addIngredient: (ingredient) => void;
removeIngredient: (ingredient) => void;
Expand All @@ -749,6 +826,7 @@ export const EditRecipeContainer = Vue.extend({
return (
<EditRecipePage
recipe={this.recipe}
+ recipeError={this.recipeError}
updateRecipe={this.updateRecipe}
addIngredient={this.addIngredient}
removeIngredient={this.removeIngredient}
Expand All @@ -762,6 +840,7 @@ export const EditRecipeContainer = Vue.extend({
data: function() {
return {
recipe: new RecipeEntity(),
+ recipeError: new RecipeError(),
};
},
beforeMount: function() {
Expand All @@ -778,6 +857,15 @@ export const EditRecipeContainer = Vue.extend({
...this.recipe,
[field]: value,
};

+ editFormValidation.validateField(this.recipe, field, value)
+ .then((result) => {
+ this.recipeError = {
+ ...this.recipeError,
+ [field]: result,
+ };
+ })
+ .catch((error) => console.log(error));
},
addIngredient: function(ingredient: string) {
this.recipe = {
Expand All @@ -794,12 +882,25 @@ export const EditRecipeContainer = Vue.extend({
}
},
save: function() {
recipeAPI.save(this.recipe)
.then((message) => {
console.log(message);
router.back();
})
.catch((error) => console.log(error));
+ editFormValidation.validateForm(this.recipe)
+ .then((result) => {
+ result.fieldErrors.map((error) => {
+ this.recipeError = {
+ ...this.recipeError,
+ [error.key]: error,
+ }
+ });

+ if(result.succeeded) {
recipeAPI.save(this.recipe)
.then((message) => {
console.log(message);
router.back();
})
.catch((error) => console.log(error));
+ }
+ })
+ .catch((error) => console.log(error));
},
}
} as ComponentOptions<State>);
Expand All @@ -816,6 +917,7 @@ import {FormComponent} from './form';
export const EditRecipePage = Vue.extend({
props: [
'recipe',
+ 'recipeError',
'updateRecipe',
'addIngredient',
'removeIngredient',
Expand All @@ -827,6 +929,7 @@ export const EditRecipePage = Vue.extend({
<h1>Recipe: {this.recipe.name}</h1>
<FormComponent
recipe={this.recipe}
+ recipeError={this.recipeError}
updateRecipe={this.updateRecipe}
addIngredient={this.addIngredient}
removeIngredient={this.removeIngredient}
Expand All @@ -845,6 +948,7 @@ export const EditRecipePage = Vue.extend({
```diff
import Vue, {ComponentOptions} from 'vue';
import {RecipeEntity} from '../../../model/recipe';
+ import {RecipeError} from '../../../model/recipeError';
import {
ValidationComponent, InputComponent, InputButtonComponent,
TextareaComponent
Expand All @@ -855,6 +959,7 @@ const classNames: any = require('./formStyles');

interface FormComponentProperties extends Vue {
recipe: RecipeEntity;
+ recipeError: RecipeError;
updateRecipe: (field, value) => void;
addIngredient: (ingredient) => void;
removeIngredient: (ingredient) => void;
Expand All @@ -866,6 +971,7 @@ interface FormComponentProperties extends Vue {
export const FormComponent = Vue.extend({
props: [
'recipe',
+ 'recipeError',
'updateRecipe',
'addIngredient',
'removeIngredient',
Expand All @@ -889,8 +995,10 @@ export const FormComponent = Vue.extend({
<form class="container">
<div class="row">
<ValidationComponent
hasError={true}
errorMessage="Test error"
- hasError={true}
+ hasError={!this.recipeError.name.succeeded}
- errorMessage="Test error"
+ errorMessage={this.recipeError.name.errorMessage}
>
<InputComponent
type="text"
Expand All @@ -915,8 +1023,10 @@ export const FormComponent = Vue.extend({
</div>
<div class="row">
<ValidationComponent
hasError={true}
errorMessage="Test error"
- hasError={true}
+ hasError={!this.recipeError.ingredients.succeeded}
- errorMessage="Test error"
+ errorMessage={this.recipeError.ingredients.errorMessage}
>
<IngredientListComponent
ingredients={this.recipe.ingredients}
Expand Down
98 changes: 98 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,104 @@ Each of the samples contains a `README.md` file that indicates the purpose of th
In this sample we are going to setup a web project that can be easily managed
by webpack.

We won't install anything related to Vue.js, just some basic plumbing.

We will setup an initial <abbr title="Node.js package manager, a package manager for the JavaScript runtime environment Node.js">npm</abbr> project and give support to TypeScript. Then we will create a **helloworld.ts** sample.

Summary steps:

- Prerequisites: Install Node.js
- Initialize **package.json** (with `npm init`)
- Install:
- Webpack and webpack-dev-server.
- TypeScript.
- Bootstrap.
- Setup **webpack.config.js**
- Create a test js file.
- Create a simple HTML file.

## 01 Hello VueJS

In this sample we are going to create our first Vue.js component and connect it with the DOM.

We will take a startup point sample _00 Boilerplate_.

Summary steps:
- Install Vue.js devtools.
- Install `vue.js` library.
- Configure webpack to work with `vue.js`.
- Update `index.html`.
- Update `main.ts`.

## 02 Properties

In this sample we are going to learn a basic concept, handling properties.

We will take a startup point sample _01 Hello VueJS_.

Summary steps:
- Update `main.ts` with and input element.
- Use `v-model` directive.
- Create our first component.
- Passing properties from `main.ts` to `hello.ts`.
- Other approach to work with properties.

## 03 Render

In this sample we are going to work with `render` function.

We will take a startup point sample _02 Properties_.

Summary steps:
- Configure to work with runtime-only build.
- Enable and configure jsx
- Install `babel-plugin-transform-vue-jsx`
- Rename to `main.tsx` and update it.
- Rename to `hello.tsx` and update it.

## 04 Login

In this sample we are going to create a `login` page.

We will take a startup point sample _03 Render_.

Summary steps:
- Delete `hello.tsx`.
- Update `index.html`.
- Create `login` page.
- Configure router navigation.
- Create `recipe list` page.
- Create `LoginEntity` model.
- Create fake `login` API.
- Check valid login.

## 05 Recipe List

In this sample we are going to create a `recipe list` page.

We will take a startup point sample _04 Login_.

Summary steps:
- Create `recipe` model.
- Create fake `recipe` API.
- Create `recipe list` page container.
- Update `recipe list` page.
- Navigate to `edit recipe` page.

## 06 Edit Recipe

In this sample we are going to create a `edit recipe` page.

We will take a startup point sample _05 Recipe List_.

Summary steps:
- Create `API` methods.
- Create `pageContainer`.
- Update `page`.
- Create `common` components.
- Create `edit recipe` form.
- Add `form validations` with `lc-form-validation`.

# About Lemoncode

We are a team of long-term experienced freelance developers, established as a group in 2010.
Expand Down

0 comments on commit 1db3504

Please sign in to comment.