#Angular2 – Dodawanie pozycji dokumentu

Przy projektowaniu aplikacji, popełniłem parę błędów, które widzę dopiero teraz. Z większością z nich sobie radzę, ale czasami cierpi na tym funkcjonalność. Aplikacja nie będzie zatem w 100% zgodna z założeniami, ale to dało się przewidzieć. To jest właśnie doświadczenie, które m.in. chcę zdobyć przy tym projekcie. Nie wszystko mogłem przewidzieć, ale teraz już wiem, na co zwrócić uwagę, przy kolejnej aplikacji.

Przy dodawaniu pozycji, musiałem dodać kilka funkcji w komponencie, które wyliczają wartości pozycji. Przy zmianie każdego z pól, po jego dezaktywacji, uruchamia się funkcja, która przelicza pozostałe pola. Niżej opiszę dokładnie jak to działa, a tutaj działanie w praktyce:

ezgif-3-eb2c9d32f3

 

Podam tutaj funkcję tylko dla jednego pola, resztę można znaleźć na GitHub’ie, ale jest to tak proste, że łatwo można do tego dojść.

Tak wygląda funkcja dla pola netto:

nettoBlur() {
    if(!this.isNumeric(this.addPosition['netto']))
    {
        this.addPosition['netto'] = 0;
    }
    this.addPosition['netto'] = this.doublePrecision(this.addPosition['netto']);
    this.addPosition['vatSum'] = this.doublePrecision((this.addPosition['netto'] * this.addPosition['vat']) / (100 - this.addPosition['vat']));
    this.addPosition['brutto'] = this.doublePrecision((this.addPosition['vatSum'] * 100) / this.addPosition['vat']);
}

Korzysta ona jeszcze z dwóch funkcji z wewnątrz klasy:

isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

doublePrecision(num) {
    return Math.round(num * 100) / 100;
}

Pierwsza sprawdza, czy podana wartość jest liczbą, a druga służy, do zaokrąglenia liczby do dwóch miejsc po przecinku.

W funkcji isNumeric, najpierw po zrzutowaniu zmiennej do zmiennoprzecinkowej, sprawdzamy, czy zwraca wartość „NaN”, oraz jednocześnie sprawdzamy, czy liczba jest liczbą skończoną.

W funkcji double precision, mnożymy liczbę razy 100, przez co przecinek przesuwa się 2 miejsca w prawo, potem zaokrąglamy do całości i dzielimy przez 100, żeby przesunąć przecinek z powrotem w lewo o 2 pozycje. Tym sposobem otrzymujemy liczbę zaokrągloną do 2 miejsc po przecinku.

Funkcja nettoBlur(), jest wywołana przy akcji blur, czyli opuszczenia pola w danym inpucie:

<input type="text" name="netto" [(ngModel)]="addPosition.netto" (blur)="nettoBlur()">

Następnie sprawdzamy, czy podana wartość jest liczbą. Jeśli nie, to zmieniamy tą wartość na 0:

if(!this.isNumeric(this.addPosition['netto']))
{
    this.addPosition['netto'] = 0;
}

Następnie przeliczamy pozostałe pola, według wzoru na proporcje. (Chyba nie trzeba w tym kraju tłumaczyć, jak liczy się procenty):

this.addPosition['netto'] = this.doublePrecision(this.addPosition['netto']);
this.addPosition['vatSum'] = this.doublePrecision((this.addPosition['netto'] * this.addPosition['vat']) / (100 - this.addPosition['vat']));
this.addPosition['brutto'] = this.doublePrecision((this.addPosition['vatSum'] * 100) / this.addPosition['vat']);

Jeśli chodzi, o pozostałą funkcjonalność pola dodawania, to mamy tutaj jeszcze przełącznik, do zmiany rodzaju pozycji, który jednocześnie przełącza listę z usług na magazyn i odwrotnie. Zostało jeszcze usuwanie i edycja pozycji. Już wiem, jak to zrobić, tylko muszę to teraz przełożyc na kod. Muszę jeszcze zająć się odświeżaniem sum dokumentu, bo jak widać na gifie, dopóki nie odświeżymy strony ręcznie, są tam wartości 0, ale to nie będzie trudne.

Matura już za kilka dni, ale nie stresuję się nią. Potrafiłem sobie wytłumaczyć, że stres w wielu sytuacjach zwyczajnie nic nie zmieni, nie sprawi, że lepiej napiszę maturę, a jedynie pogorszy sytuację. Cieszę się, że udało mi się wypracować sobie takie podejście i udaje mi się często to wykorzystywać.

Zaczyna się ostatni miesiąc trwania konkursu, więc muszę się spiąć, żeby się wyrobić. Tak naprawdę, jak już napisze obsługę dokumentów, to reszta funkcjonalności zostanie skopiowana z istniejących komponentów, z małymi zmianami, bo jest to to samo, tylko z innymi danymi.

Muszę też powoli rozglądać się za jakimś VPS’em i ogarniać jego konfigurację, żeby móc zaprezentować moją aplikację gdziekolwiek.

Pozdrawiam!
MTK

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