05 SRS component

component template

• component can use srs data
• SRS => command can render compoenent

column template

Custom component can be used to display data in row.

Use case:

• edit data in row
• display context information for example document preview

srs 101.xmlProps, eventsSave this to local file

<srs>
  <def>
    <itm name="unicode" model="column" type="v_srs_column"></itm>
    <itm model="command" name="test">select 'Hello World'</itm>
    <itm model="command" name="test2"><![CDATA[
      /*XML reserved characters: > < require CDATA block*/
      select 'Hello <-_->' Smiley ,getdate() date  , 14 number
      ]]></itm>
    <itm model="command" name="test3" link="self">select 'Hello' txt , 2.45 dec, 4.4512 dec4, 123 int, 'śćß' unicode, date() date</itm>
    <itm model="command" name="test4" opts="server">select 'Hello' txt , 2.45 dec, 4.4512 dec4, 123 int, 'śćß' unicode, Getdate() date</itm>
    <itm model="command" name="test5" link="self" type="v_srs_component">select * from test3</itm>
  </def>
</srs>

Props:

• table current command rendered to table
• api current api
• clipboard_items - selected items (only in option component)
• row - current row data only in "column template"
• column - column, only in "column template"
• value - value, only in "column template"

Events:

• @reload-event - event on reload, example @reload-event="fetchData()"

curl -L -o srs/examples/101.xml  https://jetquery.io/examples/srs/101.xml --create-dirs

Examples

srs component template examplesrs column template exampleSave this to local app

Vue.component('v_audit', {
  template: `
  <div :data-component="$options.name" class="xd-content">
    <template v-if="system.ready">

      <h2>{{table.name}}</h2>


      <table class="xd-table">
        <thead>
          <tr>
            <th v-for="key in tableHeaders" :key="key" :title="key">{{ key }}</th>

          </tr>
        </thead>

        <tbody>
          <tr v-for="(row, i) in lines" :key="i">
            <td v-for="key in tableHeaders" :key="key">
              {{ row[key] }}
            </td>
          </tr>
        </tbody>

      </table>

      <v_modal label="data">
        <pre>{{lines}}</pre>
      </v_modal>
    </template>
    <div class="xd-loading" v-else></div>
  </div>`,
  props: ['table', 'api'],
  data: function () {
    return {
      lines: [],
      system: {
        ready: false,
      },
    }
  },
  methods: {

    fetchData: function () {

      let lines = this.convertSRSTableToObject(this.table) || [];
      this.$set(this, 'lines', lines);
      this.system.ready = true;

    }
  },
  computed: {
    tableHeaders() {
      // Get unique keys from all objects (in case some rows have extra fields)
      const keys = new Set();
      this.lines.forEach(line => {
        Object.keys(line).forEach(key => keys.add(key));
      });
      return Array.from(keys);
    }
  },
  watch: {

    // Support for lazy loading opts contains pscope => on load is removed
    'table.opts': function () {
      this.fetchData();
    },
    //Important when multiple components on page
    'table.name': function () {
      this.fetchData();   
    } 

  },
  mounted: function () {
    if (this.table.opts?.includes('pscope')) {
      // Support for lazy loading opts contains pscope => on load is removed
      this.$emit('reload-event', 'view', this.table.name)
    }
    else
      this.fetchData();
  }
});

// 1. Optional add route
// routes.push({ path: '/xd', component: Vue.options.components['v_table_planlist'] });

// 2. Reload
// this.$emit('reload-event');


// 3. Convert to object
// let document = this.findSRSTableAndConvertToObject('view')[0] || {}; //read from props => api => find by name and assign first value to object
// this.$set(this, 'document', document);

// 4. Convert to array of obejcts
//let cooperationlines = this.findSRSTableAndConvertToObject('cooperation') || []; //find by name and convert to array of objects
//this.$set(this, 'cooperationlines', cooperationlines);

Vue.component('v_srs_column',
  {
    template: `
<div :data-component="$options.name">

  <h1>column</h1>
  {{column}}

  <h1>value</h1>
  {{value}}

  <h1>row</h1>
  {{row}}

  <h1>model1</h1>

  {{model1}}

  <h1>model2</h1>

  {{model2}}
  <h1>model3</h1>

  {{model3}}

  <h1>model4</h1>
  {{model4}}

</div>`,
    // row selected row
    props: [ 'table', 'api', 'row','column','value','clipboard_items'],
    data () {
      return {
        model1:{},
        model2:{},
        model3:{},
        model4:{}
      };
    },
    methods: {

    },
    computed: {

    },
    mounted() {

      this.model1 =    this.convertSRSTableToObject(this.table)
      //return [{"key":"value","key":"value" }]

      this.model2 =    this.convertSRSTablesToObject(this.api.tables)
      //return { tablename: [{"key":"value","key":"value" },{"key":"value","key":"value" } ] }

      this.model3 =  this.convertSRSColumnsRowsToArray(this.table.columns,this.row);
      //return  [{"key":"value","key":"value" }]

      this.model4 =  this.convertSRSColumnsRowsToArray(this.table.columns,this.row)[0];
      //return  {"key":"value","key":"value" }

    }
  });

curl -L -o components/srs/v_srs_component.js  https://jetquery.io/examples/components-core/v_srs_component.js --create-dirs

curl -L -o components/srs/v_srs_component.js  https://jetquery.io/examples/components-core/v_srs_column.js --create-dirs