...

Kai Reinhard

14.14.2018 cc8dce317bd7644958cda1e2feb6fc0b70c7878b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import React from 'react';
import {UncontrolledTooltip} from 'reactstrap';
import {
    FormLabelField,
    FormSelect, FormOption, FormGroup, FormLabel, FormField
} from "../../general/forms/FormComponents";
import {getRestServiceUrl} from "../../../utilities/global";
import {clearDictionary} from '../../../utilities/i18n';
import I18n from "../../general/translation/I18n";
import ErrorAlertGenericRestFailure from "../../general/ErrorAlertGenericRestFailure";
import Loading from "../../general/Loading";
import {IconRefresh} from "../../general/IconComponents";
 
class ConfigAccountTab extends React.Component {
    loadConfig = () => {
        this.setState({
            loading: true,
            failed: false
        });
        fetch(getRestServiceUrl('configuration/user'), {
            method: 'GET',
            dataType: 'JSON',
            headers: {
                'Content-Type': 'text/plain; charset=utf-8'
            }
        })
            .then((resp) => {
                return resp.json()
            })
            .then((data) => {
                const {locale, dateFormat, ...user} = data;
                this.setState({
                    loading: false,
                    locale: locale ? locale : '',
                    dateFormat: dateFormat ? dateFormat : '',
                    ...user
                })
            })
            .catch((error) => {
                console.log("error", error);
                this.setState({
                    loading: false,
                    failed: true
                });
            })
    };
 
    constructor(props) {
        super(props);
 
        this.state = {
            loading: true,
            failed: false,
            locale: null,
            dateFormat: null
        };
 
        this.handleTextChange = this.handleTextChange.bind(this);
        this.loadConfig = this.loadConfig.bind(this);
    }
 
    componentDidMount() {
        this.loadConfig();
    }
 
    handleTextChange = event => {
        event.preventDefault();
        this.setState({[event.target.name]: event.target.value});
    }
 
    save() {
        var user = {
            locale: this.state.locale,
            dateFormat: this.state.dateFormat
        };
        return fetch(getRestServiceUrl("configuration/user"), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(user)
        })
    }
 
    render() {
        if (this.state.loading) {
            return <Loading/>;
        }
 
        if (this.state.failed) {
            return <ErrorAlertGenericRestFailure handleClick={this.loadConfig}/>;
        }
 
        return (
            <form>
                <div id={'clearDictionary'}
                     className={'btn btn-outline-primary refresh-button-right'}
                     onClick={clearDictionary}
                >
                    <IconRefresh/>
                    <UncontrolledTooltip placement={'left'} target={'clearDictionary'}>
                        <I18n name={'configuration.reloadDictionary.hint'}/>
                    </UncontrolledTooltip>
                </div>
                <FormLabelField label={<I18n name={'configuration.application.language'}/>} fieldLength={2}>
                    <FormSelect value={this.state.locale} name={'locale'} onChange={this.handleTextChange}>
                        <FormOption value={''} i18nKey={'configuration.application.language.option.default'}/>
                        <FormOption value={'en'} i18nKey={'language.english'}/>
                        <FormOption value={'de'} i18nKey={'language.german'}/>
                    </FormSelect>
                </FormLabelField>
                <FormGroup>
                    <FormLabel length={2} htmlFor={'dateFormat'}>
                        <I18n name={'configuration.application.dateFormat'}/>
                    </FormLabel>
                    <FormField length={2}>
                        <FormSelect value={this.state.dateFormat} name={'dateFormat'} onChange={this.handleTextChange}>
                            <FormOption value={''} i18nKey={'configuration.application.dateFormat.option.auto'}/>
                            <FormOption value={'dd.MM.yyyy'} label={'16.01.2018'}/>
                            <FormOption value={'d.M.yy'} label={'16.1.18'}/>
                            <FormOption value={'yyyy-MM-dd'} label={'2018-01-16'}/>
                            <FormOption value={'dd/MM/yyyy'} label={'16/01/2018'}/>
                            <FormOption value={'d/M/yy'} label={'16/1/18'}/>
                            <FormOption value={'MM/dd/yyyy'} label={'01/16/2018'}/>
                            <FormOption value={'M/d/yy'} label={'1/16/18'}/>
                        </FormSelect>
                    </FormField>
                </FormGroup>
            </form>
        );
    }
}
 
export default ConfigAccountTab;