Merge GT-1968-update-publishing-status into staging

src/app/components/multiple-draft-generator/multiple-draft-generator.component.css

@@ -7,3 +7,11 @@
 .toggle-drafts label.btn {
   flex: 0 1 50%;
 }
+
+.translation-btn {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 350px;
+  margin: 0 auto 8px;
+}

src/app/components/multiple-draft-generator/multiple-draft-generator.component.html

@@ -1,57 +1,54 @@
 <div class="modal-body">
   <div class="btn-group btn-group-toggle toggle-drafts" data-toggle="buttons">
     <label
-      class="btn {{
-        languageType === 'published' ? 'btn-success' : 'btn-secondary'
+      class="btn btn-success {{
+        actionType === 'publish' ? 'btn-success' : 'btn-outline-success'
       }}"
+      (click)="switchActionType('publish')"
     >
-      <input
-        type="radio"
-        name="languageType"
-        value="published"
-        [(ngModel)]="languageType"
-        autocomplete="off"
-        checked
-      />
-      Pubblished Languages
+      Publish Languages
     </label>
     <label
       class="btn {{
-        languageType === 'drafts' ? 'btn-success' : 'btn-secondary'
+        actionType === 'createDrafts'
+          ? 'btn-secondary'
+          : 'btn-outline-secondary'
       }}"
+      (click)="switchActionType('createDrafts')"
     >
-      <input
-        type="radio"
-        name="languageType"
-        value="drafts"
-        [(ngModel)]="languageType"
-        autocomplete="off"
-      />
-      Languages with a Draft
+      Generate Drafts
     </label>
   </div>
 
   <div *ngFor="let translation of resource['latest-drafts-translations']">
     <label
-      class="btn-secondary btn-block"
+      class="btn-outline-secondary btn-block translation-btn"
       ngbButtonLabel
       *ngIf="
-        (languageType === 'published' && translation['is-published']) ||
-        (languageType === 'drafts' && !translation['is_published'])
+        actionType === 'publish' ||
+        (actionType === 'createDrafts' && translation['is-published'])
       "
     >
-      <input
-        type="checkbox"
-        ngbButton
-        [(ngModel)]="translation.generateDraft"
-      />
-      {{ translation.language.name }}
+      <div class="translation-btn-text">
+        <input
+          type="checkbox"
+          ngbButton
+          [(ngModel)]="translation.selectedForAction"
+        />
+        {{ translation.language.name }}
+      </div>
+      <admin-translation-version-badge [translation]="translation">
+      </admin-translation-version-badge>
     </label>
   </div>
   <br />
 
-  <ngb-alert type="success" [dismissible]="false" *ngIf="sucessfulMessage">
-    {{ sucessfulMessage }}
+  <ngb-alert
+    type="success"
+    [dismissible]="true"
+    *ngFor="let successMessage of sucessfulMessages"
+  >
+    {{ successMessage }}
   </ngb-alert>
   <ngb-alert type="info" [dismissible]="false" *ngIf="alertMessage">
     {{ alertMessage }}
@@ -89,7 +86,7 @@
       (click)="showConfirmAlert()"
       [disabled]="disableButtons"
     >
-      {{ languageType === 'published' ? 'Generate drafts' : 'Publish drafts' }}
+      {{ actionType === 'publish' ? 'Publish' : 'Generate drafts' }}
     </button>
   </div>
 </div>

src/app/components/multiple-draft-generator/multiple-draft-generator.component.spec.ts

