Skip to content

Fix missing counter and paginator in Community Help Center page #167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joanagmaia merged 1 commit into from
Nov 3, 2022
Merged

Fix missing counter and paginator in Community Help Center page #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions frontend/src/modules/automation/pages/automation-list-page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
:class="count ? 'justify-between' : 'justify-end'"
>
<div class="text-gray-500 text-sm">
{{ count }} webhook{{ count === 1 ? '' : 's' }}
{{ pluralize('webhook', count, true) }}
</div>
<div>
<el-button
Expand Down Expand Up @@ -73,6 +73,7 @@ import AppAutomationListTable from '@/modules/automation/components/list/automat
import AppWebhookForm from '@/modules/automation/components/webhooks/webhook-form'
import AppWebhookExecutionList from '@/modules/automation/components/webhooks/webhook-execution-list'
import { mapGetters, mapActions } from 'vuex'
import pluralize from 'pluralize'

export default {
name: 'AppAutomationListPage',
Expand Down Expand Up @@ -127,7 +128,8 @@ export default {
onCloseExecutionsDrawer() {
this.isExecutionsDrawerOpen = false
this.automation = null
}
},
pluralize
}
}
</script>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/modules/report/components/report-list-table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
:has-page-counter="false"
module="report"
position="top"
@change-sorter="doChangePaginationPageSize"
/>
</div>

Expand Down
335 changes: 176 additions & 159 deletions frontend/src/premium/community-help-center/components/community-help-center-table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,172 +14,189 @@
:description="emptyState.description"
></app-empty-state-cta>

<!-- Conversations list -->
<div v-else class="app-list-table panel">
<app-community-help-center-toolbar></app-community-help-center-toolbar>
<div class="-mx-6 -mt-4">
<el-table
ref="table"
v-loading="loading"
:data="conversations"
row-key="id"
border
:default-sort="{
prop: 'lastActive',
order: 'descending'
}"
:row-class-name="rowClass"
@sort-change="doChangeSort"
@row-click="handleRowClick"
>
<el-table-column
type="selection"
width="75"
></el-table-column>
<el-table-column width="150" label="Status">
<template #default="scope">
<span
v-if="scope.row.published"
class="badge badge--green"
>Published</span
>
<span v-else class="badge"
>Unpublished</span
>
</template>
</el-table-column>
<el-table-column
label="Conversation title"
prop="title"
sortable="custom"
>
<template #default="scope">
<div class="font-semibold truncate">
{{ scope.row.title }}
</div>
</template>
</el-table-column>
<el-table-column
width="180"
label="# of Activities"
prop="activityCount"
sortable="custom"
>
<template #default="scope">
{{ scope.row.activityCount }}
</template>
</el-table-column>
<el-table-column
width="180"
label="Last active"
prop="lastActive"
sortable="custom"
>
<template #default="scope">
{{ timeAgo(scope.row.lastActive) }}
</template>
</el-table-column>
<div v-else>
<!-- Sorter -->
<div class="mb-2">
<app-pagination-sorter
:page-size="Number(pagination.pageSize)"
:total="count"
:current-page="pagination.currentPage"
:has-page-counter="false"
module="community-help-center"
position="top"
@change-sorter="doChangePaginationPageSize"
/>
</div>

<el-table-column
label="Platform/channel"
prop="platform"
width="200"
<!-- Conversations list -->
<div class="app-list-table panel">
<app-community-help-center-toolbar></app-community-help-center-toolbar>
<div class="-mx-6 -mt-4">
<el-table
ref="table"
v-loading="loading"
:data="conversations"
row-key="id"
border
:default-sort="{
prop: 'lastActive',
order: 'descending'
}"
:row-class-name="rowClass"
@sort-change="doChangeSort"
@row-click="handleRowClick"
>
<template #header>
<span class="inline-flex items-center">
<span class="inline-flex mr-1"
>Platform/Channel</span
>
<el-tooltip placement="top">
<template #content>
Channel corresponds to a proper
channel (in Discord and Slack), or a
repo (in GitHub)
</template>
<i
class="ri-information-line inline-flex items-center mr-2"
></i>
</el-tooltip>
</span>
</template>
<template #default="scope">
<div class="flex items-center">
<el-table-column
type="selection"
width="75"
></el-table-column>
<el-table-column width="150" label="Status">
<template #default="scope">
<span
v-if="scope.row.platform === 'github'"
class="btn btn--circle btn--github mr-2"
><img
:src="findIcon('github')"
alt="Github"
class="w-4 h-4"
/>
v-if="scope.row.published"
class="badge badge--green"
>Published</span
>
<span v-else class="badge"
>Unpublished</span
>
</template>
</el-table-column>
<el-table-column
label="Conversation title"
prop="title"
sortable="custom"
>
<template #default="scope">
<div class="font-semibold truncate">
{{ scope.row.title }}
</div>
</template>
</el-table-column>
<el-table-column
width="180"
label="# of Activities"
prop="activityCount"
sortable="custom"
>
<template #default="scope">
{{ scope.row.activityCount }}
</template>
</el-table-column>
<el-table-column
width="180"
label="Last active"
prop="lastActive"
sortable="custom"
>
<template #default="scope">
{{ timeAgo(scope.row.lastActive) }}
</template>
</el-table-column>

