From d9987e51a8e65efc3089d3061eaa737408d233c7 Mon Sep 17 00:00:00 2001
From: MishaZhem <mz-100@mail.ru>
Date: Thu, 15 Aug 2024 22:03:28 +0300
Subject: [PATCH] chore: add calendar range

---
 .../administrator.component.html              | 225 +++++++++---------
 .../administrator.component.less              |  12 +
 .../administrator/administrator.component.ts  |  18 +-
 3 files changed, 140 insertions(+), 115 deletions(-)

diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html
index c41731825..279345bf2 100644
--- a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html
+++ b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.html
@@ -1,119 +1,126 @@
-<div class="column">
-    <div class="info">
-        <tui-avatar
-            src="@tui.user"
-            [size]="'xxl'"
-            [style.border-radius]="'9rem'"
-            [style.height]="'9rem'"
-            [style.width]="'9rem'"
-        />
-        <header tuiHeader>
-            <h3 tuiTitle>
-                Administrator
-                <div
-                    [style.align-items]="'center'"
-                    [style.display]="'flex'"
-                    [style.gap]="'0.5rem'"
-                >
-                    <span tuiSubtitle>Status:</span>
-                    <tui-badge
-                        appearance="success"
-                        tuiStatus
+<div class="top">
+    <div class="column">
+        <div class="info">
+            <tui-avatar
+                src="@tui.user"
+                [size]="'xxl'"
+                [style.border-radius]="'9rem'"
+                [style.height]="'9rem'"
+                [style.width]="'9rem'"
+            />
+            <header tuiHeader>
+                <h3 tuiTitle>
+                    Administrator
+                    <div
+                        [style.align-items]="'center'"
+                        [style.display]="'flex'"
+                        [style.gap]="'0.5rem'"
                     >
-                        Online
-                    </tui-badge>
-                </div>
-                <span tuiSubtitle>Number of animals: {{ animals.length }}</span>
-            </h3>
-        </header>
-    </div>
-    <tui-pie-chart
-        size="xl"
-        [style.margin-left]="'auto'"
-        [style.margin-right]="'auto'"
-        [tuiHintContent]="content"
-        [value]="value"
-    />
-
-    <ng-template
-        #content
-        let-index
-    >
-        <span>{{ value[index] | tuiAmount: 'RUB' | async }}</span>
-        <div>{{ labels[index] }}</div>
-    </ng-template>
+                        <span tuiSubtitle>Status:</span>
+                        <tui-badge
+                            appearance="success"
+                            tuiStatus
+                        >
+                            Online
+                        </tui-badge>
+                    </div>
+                    <span tuiSubtitle>Number of animals: {{ animals.length }}</span>
+                </h3>
+            </header>
+        </div>
+        <tui-pie-chart
+            size="xl"
+            [style.margin-left]="'auto'"
+            [style.margin-right]="'auto'"
+            [tuiHintContent]="content"
+            [value]="value"
+        />
 
-    <button
-        appearance="primary"
-        tuiButton
-        (click)="openTable()"
-    >
-        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
+            #content
+            let-index
+        >
+            <span>{{ value[index] | tuiAmount: 'RUB' | async }}</span>
+            <div>{{ labels[index] }}</div>
         </ng-template>
-    </tui-expand>
-</div>
 
-<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>
+        <button
+            appearance="primary"
+            tuiButton
+            (click)="openTable()"
+        >
+            Open Table
+        </button>
+    </div>
+
+    <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>
+</div>
+<div class="events">
+    <div>
+        <button
+            iconEnd="@tui.panel-top-open"
+            tuiLink
+            (click)="expanded = !expanded"
+        >
+            Open Calendar
+        </button>
+        <tui-expand [expanded]="expanded">
+            <ng-template tuiExpandContent>
+                <tui-calendar-range
+                    class="calendar"
+                    [items]="items"
+                    [value]="calendarValue"
+                    (valueChange)="onDayClick($event)"
+                />
+            </ng-template>
+        </tui-expand>
     </div>
+    @if (calendarValue) {
+        <div>Chosen date: {{ calendarValue }}</div>
+    }
 </div>
diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.less b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.less
index 23acd2153..b3705d7f0 100644
--- a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.less
+++ b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.less
@@ -1,4 +1,16 @@
 :host {
+    display: flex;
+    flex-direction: column;
+}
+
+.events {
+    display: flex;
+    padding: 1rem;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.top {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts
index 4748f6925..0d9a09f60 100644
--- a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts
+++ b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts
@@ -2,17 +2,22 @@ import {AsyncPipe, CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular/core';
 import {TuiPieChart} from '@taiga-ui/addon-charts';
 import {TuiAmountPipe} from '@taiga-ui/addon-commerce';
-import type {TuiDay} from '@taiga-ui/cdk';
+import type {TuiDayRange} from '@taiga-ui/cdk';
 import {
     TuiAppearance,
     TuiButton,
-    TuiCalendar,
     TuiExpand,
     TuiHint,
     TuiLink,
     TuiTitle,
 } from '@taiga-ui/core';
-import {TuiAvatar, TuiBadge, TuiStatus} from '@taiga-ui/kit';
+import {
+    TuiAvatar,
+    TuiBadge,
+    TuiCalendarRange,
+    tuiCreateDefaultDayRangePeriods,
+    TuiStatus,
+} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 
 @Component({
@@ -26,7 +31,7 @@ import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
         TuiAvatar,
         TuiBadge,
         TuiButton,
-        TuiCalendar,
+        TuiCalendarRange,
         TuiCardLarge,
         TuiExpand,
         TuiHeader,
@@ -41,9 +46,10 @@ import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AdministratorComponent {
+    protected items = tuiCreateDefaultDayRangePeriods();
     protected readonly value = [13769, 12367, 10172, 3018, 2592];
     protected readonly labels = ['Food', 'Сleaning', 'Electricity', 'Water', 'Other'];
-    protected calendarValue: TuiDay | null = null;
+    protected calendarValue: TuiDayRange | null = null;
     protected expanded = false;
 
     protected animals = [
@@ -80,7 +86,7 @@ export class AdministratorComponent {
         this.openTableChange.emit(true);
     }
 
-    protected onDayClick(day: TuiDay): void {
+    protected onDayClick(day: TuiDayRange | null): void {
         this.calendarValue = day;
     }
 }