Добавил лоадер

master
Sipachev Igor 3 years ago
parent f2fcce4646
commit 5672773345
  1. 22
      popup/src/components/mocks/script.ts
  2. 68
      popup/src/components/mocks/style.scss
  3. 67
      popup/src/components/mocks/template.html

@ -19,6 +19,7 @@ export default class Mocks extends Vue {
@Prop()
mode!: Mode
showLoader = false
registers = new Registers()
register2Id: Record<string, string> = {}
@ -32,7 +33,11 @@ export default class Mocks extends Vue {
}
refreshMocks () {
this.mode === Mode.UPDATE && httpClient.mockConfigurations({ personalCode: this.personalCode })
if (this.mode !== Mode.UPDATE) {
return
}
this.showLoader = true
httpClient.mockConfigurations({ personalCode: this.personalCode })
.then((data: any) => {
const existServiceKeys = []
for (const mockConfiguration of data.data) {
@ -52,6 +57,9 @@ export default class Mocks extends Vue {
delete this.register2Id[serviceCode]
}
})
.then(() => {
this.showLoader = false
})
}
async onServiceChanged (serviceKey: string) {
@ -66,6 +74,7 @@ export default class Mocks extends Vue {
return
}
this.showLoader = true
httpClient.changeMockValueConfiguration({
id: this.register2Id[serviceKey],
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
@ -76,6 +85,9 @@ export default class Mocks extends Vue {
console.log('updateMock')
console.log(data)
})
.then(() => {
this.showLoader = false
})
}
saveMocks () {
@ -93,11 +105,15 @@ export default class Mocks extends Vue {
mockConfiguration.active = 'true'
mockConfigurations.push(mockConfiguration)
}
this.showLoader = true
httpClient.addMockConfigurations({ items: mockConfigurations })
.then((data: any) => {
console.log('saveMocks')
console.log(data)
})
.then(() => {
this.showLoader = false
})
}
saveMock (personalCode: string, serviceCode: string, value: number): Promise<any> {
@ -108,10 +124,14 @@ export default class Mocks extends Vue {
mockConfiguration.value = value
mockConfiguration.active = 'true'
mockConfigurations.push(mockConfiguration)
this.showLoader = true
return httpClient.addMockConfigurations({ items: mockConfigurations })
.then((data: any) => {
console.log('saveMocks')
console.log(data)
})
.then(() => {
this.showLoader = false
})
}
}

@ -1,3 +1,71 @@
.option-select {
width: 350px;
}
.lds-grid {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-grid div {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #298df8;
animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
top: 8px;
left: 8px;
animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
top: 8px;
left: 32px;
animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
top: 8px;
left: 56px;
animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
top: 32px;
left: 8px;
animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
top: 32px;
left: 32px;
animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
top: 32px;
left: 56px;
animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
top: 56px;
left: 8px;
animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
top: 56px;
left: 32px;
animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
top: 56px;
left: 56px;
animation-delay: -1.6s;
}
@keyframes lds-grid {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}

@ -1,44 +1,37 @@
<div>
<div>
<div>XTEE MTA</div>
<div v-if="showLoader" class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div v-if="!showLoader">
<div>
<select class="option-select" v-model="registers.xtee_mta" @change="onServiceChanged('xtee_mta')">
<option value="-1">-</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>
<div>XTEE MTA</div>
<div>
<select class="option-select" v-model="registers.xtee_mta" @change="onServiceChanged('xtee_mta')">
<option value="-1">-</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>
</div>
</div>
</div>
<div>
<div>XTEE RIA</div>
<div>
<select class="option-select" v-model="registers.ria" @change="onServiceChanged('ria')">
<option value="-1">-</option>
<option value="0">Не замокано (делать запрос)</option>
<option value="1">Успешный запрос</option>
<option value="2">Все запросы отклонены</option>
<option value="3">По персональному коду (3 - успешно, остальные - ошибка)</option>
</select>
<div>XTEE RIA</div>
<div>
<select class="option-select" v-model="registers.ria" @change="onServiceChanged('ria')">
<option value="-1">-</option>
<option value="0">Не замокано (делать запрос)</option>
<option value="1">Успешный запрос</option>
<option value="2">Все запросы отклонены</option>
<option value="3">По персональному коду (3 - успешно, остальные - ошибка)</option>
</select>
</div>
</div>
<br />
<button v-if="'add' === mode" @click="saveMocks">Сохранить моки</button>
</div>
<!-- <br /><br />-->
<!-- <label>-->
<!-- XTEE Pension-->
<!-- <select class="option-select" v-model="registers.xtee_pension">-->
<!-- <option value="">-</option>-->
<!-- <option value="0">Не замокано (делать запрос)</option>-->
<!-- <option value="2">Ошибка сервиса. (перезапросы)</option>-->
<!-- </select>-->
<!-- </label>-->
<br /><br />
<button v-if="'add' === mode" @click="saveMocks">Сохранить моки</button>
</div>

Loading…
Cancel
Save