Implemented forms tab (#246)

frontend/angular.json

@@ -187,6 +187,9 @@
     },
     "@schematics/angular:directive": {
       "prefix": "app"
+    },
+    "@nrwl/schematics:component": {
+      "styleext": "scss"
     }
   },
   "cli": {

frontend/package.json

@@ -17,6 +17,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^9.1.12",
+    "@angular/cdk": "^9.1.12",
     "@angular/cli": "^9.1.12",
     "@angular/common": "^9.1.12",
     "@angular/compiler": "^9.1.12",

frontend/src/app/app.module.ts

@@ -16,6 +16,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import { NotificationsService } from './services/notifications.service';
 import { AnswersService } from './services/answers.service';
 import { ModalModule } from 'ngx-bootstrap/modal';
+import {FormsService} from './services/forms.service';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
   return new TranslateHttpLoader(httpClient);
@@ -44,7 +45,8 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
   providers: [
     ObserversService,
     NotificationsService,
-    AnswersService
+    AnswersService,
+    FormsService
   ],
 
   bootstrap: [AppComponent]

frontend/src/app/components/answer/answer-details/answer-details.component.html

@@ -12,9 +12,9 @@
         <app-answer-extra-questions *ngIf="!answerState.answerExtraError" [answerExtra]="answerState?.answerExtra">
         </app-answer-extra-questions>
         <tabset>
-          <tab *ngFor="let form of formState.items">
+          <tab *ngFor="let form of formState.items" (selectTab)="onTabSelected(form)">
             <ng-template tabHeading>{{form.description}}</ng-template>
-            <app-answer-form-list [notes]="formNotes(form.idFormular)" [form]="form"
+            <app-answer-form-list [notes]="formNotes(form.id)" [form]="getDataForForm(form)"
                                   [completedQuestions]="formAnswers()">
             </app-answer-form-list>
           </tab>

frontend/src/app/components/answer/answer-details/answer-details.component.ts

@@ -8,6 +8,10 @@ import {AnswerState} from '../../../store/answer/answer.reducer';
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import * as _ from 'lodash';
 import {CompletedQuestion} from '../../../models/completed.question.model';
+import {TabDirective} from 'ngx-bootstrap/tabs';
+import {FormDetails} from '../../../models/form.info.model';
+import {FullyLoadFormAction} from '../../../store/form/form.actions';
+import {Form} from '../../../models/form.model';
 
 @Component({
   selector: 'app-answer-details',
@@ -60,15 +64,35 @@ export class AnswerDetailsComponent implements OnInit, OnDestroy {
 
     this.subs = [
       this.store.select(s => s.answer).subscribe(s => this.answerState = s),
-      this.store.select(s => s.form).subscribe(s => this.formState = s),
+      this.store.select(s => s.form).subscribe(s => {
+        this.formState = s;
+        if (s.items.length > 0) {
+          this.onTabSelected(s.items[0]);
+        }
+      }),
       this.store.select(s => s.note).subscribe(s => this.noteState = s)
     ];
   }
+
   ngOnDestroy() {
     _.map(this.subs, sub => sub.unsubscribe());
   }
 
   retry() {
     this.store.dispatch(new LoadAnswerDetailsAction(this.answerState.observerId, this.answerState.sectionId));
   }
+
+  onTabSelected(form: FormDetails) {
+    // if the form is already loaded don't launch another action
+    if (this.formState.fullyLoaded[form.id]) {
+      return ;
+    }
+
+    this.store.dispatch(new FullyLoadFormAction(form.id));
+  }
+
+  getDataForForm(form: FormDetails): Form {
+    const fullyLoaded = this.formState.fullyLoaded[form.id];
+    return fullyLoaded ? fullyLoaded : Form.fromMetaData(form);
+  }
 }

frontend/src/app/components/answer/answer-form-list/answer-form-list.component.html

@@ -1,4 +1,4 @@
-<div *ngFor="let section of form.sections">
+<div *ngFor="let section of form.formSections">
     <h4>{{section.description}}</h4>
     <div class="questions frow gutters column-start" style="margin-left:5px">
         <div *ngFor="let question of section.questions;let isLast = last" style="margin-top:15px;width:100%">

frontend/src/app/components/answer/answer-form-list/answer-form-list.component.ts

@@ -1,10 +1,10 @@
-import { Note } from '../../../models/note.model';
-import { AnswerThread } from '../../../models/answer.thread.model';
-import { BaseQuestion } from '../../../models/base.question.model';
-import { CompletedQuestion } from '../../../models/completed.question.model';
-import { Form } from '../../../models/form.model';
-import { Component, Input, OnInit } from '@angular/core';
+import {Note} from '../../../models/note.model';
+import {BaseQuestion} from '../../../models/base.question.model';
+import {CompletedQuestion} from '../../../models/completed.question.model';
+import {Component, Input, OnInit} from '@angular/core';
 import * as _ from 'lodash';
+import {FormDetails} from '../../../models/form.info.model';
+import {Form} from '../../../models/form.model';
 
 @Component({
   selector: 'app-answer-form-list',
@@ -26,15 +26,14 @@ export class AnswerFormListComponent implements OnInit {
     return _.find(this.completedQuestions, value => value.id === question.id);
   }
   notesForQuestion(question: BaseQuestion) {
-    if (!this.notes || !this.notes.length){
+    if (!this.notes || !this.notes.length) {
       return undefined;
     }
     return this.notes.filter(note => note.questionId === question.id);
   }
 
   constructor() { }
 
-
   ngOnInit() {
 
   }

frontend/src/app/components/components.module.ts

@@ -19,6 +19,12 @@ import { OberverRowComponent } from './observers/oberver-row/oberver-row.compone
 import { ObserverProfileComponent } from './observers/observer-profile/observer-profile.component';
 import { NotificationsComponent } from './notifications/notifications.component';
 import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
+import {FormCreateComponent} from './forms/form-create/form-create.component';
+import {SectionComponent} from './forms/section/section.component';
+import {QuestionComponent} from './forms/question/question.component';
+import {OptionComponent} from './forms/option/option.component';
+import {FormsComponent} from './forms/forms.component';
+import {DragDropModule} from '@angular/cdk/drag-drop';
 
 export let components = [
     AnswerComponent,
@@ -32,19 +38,28 @@ export let components = [
     ObserverCardComponent,
     OberverRowComponent,
     ObserverProfileComponent,
+    FormsComponent,
+    FormCreateComponent,
+    SectionComponent,
+    QuestionComponent,
+    OptionComponent,
     HeaderComponent,
     StatisticsComponent,
     StatisticsCardComponent,
     StatisticsDetailsComponent,
     StatisticsValueComponent,
     NotificationsComponent,
-    LoginComponent
+    LoginComponent,
 ];
 
 @NgModule({
     declarations: components,
     exports: components,
-    imports: [SharedModule, NgMultiSelectDropDownModule.forRoot()]
+    imports: [
+      SharedModule,
+      NgMultiSelectDropDownModule.forRoot(),
+      DragDropModule
+    ]
 })
 export  class ComponentsModule {
 

frontend/src/app/components/forms/form-create/form-create.component.html

@@ -0,0 +1,64 @@
+<div class="container-fluid form-create">
+  <div class="back-button" (click)="onBackPressed()">&#8592; {{ 'BACK' | translate}}</div>
+
+  <div class="header-row">
+    <span class="header-text col-md-2">{{'FORM_EDIT' | translate }}</span>
+    <div class="buttons-pane">
+      <button class="btn-secondary btn" (click)="saveForm()">{{'FORM_SAVE_DRAFT' | translate}}</button>
+      <button class="btn-primary btn" (click)="saveAndPublishForm()">{{'FORM_PUBLISH' | translate}}</button>
+    </div>
+  </div>
+
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <form [formGroup]="formDetailsFormGroup">
+        <div class="col-md-6">
+          <div class="form-labeled-field">
+            <div>
+              <span>{{'FORM_TITLE' | translate}}</span>
+            </div>
+            <div>
+              <input class="form-control" formControlName="description" placeholder="{{'FORM_TITLE_PLACEHOLDER' | translate}}">
+            </div>
+          </div>
+          <div class="form-labeled-field">
+            <div>
+              <span>{{'FORM_CODE' | translate}}</span>
+            </div>
+            <div>
+              <input class="form-control" formControlName="code" placeholder="{{'FORM_CODE_PLACEHOLDER' | translate}}">
+            </div>
+          </div>
+          <div class="form-labeled-field-checkbox">
+            <div class="checkbox-label">
+              <span>{{'FORM_ONLY_DIASPORA' | translate}}</span>
+            </div>
+            <div class="checkbox-field">
+              <input type="checkbox" class="form-control" formControlName="diaspora">
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6">
+  <!--      According to the design, this field should be here, but for now it has no correspondence in the model.-->
+
+  <!--        <div>-->
+  <!--          <span>{{'FORM_DESCRIPTION' | translate}}</span>-->
+  <!--        </div>-->
+  <!--        <div>-->
+  <!--          <textarea rows="4" class="form-control" [(ngModel)]="form.description" placeholder="{{'FORM_DESCRIPTION_PLACEHOLDER' | translate}}"></textarea>-->
+  <!--        </div>-->
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div class="section-list" cdkDropList (cdkDropListDropped)="onReorder($event)">
+    <div *ngFor="let section of sectionFormGroupsArray; let i = index" cdkDrag class="section">
+      <app-section [sectionFormGroup]="section"
+                   (sectionDeleteEventEmitter)="onSectionDelete(i)">
+      </app-section>
+    </div>
+  </div>
+
+  <div class="add-section-button" (click)="addFormSection()">+ {{'SECTION_ADD' | translate}}</div>
+</div>

frontend/src/app/components/forms/form-create/form-create.component.scss

@@ -0,0 +1,48 @@
+.form-create {
+  .back-button {
+    font-weight: bold;
+    cursor: pointer;
+    margin-bottom: 1.2em;
+  }
+
+  .add-section-button {
+    color: rebeccapurple;
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .form-labeled-field {
+    margin-bottom: 10px;
+
+    &-checkbox {
+      @extend .form-labeled-field;
+
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .checkbox-label {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+      }
+
+      .checkbox-field {
+        flex-basis: 16px;
+      }
+    }
+  }
+
+  .header-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 20px;
+
+    .header-text {
+      margin: auto 0;
+      font-size: larger;
+      font-weight: bold;
+    }
+  }
+}

frontend/src/app/components/forms/form-create/form-create.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormCreateComponent } from './form-create.component';
+
+describe('FormCreateComponent', () => {
+  let component: FormCreateComponent;
+  let fixture: ComponentFixture<FormCreateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FormCreateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});