fix lint errors

Signed-off-by: Efren Lim <elim@linuxfoundation.org>

frontend/src/modules/contributor/components/details/overview/contributor-details-projects.vue

@@ -7,19 +7,24 @@
       <lf-table class="!overflow-visible">
         <thead>
           <tr>
-            <lf-table-head class="pl-5"> Project </lf-table-head>
+            <lf-table-head class="pl-5">
+              Project
+            </lf-table-head>
             <lf-table-head>
               Affiliation
               <el-popover placement="top" width="20rem">
                 <template #reference>
                   <lf-icon-old name="question-line" :size="14" class="text-secondary-200 font-normal" />
                 </template>
                 <div class="p-1">
-                  <p class="text-small font-semibold mb-2 text-black">Affiliation</p>
+                  <p class="text-small font-semibold mb-2 text-black">
+                    Affiliation
+                  </p>
                   <p class="text-small text-gray-500 break-normal text-left">
-                    Organization(s) that an individual represents while contributing to a project. This association
-                    indicates that the person's activities were made in the context of their role within the
-                    organization, rather than as an independent contributor.
+                    Organization(s) that an individual represents while contributing to a project.
+                    This association indicates that the person's activities were made in the context
+                    of their role within the organization, rather than as an independent
+                    contributor.
                   </p>
                 </div>
               </el-popover>
@@ -31,15 +36,20 @@
                   <lf-icon-old name="question-line" :size="14" class="text-secondary-200 font-normal" />
                 </template>
                 <div class="p-1">
-                  <p class="text-small font-semibold mb-2 text-black">Maintainer</p>
+                  <p class="text-small font-semibold mb-2 text-black">
+                    Maintainer
+                  </p>
                   <p class="text-small text-gray-500 break-normal mb-5 text-left">
-                    Individual responsible for overseeing and managing code repositories by reviewing and merging pull
-                    requests, addressing issues, ensuring code quality, and guiding contributors.
+                    Individual responsible for overseeing and managing code repositories by
+                    reviewing and merging pull requests, addressing issues, ensuring code quality,
+                    and guiding contributors.
+                  </p>
+                  <p class="text-small font-semibold mb-2 text-black">
+                    Contributor
                   </p>
-                  <p class="text-small font-semibold mb-2 text-black">Contributor</p>
                   <p class="text-small text-gray-500 break-normal text-left">
-                    Someone who has contributed to a project by making changes or additions to its code. Contributions
-                    require that code was successfully merged into a repository.
+                    Someone who has contributed to a project by making changes or additions to its
+                    code. Contributions require that code was successfully merged into a repository.
                   </p>
                 </div>
               </el-popover>
@@ -75,7 +85,9 @@
               <lf-contributor-details-projects-maintainer :maintainer-roles="getMaintainerRoles(project)" />
             </lf-table-cell>
             <lf-table-cell>
-              <p class="text-small text-gray-500 whitespace-nowrap">{{ project.activityCount }}</p>
+              <p class="text-small text-gray-500 whitespace-nowrap">
+                {{ project.activityCount }}
+              </p>
             </lf-table-cell>
             <lf-table-cell>
               <lf-dropdown placement="bottom-end" width="160px">
@@ -133,15 +145,17 @@ import LfDropdown from '@/ui-kit/dropdown/Dropdown.vue';
 import LfTableCell from '@/ui-kit/table/TableCell.vue';
 import LfTableHead from '@/ui-kit/table/TableHead.vue';
 import LfDropdownItem from '@/ui-kit/dropdown/DropdownItem.vue';
-import LfContributorDetailsProjectsAffiliation from '@/modules/contributor/components/details/overview/project/contributor-details-projects-affiliation.vue';
-import LfContributorDetailsProjectsMaintainer from '@/modules/contributor/components/details/overview/project/contributor-details-projects-maintainer.vue';
+import LfContributorDetailsProjectsAffiliation
+  from '@/modules/contributor/components/details/overview/project/contributor-details-projects-affiliation.vue';
+import LfContributorDetailsProjectsMaintainer
+  from '@/modules/contributor/components/details/overview/project/contributor-details-projects-maintainer.vue';
 import usePermissions from '@/shared/modules/permissions/helpers/usePermissions';
 import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import { ReportDataType } from '@/shared/modules/report-issue/constants/report-data-type.enum';
 import { useSharedStore } from '@/shared/pinia/shared.store';
 
 const props = defineProps<{
-  contributor: Contributor;
+  contributor: Contributor,
 }>();
 
 const router = useRouter();
