jayaimzzz / rescueforce Goto Github PK

USER STORY: Host and shelter users will be able to click the log in button and enter their username and password for admission into protected pages of the application. Once successfully logged into the application, the user will be taken to their respective profile/portal pages. User will be able to click the same button to log out of the application.

DESCRIPTION & NOTES: This component should be a button that when clicked, pops up a modal login form that asks user for username and password. Failure to enter a valid username or password should result in a failure to log in message. User will be able to click the same button to log out of the application.

ACCEPTANCE CRITERIA: Clicking the Login Button pops up a modal login form that requires the user to enter username and password. Successful login will take host user to the hosts profile page. Successful login for shelter user will take the shelter user to the Shelter admin portal. Clicking the button after logging into the application will allow the user to successfully log out of the application.

USER STORY: User will be able to select a profile card for an animal and see all information relevant to that animal. Information will include the animal's: image, name, sex, age, and "about".

DESCRIPTION & NOTES: Container should pull all relevant information from the application's state (passed down as props) and display it in an organized, succinct manner. This container will appear on the animal list page, host's page, and shelter admin page.

ACCEPTANCE CRITERIA: Animal card reflects all current information about the animal.

User story:

A host can see the list of animals at a shelter that are in need of a foster home. When a host views this animal's profile, there is a button to claim the animal. This will update the animal's hostId to that of the host who clicked on the claim animal button.

USER STORY: Admin's interaction with the "Add an animal" button on the Shelter Admin Page should result in the added information being saved to state/database.

DESCRIPTION & TECHNICAL NOTES: Action creators and reducers for adding a new animal need to be added to appropriately wire up the AddAnimalModal. AddAnimalModal shouldn't need to pull any information from state but should be adding new information.

ACCEPTANCE CRITERIA: The AddAnimalModal component interacts with and saves information to state as appropriate.

USER STORY: User should see a header on the application's main (public) page that includes a number of adorable animals that entice the user to stay on and interact with the application.

DESCRIPTION & NOTES: Component should include images from the list of animals available for adoption. Component should be styled in a manner like the Humane Society header. Photos should continually rotate.

ACCEPTANCE CRITERIA: User sees a rotating string of adorable animals that are available for adoption.

Create dummy data based on the data schema. This data will be returned from out dummy api.

1. format the DOB in a more human readable way (the moments library will probably help with this)
2. display it's age which is calculated using the DOB (the moments library or JS Date object may help with this)
3. use the semantic-ui ribbon to display the animal's status. Have different color ribbons for different statuses.
4. display an appropriate icon and text if the animal is pregnant
5. display an icon and text indicating if it's male or female (edited)

USER STORY: User will be able to enter information into the front end application, which will use the appropriate API endpoints (to update the database).

DESCRIPTION & NOTES:

ACCEPTANCE CRITERIA:

USER STORY: On the host user's profile page, an authorized host user will be able to view their relevant profile information. Profile information will include user's name, address, phone number, number of animals, animal capacity. Container will also contain a button that pops up a modal window that allows user to edit profile information.

DESCRIPTION & NOTES: Container will include all information relevant to signed in host user. Container will contain a button that pops up a modal window through which authorized user can change his/her profile information.

ACCEPTANCE CRITERIA: Container is linked to redux; contains current profile information, and includes a button that allows authorized user to access modal edit window.

USER STORY: User will be able to click a button to log themselves out of the application. The log out button will be accessible to the user on all pages that have restricted access.

DESCRIPTION & NOTES: Component will log the user out of the application and will take the user back to the main public page.

ACCEPTANCE CRITERIA: Log out button appears in the same place on every page of the application. Log out button logs user out of the application and takes user to the main page.

USER STORY: User will be able to click a button that opens a modal window, allowing user to edit profile information.

DESCRIPTION & NOTES: This component will include a modal window that allows user to edit their information. This component will need to have "threaded through it" a photo upload component.

ACCEPTANCE CRITERIA: The profile will contain a functioning button that takes user to a modal window that allows user to update their information, including the upload of a photo.

