Build Jobs Tracker Application

[byrdsd]

User Story

As a recruiter
I want to be able to list, view and edit job listings
So that I can see easily see what jobs need to be filled and tailor job descriptions to find potential candidates.

Architecture

VueJS components:

JobsIndex (no props)

• pull down existing Jobs from API on mounting
• have an EditJob to create new Jobs
  • clear after new Job is created
• render a list of ShowJobs for each existing Job
• handle events from EditJob, ShowJob (ie: persist/update/delete Job, update cache)
• skill filtering:
  • input box to filter on a single skill
  • when box is empty, do not filter anything
  • when there is a value in the search box, only show Jobs with partial/full skill
    match
  • display a message when filtering is occurring (eg: Filtering on skills, showing 6 of
    8 Jobs)

EditJob (job: Object)

• basic Job form with save button
• skills are broken into individual inputs
• there should always be an empty one to add a new skill
• blank skill inputs are filtered out on save
• emit 'job-saved' with Job when save button is clicked

ShowJob (job: Object)

• show the current values
• allow toggle between editing (use EditJob) and show (emit 'job-updated')
• on save, switch back to view
• 'delete' button if object is persisted (emit 'job-deleted')

Helpers:

JobsApiHelper.js

• wrap API interactions - allow them to be stubbed in the absence of an API
• use the Fetch API to communicate with the backend
• all API interaction is assumed to be with a REST interface
• path is 'jobs'
• use 'body' for requests to pass in stringified JSON

Jobs API:

GET (index, show)

• REQUEST: { < id > }
• RESPONSE (if id present): { job: { title, skills, description } }
• RESPONSE (if id absent): { jobs: [{ id, title, skills, description }, ...] }

POST (create)

• REQUEST: { job: { title, skills, description } }
• RESPONSE: { job: { id, title, skills, description } }

PATCH (update)

• REQUEST: { job: { id, title, skills, description } }
• RESPONSE: { job: { id, title, skills, description } }

DELETE (destroy)

• REQUEST: { job: { id } }
• RESPONSE: {}

API Fields:

• <> denotes optional field
• id: Number
• title: String
• skills: [String]
• description: String

Proposed Subtasks

• Initialize Vue app
• Create JobsApiHelper
• Create JobsIndex component
• Create EditJob component
• Create ShowJob component