Вынес таб в компонент

master
Sipachev Igor 3 years ago
parent b6e5d9199c
commit 6b45516d94
  1. 35
      popup/src/components/person-tab/script.ts
  2. 66
      popup/src/components/person-tab/style.scss
  3. 4
      popup/src/components/person-tab/template.html
  4. 69
      popup/src/components/script.ts
  5. 66
      popup/src/components/template.html

@ -9,8 +9,6 @@ import VueClipboard from 'vue-clipboard2'
import { Target } from '@/classes/Enum/Target' import { Target } from '@/classes/Enum/Target'
import sender from '@/classes/Service/Browser/Chrome/Sender' 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 { Registers } from '@/classes/DTO/Registers'
import Mocks from '@/components/mocks/main.vue' import Mocks from '@/components/mocks/main.vue'
Vue.use(VueClipboard) Vue.use(VueClipboard)
@ -23,8 +21,6 @@ Vue.use(VueClipboard)
export default class PersonTab extends Vue { export default class PersonTab extends Vue {
personalId = '' personalId = ''
person = new Person() person = new Person()
registers = new Registers()
isAutoCleaner = false
copyText = '' copyText = ''
get allowedMonths () { get allowedMonths () {
@ -44,14 +40,6 @@ export default class PersonTab extends Vue {
return result return result
} }
mounted () {
/** todo заполнить первоначальное значение */
notificationCleaner.state().then((isAutoCleaner) => {
this.isAutoCleaner = isAutoCleaner
console.log('this.isAutoCleaner = ' + isAutoCleaner)
})
}
copyPersonalId () { copyPersonalId () {
const personalId = personalIdGenerator.generate(this.person) const personalId = personalIdGenerator.generate(this.person)
this.personalId = personalId this.personalId = personalId
@ -60,11 +48,13 @@ export default class PersonTab extends Vue {
copyIban () { copyIban () {
const iban = ibanGenerator.generate(this.person.country) const iban = ibanGenerator.generate(this.person.country)
this.personalId = ''
this.copy(iban) this.copy(iban)
} }
copyPhone () { copyPhone () {
const phone = phoneGenerator.generate(this.person.country) const phone = phoneGenerator.generate(this.person.country)
this.personalId = ''
this.copy(phone) this.copy(phone)
} }
@ -75,6 +65,8 @@ export default class PersonTab 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)
@ -93,23 +85,4 @@ export default class PersonTab extends Vue {
value: value 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)
}
} }

@ -1,3 +1,65 @@
.option-select { .container {
width: 350px; max-width: 400px;
min-width: 400px;
border: solid 2px gray;
.wrapper {
padding: 10px;
.tab-panel {
display: flex;
&__item {
flex-grow: 1;
padding: 5px;
cursor: pointer;
border-bottom: solid 2px #cae5fa;
&_active {
border-bottom: solid 2px #298df8;
}
&:hover {
border-bottom: solid 2px #298df8;
}
}
}
.tab-page {
padding-top: 10px;
&__item {
display: none;
&_show {
display: block;
}
.form-row {
display: flex;
margin-bottom: 5px;
&__item {
flex-grow: 1;
margin-right: 10px;
&-input {
width: 100%;
}
}
&:last-child {
margin-bottom: 0;
}
}
}
}
.memory-panel {
text-align: left;
padding: 5px;
margin-top: 10px;
}
}
} }

@ -58,4 +58,8 @@
</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>

@ -1,49 +1,26 @@
import { Component, Vue } from 'vue-property-decorator' 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 { Person } from '@/classes/DTO/Person'
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2'
import { Target } from '@/classes/Enum/Target' import { Target } from '@/classes/Enum/Target'
import sender from '@/classes/Service/Browser/Chrome/Sender' 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 Mocks from '@/components/mocks/main.vue' import Mocks from '@/components/mocks/main.vue'
import PersonTab from '@/components/person-tab/main.vue'
Vue.use(VueClipboard) Vue.use(VueClipboard)
@Component({ @Component({
components: { components: {
Mocks Mocks,
PersonTab
} }
}) })
export default class HelloWorld extends Vue { export default class HelloWorld extends Vue {
tab = 'person' tab = 'person'
personalId = '' personalId = ''
person = new Person() person = new Person()
registers = new Registers()
isAutoCleaner = false 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 () { mounted () {
/** todo заполнить первоначальное значение */ /** todo заполнить первоначальное значение */
@ -53,42 +30,6 @@ export default class HelloWorld extends Vue {
}) })
} }
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.personalId = personalId
this.copy(personalId)
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 { insertValueToNode (target: Target, value: string): void {
sender.send({ sender.send({
action: Action.INSERT, action: Action.INSERT,
@ -111,8 +52,4 @@ export default class HelloWorld extends Vue {
notificationCleaner.disable() notificationCleaner.disable()
} }
} }
saveMocks () {
console.log(this.personalId, this.registers)
}
} }

@ -13,79 +13,17 @@
</div> </div>
<div class="tab-page"> <div class="tab-page">
<div class="tab-page__item" :class="{'tab-page__item_show': tab === 'person'}"> <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'person'}">
<div class="form-row"> <PersonTab/>
<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 v-if="personalId">
<hr />
<Mocks :personalId="personalId"></Mocks>
</div>
</div> </div>
<div class="tab-page__item" :class="{'tab-page__item_show': tab === 'mocks'}"> <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'mocks'}">
<label> <label>
Personal id Personal id
<input type="text" v-model="personalId"/> <input type="text" v-model="personalId"/>
</label>
<div v-if="personalId"> <div v-if="personalId">
<hr /> <hr />
<Mocks :personalId="personalId"></Mocks> <Mocks :personalId="personalId"></Mocks>
</div> </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">

Loading…
Cancel
Save