HELLODATA-1810 - small adjustments

kanton-bern · Nov 22, 2024 · 0ddeb6d · 0ddeb6d
1 parent 9c30c96
commit 0ddeb6d
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 66 deletions.
diff --git a/...p/pages/admin/announcements-management/announcement-edit/announcement-edit.component.html b/...p/pages/admin/announcements-management/announcement-edit/announcement-edit.component.html
@@ -83,48 +83,50 @@ <h5>{{ '@Announcement' | transloco }}</h5>
             </div>
           </ng-template>
           <div class="field grid">
-            <p-editor [formControl]="getMessage(language)" [style]="{ height: '725px' }">
-              <ng-template pTemplate="header">
-                 <span class="ql-formats">
-                    <select class="ql-header">
-                        <option value="1">Heading</option>
-                        <option value="2">Subheading</option>
-                        <option selected>Normal</option>
-                    </select>
-                    <select class="ql-font">
-                        <option selected>Sans Serif</option>
-                        <option value="serif">Serif</option>
-                        <option value="monospace">Monospace</option>
-                    </select>
-                </span>
-                <span class="ql-formats">
-                    <button aria-label="Bold" class="ql-bold" type="button"></button>
-                    <button aria-label="Italic" class="ql-italic" type="button"></button>
-                    <button aria-label="Underline" class="ql-underline" type="button"></button>
-                </span>
-                <span class="ql-formats">
-                    <select class="ql-color"></select>
-                    <select class="ql-background"></select>
-                </span>
-                <span class="ql-formats">
-                    <button aria-label="Ordered List" class="ql-list" type="button" value="ordered"></button>
-                    <button aria-label="Unordered List" class="ql-list" type="button" value="bullet"></button>
-                    <select class="ql-align">
-                        <option selected></option>
-                        <option value="center">center</option>
-                        <option value="right">right</option>
-                        <option value="justify">justify</option>
-                    </select>
-                </span>
-                <span class="ql-formats">
-                    <button aria-label="Insert Link" class="ql-link" type="button"></button>
-                    <button aria-label="Insert Code Block" class="ql-code-block" type="button"></button>
-                </span>
-                <span class="ql-formats">
-                    <button aria-label="Remove Styles" class="ql-clean" type="button"></button>
-                </span>
-              </ng-template>
-            </p-editor>
+            <div class="col-12 md:col-12">
+              <p-editor [formControl]="getMessage(language)" [style]="{ width: '100%' }">
+                <ng-template pTemplate="header">
+                   <span class="ql-formats">
+                      <select class="ql-header">
+                          <option value="1">Heading</option>
+                          <option value="2">Subheading</option>
+                          <option selected>Normal</option>
+                      </select>
+                      <select class="ql-font">
+                          <option selected>Sans Serif</option>
+                          <option value="serif">Serif</option>
+                          <option value="monospace">Monospace</option>
+                      </select>
+                  </span>
+                  <span class="ql-formats">
+                      <button aria-label="Bold" class="ql-bold" type="button"></button>
+                      <button aria-label="Italic" class="ql-italic" type="button"></button>
+                      <button aria-label="Underline" class="ql-underline" type="button"></button>
+                  </span>
+                  <span class="ql-formats">
+                      <select class="ql-color"></select>
+                      <select class="ql-background"></select>
+                  </span>
+                  <span class="ql-formats">
+                      <button aria-label="Ordered List" class="ql-list" type="button" value="ordered"></button>
+                      <button aria-label="Unordered List" class="ql-list" type="button" value="bullet"></button>
+                      <select class="ql-align">
+                          <option selected></option>
+                          <option value="center">center</option>
+                          <option value="right">right</option>
+                          <option value="justify">justify</option>
+                      </select>
+                  </span>
+                  <span class="ql-formats">
+                      <button aria-label="Insert Link" class="ql-link" type="button"></button>
+                      <button aria-label="Insert Code Block" class="ql-code-block" type="button"></button>
+                  </span>
+                  <span class="ql-formats">
+                      <button aria-label="Remove Styles" class="ql-clean" type="button"></button>
+                  </span>
+                </ng-template>
+              </p-editor>
+            </div>
           </div>
         </p-tabPanel>
       </ng-template>

diff --git a/.../hello-data-portal-ui/src/app/pages/admin/faq-management/faq-edit/faq-edit.component.html b/.../hello-data-portal-ui/src/app/pages/admin/faq-management/faq-edit/faq-edit.component.html
@@ -82,15 +82,13 @@ <h5>{{ '@Faq' | transloco }}</h5>
                 id="title"
                 type="text">
               <small *ngIf="getTitle(language)?.invalid && getTitle(language)?.dirty" class="p-error block">
