new-front-common-library 16.1.32-ROY-1 → 16.1.32-ROY-3

package/src/lib/util/component/header/menu/menu.component.ts

@@ -0,0 +1,94 @@
+import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
+import { MatMenuTrigger } from '@angular/material/menu';
+import { CommercialApiService } from '../../../services/api/commercial-api.service';
+import { VideoApiService } from '../../../services/api/video-api.service';
+import { OverlayService } from '../../overlay/overlay.service';
+import { MENU_SECTIONS } from './menu.const';
+import { MenuLink } from './menu.model';
+
+@Component({
+  selector: 'sc-menu',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.scss']
+})
+export class MenuComponent {
+  @Input() public lang!: string;
+  @Output() public navigate: EventEmitter<MenuLink> = new EventEmitter<MenuLink>();
+  @Output() public redirect: EventEmitter<MenuLink> = new EventEmitter<MenuLink>();
+
+  public activeMenu: string | null = null;
+  public readonly menuButtons = MENU_SECTIONS;
+  private menuTriggerRef: MatMenuTrigger | null = null;
+
+  @HostListener('document:click', ['$event'])
+  onClickOutside(event: MouseEvent): void {
+    const menuButton = (event.target as HTMLElement).closest('.button-wrapper');
+    const insideMenu = (event.target as HTMLElement).closest('.mat-menu-panel');
+
+    if (!menuButton && !insideMenu) {
+      this.forceCloseMenu();
+    }
+  }
+
+  constructor(
+    private overlayService: OverlayService,
+    private videoApiService: VideoApiService,
+    private commercialApiService: CommercialApiService
+  ) {}
+
+  public openMenu(menuTrigger: MatMenuTrigger, menuLabel: string): void {
+    if (this.activeMenu === menuLabel) {
+      this.forceCloseMenu();
+      return;
+    }
+
+    this.forceCloseMenu();
+    this.activeMenu = menuLabel;
+    this.menuTriggerRef = menuTrigger;
+    menuTrigger.openMenu();
+  }
+
+  public forceCloseMenu(): void {
+    this.activeMenu = null;
+    this.menuTriggerRef?.closeMenu();
+  }
+
+  public extractAllProducts() {
+    this.overlayService.show();
+    this.videoApiService.getProductExtractionXlsx(this.lang).subscribe(res => {
+      const xlsFile = new Blob([res], {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      });
+      const fileURL = URL.createObjectURL(xlsFile);
+      window.open(fileURL);
+      this.overlayService.hide();
+    });
+  }
+
+  public extractAccountWrittingDownload(): void {
+    this.overlayService.show();
+    this.commercialApiService.getAccountWrittingDownload();
+    this.overlayService.hide();
+  }
+
+  public performAction(link: MenuLink): void {
+    this.forceCloseMenu();
+
+    switch (link.actionType) {
+      case 'navigate':
+        this.navigate.emit(link);
+        break;
+      case 'redirect':
+        this.redirect.emit(link);
+        break;
+      case 'exportAccountWriting':
+        this.extractAccountWrittingDownload();
+        break;
+      case 'extractProduct':
+        this.extractAllProducts();
+        break;
+      default:
+        throw new Error(`performAction error - No action type on menuLink : ${link}`);
+    }
+  }
+}

package/src/lib/util/component/header/menu/menu.const.ts

