chore: Adds empty text

This commit is contained in:
iamsivin 2022-09-02 19:41:30 +05:30
parent de413a35a6
commit 50a6e91142
2 changed files with 77 additions and 61 deletions

View file

@ -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": {

View file

@ -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>