satellite/admin/back-office/ui: lint files
This change lints files for the new satellite admin web app. An ESLint config has been added for it that is identical to the one used for linting satellite web app files. Change-Id: I66f72fb880d5cbc80b6c080294e4a830b3d28143
This commit is contained in:
Jeremy Wharton
Storj Robot
parent
27724835da
commit
8ebf285081
108
satellite/admin/back-office/ui/.eslintrc.js
Normal file
108
satellite/admin/back-office/ui/.eslintrc.js
Normal file
@ -0,0 +1,108 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/recommended',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-typescript/recommended',
|
||||
'plugin:import/recommended',
|
||||
'plugin:import/typescript',
|
||||
],
|
||||
parser: 'vue-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser',
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
},
|
||||
plugins: ['eslint-plugin-import'],
|
||||
rules: {
|
||||
'linebreak-style': ['error', 'unix'],
|
||||
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
|
||||
'no-tabs': 'warn',
|
||||
'indent': ['warn', 4],
|
||||
'vue/html-indent': ['warn', 4],
|
||||
|
||||
'@typescript-eslint/no-unused-vars': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
|
||||
'no-multiple-empty-lines': ['error', { 'max': 1 }],
|
||||
|
||||
'import/order': ['error', {
|
||||
'pathGroups': [
|
||||
{
|
||||
'group': 'internal',
|
||||
'pattern': '@/{components,views}/**',
|
||||
'position': 'after',
|
||||
},
|
||||
{
|
||||
'group': 'internal',
|
||||
'pattern': '@/assets/**',
|
||||
'position': 'after',
|
||||
},
|
||||
],
|
||||
'newlines-between': 'always',
|
||||
}],
|
||||
'no-duplicate-imports': 'error',
|
||||
'import/default': 'off',
|
||||
'vue/script-setup-uses-vars': 'error',
|
||||
'object-curly-spacing': ['error', 'always'],
|
||||
'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
|
||||
'semi': ['error', 'always'],
|
||||
'keyword-spacing': ['error'],
|
||||
'comma-dangle': ['error', 'always-multiline'],
|
||||
'no-trailing-spaces': ['error'],
|
||||
'eqeqeq': ['error'],
|
||||
'comma-spacing': ['error'],
|
||||
'arrow-spacing': ['error'],
|
||||
'space-in-parens': ['error'],
|
||||
'space-before-blocks': ['error'],
|
||||
|
||||
'vue/multi-word-component-names': ['off'],
|
||||
'vue/max-attributes-per-line': ['off'],
|
||||
'vue/singleline-html-element-content-newline': ['off'],
|
||||
|
||||
'vue/block-lang': ['error', { 'script': { 'lang': 'ts' } }],
|
||||
'vue/html-button-has-type': ['error'],
|
||||
'vue/no-unused-properties': ['warn'],
|
||||
'vue/no-unused-refs': ['warn'],
|
||||
'vue/no-unused-vars': ['warn'],
|
||||
'vue/no-useless-v-bind': ['warn'],
|
||||
'vue/no-v-model-argument': ['off'],
|
||||
'vue/valid-v-slot': ['error', { 'allowModifiers': true }],
|
||||
|
||||
'vue/no-useless-template-attributes': ['off'], // TODO: fix later
|
||||
'vue/no-multiple-template-root': ['off'], // it's possible to have multiple roots in template in Vue 3
|
||||
|
||||
'vue/no-undef-components': ['warn', { ignorePatterns: ['router-link', 'router-view'] }],
|
||||
|
||||
'vue/no-v-html': ['error'],
|
||||
},
|
||||
settings: {
|
||||
'import/resolver': {
|
||||
'eslint-import-resolver-custom-alias': {
|
||||
'alias': {
|
||||
'@': './src',
|
||||
},
|
||||
extensions: ['.ts', '.vue'],
|
||||
},
|
||||
typescript: {
|
||||
alwaysTryTypes: true,
|
||||
project: './tsconfig.json',
|
||||
},
|
||||
node: true,
|
||||
},
|
||||
'import/parsers': {
|
||||
'@typescript-eslint/parser': ['.ts'],
|
||||
'vue-eslint-parser': ['.vue'],
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,8 @@
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --fix --ignore-path .gitignore"
|
||||
"lint": "eslint . --fix --ignore-path .gitignore",
|
||||
"lint-ci": "eslint . --no-fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/inter": "^5.0.8",
|
||||
@ -20,10 +21,18 @@
|
||||
"webfontloader": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.17.1",
|
||||
"@typescript-eslint/eslint-plugin": "5.59.5",
|
||||
"@typescript-eslint/parser": "5.59.5",
|
||||
"@vitejs/plugin-vue": "^3.0.3",
|
||||
"@vue/eslint-config-typescript": "11.0.3",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-import-resolver-custom-alias": "1.3.0",
|
||||
"eslint-import-resolver-typescript": "3.5.5",
|
||||
"eslint-plugin-import": "2.27.5",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
"sass": "^1.63.6",
|
||||
"typescript": "4.9.5",
|
||||
"vite": "^3.1.9",
|
||||
"vite-plugin-vuetify": "^1.0.0-alpha.12"
|
||||
}
|
||||
|
||||
@ -5,6 +5,6 @@
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
//
|
||||
</script>
|
||||
|
||||
@ -4,14 +4,13 @@
|
||||
<template>
|
||||
<v-menu activator="parent">
|
||||
<v-list class="pa-2">
|
||||
|
||||
<v-list-item density="comfortable" link rounded="lg" base-color="info" router-link to="/account-details">
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
View Account
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<v-list-item density="comfortable" link rounded="lg">
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
@ -55,7 +54,7 @@
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<v-list-item density="comfortable" link rounded="lg">
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
@ -77,12 +76,15 @@
|
||||
<AccountDeleteDialog />
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
|
||||
|
||||
import AccountInformationDialog from '@/components/AccountInformationDialog.vue';
|
||||
import AccountStatusDialog from '@/components/AccountStatusDialog.vue';
|
||||
import AccountResetMFADialog from '@/components/AccountResetMFADialog.vue';
|
||||
import AccountSuspendDialog from '@/components/AccountSuspendDialog.vue';
|
||||
import AccountDeleteDialog from '@/components/AccountDeleteDialog.vue';
|
||||
@ -90,11 +92,15 @@ import AccountNewProjectDialog from '@/components/AccountNewProjectDialog.vue';
|
||||
import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
|
||||
import AccountUserAgentsDialog from '@/components/AccountUserAgentsDialog.vue';
|
||||
import AccountLimitsDialog from '@/components/AccountLimitsDialog.vue';
|
||||
import AccountInformationDialog from './AccountInformationDialog.vue';
|
||||
import AccountStatusDialog from './AccountStatusDialog.vue';
|
||||
|
||||
export default {
|
||||
name: 'AccountsActionsMenu',
|
||||
components: {
|
||||
VMenu,
|
||||
VList,
|
||||
VListItem,
|
||||
VListItemTitle,
|
||||
VDivider,
|
||||
AccountResetMFADialog,
|
||||
AccountSuspendDialog,
|
||||
AccountDeleteDialog,
|
||||
@ -103,8 +109,7 @@ export default {
|
||||
AccountUserAgentsDialog,
|
||||
AccountLimitsDialog,
|
||||
AccountInformationDialog,
|
||||
AccountStatusDialog
|
||||
AccountStatusDialog,
|
||||
},
|
||||
name: 'AccountsActionsMenu',
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -4,25 +4,23 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Delete Account
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<p>Please enter the reason for deleting this account.</p>
|
||||
@ -31,33 +29,40 @@
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Deleting reason" placeholder="Select one or more reasons"
|
||||
<v-select
|
||||
label="Deleting reason" placeholder="Select one or more reasons"
|
||||
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-alert variant="tonal" color="error" rounded="lg">This will delete the account, data, and account
|
||||
information.</v-alert>
|
||||
<v-alert variant="tonal" color="error" rounded="lg">
|
||||
This will delete the account, data, and account
|
||||
information.
|
||||
</v-alert>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -69,13 +74,12 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-actions>
|
||||
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -83,20 +87,55 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VSelect,
|
||||
VAlert,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VSelect,
|
||||
VAlert,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The account was deleted successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,25 +4,23 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Account Placement
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<p>Select a placement region for this account.</p>
|
||||
@ -32,22 +30,25 @@
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Account Placement" placeholder="Select the placement region."
|
||||
<v-select
|
||||
label="Account Placement" placeholder="Select the placement region."
|
||||
:items="['global', 'us-select-1']" model-value="global" variant="outlined" chips
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -62,9 +63,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -72,20 +73,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VSelect,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VSelect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The account placement was set successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,25 +4,23 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Account Information
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<p>Edit the name, email, and account type.</p>
|
||||
@ -31,24 +29,27 @@
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="Irving Tacker" label="Account Name" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="Irving Tacker" label="Account Name" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" hide-details="auto"></v-text-field>
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" hide-details="auto" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-select label="Account Type" placeholder="Select the account type"
|
||||
<v-select
|
||||
label="Account Type" placeholder="Select the account type"
|
||||
:items="['Free', 'Pro', 'Priority', 'Enterprise']" model-value="Pro" chips required variant="outlined"
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -63,9 +64,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -73,20 +74,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VSelect,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VSelect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Successfully saved the account information.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Account Default Limits
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -30,38 +29,47 @@
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field label="Total Projects" model-value="3" suffix="Projects" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Total Projects" model-value="3" suffix="Projects" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field label="Storage / project" model-value="100" suffix="TB" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Storage / project" model-value="100" suffix="TB" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field label="Download / month / project" model-value="300" suffix="TB" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Download / month / project" model-value="300" suffix="TB" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field label="Segments / project" model-value="100,000,000" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Segments / project" model-value="100,000,000" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field label="Rate / project" model-value="100" variant="outlined" hide-details="auto"></v-text-field>
|
||||
<v-text-field label="Rate / project" model-value="100" variant="outlined" hide-details="auto" />
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field label="Burst / project" model-value="10,000" variant="outlined" hide-details="auto"></v-text-field>
|
||||
<v-text-field label="Burst / project" model-value="10,000" variant="outlined" hide-details="auto" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -76,9 +84,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="error">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="error">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -86,20 +94,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Error. Cannot change limits.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Create New Project
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,17 +28,21 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field label="Project Name" placeholder="Enter Project Name" variant="outlined" autofocus
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Project Name" placeholder="Enter Project Name" variant="outlined" autofocus
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat hide-details="auto"
|
||||
readonly></v-text-field>
|
||||
<v-text-field
|
||||
model-value="41" label="Account ID" variant="solo-filled" flat hide-details="auto"
|
||||
readonly
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -54,9 +57,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -64,20 +67,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Project created successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,28 +3,35 @@
|
||||
|
||||
<template>
|
||||
<v-card variant="flat" :border="true" rounded="xlg">
|
||||
<v-text-field
|
||||
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
|
||||
/>
|
||||
|
||||
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
|
||||
|
||||
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
|
||||
class="elevation-1" @item-click="handleItemClick" item-key="path" density="comfortable" hover>
|
||||
|
||||
<template v-slot:item.projectid="{ item }">
|
||||
<v-data-table
|
||||
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
|
||||
class="elevation-1" item-key="path" density="comfortable" hover @item-click="handleItemClick"
|
||||
>
|
||||
<template #item.projectid="{ item }">
|
||||
<div class="text-no-wrap">
|
||||
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24">
|
||||
<v-btn
|
||||
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24"
|
||||
>
|
||||
<ProjectActionsMenu />
|
||||
<v-icon icon="mdi-dots-horizontal"></v-icon>
|
||||
<v-icon icon="mdi-dots-horizontal" />
|
||||
</v-btn>
|
||||
<v-chip variant="text" color="default" size="small" router-link to="/project-details"
|
||||
class="font-weight-bold pl-1 ml-1">
|
||||
<template v-slot:prepend>
|
||||
<v-chip
|
||||
variant="text" color="default" size="small" router-link to="/project-details"
|
||||
class="font-weight-bold pl-1 ml-1"
|
||||
>
|
||||
<template #prepend>
|
||||
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
|
||||
<path
|
||||
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
{{ item.columns.projectid }}
|
||||
@ -32,54 +39,67 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.storagepercent="{ item }">
|
||||
<v-chip variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold">
|
||||
<template #item.storagepercent="{ item }">
|
||||
<v-chip
|
||||
variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.storagepercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.downloadpercent="{ item }">
|
||||
<v-chip variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold">
|
||||
<template #item.downloadpercent="{ item }">
|
||||
<v-chip
|
||||
variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.downloadpercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.segmentpercent="{ item }">
|
||||
|
||||
<template #item.segmentpercent="{ item }">
|
||||
<v-tooltip text="430,000 / 1,000,000">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-chip v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
|
||||
rounded="lg" class="font-weight-bold">
|
||||
<template #activator="{ props }">
|
||||
<v-chip
|
||||
v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
|
||||
rounded="lg" class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.segmentpercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.agent="{ item }">
|
||||
<template #item.agent="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
|
||||
{{ item.raw.agent }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.date="{ item }">
|
||||
<template #item.date="{ item }">
|
||||
<span class="text-no-wrap">
|
||||
{{ item.raw.date }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VCard, VTextField, VBtn, VIcon, VTooltip, VChip } from 'vuetify/components';
|
||||
import { VDataTable } from 'vuetify/labs/components';
|
||||
|
||||
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VCard,
|
||||
VTextField,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VTooltip,
|
||||
VChip,
|
||||
VDataTable,
|
||||
ProjectActionsMenu,
|
||||
},
|
||||
data() {
|
||||
@ -146,15 +166,15 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText
|
||||
this.search = searchText;
|
||||
},
|
||||
getPercentColor(percent) {
|
||||
if (percent >= 99) {
|
||||
return 'error'
|
||||
return 'error';
|
||||
} else if (percent >= 80) {
|
||||
return 'warning'
|
||||
return 'warning';
|
||||
} else {
|
||||
return 'success'
|
||||
return 'success';
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Reset MFA
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,17 +28,21 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -54,9 +57,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -64,20 +67,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The MFA was disabled successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Account Status
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,19 +28,22 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Account Status" placeholder="Select the account type"
|
||||
<v-select
|
||||
label="Account Status" placeholder="Select the account type"
|
||||
:items="['Active', 'Warned', 'Frozen', 'Suspended']" model-value="Active" chips required variant="outlined"
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -56,9 +58,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -66,20 +68,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Successfully saved the account status.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Suspend Account
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,28 +28,33 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select v-model="selected" label="Suspending reason" placeholder="Select one or more reasons"
|
||||
<v-select
|
||||
v-model="selected" label="Suspending reason" placeholder="Select one or more reasons"
|
||||
:items="['Account Delinquent', 'Illegal Content', 'Malicious Links', 'Other']" required multiple
|
||||
variant="outlined" autofocus hide-details="auto"></v-select>
|
||||
variant="outlined" autofocus hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" v-if="selected.includes('Other')">
|
||||
<v-text-field v-model="otherReason" variant="outlined" hide-details="auto" label="Enter other reason">
|
||||
</v-text-field>
|
||||
<v-col v-if="selected.includes('Other')" cols="12">
|
||||
<v-text-field v-model="otherReason" variant="outlined" hide-details="auto" label="Enter other reason" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -65,9 +69,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -75,8 +79,41 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selected: [],
|
||||
@ -84,13 +121,13 @@ export default {
|
||||
snackbar: false,
|
||||
text: `The account was suspended successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Account Value Attribution
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -30,21 +29,24 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Value Attribution" placeholder="Select the value attribution"
|
||||
<v-select
|
||||
label="Value Attribution" placeholder="Select the value attribution"
|
||||
:items="['User', 'Agent', 'Company', 'New']" model-value="Company" multiple chips required
|
||||
variant="outlined" hide-details="auto" class="text-body"></v-select>
|
||||
variant="outlined" hide-details="auto" class="text-body"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="email@email.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="email@email.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -59,9 +61,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -69,20 +71,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Successfully saved the value attribution.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,27 +3,35 @@
|
||||
|
||||
<template>
|
||||
<v-card variant="flat" rounded="xlg" border>
|
||||
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
|
||||
<v-text-field
|
||||
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
|
||||
/>
|
||||
|
||||
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="users" :search="search"
|
||||
density="comfortable" hover>
|
||||
|
||||
<template v-slot:item.email="{ item }">
|
||||
<v-data-table
|
||||
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="users" :search="search"
|
||||
density="comfortable" hover
|
||||
>
|
||||
<template #item.email="{ item }">
|
||||
<div class="text-no-wrap">
|
||||
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24">
|
||||
<v-btn
|
||||
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24"
|
||||
>
|
||||
<AccountActionsMenu />
|
||||
<v-icon icon="mdi-dots-horizontal"></v-icon>
|
||||
<v-icon icon="mdi-dots-horizontal" />
|
||||
</v-btn>
|
||||
<v-chip variant="text" color="default" size="small" router-link to="/account-details"
|
||||
class="font-weight-bold pl-1 ml-1">
|
||||
<template v-slot:prepend>
|
||||
<v-chip
|
||||
variant="text" color="default" size="small" router-link to="/account-details"
|
||||
class="font-weight-bold pl-1 ml-1"
|
||||
>
|
||||
<template #prepend>
|
||||
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2"></rect>
|
||||
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
|
||||
<path
|
||||
d="M16.0695 8.34998C18.7078 8.34998 20.8466 10.4888 20.8466 13.1271C20.8466 14.7102 20.0765 16.1134 18.8905 16.9826C21.2698 17.8565 23.1437 19.7789 23.9536 22.1905C23.9786 22.265 24.0026 22.34 24.0256 22.4154L24.0593 22.5289C24.2169 23.0738 23.9029 23.6434 23.3579 23.801C23.2651 23.8278 23.1691 23.8414 23.0725 23.8414H8.91866C8.35607 23.8414 7.89999 23.3853 7.89999 22.8227C7.89999 22.7434 7.90926 22.6644 7.92758 22.5873L7.93965 22.5412C7.97276 22.4261 8.00827 22.3119 8.04612 22.1988C8.86492 19.7523 10.7783 17.8081 13.2039 16.9494C12.0432 16.0781 11.2924 14.6903 11.2924 13.1271C11.2924 10.4888 13.4312 8.34998 16.0695 8.34998ZM16.0013 17.9724C13.1679 17.9724 10.6651 19.7017 9.62223 22.264L9.59178 22.34H22.4107L22.4102 22.3388C21.3965 19.7624 18.9143 18.0092 16.0905 17.973L16.0013 17.9724ZM16.0695 9.85135C14.2604 9.85135 12.7938 11.3179 12.7938 13.1271C12.7938 14.9362 14.2604 16.4028 16.0695 16.4028C17.8786 16.4028 19.3452 14.9362 19.3452 13.1271C19.3452 11.3179 17.8786 9.85135 16.0695 9.85135Z"
|
||||
fill="currentColor"></path>
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
{{ item.columns.email }}
|
||||
@ -31,51 +39,65 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.type="{ item }">
|
||||
<v-chip :color="getColor(item.raw.type)" variant="tonal" size="small" class="font-weight-bold"
|
||||
@click="setSearch(item.raw.type)">
|
||||
<template #item.type="{ item }">
|
||||
<v-chip
|
||||
:color="getColor(item.raw.type)" variant="tonal" size="small" class="font-weight-bold"
|
||||
@click="setSearch(item.raw.type)"
|
||||
>
|
||||
{{ item.raw.type }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.status="{ item }">
|
||||
<v-chip :color="getColor(item.raw.status)" variant="tonal" size="small" class="font-weight-medium"
|
||||
@click="setSearch(item.raw.status)">
|
||||
<template #item.status="{ item }">
|
||||
<v-chip
|
||||
:color="getColor(item.raw.status)" variant="tonal" size="small" class="font-weight-medium"
|
||||
@click="setSearch(item.raw.status)"
|
||||
>
|
||||
{{ item.raw.status }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.agent="{ item }">
|
||||
<template #item.agent="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.agent)">
|
||||
{{ item.raw.agent }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.placement="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" class="text-capitalize"
|
||||
@click="setSearch(item.raw.placement)">
|
||||
<template #item.placement="{ item }">
|
||||
<v-chip
|
||||
variant="tonal" color="default" size="small" rounded="lg" class="text-capitalize"
|
||||
@click="setSearch(item.raw.placement)"
|
||||
>
|
||||
{{ item.raw.placement }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.date="{ item }">
|
||||
<template #item.date="{ item }">
|
||||
<span class="text-no-wrap">
|
||||
{{ item.raw.date }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
|
||||
import { VDataTable } from 'vuetify/labs/components';
|
||||
|
||||
import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
|
||||
|
||||
export default {
|
||||
name: 'AccountsTableComponent',
|
||||
components: {
|
||||
VCard,
|
||||
VTextField,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VChip,
|
||||
VDataTable,
|
||||
AccountActionsMenu,
|
||||
},
|
||||
name: 'AccountsTableComponent',
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
@ -252,28 +274,28 @@ export default {
|
||||
userid: '25808',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
return (type) => {
|
||||
if (type === 'Enterprise') return 'purple'
|
||||
if (type === 'Priority') return 'secondary'
|
||||
if (type === 'Pro') return 'success'
|
||||
if (type === 'Free') return 'default'
|
||||
if (type === 'Active') return 'success'
|
||||
if (type === 'Inactive') return 'default'
|
||||
if (type === 'Frozen') return 'warning'
|
||||
if (type === 'Suspended') return 'error'
|
||||
if (type === 'Deleted') return 'error'
|
||||
return 'default'
|
||||
}
|
||||
}
|
||||
if (type === 'Enterprise') return 'purple';
|
||||
if (type === 'Priority') return 'secondary';
|
||||
if (type === 'Pro') return 'success';
|
||||
if (type === 'Free') return 'default';
|
||||
if (type === 'Active') return 'success';
|
||||
if (type === 'Inactive') return 'default';
|
||||
if (type === 'Frozen') return 'warning';
|
||||
if (type === 'Suspended') return 'error';
|
||||
if (type === 'Deleted') return 'error';
|
||||
return 'default';
|
||||
};
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Edit Account Information
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,17 +28,21 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="Tome Boshevski" label="Admin Name" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="Tome Boshevski" label="Admin Name" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="tome@storj.io" label="Admin Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="tome@storj.io" label="Admin Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -54,9 +57,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -64,20 +67,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Account information updated successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -10,7 +10,7 @@
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<v-list-item density="comfortable" link rounded="lg">
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
@ -19,7 +19,6 @@
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
|
||||
<v-list-item density="comfortable" link rounded="lg">
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
Set Value
|
||||
@ -34,7 +33,7 @@
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<v-list-item density="comfortable" link rounded="lg" base-color="error">
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
@ -46,19 +45,26 @@
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
|
||||
|
||||
import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
|
||||
import BucketDeleteDialog from '@/components/BucketDeleteDialog.vue';
|
||||
import BucketGeofenceDialog from '@/components/BucketGeofenceDialog.vue';
|
||||
import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
|
||||
import BucketInformationDialog from './BucketInformationDialog.vue';
|
||||
|
||||
export default {
|
||||
name: 'BucketActionsMenu',
|
||||
components: {
|
||||
VMenu,
|
||||
VList,
|
||||
VListItem,
|
||||
VListItemTitle,
|
||||
VDivider,
|
||||
BucketDeleteDialog,
|
||||
BucketGeofenceDialog,
|
||||
BucketUserAgentsDialog,
|
||||
BucketInformationDialog
|
||||
BucketInformationDialog,
|
||||
},
|
||||
name: 'BucketActionsMenu',
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Delete Bucket
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,20 +28,26 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Deleting reason" placeholder="Select one or more reasons"
|
||||
<v-select
|
||||
label="Deleting reason" placeholder="Select one or more reasons"
|
||||
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@ -51,10 +56,9 @@
|
||||
<v-alert variant="tonal" color="error" rounded="lg">This will delete the bucket and all it's data.</v-alert>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -69,9 +73,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -79,20 +83,55 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VAlert,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VAlert,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The bucket was deleted successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Set Bucket Placement
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -30,20 +29,23 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Placement region" placeholder="Select the placement region."
|
||||
:items="['global', 'us-select-1']" variant="outlined" autofocus hide-details="auto"></v-select>
|
||||
<v-select
|
||||
label="Placement region" placeholder="Select the placement region."
|
||||
:items="['global', 'us-select-1']" variant="outlined" autofocus hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -58,9 +60,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -68,20 +70,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The bucket placement was set successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Bucket Information
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,12 +28,12 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="Backups" label="Bucket Name" hide-details="auto"></v-text-field>
|
||||
<v-text-field model-value="Backups" label="Bucket Name" hide-details="auto" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -49,9 +48,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -59,20 +58,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Successfully updated the bucket information.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Bucket Value Attribution
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -30,20 +29,24 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Value Attribution" placeholder="Select the value attribution"
|
||||
<v-select
|
||||
label="Value Attribution" placeholder="Select the value attribution"
|
||||
:items="['User', 'Agent', 'Test', 'New']" multiple chips required variant="outlined" autofocus
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="Backups" label="Bucket Name" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -58,9 +61,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -68,20 +71,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Successfully saved the value attribution.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,28 +3,33 @@
|
||||
|
||||
<template>
|
||||
<v-card variant="flat" :border="true" rounded="xlg">
|
||||
<v-text-field
|
||||
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
|
||||
/>
|
||||
|
||||
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
|
||||
|
||||
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
|
||||
class="elevation-1" @item-click="handleItemClick" item-key="path" density="comfortable" hover>
|
||||
|
||||
<template v-slot:item.name="{ item }">
|
||||
<v-data-table
|
||||
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
|
||||
class="elevation-1" item-key="path" density="comfortable" hover @item-click="handleItemClick"
|
||||
>
|
||||
<template #item.name="{ item }">
|
||||
<div class="text-no-wrap">
|
||||
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24">
|
||||
<v-btn
|
||||
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24"
|
||||
>
|
||||
<BucketActionsMenu />
|
||||
<v-icon icon="mdi-dots-horizontal"></v-icon>
|
||||
<v-icon icon="mdi-dots-horizontal" />
|
||||
</v-btn>
|
||||
<v-chip variant="text" size="small" router-link to="/bucket-details" class="font-weight-bold pl-1 ml-1">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="10" />
|
||||
<rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="currentColor" stroke-opacity="0.2" />
|
||||
<path
|
||||
d="M23.3549 14.5467C24.762 15.9538 24.7748 18.227 23.3778 19.624C22.8117 20.1901 22.1018 20.5247 21.3639 20.6289L21.1106 22.0638C21.092 23.1897 18.7878 24.1 15.9481 24.1C13.1254 24.1 10.8319 23.2006 10.7863 22.0841L10.7858 22.0638L8.84466 11.066C8.82281 10.9882 8.80883 10.9095 8.80304 10.8299L8.8 10.8122L8.8019 10.8123C8.80063 10.7903 8.8 10.7682 8.8 10.746C8.8 9.17422 12.0003 7.90002 15.9481 7.90002C19.8959 7.90002 23.0962 9.17422 23.0962 10.746C23.0962 10.7682 23.0955 10.7903 23.0943 10.8123L23.0962 10.8122L23.093 10.8311C23.0872 10.9098 23.0734 10.9876 23.0519 11.0645L22.5749 13.7666L23.3549 14.5467ZM21.2962 12.6344C19.9867 13.2218 18.076 13.592 15.9481 13.592C13.8203 13.592 11.9096 13.2219 10.6001 12.6344L12.0072 20.6077L12.2373 21.8286L12.2586 21.8452C12.3789 21.9354 12.5652 22.0371 12.807 22.1351L12.8561 22.1546C13.6355 22.4594 14.7462 22.6439 15.9481 22.6439C17.1569 22.6439 18.2733 22.4573 19.0528 22.1497C19.3337 22.0388 19.5431 21.9223 19.6661 21.8231L19.6761 21.8148L19.9019 20.5348C19.3338 20.3787 18.7955 20.0812 18.3429 19.6429L18.3004 19.6011L15.3749 16.6756C15.0906 16.3913 15.0906 15.9303 15.3749 15.646C15.6523 15.3686 16.0978 15.3618 16.3834 15.6257L16.4045 15.646L19.33 18.5715C19.5717 18.8132 19.8555 18.9861 20.1569 19.0901L21.2962 12.6344ZM22.2661 15.517L21.6408 19.0597C21.8989 18.9575 22.1402 18.8024 22.3482 18.5944C23.1641 17.7784 23.1664 16.4494 22.355 15.6065L22.3253 15.5763L22.2661 15.517ZM15.9481 9.35612C14.2013 9.35612 12.5813 9.62893 11.4322 10.0864C10.9385 10.283 10.5712 10.4995 10.3598 10.6985C10.3463 10.7112 10.334 10.7232 10.3228 10.7347L10.3122 10.7459L10.3314 10.7661L10.3598 10.7936C10.5712 10.9926 10.9385 11.2091 11.4322 11.4056C12.5813 11.8631 14.2013 12.1359 15.9481 12.1359C17.6949 12.1359 19.3149 11.8631 20.4639 11.4056C20.9577 11.2091 21.325 10.9926 21.5364 10.7936C21.5499 10.7809 21.5622 10.7688 21.5733 10.7574L21.5841 10.7459L21.5647 10.726L21.5364 10.6985C21.325 10.4995 20.9577 10.283 20.4639 10.0864C19.3149 9.62893 17.6949 9.35612 15.9481 9.35612Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
{{ item.raw.name }}
|
||||
@ -32,37 +37,44 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.placement="{ item }">
|
||||
<template #item.placement="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" class="text-capitalize">
|
||||
{{ item.raw.placement }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.agent="{ item }">
|
||||
<template #item.agent="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
|
||||
{{ item.raw.agent }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.date="{ item }">
|
||||
<template #item.date="{ item }">
|
||||
<span class="text-no-wrap">
|
||||
{{ item.raw.date }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
|
||||
import { VDataTable } from 'vuetify/labs/components';
|
||||
|
||||
import BucketActionsMenu from '@/components/BucketActionsMenu.vue';
|
||||
|
||||
export default {
|
||||
name: 'BucketsTableComponent',
|
||||
components: {
|
||||
VCard,
|
||||
VTextField,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VChip,
|
||||
VDataTable,
|
||||
BucketActionsMenu,
|
||||
},
|
||||
name: 'BucketsTableComponent',
|
||||
data() {
|
||||
return {
|
||||
// search in the table
|
||||
@ -184,8 +196,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText
|
||||
}
|
||||
this.search = searchText;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -9,8 +9,36 @@
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VCard, VCardText, VChip } from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
props: ['title', 'subtitle', 'data', 'variant', 'color']
|
||||
}
|
||||
components: {
|
||||
VCard,
|
||||
VCardText,
|
||||
VChip,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -2,27 +2,35 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
|
||||
<v-text-field
|
||||
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
|
||||
/>
|
||||
|
||||
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="projects" :search="search"
|
||||
@item-click="handleItemClick" density="comfortable" hover>
|
||||
|
||||
<template v-slot:item.projectid="{ item }">
|
||||
<v-data-table
|
||||
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="projects" :search="search"
|
||||
density="comfortable" hover @item-click="handleItemClick"
|
||||
>
|
||||
<template #item.projectid="{ item }">
|
||||
<div class="text-no-wrap">
|
||||
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24">
|
||||
<v-btn
|
||||
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24"
|
||||
>
|
||||
<ProjectActionsMenu />
|
||||
<v-icon icon="mdi-dots-horizontal"></v-icon>
|
||||
<v-icon icon="mdi-dots-horizontal" />
|
||||
</v-btn>
|
||||
<v-chip variant="text" color="default" size="small" router-link to="/project-details"
|
||||
class="font-weight-bold pl-1 ml-1">
|
||||
<template v-slot:prepend>
|
||||
<v-chip
|
||||
variant="text" color="default" size="small" router-link to="/project-details"
|
||||
class="font-weight-bold pl-1 ml-1"
|
||||
>
|
||||
<template #prepend>
|
||||
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
|
||||
<path
|
||||
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
{{ item.columns.projectid }}
|
||||
@ -30,66 +38,80 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.name="{ item }">
|
||||
<template #item.name="{ item }">
|
||||
{{ item.raw.name }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.email="{ item }">
|
||||
<template #item.email="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.email)">
|
||||
{{ item.raw.email }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.agent="{ item }">
|
||||
<template #item.agent="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
|
||||
{{ item.raw.agent }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.placement="{ item }">
|
||||
<template #item.placement="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.placement)">
|
||||
{{ item.raw.placement }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.storagepercent="{ item }">
|
||||
<v-chip variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold">
|
||||
<template #item.storagepercent="{ item }">
|
||||
<v-chip
|
||||
variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.storagepercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.downloadpercent="{ item }">
|
||||
<v-chip variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold">
|
||||
<template #item.downloadpercent="{ item }">
|
||||
<v-chip
|
||||
variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.downloadpercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.segmentpercent="{ item }">
|
||||
<template #item.segmentpercent="{ item }">
|
||||
<v-tooltip text="430,000 / 1,000,000">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-chip v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
|
||||
rounded="lg" class="font-weight-bold">
|
||||
<template #activator="{ props }">
|
||||
<v-chip
|
||||
v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
|
||||
rounded="lg" class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.segmentpercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.date="{ item }">
|
||||
<template #item.date="{ item }">
|
||||
<span class="text-no-wrap">
|
||||
{{ item.raw.date }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
</template>
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VTextField, VBtn, VIcon, VChip, VTooltip } from 'vuetify/components';
|
||||
import { VDataTable } from 'vuetify/labs/components';
|
||||
|
||||
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VTextField,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VChip,
|
||||
VTooltip,
|
||||
VDataTable,
|
||||
ProjectActionsMenu,
|
||||
},
|
||||
data() {
|
||||
@ -239,15 +261,15 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText
|
||||
this.search = searchText;
|
||||
},
|
||||
getPercentColor(percent) {
|
||||
if (percent >= 99) {
|
||||
return 'error'
|
||||
return 'error';
|
||||
} else if (percent >= 80) {
|
||||
return 'warning'
|
||||
return 'warning';
|
||||
} else {
|
||||
return 'success'
|
||||
return 'success';
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@ -3,14 +3,16 @@
|
||||
|
||||
<template>
|
||||
<v-card variant="flat" :border="true" rounded="xlg">
|
||||
<v-text-field
|
||||
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
|
||||
/>
|
||||
|
||||
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
|
||||
|
||||
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
|
||||
class="elevation-1" @item-click="handleItemClick" item-key="path" density="comfortable" show-expand hover>
|
||||
|
||||
<template v-slot:expanded-row="{ columns, item }">
|
||||
<v-data-table
|
||||
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
|
||||
class="elevation-1" item-key="path" density="comfortable" show-expand hover @item-click="handleItemClick"
|
||||
>
|
||||
<template #expanded-row="{ columns, item }">
|
||||
<tr>
|
||||
<td :colspan="columns.length">
|
||||
More info about {{ item.raw.name }} change.
|
||||
@ -18,38 +20,45 @@
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.operation="{ item }">
|
||||
<template #item.operation="{ item }">
|
||||
<v-chip variant="tonal" size="small" rounded="lg" @click="setSearch(item.raw.operation)">
|
||||
{{ item.raw.operation }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.name="{ item }">
|
||||
<template #item.name="{ item }">
|
||||
<v-list-item class="rounded-lg pl-1" link router-link to="/dashboard">
|
||||
{{ item.columns.name }}
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.email="{ item }">
|
||||
<template #item.email="{ item }">
|
||||
<v-chip variant="tonal" size="small" rounded="lg" @click="setSearch(item.raw.email)">
|
||||
{{ item.raw.email }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.date="{ item }">
|
||||
<template #item.date="{ item }">
|
||||
<span class="text-no-wrap">
|
||||
{{ item.raw.date }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VCard, VTextField, VChip, VListItem } from 'vuetify/components';
|
||||
import { VDataTable } from 'vuetify/labs/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VCard,
|
||||
VTextField,
|
||||
VChip,
|
||||
VListItem,
|
||||
VDataTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// search in the table
|
||||
@ -94,8 +103,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText
|
||||
}
|
||||
this.search = searchText;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Create New Account
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,19 +28,21 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field variant="outlined" label="Full name" required hide-details="auto" autofocus></v-text-field>
|
||||
<v-text-field variant="outlined" label="Full name" required hide-details="auto" autofocus />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field v-model="email" variant="outlined" :rules="emailRules" label="E-mail"
|
||||
hint="Generated password will be sent by email." hide-details="auto" required></v-text-field>
|
||||
<v-text-field
|
||||
v-model="email" variant="outlined" :rules="emailRules" label="E-mail"
|
||||
hint="Generated password will be sent by email." hide-details="auto" required
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -56,9 +57,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -66,8 +67,39 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
@ -77,22 +109,22 @@ export default {
|
||||
email: '',
|
||||
emailRules: [
|
||||
value => {
|
||||
if (value) return true
|
||||
if (value) return true;
|
||||
|
||||
return 'E-mail is requred.'
|
||||
return 'E-mail is requred.';
|
||||
},
|
||||
value => {
|
||||
if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true
|
||||
return 'E-mail must be valid.'
|
||||
if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
|
||||
return 'E-mail must be valid.';
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Create New Project
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,17 +28,21 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field label="Enter Account ID" variant="outlined" autofocus readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Enter Account ID" variant="outlined" autofocus readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field label="Project Name" placeholder="Enter Project Name" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Project Name" placeholder="Enter Project Name" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -54,9 +57,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -64,20 +67,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Project created successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -2,12 +2,18 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
<template>
|
||||
<p class="text-medium-emphasis">{{ subtitle }}
|
||||
<p class="text-medium-emphasis">
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: ['subtitle']
|
||||
}
|
||||
props: {
|
||||
subtitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -5,8 +5,13 @@
|
||||
<h1 class="text-h5 font-weight-bold my-2">{{ title }}</h1>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
props: ['title']
|
||||
}
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -10,7 +10,7 @@
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<v-list-item density="comfortable" link rounded="lg">
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
@ -54,7 +54,7 @@
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-divider class="my-2" />
|
||||
<v-list-item density="comfortable" link rounded="lg" base-color="error">
|
||||
<v-list-item-title class="text-body-2 font-weight-medium">
|
||||
Delete
|
||||
@ -65,25 +65,32 @@
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VMenu, VList, VListItem, VListItemTitle, VDivider } from 'vuetify/components';
|
||||
|
||||
import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
|
||||
import ProjectDeleteDialog from '@/components/ProjectDeleteDialog.vue';
|
||||
import ProjectNewBucketDialog from '@/components/ProjectNewBucketDialog.vue';
|
||||
import ProjectGeofenceDialog from '@/components/ProjectGeofenceDialog.vue';
|
||||
import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
|
||||
import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
|
||||
import ProjectAddUserDialog from '@/components/ProjectAddUserDialog.vue';
|
||||
import ProjectInformationDialog from './ProjectInformationDialog.vue';
|
||||
|
||||
export default {
|
||||
name: 'ProjectActionsMenu',
|
||||
components: {
|
||||
VMenu,
|
||||
VList,
|
||||
VListItem,
|
||||
VListItemTitle,
|
||||
VDivider,
|
||||
ProjectDeleteDialog,
|
||||
ProjectNewBucketDialog,
|
||||
ProjectGeofenceDialog,
|
||||
ProjectUserAgentsDialog,
|
||||
ProjectLimitsDialog,
|
||||
ProjectAddUserDialog,
|
||||
ProjectInformationDialog
|
||||
ProjectInformationDialog,
|
||||
},
|
||||
name: 'ProjectActionsMenu',
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Add User
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,19 +28,20 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field label="Enter user email" autofocus variant="outlined" hide-details="auto"></v-text-field>
|
||||
<v-text-field label="Enter user email" autofocus variant="outlined" hide-details="auto" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -56,9 +56,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -66,20 +66,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The user was added successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Delete Project
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,20 +28,26 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Deleting reason" placeholder="Select one or more reasons"
|
||||
<v-select
|
||||
label="Deleting reason" placeholder="Select one or more reasons"
|
||||
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" multiple variant="outlined" autofocus required
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@ -51,10 +56,9 @@
|
||||
<v-alert variant="tonal" color="error" rounded="lg">This will delete the project and all it's data.</v-alert>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -69,9 +73,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -79,20 +83,55 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VAlert,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
VAlert,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The project was deleted successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Set Project Placement
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -30,20 +29,23 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Placement region" placeholder="Select the placement region."
|
||||
:items="['global', 'us-select-1']" variant="outlined" autofocus hide-details="auto"></v-select>
|
||||
<v-select
|
||||
label="Placement region" placeholder="Select the placement region."
|
||||
:items="['global', 'us-select-1']" variant="outlined" autofocus hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -58,9 +60,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -68,20 +70,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The project placement was set successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Project Information
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,15 +28,15 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="My First Project" label="Project Name" hide-details="auto"></v-text-field>
|
||||
<v-text-field model-value="My First Project" label="Project Name" hide-details="auto" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="Description..." label="Project Description" hide-details="auto"></v-text-field>
|
||||
<v-text-field model-value="Description..." label="Project Description" hide-details="auto" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -52,9 +51,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -62,20 +61,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Successfully updated the project information.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Project Limits
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -30,38 +29,48 @@
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field label="Buckets" model-value="100" suffix="Buckets" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Buckets" model-value="100" suffix="Buckets" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field label="Storage" model-value="100" suffix="TB" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Storage" model-value="100" suffix="TB" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field label="Download per month" model-value="300" suffix="TB" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Download per month" model-value="300" suffix="TB" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field label="Segments" model-value="100,000,000" variant="outlined"
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Segments" model-value="100,000,000" variant="outlined"
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field label="Rate" model-value="10,000" variant="outlined" hide-details="auto"></v-text-field>
|
||||
<v-text-field label="Rate" model-value="10,000" variant="outlined" hide-details="auto" />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field label="Burst" model-value="50,000" variant="outlined" hide-details="auto"></v-text-field>
|
||||
<v-text-field label="Burst" model-value="50,000" variant="outlined" hide-details="auto" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -76,9 +85,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="error">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="error">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -86,20 +95,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Error. Cannot change project limits.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Create New Bucket
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,17 +28,21 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field label="Bucket Name" placeholder="Enter Bucket Name" variant="outlined" autofocus
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
label="Bucket Name" placeholder="Enter Bucket Name" variant="outlined" autofocus
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat hide-details="auto"
|
||||
readonly></v-text-field>
|
||||
<v-text-field
|
||||
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat hide-details="auto"
|
||||
readonly
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -54,9 +57,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -64,20 +67,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Bucket created successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Reset MFA
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,17 +28,21 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -54,9 +57,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -64,20 +67,51 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The MFA was disabled successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Suspend Account
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -29,24 +28,30 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Suspending reason" placeholder="Select one or more reasons"
|
||||
<v-select
|
||||
label="Suspending reason" placeholder="Select one or more reasons"
|
||||
:items="['Reason 1', 'Reason 2', 'Reason 3', 'Other']" required multiple variant="outlined" autofocus
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="41" label="Account ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="itacker@gmail.com" label="Account Email" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -61,9 +66,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -71,20 +76,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `The account was suspended successfully.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -4,22 +4,21 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" activator="parent" width="auto" transition="fade-transition">
|
||||
<v-card rounded="xlg">
|
||||
|
||||
<v-sheet>
|
||||
<v-card-item class="pl-7 py-4">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<v-card-title class="font-weight-bold">
|
||||
Project Value Attribution
|
||||
</v-card-title>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false"></v-btn>
|
||||
<template #append>
|
||||
<v-btn icon="$close" variant="text" size="small" color="default" @click="dialog = false" />
|
||||
</template>
|
||||
</v-card-item>
|
||||
</v-sheet>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-form v-model="valid" class="pa-7">
|
||||
<v-row>
|
||||
@ -30,21 +29,24 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-select label="Value Attribution" placeholder="Select the value attribution."
|
||||
<v-select
|
||||
label="Value Attribution" placeholder="Select the value attribution."
|
||||
:items="['User', 'Agent', 'Test', 'New']" multiple chips required variant="outlined" autofocus
|
||||
hide-details="auto"></v-select>
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"></v-text-field>
|
||||
<v-text-field
|
||||
model-value="56F82SR21Q284" label="Project ID" variant="solo-filled" flat readonly
|
||||
hide-details="auto"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-form>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-7">
|
||||
<v-row>
|
||||
@ -59,9 +61,9 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-snackbar :timeout="7000" v-model="snackbar" color="success">
|
||||
<v-snackbar v-model="snackbar" :timeout="7000" color="success">
|
||||
{{ text }}
|
||||
<template v-slot:actions>
|
||||
<template #actions>
|
||||
<v-btn color="default" variant="text" @click="snackbar = false">
|
||||
Close
|
||||
</v-btn>
|
||||
@ -69,20 +71,53 @@
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VDialog,
|
||||
VCard,
|
||||
VSheet,
|
||||
VCardItem,
|
||||
VCardTitle,
|
||||
VBtn,
|
||||
VDivider,
|
||||
VForm,
|
||||
VRow,
|
||||
VCol,
|
||||
VSelect,
|
||||
VTextField,
|
||||
VCardActions,
|
||||
VSnackbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
snackbar: false,
|
||||
text: `Successfully saved the value attribution.`,
|
||||
dialog: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onButtonClick() {
|
||||
this.snackbar = true;
|
||||
this.dialog = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,28 +3,35 @@
|
||||
|
||||
<template>
|
||||
<v-card variant="flat" :border="true" rounded="xlg">
|
||||
<v-text-field
|
||||
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
|
||||
/>
|
||||
|
||||
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
|
||||
|
||||
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
|
||||
class="elevation-1" @item-click="handleItemClick" density="comfortable" hover>
|
||||
|
||||
<template v-slot:item.projectid="{ item }">
|
||||
<v-data-table
|
||||
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="files" :search="search"
|
||||
class="elevation-1" density="comfortable" hover @item-click="handleItemClick"
|
||||
>
|
||||
<template #item.projectid="{ item }">
|
||||
<div class="text-no-wrap">
|
||||
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24">
|
||||
<v-btn
|
||||
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24"
|
||||
>
|
||||
<ProjectActionsMenu />
|
||||
<v-icon icon="mdi-dots-horizontal"></v-icon>
|
||||
<v-icon icon="mdi-dots-horizontal" />
|
||||
</v-btn>
|
||||
<v-chip variant="text" color="default" size="small" router-link to="/project-details"
|
||||
class="font-weight-medium pl-1 ml-1">
|
||||
<template v-slot:prepend>
|
||||
<v-chip
|
||||
variant="text" color="default" size="small" router-link to="/project-details"
|
||||
class="font-weight-medium pl-1 ml-1"
|
||||
>
|
||||
<template #prepend>
|
||||
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
|
||||
<path
|
||||
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
{{ item.columns.projectid }}
|
||||
@ -32,70 +39,90 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.name="{ item }">
|
||||
<template #item.name="{ item }">
|
||||
{{ item.raw.name }}
|
||||
</template>
|
||||
|
||||
<template v-slot:item.email="{ item }">
|
||||
<template #item.email="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.email)">
|
||||
{{ item.raw.email }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.agent="{ item }">
|
||||
<template #item.agent="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.agent)">
|
||||
{{ item.raw.agent }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.placement="{ item }">
|
||||
<template #item.placement="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" rounded="lg" @click="setSearch(item.raw.placement)">
|
||||
{{ item.raw.placement }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.storagepercent="{ item }">
|
||||
<v-chip variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold">
|
||||
<template #item.storagepercent="{ item }">
|
||||
<v-chip
|
||||
variant="tonal" :color="getPercentColor(item.raw.storagepercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.storagepercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.downloadpercent="{ item }">
|
||||
<v-chip variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold">
|
||||
<template #item.downloadpercent="{ item }">
|
||||
<v-chip
|
||||
variant="tonal" :color="getPercentColor(item.raw.downloadpercent)" size="small" rounded="lg"
|
||||
class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.downloadpercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.segmentpercent="{ item }">
|
||||
|
||||
<template #item.segmentpercent="{ item }">
|
||||
<v-tooltip text="430,000 / 1,000,000">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-chip v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
|
||||
rounded="lg" class="font-weight-bold">
|
||||
<template #activator="{ props }">
|
||||
<v-chip
|
||||
v-bind="props" variant="tonal" :color="getPercentColor(item.raw.segmentpercent)" size="small"
|
||||
rounded="lg" class="font-weight-bold"
|
||||
>
|
||||
{{ item.raw.segmentpercent }}%
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.date="{ item }">
|
||||
<template #item.date="{ item }">
|
||||
<span class="text-no-wrap">
|
||||
{{ item.raw.date }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VCard,
|
||||
VTextField,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VChip,
|
||||
VTooltip,
|
||||
} from 'vuetify/components';
|
||||
import { VDataTable } from 'vuetify/labs/components';
|
||||
|
||||
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VCard,
|
||||
VTextField,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VChip,
|
||||
VTooltip,
|
||||
VDataTable,
|
||||
ProjectActionsMenu,
|
||||
},
|
||||
data() {
|
||||
@ -275,18 +302,17 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText
|
||||
this.search = searchText;
|
||||
},
|
||||
getPercentColor(percent) {
|
||||
if (percent >= 99) {
|
||||
return 'error'
|
||||
return 'error';
|
||||
} else if (percent >= 80) {
|
||||
return 'warning'
|
||||
return 'warning';
|
||||
} else {
|
||||
return 'success'
|
||||
return 'success';
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -5,15 +5,14 @@
|
||||
<v-card :title="title" variant="flat" :border="true" rounded="xlg">
|
||||
<v-card-item class="pt-1">
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" class="pb-1">
|
||||
<v-progress-linear :color="color" :model-value="progress" rounded height="6"></v-progress-linear>
|
||||
<v-progress-linear :color="color" :model-value="progress" rounded height="6" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="6">
|
||||
<p class="text-medium-emphasis">Used</p>
|
||||
<h4>{{ used }}</h4>
|
||||
<v-divider class="my-3"></v-divider>
|
||||
<v-divider class="my-3" />
|
||||
<p class="text-medium-emphasis">Percentage</p>
|
||||
<h4 class="">{{ percentage }}</h4>
|
||||
</v-col>
|
||||
@ -21,24 +20,71 @@
|
||||
<v-col cols="6">
|
||||
<p class="text-right text-medium-emphasis">Available</p>
|
||||
<h4 class="text-right">{{ available }}</h4>
|
||||
<v-divider class="my-3"></v-divider>
|
||||
<v-divider class="my-3" />
|
||||
<p class="text-right text-medium-emphasis">Limit</p>
|
||||
<h4 class="text-right">{{ limit }}</h4>
|
||||
</v-col>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-divider />
|
||||
|
||||
<v-col>
|
||||
<v-btn size="small" variant="outlined" color="default" class="mt-1 my-2">Change Limits</v-btn>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
</v-card-item>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VCard,
|
||||
VCardItem,
|
||||
VRow,
|
||||
VCol,
|
||||
VProgressLinear,
|
||||
VDivider,
|
||||
VBtn,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
props: ['title', 'progress', 'used', 'limit', 'available', 'percentage', 'color']
|
||||
}
|
||||
components: {
|
||||
VCard,
|
||||
VCardItem,
|
||||
VRow,
|
||||
VCol,
|
||||
VProgressLinear,
|
||||
VDivider,
|
||||
VBtn,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
progress: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
used: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
limit: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
available: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
percentage: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,27 +3,35 @@
|
||||
|
||||
<template>
|
||||
<v-card variant="flat" :border="true" rounded="xlg">
|
||||
<v-text-field v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"></v-text-field>
|
||||
<v-text-field
|
||||
v-model="search" label="Search" prepend-inner-icon="mdi-magnify" single-line variant="solo-filled" flat
|
||||
hide-details clearable density="compact" rounded="lg" class="mx-2 mt-2"
|
||||
/>
|
||||
|
||||
<v-data-table v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="users" :search="search"
|
||||
density="comfortable" hover>
|
||||
|
||||
<template v-slot:item.email="{ item }">
|
||||
<v-data-table
|
||||
v-model="selected" v-model:sort-by="sortBy" :headers="headers" :items="users" :search="search"
|
||||
density="comfortable" hover
|
||||
>
|
||||
<template #item.email="{ item }">
|
||||
<div class="text-no-wrap">
|
||||
<v-btn variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24">
|
||||
<v-btn
|
||||
variant="outlined" color="default" size="small" class="mr-1 text-caption" density="comfortable" icon
|
||||
width="24" height="24"
|
||||
>
|
||||
<AccountActionsMenu />
|
||||
<v-icon icon="mdi-dots-horizontal"></v-icon>
|
||||
<v-icon icon="mdi-dots-horizontal" />
|
||||
</v-btn>
|
||||
<v-chip variant="text" color="default" size="small" router-link to="/account-details"
|
||||
class="font-weight-bold pl-1 ml-1">
|
||||
<template v-slot:prepend>
|
||||
<v-chip
|
||||
variant="text" color="default" size="small" router-link to="/account-details"
|
||||
class="font-weight-bold pl-1 ml-1"
|
||||
>
|
||||
<template #prepend>
|
||||
<svg class="mr-2" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2"></rect>
|
||||
<rect x="0.5" y="0.5" width="31" height="31" rx="10" stroke="currentColor" stroke-opacity="0.2" />
|
||||
<path
|
||||
d="M16.0695 8.34998C18.7078 8.34998 20.8466 10.4888 20.8466 13.1271C20.8466 14.7102 20.0765 16.1134 18.8905 16.9826C21.2698 17.8565 23.1437 19.7789 23.9536 22.1905C23.9786 22.265 24.0026 22.34 24.0256 22.4154L24.0593 22.5289C24.2169 23.0738 23.9029 23.6434 23.3579 23.801C23.2651 23.8278 23.1691 23.8414 23.0725 23.8414H8.91866C8.35607 23.8414 7.89999 23.3853 7.89999 22.8227C7.89999 22.7434 7.90926 22.6644 7.92758 22.5873L7.93965 22.5412C7.97276 22.4261 8.00827 22.3119 8.04612 22.1988C8.86492 19.7523 10.7783 17.8081 13.2039 16.9494C12.0432 16.0781 11.2924 14.6903 11.2924 13.1271C11.2924 10.4888 13.4312 8.34998 16.0695 8.34998ZM16.0013 17.9724C13.1679 17.9724 10.6651 19.7017 9.62223 22.264L9.59178 22.34H22.4107L22.4102 22.3388C21.3965 19.7624 18.9143 18.0092 16.0905 17.973L16.0013 17.9724ZM16.0695 9.85135C14.2604 9.85135 12.7938 11.3179 12.7938 13.1271C12.7938 14.9362 14.2604 16.4028 16.0695 16.4028C17.8786 16.4028 19.3452 14.9362 19.3452 13.1271C19.3452 11.3179 17.8786 9.85135 16.0695 9.85135Z"
|
||||
fill="currentColor"></path>
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
{{ item.columns.email }}
|
||||
@ -31,43 +39,53 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.type="{ item }">
|
||||
<v-chip :color="getColor(item.raw.type)" variant="tonal" size="small" rounded="lg" class="font-weight-bold"
|
||||
@click="setSearch(item.raw.type)">
|
||||
<template #item.type="{ item }">
|
||||
<v-chip
|
||||
:color="getColor(item.raw.type)" variant="tonal" size="small" rounded="lg" class="font-weight-bold"
|
||||
@click="setSearch(item.raw.type)"
|
||||
>
|
||||
{{ item.raw.type }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.role="{ item }">
|
||||
<template #item.role="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.role)">
|
||||
{{ item.raw.role }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.agent="{ item }">
|
||||
<template #item.agent="{ item }">
|
||||
<v-chip variant="tonal" color="default" size="small" @click="setSearch(item.raw.agent)">
|
||||
{{ item.raw.agent }}
|
||||
</v-chip>
|
||||
</template>
|
||||
|
||||
<template v-slot:item.date="{ item }">
|
||||
<template #item.date="{ item }">
|
||||
<span class="text-no-wrap">
|
||||
{{ item.raw.date }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VCard, VTextField, VBtn, VIcon, VChip } from 'vuetify/components';
|
||||
import { VDataTable } from 'vuetify/labs/components';
|
||||
|
||||
import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
|
||||
|
||||
export default {
|
||||
name: 'AccountsTableComponent',
|
||||
components: {
|
||||
VCard,
|
||||
VTextField,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VChip,
|
||||
VDataTable,
|
||||
AccountActionsMenu,
|
||||
},
|
||||
name: 'AccountsTableComponent',
|
||||
data() {
|
||||
return {
|
||||
search: '',
|
||||
@ -141,23 +159,23 @@ export default {
|
||||
userid: '55524',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
return (type) => {
|
||||
if (type === 'Enterprise') return 'purple'
|
||||
if (type === 'Priority') return 'secondary'
|
||||
if (type === 'Pro') return 'success'
|
||||
if (type === 'Suspended') return 'warning'
|
||||
return 'default'
|
||||
}
|
||||
}
|
||||
if (type === 'Enterprise') return 'purple';
|
||||
if (type === 'Priority') return 'secondary';
|
||||
if (type === 'Pro') return 'success';
|
||||
if (type === 'Suspended') return 'warning';
|
||||
return 'default';
|
||||
};
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setSearch(searchText) {
|
||||
this.search = searchText;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,9 +3,10 @@
|
||||
|
||||
<template>
|
||||
<v-app-bar :elevation="0">
|
||||
|
||||
<v-app-bar-nav-icon variant="text" color="default" class="mr-1" size="small" density="comfortable"
|
||||
@click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<v-app-bar-nav-icon
|
||||
variant="text" color="default" class="mr-1" size="small" density="comfortable"
|
||||
@click.stop="drawer = !drawer"
|
||||
/>
|
||||
|
||||
<v-app-bar-title class="mx-1">
|
||||
<router-link to="/dashboard">
|
||||
@ -14,36 +15,34 @@
|
||||
</router-link>
|
||||
</v-app-bar-title>
|
||||
|
||||
<template v-slot:append>
|
||||
|
||||
<v-menu offset-y class="rounded-xl">
|
||||
|
||||
<template v-slot:activator="{ props }">
|
||||
<template #append>
|
||||
<!-- Theme Toggle Light/Dark Mode -->
|
||||
<v-btn-toggle v-model="activeTheme" mandatory border inset rounded="lg" density="compact">
|
||||
|
||||
<v-tooltip text="Light Theme" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" icon="mdi-weather-sunny" size="x-small" class="px-4" @click="toggleTheme('light')"
|
||||
aria-label="Toggle Light Theme">
|
||||
</v-btn>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props" icon="mdi-weather-sunny" size="x-small" class="px-4" aria-label="Toggle Light Theme"
|
||||
@click="toggleTheme('light')"
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Dark Theme" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" icon="mdi-weather-night" size="x-small" class="px-4" @click="toggleTheme('dark')"
|
||||
aria-label="Toggle Dark Theme">
|
||||
</v-btn>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props" icon="mdi-weather-night" size="x-small" class="px-4" aria-label="Toggle Dark Theme"
|
||||
@click="toggleTheme('dark')"
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
</v-btn-toggle>
|
||||
|
||||
<v-menu offset-y class="rounded-xl">
|
||||
<template #activator="{ props }">
|
||||
<!-- Account Dropdown Button -->
|
||||
<v-btn v-bind="props" variant="outlined" color="default" density="comfortable" class="ml-3 mr-1">
|
||||
<template v-slot:append>
|
||||
<v-icon icon="mdi-chevron-down"></v-icon>
|
||||
<template #append>
|
||||
<v-icon icon="mdi-chevron-down" />
|
||||
</template>
|
||||
Admin
|
||||
</v-btn>
|
||||
@ -51,9 +50,8 @@
|
||||
|
||||
<!-- My Account Menu -->
|
||||
<v-list class="px-1">
|
||||
|
||||
<v-list-item rounded="lg">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-satellite.svg" width="16" alt="Satellite">
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 ml-3">Satellite</v-list-item-title>
|
||||
@ -62,42 +60,36 @@
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="mt-2 mb-1"></v-divider>
|
||||
<v-divider class="mt-2 mb-1" />
|
||||
|
||||
<v-list-item rounded="lg" link router-link to="/admin-settings">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-settings.svg" width="16" alt="Settings">
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 ml-3">Settings</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item rounded="lg" link>
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-logout.svg" width="16" alt="Log Out">
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 ml-3">
|
||||
Sign Out
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
</template>
|
||||
|
||||
</v-app-bar>
|
||||
|
||||
<v-navigation-drawer v-model="drawer" color="surface">
|
||||
<v-sheet>
|
||||
<v-list class="px-2" variant="flat">
|
||||
|
||||
<v-list-item link class="pa-4 rounded-lg">
|
||||
<v-menu activator="parent" location="end" transition="scale-transition">
|
||||
|
||||
<v-list class="pa-2">
|
||||
|
||||
<v-list-item link rounded="lg" active>
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-check-color.svg" alt="Selected Project">
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 font-weight-bold ml-3">
|
||||
@ -123,20 +115,19 @@
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider class="my-2"></v-divider>
|
||||
<v-divider class="my-2" />
|
||||
|
||||
<v-list-item link rounded="lg">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-settings.svg" alt="Satellite Settings">
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 ml-3">
|
||||
Satellite Settings
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-satellite.svg" alt="Satellite">
|
||||
</template>
|
||||
<v-list-item-title link class="text-body-2 ml-3">
|
||||
@ -145,13 +136,13 @@
|
||||
<v-list-item-subtitle class="ml-3">
|
||||
North America US1
|
||||
</v-list-item-subtitle>
|
||||
<template v-slot:append>
|
||||
<template #append>
|
||||
<img src="@/assets/icon-right.svg" alt="Project" width="10">
|
||||
</template>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item link router-link to="/dashboard" class="my-1 py-3" rounded="lg">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-dashboard.svg" alt="Dashboard">
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 ml-3">
|
||||
@ -160,7 +151,7 @@
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item link router-link to="/accounts" class="my-1" rounded="lg">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-team.svg" alt="Accounts">
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 ml-3">
|
||||
@ -169,26 +160,60 @@
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item link router-link to="/projects" class="my-1" rounded="lg">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<img src="@/assets/icon-project.svg" alt="Projects">
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2 ml-3">
|
||||
Projects
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
</v-list>
|
||||
</v-sheet>
|
||||
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useTheme } from 'vuetify'
|
||||
<script lang="ts">
|
||||
import {
|
||||
VAppBar,
|
||||
VAppBarNavIcon,
|
||||
VAppBarTitle,
|
||||
VImg,
|
||||
VMenu,
|
||||
VBtnToggle,
|
||||
VBtn,
|
||||
VTooltip,
|
||||
VIcon,
|
||||
VList,
|
||||
VListItem,
|
||||
VListItemTitle,
|
||||
VListItemSubtitle,
|
||||
VDivider,
|
||||
VNavigationDrawer,
|
||||
VSheet,
|
||||
} from 'vuetify/components';
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VAppBar,
|
||||
VAppBarNavIcon,
|
||||
VAppBarTitle,
|
||||
VImg,
|
||||
VMenu,
|
||||
VBtnToggle,
|
||||
VBtn,
|
||||
VTooltip,
|
||||
VIcon,
|
||||
VList,
|
||||
VListItem,
|
||||
VListItemTitle,
|
||||
VListItemSubtitle,
|
||||
VDivider,
|
||||
VNavigationDrawer,
|
||||
VSheet,
|
||||
},
|
||||
setup() {
|
||||
const theme = useTheme()
|
||||
const theme = useTheme();
|
||||
return {
|
||||
theme,
|
||||
toggleTheme: (newTheme) => {
|
||||
@ -197,8 +222,8 @@ export default {
|
||||
}
|
||||
theme.global.name.value = newTheme;
|
||||
localStorage.setItem('theme', newTheme); // Store the selected theme in localStorage
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
data: () => ({
|
||||
drawer: true,
|
||||
@ -208,13 +233,13 @@ export default {
|
||||
watch: {
|
||||
'theme.global.current.value.dark': function (newVal) {
|
||||
this.activeTheme = newVal ? 1 : 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// Check for stored theme in localStorage. If none, default to 'light'
|
||||
const storedTheme = localStorage.getItem('theme') || 'light';
|
||||
this.toggleTheme(storedTheme);
|
||||
this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -8,7 +8,9 @@
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultBar from './AppBar.vue'
|
||||
import DefaultView from './View.vue'
|
||||
<script setup lang="ts">
|
||||
import { VApp } from 'vuetify/components';
|
||||
|
||||
import DefaultBar from './AppBar.vue';
|
||||
import DefaultView from './View.vue';
|
||||
</script>
|
||||
|
||||
@ -7,6 +7,8 @@
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultView from './View.vue'
|
||||
<script setup lang="ts">
|
||||
import { VApp } from 'vuetify/components';
|
||||
|
||||
import DefaultView from './View.vue';
|
||||
</script>
|
||||
|
||||
@ -7,6 +7,6 @@
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//
|
||||
<script setup lang="ts">
|
||||
import { VMain } from 'vuetify/components';
|
||||
</script>
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/**
|
||||
* main.js
|
||||
*
|
||||
* Bootstraps Vuetify and other plugins then mounts the App`
|
||||
*/
|
||||
|
||||
// Components
|
||||
import App from './App.vue'
|
||||
|
||||
// Composables
|
||||
import { createApp } from 'vue'
|
||||
|
||||
// Plugins
|
||||
import { registerPlugins } from '@/plugins'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
registerPlugins(app)
|
||||
|
||||
app.mount('#app')
|
||||
22
satellite/admin/back-office/ui/src/main.ts
Normal file
22
satellite/admin/back-office/ui/src/main.ts
Normal file
@ -0,0 +1,22 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/**
|
||||
* main.ts
|
||||
*
|
||||
* Bootstraps Vuetify and other plugins then mounts the App`
|
||||
*/
|
||||
|
||||
// Components
|
||||
import { createApp } from 'vue';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
// Plugins
|
||||
import { registerPlugins } from '@/plugins';
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
registerPlugins(app);
|
||||
|
||||
app.mount('#app');
|
||||
@ -1,22 +0,0 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/**
|
||||
* plugins/index.js
|
||||
*
|
||||
* Automatically included in `./src/main.js`
|
||||
*/
|
||||
|
||||
// Plugins
|
||||
// import { loadFonts } from './webfontloader'
|
||||
import vuetify from './vuetify'
|
||||
import pinia from '../store'
|
||||
import router from '../router'
|
||||
|
||||
export function registerPlugins (app) {
|
||||
// loadFonts()
|
||||
app
|
||||
.use(vuetify)
|
||||
.use(router)
|
||||
.use(pinia)
|
||||
}
|
||||
23
satellite/admin/back-office/ui/src/plugins/index.ts
Normal file
23
satellite/admin/back-office/ui/src/plugins/index.ts
Normal file
@ -0,0 +1,23 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/**
|
||||
* plugins/index.ts
|
||||
*
|
||||
* Automatically included in `./src/main.ts`
|
||||
*/
|
||||
|
||||
// Plugins
|
||||
// import { loadFonts } from './webfontloader'
|
||||
import pinia from '../store';
|
||||
import router from '../router';
|
||||
|
||||
import vuetify from './vuetify';
|
||||
|
||||
export function registerPlugins (app) {
|
||||
// loadFonts()
|
||||
app
|
||||
.use(vuetify)
|
||||
.use(router)
|
||||
.use(pinia);
|
||||
}
|
||||
@ -1,103 +0,0 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/**
|
||||
* plugins/vuetify.js
|
||||
*
|
||||
* Framework documentation: https://vuetifyjs.com`
|
||||
*/
|
||||
|
||||
// Styles
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
import 'vuetify/styles'
|
||||
|
||||
// Inter Font using FontSource
|
||||
import '@fontsource-variable/inter';
|
||||
|
||||
// Composables
|
||||
import { createVuetify } from 'vuetify'
|
||||
|
||||
// Data Table
|
||||
import { VDataTable } from 'vuetify/labs/VDataTable'
|
||||
|
||||
// Matrial Design 3
|
||||
import { md3 } from 'vuetify/blueprints'
|
||||
|
||||
// Storj Styles
|
||||
import '../styles/styles.scss'
|
||||
|
||||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||
export default createVuetify({
|
||||
// Use blueprint for Material Design 3
|
||||
blueprint: md3,
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
colors: {
|
||||
primary: '#0149FF',
|
||||
secondary: '#0218A7',
|
||||
background: '#F9F9F9',
|
||||
surface: '#FFF',
|
||||
info: '#537CFF',
|
||||
success: '#00AC26',
|
||||
warning: '#FF8A00',
|
||||
error: '#FF0149',
|
||||
pink: '#FF458B',
|
||||
purple: '#502EFF',
|
||||
yellow: '#FFC600',
|
||||
orange: '#FFA800',
|
||||
green: '#00B150',
|
||||
grey: '#F1F1F1',
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
colors: {
|
||||
primary: '#0149FF',
|
||||
secondary: '#537CFF',
|
||||
background: '#0d1116',
|
||||
surface: '#0d1116',
|
||||
warning: '#FF8A00',
|
||||
error: '#FF0149',
|
||||
pink: '#FF458B',
|
||||
purple: '#502EFF',
|
||||
yellow: '#FFC600',
|
||||
orange: '#FFA800',
|
||||
green: '#00B150',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
VDataTable,
|
||||
},
|
||||
defaults: {
|
||||
global: {
|
||||
// ripple: false,
|
||||
},
|
||||
VDataTable: {
|
||||
fixedHeader: true,
|
||||
noDataText: 'Results not found',
|
||||
},
|
||||
VBtn: {
|
||||
density: 'default',
|
||||
rounded: 'lg',
|
||||
class: 'text-capitalize font-weight-bold',
|
||||
style: 'letter-spacing:0;'
|
||||
},
|
||||
VDataTable: {
|
||||
},
|
||||
VTooltip: {
|
||||
transition: 'fade-transition',
|
||||
},
|
||||
VChip: {
|
||||
rounded: 'lg',
|
||||
},
|
||||
VSelect: {
|
||||
rounded: 'lg',
|
||||
},
|
||||
VTextField: {
|
||||
rounded: 'lg',
|
||||
variant: 'outlined',
|
||||
}
|
||||
},
|
||||
})
|
||||
87
satellite/admin/back-office/ui/src/plugins/vuetify.ts
Normal file
87
satellite/admin/back-office/ui/src/plugins/vuetify.ts
Normal file
@ -0,0 +1,87 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/**
|
||||
* plugins/vuetify.ts
|
||||
*
|
||||
* Framework documentation: https://vuetifyjs.com`
|
||||
*/
|
||||
|
||||
import '@mdi/font/css/materialdesignicons.css';
|
||||
import 'vuetify/styles';
|
||||
import '@fontsource-variable/inter';
|
||||
import { createVuetify } from 'vuetify';
|
||||
import { md3 } from 'vuetify/blueprints';
|
||||
|
||||
import '../styles/styles.scss';
|
||||
|
||||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||
export default createVuetify({
|
||||
// Use blueprint for Material Design 3
|
||||
blueprint: md3,
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
colors: {
|
||||
primary: '#0149FF',
|
||||
secondary: '#0218A7',
|
||||
background: '#F9F9F9',
|
||||
surface: '#FFF',
|
||||
info: '#537CFF',
|
||||
success: '#00AC26',
|
||||
warning: '#FF8A00',
|
||||
error: '#FF0149',
|
||||
pink: '#FF458B',
|
||||
purple: '#502EFF',
|
||||
yellow: '#FFC600',
|
||||
orange: '#FFA800',
|
||||
green: '#00B150',
|
||||
grey: '#F1F1F1',
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
colors: {
|
||||
primary: '#0149FF',
|
||||
secondary: '#537CFF',
|
||||
background: '#0d1116',
|
||||
surface: '#0d1116',
|
||||
warning: '#FF8A00',
|
||||
error: '#FF0149',
|
||||
pink: '#FF458B',
|
||||
purple: '#502EFF',
|
||||
yellow: '#FFC600',
|
||||
orange: '#FFA800',
|
||||
green: '#00B150',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
defaults: {
|
||||
global: {
|
||||
// ripple: false,
|
||||
},
|
||||
VDataTable: {
|
||||
fixedHeader: true,
|
||||
noDataText: 'Results not found',
|
||||
},
|
||||
VBtn: {
|
||||
density: 'default',
|
||||
rounded: 'lg',
|
||||
class: 'text-capitalize font-weight-bold',
|
||||
style: 'letter-spacing:0;',
|
||||
},
|
||||
VTooltip: {
|
||||
transition: 'fade-transition',
|
||||
},
|
||||
VChip: {
|
||||
rounded: 'lg',
|
||||
},
|
||||
VSelect: {
|
||||
rounded: 'lg',
|
||||
},
|
||||
VTextField: {
|
||||
rounded: 'lg',
|
||||
variant: 'outlined',
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -1,18 +0,0 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/**
|
||||
* plugins/webfontloader.js
|
||||
*
|
||||
* webfontloader documentation: https://github.com/typekit/webfontloader
|
||||
*/
|
||||
|
||||
export async function loadFonts () {
|
||||
const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader')
|
||||
|
||||
webFontLoader.load({
|
||||
google: {
|
||||
families: ['Inter:400,500,700&display=swap'],
|
||||
},
|
||||
})
|
||||
}
|
||||
18
satellite/admin/back-office/ui/src/plugins/webfontloader.ts
Normal file
18
satellite/admin/back-office/ui/src/plugins/webfontloader.ts
Normal file
@ -0,0 +1,18 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/**
|
||||
* plugins/webfontloader.ts
|
||||
*
|
||||
* webfontloader documentation: https://github.com/typekit/webfontloader
|
||||
*/
|
||||
|
||||
export async function loadFonts () {
|
||||
const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader');
|
||||
|
||||
webFontLoader.load({
|
||||
google: {
|
||||
families: ['Inter:400,500,700&display=swap'],
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -1,68 +0,0 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
// Composables
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/login', // directly redirect
|
||||
component: () => import('@/layouts/default/Login.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import(/* webpackChunkName: "Login" */ '@/views/Login.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
component: () => import('@/layouts/default/Default.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import(/* webpackChunkName: "Dashboard" */ '@/views/Dashboard.vue'),
|
||||
},
|
||||
{
|
||||
path: '/accounts',
|
||||
name: 'Accounts',
|
||||
component: () => import(/* webpackChunkName: "Users" */ '@/views/Accounts.vue'),
|
||||
},
|
||||
{
|
||||
path: '/account-details',
|
||||
name: 'Account Details',
|
||||
component: () => import(/* webpackChunkName: "AccountDetails" */ '@/views/AccountDetails.vue'),
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
name: 'Projects',
|
||||
component: () => import(/* webpackChunkName: "Projects" */ '@/views/Projects.vue'),
|
||||
},
|
||||
{
|
||||
path: '/project-details',
|
||||
name: 'Project Details',
|
||||
component: () => import(/* webpackChunkName: "ProjectDetails" */ '@/views/ProjectDetails.vue'),
|
||||
},
|
||||
{
|
||||
path: '/bucket-details',
|
||||
name: 'Bucket Details',
|
||||
component: () => import(/* webpackChunkName: "BucketDetails" */ '@/views/BucketDetails.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin-settings',
|
||||
name: 'Admin Settings',
|
||||
component: () => import(/* webpackChunkName: "AdminSettings" */ '@/views/AdminSettings.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.NODE_ENV === 'production' ? '/back-office/' : process.env.BASE_URL),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
68
satellite/admin/back-office/ui/src/router/index.ts
Normal file
68
satellite/admin/back-office/ui/src/router/index.ts
Normal file
@ -0,0 +1,68 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
// Composables
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/login', // directly redirect
|
||||
component: () => import('@/layouts/default/Login.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import(/* webpackChunkName: "Login" */ '@/views/Login.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
component: () => import('@/layouts/default/Default.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import(/* webpackChunkName: "Dashboard" */ '@/views/Dashboard.vue'),
|
||||
},
|
||||
{
|
||||
path: '/accounts',
|
||||
name: 'Accounts',
|
||||
component: () => import(/* webpackChunkName: "Users" */ '@/views/Accounts.vue'),
|
||||
},
|
||||
{
|
||||
path: '/account-details',
|
||||
name: 'Account Details',
|
||||
component: () => import(/* webpackChunkName: "AccountDetails" */ '@/views/AccountDetails.vue'),
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
name: 'Projects',
|
||||
component: () => import(/* webpackChunkName: "Projects" */ '@/views/Projects.vue'),
|
||||
},
|
||||
{
|
||||
path: '/project-details',
|
||||
name: 'Project Details',
|
||||
component: () => import(/* webpackChunkName: "ProjectDetails" */ '@/views/ProjectDetails.vue'),
|
||||
},
|
||||
{
|
||||
path: '/bucket-details',
|
||||
name: 'Bucket Details',
|
||||
component: () => import(/* webpackChunkName: "BucketDetails" */ '@/views/BucketDetails.vue'),
|
||||
},
|
||||
{
|
||||
path: '/admin-settings',
|
||||
name: 'Admin Settings',
|
||||
component: () => import(/* webpackChunkName: "AdminSettings" */ '@/views/AdminSettings.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(process.env.NODE_ENV === 'production' ? '/back-office/' : process.env.BASE_URL),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -2,10 +2,10 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
// Utilities
|
||||
import { defineStore } from 'pinia'
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useAppStore = defineStore('app', {
|
||||
state: () => ({
|
||||
//
|
||||
}),
|
||||
})
|
||||
});
|
||||
@ -2,6 +2,6 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
// Utilities
|
||||
import { createPinia } from 'pinia'
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
export default createPinia()
|
||||
export default createPinia();
|
||||
11
satellite/admin/back-office/ui/src/types/vue.d.ts
vendored
Normal file
11
satellite/admin/back-office/ui/src/types/vue.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
// Copyright (C) 2023 Storj Labs, Inc.
|
||||
// See LICENSE for copying information.
|
||||
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue';
|
||||
// eslint-disable-next-line
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="8">
|
||||
<PageTitleComponent title="Account Details" />
|
||||
@ -11,11 +10,12 @@
|
||||
<v-tooltip activator="parent" location="top">
|
||||
This account
|
||||
</v-tooltip>
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
itacker@gmail.com
|
||||
@ -27,12 +27,11 @@
|
||||
Account created: 24 Apr 2020
|
||||
</v-tooltip>
|
||||
</v-chip>
|
||||
|
||||
</v-col>
|
||||
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
|
||||
<v-btn>
|
||||
<template v-slot:append>
|
||||
<v-icon icon="mdi-chevron-down"></v-icon>
|
||||
<template #append>
|
||||
<v-icon icon="mdi-chevron-down" />
|
||||
</template>
|
||||
Account Actions
|
||||
<AccountActionsMenu />
|
||||
@ -50,7 +49,7 @@
|
||||
Pro account since: 2 May 2022
|
||||
</v-tooltip>
|
||||
</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
Edit Account Information
|
||||
<AccountInformationDialog />
|
||||
@ -65,7 +64,7 @@
|
||||
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
|
||||
Active
|
||||
</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
Set Account Status
|
||||
<AccountStatusDialog />
|
||||
@ -75,12 +74,11 @@
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
|
||||
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
|
||||
<v-card-text>
|
||||
<!-- <p class="mb-3">Attribution</p> -->
|
||||
<v-chip variant="tonal" class="mr-2">Company</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
Set Value Attribution
|
||||
<AccountUserAgentsDialog />
|
||||
@ -96,7 +94,7 @@
|
||||
<v-chip variant="tonal" class="mr-2">
|
||||
Global
|
||||
</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
Set Account Placement
|
||||
<AccountGeofenceDialog />
|
||||
@ -104,7 +102,6 @@
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
@ -135,18 +132,27 @@
|
||||
<LogsTableComponent />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VChip,
|
||||
VTooltip,
|
||||
VIcon,
|
||||
VCard,
|
||||
VCardText,
|
||||
VDivider,
|
||||
VBtn,
|
||||
} from 'vuetify/components';
|
||||
|
||||
import PageTitleComponent from '@/components/PageTitleComponent.vue';
|
||||
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
|
||||
import UsageProgressComponent from '@/components/UsageProgressComponent.vue';
|
||||
import AccountProjectsTableComponent from '@/components/AccountProjectsTableComponent.vue';
|
||||
import LogsTableComponent from '@/components/LogsTableComponent.vue';
|
||||
import AccountActionsMenu from '@/components/AccountActionsMenu.vue';
|
||||
import AccountLimitsDialog from '@/components/AccountLimitsDialog.vue';
|
||||
import AccountUserAgentsDialog from '@/components/AccountUserAgentsDialog.vue';
|
||||
import AccountGeofenceDialog from '@/components/AccountGeofenceDialog.vue';
|
||||
import AccountInformationDialog from '@/components/AccountInformationDialog.vue';
|
||||
@ -155,27 +161,34 @@ import CardStatsComponent from '@/components/CardStatsComponent.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VChip,
|
||||
VTooltip,
|
||||
VIcon,
|
||||
VCard,
|
||||
VCardText,
|
||||
VDivider,
|
||||
VBtn,
|
||||
PageTitleComponent,
|
||||
PageSubtitleComponent,
|
||||
UsageProgressComponent,
|
||||
AccountProjectsTableComponent,
|
||||
LogsTableComponent,
|
||||
AccountActionsMenu,
|
||||
AccountLimitsDialog,
|
||||
AccountUserAgentsDialog,
|
||||
AccountGeofenceDialog,
|
||||
AccountInformationDialog,
|
||||
AccountStatusDialog,
|
||||
CardStatsComponent
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Storj Admin - Account Details";
|
||||
CardStatsComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
valid: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
mounted() {
|
||||
document.title = 'Storj Admin - Account Details';
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
|
||||
<template>
|
||||
<v-container fluid>
|
||||
|
||||
<v-row>
|
||||
|
||||
<v-col cols="6">
|
||||
<PageTitleComponent title="Accounts" />
|
||||
<PageSubtitleComponent subtitle="All accounts on North America US1." />
|
||||
@ -16,13 +14,13 @@
|
||||
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
New Account
|
||||
<NewAccountDialog />
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
<!-- <v-row class="d-flex align-center justify-center mt-2">
|
||||
@ -47,34 +45,37 @@
|
||||
</v-row> -->
|
||||
|
||||
<AccountsTableComponent class="my-5" />
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
|
||||
|
||||
import PageTitleComponent from '@/components/PageTitleComponent.vue';
|
||||
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
|
||||
import AccountsTableComponent from '@/components/AccountsTableComponent.vue';
|
||||
import CardStatsComponent from '@/components/CardStatsComponent.vue';
|
||||
import NewAccountDialog from '@/components/NewAccountDialog.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VBtn,
|
||||
PageTitleComponent,
|
||||
PageSubtitleComponent,
|
||||
AccountsTableComponent,
|
||||
CardStatsComponent,
|
||||
NewAccountDialog
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Storj Admin - Accounts";
|
||||
NewAccountDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
valid: false,
|
||||
search: '',
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
mounted() {
|
||||
document.title = 'Storj Admin - Accounts';
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<PageTitleComponent title="Admin Settings" />
|
||||
@ -12,12 +11,11 @@
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card title="Account" subtitle="Tome Boshevski" variant="flat" :border="true" rounded="xlg">
|
||||
<v-card-text>
|
||||
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">tome@storj.io</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
Edit
|
||||
<AdminAccountDialog />
|
||||
@ -30,7 +28,7 @@
|
||||
<v-card title="Role" subtitle="Account Type" variant="flat" :border="true" rounded="xlg">
|
||||
<v-card-text>
|
||||
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">Admin</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
Edit
|
||||
</v-btn>
|
||||
@ -42,32 +40,49 @@
|
||||
<v-card title="Security" subtitle="Two-factor Authentication" variant="flat" :border="true" rounded="xlg">
|
||||
<v-card-text>
|
||||
<v-chip color="default" variant="tonal" class="mr-2 font-weight-medium">Disabled</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn size="small" color="primary">
|
||||
Enable 2FA
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VCard,
|
||||
VCardText,
|
||||
VChip,
|
||||
VDivider,
|
||||
VBtn,
|
||||
} from 'vuetify/components';
|
||||
|
||||
import PageTitleComponent from '@/components/PageTitleComponent.vue';
|
||||
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
|
||||
import AdminAccountDialog from '@/components/AdminAccountDialog.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VCard,
|
||||
VCardText,
|
||||
VChip,
|
||||
VDivider,
|
||||
VBtn,
|
||||
PageTitleComponent,
|
||||
PageSubtitleComponent,
|
||||
AdminAccountDialog
|
||||
AdminAccountDialog,
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Storj Admin Settings";
|
||||
}
|
||||
}
|
||||
document.title = 'Storj Admin Settings';
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,21 +3,20 @@
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="8">
|
||||
|
||||
<PageTitleComponent title="Bucket Details" />
|
||||
|
||||
<v-chip variant="outlined" color="default" class="mr-2 mb-2 mb-md-0 pr-4" router-link to="/account-details">
|
||||
<v-tooltip activator="parent" location="top">
|
||||
Go to account
|
||||
</v-tooltip>
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
itacker@gmail.com
|
||||
@ -29,11 +28,12 @@
|
||||
<v-tooltip activator="parent" location="top">
|
||||
Go to project
|
||||
</v-tooltip>
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
56F82SR21Q284
|
||||
@ -42,11 +42,12 @@
|
||||
<img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
|
||||
|
||||
<v-chip class="mr-2 mr-2 mb-2 mb-md-0 font-weight-medium pr-4" variant="tonal" color="default">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M23.3549 14.5467C24.762 15.9538 24.7748 18.227 23.3778 19.624C22.8117 20.1901 22.1018 20.5247 21.3639 20.6289L21.1106 22.0638C21.092 23.1897 18.7878 24.1 15.9481 24.1C13.1254 24.1 10.8319 23.2006 10.7863 22.0841L10.7858 22.0638L8.84466 11.066C8.82281 10.9882 8.80883 10.9095 8.80304 10.8299L8.8 10.8122L8.8019 10.8123C8.80063 10.7903 8.8 10.7682 8.8 10.746C8.8 9.17422 12.0003 7.90002 15.9481 7.90002C19.8959 7.90002 23.0962 9.17422 23.0962 10.746C23.0962 10.7682 23.0955 10.7903 23.0943 10.8123L23.0962 10.8122L23.093 10.8311C23.0872 10.9098 23.0734 10.9876 23.0519 11.0645L22.5749 13.7666L23.3549 14.5467ZM21.2962 12.6344C19.9867 13.2218 18.076 13.592 15.9481 13.592C13.8203 13.592 11.9096 13.2219 10.6001 12.6344L12.0072 20.6077L12.2373 21.8286L12.2586 21.8452C12.3789 21.9354 12.5652 22.0371 12.807 22.1351L12.8561 22.1546C13.6355 22.4594 14.7462 22.6439 15.9481 22.6439C17.1569 22.6439 18.2733 22.4573 19.0528 22.1497C19.3337 22.0388 19.5431 21.9223 19.6661 21.8231L19.6761 21.8148L19.9019 20.5348C19.3338 20.3787 18.7955 20.0812 18.3429 19.6429L18.3004 19.6011L15.3749 16.6756C15.0906 16.3913 15.0906 15.9303 15.3749 15.646C15.6523 15.3686 16.0978 15.3618 16.3834 15.6257L16.4045 15.646L19.33 18.5715C19.5717 18.8132 19.8555 18.9861 20.1569 19.0901L21.2962 12.6344ZM22.2661 15.517L21.6408 19.0597C21.8989 18.9575 22.1402 18.8024 22.3482 18.5944C23.1641 17.7784 23.1664 16.4494 22.355 15.6065L22.3253 15.5763L22.2661 15.517ZM15.9481 9.35612C14.2013 9.35612 12.5813 9.62893 11.4322 10.0864C10.9385 10.283 10.5712 10.4995 10.3598 10.6985C10.3463 10.7112 10.334 10.7232 10.3228 10.7347L10.3122 10.7459L10.3314 10.7661L10.3598 10.7936C10.5712 10.9926 10.9385 11.2091 11.4322 11.4056C12.5813 11.8631 14.2013 12.1359 15.9481 12.1359C17.6949 12.1359 19.3149 11.8631 20.4639 11.4056C20.9577 11.2091 21.325 10.9926 21.5364 10.7936C21.5499 10.7809 21.5622 10.7688 21.5733 10.7574L21.5841 10.7459L21.5647 10.726L21.5364 10.6985C21.325 10.4995 20.9577 10.283 20.4639 10.0864C19.3149 9.62893 17.6949 9.35612 15.9481 9.35612Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
Backups
|
||||
@ -59,8 +60,8 @@
|
||||
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
|
||||
<v-btn>
|
||||
Bucket Actions
|
||||
<template v-slot:append>
|
||||
<v-icon icon="mdi-chevron-down"></v-icon>
|
||||
<template #append>
|
||||
<v-icon icon="mdi-chevron-down" />
|
||||
</template>
|
||||
<BucketActionsMenu />
|
||||
</v-btn>
|
||||
@ -77,7 +78,7 @@
|
||||
Pro account since: 2 May 2022
|
||||
</v-tooltip>
|
||||
</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default" class="mr-2">
|
||||
Edit Bucket Information
|
||||
<BucketInformationDialog />
|
||||
@ -90,7 +91,7 @@
|
||||
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
|
||||
<v-card-text>
|
||||
<v-chip color="default" variant="tonal" class="mr-2">Company</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
<BucketUserAgentsDialog />
|
||||
Set Value Attribution
|
||||
@ -105,7 +106,7 @@
|
||||
<v-chip color="default" variant="tonal" class="mr-2">
|
||||
Global
|
||||
</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
<BucketGeofenceDialog />
|
||||
Set Bucket Placement
|
||||
@ -126,16 +127,25 @@
|
||||
<CardStatsComponent title="Segments" subtitle="Total" data="241,721" variant="tonal" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VChip,
|
||||
VTooltip,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VCard,
|
||||
VCardText,
|
||||
VDivider,
|
||||
} from 'vuetify/components';
|
||||
|
||||
import PageTitleComponent from '@/components/PageTitleComponent.vue';
|
||||
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
|
||||
import LogsTableComponent from '@/components/LogsTableComponent.vue';
|
||||
import BucketActionsMenu from '@/components/BucketActionsMenu.vue';
|
||||
import BucketDeleteDialog from '@/components/BucketDeleteDialog.vue';
|
||||
import BucketGeofenceDialog from '@/components/BucketGeofenceDialog.vue';
|
||||
import BucketUserAgentsDialog from '@/components/BucketUserAgentsDialog.vue';
|
||||
import BucketInformationDialog from '@/components/BucketInformationDialog.vue';
|
||||
@ -143,24 +153,31 @@ import CardStatsComponent from '@/components/CardStatsComponent.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VChip,
|
||||
VTooltip,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VCard,
|
||||
VCardText,
|
||||
VDivider,
|
||||
PageTitleComponent,
|
||||
PageSubtitleComponent,
|
||||
LogsTableComponent,
|
||||
BucketActionsMenu,
|
||||
BucketDeleteDialog,
|
||||
BucketGeofenceDialog,
|
||||
BucketUserAgentsDialog,
|
||||
BucketInformationDialog,
|
||||
CardStatsComponent
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Storj Admin - Bucket Details";
|
||||
CardStatsComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
valid: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
mounted() {
|
||||
document.title = 'Storj Admin - Bucket Details';
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,22 +3,27 @@
|
||||
|
||||
<template>
|
||||
<v-container fluid>
|
||||
|
||||
<PageTitleComponent title="Dashboard" />
|
||||
<PageSubtitleComponent subtitle="Welcome to the Storj Admin UI for North America US1." />
|
||||
|
||||
<v-row class="d-flex align-center justify-center mt-2">
|
||||
<v-col cols="12" sm="6" md="4" lg="2">
|
||||
<CardStatsComponent title="All Accounts" subtitle="Satellite Total" data="218,748" color="default" router-link
|
||||
to="/accounts" />
|
||||
<CardStatsComponent
|
||||
title="All Accounts" subtitle="Satellite Total" data="218,748" color="default" router-link
|
||||
to="/accounts"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4" lg="2">
|
||||
<CardStatsComponent title="Enterprise" subtitle="Accounts" data="3,405" color="default" router-link
|
||||
to="/accounts" />
|
||||
<CardStatsComponent
|
||||
title="Enterprise" subtitle="Accounts" data="3,405" color="default" router-link
|
||||
to="/accounts"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4" lg="2">
|
||||
<CardStatsComponent title="Priority" subtitle="Accounts" data="5,224" color="default" router-link
|
||||
to="/accounts" />
|
||||
<CardStatsComponent
|
||||
title="Priority" subtitle="Accounts" data="5,224" color="default" router-link
|
||||
to="/accounts"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="4" lg="2">
|
||||
<CardStatsComponent title="Pro" subtitle="Accounts" data="82,386" color="default" router-link to="/accounts" />
|
||||
@ -34,16 +39,17 @@
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-card title="Limits" subtitle="Projects with more than 80% usage." border rounded="xlg">
|
||||
<v-divider class="mb-1"></v-divider>
|
||||
<v-divider class="mb-1" />
|
||||
<DashboardLimitsTableComponent />
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VContainer, VRow, VCol, VCard, VDivider } from 'vuetify/components';
|
||||
|
||||
import PageTitleComponent from '@/components/PageTitleComponent.vue';
|
||||
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
|
||||
import CardStatsComponent from '@/components/CardStatsComponent.vue';
|
||||
@ -51,13 +57,18 @@ import DashboardLimitsTableComponent from '@/components/DashboardLimitsTableComp
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VCard,
|
||||
VDivider,
|
||||
PageTitleComponent,
|
||||
PageSubtitleComponent,
|
||||
CardStatsComponent,
|
||||
DashboardLimitsTableComponent
|
||||
DashboardLimitsTableComponent,
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Storj Admin - Dashboard";
|
||||
document.title = 'Storj Admin - Dashboard';
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -3,7 +3,6 @@
|
||||
|
||||
<template>
|
||||
<v-app-bar :elevation="0">
|
||||
|
||||
<v-app-bar-title class="ml-4 mr-1">
|
||||
<router-link to="/dashboard">
|
||||
<v-img v-if="theme.global.current.value.dark" src="@/assets/logo-dark.svg" width="172" alt="Storj Logo" />
|
||||
@ -11,38 +10,28 @@
|
||||
</router-link>
|
||||
</v-app-bar-title>
|
||||
|
||||
<template v-slot:append>
|
||||
|
||||
<v-menu offset-y class="rounded-xl">
|
||||
|
||||
<template v-slot:activator="{ props }">
|
||||
<template #append>
|
||||
<!-- Theme Toggle Light/Dark Mode -->
|
||||
<v-btn-toggle v-model="activeTheme" mandatory border inset rounded="lg" density="compact">
|
||||
|
||||
<v-tooltip text="Light Theme" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" icon="mdi-weather-sunny" size="x-small" class="px-4" @click="toggleTheme('light')"
|
||||
aria-label="Toggle Light Theme">
|
||||
</v-btn>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props" icon="mdi-weather-sunny" size="x-small" class="px-4" aria-label="Toggle Light Theme"
|
||||
@click="toggleTheme('light')"
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
<v-tooltip text="Dark Theme" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn v-bind="props" icon="mdi-weather-night" size="x-small" class="px-4" @click="toggleTheme('dark')"
|
||||
aria-label="Toggle Dark Theme">
|
||||
</v-btn>
|
||||
<template #activator="{ props }">
|
||||
<v-btn
|
||||
v-bind="props" icon="mdi-weather-night" size="x-small" class="px-4" aria-label="Toggle Dark Theme"
|
||||
@click="toggleTheme('dark')"
|
||||
/>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
|
||||
</v-btn-toggle>
|
||||
|
||||
</template>
|
||||
|
||||
</v-menu>
|
||||
|
||||
</template>
|
||||
|
||||
</v-app-bar>
|
||||
|
||||
<v-container>
|
||||
@ -52,9 +41,11 @@
|
||||
<v-card-text>
|
||||
<h2 class="my-1">Select a satellite</h2>
|
||||
<p>to continue to Storj Admin</p>
|
||||
<v-select label="Satellite" v-model="selectedSatellite" placeholder="Select a satellite"
|
||||
<v-select
|
||||
v-model="selectedSatellite" label="Satellite" placeholder="Select a satellite"
|
||||
:items="['North America US1', 'Europe EU1', 'Asia-Pacific AP1']" variant="outlined" class="mt-5" autofocus
|
||||
required></v-select>
|
||||
required
|
||||
/>
|
||||
<v-btn block size="large" link router-link to="/accounts" :disabled="!selectedSatellite">Continue</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@ -63,12 +54,40 @@
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useTheme } from 'vuetify'
|
||||
<script lang="ts">
|
||||
import { useTheme } from 'vuetify';
|
||||
import {
|
||||
VAppBar,
|
||||
VAppBarTitle,
|
||||
VImg,
|
||||
VBtnToggle,
|
||||
VTooltip,
|
||||
VBtn,
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VCard,
|
||||
VCardText,
|
||||
VSelect,
|
||||
} from 'vuetify/components';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VAppBar,
|
||||
VAppBarTitle,
|
||||
VImg,
|
||||
VBtnToggle,
|
||||
VTooltip,
|
||||
VBtn,
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VCard,
|
||||
VCardText,
|
||||
VSelect,
|
||||
},
|
||||
setup() {
|
||||
const theme = useTheme()
|
||||
const theme = useTheme();
|
||||
return {
|
||||
theme,
|
||||
toggleTheme: (newTheme) => {
|
||||
@ -77,26 +96,26 @@ export default {
|
||||
}
|
||||
theme.global.name.value = newTheme;
|
||||
localStorage.setItem('theme', newTheme); // Store the selected theme in localStorage
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Storj Admin - Login";
|
||||
};
|
||||
},
|
||||
data: () => ({
|
||||
activeTheme: null,
|
||||
selectedSatellite: "North America US1",
|
||||
selectedSatellite: 'North America US1',
|
||||
}),
|
||||
watch: {
|
||||
'theme.global.current.value.dark': function (newVal) {
|
||||
this.activeTheme = newVal ? 1 : 0;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
document.title = 'Storj Admin - Login';
|
||||
},
|
||||
created() {
|
||||
// Check for stored theme in localStorage. If none, default to 'light'
|
||||
const storedTheme = localStorage.getItem('theme') || 'light';
|
||||
this.toggleTheme(storedTheme);
|
||||
this.activeTheme = this.theme.global.current.value.dark ? 1 : 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,9 +3,7 @@
|
||||
|
||||
<template>
|
||||
<v-container>
|
||||
|
||||
<v-row>
|
||||
|
||||
<v-col cols="12" md="8">
|
||||
<PageTitleComponent title="Project Details" />
|
||||
|
||||
@ -13,11 +11,12 @@
|
||||
<v-tooltip activator="parent" location="top">
|
||||
Go to account
|
||||
</v-tooltip>
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<svg class="mr-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.1271 6C14.1058 6 15.7099 7.60408 15.7099 9.58281C15.7099 10.7701 15.1324 11.8226 14.2429 12.4745C16.0273 13.1299 17.4328 14.5717 18.0402 16.3804C18.059 16.4363 18.077 16.4925 18.0942 16.5491L18.1195 16.6342C18.2377 17.0429 18.0022 17.4701 17.5934 17.5883C17.5239 17.6084 17.4518 17.6186 17.3794 17.6186H6.764C6.34206 17.6186 6 17.2765 6 16.8545C6 16.7951 6.00695 16.7358 6.02069 16.678L6.02974 16.6434C6.05458 16.5571 6.08121 16.4714 6.10959 16.3866C6.7237 14.5517 8.15871 13.0936 9.97792 12.4495C9.10744 11.7961 8.54432 10.7552 8.54432 9.58281C8.54432 7.60408 10.1484 6 12.1271 6ZM12.076 13.2168C9.95096 13.2168 8.07382 14.5138 7.29168 16.4355L7.26883 16.4925H16.8831L16.8826 16.4916C16.1224 14.5593 14.2607 13.2444 12.1429 13.2173L12.076 13.2168ZM12.1271 7.12603C10.7703 7.12603 9.67035 8.22596 9.67035 9.58281C9.67035 10.9397 10.7703 12.0396 12.1271 12.0396C13.4839 12.0396 14.5839 10.9397 14.5839 9.58281C14.5839 8.22596 13.4839 7.12603 12.1271 7.12603Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
itacker@gmail.com
|
||||
@ -26,11 +25,12 @@
|
||||
<img src="@/assets/icon-right.svg" alt="Project" width="10" class="mr-2">
|
||||
|
||||
<v-chip class="mr-2 mr-2 mb-2 mb-md-0 pr-4 font-weight-medium" variant="tonal" color="default">
|
||||
<template v-slot:prepend>
|
||||
<template #prepend>
|
||||
<svg class="mr-1" width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M16.2231 7.08668L16.2547 7.10399L23.4149 11.2391C23.6543 11.3774 23.7829 11.6116 23.8006 11.8529L23.8021 11.8809L23.8027 11.9121V20.1078C23.8027 20.3739 23.6664 20.6205 23.4432 20.7624L23.4136 20.7803L16.2533 24.8968C16.0234 25.029 15.7426 25.0342 15.5088 24.9125L15.4772 24.8951L8.38642 20.7787C8.15725 20.6457 8.01254 20.4054 8.00088 20.1422L8 20.1078L8.00026 11.8975L8 11.8738C8.00141 11.6177 8.12975 11.3687 8.35943 11.2228L8.38748 11.2058L15.4783 7.10425C15.697 6.97771 15.9622 6.96636 16.1893 7.07023L16.2231 7.08668ZM22.251 13.2549L16.6424 16.4939V22.8832L22.251 19.6588V13.2549ZM9.55175 13.2614V19.6611L15.0908 22.8766V16.4916L9.55175 13.2614ZM15.8669 8.67182L10.2916 11.8967L15.8686 15.149L21.4755 11.9109L15.8669 8.67182Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
56F82SR21Q284
|
||||
@ -43,8 +43,8 @@
|
||||
<v-col cols="12" md="4" class="d-flex justify-start justify-md-end align-top align-md-center">
|
||||
<v-btn>
|
||||
Project Actions
|
||||
<template v-slot:append>
|
||||
<v-icon icon="mdi-chevron-down"></v-icon>
|
||||
<template #append>
|
||||
<v-icon icon="mdi-chevron-down" />
|
||||
</template>
|
||||
<ProjectActionsMenu />
|
||||
</v-btn>
|
||||
@ -56,13 +56,12 @@
|
||||
<v-card title="Project" subtitle="My First Project" variant="flat" :border="true" rounded="xlg">
|
||||
<v-card-text>
|
||||
<v-chip color="success" variant="tonal" class="mr-2 font-weight-bold">
|
||||
|
||||
Pro
|
||||
<v-tooltip activator="parent" location="top">
|
||||
Pro account since: 2 May 2022
|
||||
</v-tooltip>
|
||||
</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default" class="mr-2">
|
||||
Edit Project Information
|
||||
<ProjectInformationDialog />
|
||||
@ -75,7 +74,7 @@
|
||||
<v-card title="Value" subtitle="Attribution" variant="flat" :border="true" rounded="xlg" class="mb-3">
|
||||
<v-card-text>
|
||||
<v-chip color="default" variant="tonal" class="mr-2">Company</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
Set Value Attribution
|
||||
<ProjectUserAgentsDialog />
|
||||
@ -90,7 +89,7 @@
|
||||
<v-chip variant="tonal" class="mr-2">
|
||||
Global
|
||||
</v-chip>
|
||||
<v-divider class="my-4"></v-divider>
|
||||
<v-divider class="my-4" />
|
||||
<v-btn variant="outlined" size="small" color="default">
|
||||
Set Project Placement
|
||||
<ProjectGeofenceDialog />
|
||||
@ -104,33 +103,45 @@
|
||||
<ProjectLimitsDialog />
|
||||
|
||||
<v-col cols="12" sm="6" lg="4">
|
||||
<UsageProgressComponent title="Buckets" progress="5" used="5" percentage="5%" available="95" limit="100"
|
||||
color="success" link />
|
||||
<UsageProgressComponent
|
||||
title="Buckets" :progress="5" used="5" percentage="5%" available="95" limit="100"
|
||||
color="success" link
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" lg="4">
|
||||
<UsageProgressComponent title="Storage" progress="14" used="141 TB" percentage="14%" available="859 TB"
|
||||
limit="1,000 TB" color="success" link />
|
||||
<UsageProgressComponent
|
||||
title="Storage" :progress="14" used="141 TB" percentage="14%" available="859 TB"
|
||||
limit="1,000 TB" color="success" link
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" lg="4">
|
||||
<UsageProgressComponent title="Download" progress="59" used="590 TB" percentage="59%" available="310 TB"
|
||||
limit="1,000 TB" color="success" link />
|
||||
<UsageProgressComponent
|
||||
title="Download" :progress="59" used="590 TB" percentage="59%" available="310 TB"
|
||||
limit="1,000 TB" color="success" link
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" lg="4">
|
||||
<UsageProgressComponent title="Segments" progress="32" used="32,000" percentage="32%" available="68,000"
|
||||
limit="100,000" color="success" link />
|
||||
<UsageProgressComponent
|
||||
title="Segments" :progress="32" used="32,000" percentage="32%" available="68,000"
|
||||
limit="100,000" color="success" link
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" lg="4">
|
||||
<UsageProgressComponent title="Rate" progress="20" used="2,000" percentage="20%" available="8,000" limit="10,000"
|
||||
color="success" link />
|
||||
<UsageProgressComponent
|
||||
title="Rate" :progress="20" used="2,000" percentage="20%" available="8,000" limit="10,000"
|
||||
color="success" link
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6" lg="4">
|
||||
<UsageProgressComponent title="Burst" progress="50" used="25,000" percentage="50%" available="25,000"
|
||||
limit="50,000" color="success" link />
|
||||
<UsageProgressComponent
|
||||
title="Burst" :progress="50" used="25,000" percentage="50%" available="25,000"
|
||||
limit="50,000" color="success" link
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
@ -154,51 +165,65 @@
|
||||
<LogsTableComponent />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VChip,
|
||||
VTooltip,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VCard,
|
||||
VCardText,
|
||||
VDivider,
|
||||
} from 'vuetify/components';
|
||||
|
||||
import PageTitleComponent from '@/components/PageTitleComponent.vue';
|
||||
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
|
||||
import UsageProgressComponent from '@/components/UsageProgressComponent.vue';
|
||||
import BucketsTableComponent from '@/components/BucketsTableComponent.vue';
|
||||
import LogsTableComponent from '@/components/LogsTableComponent.vue';
|
||||
import UsersTableComponent from '@/components/UsersTableComponent.vue';
|
||||
import ProjectActionsMenu from '@/components/ProjectActionsMenu.vue';
|
||||
import ProjectDeleteDialog from '@/components/ProjectDeleteDialog.vue';
|
||||
import ProjectNewBucketDialog from '@/components/ProjectNewBucketDialog.vue';
|
||||
import ProjectGeofenceDialog from '@/components/ProjectGeofenceDialog.vue';
|
||||
import ProjectUserAgentsDialog from '@/components/ProjectUserAgentsDialog.vue';
|
||||
import ProjectLimitsDialog from '@/components/ProjectLimitsDialog.vue';
|
||||
import ProjectAddUserDialog from '@/components/ProjectAddUserDialog.vue';
|
||||
import ProjectInformationDialog from '@/components/ProjectInformationDialog.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VChip,
|
||||
VTooltip,
|
||||
VBtn,
|
||||
VIcon,
|
||||
VCard,
|
||||
VCardText,
|
||||
VDivider,
|
||||
PageTitleComponent,
|
||||
PageSubtitleComponent,
|
||||
UsageProgressComponent,
|
||||
BucketsTableComponent,
|
||||
LogsTableComponent,
|
||||
UsersTableComponent,
|
||||
ProjectActionsMenu,
|
||||
ProjectDeleteDialog,
|
||||
ProjectNewBucketDialog,
|
||||
ProjectGeofenceDialog,
|
||||
ProjectUserAgentsDialog,
|
||||
ProjectLimitsDialog,
|
||||
ProjectAddUserDialog,
|
||||
ProjectInformationDialog
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Storj Admin - Project Details";
|
||||
ProjectInformationDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
valid: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
mounted() {
|
||||
document.title = 'Storj Admin - Project Details';
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -3,9 +3,7 @@
|
||||
|
||||
<template>
|
||||
<v-container fluid>
|
||||
|
||||
<v-row>
|
||||
|
||||
<v-col cols="6">
|
||||
<PageTitleComponent title="Projects" />
|
||||
<PageSubtitleComponent subtitle="All projects on North America US1." />
|
||||
@ -16,21 +14,22 @@
|
||||
<svg width="16" height="16" class="mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.7496 6.8989L10.7499 6.91218L10.7499 9.223H12.9926C13.4529 9.223 13.8302 9.58799 13.8456 10.048C13.8602 10.4887 13.5148 10.8579 13.0741 10.8726L13.0608 10.8729L10.7499 10.873L10.75 13.171C10.75 13.6266 10.3806 13.996 9.925 13.996C9.48048 13.996 9.11807 13.6444 9.10066 13.2042L9.1 13.171L9.09985 10.873H6.802C6.34637 10.873 5.977 10.5036 5.977 10.048C5.977 9.60348 6.32857 9.24107 6.76882 9.22366L6.802 9.223H9.09985L9.1 6.98036C9.1 6.5201 9.46499 6.14276 9.925 6.12745C10.3657 6.11279 10.7349 6.45818 10.7496 6.8989Z"
|
||||
fill="currentColor" />
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
New Project
|
||||
<NewProjectDialog />
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
</v-row>
|
||||
|
||||
<ProjectsTableComponent class="my-5" />
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { VContainer, VRow, VCol, VBtn } from 'vuetify/components';
|
||||
|
||||
import PageTitleComponent from '@/components/PageTitleComponent.vue';
|
||||
import PageSubtitleComponent from '@/components/PageSubtitleComponent.vue';
|
||||
import ProjectsTableComponent from '@/components/ProjectsTableComponent.vue';
|
||||
@ -38,14 +37,15 @@ import NewProjectDialog from '@/components/NewProjectDialog.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VContainer,
|
||||
VRow,
|
||||
VCol,
|
||||
VBtn,
|
||||
PageTitleComponent,
|
||||
PageSubtitleComponent,
|
||||
ProjectsTableComponent,
|
||||
NewProjectDialog,
|
||||
},
|
||||
mounted() {
|
||||
document.title = "Storj Admin - Projects";
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
@ -54,16 +54,19 @@ export default {
|
||||
email: '',
|
||||
emailRules: [
|
||||
value => {
|
||||
if (value) return true
|
||||
if (value) return true;
|
||||
|
||||
return 'E-mail is requred.'
|
||||
return 'E-mail is requred.';
|
||||
},
|
||||
value => {
|
||||
if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true
|
||||
return 'E-mail must be valid.'
|
||||
if (/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) return true;
|
||||
return 'E-mail must be valid.';
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
},
|
||||
}
|
||||
mounted() {
|
||||
document.title = 'Storj Admin - Projects';
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -2,19 +2,18 @@
|
||||
// See LICENSE for copying information.
|
||||
|
||||
// Plugins
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
|
||||
import { fileURLToPath, URL } from 'node:url';
|
||||
|
||||
// Utilities
|
||||
import { defineConfig } from 'vite'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: process.env.NODE_ENV === 'production' ? '/back-office/' : '/',
|
||||
plugins: [
|
||||
vue({
|
||||
template: { transformAssetUrls }
|
||||
template: { transformAssetUrls },
|
||||
}),
|
||||
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
|
||||
vuetify({
|
||||
@ -27,7 +26,7 @@ export default defineConfig({
|
||||
define: { 'process.env': {} },
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
extensions: [
|
||||
'.js',
|
||||
@ -43,6 +42,6 @@ export default defineConfig({
|
||||
port: 3000,
|
||||
},
|
||||
build: {
|
||||
outDir: "build"
|
||||
}
|
||||
})
|
||||
outDir: 'build',
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user