Вынес моки в компонент

master
Sipachev Igor 3 years ago
parent 1fec9d9408
commit b6e5d9199c
  1. 4
      popup/src/components/mocks/main.vue
  2. 17
      popup/src/components/mocks/script.ts
  3. 3
      popup/src/components/mocks/style.scss
  4. 39
      popup/src/components/mocks/template.html
  5. 4
      popup/src/components/person-tab/main.vue
  6. 115
      popup/src/components/person-tab/script.ts
  7. 3
      popup/src/components/person-tab/style.scss
  8. 61
      popup/src/components/person-tab/template.html
  9. 9
      popup/src/components/script.ts
  10. 62
      popup/src/components/template.html

@ -0,0 +1,4 @@
<template src="./template.html"></template>
<script lang="ts" src="./script.ts"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" src="./style.scss"></style>

@ -0,0 +1,17 @@
import { Component, Prop, Vue } from 'vue-property-decorator'
import VueClipboard from 'vue-clipboard2'
import { Registers } from '@/classes/DTO/Registers'
Vue.use(VueClipboard)
@Component
export default class Mocks extends Vue {
@Prop()
personalId!: string
registers = new Registers()
mounted () {
console.log('mounted')
}
}

@ -0,0 +1,3 @@
.option-select {
width: 350px;
}

@ -0,0 +1,39 @@
<div>
<!-- 0 - не замокано(делать запрос) -->
<!-- 1 - выписка на хороший доход-->
<!-- 2 - выписка на маленький доход-->
<!-- 3 - ошибка загрузки выписки (перезапрос)-->
<!-- 4 - ошибка загрузки выписки (нет данных)-->
<!-- 5 - по персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)-->
<!-- 6 - выписка на хороший доход, последние два месяца доход 0-->
<!-- 7 - выписка на хороший доход, последний месяц доход 0-->
<!-- 8 - выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать-->
<!-- 9 - выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода-->
<label>
XTEE MTA
<select class="option-select" v-model="registers.xteeMta">
<option value="">-</option>
<option value="0">Не замокано (делать запрос)</option>
<option value="1">Выписка на хороший доход</option>
<option value="2">Выписка на маленький доход</option>
<option value="3">Ошибка загрузки выписки (перезапрос)</option>
<option value="4">Ошибка загрузки выписки (нет данных)</option>
<option value="5">По персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)</option>
<option value="6">Выписка на хороший доход, последние два месяца доход 0</option>
<option value="7">Выписка на хороший доход, последний месяц доход 0</option>
<option value="8">Выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать</option>
<option value="9">Выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода</option>
</select>
</label>
<br /><br />
<label>
XTEE Pension
<select class="option-select" v-model="registers.xteePension">
<option value="">-</option>
<option value="0">Не замокано (делать запрос)</option>
<option value="2">Ошибка сервиса. (перезапросы)</option>
</select>
</label>
<br /><br />
<button @click="saveMocks">Сохранить моки</button>
</div>

@ -0,0 +1,4 @@
<template src="./template.html"></template>
<script lang="ts" src="./script.ts"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" src="./style.scss"></style>

