feat: add contacts (#19)

* chore: Add contacts * fix: fix cspell * chore: update contacts * chore: add tui badge * chore: Add virtual scroll * chore: change service * fix: fix build * chore: add Initials * chore(deps): pin dependencies (#26) * chore(deps): update taiga-ui to v0.122.1 (#28) * chore(deps): pin dependencies (#33) * ci: add auto approve (#34) * ci: add auto approve * chore: lint * chore: remove ngClass and add if * fix: fix cspell * chore: add more elements * chore: change leyout contacts * chore: add Cell * fix: fix virtual scroll * chore: remove extra code * chore: resize avatar and make buttons * chore: phone buttons * chore: remove extra code * chore: remove recent buttons --------- Co-authored-by: taiga-family-bot <[email protected]> Co-authored-by: Maksim Ivanov <[email protected]>
taiga-family · Jul 30, 2024 · 0fa8766 · 0fa8766
1 parent 66ac992
commit 0fa8766
Show file tree

Hide file tree

Showing 8 changed files with 302 additions and 0 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -23,6 +23,10 @@
         "Neue",
         "apos",
         "stafffrter",
+        "Zhem",
+        "Oleg",
+        "Andrey",
+        "Gleb",
         "heatindex",
         "forecastday",
         "mintemp",

diff --git a/apps/taiga-lumbermill/public/example.png b/apps/taiga-lumbermill/public/example.png
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/contacts/contacts.component.html b/apps/taiga-lumbermill/src/dashboards/iot/components/contacts/contacts.component.html
@@ -0,0 +1,86 @@
+<div
+    tuiAppearance="whiteblock"
+    tuiCardLarge="normal"
+>
+    <tui-tabs [activeItemIndex]="activeTab">
+        @for (tab of tabs; track $index) {
+            <button
+                tuiTab
+                (click)="activeTab = $index"
+            >
+                <header tuiHeader>
+                    <h2
+                        tuiTitle
+                        [style.text-align]="'center'"
+                    >
+                        {{ tab }}
+                    </h2>
+                </header>
+            </button>
+        }
+    </tui-tabs>
+
+    @if (activeTab === 0) {
+        <tui-scrollbar>
+            <cdk-virtual-scroll-viewport
+                itemSize="57"
+                tuiScrollable
+                class="contacts-list viewport tui-zero-scrollbar"
+            >
+                <div
+                    *cdkVirtualFor="let person of contactsService.contacts"
+                    tuiCell="l"
+                >
+                    <tui-avatar
+                        [src]="person.img"
+                        [style.background]="person.img | tuiAutoColor"
+                    />
+                    <div tuiTitle>
+                        {{ person.name }}
+                        <div tuiSubtitle>{{ person.status }}</div>
+                    </div>
+                    <button
+                        appearance="icon"
+                        iconStart="@tui.phone"
+                        tuiIconButton
+                    >
+                        Call
+                    </button>
+                </div>
+            </cdk-virtual-scroll-viewport>
+        </tui-scrollbar>
+    } @else {
+        <tui-scrollbar>
+            <cdk-virtual-scroll-viewport
+                itemSize="57"
+                tuiScrollable
+                class="contacts-list viewport tui-zero-scrollbar"
+            >
+                <div
+                    *cdkVirtualFor="let person of contactsService.recent"
+                    tuiCell="l"
+                >
+                    <tui-badged-content>
+                        <tui-avatar
+                            class="avatar"
+                            [src]="person.img"
+                            [style.background]="person.img | tuiAutoColor"
+                        />
+                        <tui-icon
+                            size="s"
+                            tuiBadge
+                            tuiSlot="top"
+                            [appearance]="person.took ? 'error' : 'success'"
+                            [icon]="person.took ? '@tui.arrow-down-left' : '@tui.arrow-up-right'"
+                        />
+                    </tui-badged-content>
+                    <div tuiTitle>
+                        {{ person.name }}
+                        <div tuiSubtitle>{{ person.status }}</div>
+                    </div>
+                    <div tuiSubtitle>{{ person.last }}</div>
+                </div>
+            </cdk-virtual-scroll-viewport>
+        </tui-scrollbar>
+    }
+</div>
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/contacts/contacts.component.less b/apps/taiga-lumbermill/src/dashboards/iot/components/contacts/contacts.component.less
@@ -0,0 +1,23 @@
+@import '@taiga-ui/core/styles/taiga-ui-local.less';
+
+tui-tabs {
+    display: flex;
+    justify-content: space-around;
+}
+
+[tuiCardLarge] [tuiCell][data-size='l'] {
+    margin: 0;
+    border-radius: 0;
+    box-shadow: 0 1px var(--tui-border-normal);
+}
+
+.viewport {
+    height: 12.5rem;
+}
+
+tui-badged-content tui-avatar {
+    --t-size: 2.5rem;
+
+    font: var(--tui-font-text-m);
+    font-weight: 700;
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/contacts/contacts.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/contacts/contacts.component.ts
@@ -0,0 +1,53 @@
+import {
+    CdkFixedSizeVirtualScroll,
+    CdkVirtualForOf,
+    CdkVirtualScrollViewport,
+} from '@angular/cdk/scrolling';
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {
+    TuiAppearance,
+    TuiAutoColorPipe,
+    TuiButton,
+    TuiIcon,
+    TuiScrollable,
+    TuiScrollbar,
+    TuiSurface,
+} from '@taiga-ui/core';
+import {TuiAvatar, TuiBadge, TuiBadgedContent, TuiTab, TuiTabs} from '@taiga-ui/kit';
+import {TuiCardLarge, TuiCell} from '@taiga-ui/layout';
+
+import {ContactsService} from './contacts.service';
+
+@Component({
+    standalone: true,
+    selector: 'lmb-contacts',
+    imports: [
+        CdkFixedSizeVirtualScroll,
+        CdkVirtualForOf,
+        CdkVirtualScrollViewport,
+        CommonModule,
+        TuiAppearance,
+        TuiAutoColorPipe,
+        TuiAvatar,
+        TuiBadge,
+        TuiBadgedContent,
+        TuiButton,
+        TuiCardLarge,
+        TuiCell,
+        TuiIcon,
+        TuiScrollable,
+        TuiScrollbar,
+        TuiSurface,
+        TuiTab,
+        TuiTabs,
+    ],
+    templateUrl: './contacts.component.html',
+    styleUrl: './contacts.component.less',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ContactsComponent {
+    protected contactsService = inject(ContactsService).contactsData;
+    protected tabs = ['Contacts', 'Recent'];
+    protected activeTab = 0;
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/components/contacts/contacts.service.ts b/apps/taiga-lumbermill/src/dashboards/iot/components/contacts/contacts.service.ts
@@ -0,0 +1,130 @@
+import {Injectable} from '@angular/core';
+
+interface Contacts {
+    readonly name: string;
+    readonly status: string;
+    readonly img: string;
+}
+
+export const INITIAL_CONTACTS: Contacts[] = [
+    {name: 'Misha Zhem', img: './example.png', status: 'online'},
+    {name: 'Oleg B.', img: 'OB', status: 'online'},
+    {name: 'Andrey M.', img: 'AM', status: 'online'},
+    {name: 'Misha Zhem3', img: './example.png', status: 'online'},
+    {name: 'Vladimir D.', img: 'VD', status: 'online'},
+    {name: 'Gleb H.', img: 'GH', status: 'online'},
+    {name: 'Misha Zhem2', img: './example.png', status: 'online'},
+    {name: 'Misha Zhem4', img: './example.png', status: 'online'},
+    {name: 'Gleb H.', img: 'GH', status: 'online'},
+    {name: 'Andrey M.', img: 'AM', status: 'online'},
+];
+
+interface Recent {
+    readonly name: string;
+    readonly status: string;
+    readonly img: string;
+    readonly last: string;
+    readonly took: boolean;
+}
+
+export const INITIAL_RECENT: Recent[] = [
+    {
+        name: 'Misha Zhem4',
+        img: './example.png',
+        status: 'online',
+        last: '9:12 PM',
+        took: true,
+    },
+    {
+        name: 'Oleg B.',
+        img: 'OB',
+        status: 'online',
+        last: '11:35 AM',
+        took: true,
+    },
+    {
+        name: 'Andrey M.',
+        img: 'AM',
+        status: 'online',
+        last: '12:15 AM',
+        took: false,
+    },
+    {
+        name: 'Misha Zhem2',
+        img: './example.png',
+        status: 'online',
+        last: '8:45 PM',
+        took: false,
+    },
+    {
+        name: 'Misha Zhem',
+        img: './example.png',
+        status: 'online',
+        last: '1:10 PM',
+        took: false,
+    },
+    {
+        name: 'Misha Zhem3',
+        img: './example.png',
+        status: 'online',
+        last: '11:05 AM',
+        took: true,
+    },
+    {
+        name: 'Gleb H.',
+        img: 'GH',
+        status: 'online',
+        last: '1:15 AM',
+        took: false,
+    },
+    {
+        name: 'Vladimir D.',
+        img: 'VD',
+        status: 'online',
+        last: '3:15 PM',
+        took: true,
+    },
+    {
+        name: 'Oleg B.',
+        img: 'OB',
+        status: 'online',
+        last: '11:35 AM',
+        took: true,
+    },
+    {
+        name: 'Andrey M.',
+        img: 'AM',
+        status: 'online',
+        last: '12:15 AM',
+        took: false,
+    },
+];
+
+interface ContactsData {
+    readonly contacts: Contacts[];
+    readonly recent: Recent[];
+}
+
+export const INITIAL_DATA: ContactsData = {
+    contacts: INITIAL_CONTACTS.concat(
+        INITIAL_CONTACTS,
+        INITIAL_CONTACTS,
+        INITIAL_CONTACTS,
+        INITIAL_CONTACTS,
+        INITIAL_CONTACTS,
+    ),
+    recent: INITIAL_RECENT.concat(
+        INITIAL_RECENT,
+        INITIAL_RECENT,
+        INITIAL_RECENT,
+        INITIAL_RECENT,
+        INITIAL_RECENT,
+    ),
+};
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ContactsService {
+    public readonly contactsData = INITIAL_DATA;
+}
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.html
@@ -27,6 +27,10 @@
             <div class="grow">
                 <lmb-weather />
             </div>
+            <div class="grow"></div>
+            <div class="grow">
+                <lmb-contacts />
+            </div>
         </div>
     </div>
 </div>
diff --git a/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts b/apps/taiga-lumbermill/src/dashboards/iot/iot.component.ts
@@ -5,6 +5,7 @@ import {TuiCardLarge} from '@taiga-ui/layout';
 
 import {CleaningComponent} from './components/Cleaning/cleaning.component';
 import {ClimateControlComponent} from './components/climate-control/climate-control.component';
+import {ContactsComponent} from './components/contacts/contacts.component';
 import {ControlPanelComponent} from './components/control-panel/control-panel.component';
 import {CostComponent} from './components/Cost/cost.component';
 import {ElectricityComponent} from './components/electricity/electricity.component';
@@ -19,6 +20,7 @@ import {WeatherComponent} from './components/weather/weather.component';
         CleaningComponent,
         ClimateControlComponent,
         CommonModule,
+        ContactsComponent,
         ControlPanelComponent,
         CostComponent,
         ElectricityComponent,