Fakultas Ilmu Komputer UI

CompanyProfile.jsx 8.73 KB
Newer Older
1
import React from 'react';
2
import PropTypes from 'prop-types';
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
3
4
5
import {
  Segment, Header, Image, Container, Form, Button, Icon, TextArea,
} from 'semantic-ui-react';
Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
6
import { Doughnut } from 'react-chartjs-2';
7
8
9
import Server from './lib/Server';
import Dumper from './lib/Dumper';
import ModalAlert from './components/ModalAlert';
10
11

export default class CompanyProfile extends React.Component {
M. Reza Qorib's avatar
M. Reza Qorib committed
12
  static propTypes = {
13
    user: PropTypes.object.isRequired,
M. Reza Qorib's avatar
M. Reza Qorib committed
14
15
  };

Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
16
17
18
  constructor(props) {
    super(props);
    this.state = {
19
      id: this.props.user.data.company.id,
20
21
22
23
24
25
26
27
28
      name: '',
      address: '',
      category: '',
      description: '',
      founded: '',
      website: '',
      logo: '',
      size: '',
      linkedin_url: '',
29
30
31
32
33
      loading: false,
      form: {
        name: '',
        address: '',
        description: '',
Metta Anantha Pindika's avatar
Metta Anantha Pindika committed
34
        founded: '',
35
        website: '',
Hadlina Rahmadinni's avatar
Hadlina Rahmadinni committed
36
        size: '',
37
38
      },
      refresh: 1,
Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
39
40
41
      applications: [],
      vacancies: [],
    };
42
43

    this.getProfile();
44
45
46
    this.getProfile = this.getProfile.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
47

48
49
50
51
    Server.get(
      `/companies/${this.props.user.data.company.id}/applications/`,
      false,
    ).then((result) => {
52
      this.setState({ applications: result.results });
53
54
55
    },
    (error) => error.then(() => {
      console.log(error);
PRIAMBUDI LINTANG BAGASKARA's avatar
PRIAMBUDI LINTANG BAGASKARA committed
56
    }));
Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
57
58
  }

59
  getProfile() {
60
61
62
63
64
65
66
67
    return Server.get(`/companies/${this.state.id}/`).then(
      (result) => {
        this.setState({
          name: result.name,
          address: result.address,
          category: result.category,
          id: result.id,
          description: result.description,
Metta Anantha Pindika's avatar
Metta Anantha Pindika committed
68
          founded: result.founded,
69
70
          refresh: this.state.refresh + 1,
          website: result.website,
Hadlina Rahmadinni's avatar
Hadlina Rahmadinni committed
71
          size: result.size,
72
          linkedin_url: result.linkedin_url,
73
          logo: result.logo,
74
75
        });
      },
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
76
77
      (error) => error.then(() => {
        this.state.name = 'Gagal mendapatkan informasi';
78
        console.log(error);
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
79
      }),
80
    );
81
82
83
84
85
86
87
88
89
90
91
92
  }

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

    const submitForm = {};
    Object.keys(this.state.form).forEach((key) => {
      if (this.state.form[key] !== '') {
        submitForm[key] = this.state.form[key];
      }
    });
    this.setState({ loading: true });
93
94
95
96
97
98
99
100
101
102
103
104
105
    Server.submit(
      `/companies/${this.state.id}/profile/`,
      submitForm,
      'PATCH',
    ).then(
      () => {
        this.setState({ loading: false });
        this.modalAlert.open(
          'Profil berhasil diperbaharui',
          'Silakan periksa kembali profil anda',
          this.getProfile,
        );
      },
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
106
107
108
109
      (error) => error.then((r) => {
        this.setState({ loading: false });
        this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
      }),
110
    );
111
112
113
  };

  handleChange = (e) => {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
114
    const { form } = this.state;
115
116
117
118
    form[e.target.name] = e.target.value;
    this.setState({ form });
  };