@ -0,0 +1,115 @@
import { Component, Vue } from 'vue-property-decorator'
import personalIdGenerator from '@/classes/Service/Generators/PersonalIdGenerator'
import ibanGenerator from '@/classes/Service/Generators/IbanGenerator'
import phoneGenerator from '@/classes/Service/Generators/PhoneGenerator'
import firstNameGenerator from '@/classes/Service/Generators/FirstNameGenerator'
import lastNameGenerator from '@/classes/Service/Generators/LastNameGenerator'
import { Person } from '@/classes/DTO/Person'
import VueClipboard from 'vue-clipboard2'
import { Target } from '@/classes/Enum/Target'
import sender from '@/classes/Service/Browser/Chrome/Sender'
import { Action } from '@/classes/Enum/Action'
import notificationCleaner from '@/classes/Service/NotificationCleaner'
import { Registers } from '@/classes/DTO/Registers'
import Mocks from '@/components/mocks/main.vue'
Vue.use(VueClipboard)
@Component({
components: {
Mocks
}
})
export default class PersonTab extends Vue {
personalId = ''
person = new Person()
registers = new Registers()
isAutoCleaner = false
copyText = ''
get allowedMonths () {
const result = []
for (let i = 1; i <= 12; i++) {
result.push(i)
}
return result
}
get allowedYears () {
const result = []
const currentYear = (new Date()).getFullYear()
for (let i = 1960; i <= currentYear; i++) {
result.push(i)
}
return result
}
mounted () {
/** todo заполнить первоначальное значение */
notificationCleaner.state().then((isAutoCleaner) => {
this.isAutoCleaner = isAutoCleaner
console.log('this.isAutoCleaner = ' + isAutoCleaner)
})
}
copyPersonalId () {
const personalId = personalIdGenerator.generate(this.person)
this.personalId = personalId
this.copy(personalId)
}
copyIban () {
const iban = ibanGenerator.generate(this.person.country)
this.copy(iban)
}
copyPhone () {
const phone = phoneGenerator.generate(this.person.country)
this.copy(phone)
}
copy (text: string) {
this.copyText = text
this.$copyText(text)
}
autocomplete () {
const personalId = personalIdGenerator.generate(this.person)
this.insertValueToNode(Target.PERSONAL_ID, personalId)
const iban = ibanGenerator.generate(this.person.country)
this.insertValueToNode(Target.IBAN, iban)
const phone = phoneGenerator.generate(this.person.country)
this.insertValueToNode(Target.PHONE, phone)
const firstName = firstNameGenerator.generate(this.person.country, this.person.gender)
this.insertValueToNode(Target.FIRST_NAME, firstName)
const lastName = lastNameGenerator.generate(this.person.country)
this.insertValueToNode(Target.LAST_NAME, lastName)
}
insertValueToNode (target: Target, value: string): void {
sender.send({
action: Action.INSERT,
target: target,
value: value
})
}
cleanNotifications (): void {
sender.send({
action: Action.CLEAN_NOTIFICATION
})
}
onChangeAutoCleaner () {
console.log(this.isAutoCleaner)
if (this.isAutoCleaner) {
notificationCleaner.enable()
} else {
notificationCleaner.disable()
}
}
saveMocks () {
console.log(this.personalId, this.registers)
}
}

@ -0,0 +1,3 @@
.option-select {
width: 350px;
}

@ -0,0 +1,61 @@
<div class="tab-page__item tab-page__item_show">
<div class="form-row">
<div class="form-row__item">
<input title="Day" class="form-row__item-input" type="text" v-model="person.birthday.day" placeholder="Day">
</div>
<div class="form-row__item">
<select title="Month" v-model="person.birthday.month">
<option v-for="allowedMonth in allowedMonths" :value="allowedMonth">{{ allowedMonth }}</option>
</select>
</div>
<div class="form-row__item">
<select title="Year" v-model="person.birthday.year">
<option v-for="allowedYear in allowedYears" :value="allowedYear">{{ allowedYear }}</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-row__item">
<label>
Country
<select v-model="person.country">
<option value="ee">Estonia</option>
<option value="lt">Lithuania</option>
</select>
</label>
</div>
<div class="form-row__item">
<label>
Gender
<select v-model="person.gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="random">Random</option>
</select>
</label>
</div>
</div>
<div class="form-row">
<div
@click="autocomplete"
class="form-row__item copy-button" data-clipboard-text="text1">
<button>Autocomplete</button>
</div>
<div
@click="copyPersonalId"
class="form-row__item copy-button" data-clipboard-text="text2">
<button>PersonalId</button>
</div>
<div
@click="copyIban"
class="form-row__item copy-button" data-clipboard-text="text3">
<button>Iban</button>
</div>
<div
@click="copyPhone"
class="form-row__item copy-button" data-clipboard-text="text3">
<button>Phone</button>
</div>
</div>
<div class="memory-panel">Memory: {{copyText}}</div>
</div>

