<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>