Removed interceptor.

[kikoseijo]

Had to remove the interceptor, as its intercepting own calls on project. Also, im not kind with migrations, but was a warning with

[Element Migrating][ElTable][Event]: expand is renamed to expand-change

Not sure if you using 2 for double compatibility. I just wanted to warn about the interceptor.

Reason I'm playing with this its because after update row click stop working, and its driving me crazy. Cant find reason for not being working since update.

[kikoseijo]

Found the issue, seems @row-click="rowClickHandler" does not work, should be v-on:row-click="rowClickHandler" for the event to get captured.

[zollero]

@kikoseijo Yep, Element UI v2.x had renamed expand to expand-change, and I leave the @expand to be compatible with Ele v1.x. Will be removed in the future.

And, @row-click works in my dev environment with Vue v2.5.9 and Ele v2.0.7.

And, the latest version of el-search-table-pagination is v0.4.14, if your el-search-table-pagination is not the latest version, please update it.

[kikoseijo]

Excellent tips, Probably something to do with my compliers, I have a sort of a disorder using async modules requires.

anyway, thanks for the response. you are so kind.

[kikoseijo]

Sorry forgot to say,

your interceptor should return a promise and not an error. Its intercepting all application requests,

Your code has an interceptor:

And this is what happen if status.code !== 200 and there is no data

[zollero]

@kikoseijo So glad to receive this. I will change it.

[zollero]

@kikoseijo I have change the interceptor. And release v0.4.15, See detail.

[kikoseijo]

There is also an issue, pagination stopped working. after debugging I found that safari not able to match brackets annotations

