Skip to main content

The FDB App in Vue

In the last installment, we thought we could clone a folder tree and get a working project, but...no. Vue likes to be in charge. The vue create fdb command line works perfectly, thankyouverymuch.

So, we turn to our UI design and find that it breaks down into Views and Components quite easily.

Like the Todo app from the tutorial, our layout has a common Header consisting of 3 nav buttons and a Search Component.

Views


  • ListView - headlines a list of films, people, or companies with a filter box. See them all at first (we have 3000+ people), then type until you see the one you want. Also includes an Add button.
  • RecordView - the headline for a film or person form. The form looks like a display until you click, when the edit box appears. If you clicked the Add button, this will be an empty form. Otherwise, it will show a single record. There are 3 tabs, but the second and third tabs show relationships and are not editable.
  • ResultsView - Displays the results of a Search, grouped by Films, People, and Companies. A filter box refines the search.

Components

  • Header - 3 nav buttons, Search
    • Search box - Enter = perform search
  • List - title, add button, filter text box, sort order controls
    • ItemList - Films or People
      • Item -Film or Person
    • CompanyTable - Editable table of companies (2 fields)
  • Record - title, set of 3 tabs, images, cancel button, add/update button
    • Tab1 is a form that displays basic fields for Film or Person
    • Tab2 is more fields from that form (Film)
    • Tab3 is a static display
    • Tab4 is a form that displays basic fields for Person
    • Tab2 is a static display
    • Tab3 is a static display
  • SearchResults - 3 lists, basically
  • AddCompany - Pop-up dialog

Router

Back to the tutorial, because I think we have to load another package/dependency. We could use npm, but the tutorial uses vue ui. In the Plugins page, there are buttons for adding vuex and vue-router. Adding vue-router overwrites the App.vue file
  • The Nav buttons are:
    • Film DB (Home) - / [ListView for films]
    • People - /people [ListView for people]
    • Companies - /companies [ListView for companies]
  • Clicking a Film or Person in the list switches to
    • Film - /film [RecordView for film]
    • Person - /person [RecordView for person]
  • Clicking the Add button
    • Home (Films): Film with 0 id
    • People (People): Person with 0 id
    • Companies: Displays AddCompany dialog
  • Clicking the Update button (Film and Person records only)
    • Processes the update and returns to the Film or Person page
  • Clicking the Cancel button (Film and Person records only)
    • Re-fetches the record and re-displays the page
  • Enter when the Search box is not empty and has the focus
    • Goes to /results





Comments

Post a Comment

Popular posts from this blog

Why table join doesn't work

Everything in the traditional relational database world is based on tables. If I have a table of Classes and a table of Students, I can have an association table that tells me who's in which class. classId className instructor 1 Psych 101 Dr. Jung studentId firstName lastName 1 Molly Ringwald 2 Anthony Hall 3 Joan Cusack Clearly, these two tables tell me nothing about which classes Molly is taking, nor which students have signed up for Psych 101. An "association" table provides that information: classId studentId Association-specific notes 1 1 1 2 late add 1 3 In the relational world, a LEFT JOIN gives us the student list for a given class: className instructor firstName lastName Assn notes Psych 101 Dr. Jung Molly Ringwald Psych 101 Dr. Jung Anthony Hall late add Psych 101 Dr. Jung Joan Cusack This approach is "pure" from a Chris Date perspective, but when we're talking about JSON data in response to a RESTful HTTP r...
Post a Comment
Read more

Bootstrap with Bootswatch

I think I have to employ Bootstrap for the UI. I'm spinning my wheels trying to pick compatible colors--that's just a waste of time. I came across Bootswatch, which has a bunch of Bootstrap templates. I like this one:  https://bootswatch.com/cerulean/ This should be easy:  https://bootstrap-vue.js.org/ First:  npm install vue bootstrap-vue bootstrap Then: // app.js import Vue from 'vue' import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue) This is what Vue plugins look like (fontawesome does the same thing): // This imports all the layout components such as <b-container>, <b-row>, <b-col>: import { LayoutPlugin } from 'bootstrap-vue' Vue.use(LayoutPlugin)
Post a Comment
Read more

JSON/MySQL Schemas

As noted previously, there is a lot of overlap between the RDBMS world and the JSON world. Identifiers JSON is defined to allow identifiers of any kind of Unicode string, encoded in UTF-8 (or UTF-16, etc.). They begin and end with double quotation marks (U+0022), so included quotation marks and '\' must be escaped as \" or \\. Control characters (ASCII 0-x1F) must be escaped as well. In practice, JSON identifiers conform to ECMAScript standards . There are some 68  reserved keywords (function, import, for, if, else, and so on) that should not be used as identifiers. Unexpected reserved words include abstract, await, debugger, delete, finally, instanceof, super, synchronized, transient, volatile, and yield. The spec makes a distinction between identifiers and IdentifierNames (specifically, array keys), but why risk it? ECMAScript allows '$' and '_' anywhere in an identifier. Length or camelCasing are not part of the spec. As for length, there seems t...
Post a Comment
Read more