typescript 显示组件宽度不透明度为5s +按日期排序

Posted 2021-05-20

import {Component, Input, OnInit} from '@angular/core';
import * as I from '../../general/Models/interfaces';
import * as ITichnun from '../../general/Models/tichnun.interface';
import {tihnunArihatData} from '../../../../assets/mock-data/tihnun-ariha-mock';
import {ISugTzerufListItems} from '../../general/Models/interfaces';
import {Observable} from 'rxjs';
import 'rxjs-compat/add/observable/of';
import 'rxjs-compat/add/operator/delay';


@Component({
    selector: 'app-tichnun-ariha',
    templateUrl: './tichnun-ariha.component.html',
    styleUrls: ['./tichnun-ariha.component.scss']
})
export class TichnunArihaComponent implements OnInit {

    breadcrumbsList: Array<I.ISiteLink> = [
        {
            link: '#',
            text: 'תכנון הבחנות'
        },
        {
            link: '#',
            text: 'איתור כיתות'
        },
        {
            link: '#',
            text: 'תכנון תלת שנתי לתלמיד'
        },
        {text: 'תכנון למקצוע אנגלית'}
    ];
    subTitleBarData: ITichnun.ISubTitleBarData = {
        icon: 'pencil-w.svg', h3: 'תכנון לתנ"ך כללי',
        mainLinkText: 'אביבה פיינברג',
        mainLinkHref: '',
        numberAndSubject: 'י"א 2',
        moreInfo: 'מידע מלא על תוכניות הלימוד ניתן למצוא ב',
        moreInfoLinkText: 'אתר המפמ"ר בהסטוריה',
        moreInfoLinkHref: '#'
    };

    herkevTzerufim: ISugTzerufListItems[] = [];
    interval = 0;


    constructor() {
        this.herkevTzerufim = tihnunArihatData;

    }

    ngOnInit() {
        setTimeout(() => {
            this.interval = 1;
        }, 5000);
    }

    onDeleteZiruf(event) {
        this.herkevTzerufim.forEach((ziruf) => {
            if (event === ziruf.sugTzerufId) {
                this.herkevTzerufim.splice(this.herkevTzerufim.indexOf(ziruf), 1);
            }
        });
    }

    getIndex(index) {


    }


}

<app-breadcrumbs [breadcrumbsList]="breadcrumbsList"></app-breadcrumbs>
<div class="tichnun-ariha">
    <div class="title-wrapper">
        <div><h2 id="page-title" class="page-title">עריכת תכנון</h2></div>



    <div class="top-line">
        <button  kendoButton [icon]="'edit'" class="reg-btn chief-btn btn-top-line">הוספת תכנון למקצוע/דרישה</button>
        <button  kendoButton [icon]="'trash'" class="reg-btn chief-btn blue-outline-btn"> מחיקת תכנון למקצוע</button>
    </div>
    </div>

    <div>
        <app-sub-title-bar [subTitleBarData]="subTitleBarData"></app-sub-title-bar>
    </div>

    <div *ngFor="let i of herkevTzerufim | orderByDate let index=index" [ngClass]="{'older': index > interval}">
        <app-tihnun-ariha-details    [herkevTzerufim]="i" (emitId)="onDeleteZiruf($event)">


        </app-tihnun-ariha-details>
    </div>
    <div class="actions">
        <button type="submit" class="reg-btn blue-btn btn-submit"  >סגירה</button>
    </div>
</div>

.tichnun-ariha #page-title.page-title {
    margin-bottom: 24px!important;
    margin-top: 14px!important;
}


.tichnun-ariha .title-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    .top-line{
        margin-bottom: 0;
    }

    button.reg-btn.chief-btn.btn-top-line.k-button-icontext.k-button{
        margin-left: 15px;
    }


}
.actions{
    display: flex;
    justify-content: flex-end;
    margin-top: 31px;
}
.older {
    opacity: 0.5;
}

import {Pipe, PipeTransform} from '@angular/core';
import {ISugTzerufListItems} from '../../general/Models/interfaces';

@Pipe({
    name: 'orderByDate'
})
export class OrderByDatePipe implements PipeTransform {

    transform(herkevTzerufim: ISugTzerufListItems[], args?: any): any {
        // console.log('herkevTzerufim', herkevTzerufim);
        let newTzerufim = herkevTzerufim.sort((a: any, b: any) => {
            return new Date(b.updateDate).getTime() - new Date(a.updateDate).getTime();

        })
        return newTzerufim;
    }

}