Refactor: improve dialog logic and entity handling

- Split openDialog into separate methods to improve code readability and maintainability through method extraction
- Add receiver name fallback in GiftedDialog when receiver exists but has no name
- Enhance shouldShowYouEntity to prevent selecting "You" as both giver and recipient
- Improve labeling of "(No name)" entities while retaining original entity object properties
- Apply special styling to "Unnamed" and "(No Name)" entities
This commit is contained in:
Jose Olarte III
2025-08-12 18:34:47 +08:00
parent 6d316c2b3f
commit ec1a725832
4 changed files with 182 additions and 157 deletions

View File

@@ -42,8 +42,8 @@ computed CSS properties * * @author Matthew Raymer */
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
{{ label }}
</p>
<h3 class="font-semibold truncate">
{{ entity?.name || "Unnamed" }}
<h3 :class="nameClasses">
{{ displayName }}
</h3>
</div>
@@ -138,6 +138,38 @@ export default class EntitySummaryButton extends Vue {
return this.editable ? "text-blue-500" : "text-slate-400";
}
/**
* Computed CSS classes for the entity name
*/
get nameClasses(): string {
const baseClasses = "font-semibold truncate";
// Add italic styling for special "Unnamed" or entities without set names
if (!this.entity?.name || this.entity?.did === "") {
return `${baseClasses} italic text-slate-500`;
}
return baseClasses;
}
/**
* Computed display name for the entity
*/
get displayName(): string {
// If the entity has a set name, use that name
if (this.entity?.name) {
return this.entity.name;
}
// If the entity is the special "Unnamed", use "Unnamed"
if (this.entity?.did === "") {
return "Unnamed";
}
// If the entity does not have a set name, but is not the special "Unnamed", use their DID
return this.entity?.did;
}
/**
* Handle click event - only call function prop if editable
* Allows parent to control edit behavior and validation

View File

@@ -226,14 +226,7 @@ export default class GiftedDialog extends Vue {
this.allMyDids = await retrieveAccountDids();
if (this.giver && !this.giver.name) {
this.giver.name = didInfo(
this.giver.did,
this.activeDid,
this.allMyDids,
this.allContacts,
);
}
if (
this.giverEntityType === "project" ||
@@ -457,7 +450,7 @@ export default class GiftedDialog extends Vue {
if (contact) {
this.giver = {
did: contact.did,
name: contact.name || contact.did,
name: contact.name,
};
} else {
// Only set to "Unnamed" if no giver is currently set
@@ -519,7 +512,7 @@ export default class GiftedDialog extends Vue {
if (contact) {
this.receiver = {
did: contact.did,
name: contact.name || contact.did,
name: contact.name,
};
} else {
// Only set to "Unnamed" if no receiver is currently set

View File

@@ -25,7 +25,7 @@ conflict detection. * * @author Matthew Raymer */
</div>
<h3 :class="nameClasses">
{{ person.name || person.did || "Unnamed" }}
{{ displayName }}
</h3>
</li>
</template>
@@ -98,9 +98,27 @@ export default class PersonCard extends Vue {
return `${baseClasses} text-slate-400`;
}
// Add italic styling for entities without set names
if (!this.person.name) {
return `${baseClasses} italic text-slate-500`;
}
return baseClasses;
}
/**
* Computed display name for the person
*/
get displayName(): string {
// If the entity has a set name, use that name
if (this.person.name) {
return this.person.name;
}
// If the entity does not have a set name
return this.person.did;
}
/**
* Handle card click - emit if selectable and not conflicted, show warning if conflicted
*/
@@ -114,7 +132,7 @@ export default class PersonCard extends Vue {
group: "alert",
type: "warning",
title: "Cannot Select",
text: `You cannot select "${this.person.name || this.person.did || "Unnamed"}" because they are already selected as the ${this.conflictContext}.`,
text: `You cannot select "${this.displayName}" because they are already selected as the ${this.conflictContext}.`,
},
3000,
);