== Имплементација на случаи на употреба == На следната табела се прикажани сработените кориснички сценарија: || '''ID''' || '''Use Case''' || || 1 || Регистрација || || 2 || Најава || || 3 || Преглед на почетната страна || || 4 || Филтрирање производи || || 5 || Пребарување производи || || 6 || Додавање/менување производ || || 7 || Преглед на панелот на направени нарачки || || 8 || Смени статус на нарачка || || 9 || Додавање во кошничка || || 10 || Поднесување нарачка || || 11 || Преглед на мои нарачки || || 12 || Остави оценка (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 – Преглед на панелот на направени нарачки === Ги прикажува сите нарачки кои кои содржат производи од логираниот продавач. Се прави GET повик кон backend (/orders/admin/all) и се добиваат нарачките. По добивање, може да се применува клиентско филтрирање со помош на функцијата useCallback се филтрира со зависност филтер по статус (all, pending, confirmed, processing, shipped, delivered, cancelled). [[Image(seller panel-all orders.png)]] [[Image()]] [[Image()]] [[Image()]] === Use Case ID: 8 – Смени статус на нарачка === [[Image()]] Eve kako izgleda backend-ot za da se smeni statusot. [[BR]] [[Image(smeni status.png)]] [[Image()]] [[Image()]] === Use Case ID: 9 – Додавање во кошничка === Порака и изглед на кошничката по додавањето продукти. [[BR]] [[Image(Dodaden vo koshnicka-kupuvac.jpg)]] [[Image()]] === Use Case ID: 10 – Поднесување нарачка === Поднесување на нарачката и приказ на историјата на нарачки. [[BR]] [[Image(Place Order-kupuvac.png)]] [[Image()]] [[Image()]] === Use Case ID: 11 – Преглед на мои нарачки === Прво се појавува можност за разгледување нарачката, која е во состојба на чекање (pending). [[BR]] [[Image(Moi naracki, prazni-kupuvac.png)]] [[Image()]] [[Image()]] === Use Case ID: 12 – Остави оценка (rating, review) === [[Image(review izgled.png)]] [[BR]] Функцијата fetchReviews ги повлекува review-ата од серверот за одреден производ според неговото id. Се вчитуваат податоците и се праќа барање до серверот за да се земат review-ата. handleReviewAdded функцијата се повикува кога ќе се додаде нова рецензија. Се додава новата рецензија на врвот на листата, се затвора формата за додавање рецензија се зголемува бројот на рецензии. Функцијата handleReviewUpdate се повикува кога се менува/уредува постоечка рецензија и ги сменува старите со новите податоци, со handleReviewDelete се филтрира листата и ги враќа само оние рецензии чие id не е еднакво на reviewId, односно ја трга избришаната. [[BR]] [[Image(review.png)]] [[Image()]] [[Image()]] [[Image()]] [[Image()]]