From 7bdcda572011337d33bbe485f3fe10eae6bd21a5 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 19 Nov 2019 16:32:21 -0300
Subject: [PATCH] Basic roles listing using wordpress admin layout. #274.

---
 src/admin/js/wp-i18n-plugin.js |   6 +-
 src/admin/roles.vue            | 157 ++++++++++++++++++++++++++++++++-
 2 files changed, 158 insertions(+), 5 deletions(-)

diff --git a/src/admin/js/wp-i18n-plugin.js b/src/admin/js/wp-i18n-plugin.js
index a158c1798..e6e6c79cc 100644
--- a/src/admin/js/wp-i18n-plugin.js
+++ b/src/admin/js/wp-i18n-plugin.js
@@ -16,13 +16,13 @@ I18NPlugin.install = function (Vue, options = {}) {
             return __(key, 'tainacan');
         },
         getWithContext(key, keyContext) {
-            return __(key, keyContext, 'tainacan');
+            return _x(key, keyContext, 'tainacan');
         },
         getWithNumber(keySingle, keyPlural, number) {
-            return __(keySingle, keyPlural, number, 'tainacan');
+            return _n(keySingle, keyPlural, number, 'tainacan');
         },
         getWithNumberAndContext(keySingle, keyPlural, number, keyContext) {
-            return __(keySingle, keyPlural, number, keyContext, 'tainacan');
+            return _nx(keySingle, keyPlural, number, keyContext, 'tainacan');
         },
     }
 
diff --git a/src/admin/roles.vue b/src/admin/roles.vue
index 9285236b4..af9ae9931 100644
--- a/src/admin/roles.vue
+++ b/src/admin/roles.vue
@@ -6,13 +6,166 @@
         <a class="page-title-action">
             {{ $i18n.get('Add new role') }}
         </a>
-        <hr class="wp-header-end">   
+        <hr class="wp-header-end">
+        <br>
+        <h2 class="screen-reader-text">{{ $i18n.get('Roles list') }}</h2>
+        <table 
+                v-if="!isLoadingRoles"
+                class="wp-list-table widefat fixed striped users">
+            <thead>
+                <tr>
+                    <td class="manage-column column-cb check-column">
+                        <label
+                                class="screen-reader-text"
+                                for="cb-select-all">
+                            {{ $i18n.get('Selecionar Todos') }}
+                        </label>
+                        <input
+                                id="cb-select-all"
+                                type="checkbox">
+                    </td>
+                    <th
+                            scope="col"
+                            id="name"
+                            class="manage-column column-name">
+                        <a>
+                            {{ $i18n.get('Name') }}
+                        </a>
+                    </th>
+                    <th
+                            scope="col"
+                            id="role"
+                            class="manage-column column-slug">
+                        {{ $i18n.get('Slug') }}
+                    </th>
+                    <th
+                            scope="col"
+                            id="capabilities-number"
+                            class="manage-column column-capabilities num">
+                        {{ $i18n.get('Number of Capabilities') }}
+                    </th>
+                </tr>
+            </thead>
+
+            <tbody data-wp-lists="list:roles">
+                <tr
+                        v-for="role of roles"
+                        :key="role.slug"
+                        :id="role.slug">
+                    <th
+                            scope="row"
+                            class="check-column">
+                        <label
+                                class="screen-reader-text"
+                                :for="'user_' + role.slug">
+                            {{ $i18n.get('Selecionar') + ' ' + role.name }}
+                        </label>
+                        <input
+                            type="checkbox"
+                            name="roles[]"
+                            :id="'user_'+ role.slug"
+                            :value="role.slug">
+                    </th>
+                    <td 
+                            class="name column-name has-row-actions column-primary"
+                            :data-colname="$i18n.get('Role name')">
+                        <strong>
+                            <a>{{ role.name }}</a>
+                        </strong>
+                        <br>
+                        <div class="row-actions">
+                            <span class="edit"><a>{{ $i18n.get('Editar') }}</a> | </span>
+                            <span class="view"><a>{{ $i18n.get('Editar') }}</a></span>
+                        </div>
+                        <button
+                                type="button"
+                                class="toggle-row">
+                            <span class="screen-reader-text">{{ $i18n.get('Mostrar detalhes') }}</span>
+                        </button>
+                    </td>
+                    <td
+                            class="slug column-slug"
+                            :data-colname="$i18n.get('Slug')">
+                        {{ role.slug }}
+                    </td>
+                    <td
+                            class="capabilities column-capabilities num"
+                            :data-colname="$i18n.get('Number of capabilities')">
+                        {{ Object.values(role.capabilities).length }}
+                    </td>
+                </tr>
+            </tbody>
+
+            <tfoot>
+                <tr>
+                    <td class="manage-column column-cb check-column">
+                        <label
+                                class="screen-reader-text"
+                                for="cb-select-all-2">
+                            {{ $i18n.get('Selecionar Todos') }}
+                        </label>
+                        <input
+                                id="cb-select-all-2"
+                                type="checkbox">
+                    </td>
+                    <th
+                            scope="col"
+                            id="name"
+                            class="manage-column column-name column-primary">
+                        <a>
+                            {{ $i18n.get('Name') }}
+                        </a>
+                    </th>
+                    <th
+                            scope="col"
+                            id="role"
+                            class="manage-column column-slug">
+                        {{ $i18n.get('Slug') }}
+                    </th>
+                    <th
+                            scope="col"
+                            id="capabilities-number"
+                            class="manage-column column-capabilities num">
+                        {{ $i18n.get('Number of Capabilities') }}
+                    </th>
+                </tr>
+            </tfoot>
+        </table>
     </div> 
 </template>
 
 <script>
+    import { mapActions, mapGetters } from 'vuex';
+     
     export default { 
-        name: "RolesPage"
+        name: "RolesPage",
+        data() {
+            return {
+                isLoadingRoles: false,
+            }
+        },
+        computed: {
+            roles() {
+                return this.getRoles();
+            }
+        },
+        methods: {
+            ...mapActions('capability', [
+                'fetchRoles'
+            ]),
+            ...mapGetters('capability', [
+                'getRoles'
+            ]),
+        },
+        created() {
+            this.isLoadingRoles = true;
+            this.fetchRoles()
+                .then(() => {
+                    this.isLoadingRoles = false;
+                }).catch(() => {
+                    this.isLoadingRoles = false;
+                });
+        }
     }
 </script>