py4web/apps/_dashboard/static/components/mtable.html at 28f06e73ee99b5f73cc7969c6dccb26d91ca0e87 · web2py/py4web · GitHub

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<div>
  <table>
    <tr>
      <td class="control">
        <input v-model="filter" type="text" placeholder="filter (example id > 1)" style="width: 100%" v-on:keyup.enter="search()"/>
      </td>
      <td style="white-space: nowrap; width:10%; padding-left:5px">
        <button v-on:click="search()" class="button">Search</button>
        <button v-if="create" v-on:click="open_create()" class="button">Create</button>
      </td>
    </tr>
    <tr>
      <td><div>{{message}}</div></td>
      <td class="right" v-if="!table.count">(no items found)</td>
      <td class="right" v-else-if="table.count==1">(one item found)</td>
      <td class="right" v-else>({{table.count}} items found)</td>
    </tr>
  </table>
  <div v-if="busy" style="padding:20px; text-align:center">
    <i class="fa fa-3x fa-spin fa-spinner"></i>
  </div>
  <div v-else-if="item!=null">
    <table class="table">
      <tr v-for="field in table.model" v-if="field.type!='id' || item.id">
        <th>{{field.label}}</th>
        <td class="control">
          <input v-if="field.type=='id'" type="text" readonly v-model="item[field.name]">
          <input v-else-if="field.type=='string'" type="text" v-model="item[field.name]" v-bind:readonly="!editable">
          <span v-else-if="field.type=='boolean'" v-on:click="toggle(item, field.name)" v-bind:readonly="!editable">
            <span v-if="item[field.name]===true"><i class="fa fa-check-square"></i> True</span>
            <span v-else-if="item[field.name]===false"><i class="fa fa-square"></i> False</span>
            <span v-else><i class="fa fa-square"></i> None</span>
          </span>
          <input v-else-if="field.type=='integer'" type="number" step="1" v-model="item[field.name]" v-bind:readonly="!editable">
          <input v-else-if="field.type=='float'" type="number" step="0.00000000000001" v-model="item[field.name]"  v-bind:readonly="!editable">
          <input v-else-if="field.type=='double'" type="number" step="0.00000000000001" v-model="item[field.name]" v-bind:readonly="!editable">
          <input v-else-if="field.type=='decimal'" type="number" step="0.1" v-model="item[field.name]" v-bind:readonly="!editable">
          <input v-else-if="field.type=='date'" type="date" v-model="item[field.name]" v-bind:readonly="!editable">
          <input v-else-if="field.type=='time'" type="time" v-model="item[field.name]" v-bind:readonly="!editable">
          <input v-else-if="field.type=='datetime'" type="datetime-local" v-model="item[field.name]" v-bind:readonly="!editable">
          <input v-else-if="field.type=='password'" type="password" v-model="item[field.name]" v-bind:readonly="!editable">
          <input class="type-list-integer" v-else-if="field.type=='list:integer'" type="text" v-model="string_values[field.name]" v-bind:readonly="!editable">
          <input class="type-list-reference" v-else-if="field.type.substr(0,14)=='list:reference'" type="text" v-model="string_values[field.name]" v-bind:readonly="!editable">
          <input class="type-list-string" v-else-if="field.type=='list:string'" type="text" v-model="string_values[field.name]" v-bind:readonly="!editable">
          <input v-else-if="field.type=='upload'" type="text" v-model="item[field.name]" v-bind:readonly="!editable">
          <textarea class="textarea" v-else-if="field.type=='text'" v-model="item[field.name]" v-bind:readonly="!editable"></textarea>
          <select v-else-if="field.type=='reference'" v-model="item[field.name]" v-bind:readonly="!editable">
            <option disabled value="">Select...</option>
            <option v-for="option in reference_options[field.references]" :key="option.value" v-bind:value="option.value">
              {{ option.text }}
            </option>
          </select>
          <textarea class="textarea" v-else-if="field.type=='json'" @input="function(event){item[field.name] = parse_and_validate_json(event)}" v-bind:readonly="!editable">{{item[field.name]}}</textarea>
          <div class="error" v-if="editable && field.name in errors">{{errors[field.name]}}</div>
        </td>
      </tr>
      <tr v-if="item.id">
        <th>
          Referenced By
        </th>
        <td>
          <div v-for="name in table.model[0].referenced_by" class="field-referenced">
            <a v-on:click="go_ref_by(name, item.id)">{{name}}</a>
          </div>
        </td>
      </tr>
    </table>
    <div style="margin-top: 10px">
      <button class="button" v-if="editable" v-on:click="save(item)">Save</button>
      <button class="button" v-if="deletable && item && item.id" v-on:click="trash(item)">Delete</button>
      <button class="button" v-on:click="close()">Close</button>
    </div>
  </div>
  <div v-else-if="table.items.length>0">
    <table class="table">
      <thead>
        <tr>
          <th v-for="field in table.model" v-on:click="reorder(field)">
            {{field.label}}
            <i v-if="order==field.name" class="fa fa-arrow-up"></i>
            <i v-if="order=='~'+field.name" class="fa fa-arrow-down"></i>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in table.items">
          <td v-for="field in table.model">
            <a v-if="field.type=='id'" class="field-id" v-on:click="open_edit(item)">
              [{{item[field.name]}}]
            </a>
            <span v-else-if="field.type=='string'" class="field-string">{{item[field.name]}}</span>
            <span v-else-if="field.type=='json'" class="field-string">(json)</span>
            <span v-else-if="field.type=='integer'" class="field-integer">{{item[field.name]}}</span>
            <span v-else-if="field.type=='double'" class="field-float">{{item[field.name]}}</span>
            <span v-else-if="field.type=='float'" class="field-float">{{item[field.name]}}</span>
            <span v-else-if="field.type=='decimal'" class="field-float">{{item[field.name]}}</span>
            <span v-else-if="field.type=='date'" class="field-date">{{item[field.name]}}</span>
            <span v-else-if="field.type=='time'" class="field-time">{{item[field.name]}}</span>
            <span v-else-if="field.type=='list:integer'" class="field-string">{{JSON.stringify(item[field.name])}}</span>
            <span v-else-if="field.type=='list:string'" class="field-string">{{JSON.stringify(item[field.name])}}</span>
            <span v-else-if="field.type=='datetime'" class="field-datetime">{{(item[field.name]||'').replace('T','@').substr(0,16)}}</span>
            <span v-else-if="field.type=='password'" class="field-password">{{item[field.name]}}</span>
            <span v-else-if="field.type=='boolean'" class="field-boolean">
              <i class="fa fa-check-square" v-if="item[field.name]===true"></i>
              <i class="fa fa-square" v-if="item[field.name]===false"></i>
            </span>
            <span v-else-if="field.type=='text'" class="field-text"><i class="fa fa-expand"></i></span>
            <a v-else-if="field.type=='reference'" class="field-reference"
               v-on:click="go_ref_by(field.references,item[field.name])">[{{item[field.name]}}]</a>
            <span v-else-if="field.type=='upload'" class="field-upload"><i class="fa fa-download"></i></span>
          </td>
        </tr>
      </tbody>
    </table>
    <button class="button" v-if="table.count > table.items.length" v-on:click="load()">Load More</button>
  </div>
</div>