MOCO Browser Extension (#2)
* spike * initial draft * updated styling * skeleton * added bubble script to webpack * added linter settings * installs * first implementation * Update webpack config - write bundle to `/build` - add support for SASS - improve options view as a proof o concept for styling * Update es-lint rules to mach mocoapp * Upgrade npm packages * Mount Bubble only for configured services * Update react and babel * Move module resolution config to webpack * Syncrhonize apiClient with chrome storage * Load projects and initialize form with last project and task * Enhance service * Improve handling of changeset with defaults * Create activity * Show error page on missing configuration * Refactor so that changeset can be used as activity params * Show form errors * Fetch and show booked hours for service * Allow to book hours with colon, error handling, spinner * WIP: Shadow DOM * Remove shadow dom * Render App in iframe * Refactor App component to load projects and create activity * Bugsnag integration * Add title to form and timer hint to hours input field * Configure positioning of bubble * Get rid of shared browser instance * Show Calendar and animate buble * Update webpack config * Prevent double animation of bubble * Fix eslint * Add margin to iframe body * Submit form when pressing enter on textarea * Open select on Enter * Use local environment for development * Show upgrade error if version invalid * Add asana service * Add jira and wunderlist services, add better support for query strings * Match urls with hash * Show popup in browser action * Pump version, add version to zip file * Add youtrack service * WIP: always show browserAction * Refactor * Update design * Finalize release 1.0.3 * Fix styles * Add support for Firefox browser * Extract common webpack config * Fix eslint * Close modal with ESC key * Use TimeInputParser to parse hours input * Improve webpack config * Show modal instead of popup when clicking on browser action * Pre-select last booked activities on service * Remove badge from booked hours * Show error and success feedback on options page * Remove updateBrowserActionForTab * Animate Bubble on unmount * Fix select date * Refactor * Fix key shortcut * Show schedule in calendar * Upload source maps to bugsnag * Upload sourcemaps to bugsnag * Define command shortcuts * Fix race condition where both Bubble and content wanted to mount Popup The content script is now the only place, where the Popup is mounted * Replace hash in filename by version * No new line in textarea and updated shortcuts for chrome * Change shortcut to Ctrl+Shift+K * Fix cors issue in new chrome 73 * Style improvements * Only report errors from own sources * Prevent sending messages to browser tabs * Fix scrollbars in iframe * Add error page for unknown error * Add stop propagation to Bubble click event * Update error pages * Remove timeout in tabHandler. The messaging error occurs only when the browser extension is reloaded/updated without refreshing the browser tab. * Refactor messaging * Show spinner in popup * Extract message handler to own module * Update styles and texts of error pages * Ensure focus is on document when opening popup * Find projects by identifier and value, do not highlight selected option in select component * Update docs * Spread match properties on service; improve remote service configuration for jira and wunderlist * Add webpack plugin to remove source mapping url * Bugsnag do not collect user ip * Upload source maps before removing source mapping url in bundles * Add support for regex url patterns, update asana config. * Fix animation Set default transform property via css * Improve config for asana * Change to fad-in/out animation
This commit is contained in:
Manuel Bouza
113
src/js/components/Form.js
Normal file
113
src/js/components/Form.js
Normal file
@@ -0,0 +1,113 @@
|
||||
import React, { Component } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import Select from "components/Select"
|
||||
import cn from "classnames"
|
||||
|
||||
class Form extends Component {
|
||||
static propTypes = {
|
||||
changeset: PropTypes.shape({
|
||||
project: PropTypes.object,
|
||||
task: PropTypes.object,
|
||||
hours: PropTypes.string
|
||||
}).isRequired,
|
||||
errors: PropTypes.object,
|
||||
projects: PropTypes.array.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onSubmit: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
inline: true
|
||||
};
|
||||
|
||||
isValid = () => {
|
||||
const { changeset } = this.props
|
||||
return ["assignment_id", "task_id", "hours", "description"]
|
||||
.map(prop => changeset[prop])
|
||||
.every(Boolean)
|
||||
};
|
||||
|
||||
handleTextareaKeyDown = event => {
|
||||
const { onSubmit } = this.props
|
||||
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault()
|
||||
this.isValid() && onSubmit(event)
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { projects, changeset, errors, onChange, onSubmit } = this.props
|
||||
const project = Select.findOptionByValue(projects, changeset.assignment_id)
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit}>
|
||||
<div
|
||||
className={cn("form-group", {
|
||||
"has-error": errors.assignment_id || errors.task_id
|
||||
})}
|
||||
>
|
||||
<Select
|
||||
className="moco-bx-select"
|
||||
name="assignment_id"
|
||||
placeholder="Auswählen..."
|
||||
options={projects}
|
||||
value={changeset.assignment_id}
|
||||
hasError={!!errors.assignment_id}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<Select
|
||||
className="moco-bx-select"
|
||||
name="task_id"
|
||||
placeholder="Auswählen..."
|
||||
options={project?.tasks || []}
|
||||
value={changeset.task_id}
|
||||
onChange={onChange}
|
||||
hasError={!!errors.task_id}
|
||||
noOptionsMessage={() => "Zuerst Projekt wählen"}
|
||||
/>
|
||||
{errors.assignment_id ? (
|
||||
<div className="form-error">{errors.assignment_id.join("; ")}</div>
|
||||
) : null}
|
||||
{errors.task_id ? (
|
||||
<div className="form-error">{errors.task_id.join("; ")}</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={cn("form-group", { "has-error": errors.hours })}>
|
||||
<input
|
||||
name="hours"
|
||||
className="form-control"
|
||||
onChange={onChange}
|
||||
value={changeset.hours}
|
||||
placeholder="0:00"
|
||||
autoComplete="off"
|
||||
autoFocus
|
||||
/>
|
||||
{errors.hours ? (
|
||||
<div className="form-error">{errors.hours.join("; ")}</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={cn("form-group", { "has-error": errors.description })}>
|
||||
<textarea
|
||||
name="description"
|
||||
onChange={onChange}
|
||||
value={changeset.description}
|
||||
placeholder="Beschreibung der Tätigkeit - mind. 3 Zeichen"
|
||||
maxLength={255}
|
||||
rows={3}
|
||||
onKeyDown={this.handleTextareaKeyDown}
|
||||
/>
|
||||
{errors.description ? (
|
||||
<div className="form-error">{errors.description.join("; ")}</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<button className="moco-bx-btn" disabled={!this.isValid()}>
|
||||
OK
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Form
|
||||
Reference in New Issue
Block a user