Ask Question - revaturelabs/ask-frontend GitHub Wiki

The ask-question component is a form submission page where user can submit a question with title, tag, question, optional image upload. It uses angular material forms, chips with autocomplete, and snackbar.

The customization on chips are:

  • chips(tags) are populating from the back-end
  • custom restriction to chips by preventing users from entering a new tag that is not on the list because it needs to match to an expert skill-set

Through out the form, form validations are implemented by using angular material snackbar. Snackbar is used instead of alerts(alert()) because alert could potentially block javascript/typescript thread, the browser, and user interaction. Snackbar does not interrupt anything and it automatically dismisses after specified duration.

md-editor is used for the input field. This allows for the use of Markdown within the writing of the question, including syntax highlight and emphasis styling. An optional preview pane is available, enabled by default.

The form is cleared after successful submission for user's convenience to add multiple question at a time.

The form uses 2 HTTP verbs to submit the data. It uses POST to send question head, list of tags, body, and questioner ID (which uses a service for it). And it uses PUT to send image data.

HTML

Banner with "Ask an Expert." Form with fields:

  • Title
  • Tags
  • Body
  • Image

TS

###Variables

  • form
  • type: FormGroup
  • visible
  • default value: true
  • selectable
  • default value: true
  • removable
  • default value: true
  • addOnBlur
  • default value: true
  • separatorKeysCodes
  • type: number[]
  • default value: [ENTER, COMMA]
  • tagCtrl
  • type: FormControl
  • filteredTags
  • type: Observable<string[]>
  • filtTags
  • type: string[]
  • tags
  • type: string[]
  • allTagsFromServer
  • type: string[]
  • cleanMarkdown
  • default value: true
  • selectedFile
  • type: File
  • default value: true
  • options
  • type: Markdownoptions
  • mode
  • default value: 'editor'
  • @ViewChild tagInput
  • type: ElementRef<HTMLInputElement>
  • reference id: tagInput
  • @ViewChild matAutocomplete
  • type: MatAutocomplete
  • reference id: auto
  • @ViewChild fileInput
  • type: ElementRef<HTMLInputElement>
  • reference id: fileInput
  • questionInput
  • type: Object
  • default value: { questionerId: null, head: null, tagList: null, body: null, }

Constructor

  • private fb
  • type: FormBuilder
  • private ts
  • TagService
  • private _snackBar
  • MatSnackBar
  • private http
  • HttpClient
  • private authService
  • AuthService
  • private router
  • Router

Functions

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** ⚠️