Fakultas Ilmu Komputer UI

ProfilePage.jsx 12.5 KB
Newer Older
1
import React from 'react';
2
import { Segment, Image, Header, Icon, Checkbox, Container, Button, Form, Grid } from 'semantic-ui-react';
3
import Server from './lib/Server';
4
import Storage from './lib/Storage';
5
import ModalAlert from './components/ModalAlert';
6
import Dumper from './lib/Dumper';
7
8
9

export default class ProfilePage extends React.Component {

10
  static propTypes = {
11
12
    route: React.PropTypes.object.isRequired,
    params: React.PropTypes.object.isRequired,
13
    user: React.PropTypes.object.isRequired,
14
15
16
17
18
19
  };

  constructor(props) {
    super(props);
    /* istanbul ignore next */
    this.state = {
20
21
      id: '',
      npm: '',
22
23
24
25
      name: '',
      major: '',
      batch: '',
      email: '',
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
26
      region: '',
27
28
29
      cityOfBirth: '',
      dateOfBirth: '',
      resume: '',
30
31
32
      phone_number: '',
      show_transcript: '',
      photo: '',
HANIF AGUNG PRAYOGA's avatar
HANIF AGUNG PRAYOGA committed
33
      intro: '',
34
35
      form: {
        picture: '',
36
        email: '',
37
        phone_number: '',
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
38
        region: '',
39
        resume: '',
40
        show_transcript: '',
HANIF AGUNG PRAYOGA's avatar
HANIF AGUNG PRAYOGA committed
41
        intro: '',
42
43
        latest_work: '',
        latest_work_desc: '',
44
      },
45
      bagikanTranskrip: '',
46
      acceptedNo: 0,
47
      refresh: 1,
Zamil Majdy's avatar
Zamil Majdy committed
48
      loading: false,
49
      linkedin_url: '',
50
51
      latest_work: '',
      latest_work_desc: '',
52
53
    };
    this.getProfile = this.getProfile.bind(this);
54
    this.handleChange = this.handleChange.bind(this);
55
    this.handleCheckbox = this.handleCheckbox.bind(this);
56
57
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFile = this.handleFile.bind(this);
58
    this.gotoLink = this.gotoLink.bind(this);
M. Reza Qorib's avatar
M. Reza Qorib committed
59
    this.gotoStudentResume = this.gotoStudentResume.bind(this);
Zamil Majdy's avatar
Zamil Majdy committed
60
    this.gotoStudentTranscript = this.gotoStudentTranscript.bind(this);
61
    this.getProfile();
62
63
64
  }

  getProfile() {
65
66
67
68
69
70
71
72
73
74
    const id = this.props.route.own ? this.props.user.data.student.id : this.props.params.id;
    return Server.get(`/students/${id}/`).then((data) => {
      this.setState({
        id: data.id,
        name: data.name,
        npm: data.npm,
        resume: data.resume,
        major: data.major,
        batch: data.batch,
        email: data.user.email,
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
75
        region: data.region,
76
77
78
79
80
        cityOfBirth: data.birth_place,
        dateOfBirth: data.birth_date,
        phone_number: data.phone_number,
        photo: data.photo,
        show_transcript: data.show_transcript,
81
        acceptedNo: data.accepted_no,
82
83
        bagikanTranskrip: data.show_transcript,
        refresh: this.state.refresh + 1,
HANIF AGUNG PRAYOGA's avatar
HANIF AGUNG PRAYOGA committed
84
        intro: data.intro,
85
        linkedin_url: data.linkedin_url,
86
87
        latest_work: data.latest_work,
        latest_work_desc: data.latest_work_desc,
88
      });
89
90
91
92
93
94
      if (this.props.route.own) {
        const newSession = this.props.user.data;
        newSession.student = data;
        Storage.set('user-data', newSession);
        window.scrollTo(0, 0);
      }
95
96
97
98
99
100
101
102
103
104
105
106
107
108
    }, error => error.then(() => {
      this.state.name = 'Gagal mendapatkan informasi';
    }));
  }

  handleSubmit = (e) => {
    e.preventDefault();

    const submitForm = {};
    Object.keys(this.state.form).forEach((key) => {
      if (this.state.form[key] !== '') {
        submitForm[key] = this.state.form[key];
      }
    });
Zamil Majdy's avatar
Zamil Majdy committed
109
    this.setState({ loading: true });
110
    Server.submit(`/students/${this.state.id}/profile/`, submitForm, 'PATCH').then(() => {
Zamil Majdy's avatar
Zamil Majdy committed
111
      this.setState({ loading: false });
112
      this.modalAlert.open('Profil berhasil diperbaharui', 'Silakan periksa kembali profil anda', this.getProfile);
113
    }, error => error.then((r) => {
Zamil Majdy's avatar
Zamil Majdy committed
114
      this.setState({ loading: false });
115
      this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
116
117
118
119
120
121
122
123
    }));
  };


