component.ts

import {
  html,
  Component,
  css,
  property,
  query,
  async,
  TemplateResult
} from '@rxdi/lit-html';
import { Inject } from '@rxdi/core';
import { ModalService } from '../../shared/modal/modal.service';
import { BaseComponent } from '../../shared/base.component';
import { projectSharedCss } from './style.css';
import { map, tap } from 'rxjs/operators';
import { BehaviorSubject, Observable } from 'rxjs';
import { getCurrentProjectItemTemplate } from '../shared/get-current-project-template';
import { importQuery } from '@rxdi/graphql-client';
import { IQuery } from 'src/app/@introspection';

/**
 * @customElement project-list-component
 */
@Component({
  selector: 'project-list-component',
  style: css`
    ${projectSharedCss}
    *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
      background: rgba(255, 255, 255, 0);
    }
  `,
  template(this: ListComponent) {
    return html`
      <div class="view container">
        <div class="cover"></div>
        ${this.loading
          ? html`
              <loading-screen-component></loading-screen-component>
            `
          : ''}
        <modal-dialog-component>
          <link
            href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"
            rel="stylesheet"
            id="bootstrap-css"
          />
          <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
          ${!this.loading
            ? html`
                <div slot="content">
                  <div style="text-align: center; margin-top: 20px;">
                    <h2>Add project</h2>
                    <form class="form-signin" @submit=${this.onSubmit}>
                      <span id="reauth-email" class="reauth-email"></span>
                      <input
                        id="project-name"
                        style="margin-bottom: 20px;"
                        type="text"
                        @change=${this.onNameChange}
                        class="form-control"
                        placeholder="Project name"
                        required
                        autofocus
                      />
                      <button
                        class="btn btn-lg btn-primary btn-block btn-signin"
                        type="submit"
                      >
                        Create
                      </button>
                    </form>
                  </div>
                </div>
              `
            : ''}
          ${this.modalError
            ? html`
                <div></div>
              `
            : ''}
        </modal-dialog-component>
        <card-component>
          <div slot="content" style="padding: 20px;">
            <div class="flex">
              <span class="spacer"></span>
              <app-button
                @click=${this.showModalDialog}
                muted=${true}
                color="#37ab9b"
                text="Create project"
              ></app-button>
            </div>
            ${async(this.projects)}
            <div
              style="border: 1px dashed black;text-align: center; margin-top: 20px;padding: 40px;"
            >
              <p>Want to deploy a new site without connecting to Git?</p>

              <p>Drag and drop your site folder here</p>
            </div>
          </div>
        </card-component>
      </div>
    `;
  }
})
export class ListComponent extends BaseComponent {
  @Inject(ModalService) private modalService: ModalService;
  @property() private formGroup = {
    name: ''
  };
  @property() private modalError: string;
  @property() private loading: boolean;
  @query('#project-name') private projectName: HTMLInputElement;

  private projects: Observable<TemplateResult[]> = this.listProjects();

  showModalDialog() {
    this.modalService.showModal();
  }

  onSubmit(event: Event) {
    event.preventDefault();
    event.stopPropagation();
    this.loading = true;
    this.modalService.closeModal();
    this.mutate({
      mutation: 'create-project.mutation.graphql',
      variables: { name: this.formGroup.name },
      update(proxy, res) {
        const listProjectsQuery = importQuery('list-projects.query.graphql');
        const data = proxy.readQuery<IQuery>({ query: listProjectsQuery });
        data.listProjects.push(res.data.createProject);
        proxy.writeQuery({ data, query: listProjectsQuery });
      }
    })
      .subscribe(
        () => {
          this.loading = false;
          this.modalService.closeModal();
        },
        e => {
          this.loading = false;
          this.modalError = '';
        }
      );
  }

  listProjects() {
    return this.query({
      query: 'list-projects.query.graphql',
      fetchPolicy: 'network-only'
    }).pipe(
      map(res => res.data.listProjects),
      map(projects => projects.map(res => getCurrentProjectItemTemplate(res)))
    );
  }

  onNameChange(e) {
    this.formGroup.name = e.target.value;
  }
}