@@ -2,15 +2,17 @@ import { css, cx } from '@emotion/css';
2
2
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons' ;
3
3
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ;
4
4
import * as React from 'react' ;
5
- import { IInboxDescriptor , IMessage } from 'wegas-ts-api' ;
5
+ import { IAttachment , IInboxDescriptor , IMessage } from 'wegas-ts-api' ;
6
6
import {
7
- bolder , defaultMarginBottom ,
7
+ bolder ,
8
+ defaultMarginBottom ,
8
9
defaultMarginTop ,
9
10
expandWidth ,
10
11
flex ,
11
12
flexBetween ,
12
13
flexColumn ,
13
14
flexRow ,
15
+ flexWrap ,
14
16
itemCenter ,
15
17
toolboxHeaderStyle ,
16
18
} from '../../css/classes' ;
@@ -24,13 +26,17 @@ import { wwarn } from '../../Helper/wegaslog';
24
26
import { componentsTranslations } from '../../i18n/components/components' ;
25
27
import { useInternalTranslate } from '../../i18n/internalTranslator' ;
26
28
import {
27
- DefaultEntityChooserLabel , defaultEntityDisplay ,
29
+ DefaultEntityChooserLabel ,
30
+ defaultEntityDisplay ,
28
31
EntityChooser ,
29
32
EntityChooserLabelProps ,
30
33
} from '../EntityChooser' ;
31
34
import { useTranslate } from '../Hooks/useTranslate' ;
32
35
import { themeVar } from '../Theme/ThemeVars' ;
33
36
import { TranslatableText } from './HTMLText' ;
37
+ import { fileURL } from '../../API/files.api' ;
38
+ import { languagesCTX } from "../Contexts/LanguagesProvider" ;
39
+ import { translate } from "../../data/i18n" ;
34
40
35
41
interface MessageLabelProps {
36
42
message : IMessage ;
@@ -62,6 +68,13 @@ const labelTitleStyle = css({
62
68
whiteSpace : 'nowrap' ,
63
69
} ) ;
64
70
71
+ const attachmentDisplay = cx (
72
+ flex ,
73
+ flexRow ,
74
+ flexWrap ,
75
+ css ( { flexShrink : 0 , marginLeft : '5px' , width : '100%' } ) ,
76
+ ) ;
77
+
65
78
function MessageLabel ( { message } : MessageLabelProps ) {
66
79
const translatedLabel = useTranslate ( message . subject ) ;
67
80
const translatedFrom = useTranslate ( message . from ) ;
@@ -116,6 +129,28 @@ function MessageChooser(props: EntityChooserLabelProps<IMessage>) {
116
129
) ;
117
130
}
118
131
132
+ interface AttachmentsDisplayProps {
133
+ attachments : IAttachment [ ] ;
134
+ }
135
+
136
+ function AttachmentsDisplay ( { attachments } : AttachmentsDisplayProps ) {
137
+ const { lang, availableLang } = React . useContext ( languagesCTX ) ;
138
+ const files = attachments . map ( attachment => translate ( attachment . file , lang , availableLang ) ) ;
139
+
140
+ return (
141
+ < div className = { attachmentDisplay } >
142
+ { files . map ( ( file , index ) => (
143
+ < span className = { css ( { marginLeft : '5px' } ) } key = { index } >
144
+ < a href = { fileURL ( file ) } target = "_blank" rel = "noreferrer" >
145
+ { file . slice ( 1 ) }
146
+ </ a >
147
+ { index < files . length - 1 && ',' }
148
+ </ span >
149
+ ) ) }
150
+ </ div >
151
+ ) ;
152
+ }
153
+
119
154
interface MessageDisplayProps {
120
155
entity : IMessage ;
121
156
}
@@ -126,11 +161,14 @@ function MessageDisplay({ entity }: MessageDisplayProps) {
126
161
const subject = useTranslate ( entity . subject ) ;
127
162
const date = useTranslate ( entity . date ) ;
128
163
const from = useTranslate ( entity . from ) ;
164
+ const attachments = entity . attachments ;
129
165
130
166
return (
131
167
< div className = { defaultEntityDisplay } >
132
168
< div className = { cx ( toolboxHeaderStyle ) } >
133
- { subject && < div className = { cx ( bolder , defaultMarginBottom ) } > { subject } </ div > }
169
+ { subject && (
170
+ < div className = { cx ( bolder , defaultMarginBottom ) } > { subject } </ div >
171
+ ) }
134
172
{ date && (
135
173
< div >
136
174
{ i18nComponentValues . inbox . date } : { date }
@@ -141,8 +179,14 @@ function MessageDisplay({ entity }: MessageDisplayProps) {
141
179
{ i18nComponentValues . inbox . sender } : { from }
142
180
</ div >
143
181
) }
182
+ { attachments . length > 0 && (
183
+ < div className = { cx ( flex , flexRow , css ( { whiteSpace : 'nowrap' } ) ) } >
184
+ { i18nComponentValues . inbox . attachments } :
185
+ < AttachmentsDisplay attachments = { attachments } />
186
+ </ div >
187
+ ) }
144
188
</ div >
145
- < TranslatableText content = { entity . body } />
189
+ < TranslatableText content = { entity . body } />
146
190
</ div >
147
191
) ;
148
192
}
0 commit comments