USER STORY: On the Shelter Admin Portal, admin user can click on an "Add animal" link that will take user to the Animal Profile Page. Admin user can then use the add/edit animal button (modal form) to add a new animal. Admin user can also use that button to amend an existing animal's profile (such as changing the foster animal's adoption/foster status and the name of the host family).

DESCRIPTION & NOTES: Link will take admin user to the add/edit animal modal on the animal profile page.

ACCEPTANCE CRITERIA: To add a new animal, Admin user can navigate from the Shelter Admin Portal to the add/edit animal modal on the Animal Profile Page. Only Admin user will be able to add an animal.

Create schemas to represent the data we would like to get from the backend.

USER STORY: Host user will be able to send and receive messages from other host users and the shelter users. Messages will be listed in descending order (newest message first).

DESCRIPTION & NOTES: Component will include messages between the signed in host user and other hosts/shelter users. This component will appear on the Hosts Profile page.

ACCEPTANCE CRITERIA: List of messages will include all messages between signed in user and other host/shelter users. Messages will be listed in descending order (by time created) with the newest user first. List will appear on the Hosts Profile Page.

USER STORY: When looking at the host profile, user will see the host's name and image and the shelter's name and image in place of the current shelterId and hostId properties.

DESCRIPTION & TECHNICAL NOTES: Update the animal profile properties for shelterId and hostId with the shelter and hosts name and photos.

ACCEPTANCE CRITERIA: Authorized user will see the name and photo of the admin and host users rather than the more technical shelterId and hostId.

USER STORY: User will interface with separate, distinct pages in the application.

DESCRIPTION & NOTES: This ticket will require the creation of a number of components/pages that will establish the set up for the application. Pages will have div markers identifying where components made under other tickets will be placed. Pages will include Host Page, Animal Profile, Main (Public Entry) Page, Animal List Page, Shelter Admin Page. Shelter page shall include a link to the list of foster homes.

ACCEPTANCE CRITERIA: Application consists of distinct pages with div markers indicating where functional components will be placed.

USER STORY: After successful login, admin user will be taken to this page, which contains links that authorized admin user is able to access.

DESCRIPTION & TECHNICAL NOTES: This page should be a simple page that includes links that the authorized host user can click to access all other portions of the application.

ACCEPTANCE CRITERIA: Admin can access all portions of the application from this page upon successful login.

USER STORY: New user will be directed to a registration page that will contain relevant information for registering to be a host. Page will also include an application component that, upon click of a "submit" button, is sent to shelter admin for approval.

DESCRIPTION & NOTES: Component will include text related to registration as a new host user. Component will also include an application component (for completion by new user) and a button component that once clicked, submits the new host applicants application to admin for review and approval.

ACCEPTANCE CRITERIA: Page displays criteria for registration and allows user to complete and submit an application to Shelter admin for approval.

USER STORY: On the main page, the use should see a link to the main animal list. Link will direct user to Animal List Page, where user can filter animals by age, location, breed, etc.

DESCRIPTION & NOTES: Link tag.

ACCEPTANCE CRITERIA: Link directs user to the animal list page, where animals can be filtered for view.

USER STORY: New user can click a Register button that will direct them to a registration page.

DESCRIPTION & NOTES: Simple button component that directs user to the new user Registration page.

ACCEPTANCE CRITERIA: Button takes user from main public page to registration page.

USER STORY: User will be able to navigate to the Main (public) page, the Shelter User's Admin Portal, and the Host User's Profile Page.

DESCRIPTION & NOTES: Nav bar will provide user links to the host profile page and shelter admin page. Nav bar will have a link to the main public page (where interested new user can submit an application to be a foster parent).

ACCEPTANCE CRITERIA: Nav bar is consistent with the rest of the application in terms of style. The links included on the nav bar are functioning and allow users to navigate only to pages they're authorized to access.

USER STORY: Admin user will be able to view the message forum and exchange messages on the shelter admin page. The message forum will be the same forum that appears on the Host Profile page.

DESCRIPTION & NOTES: Include on the Shelter Admin Page the message component that appears on the Host Profile Page.

ACCEPTANCE CRITERIA: Admin user can send and receive messages in the message form.

USER STORY: Animal modal update window will grey out those boxes that host users aren't authorized to change, such as shelter id, host id, animal id, (adoption) status.

DESCRIPTION & TECHNICAL NOTES: Change will need to be made to the animal update and animal add modal components. UPDATED: use ternary statement to make sure that host users can't view or change certain properties on the animal modal window (that an admin user can). Those items include the shelterId, hostId, animalId, and adoption/foster status.

ACCEPTANCE CRITERIA: Shelter Id, Host Id, Animal Id, and status will be greyed out (and therefore not subject to update) if the user is a host user. Admin shelter users will have access to change these inputs.

USER STORY: User will access distinct components through the main views of the application.

DESCRIPTION & NOTES: This ticket will require the creation of a number of components to fill in the contents of the established pages. Components will include the Host Profile, Animal Card, Nav Bar, Image Scroll, Animal Info Form, Animal List Filter, and Host Card (for the Host List).

ACCEPTANCE CRITERIA: Application pages leverage distinct components populated with div markers.

DESCRIPTION & NOTES: This ticket will require the creation of a number of components that will establish the set up for the application. Components will render as div markers identifying their identity and general placement within the page.

ACCEPTANCE CRITERIA: Application consists of distinct pages with div markers indicating where components are placed.

USER STORY: Any user will be able to navigate to the application's home page, which will contain the main page nav bar (see tix 28), Mission statement, scrolling animal images, etc., as well as links for authorized users to log into their accounts and new users to register.

DESCRIPTION & TECHNICAL NOTES: This container will house all components necessary to navigate through the rest of the application, and will include the login and register links. See board notes for notes on aesthetics (i.e. links that allow the user to jump to appropriate sections of the page).

ACCEPTANCE CRITERIA: Unauthorized user can use this page to learn about RescueForce and to register to be a host. Authorized user can use this page to navigate to their respective home pages.

USER STORY: User will see the application's mission statement prominently displayed in the applications public page.

DESCRIPTION & NOTES: The mission statement will be hardcoded into the Main (public) page. Mission statement will not appear in a component.

ACCEPTANCE CRITERIA: Mission statement is stylishly and prominently displayed on the main page.

USER STORY: On the Host List Page, the admin user will see a list of thumbnail cards for all hosts. Admin user will be able to click on the thumbnail, which will take the admin user to the host's full profile page.

DESCRIPTION & NOTES: Thumbnail card will be a component that includes the host user's avatar image, location, capacity (number of animals the host is willing to take), and the species the host is willing to accept. Card should have an event handler that takes the admin user to the host's full profile page.

ACCEPTANCE CRITERIA: Admin user sees a thumbnail view of all hosts. The thumbnail card can be clicked, which will direct user to the hosts profile page.

USER STORY: After successful login, host will be taken to this page, which contains links that authorized host is able to access.

DESCRIPTION & TECHNICAL NOTES: This page should be a simple page that includes links that the authorized host user can click to access other portions of the application, including the animal profile page, animal list, and host profile page.

ACCEPTANCE CRITERIA: Host can access all relevant portions of the application from this page upon successful login.

USER STORY: On the Host List Page, the admin user can use the filter bar to sort the database query results (hosts). The admin user will be able to view host thumbnail cards; thumbnail cards will contain the hosts' species accepted, capacity, and name. The sort criteria (species, capacity, and name) will appear in the filter bar in the form of drop down menus. Capacity should appear in ranges, such as 1-2, 3-4, 5+. (STRETCH: add location.)

DESCRIPTION & NOTES: Component will pull relevant information from state.

ACCEPTANCE CRITERIA: Admin user is able to use the filter bar to sort/narrow search results (of hosts).

USER STORY: Authorized user will interact with an aesthetically pleasing and stylistically consistent animal profile form.

DESCRIPTION & TECHNICAL NOTES: Use semantic ui react to style the animal profile component so that it looks better.

ACCEPTANCE CRITERIA: Animal profile will be styled consistently with the rest of the application.

USER STORY: User will see relevant information related to adoption on the front page of the application.

DESCRIPTION & NOTES: Information should include links to relevant articles, information specific to the application, and all information should be presented in a consistent, aesthetically pleasing way.

ACCEPTANCE CRITERIA: Information will be easily accessible to the user.

USER STORY: User will be able to glean basic information regarding the animal featured in the card, including whether the animal is pregnant, its age, and sex.

DESCRIPTION & NOTES: Animal card will be formatted in a more readable way, pulling relevant information from state and displaying it in an aesthetically pleasing way.

ACCEPTANCE CRITERIA: Animal card will:

1. format the DOB in a more human readable way (the moments library will probably help with this)
2. display it's age which is calculated using the DOB (the moments library or JS Date object may help with this)
3. use the semantic-ui ribbon to display it's status
4. display a cute icon and text if the animal is pregnant
5. display an icon and text indicating if it's male or female

USER STORY: Boxes that host user cannot update on the host update modal will be greyed out. Admin shelter user will be able to change these boxes. The greyed out boxes should be: Host Id. and Shelter Id.

DESCRIPTION & TECHNICAL NOTES: Host update modal component will contain the code greying out the boxes and prohibiting changes unless user is authorized. The only user authorized to make these changes will be a shelter admin user.

ACCEPTANCE CRITERIA: Host user will have a host update modal link on their home page that will allow them to update their information; however, any boxes containing information the host cannot access/manipulate will not appear on the host modal window. They will appear on the admin window. Appearance of those boxes will be controlled with a ternary statement.

USER STORY: Users on the Animal List Page will be able to filter the animal cards shown by the animal's age, breed, location, adoption/foster status, sex, and location.

DESCRIPTION & NOTES: This header container will contain multiple drop down menus-one for each filter criteria. For instance, this header will include a drop down menu that allows the user to filter returned animals by age. A separate drop down menu will allow the user to search animals by breed. User should be able to filter search results by multiple search criteria. For example, user should be able to filter results coming back from the api by breed, sex, and location.

ACCEPTANCE CRITERIA: User can use the drop down menus in the header to filter results returned from the api. User should be able to filter results to only those animals that meet user's particular search criteria.

Connect animal list to redux state. Pass all props to Animal card component.

USER STORY: When authorized user access an animal profile page, user will see a scrolling string of images of that animal.

UPDATE & TECHNICAL NOTES: Put image scroll in a div along with a button that allows user to upload additional images of an animal.

DESCRIPTION & NOTES: Container will include all images related to that specific animal's profile. Images will by styled to scroll across the page in an aesthetically pleasing manner.

ACCEPTANCE CRITERIA: All images are shown on the animal's profile page. Images scroll across the page.

USER STORY: Authorized user can click an "edit profile" button on the Animal Profile Page that pops up a modal window. The modal window will have input boxes that allows user to change relevant information about the animal. User may be a shelter user or a host user. User will only be able to alter information consistent with their authorization level.

DESCRIPTION & NOTES: This component will have input boxes for all animal-related properties in state. Specifically, input box should include a place to change an animal's: name, date of birth, age, species, breed, sex, special needs, whether the animals are fixed, whether the animals are pregnant, whether the animal is people friendly, whether the animal is friendly to other animals, whether the animal has special dietary needs (and if so, what), and an "about" area where host or shelter user can update information that doesn't fit the specific criteria above. Where possible, the ability to change this information should be done with check boxes (to save space). For instance, changes in information to whether the animal is animal/people friendly, whether the animal is pregnant, whether the animal has a specific diet, and whether the animal is fixed should be check boxes. Other should be changed with input boxes.

The id, ShelterID, HostID, and adoption/foster status should only be able to be changed by Shelter Admin.

ACCEPTANCE CRITERIA: User should be able to change any information about an animal that the user is authorized to change. The changes will be submitted to and saved in the database.

User story:
A person can register as a host. They are registered by default as not approved. The shelter can see the hosts information and choose to approve the application.

USER STORY: Carl will learn semantic ui react.

DESCRIPTION & NOTES: carl will read and listen to things about the relevant semantic libraries.

ACCEPTANCE CRITERIA:

Install connected-react-router, wrap application in router in src/index.js, and initialize basic initial routing for the src/Components/App.js

USER STORY: When host user navigates to his/her profile page, use will see animal cards for the animals host user is fostering or has adopted.

DESCRIPTION & NOTES: Animal card component will be linked to the host profile page. Only the cards for animals fostered or adopted by host user will be shown. Likely done by filtering information returned from the database. Filter by username?

ACCEPTANCE CRITERIA: Host profile page will only show animal cards for animals adopted or fostered by logged in host.

USER STORY: When an authorized use clicks the "edit" button on his/her host profile synopsis, a modal window will pop up that allows user to update their profile information. Form should allow user to change address, phone number, number of animals, animal capacity, and user's avatar images. Form should allow admin user to change additional information about the host, such as whether the host is approved or not.

DESCRIPTION & NOTES: Container will include a form that includes input boxes for user's address, phone number, animal capacity (# of animals they can care for), and profile images. Information will be saved to the database. Container will also include input boxes for information that can only be inputed by admin user.

ACCEPTANCE CRITERIA: Container allows user to update all editable information and update his/her profile photo. Updated information will be updated in the application's database. Container will also contain information that is editable only by admin user (such as approval of host's application).

STRETCH: Allow use to edit their name.

Get redux dev tools displaying the state.

USER STORY: Admin user will be able to use the navigation bar to go directly to all cat cards, all dog cards, the host's list page, and open applications. (Stretch goal: admin user will also be able to access information about health emergencies from the nav bar.)

DESCRIPTION & NOTES: The nav bar will contain links that direct user to different parts of the application. Links should include "Cat", "Dog", "Hosts", and "Open Applications". The Cat link should take the user to the Animal List Page and should automatically filter the contents of that page to show all cats. The Dogs link should take the use to the Animal List Page and should populate the page with only dogs. The "Hosts" link should take the user to the Host Profile Page. The "Open Applications" link should take the admin user to the Host List Page and populate it with currently unapproved applications.

ACCEPTANCE CRITERIA: Nav bar has working links that take admin user to the appropriate pages and populate those pages with the appropriate information.

USER STORY: When authorized user navigates to the Animal Profile Page, the user will see all information relevant to that particular animal. Specifically, user will see the animal's: name, age, dob, sex, breed, friendliness with other animals/people, special dietary needs, special medical needs, status (re: adoption/fostering), whether the animal is fixed/pregnant, shelter id, and a general "about" comments section.

DESCRIPTION & NOTES: This container will display all animal information outlined in USER STORY.

ACCEPTANCE CRITERIA: User is able to access all information related to a particular animal in one location.

USER STORY: Authorized user will be able to click an "upload photo" button on the Animal Profile Page that uploads an image of the animal to be displayed where appropriate.

DESCRIPTION & NOTES: Upload photo button will be a component that operates similarly to the upload photo button used in the kwitter application.

ACCEPTANCE CRITERIA: Authorized user will be able to upload an image of the animal, which will be displayed where appropriate.

USER STORY: User will see a navigation bar at the top of the application. The nav bar will contain links to "location", "volunteer", "adopt", "services", and "about". When the user clicks on one of these links, the user will be immediately directed to the appropriate part of the main page, where the user can find more information about their selected topic.

DESCRIPTION & NOTES: Component will included imbedded links that direct user to relevant sections of the main page. Those sections will consist of components that provide information/links related to that particular topic. For instance, user may select "location" in the nav bar and be directed further down the page to a component that includes information/links about shelter locations.

ACCEPTANCE CRITERIA: Upon clicking a link in the nav bar, the user is quickly directed to the appropriate section of the page.

Create animal list display of dummy components. The dummy components to include are:
Animal List
Animal Card
NavBar