Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More

How to use leave method in Playwright Internal

Best JavaScript code snippet using playwright-internal

transition.spec.js

Source:transition.spec.js

1import Vue from 'vue'2import injectStyles from './inject-styles'3import { isIE9 } from 'core/util/env'4import { nextFrame } from 'web/runtime/transition-util'5if (!isIE9) {6  describe('Transition basic', () => {7    const { duration, buffer } = injectStyles()8    const explicitDuration = duration * 29    let el10    beforeEach(() => {11      el = document.createElement('div')12      document.body.appendChild(el)13    })14    it('basic transition', done => {15      const vm = new Vue({16        template: '<div><transition><div v-if="ok" class="test">foo</div></transition></div>',17        data: { ok: true }18      }).$mount(el)19      // should not apply transition on initial render by default20      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')21      vm.ok = false22      waitForUpdate(() => {23        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')24      }).thenWaitFor(nextFrame).then(() => {25        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')26      }).thenWaitFor(duration + buffer).then(() => {27        expect(vm.$el.children.length).toBe(0)28        vm.ok = true29      }).then(() => {30        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')31      }).thenWaitFor(nextFrame).then(() => {32        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')33      }).thenWaitFor(duration + buffer).then(() => {34        expect(vm.$el.children[0].className).toBe('test')35      }).then(done)36    })37    it('named transition', done => {38      const vm = new Vue({39        template: '<div><transition name="test"><div v-if="ok" class="test">foo</div></transition></div>',40        data: { ok: true }41      }).$mount(el)42      // should not apply transition on initial render by default43      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')44      vm.ok = false45      waitForUpdate(() => {46        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')47      }).thenWaitFor(nextFrame).then(() => {48        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')49      }).thenWaitFor(duration + buffer).then(() => {50        expect(vm.$el.children.length).toBe(0)51        vm.ok = true52      }).then(() => {53        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')54      }).thenWaitFor(nextFrame).then(() => {55        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')56      }).thenWaitFor(duration + buffer).then(() => {57        expect(vm.$el.children[0].className).toBe('test')58      }).then(done)59    })60    it('custom transition classes', done => {61      const vm = new Vue({62        template: `63          <div>64            <transition65              enter-class="hello"66              enter-active-class="hello-active"67              enter-to-class="hello-to"68              leave-class="bye"69              leave-to-class="bye-to"70              leave-active-class="byebye active more ">71              <div v-if="ok" class="test">foo</div>72            </transition>73          </div>74        `,75        data: { ok: true }76      }).$mount(el)77      // should not apply transition on initial render by default78      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')79      vm.ok = false80      waitForUpdate(() => {81        expect(vm.$el.children[0].className).toBe('test bye byebye active more')82      }).thenWaitFor(nextFrame).then(() => {83        expect(vm.$el.children[0].className).toBe('test byebye active more bye-to')84      }).thenWaitFor(duration + buffer).then(() => {85        expect(vm.$el.children.length).toBe(0)86        vm.ok = true87      }).then(() => {88        expect(vm.$el.children[0].className).toBe('test hello hello-active')89      }).thenWaitFor(nextFrame).then(() => {90        expect(vm.$el.children[0].className).toBe('test hello-active hello-to')91      }).thenWaitFor(duration + buffer).then(() => {92        expect(vm.$el.children[0].className).toBe('test')93      }).then(done)94    })95    it('dynamic transition', done => {96      const vm = new Vue({97        template: `98          <div>99            <transition :name="trans">100              <div v-if="ok" class="test">foo</div>101            </transition>102          </div>103        `,104        data: {105          ok: true,106          trans: 'test'107        }108      }).$mount(el)109      // should not apply transition on initial render by default110      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')111      vm.ok = false112      waitForUpdate(() => {113        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')114      }).thenWaitFor(nextFrame).then(() => {115        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')116      }).thenWaitFor(duration + buffer).then(() => {117        expect(vm.$el.children.length).toBe(0)118        vm.ok = true119        vm.trans = 'changed'120      }).then(() => {121        expect(vm.$el.children[0].className).toBe('test changed-enter changed-enter-active')122      }).thenWaitFor(nextFrame).then(() => {123        expect(vm.$el.children[0].className).toBe('test changed-enter-active changed-enter-to')124      }).thenWaitFor(duration + buffer).then(() => {125        expect(vm.$el.children[0].className).toBe('test')126      }).then(done)127    })128    it('inline transition object', done => {129      const enter = jasmine.createSpy('enter')130      const leave = jasmine.createSpy('leave')131      const vm = new Vue({132        render (h) {133          return h('div', null, [134            h('transition', {135              props: {136                name: 'inline',137                enterClass: 'hello',138                enterToClass: 'hello-to',139                enterActiveClass: 'hello-active',140                leaveClass: 'bye',141                leaveToClass: 'bye-to',142                leaveActiveClass: 'byebye active'143              },144              on: {145                enter,146                leave147              }148            }, this.ok ? [h('div', { class: 'test' }, 'foo')] : undefined)149          ])150        },151        data: { ok: true }152      }).$mount(el)153      // should not apply transition on initial render by default154      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')155      vm.ok = false156      waitForUpdate(() => {157        expect(vm.$el.children[0].className).toBe('test bye byebye active')158        expect(leave).toHaveBeenCalled()159      }).thenWaitFor(nextFrame).then(() => {160        expect(vm.$el.children[0].className).toBe('test byebye active bye-to')161      }).thenWaitFor(duration + buffer).then(() => {162        expect(vm.$el.children.length).toBe(0)163        vm.ok = true164      }).then(() => {165        expect(vm.$el.children[0].className).toBe('test hello hello-active')166        expect(enter).toHaveBeenCalled()167      }).thenWaitFor(nextFrame).then(() => {168        expect(vm.$el.children[0].className).toBe('test hello-active hello-to')169      }).thenWaitFor(duration + buffer).then(() => {170        expect(vm.$el.children[0].className).toBe('test')171      }).then(done)172    })173    it('transition events', done => {174      const onLeaveSpy = jasmine.createSpy('leave')175      const onEnterSpy = jasmine.createSpy('enter')176      const beforeLeaveSpy = jasmine.createSpy('beforeLeave')177      const beforeEnterSpy = jasmine.createSpy('beforeEnter')178      const afterLeaveSpy = jasmine.createSpy('afterLeave')179      const afterEnterSpy = jasmine.createSpy('afterEnter')180      const vm = new Vue({181        template: `182          <div>183            <transition184              name="test"185              @before-enter="beforeEnter"186              @enter="enter"187              @after-enter="afterEnter"188              @before-leave="beforeLeave"189              @leave="leave"190              @after-leave="afterLeave">191              <div v-if="ok" class="test">foo</div>192            </transition>193          </div>194        `,195        data: { ok: true },196        methods: {197          beforeLeave: (el) => {198            expect(el).toBe(vm.$el.children[0])199            expect(el.className).toBe('test')200            beforeLeaveSpy(el)201          },202          leave: (el) => onLeaveSpy(el),203          afterLeave: (el) => afterLeaveSpy(el),204          beforeEnter: (el) => {205            expect(vm.$el.contains(el)).toBe(false)206            expect(el.className).toBe('test')207            beforeEnterSpy(el)208          },209          enter: (el) => {210            expect(vm.$el.contains(el)).toBe(true)211            onEnterSpy(el)212          },213          afterEnter: (el) => afterEnterSpy(el)214        }215      }).$mount(el)216      // should not apply transition on initial render by default217      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')218      let _el = vm.$el.children[0]219      vm.ok = false220      waitForUpdate(() => {221        expect(beforeLeaveSpy).toHaveBeenCalledWith(_el)222        expect(onLeaveSpy).toHaveBeenCalledWith(_el)223        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')224      }).thenWaitFor(nextFrame).then(() => {225        expect(afterLeaveSpy).not.toHaveBeenCalled()226        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')227      }).thenWaitFor(duration + buffer).then(() => {228        expect(afterLeaveSpy).toHaveBeenCalledWith(_el)229        expect(vm.$el.children.length).toBe(0)230        vm.ok = true231      }).then(() => {232        _el = vm.$el.children[0]233        expect(beforeEnterSpy).toHaveBeenCalledWith(_el)234        expect(onEnterSpy).toHaveBeenCalledWith(_el)235        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')236      }).thenWaitFor(nextFrame).then(() => {237        expect(afterEnterSpy).not.toHaveBeenCalled()238        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')239      }).thenWaitFor(duration + buffer).then(() => {240        expect(afterEnterSpy).toHaveBeenCalledWith(_el)241        expect(vm.$el.children[0].className).toBe('test')242      }).then(done)243    })244    it('transition events (v-show)', done => {245      const onLeaveSpy = jasmine.createSpy('leave')246      const onEnterSpy = jasmine.createSpy('enter')247      const beforeLeaveSpy = jasmine.createSpy('beforeLeave')248      const beforeEnterSpy = jasmine.createSpy('beforeEnter')249      const afterLeaveSpy = jasmine.createSpy('afterLeave')250      const afterEnterSpy = jasmine.createSpy('afterEnter')251      const vm = new Vue({252        template: `253          <div>254            <transition255              name="test"256              @before-enter="beforeEnter"257              @enter="enter"258              @after-enter="afterEnter"259              @before-leave="beforeLeave"260              @leave="leave"261              @after-leave="afterLeave">262              <div v-show="ok" class="test">foo</div>263            </transition>264          </div>265        `,266        data: { ok: true },267        methods: {268          beforeLeave: (el) => {269            expect(el.style.display).toBe('')270            expect(el).toBe(vm.$el.children[0])271            expect(el.className).toBe('test')272            beforeLeaveSpy(el)273          },274          leave: (el) => {275            expect(el.style.display).toBe('')276            onLeaveSpy(el)277          },278          afterLeave: (el) => {279            expect(el.style.display).toBe('none')280            afterLeaveSpy(el)281          },282          beforeEnter: (el) => {283            expect(el.className).toBe('test')284            expect(el.style.display).toBe('none')285            beforeEnterSpy(el)286          },287          enter: (el) => {288            expect(el.style.display).toBe('')289            onEnterSpy(el)290          },291          afterEnter: (el) => {292            expect(el.style.display).toBe('')293            afterEnterSpy(el)294          }295        }296      }).$mount(el)297      // should not apply transition on initial render by default298      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')299      let _el = vm.$el.children[0]300      vm.ok = false301      waitForUpdate(() => {302        expect(beforeLeaveSpy).toHaveBeenCalledWith(_el)303        expect(onLeaveSpy).toHaveBeenCalledWith(_el)304        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')305      }).thenWaitFor(nextFrame).then(() => {306        expect(afterLeaveSpy).not.toHaveBeenCalled()307        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')308      }).thenWaitFor(duration + buffer).then(() => {309        expect(afterLeaveSpy).toHaveBeenCalledWith(_el)310        expect(vm.$el.children[0].style.display).toBe('none')311        vm.ok = true312      }).then(() => {313        _el = vm.$el.children[0]314        expect(beforeEnterSpy).toHaveBeenCalledWith(_el)315        expect(onEnterSpy).toHaveBeenCalledWith(_el)316        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')317      }).thenWaitFor(nextFrame).then(() => {318        expect(afterEnterSpy).not.toHaveBeenCalled()319        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')320      }).thenWaitFor(duration + buffer).then(() => {321        expect(afterEnterSpy).toHaveBeenCalledWith(_el)322        expect(vm.$el.children[0].className).toBe('test')323      }).then(done)324    })325    it('explicit user callback in JavaScript hooks', done => {326      let next327      const vm = new Vue({328        template: `<div>329          <transition name="test" @enter="enter" @leave="leave">330            <div v-if="ok" class="test">foo</div>331          </transition>332        </div>`,333        data: { ok: true },334        methods: {335          enter: (el, cb) => {336            next = cb337          },338          leave: (el, cb) => {339            next = cb340          }341        }342      }).$mount(el)343      vm.ok = false344      waitForUpdate(() => {345        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')346      }).thenWaitFor(nextFrame).then(() => {347        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')348      }).thenWaitFor(duration + buffer).then(() => {349        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')350        expect(next).toBeTruthy()351        next()352        expect(vm.$el.children.length).toBe(0)353      }).then(() => {354        vm.ok = true355      }).then(() => {356        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')357      }).thenWaitFor(nextFrame).then(() => {358        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')359      }).thenWaitFor(duration + buffer).then(() => {360        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')361        expect(next).toBeTruthy()362        next()363        expect(vm.$el.children[0].className).toBe('test')364      }).then(done)365    })366    it('css: false', done => {367      const enterSpy = jasmine.createSpy('enter')368      const leaveSpy = jasmine.createSpy('leave')369      const vm = new Vue({370        template: `371          <div>372            <transition :css="false" name="test" @enter="enter" @leave="leave">373              <div v-if="ok" class="test">foo</div>374            </transition>375          </div>376        `,377        data: { ok: true },378        methods: {379          enter: enterSpy,380          leave: leaveSpy381        }382      }).$mount(el)383      vm.ok = false384      waitForUpdate(() => {385        expect(leaveSpy).toHaveBeenCalled()386        expect(vm.$el.innerHTML).toBe('<!---->')387        vm.ok = true388      }).then(() => {389        expect(enterSpy).toHaveBeenCalled()390        expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')391      }).then(done)392    })393    it('no transition detected', done => {394      const enterSpy = jasmine.createSpy('enter')395      const leaveSpy = jasmine.createSpy('leave')396      const vm = new Vue({397        template: '<div><transition name="nope" @enter="enter" @leave="leave"><div v-if="ok">foo</div></transition></div>',398        data: { ok: true },399        methods: {400          enter: enterSpy,401          leave: leaveSpy402        }403      }).$mount(el)404      vm.ok = false405      waitForUpdate(() => {406        expect(leaveSpy).toHaveBeenCalled()407        expect(vm.$el.innerHTML).toBe('<div class="nope-leave nope-leave-active">foo</div><!---->')408      }).thenWaitFor(nextFrame).then(() => {409        expect(vm.$el.innerHTML).toBe('<!---->')410        vm.ok = true411      }).then(() => {412        expect(enterSpy).toHaveBeenCalled()413        expect(vm.$el.innerHTML).toBe('<div class="nope-enter nope-enter-active">foo</div>')414      }).thenWaitFor(nextFrame).then(() => {415        expect(vm.$el.innerHTML).toBe('<div>foo</div>')416      }).then(done)417    })418    it('enterCancelled', done => {419      const spy = jasmine.createSpy('enterCancelled')420      const vm = new Vue({421        template: `422          <div>423            <transition name="test" @enter-cancelled="enterCancelled">424              <div v-if="ok" class="test">foo</div>425            </transition>426          </div>427        `,428        data: { ok: false },429        methods: {430          enterCancelled: spy431        }432      }).$mount(el)433      expect(vm.$el.innerHTML).toBe('<!---->')434      vm.ok = true435      waitForUpdate(() => {436        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')437      }).thenWaitFor(nextFrame).then(() => {438        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')439      }).thenWaitFor(duration / 2).then(() => {440        vm.ok = false441      }).then(() => {442        expect(spy).toHaveBeenCalled()443        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')444      }).thenWaitFor(nextFrame).then(() => {445        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')446      }).thenWaitFor(duration + buffer).then(() => {447        expect(vm.$el.children.length).toBe(0)448      }).then(done)449    })450    it('should remove stale leaving elements', done => {451      const spy = jasmine.createSpy('afterLeave')452      const vm = new Vue({453        template: `454          <div>455            <transition name="test" @after-leave="afterLeave">456              <div v-if="ok" class="test">foo</div>457            </transition>458          </div>459        `,460        data: { ok: true },461        methods: {462          afterLeave: spy463        }464      }).$mount(el)465      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')466      vm.ok = false467      waitForUpdate(() => {468        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')469      }).thenWaitFor(duration / 2).then(() => {470        vm.ok = true471      }).then(() => {472        expect(spy).toHaveBeenCalled()473        expect(vm.$el.children.length).toBe(1) // should have removed leaving element474        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')475      }).thenWaitFor(nextFrame).then(() => {476        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')477      }).thenWaitFor(duration + buffer).then(() => {478        expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')479      }).then(done)480    })481    it('transition with v-show', done => {482      const vm = new Vue({483        template: `484          <div>485            <transition name="test">486              <div v-show="ok" class="test">foo</div>487            </transition>488          </div>489        `,490        data: { ok: true }491      }).$mount(el)492      // should not apply transition on initial render by default493      expect(vm.$el.textContent).toBe('foo')494      expect(vm.$el.children[0].style.display).toBe('')495      expect(vm.$el.children[0].className).toBe('test')496      vm.ok = false497      waitForUpdate(() => {498        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')499      }).thenWaitFor(nextFrame).then(() => {500        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')501      }).thenWaitFor(duration + buffer).then(() => {502        expect(vm.$el.children[0].style.display).toBe('none')503        vm.ok = true504      }).then(() => {505        expect(vm.$el.children[0].style.display).toBe('')506        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')507      }).thenWaitFor(nextFrame).then(() => {508        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')509      }).thenWaitFor(duration + buffer).then(() => {510        expect(vm.$el.children[0].className).toBe('test')511      }).then(done)512    })513    it('transition with v-show, inside child component', done => {514      const vm = new Vue({515        template: `516          <div>517            <test v-show="ok"></test>518          </div>519        `,520        data: { ok: true },521        components: {522          test: {523            template: `<transition name="test"><div class="test">foo</div></transition>`524          }525        }526      }).$mount(el)527      // should not apply transition on initial render by default528      expect(vm.$el.textContent).toBe('foo')529      expect(vm.$el.children[0].style.display).toBe('')530      vm.ok = false531      waitForUpdate(() => {532        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')533      }).thenWaitFor(nextFrame).then(() => {534        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')535      }).thenWaitFor(duration + buffer).then(() => {536        expect(vm.$el.children[0].style.display).toBe('none')537        vm.ok = true538      }).then(() => {539        expect(vm.$el.children[0].style.display).toBe('')540        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')541      }).thenWaitFor(nextFrame).then(() => {542        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')543      }).thenWaitFor(duration + buffer).then(() => {544        expect(vm.$el.children[0].className).toBe('test')545      }).then(done)546    })547    it('leaveCancelled (v-show only)', done => {548      const spy = jasmine.createSpy('leaveCancelled')549      const vm = new Vue({550        template: `551          <div>552            <transition name="test" @leave-cancelled="leaveCancelled">553              <div v-show="ok" class="test">foo</div>554            </transition>555          </div>556        `,557        data: { ok: true },558        methods: {559          leaveCancelled: spy560        }561      }).$mount(el)562      expect(vm.$el.children[0].style.display).toBe('')563      vm.ok = false564      waitForUpdate(() => {565        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')566      }).thenWaitFor(nextFrame).then(() => {567        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')568      }).thenWaitFor(10).then(() => {569        vm.ok = true570      }).then(() => {571        expect(spy).toHaveBeenCalled()572        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')573      }).thenWaitFor(nextFrame).then(() => {574        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')575      }).thenWaitFor(duration + buffer).then(() => {576        expect(vm.$el.children[0].style.display).toBe('')577      }).then(done)578    })579    it('leave transition with v-show: cancelled on next frame', done => {580      const vm = new Vue({581        template: `582          <div>583            <transition name="test">584              <div v-show="ok" class="test">foo</div>585            </transition>586          </div>587        `,588        data: { ok: true }589      }).$mount(el)590      vm.ok = false591      waitForUpdate(() => {592        vm.ok = true593      }).thenWaitFor(nextFrame).then(() => {594        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')595      }).thenWaitFor(duration + buffer).then(() => {596        expect(vm.$el.children[0].className).toBe('test')597      }).then(done)598    })599    it('enter transition with v-show: cancelled on next frame', done => {600      const vm = new Vue({601        template: `602          <div>603            <transition name="test">604              <div v-show="ok" class="test">foo</div>605            </transition>606          </div>607        `,608        data: { ok: false }609      }).$mount(el)610      vm.ok = true611      waitForUpdate(() => {612        vm.ok = false613      }).thenWaitFor(nextFrame).then(() => {614        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')615      }).thenWaitFor(duration + buffer).then(() => {616        expect(vm.$el.children[0].className).toBe('test')617      }).then(done)618    })619    it('animations', done => {620      const vm = new Vue({621        template: `622          <div>623            <transition name="test-anim">624              <div v-if="ok">foo</div>625            </transition>626          </div>627        `,628        data: { ok: true }629      }).$mount(el)630      // should not apply transition on initial render by default631      expect(vm.$el.innerHTML).toBe('<div>foo</div>')632      vm.ok = false633      waitForUpdate(() => {634        expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active')635      }).thenWaitFor(nextFrame).then(() => {636        expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to')637      }).thenWaitFor(duration + buffer).then(() => {638        expect(vm.$el.children.length).toBe(0)639        vm.ok = true640      }).then(() => {641        expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active')642      }).thenWaitFor(nextFrame).then(() => {643        expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to')644      }).thenWaitFor(duration + buffer).then(() => {645        expect(vm.$el.children[0].className).toBe('')646      }).then(done)647    })648    it('explicit transition type', done => {649      const vm = new Vue({650        template: `651          <div>652            <transition name="test-anim-long" type="animation">653              <div v-if="ok" class="test">foo</div>654            </transition>655          </div>656        `,657        data: { ok: true }658      }).$mount(el)659      // should not apply transition on initial render by default660      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')661      vm.ok = false662      waitForUpdate(() => {663        expect(vm.$el.children[0].className).toBe('test test-anim-long-leave test-anim-long-leave-active')664      }).thenWaitFor(nextFrame).then(() => {665        expect(vm.$el.children[0].className).toBe('test test-anim-long-leave-active test-anim-long-leave-to')666      }).thenWaitFor(duration + 5).then(() => {667        // should not end early due to transition presence668        expect(vm.$el.children[0].className).toBe('test test-anim-long-leave-active test-anim-long-leave-to')669      }).thenWaitFor(duration + 5).then(() => {670        expect(vm.$el.children.length).toBe(0)671        vm.ok = true672      }).then(() => {673        expect(vm.$el.children[0].className).toBe('test test-anim-long-enter test-anim-long-enter-active')674      }).thenWaitFor(nextFrame).then(() => {675        expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active test-anim-long-enter-to')676      }).thenWaitFor(duration + 5).then(() => {677        expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active test-anim-long-enter-to')678      }).thenWaitFor(duration + 5).then(() => {679        expect(vm.$el.children[0].className).toBe('test')680      }).then(done)681    })682    it('transition on appear', done => {683      const vm = new Vue({684        template: `685          <div>686            <transition name="test"687              appear688              appear-class="test-appear"689              appear-to-class="test-appear-to"690              appear-active-class="test-appear-active">691              <div v-if="ok" class="test">foo</div>692            </transition>693          </div>694        `,695        data: { ok: true }696      }).$mount(el)697      waitForUpdate(() => {698        expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active')699      }).thenWaitFor(nextFrame).then(() => {700        expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to')701      }).thenWaitFor(duration + buffer).then(() => {702        expect(vm.$el.children[0].className).toBe('test')703      }).then(done)704    })705    it('transition on appear with v-show', done => {706      const vm = new Vue({707        template: `708          <div>709            <transition name="test" appear>710              <div v-show="ok" class="test">foo</div>711            </transition>712          </div>713        `,714        data: { ok: true }715      }).$mount(el)716      waitForUpdate(() => {717        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')718      }).thenWaitFor(nextFrame).then(() => {719        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')720      }).thenWaitFor(duration + buffer).then(() => {721        expect(vm.$el.children[0].className).toBe('test')722      }).then(done)723    })724    it('transition on SVG elements', done => {725      const vm = new Vue({726        template: `727          <svg>728            <transition>729              <circle cx="0" cy="0" r="10" v-if="ok" class="test"></circle>730            </transition>731          </svg>732        `,733        data: { ok: true }734      }).$mount(el)735      // should not apply transition on initial render by default736      expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test')737      vm.ok = false738      waitForUpdate(() => {739        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave v-leave-active')740      }).thenWaitFor(nextFrame).then(() => {741        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave-active v-leave-to')742      }).thenWaitFor(duration + buffer).then(() => {743        expect(vm.$el.childNodes.length).toBe(1)744        expect(vm.$el.childNodes[0].nodeType).toBe(8) // should be an empty comment node745        expect(vm.$el.childNodes[0].textContent).toBe('')746        vm.ok = true747      }).then(() => {748        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter v-enter-active')749      }).thenWaitFor(nextFrame).then(() => {750        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter-active v-enter-to')751      }).thenWaitFor(duration + buffer).then(() => {752        expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test')753      }).then(done)754    })755    it('transition on child components', done => {756      const vm = new Vue({757        template: `758          <div>759            <transition>760              <test v-if="ok" class="test"></test>761            </transition>762          </div>763        `,764        data: { ok: true },765        components: {766          test: {767            template: `768              <transition name="test">769                <div>foo</div>770              </transition>771            ` // test transition override from parent772          }773        }774      }).$mount(el)775      // should not apply transition on initial render by default776      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')777      vm.ok = false778      waitForUpdate(() => {779        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')780      }).thenWaitFor(nextFrame).then(() => {781        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')782      }).thenWaitFor(duration + buffer).then(() => {783        expect(vm.$el.children.length).toBe(0)784        vm.ok = true785      }).then(() => {786        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')787      }).thenWaitFor(nextFrame).then(() => {788        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')789      }).thenWaitFor(duration + buffer).then(() => {790        expect(vm.$el.children[0].className).toBe('test')791      }).then(done)792    })793    it('transition inside child component', done => {794      const vm = new Vue({795        template: `796          <div>797            <test v-if="ok" class="test"></test>798          </div>799        `,800        data: { ok: true },801        components: {802          test: {803            template: `804              <transition>805                <div>foo</div>806              </transition>807            `808          }809        }810      }).$mount(el)811      // should not apply transition on initial render by default812      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')813      vm.ok = false814      waitForUpdate(() => {815        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')816      }).thenWaitFor(nextFrame).then(() => {817        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')818      }).thenWaitFor(duration + buffer).then(() => {819        expect(vm.$el.children.length).toBe(0)820        vm.ok = true821      }).then(() => {822        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')823      }).thenWaitFor(nextFrame).then(() => {824        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')825      }).thenWaitFor(duration + buffer).then(() => {826        expect(vm.$el.children[0].className).toBe('test')827      }).then(done)828    })829    it('custom transition higher-order component', done => {830      const vm = new Vue({831        template: '<div><my-transition><div v-if="ok" class="test">foo</div></my-transition></div>',832        data: { ok: true },833        components: {834          'my-transition': {835            functional: true,836            render (h, { data, children }) {837              (data.props || (data.props = {})).name = 'test'838              return h('transition', data, children)839            }840          }841        }842      }).$mount(el)843      // should not apply transition on initial render by default844      expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')845      vm.ok = false846      waitForUpdate(() => {847        expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active')848      }).thenWaitFor(nextFrame).then(() => {849        expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to')850      }).thenWaitFor(duration + buffer).then(() => {851        expect(vm.$el.children.length).toBe(0)852        vm.ok = true853      }).then(() => {854        expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active')855      }).thenWaitFor(nextFrame).then(() => {856        expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to')857      }).thenWaitFor(duration + buffer).then(() => {858        expect(vm.$el.children[0].className).toBe('test')859      }).then(done)860    })861    it('warn when used on multiple elements', () => {862      new Vue({863        template: `<transition><p>1</p><p>2</p></transition>`864      }).$mount()865      expect(`<transition> can only be used on a single element`).toHaveBeenWarned()866    })867    describe('explicit durations -', () => {868      it('single value', done => {869        const vm = new Vue({870          template: `871            <div>872              <transition duration="${explicitDuration}">873                <div v-if="ok" class="test">foo</div>874              </transition>875            </div>876          `,877          data: { ok: true }878        }).$mount(el)879        vm.ok = false880        waitForUpdate(() => {881          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')882        }).thenWaitFor(nextFrame).then(() => {883          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')884        }).thenWaitFor(explicitDuration + buffer).then(() => {885          expect(vm.$el.children.length).toBe(0)886          vm.ok = true887        }).then(() => {888          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')889        }).thenWaitFor(nextFrame).then(() => {890          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')891        }).thenWaitFor(explicitDuration + buffer).then(() => {892          expect(vm.$el.children[0].className).toBe('test')893        }).then(done)894      })895      it('enter and auto leave', done => {896        const vm = new Vue({897          template: `898            <div>899              <transition :duration="{ enter: ${explicitDuration} }">900                <div v-if="ok" class="test">foo</div>901              </transition>902            </div>903          `,904          data: { ok: true }905        }).$mount(el)906        vm.ok = false907        waitForUpdate(() => {908          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')909        }).thenWaitFor(nextFrame).then(() => {910          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')911        }).thenWaitFor(duration + buffer).then(() => {912          expect(vm.$el.children.length).toBe(0)913          vm.ok = true914        }).then(() => {915          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')916        }).thenWaitFor(nextFrame).then(() => {917          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')918        }).thenWaitFor(explicitDuration + buffer).then(() => {919          expect(vm.$el.children[0].className).toBe('test')920        }).then(done)921      })922      it('leave and auto enter', done => {923        const vm = new Vue({924          template: `925            <div>926              <transition :duration="{ leave: ${explicitDuration} }">927                <div v-if="ok" class="test">foo</div>928              </transition>929            </div>930          `,931          data: { ok: true }932        }).$mount(el)933        vm.ok = false934        waitForUpdate(() => {935          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')936        }).thenWaitFor(nextFrame).then(() => {937          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')938        }).thenWaitFor(explicitDuration + buffer).then(() => {939          expect(vm.$el.children.length).toBe(0)940          vm.ok = true941        }).then(() => {942          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')943        }).thenWaitFor(nextFrame).then(() => {944          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')945        }).thenWaitFor(duration + buffer).then(() => {946          expect(vm.$el.children[0].className).toBe('test')947        }).then(done)948      })949      it('separate enter and leave', done => {950        const enter = explicitDuration951        const leave = explicitDuration * 2952        const vm = new Vue({953          template: `954            <div>955              <transition :duration="{ enter: ${enter}, leave: ${leave} }">956                <div v-if="ok" class="test">foo</div>957              </transition>958            </div>959          `,960          data: { ok: true }961        }).$mount(el)962        vm.ok = false963        waitForUpdate(() => {964          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')965        }).thenWaitFor(nextFrame).then(() => {966          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')967        }).thenWaitFor(leave + buffer).then(() => {968          expect(vm.$el.children.length).toBe(0)969          vm.ok = true970        }).then(() => {971          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')972        }).thenWaitFor(nextFrame).then(() => {973          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')974        }).thenWaitFor(enter + buffer).then(() => {975          expect(vm.$el.children[0].className).toBe('test')976        }).then(done)977      })978      it('enter and leave + duration change', done => {979        const enter1 = explicitDuration * 2980        const enter2 = explicitDuration981        const leave1 = explicitDuration * 0.5982        const leave2 = explicitDuration * 3983        const vm = new Vue({984          template: `985            <div>986              <transition :duration="{ enter: enter, leave: leave }">987                <div v-if="ok" class="test">foo</div>988              </transition>989            </div>990          `,991          data: {992            ok: true,993            enter: enter1,994            leave: leave1995          }996        }).$mount(el)997        vm.ok = false998        waitForUpdate(() => {999          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1000        }).thenWaitFor(nextFrame).then(() => {1001          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')1002        }).thenWaitFor(leave1 + buffer).then(() => {1003          expect(vm.$el.children.length).toBe(0)1004          vm.ok = true1005        }).then(() => {1006          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')1007        }).thenWaitFor(nextFrame).then(() => {1008          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')1009        }).thenWaitFor(enter1 + buffer).then(() => {1010          expect(vm.$el.children[0].className).toBe('test')1011          vm.enter = enter21012          vm.leave = leave21013        }).then(() => {1014          vm.ok = false1015        }).then(() => {1016          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')1017        }).thenWaitFor(nextFrame).then(() => {1018          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')1019        }).thenWaitFor(leave2 + buffer).then(() => {1020          expect(vm.$el.children.length).toBe(0)1021          vm.ok = true1022        }).then(() => {1023          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')1024        }).thenWaitFor(nextFrame).then(() => {1025          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')1026        }).thenWaitFor(enter2 + buffer).then(() => {1027          expect(vm.$el.children[0].className).toBe('test')1028        }).then(done)1029      }, 10000)1030      it('warn invalid durations', done => {1031        const vm = new Vue({1032          template: `1033            <div>1034              <transition :duration="{ enter: NaN, leave: 'foo' }">1035                <div v-if="ok" class="test">foo</div>1036              </transition>1037            </div>1038          `,1039          data: {1040            ok: true1041          }1042        }).$mount(el)1043        vm.ok = false1044        waitForUpdate(() => {1045          expect(`<transition> explicit leave duration is not a valid number - got "foo"`).toHaveBeenWarned()1046        }).thenWaitFor(duration + buffer).then(() => {1047          vm.ok = true1048        }).then(() => {1049          expect(`<transition> explicit enter duration is NaN`).toHaveBeenWarned()1050        }).then(done)1051      })1052    })1053    // #66871054    it('transition on child components with empty root node', done => {1055      const vm = new Vue({1056        template: `1057          <div>1058            <transition mode="out-in">1059              <component class="test" :is="view"></component>1060            </transition>1061          </div>1062        `,1063        data: { view: 'one' },1064        components: {1065          'one': {1066            template: '<div v-if="false">one</div>'1067          },1068          'two': {1069            template: '<div>two</div>'1070          }1071        }1072      }).$mount(el)1073      // should not apply transition on initial render by default1074      expect(vm.$el.innerHTML).toBe('<!---->')1075      vm.view = 'two'1076      waitForUpdate(() => {1077        expect(vm.$el.innerHTML).toBe('<div class="test v-enter v-enter-active">two</div>')1078      }).thenWaitFor(nextFrame).then(() => {1079        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')1080      }).thenWaitFor(duration + buffer).then(() => {1081        expect(vm.$el.children[0].className).toBe('test')1082        vm.view = 'one'1083      }).then(() => {1084        // incoming comment node is appended instantly because it doesn't have1085        // data and therefore doesn't go through the transition module.1086        expect(vm.$el.innerHTML).toBe('<div class="test v-leave v-leave-active">two</div><!---->')1087      }).thenWaitFor(nextFrame).then(() => {1088        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')1089      }).thenWaitFor(duration + buffer).then(() => {1090        expect(vm.$el.innerHTML).toBe('<!---->')1091      }).then(done)1092    })1093  })...

EmployeeLeaveSummaryMain.js

Source:EmployeeLeaveSummaryMain.js

1Ext.define('Testl.testl.web.com.view.humanresourcecontext.attendance.EmployeeLeaveSummaryMain', {2     "extend": "Ext.tab.Panel",3     "customWidgetType": "vdTabLayout",4     "controller": "EmployeeLeaveSummaryMainController",5     "restURL": "/EmployeeLeaveSummary",6     "defaults": {7          "split": true8     },9     "requires": ["Testl.testl.web.com.controller.humanresourcecontext.attendance.EmployeeLeaveSummaryMainController", "Testl.testl.shared.com.model.humanresourcecontext.employee.EmpInformationModel", "Testl.testl.shared.com.viewmodel.humanresourcecontext.attendance.EmployeeLeaveSummaryViewModel"],10     "tabPosition": "bottom",11     "communicationLog": [],12     "itemId": "EmployeeLeaveSummaryFormGridContainer",13     "items": [{14          "title": "Data Browser",15          "layout": "border",16          "autoScroll": false,17          "customWidgetType": "vdBorderLayout",18          "items": [{19               "region": "center",20               "layout": "border",21               "customWidgetType": "vdBorderLayout",22               "items": [{23                    "customWidgetType": "vdFormpanel",24                    "viewModel": "EmployeeLeaveSummaryViewModel",25                    "xtype": "form",26                    "displayName": "Employee Leave Summary",27                    "title": "Employee Leave Summary",28                    "name": "EmployeeLeaveSummary",29                    "itemId": "EmployeeLeaveSummary",30                    "bodyPadding": 10,31                    "items": [{32                         "name": "empLeaveStatusId",33                         "itemId": "empLeaveStatusId",34                         "xtype": "textfield",35                         "customWidgetType": "vdTextfield",36                         "displayName": "attendenceId",37                         "margin": "5 5 5 5",38                         "fieldLabel": "attendenceId<font color='red'> *<\/font>",39                         "fieldId": "C08521AF-21F2-4FF0-B1F2-49EB49BDB9D6",40                         "minLength": "0",41                         "maxLength": "64",42                         "hidden": true,43                         "value": "",44                         "bindable": "empLeaveStatusId",45                         "bind": "{empLeaveStatusId}"46                    }, {47                         "name": "empId",48                         "itemId": "empId",49                         "xtype": "combo",50                         "customWidgetType": "vdCombo",51                         "displayName": "Employee",52                         "margin": "5 5 5 5",53                         "displayField": "primaryDisplay",54                         "valueField": "primaryKey",55                         "typeAhead": true,56                         "queryMode": "local",57                         "minChars": 2,58                         "store": {59                              "data": [],60                              "model": "Testl.testl.shared.com.model.humanresourcecontext.employee.EmpInformationModel"61                         },62                         "allowBlank": false,63                         "fieldLabel": "Employee<font color='red'> *<\/font>",64                         "fieldId": "9C5D4961-2F91-4612-BFE7-05DDC55105E0",65                         "restURL": "EmpInformation",66                         "bindable": "empId",67                         "bind": "{empId}"68                    }, {69                         "name": "privilege",70                         "itemId": "privilege",71                         "xtype": "numberfield",72                         "customWidgetType": "vdNumberfield",73                         "displayName": "Privilege Leave",74                         "margin": "5 5 5 5",75                         "fieldLabel": "Privilege Leave<font color='red'> *<\/font>",76                         "allowBlank": false,77                         "fieldId": "B384EB20-A834-4150-82C9-56C358CA8B92",78                         "minValue": "0",79                         "maxValue": "10",80                         "bindable": "privilege",81                         "bind": "{privilege}"82                    }, {83                         "name": "casualLeave",84                         "itemId": "casualLeave",85                         "xtype": "numberfield",86                         "customWidgetType": "vdNumberfield",87                         "displayName": "Casual Leave",88                         "margin": "5 5 5 5",89                         "fieldLabel": "Casual Leave<font color='red'> *<\/font>",90                         "allowBlank": false,91                         "fieldId": "CC6D0922-81BC-4D7F-B053-3FB79AF923C9",92                         "minValue": "0",93                         "maxValue": "10",94                         "bindable": "casualLeave",95                         "bind": "{casualLeave}"96                    }, {97                         "name": "sickLeave",98                         "itemId": "sickLeave",99                         "xtype": "numberfield",100                         "customWidgetType": "vdNumberfield",101                         "displayName": "Sick Leave",102                         "margin": "5 5 5 5",103                         "fieldLabel": "Sick Leave<font color='red'> *<\/font>",104                         "allowBlank": false,105                         "fieldId": "2679B9B3-38F3-4F86-B3EE-B63631F81D6D",106                         "minValue": "0",107                         "maxValue": "10",108                         "bindable": "sickLeave",109                         "bind": "{sickLeave}"110                    }, {111                         "name": "maternityLeave",112                         "itemId": "maternityLeave",113                         "xtype": "numberfield",114                         "customWidgetType": "vdNumberfield",115                         "displayName": "Maternity Leave",116                         "margin": "5 5 5 5",117                         "fieldLabel": "Maternity Leave<font color='red'> *<\/font>",118                         "allowBlank": false,119                         "fieldId": "C40A76D6-723E-4DA4-99AE-FCCBD485D29A",120                         "minValue": "0",121                         "maxValue": "10",122                         "bindable": "maternityLeave",123                         "bind": "{maternityLeave}"124                    }, {125                         "name": "privilegeTaken",126                         "itemId": "privilegeTaken",127                         "xtype": "numberfield",128                         "customWidgetType": "vdNumberfield",129                         "displayName": "Privilege Leave",130                         "margin": "5 5 5 5",131                         "fieldLabel": "Privilege Leave<font color='red'> *<\/font>",132                         "allowBlank": false,133                         "fieldId": "A1CF6CB7-AC47-4448-B7FC-CDD7AFB8C974",134                         "minValue": "0",135                         "maxValue": "10",136                         "bindable": "privilegeTaken",137                         "bind": "{privilegeTaken}"138                    }, {139                         "name": "casualLeaveTaken",140                         "itemId": "casualLeaveTaken",141                         "xtype": "numberfield",142                         "customWidgetType": "vdNumberfield",143                         "displayName": "Casual Leave",144                         "margin": "5 5 5 5",145                         "fieldLabel": "Casual Leave<font color='red'> *<\/font>",146                         "allowBlank": false,147                         "fieldId": "F5F84583-FFAB-4DEE-A8C4-342B86C83E04",148                         "minValue": "0",149                         "maxValue": "10",150                         "bindable": "casualLeaveTaken",151                         "bind": "{casualLeaveTaken}"152                    }, {153                         "name": "sickLeaveTaken",154                         "itemId": "sickLeaveTaken",155                         "xtype": "numberfield",156                         "customWidgetType": "vdNumberfield",157                         "displayName": "Sick Leave",158                         "margin": "5 5 5 5",159                         "fieldLabel": "Sick Leave<font color='red'> *<\/font>",160                         "allowBlank": false,161                         "fieldId": "8C5E32A7-5FD0-4423-9BF4-A5F55F1C6029",162                         "minValue": "0",163                         "maxValue": "10",164                         "bindable": "sickLeaveTaken",165                         "bind": "{sickLeaveTaken}"166                    }, {167                         "name": "maternityLeaveTaken",168                         "itemId": "maternityLeaveTaken",169                         "xtype": "numberfield",170                         "customWidgetType": "vdNumberfield",171                         "displayName": "Maternity Leave",172                         "margin": "5 5 5 5",173                         "fieldLabel": "Maternity Leave<font color='red'> *<\/font>",174                         "allowBlank": false,175                         "fieldId": "23B08B9F-8789-45DE-BB36-27212A0F231F",176                         "minValue": "0",177                         "maxValue": "10",178                         "bindable": "maternityLeaveTaken",179                         "bind": "{maternityLeaveTaken}"180                    }, {181                         "name": "year",182                         "itemId": "year",183                         "xtype": "numberfield",184                         "customWidgetType": "vdNumberfield",185                         "displayName": "Financial Year",186                         "margin": "5 5 5 5",187                         "fieldLabel": "Financial Year<font color='red'> *<\/font>",188                         "allowBlank": false,189                         "fieldId": "65774B6D-DC9D-4976-934F-7F0BD0FFB257",190                         "minValue": "0",191                         "maxValue": "10",192                         "bindable": "year",193                         "bind": "{year}"194                    }, {195                         "name": "lop",196                         "itemId": "lop",197                         "xtype": "numberfield",198                         "customWidgetType": "vdNumberfield",199                         "displayName": "Loss Of Pay",200                         "margin": "5 5 5 5",201                         "fieldLabel": "Loss Of Pay<font color='red'> *<\/font>",202                         "allowBlank": false,203                         "fieldId": "7FCCC59E-90DE-4546-BD69-03E115DBF7F0",204                         "minValue": "0",205                         "maxValue": "10",206                         "bindable": "lop",207                         "bind": "{lop}"208                    }, {209                         "name": "versionId",210                         "itemId": "versionId",211                         "xtype": "numberfield",212                         "customWidgetType": "vdNumberfield",213                         "displayName": "versionId",214                         "margin": "5 5 5 5",215                         "value": "-1",216                         "fieldLabel": "versionId",217                         "fieldId": "AC306F3F-162D-4620-BB9D-825DBE7B0BF1",218                         "bindable": "versionId",219                         "bind": "{versionId}",220                         "hidden": true221                    }],222                    "layout": "column",223                    "defaults": {224                         "columnWidth": 0.5,225                         "labelAlign": "left",226                         "labelWidth": 200227                    },228                    "autoScroll": true,229                    "dockedItems": [{230                         "xtype ": "toolbar",231                         "customWidgetType": "vdBBar",232                         "dock": "bottom",233                         "ui": "footer",234                         "isDockedItem": true,235                         "parentId": 1,236                         "customId": 210,237                         "items": [{238                              "xtype": "tbfill",239                              "customWidgetType": "vdTbFill",240                              "parentId": 210,241                              "customId": 874242                         }, {243                              "customWidgetType": "vdButton",244                              "xtype": "button",245                              "name": "saveFormButton",246                              "margin": "0 5 0 5",247                              "text": "Save",248                              "hiddenName": "button",249                              "canHaveParent": false,250                              "itemId": "saveFormButton",251                              "parentId": 210,252                              "customId": 875,253                              "listeners": {254                                   "click": "saveForm"255                              }256                         }, {257                              "customWidgetType": "vdButton",258                              "xtype": "button",259                              "name": "resetFormButton",260                              "margin": "0 5 0 5",261                              "text": "Reset",262                              "hiddenName": "button",263                              "canHaveParent": false,264                              "itemId": "resetFormButton",265                              "parentId": 210,266                              "customId": 876,267                              "listeners": {268                                   "click": "resetForm"269                              }270                         }],271                         "defaults": {}272                    }],273                    "listeners": {274                         "scope": "controller"275                    },276                    "tools": [{277                         "type": "help",278                         "tooltip": "Console",279                         "handler": "onConsoleClick"280                    }, {281                         "type": "refresh",282                         "tooltip": "Refresh Tab",283                         "handler": "init"284                    }],285                    "extend": "Ext.form.Panel",286                    "region": "center"287               }, {288                    "xtype": "panel",289                    "layout": "border",290                    "customWidgetType": "vdPanel",291                    "title": "Details Grid",292                    "columns": [{293                         "header": "attendenceId",294                         "dataIndex": "empLeaveStatusId",295                         "hidden": true,296                         "flex": 1297                    }, {298                         "header": "primaryDisplay",299                         "dataIndex": "primaryDisplay",300                         "hidden": true301                    }, {302                         "header": "primaryKey",303                         "dataIndex": "primaryKey",304                         "hidden": true305                    }, {306                         "header": "Employee",307                         "dataIndex": "empId",308                         "renderer": "renderFormValue",309                         "flex": 1310                    }, {311                         "header": "Privilege Leave",312                         "dataIndex": "privilege",313                         "flex": 1314                    }, {315                         "header": "Casual Leave",316                         "dataIndex": "casualLeave",317                         "flex": 1318                    }, {319                         "header": "Sick Leave",320                         "dataIndex": "sickLeave",321                         "flex": 1322                    }, {323                         "header": "Maternity Leave",324                         "dataIndex": "maternityLeave",325                         "flex": 1326                    }, {327                         "header": "Privilege Leave",328                         "dataIndex": "privilegeTaken",329                         "flex": 1330                    }, {331                         "header": "Casual Leave",332                         "dataIndex": "casualLeaveTaken",333                         "flex": 1334                    }, {335                         "header": "Sick Leave",336                         "dataIndex": "sickLeaveTaken",337                         "flex": 1338                    }, {339                         "header": "Maternity Leave",340                         "dataIndex": "maternityLeaveTaken",341                         "flex": 1342                    }, {343                         "header": "Financial Year",344                         "dataIndex": "year",345                         "flex": 1346                    }, {347                         "header": "Loss Of Pay",348                         "dataIndex": "lop",349                         "flex": 1350                    }, {351                         "header": "createdBy",352                         "dataIndex": "createdBy",353                         "hidden": true,354                         "flex": 1355                    }, {356                         "header": "createdDate",357                         "dataIndex": "createdDate",358                         "hidden": true,359                         "flex": 1360                    }, {361                         "header": "updatedBy",362                         "dataIndex": "updatedBy",363                         "hidden": true,364                         "flex": 1365                    }, {366                         "header": "updatedDate",367                         "dataIndex": "updatedDate",368                         "hidden": true,369                         "flex": 1370                    }, {371                         "header": "versionId",372                         "dataIndex": "versionId",373                         "hidden": true,374                         "flex": 1375                    }, {376                         "header": "activeStatus",377                         "dataIndex": "activeStatus",378                         "hidden": true,379                         "flex": 1380                    }, {381                         "header": "txnAccessCode",382                         "dataIndex": "txnAccessCode",383                         "hidden": true,384                         "flex": 1385                    }, {386                         "xtype": "actioncolumn",387                         "customWidgetType": "vdActionColumn",388                         "width": 30,389                         "sortable": false,390                         "menuDisable": true,391                         "items": [{392                              "icon": "images/delete.gif",393                              "tooltip": "Delete Record",394                              "handler": "onDeleteActionColumnClickMainGrid"395                         }]396                    }],397                    "items": [{398                         "xtype": "form",399                         "title": "Advance Search",400                         "region": "west",401                         "width": "20%",402                         "margin": "0 5 0 0",403                         "collapsible": true,404                         "collapsed": true,405                         "customWidgetType": "vdFormpanel",406                         "itemId": "queryPanel",407                         "dockedItems": [{408                              "xtype ": "toolbar",409                              "customWidgetType": "vdBBar",410                              "dock": "bottom",411                              "isDockedItem": true,412                              "items": [{413                                   "xtype": "tbfill",414                                   "customWidgetType": "vdTbFill"415                              }, {416                                   "xtype": "button",417                                   "customWidgetType": "vdButton",418                                   "text": "Filter",419                                   "name": "filterButton",420                                   "handler": "onFilterClick"421                              }]422                         }],423                         "items": [{424                              "name": "empId",425                              "itemId": "empId",426                              "xtype": "combo",427                              "customWidgetType": "vdCombo",428                              "displayName": "Employee",429                              "margin": "5 5 5 5",430                              "displayField": "primaryDisplay",431                              "valueField": "primaryKey",432                              "typeAhead": true,433                              "queryMode": "local",434                              "minChars": 2,435                              "store": {436                                   "data": [],437                                   "model": "Testl.testl.shared.com.model.humanresourcecontext.employee.EmpInformationModel"438                              },439                              "fieldLabel": "Employee",440                              "fieldId": "9C5D4961-2F91-4612-BFE7-05DDC55105E0",441                              "restURL": "EmpInformation",442                              "bindable": "empId"443                         }]444                    }, {445                         "region": "center",446                         "xtype": "gridpanel",447                         "customWidgetType": "vdGrid",448                         "displayName": "Employee Leave Summary",449                         "name": "EmployeeLeaveSummaryGrid",450                         "itemId": "EmployeeLeaveSummaryGrid",451                         "restURL": "/EmployeeLeaveSummary",452                         "store": [],453                         "bodyPadding": 10,454                         "dockedItems": [{455                              "xtype": "toolbar",456                              "dock": "top",457                              "items": [{458                                   "xtype": "triggerfield",459                                   "emptyText": "search",460                                   "triggerCls": "",461                                   "listeners": {462                                        "change": "onTriggerfieldChange",463                                        "buffer": 250464                                   }465                              }]466                         }],467                         "columns": [{468                              "header": "attendenceId",469                              "dataIndex": "empLeaveStatusId",470                              "hidden": true,471                              "flex": 1472                         }, {473                              "header": "primaryDisplay",474                              "dataIndex": "primaryDisplay",475                              "hidden": true476                         }, {477                              "header": "primaryKey",478                              "dataIndex": "primaryKey",479                              "hidden": true480                         }, {481                              "header": "Employee",482                              "dataIndex": "empId",483                              "renderer": "renderFormValue",484                              "flex": 1485                         }, {486                              "header": "Privilege Leave",487                              "dataIndex": "privilege",488                              "flex": 1489                         }, {490                              "header": "Casual Leave",491                              "dataIndex": "casualLeave",492                              "flex": 1493                         }, {494                              "header": "Sick Leave",495                              "dataIndex": "sickLeave",496                              "flex": 1497                         }, {498                              "header": "Maternity Leave",499                              "dataIndex": "maternityLeave",500                              "flex": 1501                         }, {502                              "header": "Privilege Leave",503                              "dataIndex": "privilegeTaken",504                              "flex": 1505                         }, {506                              "header": "Casual Leave",507                              "dataIndex": "casualLeaveTaken",508                              "flex": 1509                         }, {510                              "header": "Sick Leave",511                              "dataIndex": "sickLeaveTaken",512                              "flex": 1513                         }, {514                              "header": "Maternity Leave",515                              "dataIndex": "maternityLeaveTaken",516                              "flex": 1517                         }, {518                              "header": "Financial Year",519                              "dataIndex": "year",520                              "flex": 1521                         }, {522                              "header": "Loss Of Pay",523                              "dataIndex": "lop",524                              "flex": 1525                         }, {526                              "header": "createdBy",527                              "dataIndex": "createdBy",528                              "hidden": true,529                              "flex": 1530                         }, {531                              "header": "createdDate",532                              "dataIndex": "createdDate",533                              "hidden": true,534                              "flex": 1535                         }, {536                              "header": "updatedBy",537                              "dataIndex": "updatedBy",538                              "hidden": true,539                              "flex": 1540                         }, {541                              "header": "updatedDate",542                              "dataIndex": "updatedDate",543                              "hidden": true,544                              "flex": 1545                         }, {546                              "header": "versionId",547                              "dataIndex": "versionId",548                              "hidden": true,549                              "flex": 1550                         }, {551                              "header": "activeStatus",552                              "dataIndex": "activeStatus",553                              "hidden": true,554                              "flex": 1555                         }, {556                              "header": "txnAccessCode",557                              "dataIndex": "txnAccessCode",558                              "hidden": true,559                              "flex": 1560                         }, {561                              "xtype": "actioncolumn",562                              "customWidgetType": "vdActionColumn",563                              "width": 30,564                              "sortable": false,565                              "menuDisable": true,566                              "items": [{567                                   "icon": "images/delete.gif",568                                   "tooltip": "Delete Record",569                                   "handler": "onDeleteActionColumnClickMainGrid"570                              }]571                         }],572                         "listeners": {573                              "itemclick": "onGridItemClick"574                         }575                    }],576                    "tools": [{577                         "type": "refresh",578                         "tooltip": "Refresh Grid Data",579                         "handler": "onGridRefreshClick"580                    }],581                    "collapsible": true,582                    "titleCollapse": true,583                    "collapseMode": "header",584                    "region": "south",585                    "height": "40%"586               }]587          }]588     }, {589          "title": "Add New",590          "itemId": "addNewForm",591          "layout": "border",592          "customWidgetType": "vdBorderLayout",593          "autoScroll": false,594          "items": [{595               "customWidgetType": "vdFormpanel",596               "viewModel": "EmployeeLeaveSummaryViewModel",597               "xtype": "form",598               "displayName": "Employee Leave Summary",599               "title": "Employee Leave Summary",600               "name": "EmployeeLeaveSummary",601               "itemId": "EmployeeLeaveSummary",602               "bodyPadding": 10,603               "items": [{604                    "name": "empLeaveStatusId",605                    "itemId": "empLeaveStatusId",606                    "xtype": "textfield",607                    "customWidgetType": "vdTextfield",608                    "displayName": "attendenceId",609                    "margin": "5 5 5 5",610                    "fieldLabel": "attendenceId<font color='red'> *<\/font>",611                    "fieldId": "C08521AF-21F2-4FF0-B1F2-49EB49BDB9D6",612                    "minLength": "0",613                    "maxLength": "64",614                    "hidden": true,615                    "value": "",616                    "bindable": "empLeaveStatusId",617                    "bind": "{empLeaveStatusId}"618               }, {619                    "name": "empId",620                    "itemId": "empId",621                    "xtype": "combo",622                    "customWidgetType": "vdCombo",623                    "displayName": "Employee",624                    "margin": "5 5 5 5",625                    "displayField": "primaryDisplay",626                    "valueField": "primaryKey",627                    "typeAhead": true,628                    "queryMode": "local",629                    "minChars": 2,630                    "store": {631                         "data": [],632                         "model": "Testl.testl.shared.com.model.humanresourcecontext.employee.EmpInformationModel"633                    },634                    "allowBlank": false,635                    "fieldLabel": "Employee<font color='red'> *<\/font>",636                    "fieldId": "9C5D4961-2F91-4612-BFE7-05DDC55105E0",637                    "restURL": "EmpInformation",638                    "bindable": "empId",639                    "bind": "{empId}"640               }, {641                    "name": "privilege",642                    "itemId": "privilege",643                    "xtype": "numberfield",644                    "customWidgetType": "vdNumberfield",645                    "displayName": "Privilege Leave",646                    "margin": "5 5 5 5",647                    "fieldLabel": "Privilege Leave<font color='red'> *<\/font>",648                    "allowBlank": false,649                    "fieldId": "B384EB20-A834-4150-82C9-56C358CA8B92",650                    "minValue": "0",651                    "maxValue": "10",652                    "bindable": "privilege",653                    "bind": "{privilege}"654               }, {655                    "name": "casualLeave",656                    "itemId": "casualLeave",657                    "xtype": "numberfield",658                    "customWidgetType": "vdNumberfield",659                    "displayName": "Casual Leave",660                    "margin": "5 5 5 5",661                    "fieldLabel": "Casual Leave<font color='red'> *<\/font>",662                    "allowBlank": false,663                    "fieldId": "CC6D0922-81BC-4D7F-B053-3FB79AF923C9",664                    "minValue": "0",665                    "maxValue": "10",666                    "bindable": "casualLeave",667                    "bind": "{casualLeave}"668               }, {669                    "name": "sickLeave",670                    "itemId": "sickLeave",671                    "xtype": "numberfield",672                    "customWidgetType": "vdNumberfield",673                    "displayName": "Sick Leave",674                    "margin": "5 5 5 5",675                    "fieldLabel": "Sick Leave<font color='red'> *<\/font>",676                    "allowBlank": false,677                    "fieldId": "2679B9B3-38F3-4F86-B3EE-B63631F81D6D",678                    "minValue": "0",679                    "maxValue": "10",680                    "bindable": "sickLeave",681                    "bind": "{sickLeave}"682               }, {683                    "name": "maternityLeave",684                    "itemId": "maternityLeave",685                    "xtype": "numberfield",686                    "customWidgetType": "vdNumberfield",687                    "displayName": "Maternity Leave",688                    "margin": "5 5 5 5",689                    "fieldLabel": "Maternity Leave<font color='red'> *<\/font>",690                    "allowBlank": false,691                    "fieldId": "C40A76D6-723E-4DA4-99AE-FCCBD485D29A",692                    "minValue": "0",693                    "maxValue": "10",694                    "bindable": "maternityLeave",695                    "bind": "{maternityLeave}"696               }, {697                    "name": "privilegeTaken",698                    "itemId": "privilegeTaken",699                    "xtype": "numberfield",700                    "customWidgetType": "vdNumberfield",701                    "displayName": "Privilege Leave",702                    "margin": "5 5 5 5",703                    "fieldLabel": "Privilege Leave<font color='red'> *<\/font>",704                    "allowBlank": false,705                    "fieldId": "A1CF6CB7-AC47-4448-B7FC-CDD7AFB8C974",706                    "minValue": "0",707                    "maxValue": "10",708                    "bindable": "privilegeTaken",709                    "bind": "{privilegeTaken}"710               }, {711                    "name": "casualLeaveTaken",712                    "itemId": "casualLeaveTaken",713                    "xtype": "numberfield",714                    "customWidgetType": "vdNumberfield",715                    "displayName": "Casual Leave",716                    "margin": "5 5 5 5",717                    "fieldLabel": "Casual Leave<font color='red'> *<\/font>",718                    "allowBlank": false,719                    "fieldId": "F5F84583-FFAB-4DEE-A8C4-342B86C83E04",720                    "minValue": "0",721                    "maxValue": "10",722                    "bindable": "casualLeaveTaken",723                    "bind": "{casualLeaveTaken}"724               }, {725                    "name": "sickLeaveTaken",726                    "itemId": "sickLeaveTaken",727                    "xtype": "numberfield",728                    "customWidgetType": "vdNumberfield",729                    "displayName": "Sick Leave",730                    "margin": "5 5 5 5",731                    "fieldLabel": "Sick Leave<font color='red'> *<\/font>",732                    "allowBlank": false,733                    "fieldId": "8C5E32A7-5FD0-4423-9BF4-A5F55F1C6029",734                    "minValue": "0",735                    "maxValue": "10",736                    "bindable": "sickLeaveTaken",737                    "bind": "{sickLeaveTaken}"738               }, {739                    "name": "maternityLeaveTaken",740                    "itemId": "maternityLeaveTaken",741                    "xtype": "numberfield",742                    "customWidgetType": "vdNumberfield",743                    "displayName": "Maternity Leave",744                    "margin": "5 5 5 5",745                    "fieldLabel": "Maternity Leave<font color='red'> *<\/font>",746                    "allowBlank": false,747                    "fieldId": "23B08B9F-8789-45DE-BB36-27212A0F231F",748                    "minValue": "0",749                    "maxValue": "10",750                    "bindable": "maternityLeaveTaken",751                    "bind": "{maternityLeaveTaken}"752               }, {753                    "name": "year",754                    "itemId": "year",755                    "xtype": "numberfield",756                    "customWidgetType": "vdNumberfield",757                    "displayName": "Financial Year",758                    "margin": "5 5 5 5",759                    "fieldLabel": "Financial Year<font color='red'> *<\/font>",760                    "allowBlank": false,761                    "fieldId": "65774B6D-DC9D-4976-934F-7F0BD0FFB257",762                    "minValue": "0",763                    "maxValue": "10",764                    "bindable": "year",765                    "bind": "{year}"766               }, {767                    "name": "lop",768                    "itemId": "lop",769                    "xtype": "numberfield",770                    "customWidgetType": "vdNumberfield",771                    "displayName": "Loss Of Pay",772                    "margin": "5 5 5 5",773                    "fieldLabel": "Loss Of Pay<font color='red'> *<\/font>",774                    "allowBlank": false,775                    "fieldId": "7FCCC59E-90DE-4546-BD69-03E115DBF7F0",776                    "minValue": "0",777                    "maxValue": "10",778                    "bindable": "lop",779                    "bind": "{lop}"780               }, {781                    "name": "versionId",782                    "itemId": "versionId",783                    "xtype": "numberfield",784                    "customWidgetType": "vdNumberfield",785                    "displayName": "versionId",786                    "margin": "5 5 5 5",787                    "value": "-1",788                    "fieldLabel": "versionId",789                    "fieldId": "AC306F3F-162D-4620-BB9D-825DBE7B0BF1",790                    "bindable": "versionId",791                    "bind": "{versionId}",792                    "hidden": true793               }],794               "layout": "column",795               "defaults": {796                    "columnWidth": 0.5,797                    "labelAlign": "left",798                    "labelWidth": 200799               },800               "autoScroll": true,801               "dockedItems": [{802                    "xtype ": "toolbar",803                    "customWidgetType": "vdBBar",804                    "dock": "bottom",805                    "ui": "footer",806                    "isDockedItem": true,807                    "parentId": 1,808                    "customId": 210,809                    "items": [{810                         "xtype": "tbfill",811                         "customWidgetType": "vdTbFill",812                         "parentId": 210,813                         "customId": 874814                    }, {815                         "customWidgetType": "vdButton",816                         "xtype": "button",817                         "name": "saveFormButton",818                         "margin": "0 5 0 5",819                         "text": "Save",820                         "hiddenName": "button",821                         "canHaveParent": false,822                         "itemId": "saveFormButton",823                         "parentId": 210,824                         "customId": 875,825                         "listeners": {826                              "click": "saveForm"827                         }828                    }, {829                         "customWidgetType": "vdButton",830                         "xtype": "button",831                         "name": "resetFormButton",832                         "margin": "0 5 0 5",833                         "text": "Reset",834                         "hiddenName": "button",835                         "canHaveParent": false,836                         "itemId": "resetFormButton",837                         "parentId": 210,838                         "customId": 876,839                         "listeners": {840                              "click": "resetForm"841                         }842                    }],843                    "defaults": {}844               }],845               "listeners": {846                    "scope": "controller"847               },848               "tools": [{849                    "type": "help",850                    "tooltip": "Console",851                    "handler": "onConsoleClick"852               }, {853                    "type": "refresh",854                    "tooltip": "Refresh Tab",855                    "handler": "init"856               }],857               "extend": "Ext.form.Panel",858               "region": "center"859          }]860     }]...

LeaveAllocationMain.js

Source:LeaveAllocationMain.js

1Ext.define('Testl.testl.web.com.view.humanresourcecontext.attendance.LeaveAllocationMain', {2     "extend": "Ext.tab.Panel",3     "customWidgetType": "vdTabLayout",4     "autoScroll": false,5     "controller": "LeaveAllocationMainController",6     "restURL": "/LeaveAllocation",7     "defaults": {8          "split": true9     },10     "requires": ["Testl.testl.shared.com.model.humanresourcecontext.attendance.LeaveAllocationModel", "Testl.testl.web.com.controller.humanresourcecontext.attendance.LeaveAllocationMainController", "Testl.testl.shared.com.viewmodel.humanresourcecontext.attendance.LeaveAllocationViewModel"],11     "communicationLog": [],12     "tabPosition": "bottom",13     "items": [{14          "title": "Data Browser",15          "layout": "border",16          "defaults": {17               "split": true18          },19          "autoScroll": false,20          "customWidgetType": "vdBorderLayout",21          "items": [{22               "xtype": "tabpanel",23               "customWidgetType": "vdTabLayout",24               "margin": "5 0 5 5",25               "border": 1,26               "style": {27                    "borderColor": "#f6f6f6",28                    "borderStyle": "solid",29                    "borderWidth": "1px"30               },31               "displayName": "Leave Allocation",32               "name": "LeaveAllocationTreeContainer",33               "itemId": "LeaveAllocationTreeContainer",34               "restURL": "/LeaveAllocation",35               "autoScroll": false,36               "collapsible": true,37               "titleCollapse": true,38               "collapseMode": "header",39               "collapsed": false,40               "items": [{41                    "xtype": "treepanel",42                    "customWidgetType": "vdTree",43                    "title": "Browse",44                    "name": "entityTreePanel",45                    "useArrows": true,46                    "rootVisible": false,47                    "itemId": "LeaveAllocationTree",48                    "listeners": {49                         "select": "treeClick"50                    },51                    "tbar": [{52                         "xtype": "triggerfield",53                         "customWidgetType": "vdTriggerField",54                         "emptyText": "Search",55                         "triggerCls": "",56                         "listeners": {57                              "change": "onTriggerfieldChange",58                              "buffer": 25059                         }60                    }, "->", {61                         "xtype": "tool",62                         "type": "refresh",63                         "tooltip": "Refresh Tree Data",64                         "handler": "onTreeRefreshClick"65                    }]66               }, {67                    "title": "Advance Search",68                    "xtype": "form",69                    "customWidgetType": "vdFormpanel",70                    "itemId": "queryPanel",71                    "dockedItems": [{72                         "xtype ": "toolbar",73                         "customWidgetType": "vdBBar",74                         "dock": "bottom",75                         "isDockedItem": true,76                         "items": [{77                              "xtype": "tbfill",78                              "customWidgetType": "vdTbFill"79                         }, {80                              "xtype": "button",81                              "customWidgetType": "vdButton",82                              "text": "Filter",83                              "name": "filterButton",84                              "handler": "onFilterClick"85                         }]86                    }],87                    "items": []88               }],89               "region": "west",90               "width": "20%"91          }, {92               "region": "center",93               "layout": "border",94               "defaults": {95                    "split": true96               },97               "customWidgetType": "vdBorderLayout",98               "items": [{99                    "customWidgetType": "vdFormpanel",100                    "viewModel": "LeaveAllocationViewModel",101                    "xtype": "form",102                    "displayName": "Leave Allocation",103                    "title": "Leave Allocation",104                    "name": "LeaveAllocation",105                    "itemId": "LeaveAllocation",106                    "bodyPadding": 10,107                    "items": [{108                         "name": "leaveCategoryId",109                         "itemId": "leaveCategoryId",110                         "xtype": "textfield",111                         "customWidgetType": "vdTextfield",112                         "displayName": "leaveCategoryId",113                         "margin": "5 5 5 5",114                         "fieldLabel": "leaveCategoryId<font color='red'> *<\/font>",115                         "fieldId": "F4E94CAB-A7C4-4FE6-A959-0BB395300DF1",116                         "minLength": "0",117                         "maxLength": "64",118                         "hidden": true,119                         "value": "",120                         "bindable": "leaveCategoryId",121                         "bind": "{leaveCategoryId}"122                    }, {123                         "name": "privilege",124                         "itemId": "privilege",125                         "xtype": "numberfield",126                         "customWidgetType": "vdNumberfield",127                         "displayName": "Privilege Leave",128                         "margin": "5 5 5 5",129                         "fieldLabel": "Privilege Leave<font color='red'> *<\/font>",130                         "allowBlank": false,131                         "fieldId": "5F0F3B9A-C762-4CE3-829B-7B7FEDC9E9F0",132                         "minValue": "0",133                         "maxValue": "10",134                         "bindable": "privilege",135                         "bind": "{privilege}",136                         "columnWidth": 0.5137                    }, {138                         "name": "casualLeave",139                         "itemId": "casualLeave",140                         "xtype": "numberfield",141                         "customWidgetType": "vdNumberfield",142                         "displayName": "Casual Leave",143                         "margin": "5 5 5 5",144                         "fieldLabel": "Casual Leave<font color='red'> *<\/font>",145                         "allowBlank": false,146                         "fieldId": "FD61CA95-724C-4081-BAB1-60383FF2295E",147                         "minValue": "0",148                         "maxValue": "10",149                         "bindable": "casualLeave",150                         "bind": "{casualLeave}",151                         "columnWidth": 0.5152                    }, {153                         "name": "sickLeave",154                         "itemId": "sickLeave",155                         "xtype": "numberfield",156                         "customWidgetType": "vdNumberfield",157                         "displayName": "Sick Leave",158                         "margin": "5 5 5 5",159                         "fieldLabel": "Sick Leave<font color='red'> *<\/font>",160                         "allowBlank": false,161                         "fieldId": "F3B8ED07-8A1C-4711-B16B-BBD09D052CEC",162                         "minValue": "0",163                         "maxValue": "10",164                         "bindable": "sickLeave",165                         "bind": "{sickLeave}",166                         "columnWidth": 0.5167                    }, {168                         "name": "maternityLeave",169                         "itemId": "maternityLeave",170                         "xtype": "numberfield",171                         "customWidgetType": "vdNumberfield",172                         "displayName": "Maternity Leave",173                         "margin": "5 5 5 5",174                         "fieldLabel": "Maternity Leave<font color='red'> *<\/font>",175                         "allowBlank": false,176                         "fieldId": "EA153D1A-8041-43D2-8D21-BC0961E40827",177                         "minValue": "0",178                         "maxValue": "10",179                         "bindable": "maternityLeave",180                         "bind": "{maternityLeave}",181                         "columnWidth": 0.5182                    }, {183                         "name": "year",184                         "itemId": "year",185                         "xtype": "numberfield",186                         "customWidgetType": "vdNumberfield",187                         "displayName": "Financial Year",188                         "margin": "5 5 5 5",189                         "fieldLabel": "Financial Year<font color='red'> *<\/font>",190                         "allowBlank": false,191                         "fieldId": "1DEB1387-F906-427F-82BE-A5C3572E5BD3",192                         "minValue": "0",193                         "maxValue": "10",194                         "bindable": "year",195                         "bind": "{year}",196                         "columnWidth": 0.5197                    }, {198                         "name": "versionId",199                         "itemId": "versionId",200                         "xtype": "numberfield",201                         "customWidgetType": "vdNumberfield",202                         "displayName": "versionId",203                         "margin": "5 5 5 5",204                         "value": "-1",205                         "fieldLabel": "versionId",206                         "fieldId": "0E023E43-517A-42DC-A877-86A6FD461EA5",207                         "bindable": "versionId",208                         "bind": "{versionId}",209                         "hidden": true210                    }],211                    "layout": "column",212                    "defaults": {213                         "columnWidth": 0.5,214                         "labelAlign": "left",215                         "labelWidth": 200216                    },217                    "autoScroll": true,218                    "dockedItems": [{219                         "xtype ": "toolbar",220                         "customWidgetType": "vdBBar",221                         "dock": "bottom",222                         "ui": "footer",223                         "isDockedItem": true,224                         "parentId": 1,225                         "customId": 670,226                         "items": [{227                              "xtype": "tbfill",228                              "customWidgetType": "vdTbFill",229                              "parentId": 670,230                              "customId": 758231                         }, {232                              "customWidgetType": "vdButton",233                              "xtype": "button",234                              "name": "saveFormButton",235                              "margin": "0 5 0 5",236                              "text": "Save",237                              "hiddenName": "button",238                              "canHaveParent": false,239                              "itemId": "saveFormButton",240                              "parentId": 670,241                              "customId": 759,242                              "listeners": {243                                   "click": "saveForm"244                              }245                         }, {246                              "customWidgetType": "vdButton",247                              "xtype": "button",248                              "name": "resetFormButton",249                              "margin": "0 5 0 5",250                              "text": "Reset",251                              "hiddenName": "button",252                              "canHaveParent": false,253                              "itemId": "resetFormButton",254                              "parentId": 670,255                              "customId": 760,256                              "listeners": {257                                   "click": "resetForm"258                              }259                         }],260                         "defaults": {}261                    }],262                    "listeners": {263                         "scope": "controller"264                    },265                    "tools": [{266                         "type": "help",267                         "tooltip": "Console",268                         "handler": "onConsoleClick"269                    }, {270                         "type": "refresh",271                         "tooltip": "Refresh Tab",272                         "handler": "init"273                    }],274                    "extend": "Ext.form.Panel",275                    "region": "center"276               }, {277                    "xtype": "gridpanel",278                    "customWidgetType": "vdGrid",279                    "displayName": "Leave Allocation",280                    "title": "Details Grid",281                    "name": "LeaveAllocationGrid",282                    "itemId": "LeaveAllocationGrid",283                    "restURL": "/LeaveAllocation",284                    "store": [],285                    "bodyPadding": 10,286                    "columns": [{287                         "header": "leaveCategoryId",288                         "dataIndex": "leaveCategoryId",289                         "hidden": true,290                         "flex": 1291                    }, {292                         "header": "primaryDisplay",293                         "dataIndex": "primaryDisplay",294                         "hidden": true295                    }, {296                         "header": "primaryKey",297                         "dataIndex": "primaryKey",298                         "hidden": true299                    }, {300                         "header": "Privilege Leave",301                         "dataIndex": "privilege",302                         "flex": 1303                    }, {304                         "header": "Casual Leave",305                         "dataIndex": "casualLeave",306                         "flex": 1307                    }, {308                         "header": "Sick Leave",309                         "dataIndex": "sickLeave",310                         "flex": 1311                    }, {312                         "header": "Maternity Leave",313                         "dataIndex": "maternityLeave",314                         "flex": 1315                    }, {316                         "header": "Financial Year",317                         "dataIndex": "year",318                         "flex": 1319                    }, {320                         "header": "createdBy",321                         "dataIndex": "createdBy",322                         "hidden": true,323                         "flex": 1324                    }, {325                         "header": "createdDate",326                         "dataIndex": "createdDate",327                         "hidden": true,328                         "flex": 1329                    }, {330                         "header": "updatedBy",331                         "dataIndex": "updatedBy",332                         "hidden": true,333                         "flex": 1334                    }, {335                         "header": "updatedDate",336                         "dataIndex": "updatedDate",337                         "hidden": true,338                         "flex": 1339                    }, {340                         "header": "versionId",341                         "dataIndex": "versionId",342                         "hidden": true,343                         "flex": 1344                    }, {345                         "header": "activeStatus",346                         "dataIndex": "activeStatus",347                         "hidden": true,348                         "flex": 1349                    }, {350                         "header": "txnAccessCode",351                         "dataIndex": "txnAccessCode",352                         "hidden": true,353                         "flex": 1354                    }, {355                         "xtype": "actioncolumn",356                         "customWidgetType": "vdActionColumn",357                         "width": 30,358                         "sortable": false,359                         "menuDisable": true,360                         "items": [{361                              "icon": "images/delete.gif",362                              "tooltip": "Delete Record",363                              "handler": "onDeleteActionColumnClickMainGrid"364                         }]365                    }],366                    "listeners": {367                         "itemclick": "onGridItemClick"368                    },369                    "tools": [{370                         "type": "refresh",371                         "tooltip": "Refresh Grid Data",372                         "handler": "onGridRefreshClick"373                    }],374                    "collapsible": true,375                    "titleCollapse": true,376                    "collapseMode": "header",377                    "region": "south",378                    "height": "40%"379               }]380          }]381     }, {382          "title": "Add New",383          "itemId": "addNewForm",384          "layout": "border",385          "customWidgetType": "vdBorderLayout",386          "autoScroll": false,387          "items": [{388               "customWidgetType": "vdFormpanel",389               "viewModel": "LeaveAllocationViewModel",390               "xtype": "form",391               "displayName": "Leave Allocation",392               "title": "Leave Allocation",393               "name": "LeaveAllocation",394               "itemId": "LeaveAllocation",395               "bodyPadding": 10,396               "items": [{397                    "name": "leaveCategoryId",398                    "itemId": "leaveCategoryId",399                    "xtype": "textfield",400                    "customWidgetType": "vdTextfield",401                    "displayName": "leaveCategoryId",402                    "margin": "5 5 5 5",403                    "fieldLabel": "leaveCategoryId<font color='red'> *<\/font>",404                    "fieldId": "F4E94CAB-A7C4-4FE6-A959-0BB395300DF1",405                    "minLength": "0",406                    "maxLength": "64",407                    "hidden": true,408                    "value": "",409                    "bindable": "leaveCategoryId",410                    "bind": "{leaveCategoryId}"411               }, {412                    "name": "privilege",413                    "itemId": "privilege",414                    "xtype": "numberfield",415                    "customWidgetType": "vdNumberfield",416                    "displayName": "Privilege Leave",417                    "margin": "5 5 5 5",418                    "fieldLabel": "Privilege Leave<font color='red'> *<\/font>",419                    "allowBlank": false,420                    "fieldId": "5F0F3B9A-C762-4CE3-829B-7B7FEDC9E9F0",421                    "minValue": "0",422                    "maxValue": "10",423                    "bindable": "privilege",424                    "bind": "{privilege}",425                    "columnWidth": 0.5426               }, {427                    "name": "casualLeave",428                    "itemId": "casualLeave",429                    "xtype": "numberfield",430                    "customWidgetType": "vdNumberfield",431                    "displayName": "Casual Leave",432                    "margin": "5 5 5 5",433                    "fieldLabel": "Casual Leave<font color='red'> *<\/font>",434                    "allowBlank": false,435                    "fieldId": "FD61CA95-724C-4081-BAB1-60383FF2295E",436                    "minValue": "0",437                    "maxValue": "10",438                    "bindable": "casualLeave",439                    "bind": "{casualLeave}",440                    "columnWidth": 0.5441               }, {442                    "name": "sickLeave",443                    "itemId": "sickLeave",444                    "xtype": "numberfield",445                    "customWidgetType": "vdNumberfield",446                    "displayName": "Sick Leave",447                    "margin": "5 5 5 5",448                    "fieldLabel": "Sick Leave<font color='red'> *<\/font>",449                    "allowBlank": false,450                    "fieldId": "F3B8ED07-8A1C-4711-B16B-BBD09D052CEC",451                    "minValue": "0",452                    "maxValue": "10",453                    "bindable": "sickLeave",454                    "bind": "{sickLeave}",455                    "columnWidth": 0.5456               }, {457                    "name": "maternityLeave",458                    "itemId": "maternityLeave",459                    "xtype": "numberfield",460                    "customWidgetType": "vdNumberfield",461                    "displayName": "Maternity Leave",462                    "margin": "5 5 5 5",463                    "fieldLabel": "Maternity Leave<font color='red'> *<\/font>",464                    "allowBlank": false,465                    "fieldId": "EA153D1A-8041-43D2-8D21-BC0961E40827",466                    "minValue": "0",467                    "maxValue": "10",468                    "bindable": "maternityLeave",469                    "bind": "{maternityLeave}",470                    "columnWidth": 0.5471               }, {472                    "name": "year",473                    "itemId": "year",474                    "xtype": "numberfield",475                    "customWidgetType": "vdNumberfield",476                    "displayName": "Financial Year",477                    "margin": "5 5 5 5",478                    "fieldLabel": "Financial Year<font color='red'> *<\/font>",479                    "allowBlank": false,480                    "fieldId": "1DEB1387-F906-427F-82BE-A5C3572E5BD3",481                    "minValue": "0",482                    "maxValue": "10",483                    "bindable": "year",484                    "bind": "{year}",485                    "columnWidth": 0.5486               }, {487                    "name": "versionId",488                    "itemId": "versionId",489                    "xtype": "numberfield",490                    "customWidgetType": "vdNumberfield",491                    "displayName": "versionId",492                    "margin": "5 5 5 5",493                    "value": "-1",494                    "fieldLabel": "versionId",495                    "fieldId": "0E023E43-517A-42DC-A877-86A6FD461EA5",496                    "bindable": "versionId",497                    "bind": "{versionId}",498                    "hidden": true499               }],500               "layout": "column",501               "defaults": {502                    "columnWidth": 0.5,503                    "labelAlign": "left",504                    "labelWidth": 200505               },506               "autoScroll": true,507               "dockedItems": [{508                    "xtype ": "toolbar",509                    "customWidgetType": "vdBBar",510                    "dock": "bottom",511                    "ui": "footer",512                    "isDockedItem": true,513                    "parentId": 1,514                    "customId": 670,515                    "items": [{516                         "xtype": "tbfill",517                         "customWidgetType": "vdTbFill",518                         "parentId": 670,519                         "customId": 758520                    }, {521                         "customWidgetType": "vdButton",522                         "xtype": "button",523                         "name": "saveFormButton",524                         "margin": "0 5 0 5",525                         "text": "Save",526                         "hiddenName": "button",527                         "canHaveParent": false,528                         "itemId": "saveFormButton",529                         "parentId": 670,530                         "customId": 759,531                         "listeners": {532                              "click": "saveForm"533                         }534                    }, {535                         "customWidgetType": "vdButton",536                         "xtype": "button",537                         "name": "resetFormButton",538                         "margin": "0 5 0 5",539                         "text": "Reset",540                         "hiddenName": "button",541                         "canHaveParent": false,542                         "itemId": "resetFormButton",543                         "parentId": 670,544                         "customId": 760,545                         "listeners": {546                              "click": "resetForm"547                         }548                    }],549                    "defaults": {}550               }],551               "listeners": {552                    "scope": "controller"553               },554               "tools": [{555                    "type": "help",556                    "tooltip": "Console",557                    "handler": "onConsoleClick"558               }, {559                    "type": "refresh",560                    "tooltip": "Refresh Tab",561                    "handler": "init"562               }],563               "extend": "Ext.form.Panel",564               "region": "center"565          }]566     }]...

leave.js

Source:leave.js

1(function($) {2    $(document).ready(function() {3        //alert("enter to leave.js");4        let employee_id = $("input[name=employee_id]").val();5        //alert('/employee/LeaveRequestTable/' + employee_id);6        //alert(employee_id);7        /**8         * Admin Leave Type9         */10        var tableLoadLeaveType = $('#leaveTypeDT').DataTable({11            ajax: '/admin/LeaveTypeTable',12            columns: [13                { "data": "id" },14                { "data": "leavetype" },15                { "data": "limit" },16                { "data": "percalendar" },17                {18                    "data": null,19                    render: function(data, type, row) {20                        return [`<a id="editLeaveTypeModal" class="btn btn-sm btn-success" data-id="${row.id}"><i class="fa fa-edit" aria-hidden="true" data-toggle="modal" href="#"></i></a>`, `<a class="btn btn-sm btn-danger" data-id="${row.id}" id="deleteLeaveTypeModal"><i class="fa fa-times" aria-hidden="true" data-toggle="modal" href="#" ></i></a>`];21                    }22                }23            ]24        });25        $(document).on('click', '#addLeaveType', function(e) {26            e.preventDefault();27            let leave_type = $("input[name=leave_type]").val();28            let percalender = $('#percalender').val();29            let total_leave_days = $("input[name=total_leave_days]").val();30            $.ajaxSetup({31                headers: {32                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')33                }34            });35            $.ajax({36                url: '/admin/add-leaveType',37                method: 'POST',38                data: {39                    'leave_type': leave_type,40                    'percalender': percalender,41                    'total_leave_days': total_leave_days42                },43                dataType: "json",44                success: function(response) {45                    $('#add_LeaveType_modal').modal('hide');46                    tableLoadLeaveType.ajax.reload();47                    //alert(data.id);48                },49                error: function(response) {50                    alert('error');51                    console.log(response);52                }53            });54        });55        //Admin Delete Leave Type56        $(document).on('click', 'a#deleteLeaveTypeModal', function(e) {57            e.preventDefault();58            $('#delete_LeaveType_modal').modal('show');59            let leaveTypeID = $(this).attr('data-id');60            $('#delete_LeaveType_modal input[name="leaveTypeID"]').val(leaveTypeID);61            //alert(leaveTypeID);62        });63        $(document).on('click', '#deleteLeaveType', function(e) {64            e.preventDefault();65            let leaveTypeID = $('#delete_LeaveType_modal input[name="leaveTypeID"]').val();66            //alert(leaveRequestID);67            $.ajaxSetup({68                headers: {69                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')70                }71            });72            $.ajax({73                url: '/admin/delete-leaveType/' + leaveTypeID,74                method: 'POST',75                dataType: "json",76                success: function(response) {77                    $('#delete_LeaveType_modal').modal('hide');78                    tableLoadLeaveType.ajax.reload();79                    //alert(data.id);80                },81                error: function(response) {82                    alert('error');83                    console.log(response);84                }85            });86        });87        //Admin Edit Type88        $(document).on('click', 'a#editLeaveTypeModal', function(e) {89            e.preventDefault();90            $('#edit_LeaveType_modal').modal('show');91            let leaveTypeID = $(this).attr('data-id');92            $('#edit_LeaveType_modal input[name="leaveTypeID"]').val(leaveTypeID);93            //alert(leaveRequestID);94            $.ajax({95                url: '/admin/edit-LeaveType/' + leaveTypeID,96                method: 'get',97                dataType: "json",98                success: function(data) {99                    console.log(data);100                    $("#percalenderEdit").val(data.percalendar).change();;101                    $('#edit_LeaveType_modal input[name="leave_typeEdit"]').val(data.leavetype);102                    $('#edit_LeaveType_modal input[name="total_leave_daysEdit"]').val(data.limit);103                    $('#edit_leaveRequest_modal').modal('show');104                },105                error: function(data) {106                    alert('error');107                    console.log(data);108                }109            });110        });111        $(document).on('click', '#editLeaveType', function(e) {112            e.preventDefault();113            let leaveTypeID = $('#edit_LeaveType_modal input[name="leaveTypeID"]').val();114            let leave_type = $("#edit_LeaveType_modal input[name=leave_typeEdit]").val();115            let percalender = $('#percalenderEdit').val();116            let total_leave_days = $("#edit_LeaveType_modal input[name=total_leave_daysEdit]").val();117            //alert(percalender);118            //alert('/employee/edit-LeaveRequest/' + leaveRequestID);119            $.ajaxSetup({120                headers: {121                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')122                }123            });124            $.ajax({125                url: '/admin/edit-LeaveType/' + leaveTypeID,126                method: 'POST',127                data: {128                    'leaveTypeID': leaveTypeID,129                    'leave_type': leave_type,130                    'percalender': percalender,131                    'total_leave_days': total_leave_days132                },133                success: function(response) {134                    console.log(response);135                    $('#edit_LeaveType_modal').modal('hide');136                    tableLoadLeaveType.ajax.reload();137                    //alert(data.id);138                },139                error: function(response) {140                    alert('error');141                    console.log(response);142                }143            });144        });145        /**146         * Admin Leave Request147         */148        var tableLoadLeaveRequest = $('#AdminLeaveRequestDT').DataTable({149            ajax: '/admin/LeaveRequestTable',150            columns: [151                { "data": "id" },152                { "data": "employee" },153                { "data": "type" },154                { "data": "leavefrom" },155                { "data": "leaveto" },156                { "data": "reason" },157                { "data": "status" },158                {159                    "data": null,160                    render: function(data, type, row) {161                        return [`<a id="approveLeaveRequestModal" class="btn btn-sm btn-success" data-id="${row.id}"><i class="fa fa-check" aria-hidden="true" data-toggle="modal" href="#"></i></a>`, `<a class="btn btn-sm btn-danger" data-id="${row.id}" id="declineLeaveRequestModal"><i class="fa fa-times" aria-hidden="true" data-toggle="modal" href="#" ></i></a>`];162                    }163                }164            ]165        });166        //Admin Approve167        $(document).on('click', 'a#approveLeaveRequestModal', function(e) {168            e.preventDefault();169            $('#approve_LeaveRequest_modal').modal('show');170            let leaveRequestID = $(this).attr('data-id');171            //alert(assetTypeID);172            //$('#assetTypeId').val('sdfsdfsdf');173            $('#approve_LeaveRequest_modal input[name="leaveRequestID"]').val(leaveRequestID);174            // alert(assetTypeID);175        });176        $(document).on('click', '#approveLeaveRequest', function(e) {177            e.preventDefault();178            let leaveRequestID = $('#approve_LeaveRequest_modal input[name="leaveRequestID"]').val();179            $.ajaxSetup({180                headers: {181                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')182                }183            });184            $.ajax({185                url: '/admin/approve-LeaveRequest/' + leaveRequestID,186                method: 'POST',187                dataType: "json",188                success: function(response) {189                    $('#approve_LeaveRequest_modal').modal('hide');190                    //tableLoadLeaveRequest.ajax.reload();191                    $('#AdminLeaveRequestDT').DataTable().ajax.reload()192                        //tableLoadLeaveRequest.ajax.reload();193                        //alert("approved");194                },195                error: function(response) {196                    alert('error');197                    console.log(response);198                }199            });200        });201        //Admin decline202        $(document).on('click', 'a#declineLeaveRequestModal', function(e) {203            e.preventDefault();204            $('#decline_LeaveRequest_modal').modal('show');205            let leaveRequestID = $(this).attr('data-id');206            //alert(assetTypeID);207            //$('#assetTypeId').val('sdfsdfsdf');208            $('#decline_LeaveRequest_modal input[name="leaveRequestID"]').val(leaveRequestID);209            // alert(assetTypeID);210        });211        $(document).on('click', '#declineLeaveRequest', function(e) {212            e.preventDefault();213            let leaveRequestID = $('#decline_LeaveRequest_modal input[name="leaveRequestID"]').val();214            $.ajaxSetup({215                headers: {216                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')217                }218            });219            $.ajax({220                url: '/admin/decline-LeaveRequest/' + leaveRequestID,221                method: 'POST',222                dataType: "json",223                success: function(response) {224                    $('#decline_LeaveRequest_modal').modal('hide');225                    //tableLoadLeaveRequest.ajax.reload();226                    $('#AdminLeaveRequestDT').DataTable().ajax.reload()227                        //tableLoadLeaveRequest.ajax.reload();228                        //alert("approved");229                },230                error: function(response) {231                    alert('error');232                    console.log(response);233                }234            });235        });236        /**237         * employee Leave Requst238         */239        var tableLoadLeaveRequest = $('#EmployeeLeaveRequestDT').DataTable({240            ajax: '/employee/LeaveRequestTable/' + employee_id,241            columns: [242                { "data": "idno" },243                { "data": "type" },244                { "data": "leavefrom" },245                { "data": "leaveto" },246                { "data": "reason" },247                { "data": "status" },248                { "data": "comment" },249                {250                    "data": null,251                    render: function(data, type, row) {252                        return [`<a id="editLeaveRequestModal" class="btn btn-sm btn-success" data-id="${row.id}"><i class="fa fa-edit" aria-hidden="true" data-toggle="modal" href="#"></i></a>`, `<a class="btn btn-sm btn-danger" data-id="${row.id}" id="deleteLeaveRequestModal"><i class="fa fa-times" aria-hidden="true" data-toggle="modal" href="#" ></i></a>`];253                    }254                }255            ]256        });257        // Employee Add Leave Request258        $(document).on('click', '#addLeaveRequest', function(e) {259            e.preventDefault();260            //alert("eee");261            let employee_id = $("input[name=employee_id]").val();262            let employee_name = $("input[name=employee_name]").val();263            let leave_typeRequest = $('#leave_typeRequest').val();264            let leave_from = $("input[name=leave_from]").val();265            let leave_to = $("input[name=leave_to]").val();266            let reason = $("textarea#reason").val();267            //alert(leave_typeRequest);268            $.ajaxSetup({269                headers: {270                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')271                }272            });273            $.ajax({274                url: '/employee/add-leaveRequest',275                method: 'POST',276                data: {277                    'employee_id': employee_id,278                    'employee_name': employee_name,279                    'leave_typeRequest': leave_typeRequest,280                    'leave_from': leave_from,281                    'leave_to': leave_to,282                    'reason': reason283                },284                dataType: "json",285                success: function(response) {286                    $('#add_leaveRequest_modal').modal('hide');287                    tableLoadLeaveRequest.ajax.reload();288                    //alert(data.id);289                },290                error: function(response) {291                    alert('error');292                    console.log(response);293                }294            });295        });296        //Employee Leave Edit297        $(document).on('click', 'a#editLeaveRequestModal', function(e) {298            e.preventDefault();299            //$('#edit_asset_modal').modal('show');300            let leaveRequestID = $(this).attr('data-id');301            $('#edit_leaveRequest_modal input[name="leaveRequestID"]').val(leaveRequestID);302            //alert(leaveRequestID);303            $.ajax({304                url: '/employee/edit-LeaveRequest/' + leaveRequestID,305                method: 'get',306                dataType: "json",307                success: function(data) {308                    console.log(data);309                    $("#leave_typeRequestedit ").val(data.type).change();;310                    $('#edit_leaveRequest_modal input[name="leave_fromedit"]').val(data.leavefrom);311                    $('#edit_leaveRequest_modal input[name="leave_toedit"]').val(data.leaveto);312                    $('#edit_leaveRequest_modal textarea[name="reasonedit"]').val(data.reason);313                    $('#edit_leaveRequest_modal').modal('show');314                },315                error: function(data) {316                    alert('error');317                    console.log(data);318                }319            });320        });321        $(document).on('click', '#editLeaveRequest', function(e) {322            e.preventDefault();323            let leaveRequestID = $('#edit_leaveRequest_modal input[name="leaveRequestID"]').val();324            let employee_id = $("#edit_leaveRequest_modal input[name=employee_id]").val();325            let employee_name = $("#edit_leaveRequest_modal input[name=employee_name]").val();326            let leave_typeRequest = $('#leave_typeRequestedit').val();327            let leave_from = $("#edit_leaveRequest_modal input[name=leave_fromedit]").val();328            let leave_to = $("#edit_leaveRequest_modal input[name=leave_toedit]").val();329            let reason = $("#edit_leaveRequest_modal textarea#reasonedit").val();330            //alert('/employee/edit-LeaveRequest/' + leaveRequestID);331            $.ajaxSetup({332                headers: {333                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')334                }335            });336            $.ajax({337                url: '/employee/edit-LeaveRequest/' + leaveRequestID,338                method: 'POST',339                data: {340                    'employee_id': employee_id,341                    'employee_name': employee_name,342                    'leave_typeRequest': leave_typeRequest,343                    'leave_from': leave_from,344                    'leave_to': leave_to,345                    'reason': reason346                },347                success: function(response) {348                    console.log(response);349                    $('#edit_leaveRequest_modal').modal('hide');350                    tableLoadLeaveRequest.ajax.reload();351                    //alert(data.id);352                },353                error: function(response) {354                    alert('error');355                    console.log(response);356                }357            });358        });359        //Employee Delete Leave request360        $(document).on('click', 'a#deleteLeaveRequestModal', function(e) {361            e.preventDefault();362            $('#delete_leaveRequest_modal').modal('show');363            let leaveRequestID = $(this).attr('data-id');364            $('#delete_leaveRequest_modal input[name="leaveRequestID"]').val(leaveRequestID);365            //alert(leaveRequestID);366        });367        $(document).on('click', '#deleteLeaveRequest', function(e) {368            e.preventDefault();369            let leaveRequestID = $('#delete_leaveRequest_modal input[name="leaveRequestID"]').val();370            //alert(leaveRequestID);371            $.ajaxSetup({372                headers: {373                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')374                }375            });376            $.ajax({377                url: '/employee/delete-leaveRequest/' + leaveRequestID,378                method: 'POST',379                dataType: "json",380                success: function(response) {381                    $('#delete_leaveRequest_modal').modal('hide');382                    tableLoadLeaveRequest.ajax.reload();383                    //alert(data.id);384                },385                error: function(response) {386                    alert('error');387                    console.log(response);388                }389            });390        });391    });...

viewLeaveListSuccess.js

Source:viewLeaveListSuccess.js

1$(document).ready(function() {2    3    var validator = $("#frmFilterLeave").validate({4        rules: {5            'leaveList[calFromDate]' : {6                valid_date: function() {7                    return {8                        format:datepickerDateFormat,9                        required:false,10                        displayFormat:displayDateFormat11                    }12                }13            },14            'leaveList[calToDate]' : {15                valid_date: function() {16                    return {17                        format:datepickerDateFormat,18                        required:false,19                        displayFormat:displayDateFormat20                    }21                },22                date_range: function() {23                    return {24                        format:datepickerDateFormat,25                        displayFormat:displayDateFormat,26                        fromDate:$('#calFromDate').val()27                    }28                }29            }30        },31        messages: {32            'leaveList[calFromDate]' : {33                valid_date: lang_invalidDate34            },35            'leaveList[calToDate]' : {36                valid_date: lang_invalidDate ,37                date_range: lang_dateError38            }39        },40        errorPlacement: function(error, element) {41            error.appendTo(element.prev('label'));42        }43    });44    // disabling dialog by default45    $("#commentDialog").dialog({46        autoOpen: false,47        width: 350,48        height: 30049    });50    //open when the pencil mark got clicked51    $('.dialogInvoker').click(function() {52        $('#ajaxCommentSaveMsg').html('').removeAttr('class');      53        54        //removing errors message in the comment box55        $("#commentError").html("");56        57        /* Extracting the request id */58        var id = $(this).parent().siblings('input[id^="hdnLeaveRequest_"]').val();59        if (!id) {60            id = $(this).parent().siblings('input[id^="hdnLeave_"]').val();61        }62        var comment = $('#hdnLeaveComment-' + id).val();63        /* Extracting the status id */64        var statusId = $(this).closest('td').prev('td').find('input[id^="hdnLeaveRequestStatus_'+id+'"]').val();65        66        $('#commentSave').show();67        //disable edit comment for ess for pending approval leave68        if(ess_mode == 1 && statusId != leave_status_pending) {69            $('#commentSave').hide();70        }71        72        $('#leaveId').val(id);73        $('#leaveComment').val(comment);74        75        // If leave comment is empty , enable the edit mode76        if( $('#leaveComment').val().trim() =="") {77            $("#leaveComment").removeAttr("disabled");78            $("#commentSave").attr("value", lang_save);79        } else {80            $("#leaveComment").attr("disabled","disabled");81            $("#commentSave").attr("value", lang_edit);82        }83        84        $('#leaveOrRequest').val('request');85        $('#commentDialog').dialog('open');86    });87    88    //closes the dialog89    $("#commentCancel").click(function() {90        $("#commentDialog").dialog('close');91    });92    //on clicking on save button93    $("#commentSave").click(function() {94        if($("#commentSave").attr("value") == lang_edit) {95            $("#leaveComment").removeAttr("disabled");96            $("#commentSave").attr("value", lang_save);97            return;98        }99        if($('#commentSave').attr('value') == lang_save) {100            $('#commentError').html('');101            var comment = $('#leaveComment').val().trim();102            if(comment.length > 250) {103                $('#commentError').html(lang_length_exceeded_error);104                return;105            }106            /* Setting the comment in the label */107            var commentLabel = trimComment(comment);108            /* If there is no-change between original and updated comments then don't show success message */109            if($('#hdnLeaveComment-' + $("#leaveId").val()).val().trim() == comment) {110                $('#commentDialog').dialog('close');111                return;112            }113            /* We set updated comment for the hidden comment field */114            $('#hdnLeaveComment-' + $('#leaveId').val()).val(comment);115            /* Posting the comment */116            var url = commentUpdateUrl;117            var data = 'leaveRequestId=' + $('#leaveId').val() + '&leaveComment=' + encodeURIComponent(comment);118            /* This is specially for detailed view */119            if($('#leaveOrRequest').val() == 'leave') {120                data = 'leaveId=' + $('#leaveId').val() + '&leaveComment=' + encodeURIComponent(comment);121            }122            $.ajax({123                type: 'POST',124                url: url,125                data: data,126                success: function(flag) {127                    $('#ajaxCommentSaveMsg').removeAttr('class').html('');128                    $('.messageBalloon_success').remove();129                    if(flag == 1) {130                        var id = $('#leaveId').val();131                        $('#commentContainer-' + id).html(commentLabel);132                        $('#hdnLeaveComment-' + id).val(comment);133                        $('#noActionsSelectedWarning').remove();134                        $('#ajaxCommentSaveMsg').attr('class', 'messageBalloon_success')135                        .html(lang_comment_successfully_saved);136                    }137                }138            });139            $("#commentDialog").dialog('close');140            return;141        }142    });143    $('#btnSearch').click(function() {144        $('#frmFilterLeave input.inputFormatHint').val('');145        $('#frmFilterLeave').submit();146    });147    $('#btnReset').click(function(event) {        148        window.location = resetUrl;149        event.preventDefault();150        return false;151    });152    153    $('select.select_action').bind("change",function() {154        $('div#noActionsSelectedWarning').remove();155    });156});    157function trimComment(comment) {158    if (comment.length > 35) {159        comment = comment.substr(0, 35) + '...';160    }161    return comment;...

viewLeaveSummarySuccess.js

Source:viewLeaveSummarySuccess.js

1function initLeaveSummary() {2    /* Making all text boxes non editable by default */3    disableEntitlementTextboxes();4    5    /* Remove edit/save buttons if no editable leave entitlements */6    var editableRows = $('input[name="txtLeaveEntitled[]"][type="text"]').length;7    if (editableRows == 0) {8        $('div[class="actionbar"]').hide();9    }10    11    /* Clearing auto-fill fields */12    $('#leaveSummary_txtEmpName_empName').click(function(){13        $(this).attr('value', '');14        $("#leaveSummary_txtEmpName_empId").attr('value', 0);15    });16    $('#leaveSummary_cmbLeavePeriod').change(function() {17        $('#leaveSummary_hdnSubjectedLeavePeriod').val($('#leaveSummary_cmbLeavePeriod').val());18    });19    /* Search button */20    $('#btnSearch').click(function() {21        // 9706 $("#frmLeaveSummarySearch").validate().resetForm();22        if(userType != 'ESS') {23        recheckEmpId();24        adjustEmpId();25        }26        $('#hdnAction').val('search');27        28        if($("#leaveSummary_txtEmpName_empName").val() == lang_typeHint || $("#leaveSummary_txtEmpName_empName").val() =="") {29            $('#leaveSummary_txtEmpName_empId').val(0);30        }31        32        $('#frmLeaveSummarySearch input.inputFormatHint').val('');33        34        $('#frmLeaveSummarySearch').submit();35    });36    $('input[name^="txtLeaveEntitled"]').change(function() {37        var flag = validateInput();38        if(!flag) {39            $('#validationMsg').attr('class', 'messageBalloon_failure');40        }41    });42    $('#btnReset').click(function(){43        handleResetButton();44    })45}46function handleEditButton() {47    if ($(this).val() == editButtonCaption) {48        enableEntitlementTextboxes();49        $(this).val(saveButtonCaption);50        return;51    }52    53    //9706 if ($(this).val() == saveButtonCaption && $("#frmLeaveSummarySearch").valid()) {54    if ($(this).val() == saveButtonCaption) {55        var flag = validateInput();56        if(flag) {57            58            if ($('#leaveSummary_txtEmpName_empName').val() == lang_typeHint) {59                $('#leaveSummary_txtEmpName_empName').val('');60            }61            $('#hdnAction').val('save');62            $('#frmLeaveSummarySearch').attr('action', '../leave/saveLeaveEntitlements');63            $('#frmLeaveSummarySearch').submit();64        } else {65            $('#validationMsg').attr('class', 'messageBalloon_failure');66        }67    }68}69function handleResetButton() {70    $('.messageBalloon_success').remove();71    $('.messageBalloon_warning').remove();72    $('#validationMsg').removeAttr('class');73    $('#validationMsg').html('');74    $('.formInputText').removeAttr('style');  75    76    $("#leaveSummary_txtEmpName_empName").val('');77    $('#leaveSummary_txtEmpName_empId').val('0');78    $('#frmLeaveSummarySearch select').find('option:first').attr('selected','selected');79    $('#leaveSummary_cmbWithTerminated').removeAttr('checked');80    $('#frmLeaveSummarySearch').submit();81    82}83function adjustEmpId() {84    empName = $.trim($('#leaveSummary_txtEmpName_empName').val()).toLowerCase();85    if (empName != 'all' && $('#leaveSummary_txtEmpName_empId').val() == 0) {86        $('#leaveSummary_txtEmpName_empId').val('-1');87    }88}89function recheckEmpId() {90    var empDataArray = eval(employees_leaveSummary_txtEmpName); // TODO: Try to replace eval()91    var empDateCount = empDataArray.length;92    var i;93    for (i=0; i<empDateCount; i++) {94        fieldName = $.trim($('#leaveSummary_txtEmpName_empName').val()).toLowerCase();95        arrayName = empDataArray[i].name.toLowerCase();96        $('#leaveSummary_txtEmpName_empId').val(0);97        if (fieldName == arrayName) {98            $('#leaveSummary_txtEmpName_empId').val(empDataArray[i].id);99            break;100        }101    }102}103function validateInput() {104    var flag = true;105    $('.messageBalloon_success').remove();106    $('.messageBalloon_warning').remove();107    $('#validationMsg').removeAttr('class');108    $('#validationMsg').html("");109    var errorStyle = 'background-color: #FFDFDF;';110    $('.formInputText').each(function(){111        element = $(this);112        $(element).removeAttr('style');113        if(!(/^[0-9]+\.?[0-9]?[0-9]?$/).test($(element).val())) {114            $('#validationMsg').html(lang_not_numeric);115            $(element).attr('style', errorStyle);116            flag = false;117        } else {118            if(parseFloat($(element).val()) > 365) {119                $('#validationMsg').html(lang_not_numeric);120                $(element).attr('style', errorStyle);121                flag = false;122            }123        }124    });125    return flag;126}127function disableEntitlementTextboxes() {128    $('input[name^="txtLeaveEntitled"]').attr('disabled', 'disabled');129}130function enableEntitlementTextboxes() {131    $('input[name^="txtLeaveEntitled"]').removeAttr('disabled');...

defineLeaveTypeSuccess.js

Source:defineLeaveTypeSuccess.js

1$(document).ready(function(){2    //$("form#frmLeaveType :input:visible:enabled:first").focus();3    4    $('#saveButton').click(function(){5        $('#frmLeaveType').submit();6    });7    8    $.validator.addMethod("uniqueLeaveType", function(value) {9        10        var valid = true;        11        var originalName  = $.trim($("#leaveType_hdnOriginalLeaveTypeName").val()).toLowerCase();12        13        value = $.trim(value).toLowerCase();14        15        if (value != originalName) {16            for (var i = 0; i < activeLeaveTypes.length; i++) {17                if (value == activeLeaveTypes[i].toLowerCase()) {18                    valid = false;19                    break;20                }21            }22        }23        24        return valid;25    });26    27    var validator = 28    $("#frmLeaveType").validate({29        rules: {30            'leaveType[txtLeaveTypeName]': {31                required: true, 32                maxlength: 50,33                uniqueLeaveType: true34            }35        },36        messages: {37            'leaveType[txtLeaveTypeName]': {38                required: lang_LeaveTypeNameRequired,39                maxlength: lang_LeaveTypeNameTooLong,40                uniqueLeaveType: lang_LeaveTypeExists41            }42        },43        submitHandler: function(form) {44            45            var deletedId = isDeletedLeaveType();46            if (deletedId) {47                $('#undeleteLeaveType_undeleteId').val(deletedId);               48                $("#undeleteDialog").dialog("open");49            } else {50                form.submit();51            }52        },53        errorElement: 'div'54    });55    $("#resetButton").click(function() {56        validator.resetForm();57    });58    $('#backButton').click(function(){59        window.location.href = backButtonUrl;60    });61    // undeleteDialog62    $("#undeleteDialog").dialog({63        autoOpen: false,64        modal: true,65        width: 355,66        height:210,67        position: 'middle'68    });69    $("#undeleteYes").click(function(){70        $('#frmUndeleteLeaveType').submit();71    });72    $("#undeleteNo").click(function(){73        $(this).attr('disabled', true);74        $('#leaveType_txtLeaveTypeName').attr('disabled', false);75        $('#frmLeaveType').get(0).submit();76    });77    $("#undeleteCancel").click(function(){78        $("#undeleteDialog").dialog("close");79    });80    loadActiveLeaveTypes();81    loadDeletedLeaveTypes();82});83/**84 * Checks if current leave type name value matches a deleted leave type.85 * 86 * @return Leave Type ID if it matches a deleted leave type else false.87 */88function isDeletedLeaveType() {89    if ($.trim($("#leaveType_hdnOriginalLeaveTypeName").val()) ==90        $.trim($("#leaveType_txtLeaveTypeName").val())) {91        return false;92    }93    for (var i = 0; i < deletedLeaveTypes.length; i++) {94        if (deletedLeaveTypes[i].name.toLowerCase() == 95            $.trim($('#leaveType_txtLeaveTypeName').val()).toLowerCase()) {96            return deletedLeaveTypes[i].id;97        }98    }99    return false;100}101function loadActiveLeaveTypes() {102    var url = './loadActiveLeaveTypesJson';103    $.getJSON(url, function(data) {104        activeLeaveTypes = data;105    });106}107function loadDeletedLeaveTypes() {108    var url = './loadDeletedLeaveTypesJson';109    110    $.getJSON(url, function(data) {111        deletedLeaveTypes = data;112    });...

setleavechannel.js

Source:setleavechannel.js

1const Command = require('../Command.js');2const { MessageEmbed } = require('discord.js');3const { success } = require('../../utils/emojis.json');4const { oneLine, stripIndent } = require('common-tags');5module.exports = class SetLeaveChannelCommand extends Command {6  constructor(client) {7    super(client, {8      name: 'setleavechannel',9      aliases: ['setlc', 'slc'],10      usage: 'setleavechannel <channel mention/ID>',11      description: oneLine`12        Sets the leave message text channel for your server. 13        Provide no channel to clear the current \`leave channel\`.14        A \`leave message\` must also be set to enable leave messages.15      `,16      type: client.types.ADMIN,17      userPermissions: ['MANAGE_GUILD'],18      examples: ['setleavechannel #general']19    });20  }21  run(message, args) {22    let { leave_channel_id: leaveChannelId, leave_message: leaveMessage } = 23      message.client.db.settings.selectLeaveMessages.get(message.guild.id);24    const oldLeaveChannel = message.guild.channels.cache.get(leaveChannelId) || '`None`';25    // Get status26    const oldStatus = message.client.utils.getStatus(leaveChannelId, leaveMessage);27    // Trim message28    if (leaveMessage && leaveMessage.length > 1024) leaveMessage = leaveMessage.slice(0, 1021) + '...';29    30    const embed = new MessageEmbed()31      .setTitle('Settings: `Leave Messages`')32      .setDescription(`The \`leave channel\` was successfully updated. ${success}`)33      .addField('Message', message.client.utils.replaceKeywords(leaveMessage) || '`None`')34      .setThumbnail(message.guild.iconURL({ dynamic: true }))35      .setFooter(message.member.displayName,  message.author.displayAvatarURL({ dynamic: true }))36      .setTimestamp()37      .setColor(message.guild.me.displayHexColor);38    // Clear if no args provided39    if (args.length === 0) {40      message.client.db.settings.updateLeaveChannelId.run(null, message.guild.id);41      // Update status42      const status = 'disabled';43      const statusUpdate = (oldStatus != status) ? `\`${oldStatus}\` â \`${status}\`` : `\`${oldStatus}\``; 44      45      return message.channel.send(embed46        .spliceFields(0, 0, { name: 'Channel', value: `${oldLeaveChannel} â \`None\``, inline: true })47        .spliceFields(1, 0, { name: 'Status', value: statusUpdate, inline: true })48      );49    }50    const leaveChannel = this.getChannelFromMention(message, args[0]) || message.guild.channels.cache.get(args[0]);51    if (!leaveChannel || (leaveChannel.type != 'text' && leaveChannel.type != 'news') || !leaveChannel.viewable) 52      return this.sendErrorMessage(message, 0, stripIndent`53        Please mention an accessible text or announcement channel or provide a valid text or announcement channel ID54      `);55    // Update status56    const status =  message.client.utils.getStatus(leaveChannel, leaveMessage);57    const statusUpdate = (oldStatus != status) ? `\`${oldStatus}\` â \`${status}\`` : `\`${oldStatus}\``;58    message.client.db.settings.updateLeaveChannelId.run(leaveChannel.id, message.guild.id);59    message.channel.send(embed60      .spliceFields(0, 0, { name: 'Channel', value: `${oldLeaveChannel} â ${leaveChannel}`, inline: true})61      .spliceFields(1, 0, { name: 'Status', value: statusUpdate, inline: true})62    );63  }...

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.click('text="Gmail"');7  await context.close();8  await browser.close();9})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3    const browser = await chromium.launch();4    const context = await browser.newContext();5    const page = await context.newPage();6    await page.waitForSelector('input[name="q"]');7    await page.fill('input[name="q"]', 'Playwright');8    await page.keyboard.press('Enter');9    await page.waitForSelector('text=Playwright');10    await page.click('text=Playwright');11    await page.waitForSelector('text=Playwright');12    await page.click('text=Playwright');13    await page.waitForSelector('text=Playwright');14    await page.click('text=Playwright');15    await page.waitForSelector('text=Playwright');16    await page.click('text=Playwright');17    await page.waitForSelector('text=Playwright');18    await page.click('text=Playwright');19    await page.waitForSelector('text=Playwright');20    await page.click('text=Playwright');21    await page.waitForSelector('text=Playwright');22    await page.click('text=Playwright');23    await page.waitForSelector('text=Playwright');24    await page.click('text=Playwright');25    await page.waitForSelector('text=Playwright');26    await page.click('text=Playwright');27    await context.close();28    await browser.close();29})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3    const browser = await chromium.launch();4    const context = await browser.newContext();5    const page = await context.newPage();6    await page.leave();7    await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11    const browser = await chromium.launch();12    await browser.close();13})();14const { chromium } = require('playwright');15(async () => {16    const browser = await chromium.launch();17    const context = await browser.newContext();18    await context.close();19    await browser.close();20})();21const { chromium } = require('playwright');22(async () => {23    const browser = await chromium.launch();24    const context = await browser.newContext();25    const page = await context.newPage();26    await page.close();27    await context.close();28    await browser.close();29})();30const { chromium } = require('playwright');31(async () => {32    const browser = await chromium.launch();33    await browser.disconnect();34})();35const { chromium } = require('playwright');36(async () => {37    const browser = await chromium.launch();38    const context = await browser.newContext();39    await context.disconnect();40    await browser.close();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch();4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.screenshot({ path: 'google.png' });7  await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11  const browser = await chromium.launch();12  await browser.close();13})();14const { chromium } = require('playwright');15(async () => {16  const browser = await chromium.launch();17  const context = await browser.newContext();18  await browser.close();19})();20const { chromium } = require('playwright');21(async () => {22  const browser = await chromium.launch();23  const context = await browser.newContext();24  const page = await context.newPage();25  await browser.close();26})();27const { chromium } = require('playwright');28(async () => {29  const browser = await chromium.launch();30  const context = await browser.newContext();31  const page = await context.newPage();32  await browser.close();33})();34const { chromium } = require('playwright');35(async () => {36  const browser = await chromium.launch();37  const context = await browser.newContext();38  context.route('**/*', route => {39    console.log(route.request().url());40    route.continue();41  });42  const page = await context.newPage();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch({ headless: false });4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.click('text=About');7  await page.click('text=Advertising');8  await page.click('text=Business');9  await page.click('text=How Search works');10  await page.click('text=Privacy');11  await page.click('text=Terms');12  await page.click('text=Settings');13  await page.click('text=Sign in');14  await page.click('text=Images');15  await page.click('text=Maps');16  await page.click('text=Play');17  await page.click('text=YouTube');18  await page.click('text=News');19  await page.click('text=Gmail');20  await page.click('text=Drive');21  await page.click('text=Calendar');22  await page.click('text=Translate');23  await page.click('text=Photos');24  await page.click('text=Shopping');25  await page.click('text=More');26  await page.click('text=Advertising Programs');27  await page.click('text=Business Solutions');28  await page.click('text=Google About');29  await page.click('text=How Search works');30  await page.click('text=Privacy');31  await page.click('text=Terms');32  await page.click('text=Settings');33  await page.click('text=Sign in');34  await page.click('text=Images');35  await page.click('text=Maps');36  await page.click('text=Play');37  await page.click('text=YouTube');38  await page.click('text=News');39  await page.click('text=Gmail');40  await page.click('text=Drive');41  await page.click('text=Calendar');42  await page.click('text=Translate');43  await page.click('text=Photos');44  await page.click('text=Shopping');45  await page.click('text=More');46  await page.click('text=Advertising Programs');47  await page.click('text=Business Solutions');48  await page.click('text=Google About');49  await page.click('text=How Search works');50  await page.click('text=Privacy');51  await page.click('text=Terms');52  await page.click('text=Settings

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch({ headless: false });4  const context = await browser.newContext();5  const page = await context.newPage();6  await page.screenshot({ path: `example.png` });7  await browser.close();8})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3  const browser = await chromium.launch({ headless: false });4  const context = await browser.newContext();5  const page = await context.newPage();6  const [popup] = await Promise.all([7    page.waitForEvent('popup'),8    page.click('text=Get Started >>'),9  ]);10  await popup.leave();11  await page.leave();12  await browser.close();13})();

Using AI Code Generation

1const { chromium } = require('playwright');2(async () => {3    const browser = await chromium.launch();4    const context = await browser.newContext();5    const page = await context.newPage();6    await page.mouse.move(0, 0);7    await page.mouse.leave();8    await browser.close();9})();

Using AI Code Generation

1const { chromium } = require('playwright');2const browser = await chromium.launch();3const page = await browser.newPage();4await page.click('text=Log in');5await page.fill('input[type="text"]', 'username');6await page.fill('input[type="password"]', 'password');7await page.click('button[type="submit"]');8await page.waitForNavigation();9await page.click('text=Profile');10await browser.close();

Using AI Code Generation

1const { test, expect } = require('@playwright/test');2const { createPage } = require('@playwright/test/lib/page');3const { createTestFixtures } = require('@playwright/test/lib/test');4const { createTest } = require('@playwright/test/lib/test');5const { createFixture } = require('@playwright/test/lib/fixtures');6const { createWorkerFixture } = require('@playwright/test/lib/fixtures');7const { createTestType } = require('@playwright/test/lib/testType');8test('test', async ({ page }) => {9    await page.screenshot({ path: `example.png` });10});11const { test, expect } = require('@playwright/test');12const { createPage } = require('@playwright/test/lib/page');13const { createTestFixtures } = require('@playwright/test/lib/test');14const { createTest } = require('@playwright/test/lib/test');15const { createFixture } = require('@playwright/test/lib/fixtures');16const { createWorkerFixture } = require('@playwright/test/lib/fixtures');17const { createTestType } = require('@playwright/test/lib/testType');18test('test', async ({ page }) => {19    await page.screenshot({ path: `example.png` });20});21const { test, expect } = require('@playwright/test');22const { createPage } = require('@playwright/test/lib/page');23const { createTestFixtures } = require('@playwright/test/lib/test');24const { createTest } = require('@playwright/test/lib/test');25const { createFixture } = require('@playwright/test/lib/fixtures');26const { createWorkerFixture } = require('@playwright/test/lib/fixtures');27const { createTestType } = require('@playwright/test/lib/testType');28test('test', async ({ page }) => {29    await page.screenshot({ path: `example.png` });30});

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

View sample repo

View Documentation Sign up Free

›

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

How to use leave method in Playwright Internal

Playwright tutorial

Chapters:

Run Playwright Internal automation tests on LambdaTest cloud grid

Try LambdaTest Now !!

Was this article helpful?