Skip to content

Commit

Permalink
#2490 Add more to UserTagTable component
Browse files Browse the repository at this point in the history
  • Loading branch information
@dwalizer
dwalizer committed May 23, 2024
1 parent 1a6ffd6 commit 17a09cb
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 61 deletions.
7 changes: 3 additions & 4 deletions dashboard-prime/src/components/metrics/ProjectMetrics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,10 @@ const buildTagCharts = () => {
<num-users-per-day />
</div>
</div>
<div v-if="tagCharts" class="flex gap-4 mt-4 mb-4" data-cy="userTagCharts">
<div class="flex flex-1" v-for="(tagChart, index) in tagCharts" :key="`${tagChart.key}-${index}`">
<!-- <div v-if="index > 0 && index % 2 == 0" class="w-100"></div>-->
<div v-if="tagCharts" class="flex flex-wrap gap-4 mt-4 mb-4" data-cy="userTagCharts">
<div class="flex flex-grow-1 flex-wrap" v-for="(tagChart, index) in tagCharts" :key="`${tagChart.key}-${index}`" style="min-width: 30vw;">
<user-tag-table v-if="tagChart.type === 'table'"
class="h-100"
class="h-100 w-full"
:tag-chart="tagChart"
tabindex="0" />
<user-tag-chart v-if="tagChart.type !== 'table'"
Expand Down
75 changes: 51 additions & 24 deletions dashboard-prime/src/components/metrics/common/UserTagTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import MetricsService from "@/components/metrics/MetricsService.js";
import SkillsDataTable from "@/components/utils/table/SkillsDataTable.vue";
const props = defineProps({
tagChart: Object
Expand All @@ -21,23 +22,8 @@ const table = ref({
items: [],
options: {
busy: false,
bordered: true,
outlined: true,
stacked: 'md',
sortBy: 'count',
sortDesc: true,
fields: [
{
key: 'value',
label: props.tagChart.tagLabel ? props.tagChart.tagLabel : 'Tag',
sortable: true,
},
{
key: 'count',
label: '# Users',
sortable: true,
},
],
pagination: {
server: true,
currentPage: 1,
Expand All @@ -57,20 +43,19 @@ const tagKey = computed(() => {
return props.tagChart.key;
});
const pageChanged = (pagingInfo) => {
table.value.options.pagination.pageSize = pagingInfo.rows
table.value.options.pagination.currentPage = pagingInfo.page + 1
loadData()
}
const sortTable = (sortContext) => {
table.value.options.sortDesc = sortContext.sortDesc;
table.value.options.sortDesc = sortContext.sortOrder === -1;
table.value.options.sortBy = sortContext.sortField;
// set to the first page
table.value.options.pagination.currentPage = 1;
loadData();
};
const pageChanged = (pageNum) => {
table.value.options.pagination.currentPage = pageNum;
loadData();
};
const filter = () => {
filters.value.tag = filters.value.tag.trim();
loadData(true);
Expand Down Expand Up @@ -116,7 +101,49 @@ const loadData = (shouldHighlight = false) => {
<SkillsCardHeader :title="titleInternal"></SkillsCardHeader>
</template>
<template #content>
test
<skills-spinner :is-loading="isLoading" class="mb-5"/>
<div v-if="!isLoading">
<div class="flex gap-2">
<div class="flex">
<SkillsTextInput label="Filter" v-model="filters.tag" v-on:keydown.enter="filter" id="userTagTable-tagFilter" name="userTagTable-tagFilter"/>
</div>
<div class="mt-5">
<SkillsButton size="small" @click="filter" data-cy="userTagTable-filterBtn" title="search by tag">
<i class="fa fa-search"/><span class="sr-only">filter tags</span>
</SkillsButton>
<SkillsButton size="small" severity="danger" class="ml-2" @click="clearFilter" data-cy="userTagTable-clearBtn" title="clear filter">
<i class="fas fa-eraser"></i><span class="sr-only">clear filter</span>
</SkillsButton>
</div>
</div>
<SkillsDataTable :value="table.items"
:loading="table.options.busy"
show-gridlines
striped-rows
paginator
lazy
@page="pageChanged"
@sort="sortTable"
:rows="table.options.pagination.pageSize"
:rowsPerPageOptions="table.options.pagination.possiblePageSizes"
:total-records="table.options.pagination.totalRows"
tableStoredStateId="userTagsTable"
data-cy="userTagsTable">
<Column field="value" :header="tagChart.tagLabel ? tagChart.tagLabel : 'Tag'" sortable>
<template #body="slotProps">
<span :data-cy="`cell_tagValue-${slotProps.data.value}`">
<span v-if="slotProps.data.htmlValue" v-html="slotProps.data.htmlValue"></span><span v-else>{{ slotProps.data.value }}</span>
<router-link :to="{ name: 'UserTagMetrics', params: { projectId: projectId, tagKey: tagKey, tagFilter: slotProps.data.value } }">
<SkillsButton size="small" :aria-label="`View metrics for ${slotProps.data.value}`" data-cy="userTagTable_viewMetricsBtn">
<i class="fa fa-chart-bar"/><span class="sr-only">view user tag metrics</span>
</SkillsButton>
</router-link>
</span>
</template>
</Column>
<Column field="count" header="# Users" sortable></Column>
</SkillsDataTable>
</div>
</template>
</Card>
</template>
Expand Down
35 changes: 2 additions & 33 deletions dashboard-prime/src/components/metrics/projectAchievements/AchievementsNavigator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ const pageChanged = (pagingInfo) => {
};
const sortTable = (sortContext) => {
console.log('Changing sort');
sortBy.value = sortContext.sortField;
sortOrder.value = sortContext.sortOrder;
Expand All @@ -63,26 +62,6 @@ const sortTable = (sortContext) => {
reloadTable();
};
// const customValidation = () => {
// const self = this;
// extend('dateOrder', {
// message: 'From Date must come before To Date',
// validate() {
// let valid = true;
// if (self.fromDayFilter && self.toDayFilter) {
// valid = dayjs(self.fromDayFilter).isBefore(dayjs(self.toDayFilter));
// if (valid) {
// // manually clear errors in case the orig error occurred when setting startDate,
// // but was fixed by updating endDate (or vise-versa)
// resetProvider(self.$refs.fromDateValidationProvider);
// resetProvider(self.$refs.toDateValidationProvider);
// }
// }
// return valid;
// },
// });
// };
const reset = () => {
usernameFilter.value = '';
currentPage.value = 1;
Expand Down Expand Up @@ -149,7 +128,7 @@ const reloadTable = () => {
</div>
<div class="flex flex-1 flex-column gap-2 border-right-1 pl-2 pr-2">
<SkillsCalendarInput v-model="fromDayFilter" id="from-date-filter" data-cy="achievementsNavigator-fromDateInput"
label="From Date:" name="fromDayFilter" input-class="w-full" />
label="From Date:" name="fromDayFilter" input-class="w-full" :max-date="toDayFilter" />

<SkillsDropDown
label="Minimum Level (Subject & Skill Only)"
Expand All @@ -161,30 +140,20 @@ const reloadTable = () => {
optionValue="value"
v-model="levels.selected"
:options="levels.available" />

<!-- <ValidationProvider rules="dateOrder" v-slot="{errors}" name="From Date"-->
<!-- ref="fromDateValidationProvider">-->
<!-- </ValidationProvider>-->
</div>
<div class="flex flex-1 flex-column gap-2 pl-2">
<SkillsCalendarInput v-model="toDayFilter" id="to-date-filter" data-cy="achievementsNavigator-toDateInput"
label="To Date:" name="toDayFilter" input-class="w-full" />
label="To Date:" name="toDayFilter" input-class="w-full" :min-date="fromDayFilter" />

<label for="name-filter">Name (Subject, Skill and Badge Only):</label>
<InputText class="w-full"
v-model="nameFilter"
id="name-filter"
data-cy="achievementsNavigator-nameInput"
@keydown.enter="reloadTable" />


<!-- <ValidationProvider rules="dateOrder" v-slot="{errors}" name="To Date"-->
<!-- ref="toDateValidationProvider">-->
<!-- </ValidationProvider>-->
</div>
</div>
<div class="flex pl-3 mb-3 mt-3">
<!-- :disabled="invalid" -->
<SkillsButton size="small" @click="reloadTable" data-cy="achievementsNavigator-filterBtn" icon="fa fa-filter" label="Filter" />
<SkillsButton size="small" @click="reset" class="ml-1" data-cy="achievementsNavigator-resetBtn" icon="fa fa-times" label="Reset" />
</div>
Expand Down

0 comments on commit 17a09cb

Please sign in to comment.