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": {
"EDIT": "Edit category",
"DELETE": "Delete category"
}
},
"EMPTY_TEXT": "No categories found"
}
},
"EDIT_BASIC_INFO": {

View file

@ -1,66 +1,73 @@
<template>
<table>
<thead>
<div>
<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>
<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" />
<td colspan="100%" class="horizontal-line" />
</tr>
</thead>
<tr>
<td colspan="100%" class="horizontal-line" />
</tr>
<tbody>
<tr v-for="category in categories" :key="category.id">
<td>
<span>{{ category.name }}</span>
</td>
<td>
<span>{{ category.description }}</span>
</td>
<td>
<span>{{ category.locale }}</span>
</td>
<td>
<span>{{ category.meta.articles_count }}</span>
</td>
<td>
<woot-button
v-tooltip.top-end="
$t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.EDIT')
"
size="tiny"
variant="smooth"
icon="edit"
color-scheme="secondary"
@click="editCategory(category)"
/>
<woot-button
v-tooltip.top-end="
$t(
'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.DELETE'
)
"
size="tiny"
variant="smooth"
icon="delete"
color-scheme="alert"
@click="deleteCategory(category.id)"
/>
</td>
</tr>
</tbody>
</table>
<tbody>
<tr v-for="category in categories" :key="category.id">
<td>
<span>{{ category.name }}</span>
</td>
<td>
<span>{{ category.description }}</span>
</td>
<td>
<span>{{ category.locale }}</span>
</td>
<td>
<span>{{ category.meta.articles_count }}</span>
</td>
<td>
<woot-button
v-tooltip.top-end="
$t(
'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.EDIT'
)
"
size="tiny"
variant="smooth"
icon="edit"
color-scheme="secondary"
@click="editCategory(category)"
/>
<woot-button
v-tooltip.top-end="
$t(
'HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.ACTION_BUTTON.DELETE'
)
"
size="tiny"
variant="smooth"
icon="delete"
color-scheme="alert"
@click="deleteCategory(category.id)"
/>
</td>
</tr>
</tbody>
</table>
<p v-if="categories.length === 0" class="empty-text">
{{ $t('HELP_CENTER.PORTAL.EDIT.CATEGORIES.TABLE.EMPTY_TEXT') }}
</p>
</div>
</template>
<script>
@ -105,4 +112,12 @@ table {
.horizontal-line {
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>