Support creating drafts of policies

web/app/admin/terms/new/new.component.html

@@ -2,36 +2,7 @@
     <my-spinner></my-spinner>
 </div>
 <div *ngIf="!isLoading">
-    <my-ibox boxTitle="Policy information">
+    <my-ibox *ngFor="let code of chosenLanguageCodes">
-        <div class="my-ibox-content">
-            <label class="label-block">
-                Name
-                <span class="text-muted ">The name of your policy, in English. Example: "Terms of Service"</span>
-                <input type="text" class="form-control"
-                       placeholder="My Policy" (keyup)="onNameKeyUp()"
-                       [(ngModel)]="languages['en'].name" [disabled]="isUpdating"/>
-            </label>
-            <label class="label-block">
-                Shortcode
-                <span class="text-muted ">This is automatically generated to give the policy a unique identifier.</span>
-                <input type="text" class="form-control"
-                       [(ngModel)]="shortcode" [disabled]="true"/>
-            </label>
-        </div>
-    </my-ibox>
-    <my-ibox>
-        <div class="my-ibox-title">
-            <h5>English version</h5>
-        </div>
-        <div class="my-ibox-content">
-            <label class="label-block">
-                Policy text
-                <span class="text-muted ">This is where you put your policy's content.</span>
-            </label>
-            <ckeditor [editor]="Editor" [(ngModel)]="languages['en'].text"></ckeditor>
-        </div>
-    </my-ibox>
-    <my-ibox *ngFor="let code of otherLanguageCodes">
         <div class="my-ibox-title">
             <h5>{{languages[code].langName}} version</h5>
         </div>
@@ -39,9 +10,7 @@
             <label class="label-block">
                 Name
                 <span class="text-muted ">The translated name of your policy</span>
-                <input type="text" class="form-control"
+                <input type="text" class="form-control" placeholder="My Policy" [(ngModel)]="languages[code].name" [disabled]="isUpdating"/>
-                       placeholder="My Policy"
-                       [(ngModel)]="languages[code].name" [disabled]="isUpdating"/>
             </label>
             <label class="label-block">
                 Policy text
@@ -50,16 +19,16 @@
             <ckeditor [editor]="Editor" [(ngModel)]="languages[code].text" [disabled]="isUpdating"></ckeditor>
         </div>
     </my-ibox>
-    <my-ibox [hasTitle]="false">
+<!--    <my-ibox [hasTitle]="false">-->
-        <div class="my-ibox-content buttons">
+<!--        <div class="my-ibox-content buttons">-->
-            <select [(ngModel)]="chosenLanguage" [disabled]="isUpdating" class="form-control form-control-sm">
+<!--            <select [(ngModel)]="chosenLanguage" [disabled]="isUpdating" class="form-control form-control-sm">-->
-                <option *ngFor="let lang of availableLanguages" [ngValue]="lang.code">{{lang.name}}</option>
+<!--                <option *ngFor="let lang of availableLanguages" [ngValue]="lang.code">{{lang.name}}</option>-->
-            </select>
+<!--            </select>-->
-            <button type="button" (click)="addLanguage()" title="save" class="btn btn-outline-success btn-sm">
+<!--            <button type="button" (click)="addLanguage()" title="save" class="btn btn-outline-success btn-sm">-->
-                <i class="fa fa-plus"></i> Add language
+<!--                <i class="fa fa-plus"></i> Add language-->
-            </button>
+<!--            </button>-->
-        </div>
+<!--        </div>-->
-    </my-ibox>
+<!--    </my-ibox>-->
     <my-ibox [hasTitle]="false">
         <div class="my-ibox-content buttons">
             <button type="button" (click)="create()" title="save" class="btn btn-primary btn-sm">

web/app/admin/terms/new/new.component.ts

@@ -5,28 +5,32 @@ import { ActivatedRoute, Router } from "@angular/router";
 import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import ISO6391 from "iso-639-1";
 
+interface ILanguage {
+    name: string,
+    text: string,
+    langName: string,
+    url: string,
+    isExternal: boolean,
+    externalUrl: string,
+}
+
 @Component({
     templateUrl: "./new.component.html",
     styleUrls: ["./new.component.scss"],
 })
 export class AdminNewTermsComponent implements OnInit {
 
+    // TODO: Multiple language support
+    // TODO: Support external URLs
+
     public Editor = ClassicEditor;
 
     public isLoading = true;
     public isUpdating = false;
-    public shortcode: string;
     public takenShortcodes: string[];
     public chosenLanguage: string = ISO6391.getAllCodes()[0];
     public languages: {
-        [languageCode: string]: {
+        [languageCode: string]: ILanguage;
-            name: string,
-            text: string,
-            langName: string,
-            url: string,
-            isExternal: boolean,
-            externalUrl: string,
-        }
     } = {
         "en": {
             name: "",
@@ -38,13 +42,13 @@ export class AdminNewTermsComponent implements OnInit {
         },
     };
 
-    public get otherLanguageCodes(): string[] {
+    public get chosenLanguageCodes(): string[] {
-        return Object.keys(this.languages).filter(c => c !== "en");
+        return Object.keys(this.languages);
     }
 
     public get availableLanguages(): { name: string, code: string }[] {
         return ISO6391.getAllCodes()
-            .filter(c => !this.otherLanguageCodes.includes(c))
+            .filter(c => !this.chosenLanguageCodes.includes(c))
             .map(c => {
                 return {code: c, name: ISO6391.getName(c)};
             });
@@ -66,18 +70,41 @@ export class AdminNewTermsComponent implements OnInit {
         });
     }
 
-    public onNameKeyUp() {
+    public async create() {
+        for (const languageCode in this.languages) {
+            if (this.languages[languageCode].name.trim().length <= 0) {
+                this.toaster.pop("warning", "Please enter a name for all policies");
+                return;
+            }
+            if (this.languages[languageCode].text.trim().length <= 0) {
+                this.toaster.pop("warning", "Please enter text for all policies");
+                return;
+            }
+        }
+
+        this.isUpdating = true;
+
         const startShortcode = this.languages['en'].name.toLowerCase().replace(/[^a-z0-9]/gi, '_');
         let shortcode = startShortcode;
         let i = 0;
         while (this.takenShortcodes.includes(shortcode)) {
             shortcode = `${startShortcode}_${++i}`;
         }
-        this.shortcode = shortcode;
-    }
 
-    public create() {
+        try {
-        this.router.navigate([".."], {relativeTo: this.activatedRoute});
+            await this.adminTerms.createDraft(shortcode, {
+                name: this.languages['en'].name,
+                text: this.languages['en'].text,
+                url: `${window.location.origin}/terms/${shortcode}/en/draft`,
+            });
+
+            this.toaster.pop("success", "Draft created");
+            this.router.navigate([".."], {relativeTo: this.activatedRoute});
+        } catch (e) {
+            console.error(e);
+            this.toaster.pop("error", "Error creating document");
+            this.isUpdating = false;
+        }
     }
 
     public addLanguage() {

web/app/shared/services/admin/admin-terms-api.service.ts

@@ -12,4 +12,8 @@ export class AdminTermsApiService extends AuthedApi {
     public getAllPolicies(): Promise<FE_TermsEditable[]> {
         return this.authedGet<FE_TermsEditable[]>("/api/v1/dimension/admin/terms/all").toPromise();
     }
+
+    public createDraft(shortcode: string, policyInfo: { name: string, text: string, url: string }): Promise<FE_TermsEditable> {
+        return this.authedPost<FE_TermsEditable>(`/api/v1/dimension/admin/terms/${shortcode}/draft`, policyInfo).toPromise();
+    }
 }