chore: add expand calendar

taiga-family · Aug 15, 2024 · dcf5a4f · dcf5a4f
1 parent 7cd7e97
commit dcf5a4f
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 48 deletions.
diff --git a/...lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html b/...lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html
@@ -50,57 +50,70 @@ <h3 tuiTitle>
     >
         Open Table
     </button>
+    <button
+        iconEnd="@tui.panel-top-open"
+        tuiLink
+        (click)="expanded = !expanded"
+    >
+        Open Calendar
+    </button>
+    <tui-expand [expanded]="expanded">
+        <ng-template tuiExpandContent>
+            <tui-calendar
+                class="calendar"
+                [value]="calendarValue"
+                (dayClick)="onDayClick($event)"
+            />
+            @if (calendarValue) {
+                <div>Chosen date: {{ calendarValue }}</div>
+            }
+        </ng-template>
+    </tui-expand>
 </div>
 
-<div
-    tuiAppearance="whiteblock"
-    tuiCardLarge="normal"
-    class="card-animals"
->
-    @for (animal of animals; track $index) {
-        <div
-            tuiAppearance="whiteblock"
-            tuiCardLarge="normal"
-            [style.width]="'min-content'"
-        >
-            <tui-avatar
-                [size]="'m'"
-                [src]="animal.src"
-                [style.border-radius]="'9rem'"
-                [style.height]="'9rem'"
-                [style.width]="'9rem'"
-            />
-            <header tuiHeader>
-                <h2
-                    tuiTitle
-                    [style.text-align]="'center'"
-                >
-                    {{ animal.title }}
-                </h2>
-            </header>
+<div>
+    <div
+        tuiAppearance="whiteblock"
+        tuiCardLarge="normal"
+        class="card-animals"
+    >
+        @for (animal of animals; track $index) {
             <div
-                [style.display]="'flex'"
-                [style.flex-direction]="'column'"
-                [style.gap]="'0.5rem'"
+                tuiAppearance="whiteblock"
+                tuiCardLarge="normal"
+                [style.width]="'min-content'"
             >
-                <tui-badge
-                    tuiStatus
-                    [appearance]="animal.health === 'good' ? 'success' : 'warning'"
+                <tui-avatar
+                    [size]="'m'"
+                    [src]="animal.src"
+                    [style.border-radius]="'9rem'"
+                    [style.height]="'9rem'"
+                    [style.width]="'9rem'"
+                />
+                <header tuiHeader>
+                    <h2
+                        tuiTitle
+                        [style.text-align]="'center'"
+                    >
+                        {{ animal.title }}
+                    </h2>
+                </header>
+                <div
+                    [style.display]="'flex'"
+                    [style.flex-direction]="'column'"
+                    [style.gap]="'0.5rem'"
                 >
-                    {{ animal.health }}
-                </tui-badge>
-                @for (tag of animal.tags; track $index) {
-                    <tui-badge appearance="primary">{{ tag }}</tui-badge>
-                }
+                    <tui-badge
+                        tuiStatus
+                        [appearance]="animal.health === 'good' ? 'success' : 'warning'"
+                    >
+                        {{ animal.health }}
+                    </tui-badge>
+                    @for (tag of animal.tags; track $index) {
+                        <tui-badge appearance="primary">{{ tag }}</tui-badge>
+                    }
+                </div>
             </div>
-        </div>
-    }
+        }
+    </div>
 </div>
-<tui-calendar
-    class="calendar"
-    [value]="calendarValue"
-    (dayClick)="onDayClick($event)"
-/>
-@if (calendarValue) {
-    <div>Chosen date: {{ calendarValue }}</div>
-}
diff --git a/...a-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts b/...a-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts
@@ -3,7 +3,15 @@ import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular
 import {TuiPieChart} from '@taiga-ui/addon-charts';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
 import type {TuiDay} from '@taiga-ui/cdk';
-import {TuiAppearance, TuiButton, TuiCalendar, TuiHint, TuiTitle} from '@taiga-ui/core';
+import {
+    TuiAppearance,
+    TuiButton,
+    TuiCalendar,
+    TuiExpand,
+    TuiHint,
+    TuiLink,
+    TuiTitle,
+} from '@taiga-ui/core';
 import {TuiAvatar, TuiBadge, TuiStatus} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
@@ -20,8 +28,10 @@ import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
         TuiButton,
         TuiCalendar,
         TuiCardLarge,
+        TuiExpand,
         TuiHeader,
         TuiHint,
+        TuiLink,
         TuiPieChart,
         TuiStatus,
         TuiTitle,
@@ -34,6 +44,7 @@ export class AdministratorComponent {
     protected readonly value = [13769, 12367, 10172, 3018, 2592];
     protected readonly labels = ['Food', 'Сleaning', 'Electricity', 'Water', 'Other'];
     protected calendarValue: TuiDay | null = null;
+    protected expanded = false;
 
     protected animals = [
         {