diff options
Diffstat (limited to 'src/components/auth/Import.js')
-rw-r--r-- | src/components/auth/Import.js | 87 |
1 files changed, 47 insertions, 40 deletions
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js index 3e34c3162..3073cad73 100644 --- a/src/components/auth/Import.js +++ b/src/components/auth/Import.js | |||
@@ -28,7 +28,9 @@ const messages = defineMessages({ | |||
28 | }, | 28 | }, |
29 | }); | 29 | }); |
30 | 30 | ||
31 | export default @observer class Import extends Component { | 31 | export default |
32 | @observer | ||
33 | class Import extends Component { | ||
32 | static propTypes = { | 34 | static propTypes = { |
33 | services: MobxPropTypes.arrayOrObservableArray.isRequired, | 35 | services: MobxPropTypes.arrayOrObservableArray.isRequired, |
34 | onSubmit: PropTypes.func.isRequired, | 36 | onSubmit: PropTypes.func.isRequired, |
@@ -40,17 +42,21 @@ export default @observer class Import extends Component { | |||
40 | intl: intlShape, | 42 | intl: intlShape, |
41 | }; | 43 | }; |
42 | 44 | ||
43 | componentWillMount() { | 45 | componentDidMount() { |
44 | const config = { | 46 | const config = { |
45 | fields: { | 47 | fields: { |
46 | import: [...this.props.services.filter(s => s.recipe).map(s => ({ | 48 | import: [ |
47 | fields: { | 49 | ...this.props.services |
48 | add: { | 50 | .filter((s) => s.recipe) |
49 | default: true, | 51 | .map((s) => ({ |
50 | options: s, | 52 | fields: { |
51 | }, | 53 | add: { |
52 | }, | 54 | default: true, |
53 | }))], | 55 | options: s, |
56 | }, | ||
57 | }, | ||
58 | })), | ||
59 | ], | ||
54 | }, | 60 | }, |
55 | }; | 61 | }; |
56 | 62 | ||
@@ -62,9 +68,12 @@ export default @observer class Import extends Component { | |||
62 | e.preventDefault(); | 68 | e.preventDefault(); |
63 | this.form.submit({ | 69 | this.form.submit({ |
64 | onSuccess: (form) => { | 70 | onSuccess: (form) => { |
65 | const servicesImport = form.values().import | 71 | const servicesImport = form |
66 | .map((value, i) => !value.add || services.filter(s => s.recipe)[i]) | 72 | .values() |
67 | .filter(s => typeof s !== 'boolean'); | 73 | .import.map( |
74 | (value, i) => !value.add || services.filter((s) => s.recipe)[i], | ||
75 | ) | ||
76 | .filter((s) => typeof s !== 'boolean'); | ||
68 | 77 | ||
69 | this.props.onSubmit({ services: servicesImport }); | 78 | this.props.onSubmit({ services: servicesImport }); |
70 | }, | 79 | }, |
@@ -76,37 +85,31 @@ export default @observer class Import extends Component { | |||
76 | const { intl } = this.context; | 85 | const { intl } = this.context; |
77 | const { services, isSubmitting, inviteRoute } = this.props; | 86 | const { services, isSubmitting, inviteRoute } = this.props; |
78 | 87 | ||
79 | const availableServices = services.filter(s => s.recipe); | 88 | const availableServices = services.filter((s) => s.recipe); |
80 | const unavailableServices = services.filter(s => !s.recipe); | 89 | const unavailableServices = services.filter((s) => !s.recipe); |
81 | 90 | ||
82 | return ( | 91 | return ( |
83 | <div className="auth__scroll-container"> | 92 | <div className="auth__scroll-container"> |
84 | <div className="auth__container auth__container--signup"> | 93 | <div className="auth__container auth__container--signup"> |
85 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 94 | <form |
86 | <img | 95 | className="franz-form auth__form" |
87 | src="./assets/images/logo.svg" | 96 | onSubmit={(e) => this.submit(e)} |
88 | className="auth__logo" | 97 | > |
89 | alt="" | 98 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
90 | /> | 99 | <h1>{intl.formatMessage(messages.headline)}</h1> |
91 | <h1> | ||
92 | {intl.formatMessage(messages.headline)} | ||
93 | </h1> | ||
94 | <table className="service-table available-services"> | 100 | <table className="service-table available-services"> |
95 | <tbody> | 101 | <tbody> |
96 | {this.form.$('import').map((service, i) => ( | 102 | {this.form.$('import').map((service, i) => ( |
97 | <tr | 103 | <tr key={service.id} className="service-table__row"> |
98 | key={service.id} | ||
99 | className="service-table__row" | ||
100 | > | ||
101 | <td className="service-table__toggle"> | 104 | <td className="service-table__toggle"> |
102 | <Toggle | 105 | <Toggle field={service.$('add')} showLabel={false} /> |
103 | field={service.$('add')} | ||
104 | showLabel={false} | ||
105 | /> | ||
106 | </td> | 106 | </td> |
107 | <td className="service-table__column-icon"> | 107 | <td className="service-table__column-icon"> |
108 | <img | 108 | <img |
109 | src={availableServices[i].custom_icon || availableServices[i].recipe.icons.svg} | 109 | src={ |
110 | availableServices[i].custom_icon | ||
111 | || availableServices[i].recipe.icons.svg | ||
112 | } | ||
110 | className={classnames({ | 113 | className={classnames({ |
111 | 'service-table__icon': true, | 114 | 'service-table__icon': true, |
112 | 'has-custom-icon': availableServices[i].custom_icon, | 115 | 'has-custom-icon': availableServices[i].custom_icon, |
@@ -125,14 +128,18 @@ export default @observer class Import extends Component { | |||
125 | </table> | 128 | </table> |
126 | {unavailableServices.length > 0 && ( | 129 | {unavailableServices.length > 0 && ( |
127 | <div className="unavailable-services"> | 130 | <div className="unavailable-services"> |
128 | <strong>{intl.formatMessage(messages.notSupportedHeadline)}</strong> | 131 | <strong> |
132 | {intl.formatMessage(messages.notSupportedHeadline)} | ||
133 | </strong> | ||
129 | <p> | 134 | <p> |
130 | {services.filter(s => !s.recipe).map((service, i) => ( | 135 | {services |
131 | <span key={service.id}> | 136 | .filter((s) => !s.recipe) |
132 | {service.name !== '' ? service.name : service.service} | 137 | .map((service, i) => ( |
133 | {unavailableServices.length > i + 1 ? ', ' : ''} | 138 | <span key={service.id}> |
134 | </span> | 139 | {service.name !== '' ? service.name : service.service} |
135 | ))} | 140 | {unavailableServices.length > i + 1 ? ', ' : ''} |
141 | </span> | ||
142 | ))} | ||
136 | </p> | 143 | </p> |
137 | </div> | 144 | </div> |
138 | )} | 145 | )} |