if (response[totalField] && totalField && totalField.indexOf('.') !== -1) {

I had to remove response[totalField] && because response[totalField] will always be null.

😱😱😱😱😱😱

[zollero]

@kikoseijo ok, I just remove it. 😂

[kikoseijo]

@zollero , what about rendering html without creating a new slot?

Im finding myself creating slots in the file I use as a template for all the models.

I think it should be easy.

[zollero]

@kikoseijo You mean this slot ?

[kikoseijo]

YEs the dynamic slots its how I'm doing right now.

The function that renders

    {
      prop: 'doc_url',
      label: 'Document URL',
      minWidth: 250,
      render: row => {
        return '<a href="#url">FILE</a>'
      }
    }

Will not render HTML so, I have to create a custom slot for this, but if I had a renderHtml: true, will make life easier.

What you think? Maybe there is an option I don't know.

this is my generic class for all models

<template>
  <div>
    <modal v-if="deletingRecord" @close="deletingRecord=null">
      <template slot="header" ><h4>Delete Item</h4></template>
      <template slot="body" >
              <div class="modal-body">
                  <p>Are you Sure that you want to delete <strong>{{deletingRecord.name}}</strong> ?</p>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" @click="deletingRecord=null" >Close</button>
                  <button type="submit" @click="deleteRecord" :disabled="deleteForm.busy" class="btn btn-success">Delete</button>
              </div>
      </template>
    </modal>

    <div class="row">
      <div class="col-md-12 card">
        <div class="card-content row">
          <slot name="tablehead"></slot>
          <div class="col-sm-12">
            <el-search-table-pagination
              :url="fetchUrl"
              page-size-key="limit"
              :page-sizes="[5, 20, 50]"
              :auto-load="loadData"
              :columns="tableColumns"
              :params="propsToSearch"
              page-index-key="page"
              @row-click="rowClickHandler"
              list-field="data.data"
              total-field="data.total"
              class="table-striped" ref="crudTable" border
              :default-sort="{prop: 'id', order: 'desc'}">

            <template slot="form" slot-scope="scope">
              <div class="row" style="margin-top:20px;">
                <div class="col-xs-6">
                  <el-form :inline="true" :model="propsToSearch">
                      <el-form-item prop="name" style="margin-bottom:0px;">
                        <el-input v-model="propsToSearch.name" ></el-input>
                      </el-form-item>
                      <el-button @click="scope.search" :loading="scope.loading">
                        Search
                      </el-button>
                    </el-form>
                </div>
                <div class="col-xs-6 text-right">
                  <button class="btn btn-info btn-fill btn-wd" @click="kCreateNew">Create new</button>
                </div>
              </div>
            </template>

            <template slot="activeSwitch" slot-scope="props">
              <el-tooltip :content="'Publish status: ' + props.row.is_active" placement="top">
                <el-switch v-model="props.row.is_active" @change="activeStatusChanged(props.row)" active-color="#7AC29A" inactive-color="#EB5E28"></el-switch>
              </el-tooltip>
            </template>

            <template slot="adminCheck" slot-scope="props">
              <i :class="{ 'text-success el-icon-circle-check' : props.row.is_admin, 'text-danger el-icon-circle-check': !props.row.is_admin }"></i>
            </template>

            <template slot="nameSlot" slot-scope="props">
              <b>ES</b> {{props.row.name.es}} <br /><b>EN</b> {{props.row.name.en}}
            </template>

            <template slot="catsSlot" slot-scope="props">
              <el-tag type="primary" v-for="cat in props.row.categories" size="mini" :key="cat.id" close-transition>{{cat.name.en}}</el-tag>
            </template>
            <template slot="commsSlot" slot-scope="props">
              <el-tag type="primary" v-for="comm in props.row.communities" size="mini" :key="comm.id" close-transition>{{comm.name}}</el-tag>
            </template>

            <!-- <template slot="prepend" slot-scope="props">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
            </template> -->
            <template slot="append" slot-scope="props">
              <el-table-column fixed="right" column-key="actions">
                <template slot-scope="props">
                  <!-- <a class="btn btn-simple btn-xs btn-info btn-icon like" @click="handleLike(props.$index, props.row)"><i class="ti-heart"></i></a> -->
                  <a class="btn btn-simple btn-warning btn-icon edit" @click="kEdit(props.row)"><i class="el-icon-edit"></i></a>
                  <a class="btn btn-simple btn-danger btn-icon remove" @click="handleDelete(props.$index, props.row)"><i class="el-icon-delete"></i></a>
                  <span class="pull-right small text-disabled disabled-text">#{{props.row.id}}</span>
                </template>
              </el-table-column>
            </template>
            </el-search-table-pagination>
            <br />
            <br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import Vue from 'vue'
  import Modal from '@/../UIComponents/Modal.vue'

  import ElSearchTablePagination from 'el-search-table-pagination'

  // // Default use axios as HTTP tool
  Vue.use(ElSearchTablePagination)

  export default {
    props: ['schema', 'kEdit', 'kCreateNew'],
    components: {
      Modal
    },
    computed: {
      pagedData () {
        return this.records.slice(this.from, this.to)
      }
    },
    data () {
      return {
        loadData: false,
        deletingRecord: null,
        deleteForm: new KvForm({}),
        searchQuery: '',
        fetchUrl: '',
        propsToSearch: [],
        tableColumns: [],
        records: []
      }
    },
    created () {
      // console.log('[CrudTableDefault.vue] -> created() for: ', this.schema.endpoint)
      this.propsToSearch = this.schema.propsToSearch
      this.tableColumns = this.schema.tableColumns
      this.fetchUrl = this.schema.endpoint
      this.loadData = true
    },
    methods: {
      fetchRecords () {
        this.$refs.crudTable.dataChangeHandler()
      },
      handleDelete (index, record) {
        this.deletingRecord = record
      },
      activeStatusChanged (record) {
        window.axios.get('admin/status/' + this.schema.modelName + '/' + record.id + '/' + record.is_active).then(res => {
          this.$notify({title: 'Success', message: 'Status changed successfully', verticalAlign: 'bottom', 'type': 'success'})
          // record.is_active = res === 1
        }).catch(error => {
          console.log('error', error)
          record.is_active = false
        })
      },
      deleteRecord () {
        const id = this.deletingRecord.id
        let vm = this
        Larapp.delete(this.schema.endpoint + '/' + id, this.deleteForm)
          .then(() => {
            vm.deletingRecord = null
            vm.fetchRecords()
          }).catch((err) => {
            console.log('err', err)
            this.$notify.error({message: errors[errMessage][0], title: 'Delete error'})
          })
      },
      changePublishStatus (item) {
        return item.is_active === 1
      },
      toggleSelection (rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.crudTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.crudTable.clearSelection()
        }
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      rowClickHandler (row, event, column) {
        if (column !== 'actions' && column !== 'activeSwitch') {
          this.kEdit(row)
        }
      }

    }
  }
</script>
<style scoped>

.modal-body {
    min-height: 120px;
}

</style>

[kikoseijo]

Also, this.$refs.crudTable.dataChangeHandler() with a Promisse I can show off errors to user without interceptors.

[zollero]

@kikoseijo PR please.

[kikoseijo]

Yes,

Could you explain what was your idea having implemented the interceptors? i can make that also work, but dont understand the purpose of the interceptors in your case.