@@ -153,31 +167,27 @@ const { setReportDataModal } = useSharedStore();
 const showMore = ref<boolean>(false);
 const isAffilationEditOpen = ref<boolean>(false);
 
-const getAffiliations = (projectId: string) =>
-  (props.contributor.affiliations || [])
-    .filter((affiliation) => affiliation.segmentId === projectId)
-    .reduce((obj: Record<string, ContributorAffiliation[]>, aff: ContributorAffiliation) => {
-      if (!obj[aff.organizationId]) {
-        return {
-          ...obj,
-          [aff.organizationId]: [aff],
-        };
-      }
+const getAffiliations = (projectId: string) => (props.contributor.affiliations || [])
+  .filter((affiliation) => affiliation.segmentId === projectId)
+  .reduce((obj: Record<string, ContributorAffiliation[]>, aff: ContributorAffiliation) => {
+    if (!obj[aff.organizationId]) {
       return {
         ...obj,
-        [aff.organizationId]: [...obj[aff.organizationId], aff],
+        [aff.organizationId]: [aff],
       };
-    }, {});
+    }
+    return {
+      ...obj,
+      [aff.organizationId]: [...obj[aff.organizationId], aff],
+    };
+  }, {});
 
-const projects = computed(() =>
-  props.contributor.segments.map((p) => ({
-    ...p,
-    affiliations: getAffiliations(p.id),
-  }))
-);
+const projects = computed(() => props.contributor.segments.map((p) => ({
+  ...p,
+  affiliations: getAffiliations(p.id),
+})));
 
