mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 18:12:04 +00:00
Initial commit to release
This commit is contained in:
Jan Oberhauser
184
packages/editor-ui/src/components/CredentialsList.vue
Normal file
184
packages/editor-ui/src/components/CredentialsList.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div v-if="dialogVisible">
|
||||
<credentials-edit :dialogVisible="credentialEditDialogVisible" @closeDialog="closeCredentialEditDialog" @credentialsUpdated="reloadCredentialList" @credentialsCreated="reloadCredentialList" :setCredentialType="editCredentials && editCredentials.type" :editCredentials="editCredentials"></credentials-edit>
|
||||
|
||||
<el-dialog :visible="dialogVisible" append-to-body width="80%" title="Credentials" :before-close="closeDialog">
|
||||
<div class="text-very-light">
|
||||
Your saved credentials:
|
||||
</div>
|
||||
|
||||
<el-button title="Create New Credentials" class="new-credentials-button" @click="createCredential()">
|
||||
<font-awesome-icon icon="plus" />
|
||||
<div class="next-icon-text">
|
||||
Add New
|
||||
</div>
|
||||
</el-button>
|
||||
|
||||
<el-table :data="credentials" :default-sort = "{prop: 'name', order: 'ascending'}" stripe @row-click="editCredential" max-height="450" v-loading="isDataLoading">
|
||||
<el-table-column property="name" label="Name" class-name="clickable" sortable></el-table-column>
|
||||
<el-table-column property="type" label="Type" class-name="clickable" sortable>
|
||||
<template slot-scope="scope">
|
||||
{{credentialTypeDisplayNames[scope.row.type]}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column property="createdAt" label="Created" class-name="clickable" sortable></el-table-column>
|
||||
<el-table-column property="updatedAt" label="Updated" class-name="clickable" sortable></el-table-column>
|
||||
<el-table-column
|
||||
label="Operations"
|
||||
width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button title="Edit Credentials" @click.stop="editCredential(scope.row)" icon="el-icon-edit" circle></el-button>
|
||||
<el-button title="Delete Credentials" @click.stop="deleteCredential(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
|
||||
import { restApi } from '@/components/mixins/restApi';
|
||||
import { ICredentialsResponse } from '@/Interface';
|
||||
import { nodeHelpers } from '@/components/mixins/nodeHelpers';
|
||||
import { showMessage } from '@/components/mixins/showMessage';
|
||||
import CredentialsEdit from '@/components/CredentialsEdit.vue';
|
||||
import { genericHelpers } from '@/components/mixins/genericHelpers';
|
||||
|
||||
import mixins from 'vue-typed-mixins';
|
||||
|
||||
export default mixins(
|
||||
genericHelpers,
|
||||
nodeHelpers,
|
||||
restApi,
|
||||
showMessage,
|
||||
).extend({
|
||||
name: 'CredentialsList',
|
||||
props: [
|
||||
'dialogVisible',
|
||||
],
|
||||
components: {
|
||||
CredentialsEdit,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
credentialEditDialogVisible: false,
|
||||
credentialTypeDisplayNames: {} as { [key: string]: string; },
|
||||
credentials: [] as ICredentialsResponse[],
|
||||
displayAddCredentials: false,
|
||||
editCredentials: null as ICredentialsResponse | null,
|
||||
isDataLoading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
dialogVisible (newValue, oldValue) {
|
||||
if (newValue) {
|
||||
this.loadCredentials();
|
||||
this.loadCredentialTypes();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeCredentialEditDialog () {
|
||||
this.credentialEditDialogVisible = false;
|
||||
},
|
||||
closeDialog () {
|
||||
// Handle the close externally as the visible parameter is an external prop
|
||||
// and is so not allowed to be changed here.
|
||||
this.$emit('closeDialog');
|
||||
return false;
|
||||
},
|
||||
createCredential () {
|
||||
this.editCredentials = null;
|
||||
this.credentialEditDialogVisible = true;
|
||||
},
|
||||
editCredential (credential: ICredentialsResponse) {
|
||||
const editCredentials = {
|
||||
id: credential.id,
|
||||
name: credential.name,
|
||||
type: credential.type,
|
||||
} as ICredentialsResponse;
|
||||
|
||||
this.editCredentials = editCredentials;
|
||||
this.credentialEditDialogVisible = true;
|
||||
},
|
||||
reloadCredentialList () {
|
||||
this.loadCredentials();
|
||||
},
|
||||
loadCredentialTypes () {
|
||||
if (Object.keys(this.credentialTypeDisplayNames).length !== 0) {
|
||||
// Data is already loaded
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.$store.getters.allCredentialTypes === null) {
|
||||
// Data is not ready yet to be loaded
|
||||
return;
|
||||
}
|
||||
|
||||
for (const credentialType of this.$store.getters.allCredentialTypes) {
|
||||
this.credentialTypeDisplayNames[credentialType.name] = credentialType.displayName;
|
||||
}
|
||||
},
|
||||
loadCredentials () {
|
||||
this.isDataLoading = true;
|
||||
try {
|
||||
this.credentials = JSON.parse(JSON.stringify(this.$store.getters.allCredentials));
|
||||
} catch (error) {
|
||||
this.$showError(error, 'Proble loading credentials', 'There was a problem loading the credentials:');
|
||||
this.isDataLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.credentials.forEach((credentialData: ICredentialsResponse) => {
|
||||
credentialData.createdAt = this.convertToDisplayDate(credentialData.createdAt as number);
|
||||
credentialData.updatedAt = this.convertToDisplayDate(credentialData.updatedAt as number);
|
||||
});
|
||||
|
||||
this.isDataLoading = false;
|
||||
},
|
||||
|
||||
async deleteCredential (credential: ICredentialsResponse) {
|
||||
const deleteConfirmed = await this.confirmMessage(`Are you sure that you want to delete the credentials "${credential.name}"?`, 'Delete Credentials?', 'warning', 'Yes, delete!');
|
||||
|
||||
if (deleteConfirmed === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
let result;
|
||||
try {
|
||||
result = await this.restApi().deleteCredentials(credential.id!);
|
||||
} catch (error) {
|
||||
this.$showError(error, 'Problem deleting credentials', 'There was a problem deleting the credentials:');
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove also from local store
|
||||
this.$store.commit('removeCredentials', credential);
|
||||
|
||||
// Now that the credentials got removed check if any nodes used them
|
||||
this.updateNodesCredentialsIssues();
|
||||
|
||||
this.$showMessage({
|
||||
title: 'Credentials deleted',
|
||||
message: `The credential "${credential.name}" got deleted!`,
|
||||
type: 'success',
|
||||
});
|
||||
|
||||
// Refresh list
|
||||
this.loadCredentials();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.new-credentials-button {
|
||||
float: right;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user