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

2022-03-10 13:02:17 +07:00 · 2022-03-10 13:02:17 +07:00 · 6b45516d94
commit 6b45516d94
parent b6e5d9199c
5 changed files with 80 additions and 166 deletions
--- a/popup/src/components/person-tab/script.ts
+++ b/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)
-  }
 }
--- a/popup/src/components/person-tab/style.scss
+++ b/popup/src/components/person-tab/style.scss
@ -1,3 +1,65 @@
-.option-select {
-  width: 350px;
+.container {
+  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;
+    }
+  }
 }
--- a/popup/src/components/person-tab/template.html
+++ b/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>
--- a/popup/src/components/script.ts
+++ b/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)
-  }
 }
--- a/popup/src/components/template.html
+++ b/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">
-                    <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>
+                <PersonTab/>
            </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 v-if="personalId">
+                    <hr />
+                    <Mocks :personalId="personalId"></Mocks>
+                </div>
            </div>
            <div class="tab-page__item" :class="{'tab-page__item_show': tab === 'ember'}">
                <div class="form-row">