@@ -0,0 +1,546 @@
+import { Menu } from './menu.model';
+import { CANAL_PLUS_INTERNATIONAL_RESTRICTION } from '../../../permissions/permissions.service';
+
+export const MENU_SECTIONS: Menu[] = [
+  {
+    label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB',
+    permissions: [],
+    restrictions: [CANAL_PLUS_INTERNATIONAL_RESTRICTION],
+    sections: [
+      {
+        label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.CALENDAR',
+        permissions: [],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.CALENDAR.CALENDAR',
+            module: 'calendar',
+            route: '',
+            actionType: 'navigate',
+            permissions: []
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.SLATE_MANAGEMENT',
+        permissions: ['PA_CAMPAIGN_SEARCH', 'PA_CAMPAIGN_CREATION'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.SLATE_MANAGEMENT.DASHBOARD',
+            module: 'slate-management',
+            route: '/dashboard',
+            actionType: 'navigate',
+            permissions: ['PA_CAMPAIGN_SEARCH']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.SLATE_MANAGEMENT.CAMPAIGN_CREATE',
+            module: 'slate-management',
+            route: '/dashboard',
+            actionType: 'navigate',
+            queryParams: '{"createCampaign" : true}',
+            permissions: ['PA_CAMPAIGN_CREATION']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.SLATE_MANAGEMENT.RELEASE_PLANNING',
+            module: 'slate-management',
+            route: '/calendar',
+            actionType: 'navigate',
+            permissions: ['PA_CAMPAIGN_CREATION']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.ROYALTY',
+        permissions: ['ROYALTY'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.ROYALTY.SEARCH_CONTRACT',
+            module: 'royalty',
+            route: '/contract/search',
+            actionType: 'navigate',
+            permissions: ['ROYALTY']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.ROYALTY.INIT_CONTRACT',
+            module: 'royalty',
+            route: '/contract/init',
+            actionType: 'navigate',
+            permissions: ['ROYALTY_EDIT']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.ROYALTY.CREATE_CONTRACT',
+            module: 'royalty',
+            route: '/contract/create-blank',
+            actionType: 'navigate',
+            permissions: ['ROYALTY_EDIT']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.ROYALTY.REPORTING',
+            module: 'royalty',
+            route: '/reporting',
+            actionType: 'navigate',
+            permissions: ['ROYALTY']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.MILKSHAKE',
+        permissions: ['ULTIMATES'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.MILKSHAKE.MILKSHAKE',
+            module: null,
+            route: '/ultimates',
+            actionType: 'navigate',
+            permissions: ['ULTIMATES']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.TV_DATA',
+        permissions: ['TVDATA'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.TV_DATA.TV_DATA',
+            module: 'tvdata',
+            route: '/infos-center',
+            actionType: 'navigate',
+            permissions: ['TVDATA']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.PILOT',
+        permissions: ['PILOT'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.OTHER.PILOT',
+            module: 'pilot',
+            route: '/tv-series',
+            actionType: 'navigate',
+            permissions: ['PILOT']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.REPORTING',
+        permissions: [],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.DISTRIBUTION_HUB.REPORTING.BI',
+            module: null,
+            route: 'https://app.powerbi.com/groups/me/apps/3bdbab87-921d-4271-bb63-2136541ed7a5/reports/6ed06054-c77f-450e-8c37-3fbc66761525/ReportSection?ctid=bf5c5de1-6a54-4091-a72f-90e32801628c&experience=power-bi',
+            actionType: 'redirect',
+            permissions: []
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'COMMON.HEADER.MENU.COMMERCIAL',
+    permissions: ['COMMERCIAL', 'ACCOUNTANT', 'ADMINISTRATIVE_CONTROLLER'],
+    sections: [
+      {
+        label: 'COMMON.HEADER.MENU.COMMERCIAL.SEARCH',
+        permissions: ['COMMERCIAL'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.SEARCH.DEAL',
+            module: 'commercial',
+            route: '/deal/search',
+            actionType: 'navigate',
+            permissions: ['COMMERCIAL']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.SEARCH.WORK_RECORD',
+            module: 'commercial',
+            route: '/work-record/search',
+            actionType: 'navigate',
+            permissions: ['COMMERCIAL']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.SEARCH.INVOICE',
+            module: 'commercial',
+            route: '/invoice/search',
+            actionType: 'navigate',
+            permissions: ['COMMERCIAL']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.SEARCH.VOD',
+            module: 'commercial',
+            route: '/vod/search',
+            actionType: 'navigate',
+            permissions: ['COMMERCIAL']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.SEARCH.VOLUME',
+            module: 'commercial',
+            route: '/vod/volumes',
+            actionType: 'navigate',
+            permissions: ['COMMERCIAL']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.COMMERCIAL.FINANCE',
+        permissions: ['ACCOUNTANT', 'ADMINISTRATIVE_CONTROLLER'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.FINANCE.TURNOVER',
+            module: 'commercial',
+            route: '/turnover/search',
+            actionType: 'navigate',
+            permissions: ['ACCOUNTANT', 'ADMINISTRATIVE_CONTROLLER']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.FINANCE.ACCOUNTING_CLOSING',
+            module: 'commercial',
+            route: '/accounting-closing/consult',
+            actionType: 'navigate',
+            permissions: ['ACCOUNTANT', 'ADMINISTRATIVE_CONTROLLER']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.FINANCE.ACCOUNT_EXTRACTION',
+            module: 'commercial-api',
+            route: '/accounting-writing/get-account-writting-file',
+            actionType: 'exportAccountWriting',
+            permissions: ['ACCOUNTANT', 'ADMINISTRATIVE_CONTROLLER']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.COMMERCIAL.UTILS',
+        permissions: ['COMMERCIAL'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.UTILS.DEAL_CREATE',
+            module: 'commercial',
+            route: '/deal/form',
+            actionType: 'navigate',
+            permissions: ['COMMERCIAL']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.UTILS.REPORTING',
+            module: 'commercial',
+            route: '/work-record/reporting',
+            actionType: 'navigate',
+            permissions: ['COMMERCIAL']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.COMMERCIAL.UTILS.WORK_RECORD_ERROR',
+            module: 'commercial',
+            route: '/work-record/console',
+            actionType: 'navigate',
+            permissions: ['COMMERCIAL']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'COMMON.HEADER.MENU.LEGAL',
+    permissions: ['LEGAL'],
+    sections: [
+      {
+        label: 'COMMON.HEADER.MENU.LEGAL.SEARCH',
+        permissions: ['LEGAL'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.SEARCH.LEGAL_DETAILS',
+            module: 'legal',
+            route: '/work-legal-details',
+            actionType: 'navigate',
+            permissions: ['LEGAL'],
+
+          },
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.SEARCH.ACQ',
+            module: 'legal',
+            route: '/contracts/search',
+            actionType: 'navigate',
+            permissions: ['LEGAL'],
+          },
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.SEARCH.SALE',
+            module: 'legal',
+            route: '/contracts/search/CESS',
+            actionType: 'navigate',
+            permissions: ['LEGAL'],
+          },
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.SEARCH.ADVANCED_SEARCH',
+            module: 'legal',
+            route: '/advanced-search',
+            actionType: 'navigate',
+            permissions: ['LEGAL']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.LEGAL.CONTRACT',
+        permissions: ['LEGAL'],
+        restrictions: ['LEGAL_CONSULT'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.CONTRACT.CREATE_ACQ',
+            module: 'legal',
+            route: '/contracts-details/createContract/acq',
+            actionType: 'navigate',
+            permissions: ['LEGAL'],
+            restrictions: ['LEGAL_CONSULT']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.CONTRACT.CREATE_SALE',
+            module: 'legal',
+            route: '/contracts-details/createContract/sales',
+            actionType: 'navigate',
+            permissions: ['LEGAL'],
+            restrictions: ['LEGAL_CONSULT']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.CONTRACT.CREATE_AUTHOR',
+            module: 'legal',
+            route: '/contracts-details/createContract/auth',
+            actionType: 'navigate',
+            permissions: ['LEGAL'],
+            restrictions: ['LEGAL_CONSULT']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.LEGAL.OTHER',
+        permissions: ['LEGAL'],
+        restrictions: [CANAL_PLUS_INTERNATIONAL_RESTRICTION],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.OTHER.ELECTRONIC_DOCUMENTS',
+            module: 'legal',
+            route: '/electronic-documents',
+            actionType: 'navigate',
+            permissions: ['LEGAL']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.LEGAL.OTHER.HISTORY',
+            module: 'legal',
+            route: '/history',
+            actionType: 'navigate',
+            permissions: ['LEGAL']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'COMMON.HEADER.MENU.VIDEO',
+    permissions: ['VIDEO_CONSULT'],
+    sections: [
+      {
+        label: 'COMMON.HEADER.MENU.VIDEO.PRODUCT',
+        permissions: ['VIDEO_CONSULT'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.VIDEO.PRODUCT.CREATE',
+            module: 'video',
+            route: '/product/form',
+            actionType: 'navigate',
+            permissions: ['VIDEO_CONSULT']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.VIDEO.PRODUCT.EXTRACT_ALL',
+            module: 'video-api',
+            route: '/products/all-products-to-xlsx',
+            actionType: 'extractProduct',
+            permissions: ['VIDEO_CONSULT']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.VIDEO.PRODUCT.ADVANCED_SEARCH',
+            module: null,
+            route: '/advanced-search/product',
+            actionType: 'navigate',
+            permissions: ['VIDEO_CONSULT']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.VIDEO.PRODUCT.SAP_ORDER',
+            module: 'video',
+            route: '/finance/sap-order-table',
+            actionType: 'navigate',
+            permissions: ['VIDEO_CONSULT', 'SAP_ORDER']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.VIDEO.PRODUCT.VALIDATE_PRODUCT',
+            module: 'video',
+            route: '/product/validate-product',
+            actionType: 'navigate',
+            permissions: ['VIDEO_CONSULT', 'VALIDATION PRUP/QEF']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'COMMON.HEADER.MENU.PO',
+    permissions: ['BDC', 'BUDGET'],
+    sections: [
+      {
+        label: 'COMMON.HEADER.MENU.PO.PO',
+        permissions: ['BDC'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.PO.PO.DASHBOARD',
+            module: 'expenditure-commitment',
+            route: '/home/commands',
+            actionType: 'navigate',
+            permissions: ['BDC']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.PO.PO.CREATE',
+            module: 'expenditure-commitment',
+            route: '/purchase-orders/form',
+            actionType: 'navigate',
+            permissions: ['BDC']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.PO.PO.VALIDATE',
+            module: 'expenditure-commitment',
+            route: '/purchase-orders/validate',
+            actionType: 'navigate',
+            permissions: ['BDC']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.PO.PO.DELIVERY',
+            module: 'expenditure-commitment',
+            route: '/purchase-orders/delivery',
+            actionType: 'navigate',
+            permissions: ['BDC']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.PO.PO.ADVANCED_SEARCH',
+            module: null,
+            route: '/advanced-search/purchase-order',
+            actionType: 'navigate',
+            permissions: ['BDC']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.PO.BUDGET',
+        permissions: ['BDC', 'BUDGET'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.PO.BUDGET.BUDGET',
+            module: 'expenditure-commitment',
+            route: '/budget/search',
+            actionType: 'navigate',
+            permissions: ['BDC', 'BUDGET']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'COMMON.HEADER.MENU.BI',
+    permissions: ['MODULE BI'],
+    sections: [
+      {
+        label: 'COMMON.HEADER.MENU.BI',
+        permissions: ['MODULE BI'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.BI',
+            module: 'bi',
+            route: '/simple-search/form',
+            actionType: 'navigate',
+            permissions: ['MODULE BI']
+          }
+        ]
+      }
+    ]
+  },
+  {
+    label: 'COMMON.HEADER.MENU.REFERENTIAL',
+    permissions: [],
+    sections: [
+      {
+        label: 'COMMON.HEADER.MENU.REFERENTIAL.WORK',
+        permissions: ['WORK_CREATOR'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.WORK.CREATE_WORK',
+            module: 'referential',
+            route: '/work/create-work',
+            actionType: 'navigate',
+            permissions: ['WORK_CREATOR']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.WORK.CREATE_HEADER',
+            module: 'referential',
+            route: '/work/create-header',
+            actionType: 'navigate',
+            permissions: ['WORK_CREATOR']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.WORK.CREATE_CONTROL_CODE',
+            module: 'referential',
+            route: '/work/create-control-code',
+            actionType: 'navigate',
+            permissions: ['WORK_CREATOR']
+          },
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.WORK.MAPPING',
+            module: 'mapping',
+            route: '',
+            actionType: 'navigate',
+            permissions: ['WORK_CREATOR']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.REFERENTIAL.PERSON',
+        permissions: ['WORK_CREATOR'],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.PERSON.CREATE_PERSON',
+            module: 'referential',
+            route: '/person/create-person',
+            actionType: 'navigate',
+            permissions: ['WORK_CREATOR']
+          }
+        ]
+      },
+      {
+        label: 'COMMON.HEADER.MENU.REFERENTIAL.GLOSSARY',
+        permissions: [],
+        links: [
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.GLOSSARY.MEDIAS',
+            module: 'referential',
+            route: '/medias',
+            actionType: 'navigate',
+            permissions: []
+          },
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.GLOSSARY.TERRITORIES',
+            module: 'referential',
+            route: '/territories',
+            actionType: 'navigate',
+            permissions: []
+          },
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.GLOSSARY.LANGUAGES',
+            module: 'referential',
+            route: '/languages',
+            actionType: 'navigate',
+            permissions: []
+          },
+          {
+            label: 'COMMON.HEADER.MENU.REFERENTIAL.GLOSSARY.ALERTES',
+            module: 'referential',
+            route: '/alertes',
+            actionType: 'navigate',
+            permissions: []
+          }
+        ]
+      }
+    ]
+  }
+];

package/src/lib/util/component/header/menu/menu.model.ts

@@ -0,0 +1,26 @@
+
+export interface Menu {
+  label: string;
+  permissions: string[];
+  sections: MenuSection[];
+  restrictions?: string[];
+}
+
+export interface MenuSection {
+  label: string;
+  permissions: string[];
+  links: MenuLink[];
+  restrictions?: string[];
+}
+
+export interface MenuLink {
+  label: string;
+  module: string;
+  route: string;
+  queryParams?: string;
+  actionType: ActionType;
+  permissions: string[];
+  restrictions?: string[];
+}
+
+type ActionType = 'navigate' | 'extractProduct' | 'exportAccountWriting' | 'redirect';

package/src/lib/util/component/overlay/overlay.component.css

@@ -0,0 +1,20 @@
+.blackshield {
+  position: fixed;
+  display: block !important;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: black;
+  opacity: 0.8;
+  height: 100vh;
+  z-index: 2000000;
+  padding-top: 150px;
+}
+
+.overshield {
+  position: fixed;
+  width: 30%;
+  min-height: 6vh;
+  margin-top: 250px;
+  z-index: 20000000;
+}

package/src/lib/util/component/overlay/overlay.component.html

@@ -0,0 +1,10 @@
+<div *ngIf="show" class="blackshield"></div>
+
+<div *ngIf="show" class="d-flex justify-content-center align-items-center">
+  <mat-card class="overshield">
+    <mat-card-content class="d-flex justify-content-between align-items-center">
+      <span>{{ message || 'CORE.OVERLAY.LOADING' | translate}}</span>
+      <mat-spinner diameter="40"></mat-spinner>
+    </mat-card-content>
+  </mat-card>
+</div>