Skip to content

Instantly share code, notes, and snippets.

@ais-one

ais-one/Page.vue

Last active January 30, 2019 23:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ais-one/07a0c8f28932328fcff1001aaedd3b2e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ais-one/07a0c8f28932328fcff1001aaedd3b2e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ais-one revised this gist Jan 30, 2019. 1 changed file with 17 additions and 21 deletions.
    38 changes: 17 additions & 21 deletions Page.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -2,25 +2,13 @@
    <div id="not-needed">
    <v-layout row wrap>
    <v-flex xs12>
    <vue-crud-x
    ref="book-pages-table"
    storeName="book-pages-table"
    :parentId="parentId"
    v-bind="pageDefs"
    >
    <vue-crud-x ref="book-pages-table" storeName="book-pages-table" :parentId="parentId" v-bind="pageDefs">
    <template slot="filter" slot-scope="{ filterData, parentId, storeName }">
    <div>{{ filterData }}</div>
    <hr/>
    <div>{{ !!parentId }} {{ storeName }}</div>
    <div>{{ storeName }} ( HasParent: {{ !!parentId }}) {{ filterData }}</div>
    </template>
    <!-- <template slot="table" slot-scope="{ records, totalRecs, pagination }">
    <div v-for="record in records" :key="record.id"><p>{{ record.id }} {{ record.name }} <v-btn @click="$refs['my-table'].crudFormOpen(record.id)">Open</v-btn></p></div>
    <div>{{ totalRecs }} {{ pagination }}</div>
    </template> -->
    <template slot="form" slot-scope="{ record, parentId, storeName }">
    <div>
    <div>{{ record }} {{ !!parentId }} {{ storeName }}</div>
    <h1>Pages Form</h1>
    <h1>{{ storeName }} ( HasParent: {{ !!parentId }})</h1>
    <v-card-text>
    <v-text-field label="Content" v-model="record.content"></v-text-field>
    </v-card-text>
    @@ -33,15 +21,13 @@
    </template>

    <script>
    // import { makeCsvRow, exportCsv } from '@/assets/util'
    import { makeCsvRow, exportCsv } from '@/assets/util'
    import { http } from '@/axios'
    import VueCrudX from '@/VueCrudX'
    export default {
    name: 'book-pages',
    components: {
    VueCrudX
    },
    components: { VueCrudX },
    data () {
    return {
    parentId: null,
    @@ -86,7 +72,18 @@ export default {
    }
    },
    crudOps: { // CRUD
    export: null,
    export: async (payload) => { // export data
    try {
    const { data: { results, total } } = await http.get(`/api/books/${parentId}/pages`, {
    params: { page: 0, limit: 25 }
    })
    let csvContent = ''
    results.forEach(row => {
    csvContent = makeCsvRow(csvContent, row, `\r\n`, ';')
    })
    exportCsv(csvContent, 'party.csv')
    } catch (e) { }
    },
    find: async (payload) => {
    let records = []
    const { pagination, parentId } = payload // filterData // pagination: { sortBy, descending }
    @@ -98,7 +95,6 @@ export default {
    limit: rowsPerPage
    }
    })
    console.log(results)
    results.forEach(row => { records.push(row) })
    pagination.totalItems = total
    } catch (e) { }
  2. ais-one revised this gist Jan 30, 2019. 1 changed file with 2 additions and 7 deletions.
    9 changes: 2 additions & 7 deletions Page.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -50,15 +50,10 @@ export default {
    // INLINE EDIT - START
    saveRow: '#ffaaaa', // add save row button & specify color when row is changed, used with inline edit only and action column
    inlineReload: { // default true, set to false and use snapshot for large firestore dataset (or similar mechanisms where reads are chargeable)
    update: true,
    create: true,
    delete: true
    update: true, create: true, delete: true
    },
    addrowCreate: [
    {
    field: 'content',
    label: 'Content'
    }
    { field: 'content', label: 'Content' }
    ], // add button creates new record by adding row, you can specified fields that use needs to pre-enter data,
    inline: { // editable fields on the table and what type of edit are they
    // fields supported v-text-field, v-select, v-combobox, v-autocomplete, v-textarea, v-date-picker, v-time-picker
  3. ais-one revised this gist Jan 30, 2019. 2 changed files with 142 additions and 23 deletions.
    23 changes: 0 additions & 23 deletions InlineSample.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -1,23 +0,0 @@
    crudTable: {
    saveRow: '#ffaaaa', // add save row button & specify color when row is changed, used with inline edit only and action column
    inlineReload: { // default true, set to false and use snapshot for large firestore dataset (or similar mechanisms where reads are chargeable)
    update: true, create: true, delete: true
    },
    addrowCreate: [
    { field: 'content', label: 'Content' }
    ], // add button creates new record by adding row, you can specified fields that use needs to pre-enter data, empty array if no need to, false if no need addrowCreate button
    inline: { // editable fields on the table and what type of edit are they
    // fields supported v-text-field, v-select, v-combobox, v-autocomplete, v-textarea, v-date-picker, v-time-picker
    'content': {
    field: 'v-text-field', // v-text-field (blur will update contents if it was changed)
    attrs: {
    type: 'text', // number, email, password
    class: ['caption']
    }
    }
    },
    onCreatedOpenForm: false, // open form on created - need to have record.id to show info, this is true in cases when you want to go back to the parent form and not parent table
    onRowClickOpenForm: false, // set to false of you do not want row click to open form

    // Other configuration code after this...
    }
    142 changes: 142 additions & 0 deletions Page.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,142 @@
    <template>
    <div id="not-needed">
    <v-layout row wrap>
    <v-flex xs12>
    <vue-crud-x
    ref="book-pages-table"
    storeName="book-pages-table"
    :parentId="parentId"
    v-bind="pageDefs"
    >
    <template slot="filter" slot-scope="{ filterData, parentId, storeName }">
    <div>{{ filterData }}</div>
    <hr/>
    <div>{{ !!parentId }} {{ storeName }}</div>
    </template>
    <!-- <template slot="table" slot-scope="{ records, totalRecs, pagination }">
    <div v-for="record in records" :key="record.id"><p>{{ record.id }} {{ record.name }} <v-btn @click="$refs['my-table'].crudFormOpen(record.id)">Open</v-btn></p></div>
    <div>{{ totalRecs }} {{ pagination }}</div>
    </template> -->
    <template slot="form" slot-scope="{ record, parentId, storeName }">
    <div>
    <div>{{ record }} {{ !!parentId }} {{ storeName }}</div>
    <h1>Pages Form</h1>
    <v-card-text>
    <v-text-field label="Content" v-model="record.content"></v-text-field>
    </v-card-text>
    </div>
    </template>
    </vue-crud-x>
    </v-flex>
    </v-layout>
    </div>
    </template>

    <script>
    // import { makeCsvRow, exportCsv } from '@/assets/util'
    import { http } from '@/axios'
    import VueCrudX from '@/VueCrudX'
    export default {
    name: 'book-pages',
    components: {
    VueCrudX
    },
    data () {
    return {
    parentId: null,
    pageDefs: {
    crudTable: {
    // INLINE EDIT - START
    saveRow: '#ffaaaa', // add save row button & specify color when row is changed, used with inline edit only and action column
    inlineReload: { // default true, set to false and use snapshot for large firestore dataset (or similar mechanisms where reads are chargeable)
    update: true,
    create: true,
    delete: true
    },
    addrowCreate: [
    {
    field: 'content',
    label: 'Content'
    }
    ], // add button creates new record by adding row, you can specified fields that use needs to pre-enter data,
    inline: { // editable fields on the table and what type of edit are they
    // fields supported v-text-field, v-select, v-combobox, v-autocomplete, v-textarea, v-date-picker, v-time-picker
    'content': {
    field: 'v-text-field', // v-text-field (blur will update contents if it was changed)
    attrs: {
    type: 'text', // number, email, password
    class: ['caption']
    }
    }
    },
    onCreatedOpenForm: false, // open form on created - need to have record.id to show info, this is true in cases when you want to go back to the parent form and not parent table
    onRowClickOpenForm: false, // set to false of you do not want row click to open form
    // INLINE EDIT - END
    // name: 'book-pages',
    headers: [
    { text: 'Action', value: '', fixed: true, sortable: false, class: 'pa-1' },
    { text: 'Page Content', value: 'content', align: 'left', sortable: false }
    ],
    formatters: (value, _type) => { return value },
    showGoBack: true // do not show go back
    },
    crudFilter: { FilterVue: null, filterData: { } },
    crudForm: {
    FormVue: () => {},
    formAutoData: null,
    defaultRec: {
    id: null, content: '', bookId: null
    }
    },
    crudOps: { // CRUD
    export: null,
    find: async (payload) => {
    let records = []
    const { pagination, parentId } = payload // filterData // pagination: { sortBy, descending }
    const { page, rowsPerPage } = pagination
    try {
    const { data: { results, total } } = await http.get(`/api/books/${parentId}/pages`, {
    params: {
    page: page > 0 ? page - 1 : 0,
    limit: rowsPerPage
    }
    })
    console.log(results)
    results.forEach(row => { records.push(row) })
    pagination.totalItems = total
    } catch (e) { }
    return { records, pagination }
    },
    findOne: (payload) => {},
    create: async (payload) => {
    try {
    let { record: { content }, parentId } = payload
    const rv = await http.post(`/api/books/${parentId}/pages`, { content })
    } catch (e) { return 500 }
    return 201
    },
    update: async (payload) => {
    try {
    let { record: { id, content } } = payload
    const rv = await http.patch(`/api/pages/${id}`, { content })
    } catch (e) { return 500 }
    return 200
    },
    'delete': async (payload) => {
    try {
    let { id } = payload
    const rv = await http.delete(`/api/pages/${id}`)
    } catch (e) { return 500 }
    return 200
    }
    }
    }
    }
    },
    mounted () {
    this.parentId = this.$route.params.id
    }
    }
    </script>
  4. ais-one revised this gist Jan 30, 2019. 1 changed file with 7 additions and 33 deletions.
    40 changes: 7 additions & 33 deletions InlineSample.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -1,49 +1,23 @@
    crudTable: {
    saveRow: '#ffaaaa', // add save row button & specify color when row is changed, used with inline edit only and action column
    inlineReload: { // default true, set to false and use snapshot for large firestore dataset (or similar mechanisms where reads are chargeable)
    update: false,
    create: true,
    delete: true
    update: true, create: true, delete: true
    },
    addrowCreate: [
    {
    field: 'name',
    label: 'Name'
    }
    ], // add button creates new record by adding row, you can specified fields that use needs to pre-enter data,
    // empty array if no need to,
    // false if no need addrowCreate button
    { field: 'content', label: 'Content' }
    ], // add button creates new record by adding row, you can specified fields that use needs to pre-enter data, empty array if no need to, false if no need addrowCreate button
    inline: { // editable fields on the table and what type of edit are they
    // fields supported v-text-field, v-select, v-combobox, v-autocomplete, v-textarea, v-date-picker, v-time-picker
    'name': {
    'content': {
    field: 'v-text-field', // v-text-field (blur will update contents if it was changed)
    attrs: {
    type: 'text', // number, email, password
    class: ['caption']
    }
    },
    'remarks': {
    field: 'v-textarea', // edit dialog with v-textarea
    buttons: false
    },
    'languages': {
    field: 'v-select', // select, combobox
    attrs: {
    items: ['French', 'Thai', 'Chinese', 'Bahasa'],
    multiple: true,
    dense: true,
    class: ['caption']
    }
    },
    'created': {
    buttons: true,
    field: 'v-date-picker', // edit dialog with v-date-picker or v-time-picker
    attrs: { }
    },
    'photo': {
    field: 'v-textarea',
    buttons: true
    }
    },
    onCreatedOpenForm: false, // open form on created - need to have record.id to show info, this is true in cases when you want to go back to the parent form and not parent table
    onRowClickOpenForm: false, // set to false of you do not want row click to open form

    // Other configuration code after this...
    }
  5. ais-one revised this gist Jan 30, 2019. No changes.
  6. ais-one created this gist Jan 30, 2019.
    49 changes: 49 additions & 0 deletions InlineSample.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    crudTable: {
    saveRow: '#ffaaaa', // add save row button & specify color when row is changed, used with inline edit only and action column
    inlineReload: { // default true, set to false and use snapshot for large firestore dataset (or similar mechanisms where reads are chargeable)
    update: false,
    create: true,
    delete: true
    },
    addrowCreate: [
    {
    field: 'name',
    label: 'Name'
    }
    ], // add button creates new record by adding row, you can specified fields that use needs to pre-enter data,
    // empty array if no need to,
    // false if no need addrowCreate button
    inline: { // editable fields on the table and what type of edit are they
    // fields supported v-text-field, v-select, v-combobox, v-autocomplete, v-textarea, v-date-picker, v-time-picker
    'name': {
    field: 'v-text-field', // v-text-field (blur will update contents if it was changed)
    attrs: {
    type: 'text', // number, email, password
    class: ['caption']
    }
    },
    'remarks': {
    field: 'v-textarea', // edit dialog with v-textarea
    buttons: false
    },
    'languages': {
    field: 'v-select', // select, combobox
    attrs: {
    items: ['French', 'Thai', 'Chinese', 'Bahasa'],
    multiple: true,
    dense: true,
    class: ['caption']
    }
    },
    'created': {
    buttons: true,
    field: 'v-date-picker', // edit dialog with v-date-picker or v-time-picker
    attrs: { }
    },
    'photo': {
    field: 'v-textarea',
    buttons: true
    }
    },
    // Other configuration code after this...
    }