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

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

@@ -9,8 +9,6 @@ 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)
@@ -23,8 +21,6 @@ Vue.use(VueClipboard)
 export default class PersonTab extends Vue {
   personalId = ''
   person = new Person()
-  registers = new Registers()
-  isAutoCleaner = false
   copyText = ''
 
   get allowedMonths () {
@@ -44,14 +40,6 @@ export default class PersonTab extends Vue {
     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
@@ -60,11 +48,13 @@ export default class PersonTab extends Vue {
 
   copyIban () {
     const iban = ibanGenerator.generate(this.person.country)
+    this.personalId = ''
     this.copy(iban)
   }
 
   copyPhone () {
     const phone = phoneGenerator.generate(this.person.country)
+    this.personalId = ''
     this.copy(phone)
   }
 
@@ -75,6 +65,8 @@ export default class PersonTab 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)
@@ -93,23 +85,4 @@ export default class PersonTab extends Vue {
       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

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

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

@@ -58,4 +58,8 @@
         </div>
     </div>
     <div class="memory-panel">Memory: {{copyText}}</div>
+    <div v-if="personalId">
+        <hr />
+        <Mocks :personalId="personalId"></Mocks>
+    </div>
 </div>

popup/src/components/script.ts

@@ -1,49 +1,26 @@
 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'
+import PersonTab from '@/components/person-tab/main.vue'
 
 Vue.use(VueClipboard)
 
 @Component({
   components: {
-    Mocks
+    Mocks,
+    PersonTab
   }
 })
 export default class HelloWorld extends Vue {
   tab = 'person'
   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 заполнить первоначальное значение */
@@ -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 {
     sender.send({
       action: Action.INSERT,
@@ -111,8 +52,4 @@ export default class HelloWorld extends Vue {
       notificationCleaner.disable()
     }
   }
-
-  saveMocks () {
-    console.log(this.personalId, this.registers)
-  }
 }

popup/src/components/template.html

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