-                {{ '@Value has minimum length' | transloco: {min: getTitle(language).errors?.['minlength']?.requiredLength} }}
+                {{ '@Value has minimum length' | transloco: {min: titleMinLenght} }}
               </small>
             </div>
           </div>
 
-          <p-editor
-            [formControl]="getMessage(language)"
-            [style]="{ height: '725px' }"
-            id="faqMessage">
+          <p-editor [formControl]="getMessage(language)"
+                    id="faqMessage">
           </p-editor>
         </p-tabPanel>
       </ng-template>

diff --git a/...al/hello-data-portal-ui/src/app/pages/admin/faq-management/faq-edit/faq-edit.component.ts b/...al/hello-data-portal-ui/src/app/pages/admin/faq-management/faq-edit/faq-edit.component.ts
@@ -56,6 +56,8 @@ export class FaqEditComponent extends BaseComponent implements OnInit, OnDestroy
   supportedLanguages$: Observable<string[]>;
   defaultLanguage$: Observable<string | null>;
   formValueChangedSub!: Subscription;
+  titleMinLenght = 3;
+  messageMinLength = 3;
 
   constructor(private store: Store<AppState>, private fb: FormBuilder, private translateService: TranslateService) {
     super();
@@ -117,7 +119,8 @@ export class FaqEditComponent extends BaseComponent implements OnInit, OnDestroy
   getTitle(language: string): FormControl {
     const languagesGroup = this.faqForm.get('languages') as FormGroup;
     const languageForm = languagesGroup.get(language) as FormGroup;
-    return languageForm.get('title') as FormControl;
+    const title = languageForm.get('title') as FormControl;
+    return title;
   }
 
   getHeaderNameWithStatus(language: string) {
@@ -168,8 +171,8 @@ export class FaqEditComponent extends BaseComponent implements OnInit, OnDestroy
             faqCpy.messages[language] = {title: '', message: ''}
           }
           languageFaqFormGroups[language] = this.fb.group({
-            title: [faqCpy?.messages?.[language]?.title || '', [Validators.required, Validators.minLength(3)]],
-            message: [faqCpy?.messages?.[language]?.message || '', [Validators.required, Validators.minLength(3)]],
+            title: [faqCpy?.messages?.[language]?.title || '', [Validators.required, Validators.minLength(this.titleMinLenght)]],
+            message: [faqCpy?.messages?.[language]?.message || '', [Validators.required, Validators.minLength(this.messageMinLength)]],
           });
         });
 

diff --git a/...ta-portal/hello-data-portal-ui/src/app/pages/admin/faq-management/faq-list.component.html b/...ta-portal/hello-data-portal-ui/src/app/pages/admin/faq-management/faq-list.component.html
@@ -1,5 +1,5 @@
 <h2 class="content-block">{{ '@Faq management' | transloco }}</h2>
-<div class="card" *ngIf="(selectedLanguage$ | async) as selectedLanguage">
+<div *ngIf="(selectedLanguage$ | async) as selectedLanguage" class="card">
   <p-toolbar styleClass="mb-4 gap-2">
     <ng-template pTemplate="left">
       <button (click)="createFaq()" class="p-button-success mr-2" icon="fas fa-circle-plus" id="createFaqButton"
@@ -39,8 +39,8 @@ <h2 class="content-block">{{ '@Faq management' | transloco }}</h2>
           <td *ngIf="faq.contextName">{{ faq.contextName }}</td>
           <td *ngIf="faq.contextName === null" class="font-italic">{{ '@All Data Domains' | transloco }}</td>
           <td>
-            <p-editor [ngModel]="getMessage(faq, selectedLanguage)" [disabled]="true" [readonly]="true"
-                      [style]="{ height: '320px' }">
+            <p-editor [disabled]="true" [ngModel]="getMessage(faq, selectedLanguage)" [readonly]="true"
+                      [style]="{ height: '320px' }" class="p-editor-readonly">
               <p-header hidden></p-header>
             </p-editor>
           </td>

diff --git a/...l/hello-data-portal-ui/src/app/pages/home/documentation/home-documentation.component.html b/...l/hello-data-portal-ui/src/app/pages/home/documentation/home-documentation.component.html
@@ -3,7 +3,7 @@
     <div *ngIf="(currentUserPermissions$ | async) as permissions">
       <div *ngIf="(documentation$ | async) as documentation">
         <p-editor [disabled]="true" [ngModel]="getText(documentation, selectedLanguage.code, defaultLanguage)"
-                  [readonly]="true">
+                  [readonly]="true" class="p-editor-readonly">
           <p-header hidden></p-header>
         </p-editor>
       </div>

