-
Notifications
You must be signed in to change notification settings - Fork 751
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ff46371
commit 2d06e22
Showing
23 changed files
with
758 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 47 additions & 1 deletion
48
frontend/src/modules/data-quality/components/data-quality-member.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 21 additions & 1 deletion
22
frontend/src/modules/data-quality/components/data-quality-organization.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
frontend/src/modules/data-quality/components/member/data-quality-member-issues-item.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <template> | ||
| <article class="border-b border-gray-100 py-5"> | ||
| <div class="flex justify-between items-center"> | ||
| <div class="flex items-center gap-3"> | ||
| <lf-avatar | ||
| :src="avatar(props.member)" | ||
| :name="props.member.displayName" | ||
| :size="32" | ||
| /> | ||
| <p class="text-medium font-semibold"> | ||
| {{ props.member.displayName }} | ||
| </p> | ||
| <lf-badge size="small" :type="config.badgeType" class="!font-semibold"> | ||
| {{ config.badgeText(props.member) }} | ||
| </lf-badge> | ||
| </div> | ||
| <router-link | ||
| :to="{ | ||
| name: 'memberView', | ||
| params: { id: props.member.id }, | ||
| query: { projectGroup: selectedProjectGroup?.id }, | ||
| }" | ||
| target="_blank" | ||
| > | ||
| <lf-button type="secondary" size="small" @click="isModalOpen = true; detailsOffset = si"> | ||
| <lf-icon name="external-link-line" />Review profile | ||
| </lf-button> | ||
| </router-link> | ||
| </div> | ||
| <p class="text-small mt-2 text-gray-500" v-html="$sanitize(config.description(props.member))" /> | ||
| </article> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| import LfAvatar from '@/ui-kit/avatar/Avatar.vue'; | ||
| import { Contributor } from '@/modules/contributor/types/Contributor'; | ||
| import useContributorHelpers from '@/modules/contributor/helpers/contributor.helpers'; | ||
| import LfBadge from '@/ui-kit/badge/Badge.vue'; | ||
| import { computed } from 'vue'; | ||
| import { DataIssueTypeConfig, dataIssueTypes } from '@/modules/data-quality/config/data-issue-types'; | ||
| import LfIcon from '@/ui-kit/icon/Icon.vue'; | ||
| import LfButton from '@/ui-kit/button/Button.vue'; | ||
| import { storeToRefs } from 'pinia'; | ||
| import { useLfSegmentsStore } from '@/modules/lf/segments/store'; | ||
| const props = defineProps<{ | ||
| member: Contributor, | ||
| type: SelectedIssueType, | ||
| }>(); | ||
| const { avatar } = useContributorHelpers(); | ||
| const { selectedProjectGroup } = storeToRefs(useLfSegmentsStore()); | ||
| const config = computed<DataIssueTypeConfig>(() => dataIssueTypes[props.type]); | ||
| </script> | ||
| <script lang="ts"> | ||
| export default { | ||
| name: 'LfDataQualityMemberIssuesItem', | ||
| }; | ||
| </script> |
110 changes: 110 additions & 0 deletions
110
frontend/src/modules/data-quality/components/member/data-quality-member-issues.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <template> | ||
| <div> | ||
| <div v-if="props.types.length > 1" class="pt-4 gap-2 flex flex-col pb-4"> | ||
| <lf-radio | ||
| v-for="type of props.types" | ||
| :key="type" | ||
| v-model="selectedType" | ||
| :value="type" | ||
| name="issueType" | ||
| > | ||
| {{ dataIssueTypes[type].label }} | ||
| </lf-radio> | ||
| </div> | ||
| <div v-if="loading" class="flex justify-center py-20"> | ||
| <lf-spinner /> | ||
| </div> | ||
| <div v-else-if="members.length > 0"> | ||
| <lf-data-quality-member-issues-item | ||
| v-for="(member) of members" | ||
| :key="member.id" | ||
| :member="member" | ||
| :type="selectedType" | ||
| /> | ||
| <div v-if="members.length < total" class="pt-4"> | ||
| <lf-button type="primary-ghost" size="small" :loading="loading" @click="loadMore()"> | ||
| <i class="ri-arrow-down-line" />Load more | ||
| </lf-button> | ||
| </div> | ||
| </div> | ||
| <div v-else class="flex flex-col items-center pt-16"> | ||
| <div | ||
| class="ri-shuffle-line text-gray-200 text-10xl h-40 flex items-center mb-8" | ||
| /> | ||
| <h5 class="text-center text-lg font-semibold mb-4"> | ||
| No member issues found | ||
| </h5> | ||
| <p class="text-sm text-center text-gray-600 leading-5"> | ||
| We couldn't find any issues with members | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { onMounted, ref, watch } from 'vue'; | ||
| import LfSpinner from '@/ui-kit/spinner/Spinner.vue'; | ||
| import LfButton from '@/ui-kit/button/Button.vue'; | ||
| import { DataIssueType } from '@/modules/data-quality/types/DataIssueType'; | ||
| import LfRadio from '@/ui-kit/radio/Radio.vue'; | ||
| import { DataQualityApiService } from '@/modules/data-quality/services/data-quality.api.service'; | ||
| import LfDataQualityMemberIssuesItem | ||
| from '@/modules/data-quality/components/member/data-quality-member-issues-item.vue'; | ||
| import { dataIssueTypes } from '../../config/data-issue-types'; | ||
| const props = defineProps<{ | ||
| types: DataIssueType[] | ||
| }>(); | ||
| const loading = ref(true); | ||
| const limit = ref(20); | ||
| const offset = ref(0); | ||
| const total = ref(0); | ||
| const members = ref<any[]>([]); | ||
| const selectedType = ref<string>(props.types?.[0] || ''); | ||
| const loadDataIssues = () => { | ||
| loading.value = true; | ||
| DataQualityApiService.findMemberIssues({ | ||
| type: selectedType.value, | ||
| limit: limit.value, | ||
| offset: offset.value, | ||
| }, []) | ||
| .then((res) => { | ||
| if (offset.value > 0) { | ||
| members.value = [...members.value, ...res]; | ||
| } else { | ||
| members.value = res; | ||
| } | ||
| if (res.length < limit.value) { | ||
| total.value = members.value.length; | ||
| } else { | ||
| total.value = members.value.length + 1; | ||
| } | ||
| }) | ||
| .finally(() => { | ||
| loading.value = false; | ||
| }); | ||
| }; | ||
| const loadMore = () => { | ||
| offset.value = members.value.length; | ||
| loadDataIssues(); | ||
| }; | ||
| watch(selectedType, () => { | ||
| offset.value = 0; | ||
| loadDataIssues(); | ||
| }); | ||
| onMounted(() => { | ||
| loadDataIssues(); | ||
| }); | ||
| </script> | ||
|
|
||
| <script lang="ts"> | ||
| export default { | ||
| name: 'LfDataQualityMemberIssues', | ||
| }; | ||
| </script> |
Oops, something went wrong.