seed-angular/src/@seed/components/page/page.component.html at ccbbc6b8bddf8eb4f2d3db716ed74089ec1d5ff9 · SEED-platform/seed-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="flex min-w-0 flex-auto flex-col" *transloco="let t">
  <div
    class="bg-card flex flex-0 flex-col border-b p-6 sm:flex-row sm:items-center sm:justify-between sm:px-10 sm:py-8 dark:bg-transparent"
    [style.padding-bottom]="config.tabs ? '15px !important' : null"
  >
    <div class="min-w-0 flex-1">
      <div class="flex" [class]="config.sideNavToggle ? '-ml-10 -mt-3' : ''">
        @if (config.sideNavToggle) {
          <button (click)="toggleDrawer()" mat-icon-button>
            <mat-icon>menu</mat-icon>
          </button>
        }
        @if (config.breadcrumbs?.length > 0) {
          <div class="flex flex-wrap items-center gap-x-1 font-medium">
            @for (breadcrumb of config.breadcrumbs; track $index) {
              <div class="flex items-center gap-x-1 whitespace-nowrap">
                @if (!$first) {
                  <mat-icon class="text-secondary icon-size-3" svgIcon="fa-solid:chevron-right"></mat-icon>
                }
                <span class="text-secondary">{{ breadcrumb }}</span>
              </div>
            }
          </div>
        }
      </div>

      <div [ngClass]="{ 'mt-2': config.breadcrumbs?.length > 0 }">
        <div class="flex">
          <h2 class="truncate text-3xl font-bold capitalize leading-7 tracking-tight sm:leading-10 md:text-4xl">
            @if (config.titleIcon) {
              <mat-icon class="text-primary-900 icon-size-6 dark:text-primary-300" [svgIcon]="config.titleIcon"></mat-icon>
            }
            {{ t(config.title) }}
            @if (config.subTitle) {
              <span class="text-secondary ml-2 text-2xl font-normal">({{ config.subTitle }})</span>
            }
          </h2>
        </div>
      </div>
    </div>
    <!-- Actions -->
    <div class="flex justify-end">
      @if (config.action2) {
        <div class="mt-6 flex shrink-0 items-center sm:ml-4 sm:mt-0">
          @if (config.action2Icon && !config.action2Text) {
            <button [class]="config.action2Classes" (click)="config.action2()" mat-icon-button>
              <mat-icon [svgIcon]="config.action2Icon"></mat-icon>
            </button>
          } @else {
            <button [class]="config.action2Classes" (click)="config.action2()" mat-flat-button color="primary">
              @if (config.action2Icon) {
                <mat-icon class="icon-size-4" [svgIcon]="config.action2Icon"></mat-icon>
              }
              @if (config.action2Text) {
                <span [class.ml-2]="config.action2Icon">{{ config.action2Text }}</span>
              }
            </button>
          }
        </div>
      }
      @if (config.action) {
        <div class="mt-6 flex shrink-0 items-center sm:ml-4 sm:mt-0">
          @if (config.actionIcon && !config.actionText) {
            <button [class]="config.actionClasses" (click)="config.action()" mat-icon-button>
              <mat-icon [svgIcon]="config.actionIcon"></mat-icon>
            </button>
          } @else {
            <button [class]="config.actionClasses" (click)="config.action()" mat-flat-button color="primary">
              @if (config.actionIcon) {
                <mat-icon class="icon-size-4" [svgIcon]="config.actionIcon"></mat-icon>
              }
              @if (config.actionText) {
                <span [class.ml-2]="config.actionIcon">{{ config.actionText }}</span>
              }
            </button>
          }
        </div>
      }
    </div>
  </div>
  @if (config.tabs) {
    <div class="bg-card">
      <div class="flex w-full max-w-screen-xl flex-col px-6 sm:px-8">
        <!-- Tabs -->
        <seed-page-inventory-tab [config]="{ tabs: config.tabs, action: toggleInventoryType.bind(this) }"></seed-page-inventory-tab>
      </div>
    </div>
  }

  <!-- Loading or content -->
  <div class="relative">
    @if (loading) {
      <div class="absolute h-[100vh] w-[100vw] animate-pulse bg-gray-300 dark:bg-gray-700"></div>
    }
    <div [class.opacity-0]="loading" [class.pointer-events-none]="loading">
      <ng-content></ng-content>
    </div>
  </div>
</div>