@ -11,10 +11,15 @@ import sender from '@/classes/Service/Browser/Chrome/Sender'
import { Action } from '@/classes/Enum/Action' import { Action } from '@/classes/Enum/Action'
import notificationCleaner from '@/classes/Service/NotificationCleaner' import notificationCleaner from '@/classes/Service/NotificationCleaner'
import { Registers } from '@/classes/DTO/Registers' import { Registers } from '@/classes/DTO/Registers'
import Mocks from '@/components/mocks/main.vue'
Vue.use(VueClipboard) Vue.use(VueClipboard)
@Component @Component({
components: {
Mocks
}
})
export default class HelloWorld extends Vue { export default class HelloWorld extends Vue {
tab = 'person' tab = 'person'
personalId = '' personalId = ''
@ -71,6 +76,8 @@ export default class HelloWorld extends Vue {
autocomplete () { autocomplete () {
const personalId = personalIdGenerator.generate(this.person) const personalId = personalIdGenerator.generate(this.person)
this.personalId = personalId
this.copy(personalId)
this.insertValueToNode(Target.PERSONAL_ID, personalId) this.insertValueToNode(Target.PERSONAL_ID, personalId)
const iban = ibanGenerator.generate(this.person.country) const iban = ibanGenerator.generate(this.person.country)
this.insertValueToNode(Target.IBAN, iban) this.insertValueToNode(Target.IBAN, iban)

@ -72,6 +72,20 @@
</div> </div>
</div> </div>
<div class="memory-panel">Memory: {{copyText}}</div> <div class="memory-panel">Memory: {{copyText}}</div>
<div v-if="personalId">
<hr />
<Mocks :personalId="personalId"></Mocks>
</div>
</div>
<div class="tab-page__item" :class="{'tab-page__item_show': tab === 'mocks'}">
<label>
Personal id
<input type="text" v-model="personalId"/>
<div v-if="personalId">
<hr />
<Mocks :personalId="personalId"></Mocks>
</div>
</label>
</div> </div>
<div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}"> <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
<div class="form-row"> <div class="form-row">
@ -90,54 +104,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tab-page__item" :class="{'tab-page__item_show': tab === 'mocks'}">
<label>
Personal id
<input type="text" v-model="personalId"/>
</label>
</div>
</div>
<div v-if="personalId && (tab === 'person' || tab === 'mocks')">
<hr />
<!-- /**-->
<!-- * 0 - не замокано(делать запрос) -->
<!-- * 1 - выписка на хороший доход-->
<!-- * 2 - выписка на маленький доход-->
<!-- * 3 - ошибка загрузки выписки (перезапрос)-->
<!-- * 4 - ошибка загрузки выписки (нет данных)-->
<!-- * 5 - по персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)-->
<!-- * 6 - выписка на хороший доход, последние два месяца доход 0-->
<!-- * 7 - выписка на хороший доход, последний месяц доход 0-->
<!-- * 8 - выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать-->
<!-- * 9 - выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода-->
<!-- */-->
<label>
XTEE MTA
<select class="option-select" v-model="registers.xteeMta">
<option value="">-</option>
<option value="0">Не замокано (делать запрос)</option>
<option value="1">Выписка на хороший доход</option>
<option value="2">Выписка на маленький доход</option>
<option value="3">Ошибка загрузки выписки (перезапрос)</option>
<option value="4">Ошибка загрузки выписки (нет данных)</option>
<option value="5">По персональному коду (3 - выписка с хорошим доходом, остальные - ошибка загрузки выписки)</option>
<option value="6">Выписка на хороший доход, последние два месяца доход 0</option>
<option value="7">Выписка на хороший доход, последний месяц доход 0</option>
<option value="8">Выписка на хороший доход, но у пользователя нет активного работодателя. Не можем выдать</option>
<option value="9">Выписка на хороший доход, в выписке есть выплаты, которые не учитываются в подсчёте среднего дохода</option>
</select>
</label>
<br /><br />
<label>
XTEE Pension
<select class="option-select" v-model="registers.xteePension">
<option value="">-</option>
<option value="0">Не замокано (делать запрос)</option>
<option value="2">Ошибка сервиса. (перезапросы)</option>
</select>
</label>
<br /><br />
<button @click="saveMocks">Сохранить моки</button>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save