<script type=“text/javascript”> if(column_type === undefined) var column_type = 'card'; if(countOfPage === undefined) var countOfPage = 9; if(sortable === undefined) var sortable = false; if(info_url === undefined) var info_url = “localhost:3000/service_prototypes/info”; $(document).ready(function() {
var modal = $($('#modal').html()); var model = $($('#model-' + column_type).html()); model.find('.custom_model').html( $('#custom_model').html() ); model.find('.custom_action').html( $('#custom_action').html() ); modal.find('.modal_body_prepend').html( $('#modal_body_prepend').html() ); modal.find('.modal_body_append').html( $('#modal_body_append').html() ); modal.find('.custom_modal_body').html( $('#custom_modal_body').html() ); modal.find('.custom_modal_action').html( $('#custom_modal_action').html() ); $('#modal').html(modal); $('#model-' + column_type).html(model); $('.vue_form').html( $('#vue_form').html() ); vueCRUD_init({ column_type: column_type, countOfPage: countOfPage, sortable: sortable, info_url: info_url }); $('.filter .ui.dropdown').dropdown(); // $('.ui.checkbox').checkbox();
}); </script> <div id=“vue_crud”>
<div class="ui inverted dimmer" :class="{'active': !is_loaded}"> <div class="ui indeterminate text loader">處理中...</div> </div> <input type="text" name="progress" id="form-progress"> <h1 class="ui center aligned icon header"> <i class="icon" :class="info.titles.icon"></i> {{ info.titles.title }} <div class="sub header"><small>{{ info.titles.subtitle }}</small></div> </h1> <div class="ui secondary pointing menu"> <a class="item" onclick="history.back()"> <i class="arrow left icon"></i>返回 </a> <a class="item" @click="addModel('創建')" v-if="!info.actions.create.disabled"> <i class="plus icon"></i>新增{{ info.titles.display_name }} </a> <a class="item active"> <i class="list icon"></i>列表 </a> <a class="item"> <i class="browser icon"></i>紀錄 </a> <div class="right menu"> <div class="item"> <!-- NOTE: Filter --> <div class="ui left action right icon labeled input filter" :class="{loading: is_calculating}"> <a :href="default_url" class="ui button red" v-show="selected_attribute">重置</a> <div class="ui basic floating dropdown button"> <div class="text">{{ selected_text || '請選擇欄位' }}</div> <i class="dropdown icon"></i> <div class="menu attribute_select"> <div class="item attribute_option" v-for="attribute in info.model_attributes" :target="attribute.name" :target_text="attribute.display_name" :class="{selected: selected_attribute == attribute.name, active: selected_attribute == attribute.name}">{{ attribute.display_name }}</div> </div> </div> <input type="text" id="searchQuery" :placeholder="searchStatus" v-model="searchQuery"> <i class="icon search"></i> </div> </div> </div> </div> <br> <!-- NOTE: Pagination --> <div class="ui pagination menu" v-if="column_type == 'card' && totalPage > 1"> <a class="item" @click.prevent="setPage(currentPage-1)" :class="{'disabled': (currentPage == '1')}"> < </a> <a v-for="n in totalPage" @click.prevent="setPage(n)" :class="{'active': (currentPage == (n))}" class="item"> {{n}} </a> <a class="item" @click.prevent="setPage(currentPage+1)" :class="{'disabled': (currentPage == totalPage)}"> > </a> </div> <div class="ui divider" v-if="column_type == 'card' && totalPage > 1"></div> <!-- NOTE: model --> <div v-sortable class="ui three column grid" v-if="column_type == 'card'"> <model v-for="model in filteredModels" :original_model="model" :info="info" :selected_attribute="selected_attribute"></model> </div> <table class="ui celled selectable table" v-if="column_type == 'table'"> <thead> <tr> <th v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.name == selected_attribute}"> {{ attribute.display_name }} </th> <th> 動作 </th> <th></th> </tr> </thead> <tbody v-sortable> <tr is="model" v-for="model in filteredModels" :original_model="model" :info="info" :selected_attribute="selected_attribute"> </tr> </tbody> <tfoot> <tr> <th :colspan="info.model_attributes.length + 2"> <div class="ui right floated pagination menu"> <a class="item" @click.prevent="setPage(currentPage-1)" :class="{'disabled': (currentPage == '1')}"> < </a> <a v-for="n in totalPage" @click.prevent="setPage(n)" :class="{'active': (currentPage == (n))}" class="item"> {{n}} </a> <a class="item" @click.prevent="setPage(currentPage+1)" :class="{'disabled': (currentPage == totalPage)}"> > </a> </div> </th> </tr> </tfoot> </table> <modal :info="info"></modal>
</div> <!– NOTE: Templates –> <script type=“text/x-template” id=“modal”>
<div class="ui modal" id="vueModal"> <div class="ui inverted dimmer"> <div class="ui indeterminate text loader">處理中...</div> </div> <div class="header">{{ action_name }}</div> <div class="content"> <!-- NOTE: Modal body prepend --> <div v-show="defaultMode" class="modal_body_prepend"></div> <!-- NOTE: Not customMode --> <div v-show="defaultMode" class="vue_form"></div> <!-- NOTE: Modal body prepend --> <div v-show="defaultMode" class="modal_body_append"></div> <!-- NOTE: Custom modal body --> <div v-show="!defaultMode"> <div class="custom_modal_body"></div> </div> </div> <div class="actions"> <div class="ui buttons"> <button class="ui cancel button">取消</button> <div class="or"></div> <button @click="modalSubmit" class="ui button blue">{{ action_name }}</button> </div> <!-- NOTE: Custom modal action --> <div class="inline-block custom_modal_action"></div> </div> </div>
</script> <script type=“text/x-template” id=“model-table”>
<tr :class="{'is_deleted': is_deleted}"> <td v-for="(attribute, i) in info.model_attributes" v-if="attribute.visible" :class="{'sort-here': i == 0, highlight: attribute.name == selected_attribute}"> <div v-if="attribute.display_type == 'token'"> <pre>{{ model[attribute.name] }}</pre> </div> <div v-else-if="attribute.display_type == 'boolean'"> {{ model[attribute.name] | boolean }} </div> <div v-else-if="attribute.display_type == 'email'"> <a :href="'mailto:' + model[attribute.name]" target="new">{{ model[attribute.name] }}</a> </div> <div v-else-if="attribute.display_type == 'img'"> <img :src="model[attribute.name]" /> </div> <div v-else-if="attribute.display_type == 'text'"> <span v-html="model[attribute.name]"></span> </div> <div v-else-if="attribute.display_type == 'datetime'"> {{ model[attribute.name] | datetime }} </div> <div v-else> {{ model[attribute.name] }} </div> </td> <td style="position: relative;"> <a @click="restoreModel" onclick="return false" class="ui red right corner label" v-show="is_deleted" title="您已刪除,點擊復原"> <i class="repeat icon"></i> </a> <a @click="restoreModel" onclick="return false" class="ui red right corner label" v-show="is_restore_failed" title="復原失敗"> <i class="warning circle icon"></i> </a> <a @click="updateModel" onclick="return false" class="ui orange right corner label" v-show="modified" title="您有尚未儲存的變更"> <i class="save icon"></i> </a> <a class="ui green right corner label" v-show="is_success" title="儲存成功"> <i class="check icon"></i> </a> <!-- NOTE: Custom action --> <div class="inline-block custom_action"></div> <div class="ui animated fade blue button" @click="editModel('編輯')" v-if="!info.actions.update.disabled"> <div class="visible content">編輯</div> <div class="hidden content"> <i class="right edit icon"></i> </div> </div> <div class="ui animated fade red button" @click="deleteModel" class="ui basic red button" v-show="!deleteMode" v-if="!info.actions.delete.disabled"> <div class="visible content">刪除</div> <div class="hidden content"> <i class="right trash icon"></i> </div> </div> <div class="ui buttons" v-for="quick_toggle_attribute in info.quick_toggle_attributes"> <button class="ui button" @click="toggleTrue(quick_toggle_attribute.name)" :class="{'green': model[quick_toggle_attribute.name]}">{{ quick_toggle_attribute.labels[0] }}</button> <div class="or"></div> <button class="ui button" @click="toggleFalse(quick_toggle_attribute.name)" :class="{'green': !model[quick_toggle_attribute.name]}">{{ quick_toggle_attribute.labels[1] }}</button> </div> </td> <td :colspan="info.model_attributes.length + 1"> <!-- NOTE: Custom model --> <div class="custom_model"></div> </td> </tr>
</script> <script type=“text/x-template” id=“model-card”>
<div class="column"> <div class="ui fluid card sort-here"> <div class="content"> <div class="ui top attached label gray">{{ info.titles.display_name }}</div> <div class="header">{{ model[info.titles.title_attribute] }}</div> <div class="meta">創建於 {{ model[info.titles.created_at_attribute] | datetime }}</div> <div class="ui horizontal divider" v-toggle><h3><i class="bar chart icon"></i>欄位資料</h3></div> <div class="description attribute" style="display: none;"> <div class="item" v-for="attribute in info.model_attributes" v-if="attribute.visible" :class="{highlight: attribute.name == selected_attribute}"> <div v-if="attribute.display_type == 'token'"> <span class="display_name">{{ attribute.display_name }}:</span> <pre>{{ model[attribute.name] }}</pre> </div> <div v-else-if="attribute.display_type == 'boolean'"> <span class="display_name">{{ attribute.display_name }}:</span> {{ model[attribute.name] | boolean }} </div> <div v-else-if="attribute.display_type == 'email'"> <span class="display_name">{{ attribute.display_name }}:</span> <a :href="'mailto:' + model[attribute.name]" target="new">{{ model[attribute.name] }}</a> </div> <div v-else-if="attribute.display_type == 'img'"> <span class="display_name">{{ attribute.display_name }}:</span> <img :src="model[attribute.name]" /> </div> <div v-else-if="attribute.display_type == 'text'"> <span class="display_name">{{ attribute.display_name }}:</span> <span v-html="model[attribute.name]"></span> </div> <div v-else-if="attribute.display_type == 'datetime'"> <span class="display_name">{{ attribute.display_name }}:</span> {{ model[attribute.name] | datetime }} </div> <div v-else> <span class="display_name">{{ attribute.display_name }}:</span> {{ model[attribute.name] }} </div> <div class="ui divider"></div> </div> <!-- NOTE: Custom model --> </div> <div class="custom_model"></div> </div> <div class="extra content"> <div class="ui red right ribbon label" v-show="is_deleted">您已刪除,點擊<a href="#" @click="restoreModel" onclick="return false" class="save_now">復原</a></div> <div class="ui orange right ribbon label" v-show="modified">您有尚未儲存的變更,<a href="#" @click="updateModel" onclick="return false" class="save_now">立即儲存</a></div> <div class="ui teal right ribbon label" v-show="is_success">儲存成功</div> <div class="ui red right ribbon label" v-show="is_restore_failed">復原失敗</div> <div class="ui divider"></div> <!-- NOTE: Custom action --> <div class="inline-block custom_action"></div> <div class="ui animated fade blue button" @click="editModel('編輯')" v-if="!info.actions.update.disabled"> <div class="visible content">編輯</div> <div class="hidden content"> <i class="right edit icon"></i> </div> </div> <div class="ui animated fade right floated red button" @click="deleteModel" class="ui basic red button" v-show="!deleteMode" v-if="!info.actions.delete.disabled"> <div class="visible content">刪除</div> <div class="hidden content"> <i class="right trash icon"></i> </div> </div> </div> <div class="ui blue bottom attached progress"> <div class="bar" :style="{width: progress + '%'}"></div> </div> </div> </div>
</script> <script type=“text/x-template” id=“vue_form”>
<form class="ui form"> <div v-for="attribute in model_attributes" v-if="attribute.editable"> <!-- select --> <div class="field" v-if="attribute.input_type == 'select'"> <label :for="'model_' + attribute.name">{{ attribute.display_name }}</label> <select :id="'model_' + attribute.name" v-model="model[attribute.name]" class="ui fluid dropdown" :class="attribute.input_class"> <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option> </select> <div class="ui pointing red basic label" v-show="errors[attribute.name]"> <span style="color: red" v-for="(error, index) in errors[attribute.name]"> <span v-if="index > 0">,</span> {{ error }} </span> </div> </div> <!-- multiSelect --> <div class="field" v-else-if="attribute.input_type == 'multiSelect'"> <label :for="'model_' + attribute.name">{{ attribute.display_name }}</label> <select :id="'model_' + attribute.name" multiple v-model="model[attribute.name]" class="ui fluid dropdown" :class="attribute.input_class"> <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option> </select> <div class="ui pointing red basic label" v-show="errors[attribute.name]"> <span style="color: red" v-for="(error, index) in errors[attribute.name]"> <span v-if="index > 0">,</span> {{ error }} </span> </div> </div> <!-- selectInput --> <div class="field" v-else-if="attribute.input_type == 'selectInput'"> <label :for="'model_' + attribute.name">{{ attribute.display_name }}</label> <div class="ui grid"> <div class="ten wide column"> <input @keyup.enter="modalSubmit" type="text" :id="'model_' + attribute.name" v-model="model[attribute.name]" :class="attribute.input_class"> </div> <div class="six wide column"> <select v-model="model[attribute.name]" class="ui dropdown" :class="attribute.input_class" onchange="$(this).parent().prev().find('input').val(this.value)"> <option v-for="option in attribute.options" :value="option.value" v-text="option.text"></option> </select> </div> </div> <div class="ui pointing red basic label" v-show="errors[attribute.name]"> <span style="color: red" v-for="(error, index) in errors[attribute.name]"> <span v-if="index > 0">,</span> {{ error }} </span> </div> </div> <!-- textarea --> <div class="field" v-else-if="attribute.input_type == 'textarea'"> <label :for="'model_' + attribute.name">{{ attribute.display_name }}</label> <textarea v-froala :attribute="attribute.name" :id="'model_' + attribute.name" v-model="model[attribute.name]" :class="attribute.input_class"></textarea> <div class="ui pointing red basic label" v-show="errors[attribute.name]"> <span style="color: red" v-for="(error, index) in errors[attribute.name]"> <span v-if="index > 0">,</span> {{ error }} </span> </div> </div> <!-- checkbox --> <div class="field" v-else-if="attribute.input_type == 'checkbox'"> <div class="ui checkbox"> <input type="checkbox" tabindex="0" :id="'model_' + attribute.name" v-model="model[attribute.name]" :class="attribute.input_class"> <label>{{ attribute.display_name }}</label> </div> <div class="ui pointing red basic label" v-show="errors[attribute.name]"> <span style="color: red" v-for="(error, index) in errors[attribute.name]"> <span v-if="index > 0">,</span> {{ error }} </span> </div> </div> <!-- number --> <div class="field" v-else-if="attribute.input_type == 'number'"> <label :for="'model_' + attribute.name">{{ attribute.display_name }}</label> <input @keyup.enter="modalSubmit" type="number" :id="'model_' + attribute.name" v-model="model[attribute.name]" :class="attribute.input_class" number> <div class="ui pointing red basic label" v-show="errors[attribute.name]"> <span style="color: red" v-for="(error, index) in errors[attribute.name]"> <span v-if="index > 0">,</span> {{ error }} </span> </div> </div> <!-- else --> <div class="field" v-else> <label :for="'model_' + attribute.name">{{ attribute.display_name }}</label> <input @keyup.enter="modalSubmit" type="text" :id="'model_' + attribute.name" v-model="model[attribute.name]" :class="attribute.input_class"> <div class="ui pointing red basic label" v-show="errors[attribute.name]"> <span style="color: red" v-for="(error, index) in errors[attribute.name]"> <span v-if="index > 0">,</span> {{ error }} </span> </div> </div> </div> </form>
</script>