ergare17/tasks

Ergare Tasks

Tasks

, _(*1)

Tasques

MP7:, _(*2)

• Webs interessants:, _(*3)

  • FlatIcon
  • Unsplash
  • Placeholder o lorempixel
  • https://screenpeek.io/

• CRUD de tasques per línia de comandes (vegeu més abaix notes sobre les comandes):, _(*4)

  • Comanda task:create:
    • Dos opcions amb nom de tasca o sense nom i executar un assistens pregunti pel nom
  • Idem que l'anterior però Task:delete
  • Comanda task:list: mostrar la llista de tasques
  • Opcional task:edit i task:show
  • Crear els tests necessàris per les comandes. Utilitzar Mocks per tal de poder respondre a preguntes
• TDD: https://laracasts.com/series/testing-vue

MP8: Crud per interfície JSON API - Només treballem amb Javascript/Vue (no hi ha controlador només vista) - La vista es comunica amb el servidor(backend) via peticions API JSON - URL: /tasks - Components Vue: resources/asssets/js/components. Crear: - TaskViewsComponent que inclou els següents components: - MessageComponent per mostrar missatges flash - WidgetComponent per utilitza widget adminlte - TaskComponent: mostra les tasques dind del widget - Comunicació entre widgets i events. - Widgets específics: select: multiselect - TDD: tots els endpoitns de l'API tenen el seu corresponent test, _(*5)

MP9: - URL: /tasks_php - CRUD per interfície web - Totes les operacions han de tenir el test específic - Una vista per create i una per edit. - Protegir les tasques utilitzant autenticació per web (sessió) i autenticació per API (Token) - Afegir suport per a Social Login - Afegir suport per authorizació: roles i permissos, gates Laravel. Paquet laravel-permission, _(*6)

TODO. Refactoritazació

Comparar 3 interfícies:, _(*7)

• WEB
• JSON API
• CLI

i aprofitar codi (aproximació DRY no WET):, _(*8)

Qüestions a tenir en compte:

• Modificar fitxer viwe Laravel sidebar.php per modificar el menu i tenir dos opcions de menú que apuntin a l'exercici de MP9 i al de MP7

TODO /Notes professor

MP8: Ajax | HTTP CLIENT AXIOS | Working wiht APIs: JSON, _(*9)

Promise Based Axios: - https://laracasts.com/series/es6-cliffsnotes/episodes/13 - Necessitem tenir accés al MODEL/BASE DE DADES via API: vam començar jugar tema API JSON a: -- https://github.com/acacha/tinkeringJsonApi, _(*10)

TODO: - CRUD sencer: tenim LIST falta: - SHOW - STORE - EDIT - DELETE, _(*11)

JSON APIS: - https://laracasts.com/series/incremental-api-development, _(*12)

Mostrar els errors (catch de promises, missatges d'error de la pròpia API) - Que mostrar sinó hi ha cap TODO (base de dades buida) - Errors HTTP (500, 404, timeouts per que no funcioni connexió) <- Útil per provar mètode abort Laravel, _(*13)

MP8: Vue.js, _(*14)

TLTR: - Explicar slots: Widget/Panel boostrap -> Col·locar en algún lloc la llista de todos: dins un widget - Components pares i fills -> comunicació entre components - Vue Events i Event Dispatcher -> Comunicació entre esdeveniments - API $emit (entre esdeveniment) i $on (handler). - Object global Window.Event = new Vue -> Objecte compartir entre tots els components, _(*15)

• Llista de todos/tasques dins d'un widget AdminLTE: https://adminlte.io/themes/AdminLTE/pages/widgets.html
• Aprofitar per explicar slots i named slots de Vue.js per fer Content Distribution: https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots
  • Els slots permeten posar components dins altre components i també customitzar parts d'un widget com Footer, Content , Header
• Ja tinc un paquet per anar posant els components AdminLTE fets: https://www.npmjs.com/package/adminlte-vue
  • https://www.npmjs.com/package/adminlte-vue
• MOSTRAR ERRORS API i missatges ok (added task) <- MessageComponent
  • Utilitzar component vam fer en un altre projecte: message /flash message MessageComponent
  • Message component: Funció global flash per mostrar un missatge flash <- Refactorització:
    • Patró de comunicació entre components EVENT DISPATCHER: https://laracasts.com/series/learn-vue-2-step-by-step |
    • https://laracasts.com/series/learn-vue-2-step-by-step/episodes/13
  • Altres llibreries i noms
  • Toastr: http://codeseven.github.io/toastr/demo.html
  • Gritter

COMPONENTS

• tasks
  • adminlte-widget
  • HEADER: title
  • CONTENT: Task list
  • FOOTER:
    • create-task
    • Filters
• message component

Done

Commands

CLI: another interface (like WEB or API JSON), _(*16)

https://laravel.com/docs/5.5/artisan, _(*17)

php artisan make:command CreateTask, _(*18)

API:, _(*19)

1) Wizard:, _(*20)

php artisan make:task

Preguntar pel nom de la tasca, _(*21)

2) Nom de la tasca com a paràmetre, _(*22)

php artisan make:task taskname

Instal·lació vue test utils

Install npm libraries:, _(*23)

npm install --save-dev vue-test-utils mocha mocha-webpack jsdom jsdom-global expect

Create folder for Tests and file setup.js, _(*24)

tests/Javascript/setup.js

Example JSON:, _(*25)

https://github.com/acacha/relationships/blob/master/tests/Javascript/setup.js, _(*26)

File content:, _(*27)

require('jsdom-global')()

Add mpm script test on package.json:, _(*28)

"test" : mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Javascript/setup.js tests/Javascript/**/*.spec.js

Hooking into Laravel mix: Observe --webpack-config=node_modules/laravel-mix/setup/webpack.config.js, _(*29)

Folder for Javascript Tests:, _(*30)

tests/Javascript

Execute tests:, _(*31)

npm run test

PHPStorm configuration, _(*32)

• New run configuration mocha
• Change mocha executable to mocha-webpack!!!

Example test:, _(*33)

• https://github.com/acacha/relationships/blob/master/tests/Javascript/adminlte-input-gender.spec.js

Exemple sense Laravel Mix: - https://github.com/laracasts/testingvue/blob/master/episode-1/package.json, _(*34)

Resources - https://vue-test-utils.vuejs.org/en/guides/testing-SFCs-with-mocha-webpack.html - https://laracasts.com/series/testing-vue/episodes/6 - https://github.com/vuejs/vue-test-utils - https://vue-test-utils.vuejs.org/en/guides/getting-started.html - https://github.com/acacha/relationships - https://github.com/acacha/relationships/tree/master/tests/Javascript, _(*35)

Recursos

• https://github.com/ratiw/vuetable-2, _(*36)

  • https://github.com/acacha/users-test/blob/master/resources/assets/js/components/users/UsersList.vue

  Vuetable:, _(*37)

  npm i babel-plugin-transform-runtime babel-preset-stage-2 babel-preset-es2015, _(*38)

https://github.com/ratiw/vuetable-2-with-laravel-5.4/blob/master/resources/assets/js/components/MyVuetable.vue, _(*39)