119
  render() {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
120
    const defaultLogo = 'https://semantic-ui.com/images/wireframe/square-image.png';
121
    const { applications } = this.state;
122
123
124
125
    const rejectedApplications = applications.filter((apl) => apl.status === 3)
      .length;
    const acceptedApplications = applications.filter((apl) => apl.status === 4)
      .length;
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
126
    const sisaApplications = applications.length - rejectedApplications - acceptedApplications;
Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
127
128

    const chartData = {
129
130
131
132
133
134
135
      labels: ['Lamaran Ditolak', 'Lamaran Diterima', 'Lamaran Pending'],
      datasets: [
        {
          data: [rejectedApplications, acceptedApplications, sisaApplications],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
        },
Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
136
      ],
137
    };
138
    return (
Zamil Majdy's avatar
Zamil Majdy committed
139
      <div className="companyProfile">
140
        <Segment className="segmentProfileCompany">
141
          <Header as="h2" icon textAlign="center">
142
143
144
145
146
            <Image
              src={this.state.logo || defaultLogo}
              size="small"
              shape="circular"
            />
147
148
          </Header>
          <Container textAlign="center" className="profile-biodata">
Zamil Majdy's avatar
Zamil Majdy committed
149
            <div className="biodataCompany">
150
151
152
              <h2>{this.state.name}</h2>
              <h3>{this.state.address}</h3>
              <p>
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
153
154
155
156
                {this.state.category}
                {' '}
-
                {this.state.description}
157
              </p>
Metta Anantha Pindika's avatar
Metta Anantha Pindika committed
158
159
160
              <p>
                Founded: {this.state.founded}
              </p>
161
              <p>{this.state.website}</p>
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
162
163
164
165
166
              <p>
                {this.state.size}
                {' '}
karyawan
              </p>
167
168
169
              {this.state.linkedin_url ? (
                <a href={this.state.linkedin_url}>
                  {' '}
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
170
171
                  {this.state.linkedin_url}
                  {' '}
172
173
174
175
                </a>
              ) : (
                <p> Belum ada link LinkedIn</p>
              )}
176
177
            </div>
          </Container>
Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
178
179
180
181
182
          <Container textAlign="center" className="statistik">
            <div className="statistikCompany">
              <Doughnut data={chartData} />
            </div>
          </Container>
183
        </Segment>
184
185
186
        <Segment className="profileFormCompany">
          <Header as="h3" textAlign="center">
            <Icon name="edit" />
187
            <Header.Content>Edit Profile Page</Header.Content>
188
          </Header>
189
190
191
192
193
194
195
196
197
198
199
200
201
          <ModalAlert
            ref={(modal) => {
              this.modalAlert = modal;
            }}
          />
          <Form
            size="small"
            ref={(input) => {
              this.form = input;
            }}
            key={this.state.refresh}
            onSubmit={this.handleSubmit}
          >
202
203
            <Form.Field>
              <label htmlFor="name">Nama Perusahaan</label>
204
205
206
207
208
209
              <input
                placeholder="Nama Perusahaan"
                name="name"
                onChange={this.handleChange}
                defaultValue={this.state.name === null ? null : this.state.name}
              />
210
211
212
            </Form.Field>
            <Form.Field>
              <label htmlFor="address">Alamat Perusahaan</label>
213
214
215
216
217
218
219
220
              <input
                placeholder="Alamat Perusahaan"
                name="address"
                onChange={this.handleChange}
                defaultValue={
                  this.state.address === null ? null : this.state.address
                }
              />
221
222
223
            </Form.Field>
            <Form.Field>
              <label htmlFor="description">Deskripsi</label>
224
225
226
227
228
229
230
231
232
233
234
              <TextArea
                placeholder="Try adding multiple lines"
                name="description"
                onChange={this.handleChange}
                autoHeight
                defaultValue={
                  this.state.description === null
                    ? null
                    : this.state.description
                }
              />
235
            </Form.Field>
Metta Anantha Pindika's avatar
Metta Anantha Pindika committed
236
237
238
239
240
241
242
243
244
245
246
              <label htmlFor="founded">Founded:</label>
                <input
                  name="founded"
                  placeholder="YYYY-MM-DD"
                  pattern="\d{4}\-\d{2}\-\d{2}"
                  onChange={this.handleChange}
                  defaultValue={
                    this.state.founded === null ? null : this.state.founded
                }
                />
            <Form.Field/>
Hadlina Rahmadinni's avatar
Hadlina Rahmadinni committed
247
248
249
250
251
252
253
254
            <Form.Field>
              <label htmlFor="size">Jumlah karyawan</label>
              <input
                placeholder="Jumlah karyawan keseluruhan"
                name="size"
                size="small"
                onChange={this.handleChange}
                defaultValue={
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
255
                  this.state.size === null ? '0' : this.state.size
Hadlina Rahmadinni's avatar
Hadlina Rahmadinni committed
256
257
258
                }
              />
            </Form.Field>
259
260
            <Form.Field>
              <label htmlFor="website">Website</label>
261
262
263
264
265
266
267
268
              <input
                placeholder="Alamat Website"
                name="website"
                onChange={this.handleChange}
                defaultValue={
                  this.state.website === null ? null : this.state.website
                }
              />
269
            </Form.Field>
270
271
272
273
274
275
276
277
278
279
280
            <Form.Field>
              <label htmlFor="linkedin_url">LinkedIn URL</label>
              <input
                placeholder="LinkedIn URL"
                name="linkedin_url"
                onChange={this.handleChange}
                defaultValue={
                  this.state.linkedin_url === null ? null : this.state.linkedin_url
                }
              />
            </Form.Field>
281
282
283
284
285
286
287
288
289
290
            <Button
              type="submit"
              size="small"
              loading={this.state.loading}
              primary
              floated="right"
            >
              Submit
            </Button>
          </Form>
291
        </Segment>
292
293
294
295
      </div>
    );
  }
}