<el-table-column
label="Platform/channel"
prop="platform"
width="200"
>
<template #header>
<span class="inline-flex items-center">
<span class="inline-flex mr-1"
>Platform/Channel</span
>
<el-tooltip placement="top">
<template #content>
Channel corresponds to a proper
channel (in Discord and Slack), or a
repo (in GitHub)
</template>
<i
class="ri-information-line inline-flex items-center mr-2"
></i>
</el-tooltip>
</span>
<span
v-else-if="
scope.row.platform === 'discord'
"
class="btn btn--circle btn--discord mr-2"
><img
:src="findIcon('discord')"
alt="Discord"
class="w-4 h-4"
/></span>
<span
v-else-if="
scope.row.platform === 'slack'
"
class="btn btn--circle btn--slack mr-2"
><img
:src="findIcon('slack')"
alt="Slack"
class="w-4 h-4"
/></span>
<span
v-else-if="
scope.row.platform === 'devto'
"
class="btn btn--circle btn--devto mr-2"
><img
:src="findIcon('devto')"
alt="DEV"
class="w-4 h-4"
/></span>
{{ scope.row.channel }}
</div>
</template>
</el-table-column>
<el-table-column
label=""
width="70"
fixed="right"
>
<template #default="scope">
<div class="table-actions">
<app-conversation-dropdown
:conversation="scope.row"
></app-conversation-dropdown>
</div>
</template>
</el-table-column>
</el-table>
</template>
<template #default="scope">
<div class="flex items-center">
<span
v-if="scope.row.platform === 'github'"
class="btn btn--circle btn--github mr-2"
><img
:src="findIcon('github')"
alt="Github"
class="w-4 h-4"
/>
</span>
<span
v-else-if="
scope.row.platform === 'discord'
"
class="btn btn--circle btn--discord mr-2"
><img
:src="findIcon('discord')"
alt="Discord"
class="w-4 h-4"
/></span>
<span
v-else-if="
scope.row.platform === 'slack'
"
class="btn btn--circle btn--slack mr-2"
><img
:src="findIcon('slack')"
alt="Slack"
class="w-4 h-4"
/></span>
<span
v-else-if="
scope.row.platform === 'devto'
"
class="btn btn--circle btn--devto mr-2"
><img
:src="findIcon('devto')"
alt="DEV"
class="w-4 h-4"
/></span>
{{ scope.row.channel }}
</div>
</template>
</el-table-column>
<el-table-column
label=""
width="70"
fixed="right"
>
<template #default="scope">
<div class="table-actions">
<app-conversation-dropdown
:conversation="scope.row"
></app-conversation-dropdown>
</div>
</template>
</el-table-column>
</el-table>

<div v-if="!!count" class="mt-8 px-6">
<app-pagination
:total="count"
:page-size="Number(pagination.pageSize)"
:current-page="pagination.currentPage || 1"
module="conversation"
@change-current-page="
doChangePaginationCurrentPage
"
@change-page-size="doChangePaginationPageSize"
/>
<div v-if="!!count" class="mt-8 px-6">
<app-pagination
:total="count"
:page-size="Number(pagination.pageSize)"
:current-page="pagination.currentPage || 1"
module="community-help-center"
@change-current-page="
doChangePaginationCurrentPage
"
@change-page-size="
doChangePaginationPageSize
"
/>
</div>
</div>
<app-community-help-center-conversation-drawer
:expanded="drawerConversationId !== null"
:conversation-id="drawerConversationId"
@close="drawerConversationId = null"
></app-community-help-center-conversation-drawer>
</div>
<app-community-help-center-conversation-drawer
:expanded="drawerConversationId !== null"
:conversation-id="drawerConversationId"
@close="drawerConversationId = null"
></app-community-help-center-conversation-drawer>
</div>
</div>
</div>
Expand Down
Loading