diff --git a/hello-data-portal/hello-data-portal-ui/src/app/pages/home/faq/faq.component.html b/hello-data-portal/hello-data-portal-ui/src/app/pages/home/faq/faq.component.html
@@ -32,10 +32,10 @@
                 <ng-container *ngFor="let domainFaq of item.faqs">
                   <p-accordionTab header="{{ getTitle(domainFaq, selectedLanguage.code, defaultLanguage) }}"
                                   style="white-space: pre-wrap;">
-                    <p-editor [disabled]="true"
-                              [ngModel]="getMessage(domainFaq, selectedLanguage.code, defaultLanguage)"
+                    <p-editor [disabled]="true" [ngModel]="getMessage(domainFaq, selectedLanguage.code, defaultLanguage)"
                               [readonly]="true"
-                              [style]="{ height: '320px', 'white-space': 'pre-wrap' }">
+                              [style]="{ height: '320px', 'white-space': 'pre-wrap' }"
+                              class="p-editor-readonly">
                       <p-header hidden></p-header>
                     </p-editor>
                   </p-accordionTab>

diff --git a/...ta-portal-ui/src/app/pages/published-announcements/published-announcements.component.html b/...ta-portal-ui/src/app/pages/published-announcements/published-announcements.component.html
@@ -9,8 +9,8 @@
             </div>
             <div class="p-toolbar-group-center" style="width: 65%">
               <p-editor [disabled]="true" [ngModel]="getMessage(announcement, selectedLanguage.code, defaultLanguage)"
-                        [readonly]="true"
-                        [style]="{width: '100%'}">
+                        [readonly]="true" [style]="{width: '100%'}"
+                        class="p-editor-readonly">
                 <p-header hidden></p-header>
               </p-editor>
             </div>

diff --git a/...hed-announcement/published-announcements-popup/published-announcements-popup.component.ts b/...hed-announcement/published-announcements-popup/published-announcements-popup.component.ts
@@ -33,7 +33,7 @@ import {TranslateService} from "../../../services/translate.service";
             </div>
             <div class="p-toolbar-group-center" style="width: 65%">
               <p-editor [ngModel]="getMessage(announcement, selectedLanguage.code, defaultLanguage)" [disabled]="true"
-                        [readonly]="true"
+                        [readonly]="true" class="p-editor-readonly"
                         [style]="{width: '100%'}">
                 <p-header hidden></p-header>
               </p-editor>

diff --git a/...announcement/published-announcements-wrapper/published-announcements-wrapper.component.ts b/...announcement/published-announcements-wrapper/published-announcements-wrapper.component.ts
@@ -46,7 +46,9 @@ import {naviElements} from "../../../../app-navi-elements";
 @Component({
   providers: [DialogService],
   selector: 'app-published-announcements-wrapper',
-  template: '<div *ngFor="let announcement of publishedAnnouncements$ | async"></div>',
+  template: `
+    <div *ngIf="(publishedAnnouncements$ | async) as publishedAnnouncements">
+    </div>`,
 })
 export class PublishedAnnouncementsWrapperComponent implements AfterViewInit {
 

diff --git a/...data-portal/hello-data-portal-ui/src/app/shared/components/summary/summary.component.html b/...data-portal/hello-data-portal-ui/src/app/shared/components/summary/summary.component.html
@@ -60,7 +60,8 @@
         <div *ngIf="(defaultLanguage$ | async) as defaultLanguage">
           <div *ngIf="(selectedLanguage$ | async) as selectedLanguage">
             <p-editor [disabled]="true" [ngModel]="getText(documentation, selectedLanguage.code, defaultLanguage)"
-                      [readonly]="true">
+                      [readonly]="true"
+                      class="p-editor-readonly">
               <p-header hidden></p-header>
             </p-editor>
           </div>

diff --git a/...data-portal/hello-data-portal-ui/src/app/shared/components/summary/summary.component.scss b/...data-portal/hello-data-portal-ui/src/app/shared/components/summary/summary.component.scss
@@ -28,14 +28,15 @@
   border-bottom: none !important;
 }
 
-::ng-deep .p-editor-container .p-editor-toolbar.ql-snow {
-  border: none !important;
+::ng-deep .p-editor-readonly .p-editor-container .p-editor-toolbar.ql-snow {
+  border: none;
 }
 
-::ng-deep .ql-toolbar.ql-snow + .ql-container.ql-snow {
-  border: none !important;
+::ng-deep .p-editor-readonly .ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border: none;
 }
 
+
 ::ng-deep #editDocumentationBtn, ::ng-deep #editDocumentationBtnOvrl {
   height: 1.3rem;
   width: 1.3rem;