feat(shop): implement shop detail page

Author: belsman

packages/core/state/src/lib/+state/fulfillment/fulfillment.effects.ts

@@ -240,11 +240,10 @@ export class FulfillmentEffects {
           .submit({
             items: [
               {
-                ...entities[payload.id],
-                // id: payload.id,
-                // meta: {
-                //   owners: [...(entities[payload.id]?.meta.owners || [])],
-                // },
+                id: payload.id,
+                meta: {
+                  owners: [...(entities[payload.id]?.meta.owners || [])],
+                },
               },
             ],
             scope: leafOrg || organization,

packages/modules/management/src/lib/components/shop/shop-view.component.ts

@@ -13,8 +13,7 @@ import {
   selector: 'app-module-management-shop-view',
   template: `
     @if(vm$ | async; as vm) {
-    <!-- <app-module-management-shop-details [vm]="vm" /> -->
-    {{ vm.shop | json }}
+    <app-module-management-shop-view-details [vm]="vm" />
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

packages/modules/management/src/lib/components/shop/shop.module.ts

@@ -7,6 +7,7 @@ import { ModulesUiModule } from '@console-modules/ui';
 import { ShopIndexComponent } from './shop-index.component';
 import { ShopViewComponent } from './shop-view.component';
 import { ShopTemplateComponent } from './template/shop-template.component';
+import { ShopViewDetailComponent } from './view/shop-view-details.component';
 
 const routes: Routes = [
   {
@@ -40,7 +41,12 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [ShopTemplateComponent, ShopIndexComponent, ShopViewComponent],
+  declarations: [
+    ShopTemplateComponent,
+    ShopIndexComponent,
+    ShopViewComponent,
+    ShopViewDetailComponent,
+  ],
   imports: [ModulesUiModule.forChild(), RouterModule.forChild(routes)],
 })
 export class ShopModule {}

packages/modules/management/src/lib/components/shop/view/shop-view-details.component.html

@@ -0,0 +1,54 @@
+<vcl-data-list
+  mode="none"
+  [noBorder]="true"
+>
+  <vcl-data-list-header>
+    <h4>Data</h4>
+  </vcl-data-list-header>
+  <vcl-data-list-item class="col">
+    <ng-container
+      *ngTemplateOutlet="
+        shopPropItemTemplate;
+        context: { prop: 'Shop number', value: vm.shop.shopNumber }
+      "
+    ></ng-container>
+  </vcl-data-list-item>
+
+  <vcl-data-list-item class="col">
+    <ng-container
+      *ngTemplateOutlet="
+        shopPropItemTemplate;
+        context: { prop: 'Name', value: vm.shop.name }
+      "
+    ></ng-container>
+  </vcl-data-list-item>
+
+  <vcl-data-list-item class="col">
+    <ng-container
+      *ngTemplateOutlet="
+        shopPropItemTemplate;
+        context: { prop: 'Description', value: vm.shop.description || 'N/A' }
+      "
+    ></ng-container>
+  </vcl-data-list-item>
+
+  <vcl-data-list-item class="col">
+    <ng-container
+      *ngTemplateOutlet="
+        shopPropItemTemplate;
+        context: { prop: 'Domain', value: vm.shop.domains?.join(', ') }
+      "
+    ></ng-container>
+  </vcl-data-list-item>
+</vcl-data-list>
+
+<ng-template
+  #shopPropItemTemplate
+  let-prop="prop"
+  let-value="value"
+>
+  <div class="flex row justify-content-between align-items-center">
+    <span>{{ prop }}</span>
+    <span>{{ value }}</span>
+  </div>
+</ng-template>

packages/modules/management/src/lib/components/shop/view/shop-view-details.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { IShop } from '@console-core/types';
+
+@Component({
+  selector: 'app-module-management-shop-view-details',
+  templateUrl: './shop-view-details.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
+})
+export class ShopViewDetailComponent {
+  @Input({
+    required: true,
+  })
+  vm!: {
+    id: string;
+    shop: IShop;
+  };
+}