|
1 | 1 | <template> |
2 | 2 | <div class="box has-text-centered"> |
3 | | - |
4 | 3 | <b-field :label="getProviderLabel(providerConfig.providerType)" horizontal> |
5 | 4 | <b-tooltip |
6 | 5 | :label="getTooltip(providerConfig.providerType)" |
7 | 6 | :type="isLinked ? 'is-light': 'is-success'" |
8 | 7 | class="has-margin-top-10 has-margin-bottom-15 is-fullwidth" |
9 | | - multilined> |
10 | | - |
11 | | - <b-button :type="isLinked ? providerConfig.colorType: defaultType" :icon-pack="providerConfig.iconPack" |
12 | | - :class="isLinked ? '' : 'has-text-black'" |
13 | | - :icon-right="providerConfig.icon" @click="submit" outlined expanded> |
14 | | - <span |
15 | | - class="has-margin-right-5"> {{ isLinked ? $t('provider.submit.unlink') : $t('provider.submit.link') }} |
16 | | - </span> |
| 8 | + multilined |
| 9 | + > |
| 10 | + <b-button |
| 11 | + :type="isLinked ? providerConfig.colorType: defaultType" |
| 12 | + :icon-pack="providerConfig.iconPack" |
| 13 | + :class="isLinked ? '' : 'has-text-black'" |
| 14 | + :icon-right="providerConfig.icon" |
| 15 | + outlined |
| 16 | + expanded |
| 17 | + @click="submit" |
| 18 | + > |
| 19 | + <span |
| 20 | + class="has-margin-right-5" |
| 21 | + > {{ isLinked ? $t('provider.submit.unlink') : $t('provider.submit.link') }} |
| 22 | + </span> |
17 | 23 | </b-button> |
18 | 24 | </b-tooltip> |
19 | 25 | </b-field> |
|
24 | 30 | </b-field> |
25 | 31 |
|
26 | 32 | <b-field :label="$t('common.field.photo')" horizontal> |
27 | | - <BackgroundSquareImage :image-url="imageUrl" size="64" auto-margin="true"/> |
| 33 | + <BackgroundSquareImage :image-url="imageUrl" size="64" auto-margin="true" /> |
28 | 34 | </b-field> |
29 | 35 |
|
30 | 36 | <b-field :label="$t('common.field.name')" horizontal> |
|
39 | 45 | <span>{{ providerData.phoneNumber }}</span> |
40 | 46 | </b-field> |
41 | 47 | </template> |
42 | | - |
43 | 48 | </div> |
44 | 49 | </template> |
45 | 50 |
|
46 | 51 | <script lang="ts"> |
47 | | - import { Component, Prop, Vue } from 'nuxt-property-decorator'; |
48 | | - import { DefaultProfilePhoto, ProviderConfig, ProviderData, ProviderType } from '~/types'; |
49 | | - import BackgroundSquareImage from '~/components/image/BackgroundSquareImage.vue'; |
| 52 | +import { Component, Prop, Vue } from 'nuxt-property-decorator' |
| 53 | +import { DefaultProfilePhoto, ProviderConfig, ProviderData, ProviderType } from '~/types' |
| 54 | +import BackgroundSquareImage from '~/components/image/BackgroundSquareImage.vue' |
50 | 55 |
|
51 | 56 | @Component({ |
52 | 57 | components: { BackgroundSquareImage } |
53 | 58 | }) |
54 | | - export default class ProviderCard extends Vue { |
55 | | -
|
| 59 | +export default class ProviderCard extends Vue { |
56 | 60 | defaultType = 'is-light'; |
57 | 61 |
|
58 | | - @Prop({ type: Object, required: true }) providerConfig !: ProviderConfig; |
59 | | - @Prop({ type: Boolean, required: true }) isLinked !: boolean; |
60 | | - @Prop({ type: Function, required: true }) linkFunction !: (providerType: ProviderType) => void; |
61 | | - @Prop({ type: Object, required: false }) providerData !: ProviderData; |
| 62 | + @Prop({ type: Object, required: true }) providerConfig: ProviderConfig; |
| 63 | + @Prop({ type: Boolean, required: true }) isLinked: boolean; |
| 64 | + @Prop({ type: Function, required: true }) linkFunction: (providerType: ProviderType) => void; |
| 65 | + @Prop({ type: Object, required: false }) providerData: ProviderData; |
62 | 66 |
|
63 | | - submit() { |
| 67 | + submit () { |
64 | 68 | if (!this.isLinked) { |
65 | | - this.linkFunction(this.providerConfig.providerType); |
66 | | - return; |
| 69 | + this.linkFunction(this.providerConfig.providerType) |
| 70 | + return |
67 | 71 | } |
68 | 72 |
|
69 | | - let provider = this.providerConfig.providerType.replace('.com', '') |
| 73 | + const provider = this.providerConfig.providerType.replace('.com', '') |
70 | 74 |
|
71 | 75 | this.$buefy.dialog.confirm({ |
72 | | - title: this.$t('provider.dialog.delete.title', { provider }) as string, |
73 | | - message: this.$t('provider.dialog.delete.message', { provider }) as string, |
74 | | - confirmText: this.$t('provider.dialog.delete.confirm') as string, |
75 | | - cancelText: this.$t('common.cancel') as string, |
| 76 | + title: this.$t('provider.dialog.delete.title', { provider }) + '', |
| 77 | + message: this.$t('provider.dialog.delete.message', { provider }) + '', |
| 78 | + confirmText: this.$t('provider.dialog.delete.confirm') + '', |
| 79 | + cancelText: this.$t('common.cancel') + '', |
76 | 80 | type: 'is-danger', |
77 | 81 | hasIcon: true, |
78 | 82 | onConfirm: () => this.linkFunction(this.providerConfig.providerType) |
79 | 83 | }) |
80 | 84 | } |
81 | 85 |
|
82 | | - getTooltip(providerType: ProviderType) { |
83 | | - let provider = providerType.replace('.com', ''); |
84 | | - return this.isLinked ? |
85 | | - this.$t('provider.tooltip.linkedProvider', { provider }) : |
86 | | - this.$t('provider.tooltip.unlinkedProvider', { provider }); |
| 86 | + getTooltip (providerType: ProviderType) { |
| 87 | + const provider = providerType.replace('.com', '') |
| 88 | + return this.isLinked |
| 89 | + ? this.$t('provider.tooltip.linkedProvider', { provider }) |
| 90 | + : this.$t('provider.tooltip.unlinkedProvider', { provider }) |
87 | 91 | } |
88 | 92 |
|
89 | | - getProviderLabel(providerType: ProviderType) { |
| 93 | + getProviderLabel (providerType: ProviderType) { |
90 | 94 | return this.$t('provider.label.' + providerType) |
91 | 95 | } |
92 | 96 |
|
93 | | - get imageUrl() { |
| 97 | + get imageUrl () { |
94 | 98 | return this.providerData.photoURL || DefaultProfilePhoto.src |
95 | 99 | } |
96 | | -
|
97 | 100 | } |
98 | 101 | </script> |
0 commit comments