From b566bd147264a9136a88cc60671d4c17b58e3a33 Mon Sep 17 00:00:00 2001 From: Joana Maia Date: Wed, 5 Jul 2023 14:52:55 +0100 Subject: [PATCH 1/9] Update member view page and list --- .../components/member-organizations.vue | 47 ++++++--- .../view/_aside/_aside-enriched.vue | 26 ----- .../view/_aside/_aside-organizations.vue | 95 +++++++++++++++++++ .../components/view/member-view-aside.vue | 6 +- 4 files changed, 132 insertions(+), 42 deletions(-) create mode 100644 frontend/src/modules/member/components/view/_aside/_aside-organizations.vue diff --git a/frontend/src/modules/member/components/member-organizations.vue b/frontend/src/modules/member/components/member-organizations.vue index affcda232f..100d1eaf03 100644 --- a/frontend/src/modules/member/components/member-organizations.vue +++ b/frontend/src/modules/member/components/member-organizations.vue @@ -1,26 +1,24 @@ diff --git a/frontend/src/modules/member/components/view/member-view-aside.vue b/frontend/src/modules/member/components/view/member-view-aside.vue index f6d84cfa4f..290f9b9aa0 100644 --- a/frontend/src/modules/member/components/view/member-view-aside.vue +++ b/frontend/src/modules/member/components/view/member-view-aside.vue @@ -8,6 +8,10 @@
+ diff --git a/frontend/src/modules/member/components/form/member-form-identities.vue b/frontend/src/modules/member/components/form/member-form-identities.vue index 2baadb3505..39c1b57b14 100644 --- a/frontend/src/modules/member/components/form/member-form-identities.vue +++ b/frontend/src/modules/member/components/form/member-form-identities.vue @@ -1,5 +1,5 @@ + + + + diff --git a/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue b/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue index 61289b5e6c..b6bc7930f8 100644 --- a/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue +++ b/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue @@ -41,10 +41,10 @@ class="group hover:cursor-pointer" >
-
- {{ organization.displayName }} +
+
+ {{ organization.displayName }} +
+
+ Software Developer + + • + {{ organization.startDate ? moment(organization.startDate).utc().format('MMM YYYY') : 'Unkown' }} + -> + + {{ organization.endDate ? moment(organization.endDate).utc().format('MMM YYYY') : 'Present' }} + + +
@@ -78,6 +91,7 @@ import { MemberPermissions } from '@/modules/member/member-permissions'; import { mapGetters } from '@/shared/vuex/vuex.helpers'; import { computed } from 'vue'; +import moment from 'moment'; defineProps({ member: { diff --git a/frontend/src/modules/member/pages/member-form-page.vue b/frontend/src/modules/member/pages/member-form-page.vue index dcf6e6f8ec..b4f6bd39ae 100644 --- a/frontend/src/modules/member/pages/member-form-page.vue +++ b/frontend/src/modules/member/pages/member-form-page.vue @@ -41,6 +41,12 @@ + + o.id, + (o) => ({ + id: o.id, + title: o.title, + startDate: o.startDate, + endDate: o.endDate, + }), + ).filter( + (o) => !!o.id, ), }, ...(Object.keys(formattedAttributes).length diff --git a/frontend/src/modules/member/types/Member.ts b/frontend/src/modules/member/types/Member.ts index 93ba3364cf..fc52bf48dd 100644 --- a/frontend/src/modules/member/types/Member.ts +++ b/frontend/src/modules/member/types/Member.ts @@ -1,3 +1,5 @@ +import { Organization } from '@/modules/organization/types/Organization'; + export interface MemberAttribute { default: string; custom: string; @@ -45,7 +47,7 @@ export interface Member { lastEnriched: string | null; noMergeIds: string[] | null; numberOfOpenSourceContributions: number | null; - organizations: any[]; + organizations: Organization[]; reach:MemberReach; score: number; tags: MemberTag[]; diff --git a/frontend/src/modules/organization/organization-field.js b/frontend/src/modules/organization/organization-field.js index be075a54ce..71b4edaff2 100644 --- a/frontend/src/modules/organization/organization-field.js +++ b/frontend/src/modules/organization/organization-field.js @@ -16,8 +16,8 @@ export class OrganizationField { } return { - id: record.id, - label: record.name, + ...record, + label: record.displayName, }; }, options, diff --git a/frontend/src/modules/organization/types/Organization.ts b/frontend/src/modules/organization/types/Organization.ts index 84f9174868..c168150d0a 100644 --- a/frontend/src/modules/organization/types/Organization.ts +++ b/frontend/src/modules/organization/types/Organization.ts @@ -43,4 +43,7 @@ export interface Organization{ updatedById: string; url: string; website: string; + title: string; + startDate: string; + endDate: string; } diff --git a/frontend/src/shared/form/autocomplete-one-input.vue b/frontend/src/shared/form/autocomplete-one-input.vue index 032a6d90e1..e01e53b6a7 100644 --- a/frontend/src/shared/form/autocomplete-one-input.vue +++ b/frontend/src/shared/form/autocomplete-one-input.vue @@ -5,7 +5,7 @@ :loading="loading" :remote-method="handleSearch" :model-value="modelValue" - :clearable="true" + :clearable="clearable" :default-first-option="true" :filterable="true" :placeholder="placeholder || ''" @@ -118,6 +118,10 @@ export default { type: Array, default: () => [], }, + clearable: { + type: Boolean, + default: true, + }, }, emits: ['update:modelValue'], data() { @@ -164,9 +168,9 @@ export default { typeof query === 'string' && query !== '' && this.createIfNotFound + && !value ) { - // If value is a string, convert it to a db object - const newItem = await this.createFn(value); + const newItem = await this.createFn(query); this.localOptions.push(newItem); this.$emit('update:modelValue', newItem); } else { @@ -187,7 +191,6 @@ export default { async fetchAllResults() { this.loading = true; - try { this.localOptions = await this.fetchFn( this.currentQuery, @@ -213,7 +216,6 @@ export default { value, AUTOCOMPLETE_SERVER_FETCH_SIZE, ); - this.loading = false; } catch (error) { console.error(error); From 5d10f978ce88ad939cb65ab5376cc044e5d33381 Mon Sep 17 00:00:00 2001 From: Joana Maia Date: Mon, 10 Jul 2023 12:11:28 +0100 Subject: [PATCH 3/9] Fix backend properties --- .../form/member-form-organizations.vue | 13 ++++++++----- .../member/components/member-organizations.vue | 10 +++++----- .../view/_aside/_aside-organizations.vue | 16 +++++++++++----- .../modules/member/pages/member-form-page.vue | 7 +++---- .../modules/organization/types/Organization.ts | 8 +++++--- 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/frontend/src/modules/member/components/form/member-form-organizations.vue b/frontend/src/modules/member/components/form/member-form-organizations.vue index 64a2131e0d..816b8631d9 100644 --- a/frontend/src/modules/member/components/form/member-form-organizations.vue +++ b/frontend/src/modules/member/components/form/member-form-organizations.vue @@ -72,7 +72,7 @@
@@ -163,16 +163,19 @@ const createOrganizationFn = (value: string) => OrganizationService.create({ .catch(() => null); const onDatePickerChange = (value: string[], index: number) => { - organizations.value[index].startDate = moment(value[0]).utc().toISOString(); - organizations.value[index].endDate = moment(value[1]).utc().toISOString(); + organizations.value[index].memberOrganizations.dateStart = moment(value[0]).utc().toISOString(); + organizations.value[index].memberOrganizations.dateEnd = moment(value[1]).utc().toISOString(); }; const addOrganization = () => { organizations.value.push({ id: '', name: '', - startDate: '', - endDate: '', + memberOrganizations: { + title: '', + dateStart: '', + dateEnd: '', + }, }); }; diff --git a/frontend/src/modules/member/components/member-organizations.vue b/frontend/src/modules/member/components/member-organizations.vue index 100d1eaf03..a40ac17004 100644 --- a/frontend/src/modules/member/components/member-organizations.vue +++ b/frontend/src/modules/member/components/member-organizations.vue @@ -119,11 +119,11 @@ const activeOrganization = computed(() => { } return props.member.organizations.reduce((mostRecent, organization) => { - const mostRecentEndDate = new Date(mostRecent.endDate); - const mostRecentStartDate = new Date(mostRecent.startDate); - const organizationEndDate = new Date(organization.endDate); - const organizationStartDate = new Date(organization.startDate); - const isEndDateNull = !organization.endDate; + const mostRecentEndDate = new Date(mostRecent.memberOrganizations?.dateEnd); + const mostRecentStartDate = new Date(mostRecent.memberOrganizations?.dateStart); + const organizationEndDate = new Date(organization.memberOrganizations?.dateEnd); + const organizationStartDate = new Date(organization.memberOrganizations?.dateStart); + const isEndDateNull = !organization.memberOrganizations?.dateEnd; if ((organizationEndDate > mostRecentEndDate && !isEndDateNull) || (organizationStartDate > mostRecentStartDate && isEndDateNull)) { diff --git a/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue b/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue index b6bc7930f8..afbfc7ddaf 100644 --- a/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue +++ b/frontend/src/modules/member/components/view/_aside/_aside-organizations.vue @@ -66,14 +66,20 @@ > {{ organization.displayName }}
-
- Software Developer - +
+ {{ organization.memberOrganizations.title }} + • - {{ organization.startDate ? moment(organization.startDate).utc().format('MMM YYYY') : 'Unkown' }} + + {{ organization.memberOrganizations.dateStart + ? moment(organization.memberOrganizations.dateStart).utc().format('MMM YYYY') + : 'Unkown' }} + -> - {{ organization.endDate ? moment(organization.endDate).utc().format('MMM YYYY') : 'Present' }} + {{ organization.memberOrganizations.dateEnd + ? moment(organization.memberOrganizations.dateEnd).utc().format('MMM YYYY') + : 'Present' }}
diff --git a/frontend/src/modules/member/pages/member-form-page.vue b/frontend/src/modules/member/pages/member-form-page.vue index b4f6bd39ae..1fbdcbf171 100644 --- a/frontend/src/modules/member/pages/member-form-page.vue +++ b/frontend/src/modules/member/pages/member-form-page.vue @@ -327,7 +327,6 @@ async function onSubmit() { formModel.value, ); - console.log(formModel.value.organizations); // Remove any existent empty data const data = { @@ -350,9 +349,9 @@ async function onSubmit() { organizations: formModel.value.organizations.map( (o) => ({ id: o.id, - title: o.title, - startDate: o.startDate, - endDate: o.endDate, + title: o.memberOrganizations?.title, + startDate: o.memberOrganizations?.dateStart, + endDate: o.memberOrganizations?.dateEnd, }), ).filter( (o) => !!o.id, diff --git a/frontend/src/modules/organization/types/Organization.ts b/frontend/src/modules/organization/types/Organization.ts index c168150d0a..6aaaf52e83 100644 --- a/frontend/src/modules/organization/types/Organization.ts +++ b/frontend/src/modules/organization/types/Organization.ts @@ -43,7 +43,9 @@ export interface Organization{ updatedById: string; url: string; website: string; - title: string; - startDate: string; - endDate: string; + memberOrganizations: { + title: string; + dateStart: string; + dateEnd: string; + } } From ac96868640176114709db100c2c4636bb8f69259 Mon Sep 17 00:00:00 2001 From: Joana Maia Date: Mon, 10 Jul 2023 12:16:36 +0100 Subject: [PATCH 4/9] Fix dates default value --- .../form/member-form-organizations.vue | 22 +++++++++++++++---- .../modules/member/pages/member-form-page.vue | 13 ++++++++--- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/frontend/src/modules/member/components/form/member-form-organizations.vue b/frontend/src/modules/member/components/form/member-form-organizations.vue index 816b8631d9..2edca91d16 100644 --- a/frontend/src/modules/member/components/form/member-form-organizations.vue +++ b/frontend/src/modules/member/components/form/member-form-organizations.vue @@ -42,7 +42,7 @@ :in-memory-filter="false" :clearable="false" > -