== Имплементација на случаи на употреба == На следната табела се прикажани сработените кориснички сценарија: || '''ID''' || '''Use Case''' || || 1 || Регистрација || || 2 || Најава || || 3 || Преглед на почетната страна || || 4 || Филтрирање производи || || 5 || Пребарување производи || || 6 || Додавање/менување производ || || 7 || Прoдавач панел на направени нарачки || || 8 || Историја на нарачки || || 9 || Поднесување нарачка || || 10 || Остави оценка (rating, review) || [[BR]] == Нерегистриран Корисник == === Use Case ID: 1 – Регистрација === [[Image(Registracija.png)]] [[BR]] Корисникот го кликнува копчето за регистрација со што се извршува основна валидација на формата на клиентска страна (ако станува збор за купувач, последната селекција од регистрацијата не треба да биде селектирана). [[Image(registracija-osnovna validacija.png)]] [[BR]] Потоа аuthContext праќа POST барање до backend (аuth.js/register). По успешен одговор од серверот, аuthContext ја зачувува корисничката информација во својот локален state и ја запишува во localStorage за постојана сесија и побрзо ажурирање. [[BR]] [[Image(register authcontext.png)]] [[BR]] На серверот се извршува повторна валидација и проверка дали веќе постои корисник со дадените податоци. Ако валидацијата е успешна, backend креира нов запис во табелата users и враќа информации за корисникот. На серверот се валидира, проверува дали корисникот постои, хешира лозинка и креира запис во датабазата. [[BR]] [[Image(register backend.png)]] [[Image()]] [[Image()]] [[Image()]] [[Image()]] === Use Case ID: 2 – Најава === Корисникот притиска „Log in“ копче на страницата. [[BR]] [[Image(Najava.png)]] [[BR]] [[Image(login code.png)]] [[BR]] Клиентот повикува login() од аuthContext, која потоа праќа POST барање /api/auth/login до backend. Кај фронтенд, при успех кај серверот, аuthContext ја обновува состојбата (и запишува во localStorage-за повторно вчитување по refresh). [[BR]] [[Image(login authcontext.png)]] [[BR]] Backend контролер ја верификува лозинката, креира JWT токен и враќа user + token. [[BR]] [[Image(login backend.png)]] == Најавен Корисник == === Use Case ID: 3 – Преглед на почетната страна === [[Image(Home-logedin.jpg​)]] [[BR]] За да ги преземе информациите за продуктите од backend-от ја повикува функцијата fetchProducts. [[Image(fetchProducts.png)]] [[BR]] Вackend-от креира база каде ќе ги зачувува податоците за продуктите и потоа тие ги враќа назад на frontent-от во вид на јson формат. [[BR]] [[Image(prikazuvanje produkti 1.png)]] [[Image(prikazuvanje produkti 2.png)]] === Use Case ID: 4 – Филтрирање производи === Корисникот внесува текст во полето за пребарување и/или избира категорија. [[Image(Filtriraj.png)]] [[BR]] По избраната категорија со функцијата handleCategoryChange се повикува fetchCategories(filters) од productContext. ProductContext праќа HTTP GET и се поврзува со backend-от и на ист принцип како кај Home ги земa продуктите, само што сега го зачувува филтерот и после од базата каде што се наоѓаат сите продукти ги избера само оние кои ја имаат таа категорија (тоа id). Kонтекстот го ажурира products и loading. Home компонентата се ререндерира и прикажува филтрираните резултати. [[BR]] [[Image(prikazuvanje produkti 1.png)]] [[Image(prikazuvanje produkti 2.png)]] === Use Case ID: 5 – Пребарување производи === [[Image(Prebaraj.png)]] [[BR]] Принципот на функционирање е ист како и кај филтрирање, само што наместо fetchCategories() се повикува fetchProducts(). [[BR]] [[Image(home.png)]] [[Image(fetchCategories.png)]] [[Image(prebaraj.png)]] Доколку сака да пребара дефиниран продукт или да отвори некој продукт, за да ги земе информациите се праќа барање до backend-от со тоа ид за прозвод, проверува дали го има тој продукт (со тоа ид) во базата и ако го има го враќа назад како одговор. [[BR]] [[Image(get 1 product.png)]] === Use Case ID: 6 – Додавање/Менување производ === [[Image(uredi proizvod.png)]] === Kреирање производ === [[Image(dodajProizvod.png)]] Откако ќе се пополнаат потребните информации, се повикува функцијата од productContext што креира нов производ преку API. Прима објект со внесените податоци и креира FormData за да ги смести текстот и датотеките (сликите) заедно. [[BR]] [[Image(createProduct.png)]] [[BR]] Потоа прави POST барање до /products во backend-от за да ги зачува промените. [[BR]] [[Image(createProduct backend.png)]] === Уреди производ === Кога ќе се променат информациите, со кликање на submit копчето, преку функцијата submit handler која се повикува кога корисникот поднесува формата за уредување на продукт се праќа PUT барање до /products/{id} (за ажурирање на постоечки податоци на серверот). [[BR]] [[Image(editProduct.png)]] [[BR]] Го зема прозводот со неговите податоци, бара да биде спроведена автентикација како продавач, и да може да има максимум 5 слики. Проверува во базата дали тој продукт веќе постои и припаѓа на корисник. Потоа ги парсира постоечките слики од JSON. Ако има ставено нови слики, ги додава во низа со постоечките и на крај ги зема првите 5 слики (услов). Ја ажурира базата со новите вредности и го враќа променетиот продукт. [[Image(editProduct backend 1.png)]] [[Image(editProduct backend 2.png)]] === Aктивирај/деактивирај производ === [[BR]] Функцијата handleDeleteProduct праќа DELETE барање до серверот за да го деактивира (soft delete). Потоа ја менува листата на продукти со новите промени со функцијата fetchUserProducts. Кај повторно активирање на даден производ со функцијата handleReactivateProduct се прави истото како кај деактивирање само се користи PATCH HTTP метод за делумно ажурирање на информации на серверот. [[BR]] [[Image(activate_deactivate.png)]] [[Image(activate_deactivate backend.png)]] === Избриши производ === Функцијата handlePermanentDelete праќа постојано (permanent) DELETE барање до серверот за да ги избрише податоците. Го предупредува корисникот за сигурноста во неговата постапка за бришење и ако таа одлука е потврдна потоа ја ажурира листата на продукти со новата промена. [[Image(deleteProduct.png)]] [[BR]] За да може целосно да го избрише производот, мора да е автентициран како продавач и да биде негов производ. Ако постои тој производ и припаѓа на соодветниот продавач го наоѓа во базата, проверува дали прво е деактивиран па потоа го брише од базата и појавува порака за успешно бришење. [[BR]] [[Image(deleteProduct backend.png)]] === Use Case ID: 7 – Преглед на панелот на направени нарачки === [[Image(seller dashboard.png)]] Ги прикажува сите нарачки кои кои содржат производи од логираниот продавач. Се прави GET повик кон backend (/orders/admin/all) и се добиваат нарачките. [[Image(seller panel-all orders.png)]] [[Image(order dashboard backend 1.png)]] [[Image(order dashboard backend 2.png)]] === Смени статус на нарачка === По добивање, може да се применува клиентско филтрирање со помош на функцијата useCallback се филтрира со зависност филтер по статус (all, pending, confirmed, processing, shipped, delivered, cancelled). [[BR]] [[Image(update status.png)]] Еве како изгледа backend-ot за да се смени статусот. Се овозможува на продавачите да го ажурираат статусот на нарачка, при што се проверува дали статусот е валиден. Ако нарачката се откаже, автоматски се враќаат количините на производите во магацин. [[Image(order status backend 1.png)]] [[Image(order status backend 2.png)]] === Use Case ID: 8 – Историја на нарачки === [[Image(order history.png)]] Се презема историјатот на нарачки на најавениот корисник. За секоја нарачка се земмаат продуктите кои биле нарачани и се прикажуваат основни информации. [[Image(order history backend 1.png)]] [[Image(order history backend 2.png)]] === Use Case ID: 9 – Поднесување нарачка === [[Image(Place Order-kupuvac.png)]] Поднесување на нарачката и приказ на историјата на нарачки. [[BR]] Kорисникот да креира нарачка од производите во својата кошничка. [[Image(kupi proizvod.png)]] Се проверува залихата и се пресметува вкупната сума. Ако сè е во ред, се креира нарачка, артиклите се зачувуваат во базата, се намалува залихата, а кошничката се празни. [[Image(kupi backend 1.png)]] [[Image(kupi backend 2.png)]] [[Image(kupi backend 3.png)]] === Use Case ID: 10 – Остави оценка (rating, review) === [[Image(review izgled.png)]] [[BR]] Функцијата fetchReviews ги зима review-ата од серверот за одреден производ според неговото id. Се вчитуваат податоците и се праќа барање до серверот за да се земат review-ата. handleReviewAdded функцијата се повикува кога ќе се додаде нова рецензија. Се додава новата рецензија на врвот на листата, се затвора формата за додавање рецензија се зголемува бројот на рецензии. Функцијата handleReviewUpdate се повикува кога се менува/уредува постоечка рецензија и ги сменува старите со новите податоци, со handleReviewDelete се филтрира листата и ги враќа само оние рецензии чие id не е еднакво на reviewId, односно ја трга избришаната. [[BR]] [[Image(review.png)]] На страната на серверот прво се преземаат сите рецензии за продуктот, поточно се зема зема id-то на продуктот и содветните информации од базата, се поставуваат различните начини за сортирање на review-ата и ја сортира базата според одредениот тип на сортирање (најнови/најстари, најдобар рејтин/најмал, најкорисни). Потоа се брои вкупно рецензии, просечен рејтинг и распределба по ѕвезди (1-5). И на крај враќа одговор (листа на рецензии, статистики (вкупно, просек, распределба) и pagination (страна, лимит, вкупно страни)). [[Image(review backend 1.png)]] [[Image(review backend 2.png)]] За да додаде рецензија, прво зема податоци од корисник, проверува во база дали продуктот постои и е активен и дали претходно има оставено тој корисник review и rating. Исто така проверува дали корисникот го има купено продуктот (за верифицирана рецензија) и на крај додава нова рецензија во базата со внесените податоци од корицникот. [[Image(review backend 3.png)]] [[Image(review backend 4.png)]] [[BR]] Во продолжение даден е backend-от за ажурирање на податоците за review и бришење на review. [[BR]] [[Image(review backend 5.png)]] [[Image(review backend 6.png)]] Понатаму има можност автентициран корисник да гласа дали нечија рецензија е корисна или не, но не може да гласа за своја рецензија. Ако корисникот веќе гласал, гласот се ажурира; ако не, се зачувува нов глас. На крај, бројот на корисни гласови се пресметува и се ажурира во табелата за рецензии. [[Image(review backend 7.png)]] [[Image(review backend 8.png)]]