2022-09-21 01:20:29 -07:00
|
|
|
<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 mixins from 'vue-typed-mixins';
|
|
|
|
import {ICredentialsResponse, IUser} from "@/Interface";
|
|
|
|
import {ICredentialType} from "n8n-workflow";
|
|
|
|
import {EnterpriseEditionFeature} from '@/constants';
|
2022-11-23 04:41:53 -08:00
|
|
|
import {showMessage} from "@/mixins/showMessage";
|
2022-09-21 01:20:29 -07:00
|
|
|
import CredentialIcon from '@/components/CredentialIcon.vue';
|
|
|
|
import {getCredentialPermissions, IPermissions} from "@/permissions";
|
|
|
|
import dateformat from "dateformat";
|
2022-11-04 06:04:31 -07:00
|
|
|
import { mapStores } from 'pinia';
|
|
|
|
import { useUIStore } from '@/stores/ui';
|
|
|
|
import { useUsersStore } from '@/stores/users';
|
2022-11-09 01:01:50 -08:00
|
|
|
import { useCredentialsStore } from '@/stores/credentials';
|
2022-09-21 01:20:29 -07:00
|
|
|
|
|
|
|
export const CREDENTIAL_LIST_ITEM_ACTIONS = {
|
|
|
|
OPEN: 'open',
|
|
|
|
DELETE: 'delete',
|
|
|
|
};
|
|
|
|
|
|
|
|
export default mixins(
|
|
|
|
showMessage,
|
|
|
|
).extend({
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
EnterpriseEditionFeature,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
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-11-04 06:04:31 -07:00
|
|
|
...mapStores(
|
2022-11-09 01:01:50 -08:00
|
|
|
useCredentialsStore,
|
2022-11-04 06:04:31 -07:00
|
|
|
useUIStore,
|
|
|
|
useUsersStore,
|
|
|
|
),
|
2022-11-09 01:01:50 -08:00
|
|
|
currentUser (): IUser | null {
|
|
|
|
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
|
|
|
},
|
|
|
|
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,
|
|
|
|
},
|
|
|
|
].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() {
|
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) {
|
|
|
|
this.onClick();
|
|
|
|
} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
|
|
|
|
const deleteConfirmed = await this.confirmMessage(
|
|
|
|
this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', {
|
|
|
|
interpolate: { savedCredentialName: this.data.name },
|
|
|
|
}),
|
|
|
|
this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
|
|
|
|
null,
|
|
|
|
this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText'),
|
|
|
|
);
|
|
|
|
|
|
|
|
if (deleteConfirmed) {
|
2022-11-09 01:01:50 -08:00
|
|
|
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 {
|
|
|
|
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>
|
|
|
|
|
|
|
|
|