Merge pull request #1693 from citizenos/#1684

#1684

src/app/ideation/components/edit-idea/edit-idea.component.html

@@ -50,7 +50,7 @@
 
           <div class="image" *ngFor="let image of newImages; index as index">
             <div class="image_data">
-              <img [src]="image.link" />
+              <img [src]="image.link" [alt]="image.name"/>
               <a class="name">{{image.name}}</a>
             </div>
             <button class="btn_small_plain icon" (click)="removeNewImage(index)">
@@ -65,7 +65,7 @@
           </div>
           <div class="image" *ngFor="let image of images; index as index">
             <div class="image_data">
-              <img [src]="image.link" />
+              <img [src]="image.link" [alt]="image.name" />
               <a class="name">{{image.name}}</a>
             </div>
             <button class="btn_small_plain icon" (click)="removeImage(image, index)">

src/app/ideation/components/ideation-create/ideation-create.component.ts

@@ -1,9 +1,9 @@
 import { trigger, state, style } from '@angular/animations';
-import { Component, Inject, ChangeDetectorRef, OnInit } from '@angular/core';
+import { Component, Inject, ChangeDetectorRef } from '@angular/core';
 import { DialogService } from 'src/app/shared/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { map, tap, Observable, take, switchMap, BehaviorSubject, Subject } from 'rxjs';
+import { map, tap, Observable, take, switchMap, Subject } from 'rxjs';
 import { Topic } from 'src/app/interfaces/topic';
 import { AppService } from '@services/app.service';
 import { ConfigService } from '@services/config.service';
@@ -23,6 +23,7 @@ import { TopicFormComponent } from 'src/app/topic/components/topic-form/topic-fo
 import { BlockNavigationIfChange } from 'src/app/shared/pending-changes.guard';
 import { TopicDiscussionService } from '@services/topic-discussion.service';
 import { TopicSettingsDisabledDialogComponent } from 'src/app/topic/components/topic-settings-disabled-dialog/topic-settings-disabled-dialog.component';
+import { TopicSettingsLockedComponent } from 'src/app/topic/components/topic-settings-locked/topic-settings-locked.component';
 
 @Component({
   selector: 'app-ideation-create',
@@ -97,9 +98,9 @@ export class IdeationCreateComponent extends TopicFormComponent implements Block
     translate: TranslateService,
     cd: ChangeDetectorRef,
     @Inject(DomSanitizer) override sanitizer: DomSanitizer,
-    private app: AppService,
-    private TopicIdeationService: TopicIdeationService,
-    private config: ConfigService) {
+    private readonly app: AppService,
+    private readonly TopicIdeationService: TopicIdeationService,
+    private readonly config: ConfigService) {
     super(dialog, route, router, UploadService, Notification, TopicService, GroupService, GroupMemberTopicService, TopicMemberGroupService, TopicMemberUserService, TopicInviteUserService, TopicAttachmentService, TopicDiscussionService, translate, cd, sanitizer)
     this.app.darkNav = true;
     this.hasUnsavedChanges = new Subject();
@@ -121,19 +122,28 @@ export class IdeationCreateComponent extends TopicFormComponent implements Block
         }
         return fragment
       }), tap((fragment) => {
-        if (fragment === 'info' && !this.TopicService.canEditDescription(<Topic>this.topic)) {
+        if (fragment === 'ideation_system' && !this.TopicService.canEditDescription(this.topic)) {
+          const infoDialog = dialog.open(TopicSettingsLockedComponent);
+          infoDialog.afterClosed().subscribe(() => {
+            if (this.TopicService.canDelete(this.topic)) {
+              this.selectTab('settings')
+            } else {
+              this.selectTab('preview')
+            }
+          });
+        } else if (fragment === 'info' && !this.TopicService.canEditDescription(this.topic)) {
           const infoDialog = dialog.open(TopicEditDisabledDialogComponent);
           infoDialog.afterClosed().subscribe(() => {
             this.selectTab('settings')
           });
-        } else if ((fragment === 'settings' || fragment === 'ideation_system') && !this.TopicService.canDelete(<Topic>this.topic)) {
+        } else if ((fragment === 'settings' || fragment === 'ideation_system') && !this.TopicService.canDelete(this.topic)) {
           const infoDialog = this.dialog.open(TopicSettingsDisabledDialogComponent);
           infoDialog.afterClosed().subscribe(() => {
             this.selectTab('info')
           });
         }
       }));
-    // app.createNewTopic();
+
     if (router.url.indexOf('/edit/') > -1) {
       this.isnew = false;
     }

src/app/services/topic.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ApiResponse } from 'src/app/interfaces/apiResponse';
 import { LocationService } from './location.service';
-import { Observable, switchMap, map, tap, of, take, BehaviorSubject, exhaustMap, shareReplay } from 'rxjs';
+import { Observable, switchMap, map, of, take, BehaviorSubject, exhaustMap, shareReplay } from 'rxjs';
 import { Topic } from 'src/app/interfaces/topic';
 import { AuthService } from './auth.service';
 import { DialogService } from 'src/app/shared/dialog';
@@ -67,9 +67,9 @@ export class TopicService {
   };
   CATEGORIES_COUNT_MAX = 3;
 
-  private loadTopic$ = new BehaviorSubject<void>(undefined);
+  private readonly loadTopic$ = new BehaviorSubject<void>(undefined);
 
-  constructor(private dialog: DialogService, private Location: LocationService, private http: HttpClient, private Auth: AuthService, private router: Router) { }
+  constructor(private readonly dialog: DialogService, private readonly Location: LocationService, private readonly http: HttpClient, private readonly Auth: AuthService, private readonly router: Router) { }
 
   loadTopic(id: string, params?: { [key: string]: string | boolean }) {
     return this.loadTopic$.pipe(
@@ -225,7 +225,7 @@ export class TopicService {
   };
 
   canUpdate(topic: Topic) {
-    return (topic && topic.permission && topic.permission.level === this.LEVELS.admin && topic.status !== this.STATUSES.closed);
+    return (topic?.permission && topic.permission.level === this.LEVELS.admin && topic.status !== this.STATUSES.closed);
   };
 
   changeState(topic: Topic, state: string, stateSuccess?: string) {
@@ -315,15 +315,15 @@ export class TopicService {
    *
    */
   canEditDescription(topic: Topic) {
-    return this.canEdit(topic) && topic.status === this.STATUSES.ideation || topic.status === this.STATUSES.inProgress || topic.status === this.STATUSES.draft;
+    return this.canEdit(topic) && [this.STATUSES.ideation, this.STATUSES.inProgress, this.STATUSES.draft].indexOf(topic.status) > -1;
   };
 
   canDelete(topic: Topic) {
     return (topic && topic.permission?.level === this.LEVELS.admin);
   };
 
   canSendToFollowUp(topic: Topic) {
-    return this.canUpdate(topic) && topic.vote && topic.vote.id && topic.status !== this.STATUSES.followUp;
+    return this.canUpdate(topic) && topic.vote?.id && topic.status !== this.STATUSES.followUp;
   };
 
   canSendToVote(topic: Topic) {

src/app/topic/components/topic-edit-disabled-dialog/topic-edit-disabled-dialog.component.html

@@ -52,7 +52,6 @@
       <div class="button_wrap">
         <button class="btn_medium_submit" dialog-close translate="MODALS.TOPIC_EDIT_DISABLED_BTN_SETTINGS">
         </button>
-        <!--a [dialog-close]="true" translate="MODALS.TOPIC_EDIT_DISABLED_LNK_CANCEL"></!--a-->
       </div>
     </div>
   </div>

src/app/topic/components/topic-edit-disabled-dialog/topic-edit-disabled-dialog.component.spec.ts

@@ -1,14 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TopicEditDisabledDialogComponent } from './topic-edit-disabled-dialog.component';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
 
 describe('TopicEditDisabledDialogComponent', () => {
   let component: TopicEditDisabledDialogComponent;
   let fixture: ComponentFixture<TopicEditDisabledDialogComponent>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TopicEditDisabledDialogComponent]
+      declarations: [TopicEditDisabledDialogComponent],
+      imports: [TranslateModule.forRoot(), TranslatePipe]
     });
     fixture = TestBed.createComponent(TopicEditDisabledDialogComponent);
     component = fixture.componentInstance;

src/app/topic/components/topic-form/topic-form.component.ts

@@ -25,6 +25,8 @@ import { Attachment } from 'src/app/interfaces/attachment';
 import { TopicAttachmentService } from '@services/topic-attachment.service';
 import { GroupMemberTopicService } from '@services/group-member-topic.service';
 import { TopicDiscussionService } from '@services/topic-discussion.service';
+import { TopicEditDisabledDialogComponent } from '../topic-edit-disabled-dialog/topic-edit-disabled-dialog.component';
+import { TopicSettingsLockedComponent } from '../topic-settings-locked/topic-settings-locked.component';
 
 @Component({
   selector: 'topic-form',
@@ -80,11 +82,11 @@ export class TopicFormComponent {
       } else {
         const contentChilds = content.nativeElement.children[2]?.children;
         let h = 0;
-        for (let i = 0; i < contentChilds.length; i++) {
-          h += contentChilds[i].offsetHeight;
+        for (const child of contentChilds) {
+          h += child.offsetHeight;
           if (h >= 320) {
             this.readMoreButton.next(true);
-            i = contentChilds.length;
+            break;
           }
         }
       }
@@ -122,7 +124,7 @@ export class TopicFormComponent {
   groups$: Observable<TopicMemberGroup[] | any[]> = of([]);
   groupsList = <TopicMemberGroup[]>[];
   loadMembers$ = new BehaviorSubject<void>(undefined);
-  members$: Observable<any[] | any[]> = of([]);
+  members$: Observable<any[]> = of([]);
   loadInvite$ = new BehaviorSubject<void>(undefined);
   invites$: Observable<any[]> = of([]);
   topicGroups = <TopicMemberGroup[]>[];
@@ -231,7 +233,26 @@ export class TopicFormComponent {
         return fragment
       }
       ), tap((fragment) => {
-        if (fragment === 'settings' && !this.TopicService.canDelete(<Topic>this.topic)) {
+        if (fragment === 'discussion' && !this.TopicService.canEditDescription(this.topic)) {
+          const infoDialog = dialog.open(TopicSettingsLockedComponent);
+          infoDialog.afterClosed().subscribe(() => {
+            if (this.TopicService.canDelete(this.topic)) {
+              this.selectTab('settings')
+            } else {
+              this.selectTab('preview')
+            }
+          });
+        }
+        else if (fragment === 'info' && !this.TopicService.canEditDescription(this.topic)) {
+          const infoDialog = dialog.open(TopicEditDisabledDialogComponent);
+          infoDialog.afterClosed().subscribe(() => {
+            if (this.TopicService.canDelete(this.topic)) {
+              this.selectTab('settings')
+            } else {
+              this.selectTab('preview')
+            }
+          });
+        } else if (fragment === 'settings' && !this.TopicService.canDelete(this.topic)) {
           const infoDialog = this.dialog.open(TopicSettingsDisabledDialogComponent);
           infoDialog.afterClosed().subscribe(() => {
             this.selectTab('info')
@@ -314,11 +335,7 @@ export class TopicFormComponent {
 
 
   isNextDisabled(tabSelected: string | void) {
-    if (tabSelected === 'preview' && !this.TopicService.canDelete(this.topic)) {
-      return true;
-    } else if (!this.topic.title || !this.topic.description) {
-      return true;
-    } else if (tabSelected === 'discussion' && !this.discussion.question) {
+    if ((tabSelected === 'preview' && !this.TopicService.canDelete(this.topic)) || !this.topic.title || !this.topic.description || (tabSelected === 'discussion' && !this.discussion.question)) {
       return true;
     }
 
@@ -492,7 +509,7 @@ export class TopicFormComponent {
 
   saveAsDraft() {
     if (this.topic.status === this.TopicService.STATUSES.draft) {
-      const updateTopic = Object.assign({}, this.topic);
+      const updateTopic = { ...this.topic };
       if (!updateTopic.intro?.length) {
         updateTopic.intro = null;
       }
@@ -545,9 +562,8 @@ export class TopicFormComponent {
 
   publish() {
     this.titleInput?.nativeElement?.parentNode.parentNode.classList.remove('error');
-    const isDraft = (this.topic.status === this.TopicService.STATUSES.draft);
     this.topic.status = this.TopicService.STATUSES.inProgress;
-    const updateTopic = Object.assign({}, this.topic);
+    const updateTopic = { ...this.topic };
     if (!updateTopic.intro?.length) {
       updateTopic.intro = null;
     }
@@ -600,7 +616,7 @@ export class TopicFormComponent {
   }
 
   createDiscussion(updateTopicStatus?: boolean) {
-    const createDiscussion: any = Object.assign({ topicId: this.topic.id, discussionId: this.discussion.id }, this.discussion);
+    const createDiscussion: any = { topicId: this.topic.id, discussionId: this.discussion.id, ...this.discussion };
     this.TopicDiscussionService.save(createDiscussion)
       .pipe(take(1))
       .subscribe({
@@ -609,7 +625,7 @@ export class TopicFormComponent {
           this.discussion = discussion;
           if (updateTopicStatus) {
             const isDraft = (this.topic.status === this.TopicService.STATUSES.draft);
-            const updateTopic = Object.assign({}, this.topic);
+            const updateTopic = { ...this.topic };
             updateTopic.status = this.TopicService.STATUSES.inProgress;
             this.TopicService.patch(updateTopic).pipe(take(1)).subscribe({
               next: (res) => {
@@ -643,7 +659,7 @@ export class TopicFormComponent {
 
 
   updateDiscussion(updateTopicStatus?: boolean) {
-    const updateDiscussion = Object.assign({ topicId: this.topic.id, discussionId: this.discussion.id }, this.discussion);
+    const updateDiscussion = { topicId: this.topic.id, discussionId: this.discussion.id , ...this.discussion};
     return this.TopicDiscussionService.update(updateDiscussion).pipe(take(1)).subscribe({
       next: () => {
         if (updateTopicStatus) {

src/app/topic/components/topic-settings-locked/topic-settings-locked.component.html

@@ -0,0 +1,58 @@
+<div class="overlay"></div>
+<div class="dialog_wrap">
+  <div id="notification_wrap_dialog" class="mobile_hidden">
+    <notification></notification>
+  </div>
+  <div class="dialog">
+    <div id="notification_wrap_dialog" class="mobile_show">
+      <notification></notification>
+    </div>
+    <div class="dialog_header">
+      <div class="header_with_icon">
+        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="40" height="40" rx="20" fill="#1168A8" />
+          <path
+            d="M23 11.5292C23 12.926 21.9255 14.0583 20.6 14.0583C19.2745 14.0583 18 12.926 18 11.5292C18 10.1323 19.2745 9 20.6 9C21.9255 9 23 10.1323 23 11.5292Z"
+            fill="white" />
+          <path
+            d="M17.3359 16.5357L22.8319 15.8098L20.4295 27.7096C20.2591 28.5695 20.4991 29.0576 21.1591 29.0576C21.6247 29.0576 22.3255 28.8806 22.8055 28.4354L22.5943 29.4876C21.9055 30.3626 20.3863 31 19.0783 31C17.3911 31 16.6735 29.9327 17.1391 27.664L18.9103 18.8929C19.0639 18.1518 18.9247 17.8837 18.2191 17.7067L17.1391 17.4968L17.3359 16.5357Z"
+            fill="white" />
+        </svg>
+        <div class="small_heading link title" translate="MODALS.TOPIC_SETTINGS_LOCKED_HEADING"></div>
+      </div>
+    </div>
+    <div class="dialog_content no_footer">
+      <div class="delete_info_text" translate="MODALS.TOPIC_SETTINGS_LOCKED_DESCRIPTION"></div>
+      <div class="dialog_info_wrap">
+        <div class="dialog_info">
+          <div class="bold" translate="MODALS.TOPIC_SETTINGS_LOCKED_WHY"></div>
+          <div translate="MODALS.TOPIC_SETTINGS_LOCKED_WHY_DESCRIPTION"></div>
+        </div>
+      </div>
+
+      <div class="notification_inline info">
+        <div class="icon_notification">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="24" height="24" rx="12" fill="#5C9CD0" />
+            <path
+              d="M13.8002 6.91789C13.8002 7.75599 13.1555 8.4354 12.3602 8.4354C11.5649 8.4354 10.8002 7.75599 10.8002 6.91789C10.8002 6.0798 11.5649 5.40039 12.3602 5.40039C13.1555 5.40039 13.8002 6.0798 13.8002 6.91789Z"
+              fill="white" />
+            <path
+              d="M10.4017 9.9218L13.6993 9.48627L12.2579 16.6261C12.1556 17.1421 12.2996 17.4349 12.6956 17.4349C12.975 17.4349 13.3955 17.3287 13.6835 17.0616L13.5568 17.6929C13.1435 18.218 12.232 18.6004 11.4472 18.6004C10.4348 18.6004 10.0043 17.96 10.2836 16.5988L11.3464 11.3361C11.4385 10.8915 11.355 10.7306 10.9316 10.6244L10.2836 10.4984L10.4017 9.9218Z"
+              fill="white" />
+          </svg>
+        </div>
+        <div class="message">
+          <div class="content">
+            <div class="content_description" [innerHTML]="'MODALS.TOPIC_SETTINGS_LOCKED_INFO' | translate"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="button_wrap">
+        <button class="btn_medium_submit" dialog-close translate="MODALS.TOPIC_SETTINGS_LOCKED_BTN_SETTINGS">
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/topic/components/topic-settings-locked/topic-settings-locked.component.scss

@@ -0,0 +1,29 @@
+.dialog {
+  max-width: 560px;
+
+  .header_with_icon {
+    gap: 16px;
+    padding-bottom: 24px;
+  }
+
+  .dialog_content {
+    gap: 24px;
+  }
+
+  .dialog_info {
+    background-color: var(--color-argument-info-light);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    padding: 16px;
+    gap: 16px;
+
+    .bold {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 16px;
+    }
+  }
+}