Skip to content

05 SRS based 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
XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<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()"
Bash
1
curl -L -o srs/examples/101.xml  https://jetquery.io/examples/srs/101.xml --create-dirs

Examples

XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
Vue.component('v_srs_component', {
  template: `
  <div :data-component="$options.name" class="xd-content">
    <template v-if="system.ready">

      <h2>Object</h2>

      {{model}}

      <h2>Array</h2>
      <div v-for="(value,key,index) in table.rows">
        {{value}}
        <hr />
      </div>

    </template>
    <template v-else>
      Loading
    </template>
  </div>`,
  props: ['table', 'api'],
  data: function () {
    return {
      model: {},
      system: {
        ready: false,
      },
    }
  },
  methods: {
    formSubmit() {
      this.axpost("/api/srs/000/exec", this.model).then((response) => {
      })
    },
    fetchData: function () {

      let lines = this.convertSRSTableToObject(this.table) || []; //array of lines
      this.$set(this, 'documentlines', lines);

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

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

      this.$emit('reload-event'); //reload event
      //this.$parent.postSRS('view', 'view'); //optional reload event
      //this.$parent.clipboard_items_clear(); //clipboard claar
    }
  },
  watch: {
    '$route.query.id': function () {
      this.fetchData();
    }
  },
  mounted: function () {
    this.fetchData();

    if (this.api && this.table) {
      this.system.component_status = 1
    }
  }
})

routes.push({ path: '/xd', component: Vue.options.components['v_srs_component'] });
XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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" }

    }
  });
Bash
1
2
3
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