mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-15 17:14:05 -08:00
40e413d958
* ✨ Added pinia support. Migrated community nodes module. * ✨ Added ui pinia store, moved some data from root store to it, updated modals to work with pinia stores * ✨ Added ui pinia store and migrated a part of the root store * ✨ Migrated `settings` store to pinia * ✨ Removing vuex store refs from router * ✨ Migrated `users` module to pinia store * ⚡ Fixing errors after sync with master * ⚡ One more error after merge * ⚡ Created `workflows` pinia store. Moved large part of root store to it. Started updating references. * ✨ Finished migrating workflows store to pinia * ⚡ Renaming some getters and actions to make more sense * ✨ Finished migrating the root store to pinia * ✨ Migrated ndv store to pinia * ⚡ Renaming main panel dimensions getter so it doesn't clash with data prop name * ✔️ Fixing lint errors * ✨ Migrated `templates` store to pinia * ✨ Migrated the `nodeTypes`store * ⚡ Removed unused pieces of code and oold vuex modules * ✨ Adding vuex calls to pinia store, fi xing wrong references * 💄 Removing leftover $store refs * ⚡ Added legacy getters and mutations to store to support webhooks * ⚡ Added missing front-end hooks, updated vuex state subscriptions to pinia * ✔️ Fixing linting errors * ⚡ Removing vue composition api plugin * ⚡ Fixing main sidebar state when loading node view * 🐛 Fixing an error when activating workflows * 🐛 Fixing isses with workflow settings and executions auto-refresh * 🐛 Removing duplicate listeners which cause import error * 🐛 Fixing route authentication * ⚡ Updating freshly pulled $store refs * Adding deleted const * ⚡ Updating store references in ee features. Reseting NodeView credentials update flag when resetting workspace * ⚡ Adding return type to email submission modal * ⚡ Making NodeView only react to paste event when active * 🐛 Fixing signup view errors * 👌 Addressing PR review comments * 👌 Addressing new PR comments * 👌 Updating invite id logic in signup view
172 lines
4.4 KiB
Vue
172 lines
4.4 KiB
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 mixins from 'vue-typed-mixins';
|
|
import {ICredentialsResponse, IUser} from "@/Interface";
|
|
import {ICredentialType} from "n8n-workflow";
|
|
import {EnterpriseEditionFeature} from '@/constants';
|
|
import {showMessage} from "@/components/mixins/showMessage";
|
|
import CredentialIcon from '@/components/CredentialIcon.vue';
|
|
import {getCredentialPermissions, IPermissions} from "@/permissions";
|
|
import dateformat from "dateformat";
|
|
import { mapStores } from 'pinia';
|
|
import { useUIStore } from '@/stores/ui';
|
|
import { useUsersStore } from '@/stores/users';
|
|
|
|
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: {
|
|
...mapStores(
|
|
useUIStore,
|
|
useUsersStore,
|
|
),
|
|
currentUser (): IUser {
|
|
return this.usersStore.currentUser || {} as IUser;
|
|
},
|
|
credentialType(): ICredentialType {
|
|
return this.$store.getters['credentials/getCredentialTypeByName'](this.data.type);
|
|
},
|
|
credentialPermissions(): IPermissions {
|
|
return getCredentialPermissions(this.currentUser, this.data, this.$store);
|
|
},
|
|
actions(): Array<{ label: string; value: string; }> {
|
|
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) {
|
|
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) {
|
|
await this.$store.dispatch('credentials/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>
|
|
|
|
|