DrillDown Pt.1

Overview

• pages
  • it should use dialog when use drilldown
  • it can access DrillDown data when dialog have been closed
• components
  • DrillDown
    • it have multiple slot
    • it get options and initial value from parent Class
    • it is selected in order
    • it get the next item from api each time one item is selected
  • Dialog
    • it should return Promise when open itself (pending)
    • it should resolve/reject Promise when close itself (notification)

Implementation

Index

1. pages/DrillDownSearch.vue

• Create pages/DrillDownSearch.vue
• Put button for dialog

1. components/Dialog.vue

• Create components/Dialog.vue
• Set slot
• Set Promise for opne/close
• Use Dialog in DrillDownSearch.vue

1. components/DrillDown.vue

• Create files
  • components/DrillDown.vue
  • mock/api/drillDown/dummy.json
  • mock/api/drillDown/GET.js
  • store/drillDown.js
• Set form data to DrillDown.vue in DrillDownSearch.vue
• Prepare dummy data
• Prepare get function (just return dummy data)
• Prepare action function (just fetch dummy data)
• Use action in DrillDown.vue mounted
• Return options according to post data
• Store fetch data
• Set initial option and value
• Watch items and Update item according to new value

1. tests

• Create files
  • tests/pages/DrillDownSearch.spec.js
  • tests/components/Dialog.spec.js
  • tests/components/DrillDown.spec.js
• Describe DrillDownSearch page
  • It should use dialog when use drilldown
  • It can access DrillDown data when dialog have been closed
• Describe Dialog component
  • It should return Promise when open itself (pending)
  • It should resolve/reject Promise when close itself (notification)
• Describe DrillDown component
  • It have multiple slot
  • It get options and initial value from parent Clas
  • It is selected in order
  • It get the next item from api each time one item is selected

Next DrillDown Pt.2