# Przygotowanie komputera

## Instalacja node.js

https://nodejs.org/en/download

## Instalacja git

-   Windows - https://git-scm.com/download/win
-   Konfiguracja: podejdzie programista
    -   https://gitlab.infocity.pl/global/wiki/-/wikis/praca-z-gitlab

## Instalacja VS Code

https://code.visualstudio.com

## Konfiguroawanie VS Code

-   lewy pasek (ciemny) wybrać `Extensions` - poszukać rozszerzenia `Vue - Official` - zainstalować (Install)

# Ściągnięcie projektu z GitLab

-   wejść w adres projektu na GitLab poprzez przeglądarkę, przykładowo dla tego projektu będzie to:
    https://gitlab.infocity.pl/witkac/libraries/umowa-szablon-test
-   z lewego paska wybrać opcję "Repository"
-   w prawym roku pojawi się niebieski przycisk "Clone"
    -   po rozwinięciu pojawi się opcja "Open in your IDE" - "Visual Studio Code (SSH)"
    -   naley wskazać folder nadrzędny dla projektu, zostanie utworzony folder na projekt

# Praca z projektem w VS Code

-   otworzyć folder w Visual Studio Code (menu `File` -> `Open Folder`)
-   otworzyć Terminal (menu `Terminal` -> `New Terminal`)
-   uruchomić projekt wpisując w terminalu komendę `npm run dev` i Enter
    -   UWAGA: przed pierszym uruchomieniem nalezy jeszcze uruchomić `npm install`
-   szablon umowy znajduje się w pliku `views/UmowaPreview/UmowaPreview.vue`
-   dane do umowy znajdują się plikach `data/Umowa.ts` i `data/Oferta.ts`
-   aktualna dokumentacja tagów umowy znajduje się tutaj:
    -   https://npm.witkac.pl/-/web/detail/@witkac/document-components
    -   dostępna jest tez lokalnie w projekcie w pliku `node_modules/@witkac/document-components/README.md`

# Wysłanie zmian w projekcie

-   z lewego paska wyboramy opcję `Source Control`
-   w pole `Message` wpisujemy komentarz jakich zmian dokonaliśmy
-   wciskamy `Commit`
-   jak wszystko będzie ok to pojawi się przysisk `Sync Changes` - wciskamy

# Ściąganie najnowszych zmian (dokonanych przez inne osoby)

-   na dolnym (niebieskim) pasku mamy napis `master` i obok niego strzałki, wciskamy, następuje synchrnizacja

# Aktualizacja pakietów

-   gdy pojawi się koniecznośc aktualizacji komponentów tworzących umowę np. po zmianach naley w terminu wpisać komendę

    -   `npm install`

# Zmiany w stosunku do `umowa-components`

-   doszedł tag `w-section` który umożliwia podział dokumentu na sekcje, sekcja to zawsze pełna liczba stron, zwykle używamy do tego aby np. częśc dokumentu miała inną orientację (np. Harmonogram w poziomie) bo włąśnie dla sekcji da się to określić (podobnie jak osobny `w-header` i `w-footer`)
-   niektóre tagi (jak właśnie `w-preview`) dostały atrybut `schema` żeby wyciągać dane poprzez schemat, czyli zamiast pisać `<w-preview>{{ schema.NazwaZadania.$value</w-preview>` należy to zrobić tak `<w-preview :schema="schema.NazwaZadania"></w-preview>`. Dlaczego tak jest lepiej ? Chciażby dlatego że w te komponenty wbudowany jest mechanizm porówywania, i w trybie porównywarki zamiast pojedyńczego tekstu pojawią się oba, wcześniejszy i aktualny
-   w `w-tr` pojawił się atrybut `bg` który możemy sobie zdefiniować w tagu `w-document` i wtedy wszystkie komórki z tym atrybutem (lub całe wiersz bo można ustawić `bg` dla tagu `w-tr`) będa miały zdefiniowany kolor tła