  handleFile = (e) => {
    const form = this.state.form;
    form[e.target.name] = e.target.files[0];
    this.setState({ form });
124
  };
125

126
  handleChange = (e) => {
127
128
129
130
131
132
133
134
    const form = this.state.form;
    form[e.target.name] = e.target.value;
    this.setState({ form });
  };

  handleCheckbox = (e, d) => {
    const form = this.state.form;
    form[d.name] = d.checked;
135
    this.setState({ form, show_transcript: d.checked });
136
137
  };

138
139
140
141
142
  gotoLink = (url) => {
    const win = window.open(url);
    win.focus();
  };

M. Reza Qorib's avatar
M. Reza Qorib committed
143
144
  gotoStudentResume = () => this.gotoLink(this.state.resume || '#');

Zamil Majdy's avatar
Zamil Majdy committed
145
146
  gotoStudentTranscript = () => this.gotoLink(`transkrip/${this.state.id}`);

147
148
149
  updateForm(show) {
    if (show) {
      return (
150
        <Segment className="profile-form">
151
152
153
154
155
156
          <Header as="h3" textAlign="center">
            <Icon name="edit" />
            <Header.Content>
              Edit Profile Page
            </Header.Content>
          </Header>
157
          <ModalAlert ref={(modal) => { this.modalAlert = modal; }} />
158
          <Form ref={(input) => { this.form = input; }} key={this.state.refresh} size="small" onSubmit={this.handleSubmit}>
159
160
            <Form.Field>
              <label htmlFor="photo">Profile Picture</label>
161
              <input onChange={this.handleFile} placeholder="Profile Photo.jpg" name="photo" type="File" />
162
            </Form.Field>
163
164
            <Form.Field>
              <label htmlFor="email">Email</label>
165
              <input onChange={this.handleChange} placeholder="jojon@email.com" name="email" />
166
167
            </Form.Field>
            <Form.Field>
168
169
              <label htmlFor="phone_number">No. Hp</label>
              <input onChange={this.handleChange} placeholder="08123456789" name="phone_number" />
170
            </Form.Field>
171
172
173
174
            <Form.Field>
              <label htmlFor="linkedin_url">URL Profile LinkedIn</label>
              <input onChange={this.handleChange} placeholder="https://www.linkedin.com/in/jojo/" name="linkedin_url" />
            </Form.Field>
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
175
176
177
178
            <Form.Field>
              <label htmlFor="region">Region</label>
              <input onChange={this.handleChange} placeholder="Indonesia" name="region" />
            </Form.Field>
179
180
181
182
183
184
185
186
            <Form.Field>
              <label htmlFor="latest_work">Latest Working Experience</label>
              <input onChange={this.handleChange} placeholder="Teaching Asssistant at Fasilkom UI" name="latest_work" />
            </Form.Field>
            <Form.Field>
              <label htmlFor="latest_work_desc">Latest Working Experience Description</label>
              <input onChange={this.handleChange} placeholder="Evaluate weekly assignment for 15 students" name="latest_work_desc" />
            </Form.Field>
187
188
            <Form.Field>
              <label htmlFor="resume">Resume</label>
189
              <input onChange={this.handleFile} placeholder="Resume" name="resume" type="File" />
190
            </Form.Field>
HANIF AGUNG PRAYOGA's avatar
HANIF AGUNG PRAYOGA committed
191
192
193
194
            <Form.Field>
              <label htmlFor="intro">Intro</label>
              <input onChange={this.handleChange} placeholder="Ceritakan dirimu secara singkat" name="intro" />
            </Form.Field>
195
196
197
            <Form.Field>
              <Checkbox
                onChange={this.handleCheckbox}
sirinbaisa's avatar
sirinbaisa committed
198
                checked={!!this.state.show_transcript}
199
                label="Ijinkan perusahaan tempat saya mendaftar untuk melihat transkrip akademik saya"
200
                name="show_transcript"
201
202
              />
            </Form.Field>
Zamil Majdy's avatar
Zamil Majdy committed
203
            <Button type="submit" size="small" loading={this.state.loading} primary floated="right">Submit</Button>
204
          </Form>
205
        </Segment>
206
207
208
209
210
      );
    }

    return (<div />);
  }
211

212
  render() {
Zamil Majdy's avatar
Zamil Majdy committed
213
    const defaultPicture = 'https://semantic-ui.com/images/wireframe/square-image.png';
214
215
    return (
      <div className="profilePage">
sirinbaisa's avatar
sirinbaisa committed
216
        <Segment className="biodata-section" >
217
218
          <Grid stackable columns={2}>
            <Grid.Column>
sirinbaisa's avatar
sirinbaisa committed
219
              <Header as="h2" icon textAlign="center">
sirinbaisa's avatar
sirinbaisa committed
220
                <br />
221
                <Image src={this.state.photo || defaultPicture} size="medium" />
sirinbaisa's avatar
sirinbaisa committed
222
223
224
              </Header>
            </Grid.Column>

225
            <Grid.Column>
sirinbaisa's avatar
sirinbaisa committed
226
227
              <Container textAlign="left" className="profile-biodata">
                <div className="biodata">
M. Reza Qorib's avatar
M. Reza Qorib committed
228
229
230
231
232
233
234
235
236
237
                  <Segment basic textAlign="center">
                    <h1> { this.state.name } </h1>
                  </Segment>

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="university" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
238
                        <p> { this.state.major || 'N/A' }, { this.state.batch || 'N/A' } </p>
M. Reza Qorib's avatar
M. Reza Qorib committed
239
240
241
242
243
244
245
246
247
248
249
                      </Grid.Column>
                    </Grid>
                  </Segment>

                  <Segment basic vertical>

                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="mail" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
250
                        <p> { this.state.email || 'N/A' } </p>
M. Reza Qorib's avatar
M. Reza Qorib committed
251
252
253
254
255
256
257
258
259
260
                      </Grid.Column>
                    </Grid>
                  </Segment>

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="phone" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
261
                        <p> { this.state.phone_number || 'N/A' }</p>
M. Reza Qorib's avatar
M. Reza Qorib committed
262
263
264
265
266
267
268
269
270
271
                      </Grid.Column>
                    </Grid>
                  </Segment>

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="gift" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
272
                        <p> { this.state.cityOfBirth || 'N/A' }, { this.state.dateOfBirth || 'N/A' } </p>
M. Reza Qorib's avatar
M. Reza Qorib committed
273
274
275
                      </Grid.Column>
                    </Grid>
                  </Segment>
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
276
277

                  <Segment basic vertical>
278
279
280
281
282
283
284
285
286
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="linkedin" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <a href={this.state.linkedin_url}> { this.state.linkedin_url || 'N/A' } </a>
                      </Grid.Column>
                    </Grid>
                  </Segment>
287
                  <Segment basic vertical>
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
288
289
290
291
292
293
294
295
296
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="map pin" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <p> { this.state.region || 'N/A' } </p>
                      </Grid.Column>
                    </Grid>
                  </Segment>
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <Icon name="suitcase" size="big" />
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <p>Latest working experience as: <span><b> { this.state.latest_work || 'N/A' } </b></span></p>
                        <p>Description: <span> { this.state.latest_work_desc || 'N/A' } </span></p>
                      </Grid.Column>
                    </Grid>
                  </Segment>
                </div>


                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <h3>Intro</h3>
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <p> { this.state.intro || 'N/A' } </p>
                      </Grid.Column>
                    </Grid>
                  </Segment>


sirinbaisa's avatar
sirinbaisa committed
323

HANIF AGUNG PRAYOGA's avatar
HANIF AGUNG PRAYOGA committed
324
325
326
327
328
329
330
331
332
333
334
335
336
337

                  <Segment basic vertical>
                    <Grid>
                      <Grid.Column width={2}>
                        <h3>Intro</h3>
                      </Grid.Column>
                      <Grid.Column width={13}>
                        <p> { this.state.intro || 'N/A' } </p>
                      </Grid.Column>
                    </Grid>
                  </Segment>



sirinbaisa's avatar
sirinbaisa committed
338
                <Container textAlign="center">
Zamil Majdy's avatar
Zamil Majdy committed
339
                  <div className="buttonProfile">
Zamil Majdy's avatar
Zamil Majdy committed
340
                    <Button onClick={this.gotoStudentResume} disabled={!this.state.resume} primary size="small">Resume</Button>
Zamil Majdy's avatar
Zamil Majdy committed
341
                    <Button onClick={this.gotoStudentTranscript} color="green" size="small">Transkrip</Button>
sirinbaisa's avatar
sirinbaisa committed
342
                  </div>
343
                  <br />
sirinbaisa's avatar
sirinbaisa committed
344
                  <div>
M. Reza Qorib's avatar
M. Reza Qorib committed
345
                    <h4> Bagikan Transkrip : { this.state.bagikanTranskrip ? 'Ya' : 'Tidak' }</h4>
sirinbaisa's avatar
sirinbaisa committed
346
347
348
                  </div>
                </Container>
              </Container>
sirinbaisa's avatar
sirinbaisa committed
349
350
            </Grid.Column >
          </Grid>
351
352
        </Segment >
        { this.updateForm(this.props.route.own) }
353
354
355
356
      </div>
    );
  }
}