chore: Adds empty text
This commit is contained in:
parent
de413a35a6
commit
50a6e91142
2 changed files with 77 additions and 61 deletions
|
@ -150,7 +150,8 @@
|
||||||
"ACTION_BUTTON": {
|
"ACTION_BUTTON": {
|
||||||
"EDIT": "Edit category",
|
"EDIT": "Edit category",
|
||||||
"DELETE": "Delete category"
|
"DELETE": "Delete category"
|
||||||
}
|
},
|
||||||
|
"EMPTY_TEXT": "No categories found"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"EDIT_BASIC_INFO": {
|
"EDIT_BASIC_INFO": {
|
||||||
|
|
|
@ -1,66 +1,73 @@
|
||||||
<template>
|
<template>
|
||||||
<table>
|
<div>
|
||||||
<thead>
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">
|
||||||
|
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.NAME') }}
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.DESCRIPTION') }}
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.LOCALE') }}
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ARTICLE_COUNT') }}
|
||||||
|
</th>
|
||||||
|
<th scope="col" />
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">
|
<td colspan="100%" class="horizontal-line" />
|
||||||
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.NAME') }}
|
|
||||||
</th>
|
|
||||||
<th scope="col">
|
|
||||||
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.DESCRIPTION') }}
|
|
||||||
</th>
|
|
||||||
<th scope="col">
|
|
||||||
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.LOCALE') }}
|
|
||||||
</th>
|
|
||||||
<th scope="col">
|
|
||||||
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ARTICLE_COUNT') }}
|
|
||||||
</th>
|
|
||||||
<th scope="col" />
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
<tbody>
|
||||||
<tr>
|
<tr v-for="category in categories" :key="category.id">
|
||||||
<td colspan="100%" class="horizontal-line" />
|
<td>
|
||||||
</tr>
|
<span>{{ category.name }}</span>
|
||||||
<tbody>
|
</td>
|
||||||
<tr v-for="category in categories" :key="category.id">
|
<td>
|
||||||
<td>
|
<span>{{ category.description }}</span>
|
||||||
<span>{{ category.name }}</span>
|
</td>
|
||||||
</td>
|
<td>
|
||||||
<td>
|
<span>{{ category.locale }}</span>
|
||||||
<span>{{ category.description }}</span>
|
</td>
|
||||||
</td>
|
<td>
|
||||||
<td>
|
<span>{{ category.meta.articles_count }}</span>
|
||||||
<span>{{ category.locale }}</span>
|
</td>
|
||||||
</td>
|
<td>
|
||||||
<td>
|
<woot-button
|
||||||
<span>{{ category.meta.articles_count }}</span>
|
v-tooltip.top-end="
|
||||||
</td>
|
$t(
|
||||||
<td>
|
'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.EDIT'
|
||||||
<woot-button
|
)
|
||||||
v-tooltip.top-end="
|
"
|
||||||
$t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.EDIT')
|
size="tiny"
|
||||||
"
|
variant="smooth"
|
||||||
size="tiny"
|
icon="edit"
|
||||||
variant="smooth"
|
color-scheme="secondary"
|
||||||
icon="edit"
|
@click="editCategory(category)"
|
||||||
color-scheme="secondary"
|
/>
|
||||||
@click="editCategory(category)"
|
<woot-button
|
||||||
/>
|
v-tooltip.top-end="
|
||||||
<woot-button
|
$t(
|
||||||
v-tooltip.top-end="
|
'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.DELETE'
|
||||||
$t(
|
)
|
||||||
'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.DELETE'
|
"
|
||||||
)
|
size="tiny"
|
||||||
"
|
variant="smooth"
|
||||||
size="tiny"
|
icon="delete"
|
||||||
variant="smooth"
|
color-scheme="alert"
|
||||||
icon="delete"
|
@click="deleteCategory(category.id)"
|
||||||
color-scheme="alert"
|
/>
|
||||||
@click="deleteCategory(category.id)"
|
</td>
|
||||||
/>
|
</tr>
|
||||||
</td>
|
</tbody>
|
||||||
</tr>
|
</table>
|
||||||
</tbody>
|
<p v-if="categories.length === 0" class="empty-text">
|
||||||
</table>
|
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -105,4 +112,12 @@ table {
|
||||||
.horizontal-line {
|
.horizontal-line {
|
||||||
border-bottom: 1px solid var(--color-border);
|
border-bottom: 1px solid var(--color-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--s-500);
|
||||||
|
font-size: var(--font-size-default);
|
||||||
|
margin-top: var(--space-three);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue