git clone https://github.com/lbogdan/worskshop-vue.git
cd workshop-vue
yarn
git checkout step0
yarn serve
- step0 - project setup
- step1 - added Bootstrap
- step2 - added Transaction component
- step3 - added TransactionHeader component
- step4 - moved data to parent
- step5 - transaction list
- step6 - added mock API and loading indicator
- step7 - replaced mock API with real API
- step8 - added category filter
- step9 - added total
- step10 - added deleting
- step11 - added creating
- step12 - added editing
- step14 - added date picker
Create the following files in the project folder:
- .vscode/settings.js
{
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
"vetur.validation.script": false,
"vetur.validation.template": false,
"editor.formatOnSave": true,
"files.eol": "\n",
"editor.tabSize": 2
}- .eslintrc
{
"root": true,
"extends": ["plugin:vue/essential", "@vue/airbnb"],
"rules": {
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
"arrow-parens": ["error", "always"],
"function-paren-newline": "off"
}
}- .prettierrc
{
"singleQuote": true,
"semi": true,
"trailingComma": "all",
"arrowParens": "always"
}- transaction
<div class="row py-2">
<div class="col-2">
2 Apr
</div>
<div class="col-4">
Asociatia Clujsters
</div>
<div class="col-3">
Education
</div>
<div class="col-2">
€ 99.99
</div>
</div>- transaction header
<div class="row font-weight-bold border-bottom pb-1">
<div class="col-2">
Date
</div>
<div class="col-4">
Merchant
</div>
<div class="col-3">
Category
</div>
<div class="col-2">
Amount
</div>
</div>- transaction filter
<div class="row mb-4">
<div class="col-3 offset-6">
<select v-model="filterCategory" class="form-control">
<option value="">All Categories</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
</select>
</div>
</div>- transaction total amount
<div class="row py-2 font-weight-bold" key="">
<div class="col-2 offset-7">
Total:
</div>
<div class="col-2">
€ -465.00
</div>
</div>- transaction form
<div class="mt-4">
<div class="row">
<div class="col-2">
<input
type="text"
class="form-control"
placeholder="Date"
/>
</div>
<div class="col-4">
<input
type="text"
class="form-control"
placeholder="Merchant"
/>
</div>
<div class="col-3">
<select class="form-control">
<option value="">Select Category</option>
<option value="Category 1">Category 1</option>
<option value="Category 2">Category 2</option>
</select>
</div>
<div class="col-2">
<input
type="text"
class="form-control"
placeholder="Amount"
/>
</div>
<div class="col-1">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</div>
</div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent