n8n/packages/editor-ui/src/components/CredentialCard.vue

<template>
	<n8n-card :class="$style['card-link']" @click="onClick">
		<template #prepend>
			<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />
		</template>
		<template #header>
			<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style['card-heading']">
				{{ data.name }}
			</n8n-heading>
		</template>
		<n8n-text color="text-light" size="small">
			<span v-if="credentialType">{{ credentialType.displayName }} | </span>
			<span v-show="data"
				>{{ $locale.baseText('credentials.item.updated') }} <time-ago :date="data.updatedAt" /> |
			</span>
			<span v-show="data"
				>{{ $locale.baseText('credentials.item.created') }} {{ formattedCreatedAtDate }}
			</span>
		</n8n-text>
		<template #append>
			<div :class="$style['card-actions']">
				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
					<n8n-badge v-if="credentialPermissions.isOwner" class="mr-xs" theme="tertiary" bold>
						{{ $locale.baseText('credentials.item.owner') }}
					</n8n-badge>
				</enterprise-edition>
				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" />
			</div>
		</template>
	</n8n-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import type { ICredentialsResponse, IUser } from '@/Interface';
import type { ICredentialType } from 'n8n-workflow';
import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
import { useMessage } from '@/composables';
import CredentialIcon from '@/components/CredentialIcon.vue';
import type { IPermissions } from '@/permissions';
import { getCredentialPermissions } from '@/permissions';
import dateformat from 'dateformat';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui.store';
import { useUsersStore } from '@/stores/users.store';
import { useCredentialsStore } from '@/stores/credentials.store';
import TimeAgo from '@/components/TimeAgo.vue';

export const CREDENTIAL_LIST_ITEM_ACTIONS = {
	OPEN: 'open',
	DELETE: 'delete',
};

export default defineComponent({
	data() {
		return {
			EnterpriseEditionFeature,
		};
	},
	setup() {
		return {
			...useMessage(),
		};
	},
	components: {
		TimeAgo,
		CredentialIcon,
	},
	props: {
		data: {
			type: Object,
			required: true,
			default: (): ICredentialsResponse => ({
				id: '',
				createdAt: '',
				updatedAt: '',
				type: '',
				name: '',
				nodesAccess: [],
				sharedWith: [],
				ownedBy: {} as IUser,
			}),
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		...mapStores(useCredentialsStore, useUIStore, useUsersStore),
		currentUser(): IUser | null {
			return this.usersStore.currentUser;
		},
		credentialType(): ICredentialType {
			return this.credentialsStore.getCredentialTypeByName(this.data.type);
		},
		credentialPermissions(): IPermissions | null {
			return !this.currentUser ? null : getCredentialPermissions(this.currentUser, this.data);
		},
		actions(): Array<{ label: string; value: string }> {
			if (!this.credentialPermissions) {
				return [];
			}

			return [
				{
					label: this.$locale.baseText('credentials.item.open'),
					value: CREDENTIAL_LIST_ITEM_ACTIONS.OPEN,
				},
			].concat(
				this.credentialPermissions.delete
					? [
							{
								label: this.$locale.baseText('credentials.item.delete'),
								value: CREDENTIAL_LIST_ITEM_ACTIONS.DELETE,
							},
					  ]
					: [],
			);
		},
		formattedCreatedAtDate(): string {
			const currentYear = new Date().getFullYear();

			return dateformat(
				this.data.createdAt,
				`d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`,
			);
		},
	},
	methods: {
		async onClick() {
			this.uiStore.openExistingCredential(this.data.id);
		},
		async onAction(action: string) {
			if (action === CREDENTIAL_LIST_ITEM_ACTIONS.OPEN) {
				await this.onClick();
			} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
				const deleteConfirmed = await this.confirm(
					this.$locale.baseText(
						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
						{
							interpolate: { savedCredentialName: this.data.name },
						},
					),
					this.$locale.baseText(
						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
					),
					{
						confirmButtonText: this.$locale.baseText(
							'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
						),
					},
				);

				if (deleteConfirmed === MODAL_CONFIRM) {
					await this.credentialsStore.deleteCredential({ id: this.data.id });
				}
			}
		},
	},
});
</script>

<style lang="scss" module>
.card-link {
	transition: box-shadow 0.3s ease;
	cursor: pointer;

	&:hover {
		box-shadow: 0 2px 8px rgba(#441c17, 0.1);
	}
}

.card-heading {
	font-size: var(--font-size-s);
}

.card-actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
</style>