forked from jsnbuchanan/crowd-funder-for-time-pwa
feat: remove Show All navigation card from entity grids
- Remove ShowAllCard component and all related functionality - Remove showAllRoute, showAllQueryParams, and hideShowAll props - Remove shouldShowAll computed property from EntityGrid - Clean up ShowAll-related code from EntitySelectionStep and GiftedDialog - Delete ShowAllCard.vue component file - Update component documentation to reflect removal This simplifies the entity selection interface by removing the navigation card that allowed users to view all entities in a separate view.
This commit is contained in:
@@ -63,14 +63,6 @@ projects, and special entities with selection. * * @author Matthew Raymer */
|
|||||||
@project-selected="handleProjectSelected"
|
@project-selected="handleProjectSelected"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- Show All navigation -->
|
|
||||||
<ShowAllCard
|
|
||||||
v-if="shouldShowAll"
|
|
||||||
:entity-type="entityType"
|
|
||||||
:route-name="showAllRoute"
|
|
||||||
:query-params="showAllQueryParams"
|
|
||||||
/>
|
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -79,7 +71,6 @@ import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
|
|||||||
import PersonCard from "./PersonCard.vue";
|
import PersonCard from "./PersonCard.vue";
|
||||||
import ProjectCard from "./ProjectCard.vue";
|
import ProjectCard from "./ProjectCard.vue";
|
||||||
import SpecialEntityCard from "./SpecialEntityCard.vue";
|
import SpecialEntityCard from "./SpecialEntityCard.vue";
|
||||||
import ShowAllCard from "./ShowAllCard.vue";
|
|
||||||
import { Contact } from "../db/tables/contacts";
|
import { Contact } from "../db/tables/contacts";
|
||||||
import { PlanData } from "../interfaces/records";
|
import { PlanData } from "../interfaces/records";
|
||||||
import { NotificationIface } from "../constants/app";
|
import { NotificationIface } from "../constants/app";
|
||||||
@@ -93,7 +84,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
|
|||||||
* - Special entity integration (You, Unnamed)
|
* - Special entity integration (You, Unnamed)
|
||||||
* - Conflict detection integration
|
* - Conflict detection integration
|
||||||
* - Empty state messaging
|
* - Empty state messaging
|
||||||
* - Show All navigation
|
|
||||||
* - Event delegation for entity selection
|
* - Event delegation for entity selection
|
||||||
* - Warning notifications for conflicted entities
|
* - Warning notifications for conflicted entities
|
||||||
* - Template streamlined with computed CSS properties
|
* - Template streamlined with computed CSS properties
|
||||||
@@ -104,7 +94,6 @@ import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
|
|||||||
PersonCard,
|
PersonCard,
|
||||||
ProjectCard,
|
ProjectCard,
|
||||||
SpecialEntityCard,
|
SpecialEntityCard,
|
||||||
ShowAllCard,
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class EntityGrid extends Vue {
|
export default class EntityGrid extends Vue {
|
||||||
@@ -144,14 +133,6 @@ export default class EntityGrid extends Vue {
|
|||||||
@Prop({ default: true })
|
@Prop({ default: true })
|
||||||
youSelectable!: boolean;
|
youSelectable!: boolean;
|
||||||
|
|
||||||
/** Route name for "Show All" navigation */
|
|
||||||
@Prop({ default: "" })
|
|
||||||
showAllRoute!: string;
|
|
||||||
|
|
||||||
/** Query parameters for "Show All" navigation */
|
|
||||||
@Prop({ default: () => ({}) })
|
|
||||||
showAllQueryParams!: Record<string, string>;
|
|
||||||
|
|
||||||
/** Notification function from parent component */
|
/** Notification function from parent component */
|
||||||
@Prop()
|
@Prop()
|
||||||
notify?: (notification: NotificationIface, timeout?: number) => void;
|
notify?: (notification: NotificationIface, timeout?: number) => void;
|
||||||
@@ -160,10 +141,6 @@ export default class EntityGrid extends Vue {
|
|||||||
@Prop({ default: "other party" })
|
@Prop({ default: "other party" })
|
||||||
conflictContext!: string;
|
conflictContext!: string;
|
||||||
|
|
||||||
/** Whether to hide the "Show All" navigation */
|
|
||||||
@Prop({ default: false })
|
|
||||||
hideShowAll!: boolean;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Function to determine which entities to display (allows parent control)
|
* Function to determine which entities to display (allows parent control)
|
||||||
*
|
*
|
||||||
@@ -233,15 +210,6 @@ export default class EntityGrid extends Vue {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Whether to show the "Show All" navigation
|
|
||||||
*/
|
|
||||||
get shouldShowAll(): boolean {
|
|
||||||
return (
|
|
||||||
!this.hideShowAll && this.entities.length > 0 && this.showAllRoute !== ""
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether the "You" entity is conflicted
|
* Whether the "You" entity is conflicted
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -3,10 +3,9 @@ from GiftedDialog.vue to handle the complete step 1 * entity selection interface
|
|||||||
with dynamic labeling and grid display. * * Features: * - Dynamic step labeling
|
with dynamic labeling and grid display. * * Features: * - Dynamic step labeling
|
||||||
based on context * - EntityGrid integration for unified entity display * -
|
based on context * - EntityGrid integration for unified entity display * -
|
||||||
Conflict detection and prevention * - Special entity handling (You, Unnamed) * -
|
Conflict detection and prevention * - Special entity handling (You, Unnamed) * -
|
||||||
Show All navigation with context preservation * - Cancel functionality * - Event
|
Cancel functionality * - Event delegation for entity selection * - Warning
|
||||||
delegation for entity selection * - Warning notifications for conflicted
|
notifications for conflicted entities * - Template streamlined with computed CSS
|
||||||
entities * - Template streamlined with computed CSS properties * * @author
|
properties * * @author Matthew Raymer */
|
||||||
Matthew Raymer */
|
|
||||||
<template>
|
<template>
|
||||||
<div id="sectionGiftedGiver">
|
<div id="sectionGiftedGiver">
|
||||||
<label class="block font-bold mb-4">
|
<label class="block font-bold mb-4">
|
||||||
@@ -23,11 +22,8 @@ Matthew Raymer */
|
|||||||
:conflict-checker="conflictChecker"
|
:conflict-checker="conflictChecker"
|
||||||
:show-you-entity="shouldShowYouEntity"
|
:show-you-entity="shouldShowYouEntity"
|
||||||
:you-selectable="youSelectable"
|
:you-selectable="youSelectable"
|
||||||
:show-all-route="showAllRoute"
|
|
||||||
:show-all-query-params="showAllQueryParams"
|
|
||||||
:notify="notify"
|
:notify="notify"
|
||||||
:conflict-context="conflictContext"
|
:conflict-context="conflictContext"
|
||||||
:hide-show-all="hideShowAll"
|
|
||||||
@entity-selected="handleEntitySelected"
|
@entity-selected="handleEntitySelected"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -68,7 +64,6 @@ interface EntitySelectionEvent {
|
|||||||
* - EntityGrid integration for unified entity display
|
* - EntityGrid integration for unified entity display
|
||||||
* - Conflict detection and prevention
|
* - Conflict detection and prevention
|
||||||
* - Special entity handling (You, Unnamed)
|
* - Special entity handling (You, Unnamed)
|
||||||
* - Show All navigation with context preservation
|
|
||||||
* - Cancel functionality
|
* - Cancel functionality
|
||||||
* - Event delegation for entity selection
|
* - Event delegation for entity selection
|
||||||
* - Warning notifications for conflicted entities
|
* - Warning notifications for conflicted entities
|
||||||
@@ -154,10 +149,6 @@ export default class EntitySelectionStep extends Vue {
|
|||||||
@Prop()
|
@Prop()
|
||||||
notify?: (notification: NotificationIface, timeout?: number) => void;
|
notify?: (notification: NotificationIface, timeout?: number) => void;
|
||||||
|
|
||||||
/** Whether to hide the "Show All" navigation */
|
|
||||||
@Prop({ default: false })
|
|
||||||
hideShowAll!: boolean;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* CSS classes for the cancel button
|
* CSS classes for the cancel button
|
||||||
*/
|
*/
|
||||||
@@ -222,59 +213,6 @@ export default class EntitySelectionStep extends Vue {
|
|||||||
return !this.conflictChecker(this.activeDid);
|
return !this.conflictChecker(this.activeDid);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Route name for "Show All" navigation
|
|
||||||
*/
|
|
||||||
get showAllRoute(): string {
|
|
||||||
if (this.shouldShowProjects) {
|
|
||||||
return "discover";
|
|
||||||
} else if (this.allContacts.length > 0) {
|
|
||||||
return "contact-gift";
|
|
||||||
}
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Query parameters for "Show All" navigation
|
|
||||||
*/
|
|
||||||
get showAllQueryParams(): Record<string, string> {
|
|
||||||
const baseParams = {
|
|
||||||
stepType: this.stepType,
|
|
||||||
giverEntityType: this.giverEntityType,
|
|
||||||
recipientEntityType: this.recipientEntityType,
|
|
||||||
// Form field values to preserve
|
|
||||||
description: this.description,
|
|
||||||
amountInput: this.amountInput,
|
|
||||||
unitCode: this.unitCode,
|
|
||||||
offerId: this.offerId,
|
|
||||||
fromProjectId: this.fromProjectId,
|
|
||||||
toProjectId: this.toProjectId,
|
|
||||||
showProjects: this.showProjects.toString(),
|
|
||||||
isFromProjectView: this.isFromProjectView.toString(),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (this.shouldShowProjects) {
|
|
||||||
// For project contexts, still pass entity type information
|
|
||||||
return baseParams;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...baseParams,
|
|
||||||
// Always pass both giver and recipient info for context preservation
|
|
||||||
giverProjectId: this.fromProjectId || "",
|
|
||||||
giverProjectName: this.giver?.name || "",
|
|
||||||
giverProjectImage: this.giver?.image || "",
|
|
||||||
giverProjectHandleId: this.giver?.handleId || "",
|
|
||||||
giverDid: this.giverEntityType === "person" ? this.giver?.did || "" : "",
|
|
||||||
recipientProjectId: this.toProjectId || "",
|
|
||||||
recipientProjectName: this.receiver?.name || "",
|
|
||||||
recipientProjectImage: this.receiver?.image || "",
|
|
||||||
recipientProjectHandleId: this.receiver?.handleId || "",
|
|
||||||
recipientDid:
|
|
||||||
this.recipientEntityType === "person" ? this.receiver?.did || "" : "",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handle entity selection from EntityGrid
|
* Handle entity selection from EntityGrid
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -29,7 +29,6 @@
|
|||||||
:unit-code="unitCode"
|
:unit-code="unitCode"
|
||||||
:offer-id="offerId"
|
:offer-id="offerId"
|
||||||
:notify="$notify"
|
:notify="$notify"
|
||||||
:hide-show-all="hideShowAll"
|
|
||||||
@entity-selected="handleEntitySelected"
|
@entity-selected="handleEntitySelected"
|
||||||
@cancel="cancel"
|
@cancel="cancel"
|
||||||
/>
|
/>
|
||||||
@@ -117,7 +116,6 @@ export default class GiftedDialog extends Vue {
|
|||||||
@Prop() fromProjectId = "";
|
@Prop() fromProjectId = "";
|
||||||
@Prop() toProjectId = "";
|
@Prop() toProjectId = "";
|
||||||
@Prop() isFromProjectView = false;
|
@Prop() isFromProjectView = false;
|
||||||
@Prop() hideShowAll = false;
|
|
||||||
@Prop({ default: "person" }) giverEntityType = "person" as
|
@Prop({ default: "person" }) giverEntityType = "person" as
|
||||||
| "person"
|
| "person"
|
||||||
| "project";
|
| "project";
|
||||||
|
|||||||
@@ -1,64 +0,0 @@
|
|||||||
/** * ShowAllCard.vue - Show All navigation card component * * Extracted from
|
|
||||||
GiftedDialog.vue to handle "Show All" navigation * for both people and projects
|
|
||||||
entity types. * * @author Matthew Raymer */
|
|
||||||
<template>
|
|
||||||
<li class="border-b border-slate-300 hover:bg-slate-50">
|
|
||||||
<router-link
|
|
||||||
:to="navigationRoute"
|
|
||||||
class="flex items-center gap-2 px-2 py-1.5 w-full cursor-pointer"
|
|
||||||
>
|
|
||||||
<font-awesome icon="circle-right" class="text-blue-500 text-[2rem]" />
|
|
||||||
<p
|
|
||||||
class="text-sm font-semibold text-ellipsis whitespace-nowrap overflow-hidden"
|
|
||||||
>
|
|
||||||
Show All
|
|
||||||
</p>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { Component, Prop, Vue } from "vue-facing-decorator";
|
|
||||||
import { RouteLocationRaw } from "vue-router";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ShowAllCard - Displays "Show All" navigation for entity grids
|
|
||||||
*
|
|
||||||
* Features:
|
|
||||||
* - Provides navigation to full entity listings
|
|
||||||
* - Supports different routes based on entity type
|
|
||||||
* - Maintains context through query parameters
|
|
||||||
* - Consistent visual styling with other cards
|
|
||||||
*/
|
|
||||||
@Component({ name: "ShowAllCard" })
|
|
||||||
export default class ShowAllCard extends Vue {
|
|
||||||
/** Type of entities being shown */
|
|
||||||
@Prop({ required: true })
|
|
||||||
entityType!: "people" | "projects";
|
|
||||||
|
|
||||||
/** Route name to navigate to */
|
|
||||||
@Prop({ required: true })
|
|
||||||
routeName!: string;
|
|
||||||
|
|
||||||
/** Query parameters to pass to the route */
|
|
||||||
@Prop({ default: () => ({}) })
|
|
||||||
queryParams!: Record<string, string>;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Computed navigation route with query parameters
|
|
||||||
*/
|
|
||||||
get navigationRoute(): RouteLocationRaw {
|
|
||||||
return {
|
|
||||||
name: this.routeName,
|
|
||||||
query: this.queryParams,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* Ensure router-link styling is consistent */
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user