Skip to content

Latest commit

 

History

History
301 lines (225 loc) · 8.95 KB

README.md

File metadata and controls

301 lines (225 loc) · 8.95 KB
Raw

Getting Started - Hands On

A firebase example project using vue-crud-x component

Learning To Use Or Maintaining Component (Github)

Learning

clone the repository and go to the repository example

git clone https://github.com/ais-one/vue-crud-x.git
cd vue-crud-x/example-firebase

install dependencies

npm install
# delete package-lock.json if you face problems

create cfg.json file & put in your credentials

touch cfg.json
vi cfg.json

{
  "firebaseCfg": {
    "apiKey": "",
    "authDomain": "",
    "databaseURL": "",
    "projectId": "",
    "storageBucket": "",
    "messagingSenderId": ""
  },
  "recaptchaSiteKey": ""  
}

run the app (vue-cli 3)

npm run serve

Looking Into example-firebase

VueCrudX Important Notes

  • primary key field name must be id - for now
  • the example uses firestore, please signup for firebase and create user on firebase to access
  • please see Schema section below for simple schema description, indexing, etc.
  • there is a user state which is passed into payload (see bode below)
  • you pass in email or id, to be used in createdBy field, to indicate who created the document/record (optional)
  • you pass in rules object to determine whether to show add, edit, delete button, etc.
  • events emitted: form-close, selected
# see use in VueCrudX.vue, you can populate the user state or leave it undefined
async createRecord ({ commit, getters }, payload) {
  payload.user = this.getters.user
  let res = await getters.crudOps.create(payload)
  return res
}
# A sample user JSON - obtained from backend, decoded from JWT or some other means, can look like this
{
  id: '1726388390',
  email: 'abc@mail.com',
  rules: { // if this is not present, all front end permissions are enabled (but backend can still disallow)
    '*': ['*'], // evereything thing allowed also in this setting
    'storename1': ['*'] // all operations available for certain storename (each crud component has a unique storename)
    '*': ['create,update,delete'] // all operations available for all stores also
    'storename2': ['create', 'update'] // only create and update allowed for storename2
  }
}

Folders & Files to take note of

Folders & Files providing examples of how the user can use or customize this vue-crud-x component

Mulitple CRUD Component on a page [created in the vue file]

/src/pages/MultiCrud

  • Two components are shown on a single page (you can also add other components on the page, e.g. maps, charts, other vue components)
  • Clicking on a party in the party table on the left will select all notes related to that party and display the list of notes on the right (you may need to apply the correct filter on the right table to see the data)
  • On the party table, the icons on the left are to open update dialog or to delete the party
  • On the party notes table, just click row to open a dialog which you can use to edit or delete the row
    • there is no "go back" button to return it to parent component (it is set to hidden for this case, as to is not needed)
  • Files:
    • Example.vue: example page showing multi-crud usage
    • party.js: the definitions for party collection
    • party-notes.js: definitions for party-note collection

Single CRUD Component on a page

/src/pages/Crud

  • Example Showing the following inline edit and how to just use the component in the router without create Vue file

  • Files:

    • party-inline.js: inline edit example
    • party-common.js: common properties used in other files in this folder

  • Another example to show nested CRUD

  • Files:

    • party.vue: example PARENT in nested crud
    • PartyForm.vue
      • custom form component, included into a scoped slot
      • there is a button that leads you to the CHILD table
      • no filter file, autogenerated from filters specified in party.vue
    • partyNotes.vue: example CHILD in nested crud
      • notes based on party selected. records are retrieved based on a parent Key (can be primary key or unique key), further filtered by search conditions
    • partyNotesForm.vue
      • custom form component, included into a scoped slot
      • no filter file, autogenerated from filters specified in partyNotes.vue

Realtime Example

/src/pages/Realtime

  • Demonstrates use of firestore realtime capabilities. Open 2 windows, update one record, the update should be pushed to the other client also
  • Files:
    • Example.vue: example page showing multi-crud usage

Schema

Firestore Rules

see firestore.rules

Firestore Indexs

see firesore.index.json

collections

party collection (e.g. a party to a lawsuit)

party {
  id: String
  name: String
  remarks: String
  status: String (select)
  languages: Array of String
  photo: String
}

note collection (case notes on each party)

note {
  id: String
  party: String (select)
  partyId: String
  type: String
  value: String
  approveStatus: String (select)
  Approver: String
  datetime: String
}

relation

1 party :-> N notes

Notes Creation Of vue-cli3 project From Scratch

vue create [project name] Manually select features Babel, Linter, CSS Preporcessors Stylus ESLint + Standard config Lint on save dedicated config file (for babel, postcss, eslint, etc) Save this as a preset? N

Supplementary Material

Hosting To Firebase

https://firebase.google.com/docs/hosting/quickstart

  1. Install Firebase
npm install -g firebase-tools (first time)
firebase login (first time)
cd to project folder
firebase init (first time)
add files
  1. Build the production version first
npm run build
# optional: build for production and view the bundle analyzer report
# npm run build --report
  1. Deploy to Firebase
firebase deploy --only hosting
firebase logout

Storage Rules

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read;
      allow write: if request.auth != null;
    }
  }
}

Other Notes (For reference only)

vuejs filters, local or global

v-model.lazy.trim.number (v-model modifiers)

computed: for non-async data

  • get, set (used for non-referenced data), [be careful when using set, also note that if computed is undefined, it will cause problems] watch: for async data
  • newval, oldval
  • deep watching

v-if (create / remove the block, can use v-else) v-show (still renders block, but hide it)

: v-bind classes, styles @ v-on submit, keyup

v-for="(item,index)" in items :key="item.id" or (value, key, index) if looping object

ref is non-reactive

vue lifecycle avoid beforeUpdate or update, use computed & watchers first

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

migrating from file imports to slots

If you are using the crud component JS files, you need to convert it to Vue first create a .vue file

<template>
  <vue-crud-x
    storeName="party"
    :parentId="null"
    v-bind="partyDefs"
  >
    <template slot="filter" slot-scope="{ filterData, parentId, storeName }">
      <my-filter :filterData="filterData" :parentId="parentId" :storeName="storeName" />
    </template>
    <template slot="form" slot-scope="{ record, parentId, storeName }">
      <my-form :record="record" :parentId="parentId" :storeName="storeName" />
    </template>
  </vue-crud-x>
</template>

<script>
import VueCrudX from '../../../../src/VueCrudX' // Component shared between projects // const VueCrudX = Vue.component('vue-crud-x') this does not work...
import MyFilter from './Filter'
import MyForm from './PartyForm'

</script>

in the scripts, you should put the defs into data()

    FilterVue: null,

    FormVue: () => {},