Basic roles listing using wordpress admin layout. #274.
This commit is contained in:
Mateus Machado Luna
parent
9f4395bb9f
commit
7bdcda5720
|
|
@ -16,13 +16,13 @@ I18NPlugin.install = function (Vue, options = {}) {
|
||||||
return __(key, 'tainacan');
|
return __(key, 'tainacan');
|
||||||
},
|
},
|
||||||
getWithContext(key, keyContext) {
|
getWithContext(key, keyContext) {
|
||||||
return __(key, keyContext, 'tainacan');
|
return _x(key, keyContext, 'tainacan');
|
||||||
},
|
},
|
||||||
getWithNumber(keySingle, keyPlural, number) {
|
getWithNumber(keySingle, keyPlural, number) {
|
||||||
return __(keySingle, keyPlural, number, 'tainacan');
|
return _n(keySingle, keyPlural, number, 'tainacan');
|
||||||
},
|
},
|
||||||
getWithNumberAndContext(keySingle, keyPlural, number, keyContext) {
|
getWithNumberAndContext(keySingle, keyPlural, number, keyContext) {
|
||||||
return __(keySingle, keyPlural, number, keyContext, 'tainacan');
|
return _nx(keySingle, keyPlural, number, keyContext, 'tainacan');
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,166 @@
|
||||||
<a class="page-title-action">
|
<a class="page-title-action">
|
||||||
{{ $i18n.get('Add new role') }}
|
{{ $i18n.get('Add new role') }}
|
||||||
</a>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { mapActions, mapGetters } from 'vuex';
|
||||||
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue