mirror of
https://github.com/seigler/dash-platform-console
synced 2025-07-26 01:06:10 +00:00
names
This commit is contained in:
Den
parent
93dfb8cbf6
commit
bffa2b6027
9 changed files with 198 additions and 80 deletions
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"name": "dash-platform-console",
|
||||
"description": "Dash Platform Console",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>Dash platform console</title>
|
||||
<title>Dash Platform Console</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-app-bar app>
|
||||
<v-toolbar-title>dashevo exprlorer</v-toolbar-title>
|
||||
<v-toolbar-title>Dash Platform Console</v-toolbar-title>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import Identities from '@/views/Identities.vue';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
|
|
@ -7,7 +8,7 @@ const routes = [
|
|||
{
|
||||
path: '/identities',
|
||||
name: 'identities',
|
||||
component: () => import(/* webpackChunkName: "identities" */ '../views/Identities.vue'),
|
||||
component: Identities,
|
||||
},
|
||||
{
|
||||
path: '/contracts',
|
||||
|
|
|
|||
|
|
@ -4,24 +4,67 @@ import createPersistedState from 'vuex-persistedstate';
|
|||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export const identityTypes = {
|
||||
application: {
|
||||
name: 'application',
|
||||
value: 1,
|
||||
},
|
||||
user: {
|
||||
name: 'user',
|
||||
value: 2,
|
||||
},
|
||||
};
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
identities: [],
|
||||
names: [],
|
||||
identities: {
|
||||
user: [],
|
||||
application: [],
|
||||
},
|
||||
names: {},
|
||||
contracts: [],
|
||||
documents: [],
|
||||
},
|
||||
mutations: {
|
||||
addIdentity(state, identity) {
|
||||
state.identities.push(identity);
|
||||
addIdentity(state, { identity, type }) {
|
||||
state.identities[type.name].push(identity);
|
||||
},
|
||||
addName(state, { identity, name }) {
|
||||
const { id } = identity;
|
||||
if (!state.names[id]) {
|
||||
state.names[id] = [];
|
||||
}
|
||||
state.names[id].push(name);
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async createIdentity({ commit }, type) {
|
||||
const identity = await new Promise((resolve) => {
|
||||
setTimeout(() => resolve({ id: `t_id_${Date.now()}`, type }), 2000);
|
||||
setTimeout(() => resolve({ id: `t_${type.name}_id_${Date.now()}`, type }), 2000);
|
||||
});
|
||||
commit('addIdentity', identity);
|
||||
commit('addIdentity', { identity, type });
|
||||
},
|
||||
async registerName({ commit }, { identity, name }) {
|
||||
await new Promise((resolve) => {
|
||||
setTimeout(() => resolve(name), 2000);
|
||||
});
|
||||
commit('addName', { identity, name });
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
identityLists(state) {
|
||||
const { identities } = state;
|
||||
return Object.keys(identityTypes).map(typeName => ({
|
||||
type: identityTypes[typeName],
|
||||
items: identities[typeName],
|
||||
}));
|
||||
},
|
||||
userIdentitiesWithNames(state) {
|
||||
const { user } = state.identities;
|
||||
return user.map(identity => ({
|
||||
...identity,
|
||||
names: state.names[identity.id] || [],
|
||||
}));
|
||||
},
|
||||
},
|
||||
plugins: [createPersistedState()],
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container>
|
||||
<v-alert type="warning">
|
||||
Not Implemented
|
||||
</v-alert>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,89 +1,62 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-card tile flat>
|
||||
<v-card-title>
|
||||
Create identity
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-btn
|
||||
color="teal"
|
||||
:loading="createAppIdentityLoading"
|
||||
@click="() => createIdentity(1)"
|
||||
>
|
||||
application
|
||||
</v-btn>
|
||||
<v-col>
|
||||
</v-col>
|
||||
<v-btn
|
||||
color="cyan"
|
||||
:loading="createUserIdentityLoading"
|
||||
@click="() => createIdentity(2)"
|
||||
>
|
||||
user
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-simple-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Id</th>
|
||||
<th class="text-left">Type</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="identity in identities" :key="identity.id">
|
||||
<td>{{ identity.id }}</td>
|
||||
<td>{{ identity.type === 1 ? 'application' : 'user' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-simple-table>
|
||||
<v-col
|
||||
v-for="list in identityLists"
|
||||
:key="list.type.value"
|
||||
>
|
||||
<v-row class="mb-12">
|
||||
<v-col>
|
||||
<h1>{{ list.type.name }}</h1>
|
||||
</v-col>
|
||||
<v-col md="auto">
|
||||
<v-btn
|
||||
fab dark color="indigo"
|
||||
:loading="createIdentityLoading[list.type.name]"
|
||||
@click="() => createIdentity(list.type)"
|
||||
>
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-list shaped v-if="list.items.length">
|
||||
<v-list-item v-for="identity in list.items" :key="identity.id">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
{{ identity.id }}
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<span v-else>
|
||||
List is empty.
|
||||
Try to create an Identity
|
||||
</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
createAppIdentityLoading: false,
|
||||
createUserIdentityLoading: false,
|
||||
createIdentityLoading: {
|
||||
application: false,
|
||||
user: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['identities']),
|
||||
...mapGetters(['identityLists']),
|
||||
},
|
||||
methods: {
|
||||
createIdentity(type) {
|
||||
if (type === 1) {
|
||||
this.createAppIdentityLoading = true;
|
||||
}
|
||||
if (type === 2) {
|
||||
this.createUserIdentityLoading = true;
|
||||
}
|
||||
this.createIdentityLoading[type.name] = true;
|
||||
this.$store.dispatch('createIdentity', type).finally(() => {
|
||||
if (type === 1) {
|
||||
this.createAppIdentityLoading = false;
|
||||
}
|
||||
if (type === 2) {
|
||||
this.createUserIdentityLoading = false;
|
||||
}
|
||||
this.createIdentityLoading[type.name] = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,104 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<v-container>
|
||||
<v-row v-if="userIdentitiesWithNames.length">
|
||||
<v-col>
|
||||
<v-simple-table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Id</th>
|
||||
<th>Registered names</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="identity in userIdentitiesWithNames"
|
||||
:key="identity.id"
|
||||
>
|
||||
<td>{{ identity.id }}</td>
|
||||
<td>{{ identity.names.join(', ') }}</td>
|
||||
<td>
|
||||
<v-btn icon @click="() => openDialog(identity)">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-simple-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-alert v-else type="error">
|
||||
You must have an identity
|
||||
in order to create a domain name for it
|
||||
</v-alert>
|
||||
|
||||
<v-dialog
|
||||
v-model="showNameDialog"
|
||||
max-width="400px"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Register a new domain name
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field counter v-model="name" />
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn text @click="showNameDialog">close</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
color="primary"
|
||||
:loading="submitting"
|
||||
@click="submit"
|
||||
>
|
||||
submit
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { mapGetters, mapActions } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showNameDialog: false,
|
||||
submitting: false,
|
||||
selectedIdentity: undefined,
|
||||
name: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userIdentitiesWithNames']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['registerName']),
|
||||
openDialog(identity) {
|
||||
this.selectedIdentity = identity;
|
||||
this.name = '';
|
||||
this.showNameDialog = true;
|
||||
},
|
||||
submit() {
|
||||
const { name, selectedIdentity } = this;
|
||||
this.submitting = true;
|
||||
this.registerName({
|
||||
identity: selectedIdentity,
|
||||
name,
|
||||
}).then(() => {
|
||||
this.showNameDialog = false;
|
||||
}).finally(() => {
|
||||
this.submitting = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
tr>td:last-child{
|
||||
width: 1%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue