AAE Front End Breakdown - revaturelabs/ask-frontend GitHub Wiki

Application Routes

path: ''
component: LoginPageComponent

path: 'ask'
component: AskQuestionComponent

path: 'view-question'
component: ViewQuestionComponent

path: 'settings'
component: SettingsComponent

path: 'questions'
component: FilteredQuestionListComponent

path: 'expert-questions'
component: ExpertQuestionsComponent

path: 'user-questions'
component: UserQuestionsComponent

expert module:

(contains components used by experts)

  • enter-response: When viewing a single question, this appears at the bottom of the page if an expert is logged in
  • self-tags: settings panel for an expert to configure which tags apply to their profile (this feature is looking increasingly extraneous)
  • tag creation: Allows you to create a tag
  • settings: the settings page, only contains the self-tags component

models:

  • Account.ts:
  • Question.ts:
  • Response.ts:
  • Tag.ts:

services:

  • auth (folder)
    • auth.guard.spec.ts:
    • auth.guard.ts:
    • auth.guard.spec.ts:
    • auth.service.ts:
  • question.service.ts:
  • response.service.ts:
  • tags.service.ts:

static module:

(contains components used by both experts and users)

  • expert-questions: a header followed by the question-list component, shows the expert questions that are tagged to their skillset
  • filtered-question-list: FILL THIS OUT
  • footer: a normal footer
  • highlighted-response: a special version of the response component that shows up on the page when the question asker has highlighted a response
  • login-page: the page that you use to log in, the first page anyone sees
  • navbar: the navbar
  • preview-question: a preview for a question posting
  • question: when a question is viewed, this component goes front and center, showing the question of interest
  • question-filter: when viewing a questions-list, this component shows up above the list to enable filtering by tags
  • question-list: a list of preview-question components, showing a variety of questions (see the second to last component)
  • response: a single response to a question
  • user-questions: a header followed by the question-list component, shows the user the questions that they submitted
  • view-question: shows a single question and all of the responses to it

users module:

(contains components used by users)

  • ask question: a form for submitting a question (to Ask an Expert)

assets:

  • logo.png: the logo on the login page

environments

material-import:

  • material-import.module.ts: ALL Angular Material imports go in this file

Help! These component names are confusing!

In this project there are several components just related to posted questions, all in the static module. We start with the question-list, which is a list of preview-question components. This is a list of questions for users to browse through for reading/answering. When one of these preview-question components is clicked, it routes the user to a view-question component built using that question. This view-question component itself contains a question component for the actual question, in addition to responses and other content. In summation:

  • question-list : a list of preview-question components
  • preview-question : a limited preview that links to view-question
  • view-question : a full view of a question and associated responses
  • question : the component that represents the question itself in the view-question component *_ask-question: where user submits a question *_ask-question: component where user submits a question
⚠️ **GitHub.com Fallback** ⚠️