MARP-989: Empty product detail tabs not hidden (#120)

axonivy-market · Sep 11, 2024 · 99644e1 · 99644e1
1 parent d9ba65f
commit 99644e1
Show file tree

Hide file tree

Showing 9 changed files with 572 additions and 133 deletions.
diff --git a/marketplace-ui/src/app/core/services/language/language.service.ts b/marketplace-ui/src/app/core/services/language/language.service.ts
@@ -7,7 +7,7 @@ const DATA_LANGUAGE = 'data-language';
 @Injectable({ providedIn: 'root' })
 export class LanguageService {
   private readonly language = signal(Language.EN);
-  selectedLanguage = computed(() => this.language() ?? Language.EN)
+  selectedLanguage = computed(() => this.language() ?? Language.EN);
 
   constructor(@Inject(DOCUMENT) private readonly document: Document) {
     const localStorage = this.document.defaultView?.localStorage;

diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
@@ -89,28 +89,25 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
         class="tab-group d-flex flex-column justify-content-center align-items-start p-0 col-12 col-xl-8">
         <div class="row-tab d-none d-xl-block col-12">
           <ul ngbNav class="nav nav-tabs form-tabs">
-            @for (tab of detailTabs; track $index) {
-              @if (tab.value | hasValueTab: productModuleContent()) {
-                <li
-                  ngbNavItem
-                  class="nav-item d-flex flex-row position-relative border-bottom-1 p-2 justify-content-center align-items-start">
-                  <a
-                    [lang]="languageService.selectedLanguage()"
-                    ngbNavLink
-                    class="nav-link border-0 bg-transparent"
-                    [class.active]="tab.activeClass"
-                    [id]="tab.tabId"
-                    (click)="setActiveTab(tab.value)"
-                    role="tab"
-                    [ngClass]="{
-                      'text-secondary': themeService.isDarkMode(),
-                      'text-dark': !themeService.isDarkMode(),
-                      active: activeTab === tab.value
-                    }">
-                    {{ tab.label | translate }}
-                  </a>
-                </li>
-              }
+            @for (displayedTab of displayedTabsSignal(); track $index) {
+              <li
+                ngbNavItem
+                class="nav-item d-flex flex-row position-relative border-bottom-1 p-2 justify-content-center align-items-start">
+                <a
+                  [lang]="languageService.selectedLanguage()"
+                  ngbNavLink
+                  class="nav-link border-0 bg-transparent"
+                  [class.active]="activeTab === displayedTab.value"
+                  [id]="displayedTab.tabId"
+                  (click)="setActiveTab(displayedTab.value)"
+                  role="tab"
+                  [ngClass]="{
+                    'text-secondary': themeService.isDarkMode(),
+                    'text-dark': !themeService.isDarkMode()
+                  }">
+                  {{ displayedTab.label | translate }}
+                </a>
+              </li>
             }
           </ul>
         </div>
@@ -122,8 +119,8 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
               class="dropdown-container position-relative d-flex align-items-center w-100">
               <div id="tab-group-dropdown" class="flex-grow-1 w-100">
                 <app-common-dropdown
-                  [items]="detailTabsForDropdown"
-                  [selectedItem]="selectedTabLabel | translate"
+                  [items]="displayedTabsSignal()"
+                  [selectedItem]="getSelectedTabLabel() | translate"
                   buttonClass="form-select flex-grow-1 text-start"
                   (itemSelected)="onTabChange($event.value)">
                 </app-common-dropdown>
@@ -156,59 +153,30 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
           </div>
         </div>
         <div class="tab-content col-12 default-cursor">
-          @if (!(productModuleContent() | missingReadmeContent)) {
-            <div
-              class="tab-pane fade show"
-              [class.active]="activeTab === 'description'"
-              id="description"
-              role="tabpanel"
-              aria-labelledby="description-tab">
-              <markdown
-                [lang]="languageService.selectedLanguage()"
-                class="readme-content"
-                [data]="
-                  productModuleContent().description!
-                    | multilingualism: languageService.selectedLanguage()
-                "></markdown>
-            </div>
-            <div
-              class="tab-pane fade"
-              [class.active]="activeTab === 'demo'"
-              id="demo"
-              role="tabpanel"
-              aria-labelledby="demo-tab">
-              <markdown
-                class="readme-content"
-                [data]="
-                  productModuleContent().demo!
-                    | multilingualism: languageService.selectedLanguage()
-                "></markdown>
-            </div>
-            <div
-              class="tab-pane fade"
-              [class.active]="activeTab === 'setup'"
-              id="setup"
-              role="tabpanel"
-              aria-labelledby="setup-tab">
-              <markdown
-                class="readme-content"
-                [data]="
-                  productModuleContent().setup!
-                    | multilingualism: languageService.selectedLanguage()
-                "></markdown>
-            </div>
-            <div
-              class="tab-pane fade"
-              [class.active]="activeTab === 'dependency'"
-              id="dependency"
-              role="tabpanel"
-              aria-labelledby="dependency-tab">
-              <app-product-detail-maven-content
-                [productModuleContent]="productModuleContent()"
-                [selectedVersion]="
-                  selectedVersion
-                "></app-product-detail-maven-content>
-            </div>
+          @if (!isEmptyProductContent()) {
+            @for (displayedTab of displayedTabsSignal(); track $index) {
+              <div
+                class="tab-pane fade show"
+                [class.active]="activeTab === displayedTab.value"
+                [id]="displayedTab.value"
+                role="tabpanel"
+                [attr.aria-labelledby]="displayedTab.value + '-tab'">
+                @if (displayedTab.value === 'dependency') {
+                  <app-product-detail-maven-content
+                    [productModuleContent]="productModuleContent()"
+                    [selectedVersion]="selectedVersion">
+                  </app-product-detail-maven-content>
+                } @else {
+                  <markdown
+                    [lang]="languageService.selectedLanguage()"
+                    class="readme-content"
+                    [data]="
+                      getProductModuleContentValue(displayedTab)
+                        | multilingualism: languageService.selectedLanguage()
+                    "></markdown>
+                }
+              </div>
+            }
           }
         </div>
       </div>