You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.7 KiB
66 lines
1.7 KiB
/** * 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="cursor-pointer">
|
|
<router-link :to="navigationRoute" class="block text-center">
|
|
<font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
|
|
<h3
|
|
class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
|
|
>
|
|
Show All
|
|
</h3>
|
|
</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
|
|
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;
|
|
}
|
|
|
|
a:hover .fa-circle-right {
|
|
transform: scale(1.1);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
</style>
|
|
|