Feature/demo (#21)

* dash fix

* form updates (reminder)

* fix in details

* version

* deleted hardcoded code

* fix

* fix

Author: AlbaLopez552

docker-compose.yaml

@@ -2,6 +2,6 @@ name: isbe-catalog-ui
 
 services:
   catalog-ui:
-    image: in2workspace/bae-frontend:v0.0.5
+    image: in2workspace/bae-frontend:v0.0.6
     container_name: isbe-catalog-ui
     restart: always

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bae-frontend",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

package.json

@@ -1,7 +1,7 @@
 <!-- Offerings Gallery section -->
-<bae-categories-panel class="fixed z-30 w-full top-[72px] transition transform opacity-0 duration-200" [ngClass]="showPanel ? 'opacity-100' : 'hidden'"></bae-categories-panel>
+<!--<bae-categories-panel class="fixed z-30 w-full top-[72px] transition transform opacity-0 duration-200" [ngClass]="showPanel ? 'opacity-100' : 'hidden'"></bae-categories-panel>-->
 <section class="flex p-5" [ngClass]="showPanel ? 'pt-[75px]' : ''">
-  @if(showDrawer){
+  <!--@if(showDrawer){
     <div (click)="$event.stopPropagation();" [ngClass]="showDrawer ? 'backdrop-blur-sm': ''" class="fixed h-screen w-3/4 top-0 left-0 z-50 p-4 overflow-y-auto bg-white dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
       <button type="button" (click)="showDrawer=!showDrawer" aria-controls="drawer-example" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white" >
          <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
@@ -13,10 +13,10 @@
     </div>
   } @else {
     <bae-categories-filter [catalogId]="DFT_CATALOG" class="hidden md:block w-1/5 md:w-2/4 lg:w-1/4"></bae-categories-filter>
-  }
+  }-->
 
-  <div class="flex flex-col w-full md:w-4/5 lg:w-3/4">
-    <section class="md:pl-5 content pb-5 px-4 flex items-center">
+  <div class="flex flex-col w-full">
+    <!--<section class="md:pl-5 content pb-5 px-4 flex items-center">
       <button (click)="showDrawer=!showDrawer;$event.stopPropagation();" type="button" class="md:hidden px-2 w-fit h-fit py-2 text-sm font-medium text-center inline-flex items-center dark:text-white bg-white text-primary-100 border border-primary-100 rounded-lg dark:bg-primary-100 dark:border-secondary-200">
         <svg class="w-4 h-4 mr-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
@@ -41,7 +41,7 @@
           </div>
         </form>
       }