-const getMaintainerRoles = (project: any) =>
-  props.contributor.maintainerRoles.filter((role) => role.segmentId === project.id);
+const getMaintainerRoles = (project: any) => props.contributor.maintainerRoles.filter((role) => role.segmentId === project.id);
 
 const viewActivity = (projectId: string) => {
   router.replace({

frontend/src/modules/organization/components/details/organization-details-contributors.vue

@@ -117,7 +117,9 @@
       <div class="flex justify-center pb-8">
         <lf-icon-old name="group-2-line" :size="80" class="text-gray-200" />
       </div>
-      <h5 class="text-center text-h5">No people found</h5>
+      <h5 class="text-center text-h5">
+        No people found
+      </h5>
       <p class="text-gray-600 text-small text-center mt-4">
         We couldn't find any results that match your search criteria, please try a different query
       </p>
@@ -126,7 +128,9 @@
       v-if="pagination.total > pagination.page * pagination.perPage"
       class="pt-10 pb-6 gap-4 flex justify-center items-center"
     >
-      <p class="text-small text-gray-400">{{ contributors.length }} of {{ totalContacts }} people</p>
+      <p class="text-small text-gray-400">
+        {{ contributors.length }} of {{ totalContacts }} people
+      </p>
       <lf-button type="primary-ghost" loading-text="Loading people..." :loading="loading" @click="loadMore">
         Load more
       </lf-button>
@@ -161,7 +165,7 @@ import LfContributorEngagementLevel from '@/modules/contributor/components/share
 import useContributorHelpers from '@/modules/contributor/helpers/contributor.helpers';
 
 const props = defineProps<{
-  organization: Organization;
+  organization: Organization,
 }>();
 
 const filterConfig = { ...memberFilters };
@@ -180,7 +184,9 @@ const loading = ref<boolean>(false);
 const savedBody = ref<any>({});
 const searchStr = ref<string>('');
 
-const { avatar, isNew, identities, isMasked } = useContributorHelpers();
+const {
+  avatar, isNew, identities, isMasked,
+} = useContributorHelpers();
 
 // TODO: need to revisit this. Understand why the filter.vue is parsing the segmentId for this component as a filter in that component
 const excludeFilters = ['segmentId'];
@@ -222,7 +228,7 @@ const doGetMembersCount = () => {
       filter: orgFilter,
       segments: selectedProjectGroup.value?.id ? [selectedProjectGroup.value?.id] : props.organization.segments,
     },
-    true
+    true,
   ).then(({ count }) => {
     totalContacts.value = count;
   });

frontend/src/modules/organization/components/details/overview/organization-details-community.vue

@@ -2,7 +2,9 @@
   <section>
     <lf-card class="!bg-gradient-to-b from-primary-25 to-white px-5 pt-5 pb-6">
       <div class="flex justify-between pb-6">
-        <h6 class="text-h6">Community snapshot</h6>
+        <h6 class="text-h6">
+          Community snapshot
+        </h6>
         <lf-organization-details-community-project-select
           v-if="!hasSegments"
           v-model:segment="selectedSegment"
@@ -12,14 +14,18 @@
       </div>
       <div class="flex flex-wrap gap-y-4 -mx-4">
         <article class="px-4 h-full w-1/2 xl:w-1/3">
-          <p class="text-tiny text-secondary-300 mb-2">Community size</p>
+          <p class="text-tiny text-secondary-300 mb-2">
+            Community size
+          </p>
           <lf-loading v-if="loadingMemberCount" :count="1" height="1rem" width="4rem" class="rounded" />
           <p v-else class="text-small text-gray-600">
             {{ pluralize('person', memberCount || 0, true) }}
           </p>
         </article>
         <article class="px-4 h-full w-1/2 xl:w-1/3 border-l border-gray-200">
-          <p class="text-tiny text-secondary-300 mb-2"># of activities</p>
+          <p class="text-tiny text-secondary-300 mb-2">
+            # of activities
+          </p>
           <lf-loading
             v-if="props.organization.activitySycning?.state === MergeActionState.IN_PROGRESS"
             :count="1"
@@ -32,7 +38,9 @@
           </p>
         </article>
         <article class="px-4 h-full w-1/2 xl:w-1/3 xl:border-l border-gray-200">
-          <p class="text-tiny text-secondary-300 mb-2">Joined date</p>
+          <p class="text-tiny text-secondary-300 mb-2">
+            Joined date
+          </p>
           <p class="text-small text-gray-600">
             {{
               moment(props.organization.joinedAt).isAfter(moment('1970-01-01', 'year'))
@@ -52,16 +60,19 @@ import moment from 'moment';
 import { formatNumber } from '@/utils/number';
 import { Organization } from '@/modules/organization/types/Organization';
 import pluralize from 'pluralize';
-import { computed, onMounted, ref, watch } from 'vue';
+import {
+  computed, onMounted, ref,
+} from 'vue';
 import { MemberService } from '@/modules/member/member-service';
 import { MergeActionState } from '@/shared/modules/merge/types/MemberActions';
 import LfLoading from '@/ui-kit/loading/Loading.vue';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { storeToRefs } from 'pinia';
-import LfOrganizationDetailsCommunityProjectSelect from '@/modules/organization/components/details/overview/community/organization-details-community-project-select.vue';
+import LfOrganizationDetailsCommunityProjectSelect
+  from '@/modules/organization/components/details/overview/community/organization-details-community-project-select.vue';
 
 const props = defineProps<{
-  organization: Organization;
+  organization: Organization,
 }>();
 
 const { selectedProjectGroup } = storeToRefs(useLfSegmentsStore());
@@ -80,7 +91,7 @@ const doGetMembersCount = () => {
       filter: { organizations: { contains: [props.organization.id] } },
       segments: selectedSegment.value ? [selectedSegment.value] : props.organization.segments,
     },
-    true
+    true,
   )
     .then(({ count }) => {
       memberCount.value = count;

frontend/src/shared/modules/filters/components/Filter.vue

@@ -1,12 +1,7 @@
 <template>
   <div :class="Object.keys(props.config).length > 0 ? 'mb-4' : ''">
     <div class="flex justify-end pb-4 gap-4">
-      <lf-filter-search
-        v-if="props.searchConfig"
-        v-model="filters.search"
-        :placeholder="props.searchConfig.placeholder"
-        class="!h-9"
-      />
+      <lf-filter-search v-if="props.searchConfig" v-model="filters.search" :placeholder="props.searchConfig.placeholder" class="!h-9" />
       <lf-filter-dropdown
         v-if="Object.keys(props.config).length > 0"
         v-model="filterList"
@@ -36,7 +31,8 @@
           <div
             v-if="fi > 0"
             :click="!props.lockRelation ? 'cursor-pointer hover:bg-gray-100' : ''"
-            class="border text-xs border-gray-100 rounded-md shadow justify-center h-8 flex font-medium items-center py-1 px-2 bg-white transition mr-3 mb-4"
+            class="border text-xs border-gray-100 rounded-md shadow justify-center
+            h-8 flex font-medium items-center py-1 px-2 bg-white transition mr-3 mb-4"
             @click="switchOperator"
           >
             {{ filters.relation }}
@@ -57,7 +53,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, onMounted, ref, watch } from 'vue';
+import {
+  computed, defineProps, onMounted, ref, watch,
+} from 'vue';
 import { Filter, FilterConfig } from '@/shared/modules/filters/types/FilterConfig';
 import LfFilterDropdown from '@/shared/modules/filters/components/FilterDropdown.vue';
 import LfFilterItem from '@/shared/modules/filters/components/FilterItem.vue';
@@ -76,17 +74,17 @@ import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
 import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
 
 const props = defineProps<{
-  modelValue: Filter;
-  config: Record<string, FilterConfig>;
-  customConfig?: Record<string, FilterConfig>;
-  searchConfig?: SearchFilterConfig;
-  savedViewsConfig?: SavedViewsConfig;
-  hash?: string;
-  lockRelation?: boolean;
-  excludeFilters?: string[]; // Temporary fix, need a better understanding of the usage of the parsed filter
+  modelValue: Filter,
+  config: Record<string, FilterConfig>,
+  customConfig?: Record<string, FilterConfig>,
+  searchConfig?: SearchFilterConfig,
+  savedViewsConfig?: SavedViewsConfig,
+  hash?: string,
+  lockRelation?: boolean,
+  excludeFilters?: string[] // Temporary fix, need a better understanding of the usage of the parsed filter
 }>();
 
-const emit = defineEmits<{ (e: 'update:modelValue', value: Filter); (e: 'fetch', value: FilterQuery) }>();
+const emit = defineEmits<{(e: 'update:modelValue', value: Filter), (e: 'fetch', value: FilterQuery), }>();
 
 const { trackEvent } = useProductTracking();
 const router = useRouter();
@@ -122,7 +120,9 @@ const switchOperator = () => {
 };
 
 const alignFilterList = (value: Filter) => {
-  const { settings, search, relation, order, ...filterValues } = value;
+  const {
+    settings, search, relation, order, ...filterValues
+  } = value;
   filterList.value = Object.keys(filterValues);
 };
 
@@ -145,12 +145,7 @@ const fetch = (val: Filter) => {
   const fixedValue = fixSavedFilterValue(value, props.modelValue);
   savedFilter.value = { ...fixedValue };
 
-  const data = buildApiFilter(
-    fixedValue,
-    { ...props.config, ...props.customConfig },
-    props.searchConfig,
-    props.savedViewsConfig
-  );
+  const data = buildApiFilter(fixedValue, { ...props.config, ...props.customConfig }, props.searchConfig, props.savedViewsConfig);
   emit('fetch', data);
 };
 
@@ -189,7 +184,7 @@ watch(
 
     router.push({ query, hash: props.hash ? `#${props.hash}` : undefined });
   },
-  { deep: true }
+  { deep: true },
 );
 
 // Watch for query change
@@ -202,7 +197,7 @@ const alignQueryUrl = () => {
       ...props.config,
       ...props.customConfig,
     },
-    props.savedViewsConfig
+    props.savedViewsConfig,
   );
 
   if (!parsed || Object.keys(parsed).length === 0) {
@@ -231,18 +226,13 @@ defineExpose({
 });
 
 const copyToClipboard = async () => {
-  const parsedPayload = buildApiFilter(
-    filters.value,
-    { ...props.config, ...props.customConfig },
-    props.searchConfig,
-    props.savedViewsConfig
-  );
+  const parsedPayload = buildApiFilter(filters.value, { ...props.config, ...props.customConfig }, props.searchConfig, props.savedViewsConfig);
 
   await navigator.clipboard.writeText(
     JSON.stringify({
       filter: parsedPayload.filter,
       orderBy: parsedPayload.orderBy,
-    })
+    }),
   );
 
   Message.success('Filters payload successfully copied to your clipboard');