@@ -22,7 +22,7 @@ describe('MultipleDraftGeneratorComponent', () => {
 
   const buildTranslation = (
     isPublished: boolean,
-    generateDraft: boolean,
+    selectedForAction: boolean,
     language: string,
   ) => {
     const l = new Language();
@@ -32,7 +32,7 @@ describe('MultipleDraftGeneratorComponent', () => {
     t.language = l;
     t.is_published = isPublished;
     t['is-published'] = isPublished;
-    t.generateDraft = generateDraft;
+    t.selectedForAction = selectedForAction;
     return t;
   };
 
@@ -61,7 +61,7 @@ describe('MultipleDraftGeneratorComponent', () => {
     const r = new Resource();
     r['latest-drafts-translations'] = translations;
     comp.resource = r;
-    comp.languageType = 'published';
+    comp.actionType = 'publish';
 
     fixture.detectChanges();
   });
@@ -80,7 +80,7 @@ describe('MultipleDraftGeneratorComponent', () => {
       By.directive(NgbAlert),
     );
     expect(alert.nativeElement.textContent).toContain(
-      `${comp.baseConfirmMessage} Chinese, French?`,
+      `Are you sure you want to generate a draft for these languages Chinese, French?`,
     );
   });
 });

src/app/components/multiple-draft-generator/multiple-draft-generator.component.ts

@@ -23,7 +23,7 @@ interface APICall {
   translation: Translation;
 }
 
-type LanguagesType = 'published' | 'drafts';
+type ActionType = 'publish' | 'createDrafts';
 
 @Component({
   selector: 'admin-multiple-draft-generator',
@@ -33,17 +33,15 @@ type LanguagesType = 'published' | 'drafts';
 export class MultipleDraftGeneratorComponent implements OnDestroy {
   resource: Resource;
   translations: Translation[];
-  languageType: LanguagesType = 'published';
+  actionType: ActionType = 'publish';
   confirmMessage: string;
   errorMessage: string[];
+  sucessfulMessages: string[];
   alertMessage: string;
   sucessfulMessage: string;
-  checkToEnsureDraftIsPublished: number;
+  checkToEnsureTranslationIsPublished: number;
   disableButtons: boolean;
 
-  readonly baseConfirmMessage =
-    'Are you sure you want to generate a draft for these languages:';
-
   constructor(
     private ngbActiveModal: NgbActiveModal,
     private draftService: DraftService,
@@ -52,35 +50,54 @@ export class MultipleDraftGeneratorComponent implements OnDestroy {
   ) {}
 
   ngOnDestroy(): void {
-    clearInterval(this.checkToEnsureDraftIsPublished);
+    clearInterval(this.checkToEnsureTranslationIsPublished);
   }
 
   renderMessage(type: MessageType, text: string, time?: number) {
     if (type === MessageType.error) {
       this.errorMessage = [text];
       return;
+    } else if (type === MessageType.success) {
+      this.sucessfulMessages = [text];
+    } else {
+      this[`${type}Message`] = text;
+      if (time) {
+        setTimeout(() => {
+          this[`${type}Message`] = '';
+        }, time);
+      }
     }
-    this[`${type}Message`] = text;
-    if (time) {
-      setTimeout(() => {
-        this[`${type}Message`] = '';
-      }, time);
-    }
+  }
+
+  switchActionType(type: ActionType) {
+    this.actionType = type;
+    this.translations = [];
+    this.confirmMessage = '';
+    this.sucessfulMessages = [];
+    this.alertMessage = '';
+    this.disableButtons = false;
+    this.resource['latest-drafts-translations'].forEach((translation) => {
+      delete translation.selectedForAction;
+    });
   }
 
   showConfirmAlert(): void {
     this.translations = this.resource['latest-drafts-translations'].filter(
-      (translation) => translation.generateDraft,
+      (translation) => translation.selectedForAction,
     );
     if (this.translations.length === 0) {
       return;
     }
 
-    const message = this.translations
+    const selectedTranslations = this.translations
       .map((translation) => translation.language.name)
       .join(', ');
 
-    this.confirmMessage = `${this.baseConfirmMessage} ${message}?`;
+    if (this.actionType === 'publish') {
+      this.confirmMessage = `Are you sure you want to publish these languages: ${selectedTranslations}?`;
+    } else {
+      this.confirmMessage = `Are you sure you want to generate a draft for these languages: ${selectedTranslations}?`;
+    }
   }
 
   async publishOrCreateDrafts(): Promise<void> {
@@ -91,28 +108,25 @@ export class MultipleDraftGeneratorComponent implements OnDestroy {
 
     // Define what promises we will call
     this.translations.forEach((translation) => {
-      if (translation['is-published'] && this.languageType === 'published') {
+      if (this.actionType === 'publish') {
         promises.push({
-          type: LanguageTypeEnum.draft,
+          type: LanguageTypeEnum.publish,
           translation,
         });
-      } else if (
-        !translation['is-published'] &&
-        this.languageType === 'drafts'
-      ) {
+      } else {
         promises.push({
-          type: LanguageTypeEnum.publish,
+          type: LanguageTypeEnum.draft,
           translation,
         });
       }
     });
 
     // Call promises
     if (promises.length) {
-      if (this.languageType === 'published') {
-        this.renderMessage(MessageType.alert, 'Creating drafts...');
+      if (this.actionType === 'publish') {
+        this.renderMessage(MessageType.success, 'Publishing translations...');
       } else {
-        this.renderMessage(MessageType.success, 'Publishing drafts...');
+        this.renderMessage(MessageType.alert, 'Creating drafts...');
       }
 
       const results: PromisePayload[] = await Promise.all(
@@ -166,7 +180,19 @@ export class MultipleDraftGeneratorComponent implements OnDestroy {
         });
         this.disableButtons = false;
       } else {
-        if (this.languageType === 'published') {
+        if (this.actionType === 'publish') {
+          const publishingErrors = results.filter(
+            (result) => result.value[0]['publishing-errors'],
+          );
+          if (publishingErrors.length) {
+            publishingErrors.forEach((publishingError) => {
+              this.errorMessage = [...this.errorMessage, publishingError.error];
+            });
+          }
+          this.checkToEnsureTranslationIsPublished = window.setInterval(() => {
+            this.isPublished();
+          }, 5000);
+        } else {
           this.renderMessage(MessageType.alert, '');
           this.renderMessage(
             MessageType.success,
@@ -183,50 +209,56 @@ export class MultipleDraftGeneratorComponent implements OnDestroy {
           setTimeout(() => {
             this.renderMessage(MessageType.success, '');
           }, 5000);
-        } else {
-          const publishingErrors = results.filter(
-            (result) => result.value[0]['publishing-errors'],
-          );
-          if (publishingErrors.length) {
-            publishingErrors.forEach((publishingError) => {
-              this.errorMessage = [...this.errorMessage, publishingError.error];
-            });
-          }
-          this.checkToEnsureDraftIsPublished = window.setInterval(() => {
-            this.isDraftPublished();
-          }, 5000);
         }
       }
     }
   }
 
-  isDraftPublished() {
+  isPublished() {
+    this.renderMessage(MessageType.success, 'Publishing translations...');
     this.resourceService
-      .getResources('latest-drafts-translations')
-      .then((resources) => {
-        const resource = resources.find((r) => r.id === this.resource.id);
-        let numberPubblished = 0;
+      .getResource(this.resource.id, 'latest-drafts-translations')
+      .then((resource) => {
+        let numberpublished = 0;
         this.translations.forEach((translation) => {
           const updatedTranslation = resource[
             'latest-drafts-translations'
-          ].find((t) => t.id === translation.id);
-          if (updatedTranslation) {
-            numberPubblished++;
+          ].find(
+            (draftTranslation) =>
+              draftTranslation.language.id === translation.language.id,
+          );
+          if (updatedTranslation['is-published']) {
+            numberpublished++;
+            this.sucessfulMessages = [
+              ...this.sucessfulMessages,
+              `${translation.language.name} version ${updatedTranslation.version} has been published`,
+            ];
+          }
+          if (updatedTranslation['publishing-errors']) {
+            clearInterval(this.checkToEnsureTranslationIsPublished);
+            this.errorMessage = [
+              ...this.errorMessage,
+              updatedTranslation['publishing-errors'],
+            ];
+            this.disableButtons = false;
           }
         });
 
-        if (numberPubblished === this.translations.length) {
-          clearInterval(this.checkToEnsureDraftIsPublished);
+        if (numberpublished === this.translations.length) {
+          clearInterval(this.checkToEnsureTranslationIsPublished);
           this.renderMessage(
             MessageType.success,
-            'Drafts are successfully published.',
+            'All Languages are successfully published.',
           );
           this.disableButtons = false;
           this.setResourceAndLoadTranslations(resource);
         }
       })
       .catch((err) => {
         console.log('ERROR', err);
+        clearInterval(this.checkToEnsureTranslationIsPublished);
+        this.errorMessage = [...this.errorMessage, err];
+        this.disableButtons = false;
       });
   }