Fix verification and affiliated profiles

CrowdDotDev · Aug 5, 2024 · f5a4ce4 · f5a4ce4
1 parent cfa4fc4
commit f5a4ce4
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 26 deletions.
diff --git a/.../src/modules/organization/components/details/domains/organization-details-domain-item.vue b/.../src/modules/organization/components/details/domains/organization-details-domain-item.vue
@@ -25,7 +25,12 @@
           <lf-icon name="verified-badge-line" :size="16" class="text-primary-500" />
         </lf-tooltip>
       </div>
-      <lf-dropdown v-if="hovered && hasPermission(LfPermission.memberEdit)" placement="bottom-end" width="232px">
+      <lf-dropdown
+        v-if="props.domain.type !== OrganizationIdentityType.AFFILIATED_PROFILE
+          && hovered && hasPermission(LfPermission.memberEdit)"
+        placement="bottom-end"
+        width="232px"
+      >
         <template #trigger>
           <lf-button type="secondary-ghost" size="small" :icon-only="true">
             <lf-icon name="more-fill" />
@@ -60,7 +65,7 @@
           </lf-dropdown-item>
         </lf-tooltip>
         <lf-tooltip
-          v-else
+          v-else-if="showVerified"
           placement="top"
           :disabled="!isVerifyDisabled"
           class="!w-full"
@@ -102,7 +107,11 @@
 </template>
 
 <script setup lang="ts">
-import { Organization, OrganizationIdentity } from '@/modules/organization/types/Organization';
+import {
+  Organization,
+  OrganizationIdentity,
+  OrganizationIdentityType,
+} from '@/modules/organization/types/Organization';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import { withHttp } from '@/utils/string';
 import LfTooltip from '@/ui-kit/tooltip/Tooltip.vue';
@@ -135,6 +144,9 @@ const isVerifyDisabled = computed(
   () => !!props.domain.sourceId || ['integration', 'lfid'].includes(props.domain.platform),
 );
 
