# Nuxt 3 For ProU Reseller Central site

For underlying Nuxt 3 info, look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

To use it, it is similar to the older Vue distributions
Clone the repro from BitBucket to your local host

1. Go to the reseller-central directory and run "npm install" - this should get all the dependencies like it did for Vue
2. Once complete (assuming all goes well) run "npm run dev" (instead of the "npm run serve" for the older process)
3. Once the server tries to setup on the localhost:3000 port (instead of 8080 - it will show the URL as it sets itself up) - the end of the startup process should look like:

`ℹ Using yup with vee-validate	3:11:17 PM `     
`ℹ Vite client warmed up in 28178ms  3:11:48 PM  `  
`✔ Nitro built in 14953 ms  `       

Nitro is the name of the dev server system. 

Styling is pretty similar to the Vue components in the Catalog. I've installed the CSS files from the current site in the /assets/css/ path; one difference you may notice is that there is no longer a "src" path in the directory.

Nuxt uses the file system to configure the site and routing automatically. Most of the routing is based on the "/pages/" directory. Any page in that directory defines the URL with the "index.vue" file being the home page. The files in that directory are the containers for the other components and code used to create that page. The items in the "/components/" directory and subdirectories are available to the files in the "pages" directory to create what is resolved in the browser. 

I've tried to organize these subdirectories so they relate to the pages the components are mostly used or what types of data they relate to. The tag references in the parent pages include components subdirectories in a pascal case reference; e.g., in the index.vue file is a tag for <OrdersExistingStudentSelect /> which references the component in "/components/orders/ExistingStudentSelect.vue". You will also see a "/components/common/" subdirectory which has a number of components for things used in various places - like buttons, search lists, headers, footers, nav, etc. These are used by the components in the other subdirectories, often passing variables (called "props") to populate the selection lists and other things. Each of these components (and the pages) have their own <style> spaces, same as the Vue stuff you worked with before.

One big styling change is the inclusion of configurable/reusable layouts (which are defined in the "/layouts/" directory, of course). Layouts are used in the parent files in the "/pages" directory to define what they look like. What, if any, layout is determined by tags in the pages, usually the third line in the parent <template> section and look like:
  
    `<NuxtLayout name="default">`

I've set up templates for things like the Guides, Enrollment, and Student pages. These layouts are basically Vue files with their own <style> section also available. You can poke around to see how they are set up and where changes can be made.

One thing to be aware of is that changes are not always passed through to the running process. I think most CSS stuff flows through, but if you add a new CSS file outside already defined spaces you will probably need to restart the dev server (i.e., do a "CTL-C" to stop it and "npm run dev" to start it again). If you have made a change and it doesn't show up soon-ish (like w/i 10-20 seconds), try restarting to see if that gets the result you were looking for. While the individual Vue files have their own, generally skoped, <style> sections, the css files in the /assets/css/ directory do affect tags in the whole site, just as they would in other sites. 

As with the Catalog, I do use Vuetify for some of the UI components (those are the ones generally starting with "<v- " ). This version is newer that what is used on the Catalog site - version 3 - and the documentation is at https://vuetifyjs.com/en/.
## API Endpoints Used
Below is a list of API calls made by the application. Environment variables (from nuxt.config.ts runtimeConfig.public) are used to form base URLs:
- ADMIN_API = process.env.VUE_APP_API_URL
- PU_BT_API_URL = process.env.PU_BT_API_URL
- BASIC_AUTH = base64(username:password) from VUE_APP_D7_USERNAME/VUE_APP_D7_PW
- COURSE_API or COURSE_BASE may be used in some composables

Each entry shows: METHOD — URL pattern — Source (file:function)

- GET — ${ADMIN_API}/prou_api/v1/prou_orders/order_details?reseller_name={schoolId} — composables/orderFetch.js: fetchResellerOrders
- GET — ${ADMIN_API}/prou_api/v1/prou_orders/order_details/{orderNum}?reseller_name={schoolId} — composables/orderFetch.js: fetchSingleOrder
- POST — ${ADMIN_API}/prou_api/v1/prou_orders/order_details — composables/orderFetch.js: createNewOrder
- PUT — ${ADMIN_API}/prou_api/v1/prou_orders/order_details/{order.id} — composables/orderFetch.js: updateOrder (uses X-CSRF-Token)

- GET — ${ADMIN_API}/prou_api/v1/reseller_student/students/{schoolId} — composables/studentFetch.js: fetchResellerStudents
- GET — ${ADMIN_API}/prou_api/v1/reseller_student/student/{studentPin} — composables/studentFetch.js: fetchResellerStudentInfo
- POST — ${ADMIN_API}/prou_api/v1/reseller_student/students/{schoolId} — composables/studentFetch.js: addNewStudent
- PUT — ${ADMIN_API}/prou_api/v1/reseller_student/students/{studentPid} — composables/studentFetch.js: updateStudent

- POST — ${ADMIN_API}/prou_api/v1/reseller_student/user/token — composables/authGetToken.js: authGetToken
- GET — ${ADMIN_API}/prou_api/v1/profiles/user/{userUuid} — composables/authGetToken.js: getUserBase

- GET — ${PU_BT_API_URL}/getToken — composables/braintreeApi.js: getBTClientToken
- POST — ${PU_BT_API_URL}/processTransaction — composables/braintreeApi.js: processOrder
- POST — ${PU_BT_API_URL}/processTransaction — composables/braintreeApi.js: orderProcess

- GET — ${ADMIN_API}/prou_api/v1/prou_orders/discounts/{discountCode}/{resellerId} — composables/discountFetch.js: fetchDiscount
- GET — ${ADMIN_API}/prou_api/v1/prou_orders/discounts?resellerId={resellerId} — composables/discountFetch.js: fetchResellerDiscountList

- GET — ${ADMIN_API}/prou_api/v1/schools/reseller_catalog/{schoolId} — composables/productFetch.js: getResellerProducts
- GET — ${ADMIN_API}/prou_api/v1/prou_products/product_display/{schoolId}/{productSku} — composables/productFetch.js: getResellerProduct

- GET — ${ADMIN_API}/prou_api/v1/schools/reseller_profile/{schoolId} — composables/resellerFetch.js: fetchResellerInfo
- GET — ${ADMIN_API}/prou_api/v1/courses/courseProdSchool?resellerId={resellerId} — composables/resellerFetch.js: getResellerCourses

- GET — ${ADMIN_API}/prou_api/v1/schools/guides?guide_topic=reseller-central-guide — composables/guideContentFetch.js: fetchGuideContent

- GET — ${ADMIN_API}/prou_api/v1/prou_products/courses_package/{productSku} — composables/packageItemsFetch.js: fetchPackageCourses

- GET — ${ADMIN_API}/prou_api/v1/reseller_student/student/{uname} — composables/accountFetch.js: fetchAccountInfo

- POST — ${ADMIN_API}/prou_api/v1/reseller_student/user/login — composables/drupalLogin.js: drupalLogin

- GET — /api/logOut — components/common/NavHeaderR.vue: logout (internal Nitro server route)

- GET — ${COURSE_API}/api/roster/{courseId}/{studentPin} — composables/courseDetail.js: fetchStudentClassDetails

Notes:
- Most calls include a Basic Authorization header via BASIC_AUTH and set 'Content-Type: application/json'.
- Some calls require cookies (e.g., schoolid, studentpin) to populate URL parameters.
- updateOrder includes an X-CSRF-Token header retrieved via authGetToken().