community: smoother services (Fixes #7821)

src/app/community/community.component.html

@@ -33,23 +33,23 @@ <h3 style="text-align: right; margin-right: 0.5rem;">
           </div>
         </mat-tab>
         <mat-tab i18n-label label="Services">
+          <b i18n>{ configuration.planetType, select, community {Community} nation {Nation} center {Earth}} Description</b>
           <ng-container *ngIf="!planetCode">
-            <button class="toggle-button" *planetAuthorizedRoles="''" (click)="openDescriptionDialog()" mat-stroked-button i18n>
-              { servicesDescriptionLabel, select, Edit {Edit} Add {Add}} { configuration.planetType, select, community {Community} nation {Nation} center {Earth}} Description
-            </button>
           </ng-container>
-          <planet-markdown *ngIf="team.description; else noTeamDesc" [content]="team.description || ''"></planet-markdown>
+          <p><planet-markdown *ngIf="team.description; else noTeamDesc" [content]="team.description || ''"></planet-markdown></p>
           <ng-template #noTeamDesc><p i18n>No description available.</p></ng-template>
+          <button class="toggle-button" *planetAuthorizedRoles="''" (click)="openDescriptionDialog()" mat-stroked-button i18n>
+            { servicesDescriptionLabel, select, Edit {Edit} Add {Add}} { configuration.planetType, select, community {Community} nation {Nation} center {Earth}} Description
+          </button>
+          <button (click)="confirmDeleteDescription()" mat-stroked-button>
+            <span i18n>Remove Description</span>
+          </button>
           <ng-container *ngIf="!planetCode">
             <div *planetAuthorizedRoles="''" class="action-buttons sticky-button">
-              <button (click)="openAddLinkDialog()" mat-stroked-button i18n>Add Link</button>
-              <button (click)="toggleDeleteMode()" [disabled]="links.length===0" mat-stroked-button>
-                <span *ngIf="!deleteMode" i18n>Remove Links</span>
-                <span *ngIf="deleteMode" i18n>Done Removing Links</span>
-              </button>
             </div>
           </ng-container>
           <ng-container>
+            <b i18n>{ configuration.planetType, select, community {Community} nation {Nation} center {Earth}} Links</b>
             <span *ngIf="links?.length === 0" i18n><p>No links available.</p></span>
             <mat-nav-list>
               <mat-list-item *ngFor="let link of links" [routerLink]="(link.teamType === 'sync' || !planetCode) ? link.route : []" i18n-matTooltip [matTooltip]="(link.teamType === 'sync' || !planetCode) ? '' : link.title + ' is only available on ' + configuration.name" [disableRipple]="link.teamType === 'local' && planetCode">
@@ -61,6 +61,11 @@ <h3 style="text-align: right; margin-right: 0.5rem;">
           <ng-template #noLinks>
             <p i18n>No links available.</p>
           </ng-template>
+          <button (click)="openAddLinkDialog()" mat-stroked-button i18n>Add Link</button>
+          <button (click)="toggleDeleteMode()" [disabled]="links.length===0" mat-stroked-button>
+            <span *ngIf="!deleteMode" i18n>Remove Links</span>
+            <span *ngIf="deleteMode" i18n>Done Removing Links</span>
+          </button>
         </mat-tab>
         <mat-tab *ngIf="configuration.planetType==='nation'" i18n-label label="Communities">
           <planet-community-list></planet-community-list>

src/app/community/community.component.ts

@@ -19,6 +19,7 @@ import { CustomValidators } from '../validators/custom-validators';
 import { environment } from '../../environments/environment';
 import { planetAndParentId } from '../manager-dashboard/reports/reports.utils';
 import { DeviceInfoService, DeviceType } from '../shared/device-info.service';
+import { FormBuilder } from '@angular/forms';
 import {
   DialogsAnnouncementComponent,
   DialogsAnnouncementSuccessComponent,
@@ -71,6 +72,7 @@ export class CommunityComponent implements OnInit, OnDestroy {
     private usersService: UsersService,
     private userStatusService: UserChallengeStatusService,
     private deviceInfoService: DeviceInfoService,
+    private formBuilder: FormBuilder
   ) {
     this.deviceType = this.deviceInfoService.getDeviceType();
   }
@@ -311,6 +313,32 @@ export class CommunityComponent implements OnInit, OnDestroy {
     });
   }
 
+  confirmDeleteDescription() {
+    const deleteDialog = this.dialog.open(DialogsPromptComponent, {
+      data: {
+        okClick: {
+          request: this.teamsService.updateTeam({ ...this.team, description: null }).pipe(
+            switchMap((updatedTeam) => {
+              this.team = updatedTeam;
+              this.servicesDescriptionLabel = 'Add';
+              return of(updatedTeam);
+            })
+          ),
+          onNext: () => {
+            this.planetMessageService.showMessage($localize`Description deleted successfully.`);
+            deleteDialog.close();
+          },
+          onError: () => {
+            this.planetMessageService.showAlert($localize`There was an error deleting the description.`);
+          }
+        },
+        changeType: 'delete',
+        type: 'description',
+        displayName: $localize`Community Description`
+      }
+    });
+  }
+
   toggleShowButton(data) {
     this.showNewsButton = data._id === 'root';
   }
@@ -351,25 +379,47 @@ export class CommunityComponent implements OnInit, OnDestroy {
   }
 
   openDescriptionDialog() {
-    const submitDescription = ({ description }) => {
-      this.teamsService.updateTeam({ ...this.team, description: description.text }).pipe(
-        finalize(() => this.dialogsLoadingService.stop())
-      ).subscribe(newTeam => {
-        const previousDescription = Boolean(this.team.description);
-        this.team = newTeam;
-        this.servicesDescriptionLabel = newTeam.description ? 'Edit' : 'Add';
-        const msg = newTeam.description
-      ? (previousDescription ? $localize`Description edited` : $localize`Description added`)
-      : $localize`Description deleted`;
-        this.dialogsFormService.closeDialogsForm();
-        this.planetMessageService.showMessage(msg);
-      });
-    };
+    const formGroup = this.formBuilder.group({
+      description: [ this.team.description || '', [ CustomValidators.requiredMarkdown ] ]
+    });
+
     this.dialogsFormService.openDialogsForm(
       this.team.description ? $localize`Edit Description` : $localize`Add Description`,
-      [ { name: 'description', placeholder: $localize`Description`, type: 'markdown', required: false, imageGroup: 'community' } ],
-      { description: this.team.description || '' },
-      { autoFocus: true, onSubmit: submitDescription }
+      [
+        {
+          name: 'description',
+          placeholder: $localize`Description`,
+          type: 'markdown',
+          required: true
+        }
+      ],
+      formGroup,
+      {
+        autoFocus: true,
+        onSubmit: ({ description }: { description: string }) => {
+          const trimmedDescription = description.trim();
+
+          if (!trimmedDescription) {
+            this.planetMessageService.showAlert($localize`Description cannot be empty.`);
+            return;
+          }
+
+          this.teamsService.updateTeam({ ...this.team, description: trimmedDescription }).pipe(
+            finalize(() => this.dialogsLoadingService.stop())
+          ).subscribe(newTeam => {
+            const previousDescription = !!this.team.description;
+            this.team = newTeam;
+            this.servicesDescriptionLabel = newTeam.description ? 'Edit' : 'Add';
+
+            const message = previousDescription
+              ? $localize`Description edited successfully.`
+              : $localize`Description added successfully.`;
+
+            this.dialogsFormService.closeDialogsForm();
+            this.planetMessageService.showMessage(message);
+          });
+        }
+      }
     );
   }