+const showVerified = computed(() => props.domain.type !== OrganizationIdentityType.PRIMARY_DOMAIN
+    || !props.organization.identities.some((i) => i.verified && i.type === OrganizationIdentityType.PRIMARY_DOMAIN));
+
 const verifyDomain = (verified: boolean) => {
   const identities = props.organization.identities.map((i: OrganizationIdentity) => {
     if (i.platform === props.domain?.platform

diff --git a/...les/organization/components/details/domains/organization-details-domains-add-dropdown.vue b/...les/organization/components/details/domains/organization-details-domains-add-dropdown.vue
@@ -23,7 +23,6 @@ const emit = defineEmits<{(e: 'add', value: Partial<OrganizationIdentity>): void
 const domainTypes: OrganizationIdentityType[] = [
   OrganizationIdentityType.PRIMARY_DOMAIN,
   OrganizationIdentityType.ALTERNATIVE_DOMAIN,
-  OrganizationIdentityType.AFFILIATED_PROFILE,
 ];
 
 </script>

diff --git a/frontend/src/modules/organization/components/details/organization-details-domains.vue b/frontend/src/modules/organization/components/details/organization-details-domains.vue
@@ -32,16 +32,9 @@
         @edit="edit = $event"
         @unmerge="unmerge"
       />
-      <lf-organization-details-domains-section
-        title="Affiliated domain"
-        :domains="affiliatedProfiles(props.organization)"
-        :organization="props.organization"
-        @edit="edit = $event"
-        @unmerge="unmerge"
-      />
     </div>
 
-    <div v-if="!domains(props.organization).length && !affiliatedProfiles(props.organization).length" class="pt-2 flex flex-col items-center w-full">
+    <div v-if="!domains(props.organization).length" class="pt-2 flex flex-col items-center w-full">
       <lf-icon name="link" :size="40" class="text-gray-300" />
       <p class="text-center pt-3 text-medium text-gray-400">
         No domains
@@ -87,7 +80,7 @@ const { hasPermission } = usePermissions();
 
 const {
   primaryDomains, alternativeDomains,
-  affiliatedProfiles, domains,
+  domains,
 } = useOrganizationHelpers();
 
 const add = ref<Partial<OrganizationIdentity> | null>(null);

diff --git a/.../src/modules/organization/components/details/overview/organization-details-attributes.vue b/.../src/modules/organization/components/details/overview/organization-details-attributes.vue
@@ -41,6 +41,22 @@
           />
         </div>
       </article>
+      <article
+        v-if="affiliated.length > 0"
+        class="border-b border-gray-100 flex py-4"
+      >
+        <div class="w-5/12">
+          <p class="text-small font-semibold mb-1">
+            Affiliated profiles
+          </p>
+        </div>
+        <div class="w-7/12 pr-1">
+          <lf-organization-details-domains-section
+            :organization="props.organization"
+            :domains="affiliated"
+          />
+        </div>
+      </article>
 
       <div v-if="Object.keys(visibleAttributes).length === 0" class="pt-2 flex flex-col items-center w-full">
         <lf-icon name="list-view" :size="80" class="text-gray-300" />
@@ -66,6 +82,9 @@ import LfOrganizationAttributeJson
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfOrganizationAttributeSource
   from '@/modules/organization/components/details/overview/attributes/organization-attribute-source.vue';
+import useOrganizationHelpers from '@/modules/organization/helpers/organization.helpers';
+import LfOrganizationDetailsDomainsSection
+  from '@/modules/organization/components/details/domains/organization-details-domains-section.vue';
 
 const props = defineProps<{
   organization: Organization,
@@ -78,12 +97,11 @@ const ignoreAttributes = [
   'phoneNumber',
 ];
 
-const camelCaseToLabel = (attribute: string) => {
-  console.log(attribute);
-  return attribute
-    ?.replace(/([A-Z])/g, ' $1')
-    ?.replace(/^./, (str) => str.toUpperCase()) || attribute;
-};
+const { affiliatedProfiles } = useOrganizationHelpers();
+
+const camelCaseToLabel = (attribute: string) => attribute
+  ?.replace(/([A-Z])/g, ' $1')
+  ?.replace(/^./, (str) => str.toUpperCase()) || attribute;
 
 const getAttributeType = (attribute: Record<string, any>) => {
   if (attribute.default?.constructor === Array || (!attribute.default && Object.values(attribute)?.[0].constructor === Array)) {
@@ -137,6 +155,7 @@ const getValue = (attribute: OrganizationEnrichmentConfig) => {
   return value;
 };
 
+const affiliated = computed(() => affiliatedProfiles(props.organization));
 </script>
 
 <script lang="ts">

diff --git a/frontend/src/modules/organization/components/edit/domain/organization-domain-add.vue b/frontend/src/modules/organization/components/edit/domain/organization-domain-add.vue
@@ -15,7 +15,8 @@
               <div class="flex items-center w-full">
                 <lf-input
                   v-model="domain.value"
-                  class="!rounded-r-none h-10 flex-grow"
+                  class="h-10 flex-grow"
+                  :class="showVerified ? '!rounded-r-none' : ''"
                   placeholder="Enter URL"
                   :invalid="$v.form[di].value.$invalid && $v.form[di].value.$dirty"
                   @blur="$v.form[di].value.$touch()"
@@ -24,7 +25,7 @@
                     <lf-icon name="link" class="text-black" :size="20" />
                   </template>
                 </lf-input>
-                <label class="border border-gray-200 h-10 py-2.5 px-3 border-l-0 cursor-pointer rounded-r-lg">
+                <label v-if="showVerified" class="border border-gray-200 h-10 py-2.5 px-3 border-l-0 cursor-pointer rounded-r-lg">
                   <lf-checkbox v-model="domain.verified" class="!flex-nowrap">
                     Verified
                   </lf-checkbox>
@@ -79,9 +80,7 @@
 
 <script setup lang="ts">
 import LfModal from '@/ui-kit/modal/Modal.vue';
-import {
-  computed, reactive, ref,
-} from 'vue';
+import { computed, reactive, ref } from 'vue';
 import LfButton from '@/ui-kit/button/Button.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 import LfInput from '@/ui-kit/input/Input.vue';
@@ -145,6 +144,9 @@ const isModalOpen = computed<boolean>({
   },
 });
 
+const showVerified = computed(() => props.modelValue?.type !== OrganizationIdentityType.PRIMARY_DOMAIN
+      || !props.organization.identities.some((i) => i.verified && i.type === OrganizationIdentityType.PRIMARY_DOMAIN));
+
 const addDomains = () => {
   sending.value = true;
   updateOrganization(props.organization.id, {

diff --git a/frontend/src/modules/organization/components/edit/domain/organization-domain-edit.vue b/frontend/src/modules/organization/components/edit/domain/organization-domain-edit.vue
@@ -10,7 +10,12 @@
     </div>
     <div class="pt-2 pb-10 px-6 w-full">
       <div class="flex items-center w-full">
-        <lf-input v-model="form.value" class="!rounded-r-none h-10 flex-grow" placeholder="Enter URL">
+        <lf-input
+          v-model="form.value"
+          class="!rounded-r-none h-10 flex-grow"
+          :class="showVerified ? '!rounded-r-none' : ''"
+          placeholder="Enter URL"
+        >
           <template #prefix>
             <div class="flex items-center flex-nowrap whitespace-nowrap">
               <div class="min-w-5">
@@ -19,7 +24,7 @@
             </div>
           </template>
         </lf-input>
-        <label class="border border-gray-200 h-10 py-2.5 px-3 border-l-0 cursor-pointer rounded-r-lg">
+        <label v-if="showVerified" class="border border-gray-200 h-10 py-2.5 px-3 border-l-0 cursor-pointer rounded-r-lg">
           <lf-checkbox v-model="form.verified">
             Verified
           </lf-checkbox>
@@ -105,6 +110,9 @@ const isModalOpen = computed<boolean>({
   },
 });
 
+const showVerified = computed(() => props.modelValue?.type !== OrganizationIdentityType.PRIMARY_DOMAIN
+    || props.modelValue?.verified);
+
 const updateDomain = () => {
   const identities = props.organization.identities.map((i: OrganizationIdentity) => {
     if (i.type === props.modelValue?.type