2022-09-21 01:20:29 -07:00
|
|
|
<template>
|
2022-12-14 01:04:10 -08:00
|
|
|
<n8n-card :class="$style['card-link']" @click="onClick">
|
|
|
|
<template #prepend>
|
|
|
|
<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />
|
|
|
|
</template>
|
|
|
|
<template #header>
|
2023-07-19 07:51:49 -07:00
|
|
|
<n8n-heading tag="h2" bold :class="$style['card-heading']">
|
2022-12-14 01:04:10 -08:00
|
|
|
{{ 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>
|
2023-07-28 00:51:07 -07:00
|
|
|
<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" @click.stop />
|
2022-12-14 01:04:10 -08:00
|
|
|
</div>
|
|
|
|
</template>
|
2022-09-21 01:20:29 -07:00
|
|
|
</n8n-card>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2023-05-15 09:41:13 -07:00
|
|
|
import { defineComponent } from 'vue';
|
2023-04-24 03:18:24 -07:00
|
|
|
import type { ICredentialsResponse, IUser } from '@/Interface';
|
|
|
|
import type { ICredentialType } from 'n8n-workflow';
|
2023-05-15 09:41:13 -07:00
|
|
|
import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
|
|
|
|
import { useMessage } from '@/composables';
|
2022-09-21 01:20:29 -07:00
|
|
|
import CredentialIcon from '@/components/CredentialIcon.vue';
|
2023-04-24 03:18:24 -07:00
|
|
|
import type { IPermissions } from '@/permissions';
|
|
|
|
import { getCredentialPermissions } from '@/permissions';
|
2022-12-14 01:04:10 -08:00
|
|
|
import dateformat from 'dateformat';
|
2022-11-04 06:04:31 -07:00
|
|
|
import { mapStores } from 'pinia';
|
2023-05-05 01:41:54 -07:00
|
|
|
import { useUIStore } from '@/stores/ui.store';
|
|
|
|
import { useUsersStore } from '@/stores/users.store';
|
|
|
|
import { useCredentialsStore } from '@/stores/credentials.store';
|
2023-06-16 00:30:57 -07:00
|
|
|
import TimeAgo from '@/components/TimeAgo.vue';
|
2022-09-21 01:20:29 -07:00
|
|
|
|
|
|
|
export const CREDENTIAL_LIST_ITEM_ACTIONS = {
|
|
|
|
OPEN: 'open',
|
|
|
|
DELETE: 'delete',
|
|
|
|
};
|
|
|
|
|
2023-05-15 09:41:13 -07:00
|
|
|
export default defineComponent({
|
2022-09-21 01:20:29 -07:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
EnterpriseEditionFeature,
|
|
|
|
};
|
|
|
|
},
|
2023-05-15 09:41:13 -07:00
|
|
|
setup() {
|
|
|
|
return {
|
|
|
|
...useMessage(),
|
|
|
|
};
|
|
|
|
},
|
2022-09-21 01:20:29 -07:00
|
|
|
components: {
|
2023-06-16 00:30:57 -07:00
|
|
|
TimeAgo,
|
2022-09-21 01:20:29 -07:00
|
|
|
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: {
|
2022-12-14 01:04:10 -08:00
|
|
|
...mapStores(useCredentialsStore, useUIStore, useUsersStore),
|
|
|
|
currentUser(): IUser | null {
|
2022-11-09 01:01:50 -08:00
|
|
|
return this.usersStore.currentUser;
|
2022-10-18 06:28:21 -07:00
|
|
|
},
|
2022-09-21 01:20:29 -07:00
|
|
|
credentialType(): ICredentialType {
|
2022-11-09 01:01:50 -08:00
|
|
|
return this.credentialsStore.getCredentialTypeByName(this.data.type);
|
2022-09-21 01:20:29 -07:00
|
|
|
},
|
2022-11-09 01:01:50 -08:00
|
|
|
credentialPermissions(): IPermissions | null {
|
|
|
|
return !this.currentUser ? null : getCredentialPermissions(this.currentUser, this.data);
|
2022-09-21 01:20:29 -07:00
|
|
|
},
|
2022-12-14 01:04:10 -08:00
|
|
|
actions(): Array<{ label: string; value: string }> {
|
2022-11-09 01:01:50 -08:00
|
|
|
if (!this.credentialPermissions) {
|
|
|
|
return [];
|
|
|
|
}
|
|
|
|
|
2022-09-21 01:20:29 -07:00
|
|
|
return [
|
|
|
|
{
|
|
|
|
label: this.$locale.baseText('credentials.item.open'),
|
|
|
|
value: CREDENTIAL_LIST_ITEM_ACTIONS.OPEN,
|
|
|
|
},
|
2022-12-14 01:04:10 -08:00
|
|
|
].concat(
|
|
|
|
this.credentialPermissions.delete
|
|
|
|
? [
|
|
|
|
{
|
|
|
|
label: this.$locale.baseText('credentials.item.delete'),
|
|
|
|
value: CREDENTIAL_LIST_ITEM_ACTIONS.DELETE,
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: [],
|
|
|
|
);
|
2022-09-21 01:20:29 -07:00
|
|
|
},
|
|
|
|
formattedCreatedAtDate(): string {
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
|
2022-12-14 01:04:10 -08:00
|
|
|
return dateformat(
|
|
|
|
this.data.createdAt,
|
|
|
|
`d mmmm${this.data.createdAt.startsWith(currentYear) ? '' : ', yyyy'}`,
|
|
|
|
);
|
2022-09-21 01:20:29 -07:00
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
async onClick() {
|
2022-11-04 06:04:31 -07:00
|
|
|
this.uiStore.openExistingCredential(this.data.id);
|
2022-09-21 01:20:29 -07:00
|
|
|
},
|
|
|
|
async onAction(action: string) {
|
|
|
|
if (action === CREDENTIAL_LIST_ITEM_ACTIONS.OPEN) {
|
2023-05-10 08:10:03 -07:00
|
|
|
await this.onClick();
|
2022-09-21 01:20:29 -07:00
|
|
|
} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
|
2023-05-15 09:41:13 -07:00
|
|
|
const deleteConfirmed = await this.confirm(
|
2022-12-14 01:04:10 -08:00
|
|
|
this.$locale.baseText(
|
|
|
|
'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
|
|
|
|
{
|
|
|
|
interpolate: { savedCredentialName: this.data.name },
|
|
|
|
},
|
|
|
|
),
|
|
|
|
this.$locale.baseText(
|
|
|
|
'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
|
|
|
|
),
|
2023-05-15 09:41:13 -07:00
|
|
|
{
|
|
|
|
confirmButtonText: this.$locale.baseText(
|
|
|
|
'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
|
|
|
|
),
|
|
|
|
},
|
2022-09-21 01:20:29 -07:00
|
|
|
);
|
|
|
|
|
2023-05-15 09:41:13 -07:00
|
|
|
if (deleteConfirmed === MODAL_CONFIRM) {
|
2023-05-10 08:10:03 -07:00
|
|
|
await this.credentialsStore.deleteCredential({ id: this.data.id });
|
2022-09-21 01:20:29 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" module>
|
|
|
|
.card-link {
|
|
|
|
transition: box-shadow 0.3s ease;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover {
|
2022-12-14 01:04:10 -08:00
|
|
|
box-shadow: 0 2px 8px rgba(#441c17, 0.1);
|
2022-09-21 01:20:29 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-heading {
|
|
|
|
font-size: var(--font-size-s);
|
|
|
|
}
|
|
|
|
|
|
|
|
.card-actions {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
</style>
|