-    </section>
+    </section>-->
     @if (loading) {
       <div role="status" class=" h-full flex justify-center align-middle">
         <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-purple-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -51,7 +51,7 @@
         <span class="sr-only">Loading...</span>
       </div>
     } @else {
-      <div class="md:pl-5 grid grid-cols-1 place-items-center lg:grid-cols-2 xl:grid-cols-3">
+      <div class="md:pl-5 grid grid-cols-1 place-items-center lg:grid-cols-3 xl:grid-cols-4">
         @for (prod of products; track prod.id; let index = $index) {
           <bae-off-card [productOff]=prod [cardId]="index" class="w-full h-full p-2"></bae-off-card>
         } @empty {
@@ -62,7 +62,7 @@
         @if (page_check) {
           <div class="flex pb-12 justify-center align-middle">
             <button (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-              Load more
+              {{ 'CREATE_PROD_SPEC._load_more' | translate }}
               <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
               </svg>

src/app/offerings/gallery/gallery.component.html

@@ -266,14 +266,16 @@ export class UpdateCategoryComponent implements OnInit {
       name: this.category.name,
       description: this.category.description,
       isRoot: this.category.isRoot,
-      parentId: this.category.parentId
+      parentId: this.category.parentId,
+      status: this.category.lifecycleStatus
     };
 
     const current = {
       name: this.generalForm.value.name,
       description: this.generalForm.value.description,
       isRoot: this.isParent,
-      parentId: this.isParent ? undefined : this.selectedCategory?.id
+      parentId: this.isParent ? undefined : this.selectedCategory?.id,
+      status: this.catStatusDraft
     };
 
     this.edited = hasNonStatusChanges(original, current);

src/app/pages/admin/categories/update-category/update-category.component.ts

@@ -71,7 +71,7 @@ <h5 class="text-2xl font-bold tracking-tight line-clamp-4 text-primary-100 dark:
       @if (page_check) {
         <div class="flex pt-8 justify-center align-middle">
             <button (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-              Load more
+              {{ 'CREATE_PROD_SPEC._load_more' | translate }}
               <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
               </svg>

src/app/pages/catalogs/catalogs.component.html

@@ -67,7 +67,7 @@ <h5 class="font-semibold tracking-tight text-lg text-primary-100 dark:text-prima
               </div>
             </div>
 
-            <div class="p-4 lg:p-5 grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <div class="p-4 lg:p-5 gap-4">
               <h5 class="font-semibold tracking-tight text-lg text-primary-100 dark:text-primary-50">{{ 'PRODUCT_DETAILS._product_pricing' | translate }}:</h5>
               @if(productOff?.productOfferingPrice != undefined){
                 @if(checkCustom){
@@ -138,8 +138,8 @@ <h5 class="flex justify-center mb-2 p-6 text-2xl font-bold tracking-tight text-g
             }          
             </div>
 
-            <div class="p-4 lg:p-5 grid grid-cols-1 lg:grid-cols-2 gap-4">
-              <h2 class="text-4xl font-extrabold text-primary-100 text-center pb-8 pt-12 dark:text-primary-50">{{ 'PRODUCT_DETAILS._product_chars' | translate }}</h2>
+            <div class="p-4 lg:p-5 gap-4">
+              <h5 class="font-semibold tracking-tight text-lg text-primary-100 dark:text-primary-50">{{ 'PRODUCT_DETAILS._product_chars' | translate }}</h5>
                 <div class="container mx-auto px-4">
                     <div class="flex flex-wrap -mx-4">
                         @for (char of prodChars; track char.id; let idx = $index) {
@@ -170,7 +170,7 @@ <h3 class="text-2xl font-bold mb-4 dark:text-white">{{char.name}}</h3>
                                 </div>
                             </div>
                         } @empty {
-                            <div class="flex justify-center items-center w-full">
+                            <div class="flex items-center w-full">
                                 <div class="flex items-center w-1/2 p-4 mb-4 text-sm text-primary-100 rounded-lg bg-white border border-gray-200 shadow-md dark:bg-secondary-200 dark:text-primary-50" role="alert">
                                   <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>

src/app/pages/product-details/product-details.component.html

@@ -193,7 +193,7 @@ <h5 class="text-xl font-semibold tracking-tight text-primary-100 dark:text-white
                 @if (page_check) {
                 <div class="flex pt-6 pb-6 justify-center align-middle">
                     <button (click)="next()" class="flex cursor-pointer items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
-                    Load more
+                    {{ 'CREATE_PROD_SPEC._load_more' | translate }}
                     <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
                     </svg>

src/app/pages/product-inventory/inventory-items/inventory-products/inventory-products.component.html

@@ -138,7 +138,7 @@
       @if (page_check) {
         <div class="flex pb-6 justify-center align-middle">
           <button (click)="next()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-            Load more
+            {{ 'CREATE_PROD_SPEC._load_more' | translate }}
             <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
             </svg>

src/app/pages/product-orders/sections/invoices-info/invoices-info.component.html

@@ -219,7 +219,7 @@ <h6 class="mb-3 text-sm font-bold text-gray-900 dark:text-white">
                         @if (page_check) {
                         <div class="flex pb-6 justify-center align-middle">
                             <button (click)="next()" class="flex cursor-pointer shadow-lg items-center justify-center px-3 h-8 text-sm font-medium text-gray-500 dark:text-white bg-white dark:bg-primary-100 dark:hover:bg-secondary-100 border border-gray-300 dark:border-secondary-200 rounded-lg hover:bg-gray-200">
-                            Load more
+                            {{ 'CREATE_PROD_SPEC._load_more' | translate }}
                             <svg class="w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5"/>
                             </svg>