調整顯示所有投稿主題的界面

XOOPS快速模組開發

9-1 調整顯示所有投稿主題的界面

顯示所有資料的動作是 index，會產生以下規則：
1. 顯示所有投稿主題，存入的資料表是 submission，流程的 $op 值是 submission_index，呼叫的物件方法就是 Submission::index()，對應樣板則是 op_submission_index.tpl
2. 顯示所有學生的投稿，存入的資料表是 submission_data，流程的 $op 值是 submission_data_index，呼叫的物件方法就是 Submission_data::index()，對應樣板則是 op_submission_data_index.tpl
因此，要修改顯示所有投稿主題的畫面，就是去修改 op_submission_index.tpl 樣板檔， Submission::index() 會負責撈出所有資料以及 JS 或 CSS 給該樣板使用。
VSCode中，Ctrl+P，貼上檔名「op_submission_index」，可以快速開啟，不用找半天。

顯示所有投稿主題畫面原本的基本架構：

<{if $all_submission|default:false}>
    若是 $all_submission 有內容，則秀出表格內容

    若是對模組有管理權，看是不是要在這裡做些什麼
    <{if $smarty.session.submission_adm|default:false}>
    <{/if}>

    <div id="submission_save_msg"></div>

    顯示表格內容
    <table data-toggle="table" data-pagination="true" data-search="true" data-mobile-responsive="true" class="table table-sm table-striped table-hover">
    </table>

    <{if $smarty.session.submission_adm|default:false}>
        若是對模組有管理權，則顯示「新增資料」的按鈕
    <{/if}>

    分頁工具(非必要)
    <div class="bar"><{$bar|default:''}></div>

<{else}>
    若是 $all_submission 沒有內容
    <div class="alert alert-warning text-center">
        <{if $smarty.session.submission_adm|default:false}>
            若是對模組有管理權，則顯示「新增資料」的按鈕
            <a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_create" class="btn btn-info">
                <i class="fa fa-plus"></i> <{$smarty.const._TAD_ADD}>
            </a>
        <{else}>
            否則就顯示無資料
            <h3><{$smarty.const._TAD_EMPTY}></h3>
        <{/if}>
    </div>
<{/if}>

一般來說，這個樣板需要改的地方並不多，這部份可以先刪掉。
```
<{if $smarty.session.submission_adm|default:false}>

<{/if}>

<div id="submission_save_msg"></div>
```
1. 上方是對模組有管理權的話，可以顯示某些特殊訊息。
2. submission_save_msg則是用來顯示排序結果。我們不拉動排序，所以可以不用。

接著就是用BootstrapTable來將所有資料列出，關於BootstrapTable使用可以參考這裡：

<table data-toggle="table" data-pagination="true" data-search="true" data-mobile-responsive="true" class="table table-sm table-striped table-hover">
    <thead>
        <tr>
            <!--投稿主題-->
            <th data-field="title" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_TITLE}></th>
            <!--投稿起始日-->
            <th data-field="start" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_START}></th>
            <!--投稿截止日-->
            <th data-field="end" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_END}></th>
            <!--建立者-->
            <th data-field="uid" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_UID}></th>
            <!--建立時間-->
            <th data-field="create_time" data-sortable="true" class="nowrap c"><{$smarty.const._MD_SUBMISSION_CREATE_TIME}></th>
            <{if $smarty.session.submission_adm|default:false}>
                <th><{$smarty.const._TAD_FUNCTION}></th>
            <{/if}>
        </tr>
    </thead>
    <{foreach from=$all_submission key=k item=data name=all_submission}>
        <tr>
        ...略...
        </tr>
    <{/foreach}>
</table>

<table> 的幾個屬性：
1. data-toggle="table" 套用BootstrapTable功能
2. data-pagination="true" 要顯示分頁
3. data-search="true" 要顯示搜尋框
4. data-mobile-responsive="true" 要讓表格有響應式功能
<thead></thead> 一定要有，很重要
<th> 的幾個屬性：
1. data-field="xxx" 設定該欄位的名稱，瓶常用不到，進階功能才會用
2. data-sortable="true" 設定該欄位可以排序

接著修改新增按鈕的文字，暫時不用語系

<{if $smarty.session.submission_adm|default:false}>
    <div class="text-right text-end my-3">
        <a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_create" class="btn btn-info">
            <i class="fa fa-plus"></i> 建立投稿主題
        </a>
    </div>
<{/if}>