14975-fix style and validation (#457)

* 14975-fix style and validation

* 14975-update package version

* 14975-fix styles and validation after code review

* 14975-fix validation

* 14975-fix validations

package.json

@@ -1,6 +1,6 @@
 {
   "name": "business-edit-ui",
-  "version": "3.10.6",
+  "version": "3.10.7",
   "private": true,
   "appName": "Edit UI",
   "sbcName": "SBC Common Components",

src/components/common/PeopleAndRoles/ListPeopleAndRoles.vue

@@ -617,10 +617,9 @@ export default class ListPeopleAndRoles extends Mixins(CommonMixin, OrgPersonMix
   .actions {
     position: absolute;
     right: 0;
-    margin-top: -0.5rem;
+    margin-top: -0.25rem;
 
     @extend .actions-width;
-    margin-top: -8px;
 
     .v-btn + .v-btn {
       margin-left: 0.5rem;

src/components/common/PeopleAndRoles/PeopleAndRoles.vue

@@ -11,15 +11,15 @@
         </section>
         <ul>
           <li>
-            <v-icon v-if="hasApplicant" color="green darken-2" class="dir-valid">mdi-check</v-icon>
-            <v-icon v-else color="red">mdi-close</v-icon>
-            <!-- <v-icon>mdi-circle-small</v-icon> -->
+            <v-icon v-if="isApplicantPerson && hasApplicant" color="green darken-2" class="dir-valid">mdi-check</v-icon>
+            <v-icon v-else-if="!isApplicantOrg || !hasApplicant"  color="red">mdi-close</v-icon>
+            <v-icon v-else>mdi-circle-small</v-icon>
             <span>An individual</span>
           </li>
           <li>
-            <v-icon v-if="hasApplicant" color="green darken-2" class="dir-valid">mdi-check</v-icon>
-            <v-icon v-else color="red">mdi-close</v-icon>
-            <!-- <v-icon>mdi-circle-small</v-icon> -->
+            <v-icon v-if="isApplicantOrg && hasApplicant" color="green darken-2" class="dir-valid">mdi-check</v-icon>
+            <v-icon v-else-if="!isApplicantPerson || !hasApplicant" color="red">mdi-close</v-icon>
+            <v-icon v-else>mdi-circle-small</v-icon>
             <span>A business or a corporation</span>
           </li>
         </ul>
@@ -296,6 +296,33 @@ export default class PeopleAndRoles extends Mixins(CommonMixin, DateMixin, OrgPe
     return this.hasRole(RoleTypes.APPLICANT, 1, CompareModes.EXACT)
   }
 
+  /** True when orgPerson applicant role. */
+  public isApplicant (orgPerson: OrgPersonIF): boolean {
+    return orgPerson?.roles.some(role => role.roleType === RoleTypes.APPLICANT)
+  }
+
+  get applicantPersons (): OrgPersonIF[] {
+    return this.getOrgPeople.filter(person =>
+      this.isApplicant(person) && this.isPartyTypePerson(person) && !this.wasRemoved(person)
+    )
+  }
+
+  get applicantOrgs (): OrgPersonIF[] {
+    return this.getOrgPeople.filter(person =>
+      this.isApplicant(person) && this.isPartyTypeOrg(person) && !this.wasRemoved(person)
+    )
+  }
+
+  /** True when applicant party type is org. */
+  get isApplicantOrg () : boolean {
+    return this.applicantOrgs.length > 0
+  }
+
+  /** True when applicant party type is person. */
+  get isApplicantPerson () : boolean {
+    return this.applicantPersons.length > 0
+  }
+
   /** True if we have all required parties. */
   get haveRequiredParties (): boolean {
     if (this.isAlterationFiling) {