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

popup/src/components/mocks/main.vue

@@ -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>

popup/src/components/mocks/script.ts

@@ -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')
+  }
+}

popup/src/components/mocks/style.scss

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

popup/src/components/mocks/template.html

@@ -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>

popup/src/components/person-tab/main.vue

@@ -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>

popup/src/components/person-tab/script.ts

@@ -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)
+  }
+}

popup/src/components/person-tab/style.scss

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

popup/src/components/person-tab/template.html

@@ -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>

popup/src/components/script.ts

@@ -11,10 +11,15 @@ 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
+@Component({
+  components: {
+    Mocks
+  }
+})
 export default class HelloWorld extends Vue {
   tab = 'person'
   personalId = ''
@@ -71,6 +76,8 @@ export default class HelloWorld extends Vue {
 
   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)

popup/src/components/template.html

@@ -72,6 +72,20 @@
                     </div>
                 </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 class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
                 <div class="form-row">
@@ -90,54 +104,6 @@
                     </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>