refactor: remove advanced table from free version

Author: woothu

src/views/base/Tables.vue

@@ -1,90 +1,16 @@
 <template>
   <div>
-    <CRow>
-      <CCol sm="12">
-        <CCard>
-          <CCardHeader>
-            CTable component functionality presentation
-            <div class="card-header-actions">
-              <a 
-                href="https://coreui.io/vue/docs/3.0/components/Table" 
-                class="card-header-action" 
-                rel="noreferrer noopener" 
-                target="_blank"
-              >
-                <small class="text-muted">docs</small>
-              </a>
-            </div>
-          </CCardHeader>
-          <CCardBody>
-            <CTable
-              :items="getItems()"
-              :fields="fields"
-              index-column
-              column-filter
-              table-filter
-              items-per-page-selects
-              hover
-              sortable
-              footer
-              pagination
-            >
-              <template #index-column="{index}">
-                <td
-                  @click="toggleDetails(index)"
-                  style="cursor:pointer"
-                  class="text-center"
-                >
-                  <i
-                    class="icons font-lg d-block cui-chevron-right"
-                    style="transition: transform 0.4s"
-                    :style="details.includes(index) ? 'transform:rotate(90deg)': ''"
-                  ></i>
-                </td>
-              </template>
-              <template #status="{item}">
-                <td>
-                  <CBadge :variant="getBadge(item.status)">
-                    {{item.status}}
-                  </CBadge>
-                </td>
-              </template>
-              <template #show_details="{item, index}">
-                <td class="py-2">
-                  <CButton
-                    variant="outline-primary"
-                    square
-                    size="sm"
-                    @click="toggleDetails(index)"
-                    :text-html="details.includes(index) ? 'Hide' : 'Show'"
-                  />
-                </td>
-              </template>
-              <template #details="{item, index}">
-                <CCollapse :show="details.includes(index)">
-                  <CCardBody>
-                    {{index + 1}} - {{item}}
-                  </CCardBody>
-                </CCollapse>
-              </template>
-            </CTable>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
-
-
     <CRow>
       <CCol lg="6">
         <CTableWrapper
-          :items="getItems()"
+          :items="getShuffledUsersData()"
           caption="<i class='fa fa-align-justify'></i> Simple Table"
         />
       </CCol>
 
       <CCol lg="6">
         <CTableWrapper
-          :items="getItems()"
+          :items="getShuffledUsersData()"
           striped
           caption="<i class='fa fa-align-justify'></i> Striped Table"
         />
@@ -94,15 +20,15 @@
     <CRow>
       <CCol lg="6">
         <CTableWrapper
-          :items="getItems()"
+          :items="getShuffledUsersData()"
           small
           caption="<i class='fa fa-align-justify'></i> Condensed Table"
         />
       </CCol>
 
       <CCol lg="6">
         <CTableWrapper
-          :items="getItems()"
+          :items="getShuffledUsersData()"
           fixed
           bordered
           caption="<i class='fa fa-align-justify'></i> Bordered Table"
@@ -113,7 +39,7 @@
     <CRow>
       <CCol sm="12">
         <CTableWrapper
-          :items="getItems()"
+          :items="getShuffledUsersData()"
           hover
           striped
           bordered
@@ -127,7 +53,7 @@
     <CRow>
       <CCol sm="12">
         <CTableWrapper
-          :items="getItems()"
+          :items="getShuffledUsersData()"
           hover
           striped
           bordered
@@ -143,59 +69,12 @@
 
 <script>
 import CTableWrapper from './Table.vue'
-
-const fields = [
-  { key: 'username', _style:'width:40%' },
-  'registered',
-  { key: 'role', _style:'width:20%;' },
-  { key: 'status', _style:'width:20%;' },
-  { key: 'show_details' , label:'', _style:'width:1%', notSortable: true, noFilter: true },
-]
-const items = [
-  { username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  { username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  { username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  { username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  { username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  { username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  { username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
-  { username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  { username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  { username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  { username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-info'},
-  { username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  { username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  { username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  { username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  { username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  { username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  { username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
-  { username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
-  { username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
-  { username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
-  { username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
-  { username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
-  { username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
-  { username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
-]
+import usersData from '../users/UsersData'
 
 export default {
   name: 'Tables',
   components: { CTableWrapper },
-  data () {
-    return {
-      items,
-      fields,
-      details: [],
-    }
-  },
   methods: {
-    getBadge (status) {
-      return status === 'Active' ? 'success'
-             : status === 'Inactive' ? 'secondary'
-             : status === 'Pending' ? 'warning'
-             : status === 'Banned' ? 'danger' : 'primary'
-    },
     shuffleArray (array) {
       for (let i = array.length - 1; i > 0; i--) {
         let j = Math.floor(Math.random() * (i + 1))
@@ -205,12 +84,9 @@ export default {
       }
       return array
     },
-    toggleDetails (index) {
-      const position = this.details.indexOf(index)
-      position !== -1 ? this.details.splice(position, 1) : this.details.push(index)
-    },
-    getItems () {
-      return this.shuffleArray(this.items.slice(0))
+
+    getShuffledUsersData () {
+      return this.shuffleArray(usersData.slice(0))
     }
   }
 }