Skip to content

Commit c9c5a7b

Browse files
OlivierJMOlivierJM
committed
added dark mode on edit resources
1 parent 3491244 commit c9c5a7b

File tree

2 files changed

+184
-117
lines changed

2 files changed

+184
-117
lines changed

‎imports/ui/components/Dashboard/EditResources.jsx‎

Lines changed: 178 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { Resources } from '../../../api/resources/resources';
1818
import * as config from '../../../../config.json';
1919
import { _Units } from '../../../api/units/units';
2020
import { formatText } from '../../utils/utils';
21+
import { ThemeContext } from '../../containers/AppWrapper'; // eslint-disable-line
2122

2223
export const T = i18n.createComponent();
2324

@@ -62,7 +63,10 @@ export class EditResources extends Component {
6263

6364
toggleEditModal = (ide, id = '', name = '') => {
6465
if (!Roles.userIsInRole(Meteor.userId(), ['admin', 'content-manager'])) {
65-
M.toast({ html: '<span>Only Admins and Content-Manager can edit the Topic</span>', classes: 'red' });
66+
M.toast({
67+
html: '<span>Only Admins and Content-Manager can edit the Topic</span>',
68+
classes: 'red',
69+
});
6670
return;
6771
}
6872
this.name = name;
@@ -133,11 +137,21 @@ export class EditResources extends Component {
133137
formatText(err.message, Meteor.userId(), 'resource-update'),
134138
'error',
135139
))
136-
: Meteor.call('updateSearch', modalIdentifier, resourceName, err => {
137-
err
138-
? M.toast({ html: `<span>${err.reason}</span>`, classes: 'red' })
139-
: M.toast({ html: `<span>successfully updated ${resourceName} </span>` });
140-
});
140+
: Meteor.call(
141+
'updateSearch',
142+
modalIdentifier,
143+
resourceName,
144+
err => {
145+
err
146+
? M.toast({
147+
html: `<span>${err.reason}</span>`,
148+
classes: 'red',
149+
})
150+
: M.toast({
151+
html: `<span>successfully updated ${resourceName} </span>`,
152+
});
153+
},
154+
);
141155
});
142156
break;
143157
// deleting (Yes)
@@ -149,7 +163,10 @@ export class EditResources extends Component {
149163
const name = count > 1 ? 'resources' : 'resource';
150164
Meteor.call('removeResource', v, err => {
151165
err
152-
? (M.toast({ html: `<span>${err.reason}</span>`, classes: 'red' }),
166+
? (M.toast({
167+
html: `<span>${err.reason}</span>`,
168+
classes: 'red',
169+
}),
153170
Meteor.call(
154171
'logger',
155172
formatText(err.message, Meteor.userId(), 'resource-remove'),
@@ -160,8 +177,14 @@ export class EditResources extends Component {
160177
? M.toast(err.reason)
161178
: Meteor.call('insertDeleted', v, 'resource', err => {
162179
err
163-
? M.toast({ html: `<span>${err.reason}</span>`, classes: 'red' })
164-
: M.toast({ html: '<span>successfully deleted resources </span>' });
180+
? M.toast({
181+
html: `<span>${err.reason}</span>`,
182+
classes: 'red',
183+
})
184+
: M.toast({
185+
html:
186+
'<span>successfully deleted resources </span>',
187+
});
165188
});
166189
});
167190
// });
@@ -191,15 +214,21 @@ export class EditResources extends Component {
191214
<a
192215
href=""
193216
className="fa fa-pencil"
194-
onClick={e => this.toggleEditModal('edit', resource._id, resource.name, e)}
217+
onClick={e =>
218+
this.toggleEditModal('edit', resource._id, resource.name, e)
219+
}
195220
/>
196221
</td>
197222
<td>{resource.ext}</td>
198223
<td onClick={handleCheckboxChange.bind(this, resource._id)}>
199-
<label htmlFor={resource._id}>
200-
<input type="checkbox" id={resource._id} className={`chk chk${resource._id}`} />
201-
<span/>
202-
</label>
224+
<label htmlFor={resource._id}>
225+
<input
226+
type="checkbox"
227+
id={resource._id}
228+
className={`chk chk${resource._id}`}
229+
/>
230+
<span />
231+
</label>
203232
</td>
204233
{Session.set('filename', resource.name)}
205234
</tr>
@@ -263,120 +292,153 @@ export class EditResources extends Component {
263292
);
264293
}
265294
render() {
266-
const {
267-
isOpen, title, confirm, reject, modalType, name
268-
} = this.state;
295+
const { isOpen, title, confirm, reject, modalType, name } = this.state;
269296
const limit = Session.get('limit');
270297
return (
271-
<Fragment>{modalType === 'upload' ? (
272-
<UploadWrapper
273-
show={isOpen}
274-
close={this.closeModal}
275-
title={title}
276-
submit={this.submitFile}
277-
/>
278-
) : (
279-
<MainModal
280-
show={isOpen}
281-
onClose={this.closeModal}
282-
subFunc={this.handleSubmit}
283-
title={title}
284-
confirm={confirm}
285-
reject={reject}
286-
>
287-
{modalType === 'del' ? (
288-
''
298+
<ThemeContext.Consumer>
299+
{
300+
({ state }) => (
301+
302+
<Fragment>
303+
{modalType === 'upload' ? (
304+
<UploadWrapper
305+
show={isOpen}
306+
close={this.closeModal}
307+
title={title}
308+
submit={this.submitFile}
309+
/>
289310
) : (
290-
<div className="input-field">
291-
<input
292-
placeholder="Name of Resource"
293-
type="text"
294-
defaultValue={name}
295-
className="validate clear"
296-
required
297-
name="resource"
298-
/>
299-
</div>
300-
)}
301-
</MainModal>
302-
// eslint-disable-next-line quotes
303-
)}
304-
<div className='m1' />
305-
<div className="col m9 s11">
306-
<div className="">
307-
<h4>{this.getName()}</h4>
308-
</div>
309-
<div className="row ">
310-
<div className="col s4 m3">
311-
<button className="btn grey darken-3 fa fa-angle-left" onClick={e => this.getBack(e)}>
312-
{' '}
313-
{config.isHighSchool ? Session.get('sub_unit_title') || ' Units' : ' Topics'}
314-
</button>
315-
</div>
316-
<div className="col s4 m3">
317-
<button
318-
className="btn red darken-3 "
319-
onClick={e => this.toggleEditModal('del', e)}
311+
<MainModal
312+
show={isOpen}
313+
onClose={this.closeModal}
314+
subFunc={this.handleSubmit}
315+
title={title}
316+
confirm={confirm}
317+
reject={reject}
320318
>
321-
{' '}
322-
<T>common.actions.delete</T>
323-
</button>
324-
</div>
319+
{modalType === 'del' ? (
320+
''
321+
) : (
322+
<div className="input-field">
323+
<input
324+
placeholder="Name of Resource"
325+
type="text"
326+
defaultValue={name}
327+
className="validate clear"
328+
style={{
329+
color: state.isDark ? '#F5FAF8' : '#000000',
330+
}}
331+
required
332+
name="resource"
333+
/>
334+
</div>
335+
)}
336+
</MainModal>
337+
// eslint-disable-next-line quotes
338+
)}
339+
<div className="m1" />
340+
<div className="col m9 s11"
341+
style={{
342+
backgroundColor: state.isDark ? state.mainDark : '#FFFFFF',
343+
color: state.isDark ? '#F5FAF8' : '#000000',
344+
}}
345+
>
346+
<div className="">
347+
<h4>{this.getName()}</h4>
348+
</div>
349+
<div className="row ">
350+
<div className="col s4 m3">
351+
<button
352+
className="btn grey darken-3 fa fa-angle-left"
353+
onClick={e => this.getBack(e)}
354+
>
355+
{' '}
356+
{config.isHighSchool
357+
? Session.get('sub_unit_title') || ' Units'
358+
: ' Topics'}
359+
</button>
360+
</div>
361+
<div className="col s4 m3">
362+
<button
363+
className="btn red darken-3 "
364+
onClick={e => this.toggleEditModal('del', e)}
365+
>
366+
{' '}
367+
<T>common.actions.delete</T>
368+
</button>
369+
</div>
325370

326-
<div className="col s4 m3">
327-
<button
328-
className="btn green darken-4 "
329-
onClick={e => this.toggleEditModal('upload', e)}
330-
>
331-
{' '}
332-
Upload New
333-
</button>
334-
</div>
335-
<div className="col m3">
336-
Resources displayed
337-
<div className="row">
338-
<a className="col s2 link" onClick={e => this.getEntriesCount(e, 5)}>
339-
<u>{limit === 5 ? <b>5</b> : 5}</u>
340-
</a>
341-
<a className="col s2 link" onClick={e => this.getEntriesCount(e, 10)}>
342-
<u>{limit === 10 ? <b>10</b> : 10}</u>
343-
</a>
344-
<a className="col s2 link" onClick={e => this.getEntriesCount(e, 20)}>
345-
<u>{limit === 20 ? <b>20</b> : 20}</u>
346-
</a>
371+
<div className="col s4 m3">
372+
<button
373+
className="btn green darken-4 "
374+
onClick={e => this.toggleEditModal('upload', e)}
375+
>
376+
{' '}
377+
Upload New
378+
</button>
379+
</div>
380+
<div className="col m3">
381+
Resources displayed
382+
<div className="row">
383+
<a
384+
className="col s2 link"
385+
onClick={e => this.getEntriesCount(e, 5)}
386+
>
387+
<u>{limit === 5 ? <b>5</b> : 5}</u>
388+
</a>
389+
<a
390+
className="col s2 link"
391+
onClick={e => this.getEntriesCount(e, 10)}
392+
>
393+
<u>{limit === 10 ? <b>10</b> : 10}</u>
394+
</a>
395+
<a
396+
className="col s2 link"
397+
onClick={e => this.getEntriesCount(e, 20)}
398+
>
399+
<u>{limit === 20 ? <b>20</b> : 20}</u>
400+
</a>
401+
</div>
402+
</div>
347403
</div>
348-
</div>
349-
</div>
350404

351-
<table className="striped">
352-
<thead>
353-
<tr>
354-
<th>#</th>
355-
<th>
356-
<T>common.manage.resources</T>
357-
</th>
358-
<th>
359-
<T>common.actions.edit</T> <T>common.manage.resources</T>
360-
</th>
361-
<th>Type</th>
362-
<th onClick={handleCheckAll.bind(this, 'chk-all', 'chk')}>
363-
<label>
364-
<input type="checkbox" className="filled-in chk-all" readOnly />
365-
<T>common.actions.check</T>
366-
</label>
367-
</th>
368-
</tr>
369-
</thead>
370-
<tbody>{this.renderResources()}</tbody>
371-
</table>
372-
{this.renderPagination()}
373-
</div>
374-
</Fragment>
405+
<table className="striped">
406+
<thead>
407+
<tr>
408+
<th>#</th>
409+
<th>
410+
<T>common.manage.resources</T>
411+
</th>
412+
<th>
413+
<T>common.actions.edit</T> <T>common.manage.resources</T>
414+
</th>
415+
<th>Type</th>
416+
<th onClick={handleCheckAll.bind(this, 'chk-all', 'chk')}>
417+
<label>
418+
<input
419+
type="checkbox"
420+
className="filled-in chk-all"
421+
readOnly
422+
/>
423+
<T>common.actions.check</T>
424+
</label>
425+
</th>
426+
</tr>
427+
</thead>
428+
<tbody>{this.renderResources()}</tbody>
429+
</table>
430+
{this.renderPagination()}
431+
</div>
432+
</Fragment>
433+
)
434+
}
435+
</ThemeContext.Consumer>
375436
);
376437
}
377438
}
378439
EditResources.propTypes = {
379440
topic: PropTypes.object,
441+
resources: PropTypes.array,
380442
};
381443
export function getId() {
382444
return FlowRouter.getParam('_id');

‎imports/ui/components/Dashboard/EditUnit.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Meteor } from 'meteor/meteor';
66
import i18n from 'meteor/universe:i18n';
77
import { withTracker } from 'meteor/react-meteor-data';
88
import ReactPaginate from 'react-paginate';
9+
import PropTypes from 'prop-types';
910
import M from 'materialize-css';
1011
import { _Units } from '../../../api/units/units';
1112
import { _Topics } from '../../../api/topics/topics';
@@ -457,7 +458,11 @@ export class EditUnits extends Component {
457458
);
458459
}
459460
}
460-
461+
EditUnits.propTypes = {
462+
count: PropTypes.number,
463+
unit: PropTypes.object,
464+
topics: PropTypes.array,
465+
};
461466
export function getUnitId() {
462467
const unitId = FlowRouter.getParam('_id');
463468
return unitId;

0 commit comments

Comments
 (0)