ui/src/components/site-form.tsx

   1 import { Component, linkEvent } from 'inferno';
   2 import { Site, SiteForm as SiteFormI } from '../interfaces';
   3 import { WebSocketService } from '../services';
   4 import { capitalizeFirstLetter } from '../utils';
   5 import * as autosize from 'autosize';
   6 import { i18n } from '../i18next';
   7 import { T } from 'inferno-i18next';
   8
   9 interface SiteFormProps {
  10   site?: Site; // If a site is given, that means this is an edit
  11   onCancel?(): any;
  12 }
  13
  14 interface SiteFormState {
  15   siteForm: SiteFormI;
  16   loading: boolean;
  17 }
  18
  19 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
  20   private emptyState: SiteFormState ={
  21     siteForm: {
  22       name: null
  23     },
  24     loading: false
  25   }
  26
  27   constructor(props: any, context: any) {
  28     super(props, context);
  29     this.state = this.emptyState;
  30     if (this.props.site) {
  31       this.state.siteForm = {
  32         name: this.props.site.name,
  33         description: this.props.site.description,
  34       }
  35     }
  36   }
  37
  38   componentDidMount() {
  39     autosize(document.querySelectorAll('textarea'));
  40   }
  41
  42   render() {
  43     return (
  44       <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
  45         <h5>{`${this.props.site ? capitalizeFirstLetter(i18n.t('edit')) : capitalizeFirstLetter(i18n.t('name'))} ${i18n.t('your_site')}`}</h5>
  46         <div class="form-group row">
  47           <label class="col-12 col-form-label"><T i18nKey="name">#</T></label>
  48           <div class="col-12">
  49             <input type="text" class="form-control" value={this.state.siteForm.name} onInput={linkEvent(this, this.handleSiteNameChange)} required minLength={3} maxLength={20} />
  50           </div>
  51         </div>
  52         <div class="form-group row">
  53           <label class="col-12 col-form-label"><T i18nKey="sidebar">#</T></label>
  54           <div class="col-12">
  55             <textarea value={this.state.siteForm.description} onInput={linkEvent(this, this.handleSiteDescriptionChange)} class="form-control" rows={3} maxLength={10000} />
  56           </div>
  57         </div>
  58         <div class="form-group row">
  59           <div class="col-12">
  60             <button type="submit" class="btn btn-secondary mr-2">
  61               {this.state.loading ?
  62               <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> :
  63               this.props.site ? capitalizeFirstLetter(i18n.t('save')) : capitalizeFirstLetter(i18n.t('create'))}</button>
  64               {this.props.site && <button type="button" class="btn btn-secondary" onClick={linkEvent(this, this.handleCancel)}><T i18nKey="cancel">#</T></button>}
  65           </div>
  66         </div>
  67       </form>
  68     );
  69   }
  70
  71   handleCreateSiteSubmit(i: SiteForm, event: any) {
  72     event.preventDefault();
  73     i.state.loading = true;
  74     if (i.props.site) {
  75       WebSocketService.Instance.editSite(i.state.siteForm);
  76     } else {
  77       WebSocketService.Instance.createSite(i.state.siteForm);
  78     }
  79     i.setState(i.state);
  80   }
  81
  82   handleSiteNameChange(i: SiteForm, event: any) {
  83     i.state.siteForm.name = event.target.value;
  84     i.setState(i.state);
  85   }
  86
  87   handleSiteDescriptionChange(i: SiteForm, event: any) {
  88     i.state.siteForm.description = event.target.value;
  89     i.setState(i.state);
  90   }
  91
  92   handleCancel(i: SiteForm) {
  93     i.props.onCancel();
  94   }
  95 }