Fakultas Ilmu Komputer UI

CompanyProfile.jsx 8.41 KB
Newer Older
1
import React from 'react';
2
import PropTypes from 'prop-types';
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
      name: this.props.user.data.company.name,
      address: this.props.user.data.company.address,
      category: this.props.user.data.company.category,
      description: this.props.user.data.company.description,
      website: this.props.user.data.company.website,
      logo: this.props.user.data.company.logo,
      size: this.props.user.data.company.size,
      linkedin_url: this.props.user.data.company.linkedin_url,
28
29
30
31
32
      loading: false,
      form: {
        name: '',
        address: '',
        description: '',
33
        website: '',
Hadlina Rahmadinni's avatar
Hadlina Rahmadinni committed
34
        size: '',
35
36
      },
      refresh: 1,
Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
37
38
39
      applications: [],
      vacancies: [],
    };
40
41
42
    this.getProfile = this.getProfile.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
43

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

55
  getProfile() {
56
57
58
59
60
61
62
63
64
65
    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,
          refresh: this.state.refresh + 1,
          website: result.website,
Hadlina Rahmadinni's avatar
Hadlina Rahmadinni committed
66
          size: result.size,
67
          linkedin_url: result.linkedin_url,
68
          logo: result.logo,
69
70
        });
      },
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
71
72
      (error) => error.then(() => {
        this.state.name = 'Gagal mendapatkan informasi';
73
        console.log(error);
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
74
      }),
75
    );
76
77
78
79
80
81
82
83
84
85
86
87
  }

  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 });
88
89
90
91
92
93
94
95
96
97
98
99
100
    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
101
102
103
104
      (error) => error.then((r) => {
        this.setState({ loading: false });
        this.modalAlert.open('Pembaharuan profil gagal', Dumper.dump(r));
      }),
105
    );
106
107
108
  };

  handleChange = (e) => {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
109
    const { form } = this.state;
110
111
112
113
    form[e.target.name] = e.target.value;
    this.setState({ form });
  };

114
  render() {
Arga Ghulam Ahmad's avatar
Arga Ghulam Ahmad committed
115
    const defaultLogo = 'https://semantic-ui.com/images/wireframe/square-image.png';
116
    const { applications } = this.state;
117
118
119
120
    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
121
    const sisaApplications = applications.length - rejectedApplications - acceptedApplications;
Rahmania Astrid Mochtar's avatar
Rahmania Astrid Mochtar committed
122
123

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