JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: fix linter

Browse Source 
Added imports linting, trailing commas, trailing semicolons, single quotes and spaces between curly braces.

Change-Id: I5de5d3eea48753dfe2737983b230bafaffe898c8
This commit is contained in:
Vitalii 2022-09-08 17:11:09 +03:00 committed by Storj Robot
parent e4412fa480
commit c5bca894fd
283 changed files with 2777 additions and 2497 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/satellite/.eslintignore Normal file
View File

@ -0,0 +1,3 @@
dist
node_modules
coverage

102
web/satellite/.eslintrc.js
View File

@ -4,47 +4,84 @@
module.exports = {
root: true,
env: {
node: true
node: true,
},
extends: [
'plugin:vue/recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'plugin:import/recommended',
'plugin:import/typescript',
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 2020
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaVersion: 2020,
vueFeatures: {
filter: true,
},
},
plugins: ["storj"],
plugins: ['storj', 'eslint-plugin-import'],
rules: {
"linebreak-style": ["error", "unix"],
'linebreak-style': ['error', 'unix'],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
"indent": ["warn", 4],
"vue/html-indent": ["warn", 4],
'indent': ['warn', 4],
'vue/html-indent': ['warn', 4],
"@typescript-eslint/no-unused-vars": [
"warn", {
"vars": "all",
"args": "all",
"argsIgnorePattern": "^_"
'@typescript-eslint/no-unused-vars': [
'warn', {
'vars': 'all',
'args': 'all',
'argsIgnorePattern': '^_',
}],
'@typescript-eslint/no-empty-function': "off",
'@typescript-eslint/no-var-requires': "off",
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-var-requires': 'off',
"vue/multi-word-component-names": ["off"],
"vue/max-attributes-per-line": ["off"],
"vue/singleline-html-element-content-newline": ["off"],
'no-multiple-empty-lines': ['error', { 'max': 1 }],
"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-useless-v-bind": ["warn"],
'import/order': ['error', {
'pathGroups': [
{
'group': 'external',
'pattern': 'vue-property-decorator',
'position': 'before',
},
{
'group': 'internal',
'pattern': '@/components/**',
'position': 'after',
},
{
'group': 'internal',
'pattern': '@/../static/**',
'position': 'after',
},
],
'newlines-between': 'always',
}],
'no-duplicate-imports': 'error',
'object-curly-spacing': ['error', 'always'],
'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
'semi': ['error', 'always'],
'keyword-spacing': ['error'],
'comma-dangle': ['error', 'always-multiline'],
'vue/no-useless-template-attributes': ["off"], // TODO: fix later
'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-useless-v-bind': ['warn'],
'vue/no-useless-template-attributes': ['off'], // TODO: fix later
'vue/no-unregistered-components': ['warn', { ignorePatterns: ['router-link', 'router-view'] }],
@ -52,4 +89,23 @@ module.exports = {
'vue/no-v-html': 0,
},
}
settings: {
'import/resolver': {
'eslint-import-resolver-custom-alias': {
'alias': {
'@': './src',
},
extensions: ['.ts', '.spec.ts', '.vue'],
},
typescript: {
alwaysTryTypes: true,
project: './tsconfig.json',
},
node: true,
},
'import/parsers': {
'@typescript-eslint/parser': ['.ts'],
'vue-eslint-parser': ['.vue'],
},
},
};

90
web/satellite/.stylelintrc.js
View File

@ -2,53 +2,53 @@
// See LICENSE for copying information.
module.exports = {
"env": {
"es2020": true,
"node": true,
"jest": true
'env': {
'es2020': true,
'node': true,
'jest': true,
},
"plugins": [
"stylelint-scss"
'plugins': [
'stylelint-scss',
],
"extends": "stylelint-config-standard-vue/scss",
"customSyntax": "postcss-html",
"rules": {
"indentation": 4,
"string-quotes": "single",
"no-duplicate-selectors": true,
"no-descending-specificity": null,
"selector-max-attribute": 1,
"selector-combinator-space-after": "always",
"selector-attribute-operator-space-before": "never",
"selector-attribute-operator-space-after": "never",
"selector-attribute-brackets-space-inside": "never",
"declaration-block-trailing-semicolon": "always",
"declaration-colon-space-before": "never",
"declaration-colon-space-after": "always-single-line",
"number-leading-zero": "always",
"function-url-quotes": "always",
"font-family-name-quotes": "always-unless-keyword",
"comment-whitespace-inside": "always",
"comment-empty-line-before": "always",
"rule-empty-line-before": "always-multi-line",
"selector-pseudo-element-colon-notation": "single",
"selector-pseudo-class-parentheses-space-inside": "never",
"selector-max-type": 3,
"font-family-no-missing-generic-family-keyword": true,
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true,
"media-feature-range-operator-space-before": "always",
"media-feature-range-operator-space-after": "always",
"media-feature-parentheses-space-inside": "never",
"media-feature-colon-space-before": "never",
"media-feature-colon-space-after": "always",
"selector-pseudo-element-no-unknown": [
'extends': 'stylelint-config-standard-vue/scss',
'customSyntax': 'postcss-html',
'rules': {
'indentation': 4,
'string-quotes': 'single',
'no-duplicate-selectors': true,
'no-descending-specificity': null,
'selector-max-attribute': 1,
'selector-combinator-space-after': 'always',
'selector-attribute-operator-space-before': 'never',
'selector-attribute-operator-space-after': 'never',
'selector-attribute-brackets-space-inside': 'never',
'declaration-block-trailing-semicolon': 'always',
'declaration-colon-space-before': 'never',
'declaration-colon-space-after': 'always-single-line',
'number-leading-zero': 'always',
'function-url-quotes': 'always',
'font-family-name-quotes': 'always-unless-keyword',
'comment-whitespace-inside': 'always',
'comment-empty-line-before': 'always',
'rule-empty-line-before': 'always-multi-line',
'selector-pseudo-element-colon-notation': 'single',
'selector-pseudo-class-parentheses-space-inside': 'never',
'selector-max-type': 3,
'font-family-no-missing-generic-family-keyword': true,
'at-rule-no-unknown': null,
'scss/at-rule-no-unknown': true,
'media-feature-range-operator-space-before': 'always',
'media-feature-range-operator-space-after': 'always',
'media-feature-parentheses-space-inside': 'never',
'media-feature-colon-space-before': 'never',
'media-feature-colon-space-after': 'always',
'selector-pseudo-element-no-unknown': [
true,
{
"ignorePseudoElements": ["v-deep"]
}
'ignorePseudoElements': ['v-deep'],
},
],
"selector-class-pattern": ".*",
"custom-property-pattern": ".*",
}
}
'selector-class-pattern': '.*',
'custom-property-pattern': '.*',
},
};

8
web/satellite/jest.config.js
View File

@ -5,9 +5,9 @@ process.env.TZ = 'UTC';
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript',
setupFiles: ["./jest.setup.ts"],
setupFiles: ['./jest.setup.ts'],
testEnvironment: 'jsdom',
transform: {
"^.+\\.svg$": "<rootDir>/tests/unit/mock/svgTransform.js"
}
}
'^.+\\.svg$': '<rootDir>/tests/unit/mock/svgTransform.js',
},
};

970
web/satellite/package-lock.json
View File

File diff suppressed because it is too large Load Diff

3
web/satellite/package.json
View File

@ -69,6 +69,8 @@
"babel-jest": "27.5.1",
"compression-webpack-plugin": "9.2.0",
"eslint": "8.14.0",
"eslint-import-resolver-custom-alias": "1.3.0",
"eslint-import-resolver-typescript": "2.7.1",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-storj": "0.0.2",
"eslint-plugin-vue": "8.7.1",
@ -84,6 +86,7 @@
"stylelint-scss": "4.2.0",
"ts-jest": "27.1.4",
"typescript": "4.6.4",
"vue-eslint-parser": "9.0.3",
"vue-sanitize": "0.2.2",
"vue-svg-loader": "0.17.0-beta.2",
"vue-template-compiler": "2.7.10",

4
web/satellite/src/App.vue
View File

@ -12,12 +12,12 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
import { PartneredSatellite } from '@/types/common';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { MetaUtils } from '@/utils/meta';
import NotificationArea from '@/components/notifications/NotificationArea.vue';
// @vue/component
@Component({
components: {

4
web/satellite/src/api/auth.ts
View File

@ -400,7 +400,7 @@ export class AuthHttpApi implements UsersApi {
if (text) {
const result = JSON.parse(text);
if (result.code == "mfa_required") {
if (result.code == 'mfa_required') {
throw new ErrorMFARequired();
}
if (result.error) {
@ -440,6 +440,6 @@ export class AuthHttpApi implements UsersApi {
throw new ErrorUnauthorized();
}
throw new Error("Unable to refresh session.")
throw new Error('Unable to refresh session.');
}
}

4
web/satellite/src/api/baseGql.ts
View File

@ -1,10 +1,10 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import gql from 'graphql-tag';
import { gql } from 'graphql-tag';
import { GraphQLError } from 'graphql';
import { apollo } from '@/utils/apollo';
import { GraphQLError } from "graphql";
/**
* BaseGql is a graphql utility which allows to perform queries and mutations.

4
web/satellite/src/api/oauthClients.ts
View File

@ -1,8 +1,8 @@
// Copyright (C) 2022 Storj Labs, Inc.
// See LICENSE for copying information.
import {HttpClient} from "@/utils/httpClient";
import {ErrorTooManyRequests} from "@/api/errors/ErrorTooManyRequests";
import { HttpClient } from '@/utils/httpClient';
import { ErrorTooManyRequests } from '@/api/errors/ErrorTooManyRequests';
export interface OAuthClient {
id: string;

7
web/satellite/src/api/payments.ts
View File

@ -1,6 +1,8 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { ErrorTooManyRequests } from './errors/ErrorTooManyRequests';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import {
AccountBalance,
@ -14,7 +16,6 @@ import {
} from '@/types/payments';
import { HttpClient } from '@/utils/httpClient';
import { Time } from '@/utils/time';
import { ErrorTooManyRequests } from './errors/ErrorTooManyRequests';
/**
* PaymentsHttpApi is a http implementation of Payments API.
@ -284,7 +285,7 @@ export class PaymentsHttpApi implements PaymentsApi {
coupon.percentOff,
new Date(coupon.addedAt),
coupon.expiresAt ? new Date(coupon.expiresAt) : null,
coupon.duration
coupon.duration,
);
}
@ -328,7 +329,7 @@ export class PaymentsHttpApi implements PaymentsApi {
coupon.percentOff,
new Date(coupon.addedAt),
coupon.expiresAt ? new Date(coupon.expiresAt) : null,
coupon.duration
coupon.duration,
);
}

20
web/satellite/src/api/projects.ts
View File

@ -14,7 +14,7 @@ import {
ProjectsStorageBandwidthDaily,
} from '@/types/projects';
import { HttpClient } from '@/utils/httpClient';
import { Time } from "@/utils/time";
import { Time } from '@/utils/time';
export class ProjectsApiGql extends BaseGql implements ProjectsApi {
private readonly http: HttpClient = new HttpClient();
@ -210,19 +210,19 @@ export class ProjectsApiGql extends BaseGql implements ProjectsApi {
return new ProjectsStorageBandwidthDaily(
usage.storageUsage.map(el => {
const date = new Date(el.date)
date.setHours(0, 0, 0, 0)
return new DataStamp(el.value, date)
const date = new Date(el.date);
date.setHours(0, 0, 0, 0);
return new DataStamp(el.value, date);
}),
usage.allocatedBandwidthUsage.map(el => {
const date = new Date(el.date)
date.setHours(0, 0, 0, 0)
return new DataStamp(el.value, date)
const date = new Date(el.date);
date.setHours(0, 0, 0, 0);
return new DataStamp(el.value, date);
}),
usage.settledBandwidthUsage.map(el => {
const date = new Date(el.date)
date.setHours(0, 0, 0, 0)
return new DataStamp(el.value, date)
const date = new Date(el.date);
date.setHours(0, 0, 0, 0);
return new DataStamp(el.value, date);
}),
);
}

42
web/satellite/src/api/v0.gen.ts
View File

@ -1,7 +1,7 @@
// AUTOGENERATED BY private/apigen
// DO NOT EDIT.
import { HttpClient } from '@/utils/httpClient'
import { HttpClient } from '@/utils/httpClient';
class APIKeyInfo {
id: string;
@ -102,8 +102,8 @@ export class projectsHttpApiV0 {
if (response.ok) {
return response.json().then((body) => body as Project);
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
public async updateProject(request: ProjectInfo, id: string): Promise<Project> {
@ -112,8 +112,8 @@ export class projectsHttpApiV0 {
if (response.ok) {
return response.json().then((body) => body as Project);
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
public async deleteProject(id: string): Promise<void> {
@ -122,8 +122,8 @@ export class projectsHttpApiV0 {
if (response.ok) {
return;
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
public async getProjects(): Promise<Array<Project>> {
@ -132,8 +132,8 @@ export class projectsHttpApiV0 {
if (response.ok) {
return response.json().then((body) => body as Array<Project>);
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
public async getBucketRollup(projectID: string, bucket: string, since: string, before: string): Promise<BucketUsageRollup> {
@ -142,8 +142,8 @@ export class projectsHttpApiV0 {
if (response.ok) {
return response.json().then((body) => body as BucketUsageRollup);
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
public async getBucketRollups(projectID: string, since: string, before: string): Promise<Array<BucketUsageRollup>> {
@ -152,8 +152,8 @@ export class projectsHttpApiV0 {
if (response.ok) {
return response.json().then((body) => body as Array<BucketUsageRollup>);
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
public async getAPIKeys(projectID: string, search: string, limit: number, page: number, order: number, orderDirection: number): Promise<APIKeyPage> {
@ -162,8 +162,8 @@ export class projectsHttpApiV0 {
if (response.ok) {
return response.json().then((body) => body as APIKeyPage);
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
}
@ -177,8 +177,8 @@ export class apikeysHttpApiV0 {
if (response.ok) {
return response.json().then((body) => body as CreateAPIKeyResponse);
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
public async deleteAPIKey(id: string): Promise<void> {
@ -187,8 +187,8 @@ export class apikeysHttpApiV0 {
if (response.ok) {
return;
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
}
@ -202,8 +202,8 @@ export class usersHttpApiV0 {
if (response.ok) {
return response.json().then((body) => body as ResponseUser);
}
const err = await response.json()
throw new Error(err.error)
const err = await response.json();
throw new Error(err.error);
}
}

18
web/satellite/src/components/accessGrants/AccessGrants.vue
View File

@ -224,7 +224,14 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { MetaUtils } from '@/utils/meta';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant, AccessGrantsOrderBy } from '@/types/accessGrants';
import { SortDirection } from '@/types/common';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import AccessGrantsItem from '@/components/accessGrants/AccessGrantsItem.vue';
import AccessGrantsItem2 from '@/components/accessGrants/AccessGrantsItem2.vue';
@ -234,16 +241,11 @@ import EmptyState from '@/components/accessGrants/EmptyState.vue';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import VHeader from '@/components/common/VHeader.vue';
import VTable from '@/components/common/VTable.vue';
import AccessGrantsIcon from '@/../static/images/accessGrants/accessGrantsIcon.svg';
import CLIIcon from '@/../static/images/accessGrants/cli.svg';
import S3Icon from '@/../static/images/accessGrants/s3.svg';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant, AccessGrantsOrderBy } from '@/types/accessGrants';
import { SortDirection } from '@/types/common';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import VTable from "@/components/common/VTable.vue";
const {
FETCH,
@ -291,7 +293,7 @@ export default class AccessGrants extends Vue {
*/
public get isNewAccessGrantFlow(): boolean {
const isNewAccessGrantFlow = MetaUtils.getMetaContent('new-access-grant-flow');
return isNewAccessGrantFlow === "true";
return isNewAccessGrantFlow === 'true';
}
/**
* Lifecycle hook after initial render where list of existing access grants is fetched.

3
web/satellite/src/components/accessGrants/AccessGrantsItem.vue
View File

@ -15,7 +15,8 @@
import { Component, Prop, Vue } from 'vue-property-decorator';
import { AccessGrant } from '@/types/accessGrants';
import TableItem from "@/components/common/TableItem.vue";
import TableItem from '@/components/common/TableItem.vue';
// @vue/component
@Component({

12
web/satellite/src/components/accessGrants/AccessGrantsItem2.vue
View File

@ -20,12 +20,14 @@
<script lang="ts">
import { Component, Prop } from 'vue-property-decorator';
import { AccessGrant } from '@/types/accessGrants';
import Resizable from "@/components/common/Resizable.vue";
import TableItem from "@/components/common/TableItem.vue";
import DeleteIcon from "../../../static/images/objects/delete.svg";
import DotsIcon from "../../../static/images/objects/dots.svg";
import DeleteIcon from '../../../static/images/objects/delete.svg';
import DotsIcon from '../../../static/images/objects/dots.svg';
import { AccessGrant } from '@/types/accessGrants';
import Resizable from '@/components/common/Resizable.vue';
import TableItem from '@/components/common/TableItem.vue';
// @vue/component
@Component({

10
web/satellite/src/components/accessGrants/ConfirmDeletePopup.vue
View File

@ -95,22 +95,22 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { MetaUtils } from '@/utils/meta';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
import VButton from '@/components/common/VButton.vue';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import TrashIcon from '@/../static/images/accessGrants/trashIcon.svg';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
// @vue/component
@Component({
components: {
VButton,
CloseCrossIcon,
TrashIcon
TrashIcon,
},
})
export default class ConfirmDeletePopup extends Vue {
@ -155,7 +155,7 @@ export default class ConfirmDeletePopup extends Vue {
*/
public get isNewAccessGrantFlow(): boolean {
const isNewAccessGrantFlow = MetaUtils.getMetaContent('new-access-grant-flow');
return isNewAccessGrantFlow === "true";
return isNewAccessGrantFlow === 'true';
}
/**
* Returns list of selected access grants from store.

10
web/satellite/src/components/accessGrants/ConfirmDeletePopup2.vue
View File

@ -58,14 +58,14 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue'
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
// @vue/component
@Component({
components: {

9
web/satellite/src/components/accessGrants/CreateAccessGrant.vue
View File

@ -16,15 +16,14 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import ProgressBar from '@/components/accessGrants/ProgressBar.vue';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {

31
web/satellite/src/components/accessGrants/CreateAccessModal.vue
View File

@ -39,9 +39,6 @@
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import CreateFormModal from '@/components/accessGrants/modals/CreateFormModal.vue';
import EncryptFormModal from '@/components/accessGrants/modals/EncryptFormModal.vue';
import GrantCreatedModal from '@/components/accessGrants/modals/GrantCreatedModal.vue';
// for future use when notes is implemented
// import NotesIcon from '@/../static/images/accessGrants/create-access_notes.svg';
@ -49,11 +46,14 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AccessGrant } from '@/types/accessGrants';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from "@/store/modules/buckets";
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { RouteConfig } from '@/router';
import GrantCreatedModal from '@/components/accessGrants/modals/GrantCreatedModal.vue';
import EncryptFormModal from '@/components/accessGrants/modals/EncryptFormModal.vue';
import CreateFormModal from '@/components/accessGrants/modals/CreateFormModal.vue';
// TODO: a lot of code can be refactored/reused/split into modules
// @vue/component
@ -67,12 +67,12 @@ import { RouteConfig } from '@/router';
},
})
export default class CreateAccessModal extends Vue {
@Prop({default: 'Default'})
@Prop({ default: 'Default' })
private readonly label: string;
@Prop({default: 'Default'})
@Prop({ default: 'Default' })
private readonly defaultType: string;
private accessGrantStep = "create";
private accessGrantStep = 'create';
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public areKeysVisible = false;
private readonly FIRST_PAGE = 1;
@ -95,14 +95,14 @@ export default class CreateAccessModal extends Vue {
/**
* Handles business logic for options on each step after create access.
*/
private passphrase = "";
private passphrase = '';
private accessName = '';
public areBucketNamesFetching = true;
/**
* Created Access Grant
*/
private access = "";
private access = '';
private worker: Worker;
private restrictedKey = '';
@ -159,7 +159,7 @@ export default class CreateAccessModal extends Vue {
this.checkedType = await data.checkedType;
this.accessName = await data.accessName;
this.selectedPermissions = await data.selectedPermissions;
if(type === 'api') {
if (type === 'api') {
await this.createAccessGrant();
}
}
@ -203,16 +203,16 @@ export default class CreateAccessModal extends Vue {
'isUpload': this.selectedPermissions.includes('Write'),
'isList': this.selectedPermissions.includes('List'),
'isDelete': this.selectedPermissions.includes('Delete'),
}
};
if (this.notBeforePermission) permissionsMsg = Object.assign(permissionsMsg, {'notBefore': this.notBeforePermission.toISOString()});
if (this.notAfterPermission) permissionsMsg = Object.assign(permissionsMsg, {'notAfter': this.notAfterPermission.toISOString()});
if (this.notBeforePermission) permissionsMsg = Object.assign(permissionsMsg, { 'notBefore': this.notBeforePermission.toISOString() });
if (this.notAfterPermission) permissionsMsg = Object.assign(permissionsMsg, { 'notAfter': this.notAfterPermission.toISOString() });
await this.worker.postMessage(permissionsMsg);
const grantEvent: MessageEvent = await new Promise(resolve => this.worker.onmessage = resolve);
if (grantEvent.data.error) {
throw new Error(grantEvent.data.error)
throw new Error(grantEvent.data.error);
}
this.restrictedKey = grantEvent.data.value;
@ -237,10 +237,9 @@ export default class CreateAccessModal extends Vue {
this.access = accessEvent.data.value;
await this.$notify.success('Access Grant was generated successfully');
if (this.checkedType === 's3') {
try {
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, {accessGrant: this.access});
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant: this.access });
await this.analytics.eventTriggered(AnalyticsEvent.GATEWAY_CREDENTIALS_CREATED);

7
web/satellite/src/components/accessGrants/EmptyState.vue
View File

@ -21,14 +21,13 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import VButton from '@/components/common/VButton.vue';
import Key from '@/../static/images/accessGrants/key.svg';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {

6
web/satellite/src/components/accessGrants/SortingHeader.vue
View File

@ -23,11 +23,11 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
import { AccessGrantsOrderBy, OnHeaderClickCallback } from '@/types/accessGrants';
import { SortDirection } from '@/types/common';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
// @vue/component
@Component({
components: {
@ -35,7 +35,7 @@ import { SortDirection } from '@/types/common';
},
})
export default class SortAccessGrantsHeader extends Vue {
@Prop({default: () => () => new Promise(() => false)})
@Prop({ default: () => () => new Promise(() => false) })
private readonly onHeaderClickCallback: OnHeaderClickCallback;
public AccessGrantsOrderBy = AccessGrantsOrderBy;

6
web/satellite/src/components/accessGrants/SortingHeader2.vue
View File

@ -23,11 +23,11 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
import { AccessGrantsOrderBy, OnHeaderClickCallback } from '@/types/accessGrants';
import { SortDirection } from '@/types/common';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
// @vue/component
@Component({
components: {
@ -35,7 +35,7 @@ import { SortDirection } from '@/types/common';
},
})
export default class SortAccessGrantsHeader extends Vue {
@Prop({default: () => new Promise(() => false)})
@Prop({ default: () => new Promise(() => false) })
private readonly onHeaderClickCallback: OnHeaderClickCallback;
public AccessGrantsOrderBy = AccessGrantsOrderBy;

58
web/satellite/src/components/accessGrants/modals/CreateFormModal.vue
View File

@ -203,23 +203,24 @@
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import DateIcon from '@/../static/images/accessGrants/create-access_date.svg';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import VButton from '@/components/common/VButton.vue';
import BucketsSelection from '@/components/accessGrants/permissions/BucketsSelection.vue';
import BucketNameBullet from '@/components/accessGrants/permissions/BucketNameBullet.vue';
import DurationSelection from '@/components/accessGrants/permissions/DurationSelection.vue';
import DateIcon from '@/../static/images/accessGrants/create-access_date.svg';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import TypesIcon from '@/../static/images/accessGrants/create-access_type.svg';
import NameIcon from '@/../static/images/accessGrants/create-access_name.svg';
import PermissionsIcon from '@/../static/images/accessGrants/create-access_permissions.svg';
import Chevron from '@/../static/images/accessGrants/chevron.svg';
import BucketsIcon from '@/../static/images/accessGrants/create-access_buckets.svg';
import BucketNameBullet from "@/components/accessGrants/permissions/BucketNameBullet.vue";
import DurationSelection from '@/components/accessGrants/permissions/DurationSelection.vue';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
type ShowPermissions = {
show: boolean,
@ -246,21 +247,20 @@ type Permissions = {
BucketNameBullet,
DateIcon,
DurationSelection,
VButton
VButton,
},
})
export default class CreateFormModal extends Vue {
@Prop({ default: '' })
private checkedType: string;
public showAllPermissions: ShowPermissions = {show: false, position: "up"};
public showAllPermissions: ShowPermissions = { show: false, position: 'up' };
private accessName = '';
private selectedPermissions : string[] = [];
private allPermissionsClicked = false;
private permissionsList: string[] = ["Read","Write","List","Delete"];
private checkedPermissions: Permissions = {Read: false, Write: false, List: false, Delete: false};
private permissionsList: string[] = ['Read','Write','List','Delete'];
private checkedPermissions: Permissions = { Read: false, Write: false, List: false, Delete: false };
private accessGrantList = this.accessGrantsList;
private addDateSelected = false;
public tooltipHover = '';
@ -269,7 +269,7 @@ export default class CreateFormModal extends Vue {
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public mounted(): void {
this.showAllPermissions = {show: false, position: "up"};
this.showAllPermissions = { show: false, position: 'up' };
}
public onCloseClick(): void {
@ -292,9 +292,9 @@ export default class CreateFormModal extends Vue {
'checkedType': this.checkedType,
'accessName': this.accessName,
'selectedPermissions': this.selectedPermissions,
}
};
this.$emit('propogateInfo', payloadObject, this.checkedType)
this.$emit('propogateInfo', payloadObject, this.checkedType);
}
/**
@ -310,13 +310,13 @@ export default class CreateFormModal extends Vue {
}
public encryptClickAction(): void {
let mappedList = this.accessGrantList.map((key) => (key.name))
let mappedList = this.accessGrantList.map((key) => (key.name));
if (mappedList.includes(this.accessName)) {
this.$notify.error(`validation: An API Key with this name already exists in this project, please use a different name`);
return
} else if (this.checkedType !== "api") {
return;
} else if (this.checkedType !== 'api') {
// emit event here
this.propogateInfo()
this.propogateInfo();
this.$emit('encrypt');
}
this.analytics.eventTriggered(AnalyticsEvent.ENCRYPT_MY_ACCESS_CLICKED);
@ -326,20 +326,20 @@ export default class CreateFormModal extends Vue {
if (type === 'all' && !this.allPermissionsClicked) {
this.allPermissionsClicked = true;
this.selectedPermissions = this.permissionsList;
this.checkedPermissions = { Read: true, Write: true, List: true, Delete: true }
return
} else if(type === 'all' && this.allPermissionsClicked) {
this.checkedPermissions = { Read: true, Write: true, List: true, Delete: true };
return;
} else if (type === 'all' && this.allPermissionsClicked) {
this.allPermissionsClicked = false;
this.selectedPermissions = [];
this.checkedPermissions = { Read: false, Write: false, List: false, Delete: false };
return
} else if(this.checkedPermissions[type]) {
return;
} else if (this.checkedPermissions[type]) {
this.checkedPermissions[type] = false;
this.allPermissionsClicked = false;
return;
} else {
this.checkedPermissions[type] = true;
if(this.checkedPermissions.Read && this.checkedPermissions.Write && this.checkedPermissions.List && this.checkedPermissions.Delete) {
if (this.checkedPermissions.Read && this.checkedPermissions.Write && this.checkedPermissions.List && this.checkedPermissions.Delete) {
this.allPermissionsClicked = true;
}
}
@ -360,8 +360,8 @@ export default class CreateFormModal extends Vue {
} else if (this.tooltipHover === type && action === 'over') {
clearTimeout(this.tooltipVisibilityTimer);
return;
} else if(this.tooltipHover !== type) {
clearTimeout(this.tooltipVisibilityTimer)
} else if (this.tooltipHover !== type) {
clearTimeout(this.tooltipVisibilityTimer);
this.tooltipHover = type;
}
}

27
web/satellite/src/components/accessGrants/modals/EncryptFormModal.vue
View File

@ -158,18 +158,19 @@
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { generateMnemonic } from "bip39";
import { Download } from "@/utils/download";
import { generateMnemonic } from 'bip39';
import { Download } from '@/utils/download';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import CopyIcon from '../../../../static/images/common/copy.svg';
import VButton from '@/components/common/VButton.vue';
import CopyIcon from '@/../static/images/common/copy.svg';
import DownloadIcon from '@/../static/images/common/download.svg';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import AccessKeyIcon from '@/../static/images/accessGrants/accessKeyIcon.svg';
import ThumbPrintIcon from '@/../static/images/accessGrants/thumbPrintIcon.svg';
import DownloadIcon from '../../../../static/images/common/download.svg';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
// @vue/component
@Component({
@ -179,17 +180,17 @@ import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
CopyIcon,
DownloadIcon,
ThumbPrintIcon,
VButton
VButton,
},
})
export default class EncryptFormModal extends Vue {
private encryptSelect = "create";
private encryptSelect = 'create';
private isPassphraseCopied = false;
private isPassphraseDownloaded = false;
private passphrase = "";
private accessGrantStep = "create";
private passphrase = '';
private accessGrantStep = 'create';
private acknowledgementCheck = false;
public currentDate = new Date().toISOString();
@ -219,7 +220,7 @@ export default class EncryptFormModal extends Vue {
}
public backAction(): void {
this.$emit('backAction')
this.$emit('backAction');
}
public onCopyPassphraseClick(): void {
@ -234,7 +235,7 @@ export default class EncryptFormModal extends Vue {
*/
public downloadPassphrase(): void {
this.isPassphraseDownloaded = true;
Download.file(this.passphrase, `passphrase-${this.currentDate}.txt`)
Download.file(this.passphrase, `passphrase-${this.currentDate}.txt`);
this.analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
}
}

33
web/satellite/src/components/accessGrants/modals/GrantCreatedModal.vue
View File

@ -202,20 +202,19 @@
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { MetaUtils } from '@/utils/meta';
import { Download } from "@/utils/download";
import { Download } from '@/utils/download';
import { EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import VButton from '@/components/common/VButton.vue';
import AccessGrantsIcon from '@/../static/images/accessGrants/accessGrantsIcon.svg';
import CLIIcon from '@/../static/images/accessGrants/cli.svg';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import S3Icon from '@/../static/images/accessGrants/s3.svg';
import VButton from '@/components/common/VButton.vue';
import { EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
// @vue/component
@Component({
@ -229,13 +228,13 @@ import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
})
export default class GrantCreatedModal extends Vue {
@Prop({default: 'Default'})
@Prop({ default: 'Default' })
private readonly checkedType: string;
@Prop({default: 'Default'})
@Prop({ default: 'Default' })
private readonly restrictedKey: string;
@Prop({default: 'Default'})
@Prop({ default: 'Default' })
private readonly accessName: string;
@Prop({default: 'Default'})
@Prop({ default: 'Default' })
private readonly access: string;
private areCredentialsDownloaded = false;
@ -247,7 +246,7 @@ export default class GrantCreatedModal extends Vue {
* Global isLoading Variable
**/
private isLoading = false;
private checkedText: Record<string, string[]> = {access: ['Access Grant as it','information icon to learn more.'], s3: ['S3 credentials as they','Learn More button to access the documentation.'],api: ['Satellite Address and API Key as they','information icons to learn more.']};
private checkedText: Record<string, string[]> = { access: ['Access Grant as it','information icon to learn more.'], s3: ['S3 credentials as they','Learn More button to access the documentation.'],api: ['Satellite Address and API Key as they','information icons to learn more.'] };
public currentDate = new Date().toISOString();
public satelliteAddress: string = MetaUtils.getMetaContent('satellite-nodeurl');
@ -281,10 +280,10 @@ export default class GrantCreatedModal extends Vue {
let credentialMap = {
access: [`access grant: ${this.access}`],
s3: [`access key: ${this.gatewayCredentials.accessKeyId}\nsecret key: ${this.gatewayCredentials.secretKey}\nendpoint: ${this.gatewayCredentials.endpoint}`],
api: [`satellite address: ${this.satelliteAddress}\nrestricted key: ${this.restrictedKey}`]
}
api: [`satellite address: ${this.satelliteAddress}\nrestricted key: ${this.restrictedKey}`],
};
this.areCredentialsDownloaded = true;
Download.file(credentialMap[this.checkedType], `${this.checkedType}-credentials-${this.currentDate}.txt`)
Download.file(credentialMap[this.checkedType], `${this.checkedType}-credentials-${this.currentDate}.txt`);
this.analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
}
@ -292,7 +291,7 @@ export default class GrantCreatedModal extends Vue {
* Opens S3 documentation in a new tab
*/
public learnMore(): void{
window.open("https://docs.storj.io/dcs/api-reference/s3-compatible-gateway", '_blank');
window.open('https://docs.storj.io/dcs/api-reference/s3-compatible-gateway', '_blank');
}
/**

6
web/satellite/src/components/accessGrants/permissions/BucketNameBullet.vue
View File

@ -11,10 +11,10 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
// @vue/component
@Component({
components: {
@ -22,7 +22,7 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
},
})
export default class BucketNameBullet extends Vue {
@Prop({default: ''})
@Prop({ default: '' })
public readonly name: string;
/**

8
web/satellite/src/components/accessGrants/permissions/BucketsDropdown.vue
View File

@ -47,12 +47,12 @@
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import SelectionIcon from '@/../static/images/accessGrants/selection.svg';
import UnselectIcon from '@/../static/images/accessGrants/unselect.svg';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
// @vue/component
@Component({
components: {
@ -61,7 +61,7 @@ import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
},
})
export default class BucketsDropdown extends Vue {
@Prop({default: false})
@Prop({ default: false })
private readonly showScrollbar: boolean;
public bucketSearch = '';

5
web/satellite/src/components/accessGrants/permissions/BucketsSelection.vue
View File

@ -23,7 +23,8 @@
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import BucketsDropdown from '@/components/accessGrants/permissions/BucketsDropdown.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
@ -36,7 +37,7 @@ import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
},
})
export default class BucketsSelection extends Vue {
@Prop({default: false})
@Prop({ default: false })
private readonly showScrollbar: boolean;
/**
* Toggles dropdown visibility.

6
web/satellite/src/components/accessGrants/permissions/DurationPicker.vue
View File

@ -26,10 +26,10 @@
import { Component, Vue, Prop } from 'vue-property-decorator';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { DurationPermission } from '@/types/accessGrants';
import VDateRangePicker from "@/components/common/VDateRangePicker.vue";
import VDateRangePicker from '@/components/common/VDateRangePicker.vue';
// @vue/component
@Component({
@ -38,7 +38,7 @@ import VDateRangePicker from "@/components/common/VDateRangePicker.vue";
},
})
export default class DurationPicker extends Vue {
@Prop({default: ''})
@Prop({ default: '' })
private readonly containerStyle: string;
/**
* onCustomRangePick holds logic for choosing custom date range.

10
web/satellite/src/components/accessGrants/permissions/DurationSelection.vue
View File

@ -25,7 +25,8 @@
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import DurationPicker from '@/components/accessGrants/permissions/DurationPicker.vue';
import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
@ -39,14 +40,13 @@ import ExpandIcon from '@/../static/images/common/BlackArrowExpand.svg';
})
export default class DurationSelection extends Vue {
@Prop({default: ''})
@Prop({ default: '' })
private readonly containerStyle: string;
@Prop({default: ''})
@Prop({ default: '' })
private readonly textStyle: string;
@Prop({default: ''})
@Prop({ default: '' })
private readonly pickerStyle: string;
public dateRangeLabel = 'Forever';
/**

11
web/satellite/src/components/accessGrants/steps/CLIStep.vue
View File

@ -53,15 +53,14 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import VButton from '@/components/common/VButton.vue';
import BackIcon from '@/../static/images/accessGrants/back.svg';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {
@ -115,7 +114,7 @@ export default class CLIStep extends Vue {
* Redirects to upload step.
*/
public onDoneClick(): void {
this.analytics.pageVisit(RouteConfig.AccessGrants.path)
this.analytics.pageVisit(RouteConfig.AccessGrants.path);
this.isOnboardingTour ? this.$router.push(RouteConfig.ProjectDashboard.path) : this.$router.push(RouteConfig.AccessGrants.path);
}

10
web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
View File

@ -84,15 +84,15 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { generateMnemonic } from "bip39";
import { generateMnemonic } from 'bip39';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsEvent } from "@/utils/constants/analyticsEventNames";
import { AnalyticsHttpApi } from "@/api/analytics";
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import VButton from "@/components/common/VButton.vue";
import VInput from "@/components/common/VInput.vue";
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
import BackIcon from '@/../static/images/accessGrants/back.svg';
import GreenWarningIcon from '@/../static/images/accessGrants/greenWarning.svg';

9
web/satellite/src/components/accessGrants/steps/EnterPassphraseStep.vue
View File

@ -26,16 +26,15 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import VInput from '@/components/common/VInput.vue';
import VButton from '@/components/common/VButton.vue';
import BackIcon from '@/../static/images/accessGrants/back.svg';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {

14
web/satellite/src/components/accessGrants/steps/GatewayStep.vue
View File

@ -107,18 +107,18 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import VInfo from '@/components/common/VInfo.vue';
import BackIcon from '@/../static/images/accessGrants/back.svg';
import InfoIcon from '@/../static/images/accessGrants/info.svg';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import VInfo from '@/components/common/VInfo.vue';
import VButton from '@/components/common/VButton.vue';
import InfoIcon from '@/../static/images/accessGrants/info.svg';
import BackIcon from '@/../static/images/accessGrants/back.svg';
// @vue/component
@Component({
components: {
@ -216,7 +216,7 @@ export default class GatewayStep extends Vue {
this.isLoading = true;
try {
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, {accessGrant: this.access});
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant: this.access });
await this.$notify.success('Gateway credentials were generated successfully');

6
web/satellite/src/components/accessGrants/steps/NameStep.vue
View File

@ -36,15 +36,15 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VInput from '@/components/common/VInput.vue';
import VButton from '@/components/common/VButton.vue';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
// @vue/component
@Component({
components: {

17
web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
View File

@ -69,6 +69,12 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { DurationPermission } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import BucketNameBullet from '@/components/accessGrants/permissions/BucketNameBullet.vue';
import BucketsSelection from '@/components/accessGrants/permissions/BucketsSelection.vue';
import DurationSelection from '@/components/accessGrants/permissions/DurationSelection.vue';
@ -77,13 +83,6 @@ import VLoader from '@/components/common/VLoader.vue';
import BackIcon from '@/../static/images/accessGrants/back.svg';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { DurationPermission } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {
@ -262,8 +261,8 @@ export default class PermissionsStep extends Vue {
'isDelete': this.isDelete,
};
if (this.notBeforePermission) permissionsMsg = Object.assign(permissionsMsg, {'notBefore': this.notBeforePermission.toISOString()});
if (this.notAfterPermission) permissionsMsg = Object.assign(permissionsMsg, {'notAfter': this.notAfterPermission.toISOString()});
if (this.notBeforePermission) permissionsMsg = Object.assign(permissionsMsg, { 'notBefore': this.notBeforePermission.toISOString() });
if (this.notAfterPermission) permissionsMsg = Object.assign(permissionsMsg, { 'notAfter': this.notAfterPermission.toISOString() });
await this.worker.postMessage(permissionsMsg);

13
web/satellite/src/components/accessGrants/steps/ResultStep.vue
View File

@ -50,17 +50,16 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
import BackIcon from '@/../static/images/accessGrants/back.svg';
import WarningIcon from '@/../static/images/accessGrants/warning.svg';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import { Download } from "@/utils/download";
import { Download } from '@/utils/download';
import { AnalyticsHttpApi } from '@/api/analytics';
import VButton from '@/components/common/VButton.vue';
import WarningIcon from '@/../static/images/accessGrants/warning.svg';
import BackIcon from '@/../static/images/accessGrants/back.svg';
// @vue/component
@Component({
components: {

2
web/satellite/src/components/account/SettingsArea.vue
View File

@ -87,7 +87,7 @@ import { Component, Vue } from 'vue-property-decorator';
import { USER_ACTIONS } from '@/store/modules/users';
import { User } from '@/types/users';
import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import VButton from '@/components/common/VButton.vue';

15
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -89,7 +89,13 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { MetaUtils } from '@/utils/meta';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AccountBalance } from '@/types/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import PeriodSelection from '@/components/account/billing/depositAndBillingHistory/PeriodSelection.vue';
import SmallDepositHistory from '@/components/account/billing/depositAndBillingHistory/SmallDepositHistory.vue';
import EstimatedCostsAndCredits from '@/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue';
@ -103,13 +109,6 @@ import HideIcon from '@/../static/images/account/billing/hide.svg';
import LowBalanceIcon from '@/../static/images/account/billing/lowBalance.svg';
import NegativeBalanceIcon from '@/../static/images/account/billing/negativeBalance.svg';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AccountBalance } from '@/types/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
// @vue/component
@Component({
components: {
@ -263,7 +262,7 @@ export default class BillingArea extends Vue {
*/
public get isNewBillingScreen(): boolean {
const isNewBillingScreen = MetaUtils.getMetaContent('new-billing-screen');
return isNewBillingScreen === "true";
return isNewBillingScreen === 'true';
}
}

1
web/satellite/src/components/account/billing/HistoryDropdown.vue
View File

@ -11,6 +11,7 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component

4
web/satellite/src/components/account/billing/billingTabs/BillingHistory.vue
View File

@ -14,10 +14,12 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
import VList from '@/components/common/VList.vue';
import BillingHistoryHeader from '@/components/account/billing/billingTabs/BillingHistoryHeader.vue';
import BillingHistoryShape from '@/components/account/billing/billingTabs/BillingHistoryShape.vue';
import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
// @vue/component
@Component({

3
web/satellite/src/components/account/billing/billingTabs/BillingHistoryHeader.vue
View File

@ -30,7 +30,7 @@ import { SortDirection } from '@/types/common';
},
})
export default class BillingHistoryHeader extends Vue {
@Prop({default: () => () => new Promise(() => false)})
@Prop({ default: () => () => new Promise(() => false) })
private readonly onHeaderClickCallback: OnHeaderClickCallback;
public AccessGrantsOrderBy = AccessGrantsOrderBy;
@ -54,7 +54,6 @@ export default class BillingHistoryHeader extends Vue {
public get areAccessGrantsSortedByName(): boolean {
return this.sortBy === AccessGrantsOrderBy.NAME;
}
}
</script>

2
web/satellite/src/components/account/billing/billingTabs/BillingHistoryShape.vue
View File

@ -34,8 +34,8 @@
import { Component, Prop, Vue } from 'vue-property-decorator';
import { PaymentsHistoryItem } from '@/types/payments';
import { AccessGrant } from '@/types/accessGrants';
import CheckIcon from '@/../static/images/billing/check-green-circle.svg';
import Calendar from '@/../static/images/billing/calendar.svg';

15
web/satellite/src/components/account/billing/billingTabs/Coupons.vue
View File

@ -53,14 +53,13 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VLoader from '@/components/common/VLoader.vue';
import AddCoupon2 from '@/components/account/billing/coupons/AddCouponCode2.vue'
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { Coupon } from '@/types/payments';
import AddCoupon2 from '@/components/account/billing/coupons/AddCouponCode2.vue';
import VLoader from '@/components/common/VLoader.vue';
// @vue/component
@Component({
components: {
@ -97,7 +96,7 @@ export default class Coupons extends Vue {
* Opens Add Coupon modal.
*/
public toggleCreateModal(): void {
this.showCreateCode = !this.showCreateCode
this.showCreateCode = !this.showCreateCode;
}
/**
@ -130,7 +129,7 @@ export default class Coupons extends Vue {
return '';
}
const today = new Date()
const today = new Date();
if ((this.coupon.duration === 'forever' || this.coupon.duration === 'once') || (this.coupon.expiresAt && today.getTime() < this.coupon.expiresAt.getTime())) {
return 'active';
} else {
@ -147,9 +146,9 @@ export default class Coupons extends Vue {
}
switch (this.coupon.duration) {
case "once":
case 'once':
return 'Expires after first use';
case "forever":
case 'forever':
return 'No expiration';
default:
return this.expiration;

8
web/satellite/src/components/account/billing/billingTabs/CreditCardContainer.vue
View File

@ -35,6 +35,9 @@
import Vue, { VueConstructor } from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { CreditCard } from '@/types/payments';
import CardDialog from '@/components/account/billing/paymentMethods/CardDialog.vue';
import AmericanExpressIcon from '@/../static/images/payments/cardIcons/americanexpress.svg';
@ -46,9 +49,6 @@ import MastercardIcon from '@/../static/images/payments/cardIcons/smallmastercar
import UnionPayIcon from '@/../static/images/payments/cardIcons/smallunionpay.svg';
import VisaIcon from '@/../static/images/payments/cardIcons/visa.svg';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { CreditCard } from '@/types/payments';
const {
TOGGLE_CARD_SELECTION,
} = PAYMENTS_ACTIONS;
@ -68,7 +68,7 @@ const {
},
})
export default class CardComponent extends Vue {
@Prop({default: () => new CreditCard()})
@Prop({ default: () => new CreditCard() })
private readonly creditCard: CreditCard;
public isEditPaymentMethodsModalOpen = false;

22
web/satellite/src/components/account/billing/billingTabs/Overview.vue
View File

@ -85,20 +85,19 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import UsageAndChargesItem2 from '@/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem2.vue';
import VButton from '@/components/common/VButton.vue';
import EstimatedChargesIcon from '@/../static/images/account/billing/totalEstimatedChargesIcon.svg';
import AvailableBalanceIcon from '@/../static/images/account/billing/availableBalanceIcon.svg';
import CalendarIcon from '@/../static/images/account/billing/calendar-icon.svg';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { AccountBalance } from '@/types/payments';
import { ProjectUsageAndCharges } from '@/types/payments';
import { AccountBalance , ProjectUsageAndCharges } from '@/types/payments';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import UsageAndChargesItem2 from '@/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem2.vue';
import VButton from '@/components/common/VButton.vue';
import EstimatedChargesIcon from '@/../static/images/account/billing/totalEstimatedChargesIcon.svg';
import AvailableBalanceIcon from '@/../static/images/account/billing/availableBalanceIcon.svg';
import CalendarIcon from '@/../static/images/account/billing/calendar-icon.svg';
// @vue/component
@Component({
@ -114,8 +113,7 @@ export default class BillingArea extends Vue {
public availableBalance = 0;
public showChargesTooltip = false;
public isDataFetching = true;
public currentDate = ""
public currentDate = '';
/**
* Lifecycle hook after initial render.
@ -140,7 +138,7 @@ export default class BillingArea extends Vue {
const rawDate = new Date();
let currentYear = rawDate.getFullYear();
this.currentDate = `${SHORT_MONTHS_NAMES[rawDate.getMonth()]} ${currentYear}`
this.currentDate = `${SHORT_MONTHS_NAMES[rawDate.getMonth()]} ${currentYear}`;
}
/**

80
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -186,9 +186,23 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { CreditCard , PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
import { USER_ACTIONS } from '@/store/modules/users';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import ArrowIcon from '@/../static/images/common/arrowRight.svg'
import CreditCardContainer from '@/components/account/billing/billingTabs/CreditCardContainer.vue';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
import SortingHeader2 from '@/components/account/billing/depositAndBillingHistory/SortingHeader2.vue';
import BalanceTokenCard from '@/components/account/billing/paymentMethods/BalanceTokenCard.vue';
import AddTokenCard from '@/components/account/billing/paymentMethods/AddTokenCard.vue';
import AddTokenCardNative from '@/components/account/billing/paymentMethods/AddTokenCardNative.vue';
import TokenTransactionItem from '@/components/account/billing/paymentMethods/TokenTransactionItem.vue';
import ArrowIcon from '@/../static/images/common/arrowRight.svg';
import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
import AmericanExpressIcon from '@/../static/images/payments/cardIcons/smallamericanexpress.svg';
import DinersIcon from '@/../static/images/payments/cardIcons/smalldinersclub.svg';
@ -199,20 +213,6 @@ import UnionPayIcon from '@/../static/images/payments/cardIcons/smallunionpay.sv
import VisaIcon from '@/../static/images/payments/cardIcons/smallvisa.svg';
import Trash from '@/../static/images/account/billing/trash.svg';
import CreditCardImage from '@/../static/images/billing/credit-card.svg';
import CreditCardContainer from '@/components/account/billing/billingTabs/CreditCardContainer.vue';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
import SortingHeader2 from '@/components/account/billing/depositAndBillingHistory/SortingHeader2.vue';
import BalanceTokenCard from '@/components/account/billing/paymentMethods/BalanceTokenCard.vue'
import AddTokenCard from '@/components/account/billing/paymentMethods/AddTokenCard.vue'
import AddTokenCardNative from '@/components/account/billing/paymentMethods/AddTokenCardNative.vue'
import TokenTransactionItem from '@/components/account/billing/paymentMethods/TokenTransactionItem.vue';
import { CreditCard } from '@/types/payments';
import { USER_ACTIONS } from '@/store/modules/users';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
import { RouteConfig } from '@/router';
import { MetaUtils } from "@/utils/meta";
interface StripeForm {
onSubmit(): Promise<void>;
@ -266,7 +266,7 @@ export default class PaymentMethods extends Vue {
public showTransactions = false;
public showAddFunds = false;
public mostRecentTransaction: Record<string, unknown>[] = [];
public paginationLocation: {start: number, end: number} = {start: paginationStartNumber, end: paginationEndNumber};
public paginationLocation: {start: number, end: number} = { start: paginationStartNumber, end: paginationEndNumber };
public tokenHistory: {amount: number, start: Date, status: string,}[] = [];
public displayedHistory: Record<string, unknown>[] = [];
public transactionCount = 0;
@ -281,7 +281,7 @@ export default class PaymentMethods extends Vue {
public cardBeingEdited: CardEdited = {};
public isAddingPayment = false;
public isChangeDefaultPaymentModalOpen = false;
public defaultCreditCardSelection = "";
public defaultCreditCardSelection = '';
public isRemovePaymentMethodsModalOpen = false;
public isAddCardClicked = false;
public $refs!: {
@ -314,7 +314,7 @@ export default class PaymentMethods extends Vue {
this.transactionCount = tokenArray.length;
this.displayedHistory = tokenArray.slice(0,10);
this.tokensAreLoaded = true;
if(this.transactionCount > 0){
if (this.transactionCount > 0){
this.showAddFunds = false;
} else {
this.showAddFunds = true;
@ -364,7 +364,7 @@ export default class PaymentMethods extends Vue {
}
else {
this.$notify.error("You cannot delete the default payment method.");
this.$notify.error('You cannot delete the default payment method.');
}
}
@ -421,7 +421,7 @@ export default class PaymentMethods extends Vue {
public async onConfirmAddStripe(): Promise<void> {
this.isLoading = true;
await this.$refs.stripeCardInput.onSubmit().then(() => {this.isLoading = false;})
await this.$refs.stripeCardInput.onSubmit().then(() => {this.isLoading = false;});
}
public addPaymentMethodHandler() {
@ -452,32 +452,32 @@ export default class PaymentMethods extends Vue {
* controls sorting the transaction table
*/
public sortFunction(key) {
this.paginationLocation = {start: 0, end: 10}
this.displayedHistory = this.tokenHistory.slice(0,10)
this.paginationLocation = { start: 0, end: 10 };
this.displayedHistory = this.tokenHistory.slice(0,10);
switch (key) {
case 'date-ascending':
this.tokenHistory.sort((a,b) => {return a.start.getTime() - b.start.getTime()});
this.tokenHistory.sort((a,b) => {return a.start.getTime() - b.start.getTime();});
break;
case 'date-descending':
this.tokenHistory.sort((a,b) => {return b.start.getTime() - a.start.getTime()});
this.tokenHistory.sort((a,b) => {return b.start.getTime() - a.start.getTime();});
break;
case 'amount-ascending':
this.tokenHistory.sort((a,b) => {return a.amount - b.amount});
this.tokenHistory.sort((a,b) => {return a.amount - b.amount;});
break;
case 'amount-descending':
this.tokenHistory.sort((a,b) => {return b.amount - a.amount});
this.tokenHistory.sort((a,b) => {return b.amount - a.amount;});
break;
case 'status-ascending':
this.tokenHistory.sort((a, b) => {
if (a.status < b.status) {return -1;}
if (a.status > b.status) {return 1;}
return 0});
return 0;});
break;
case 'status-descending':
this.tokenHistory.sort((a, b) => {
if (b.status < a.status) {return -1;}
if (b.status > a.status) {return 1;}
return 0});
return 0;});
break;
}
}
@ -486,30 +486,30 @@ export default class PaymentMethods extends Vue {
* controls transaction table pagination
*/
public paginationController(i): void {
let diff = this.transactionCount - this.paginationLocation.start
let diff = this.transactionCount - this.paginationLocation.start;
if (this.paginationLocation.start + i >= 0 && this.paginationLocation.end + i <= this.transactionCount && this.paginationLocation.end !== this.transactionCount){
this.paginationLocation = {
start: this.paginationLocation.start + i,
end: this.paginationLocation.end + i
}
end: this.paginationLocation.end + i,
};
} else if (this.paginationLocation.start + i < 0 ) {
this.paginationLocation = {
start: 0,
end: 10
}
} else if(this.paginationLocation.end + i > this.transactionCount) {
end: 10,
};
} else if (this.paginationLocation.end + i > this.transactionCount) {
this.paginationLocation = {
start: this.paginationLocation.start + i,
end: this.transactionCount
}
} else if(this.paginationLocation.end === this.transactionCount) {
end: this.transactionCount,
};
} else if (this.paginationLocation.end === this.transactionCount) {
this.paginationLocation = {
start: this.paginationLocation.start + i,
end: this.transactionCount - (diff)
}
end: this.transactionCount - (diff),
};
}
this.displayedHistory = this.tokenHistory.slice(this.paginationLocation.start, this.paginationLocation.end)
this.displayedHistory = this.tokenHistory.slice(this.paginationLocation.start, this.paginationLocation.end);
}
/**

11
web/satellite/src/components/account/billing/coupons/AddCouponCode.vue
View File

@ -21,14 +21,13 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import AddCouponCodeInput from '@/components/common/AddCouponCodeInput.vue';
import CloseIcon from '@/../static/images/common/closeCross.svg';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {
@ -38,9 +37,9 @@ import { AnalyticsHttpApi } from '@/api/analytics';
})
export default class AddCouponCode extends Vue {
@Prop({default: false})
@Prop({ default: false })
protected readonly success: boolean;
@Prop({default: false})
@Prop({ default: false })
protected readonly error: boolean;
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();

8
web/satellite/src/components/account/billing/coupons/AddCouponCode2.vue
View File

@ -30,7 +30,6 @@ import AddCouponCodeInput2 from '@/components/common/AddCouponCodeInput2.vue';
import CloseIcon from '@/../static/images/common/closeCross.svg';
import CouponIcon from '@/../static/images/account/billing/greenCoupon.svg';
// @vue/component
@Component({
components: {
@ -41,19 +40,18 @@ import CouponIcon from '@/../static/images/account/billing/greenCoupon.svg';
})
export default class AddCouponCode extends Vue {
@Prop({default: false})
@Prop({ default: false })
protected readonly success: boolean;
@Prop({default: false})
@Prop({ default: false })
protected readonly error: boolean;
/**
* Closes add coupon modal.
*/
public onCloseClick(): void {
this.$emit("toggleMethod")
this.$emit('toggleMethod');
}
}
</script>

13
web/satellite/src/components/account/billing/coupons/CouponArea.vue
View File

@ -53,18 +53,17 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { Coupon, CouponDuration } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import CouponAddIcon from '@/../static/images/account/billing/couponAdd.svg';
import CouponIcon from '@/../static/images/account/billing/couponLarge.svg';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { Coupon, CouponDuration } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {
@ -96,7 +95,7 @@ export default class CouponArea extends Vue {
*/
public onCreateClick(): void {
this.analytics.pageVisit(RouteConfig.Billing.with(RouteConfig.AddCouponCode).path);
this.$router.push({ name: RouteConfig.AddCouponCode.name })
this.$router.push({ name: RouteConfig.AddCouponCode.name });
}
/**

11
web/satellite/src/components/account/billing/depositAndBillingHistory/DetailedHistory.vue
View File

@ -27,18 +27,17 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import PaymentsItem from '@/components/account/billing/depositAndBillingHistory/PaymentsItem.vue';
import SortingHeader from '@/components/account/billing/depositAndBillingHistory/SortingHeader.vue';
import VLoader from '@/components/common/VLoader.vue';
import BackImage from '@/../static/images/account/billing/back.svg';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {

8
web/satellite/src/components/account/billing/depositAndBillingHistory/PaymentsHistoryItemDate.vue
View File

@ -35,16 +35,16 @@ export default class PaymentsHistoryItemDate extends Vue {
/**
* expiration date.
*/
@Prop({default: () => new Date()})
@Prop({ default: () => new Date() })
private readonly expiration: Date;
/**
* creation date.
*/
@Prop({default: () => new Date()})
@Prop({ default: () => new Date() })
private readonly start: Date;
@Prop({default: 0})
@Prop({ default: 0 })
private readonly type: PaymentsHistoryItemType;
@Prop({default: ''})
@Prop({ default: '' })
private readonly status: PaymentsHistoryItemStatus;
private expirationTimeInSeconds: number;

6
web/satellite/src/components/account/billing/depositAndBillingHistory/PaymentsItem.vue
View File

@ -35,10 +35,10 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import PaymentsHistoryItemDate from '@/components/account/billing/depositAndBillingHistory/PaymentsHistoryItemDate.vue';
import { PaymentsHistoryItem } from '@/types/payments';
import PaymentsHistoryItemDate from '@/components/account/billing/depositAndBillingHistory/PaymentsHistoryItemDate.vue';
// @vue/component
@Component({
components: {
@ -46,7 +46,7 @@ import { PaymentsHistoryItem } from '@/types/payments';
},
})
export default class PaymentsItem extends Vue {
@Prop({default: () => new PaymentsHistoryItem()})
@Prop({ default: () => new PaymentsHistoryItem() })
private readonly billingItem: PaymentsHistoryItem;
}
</script>

11
web/satellite/src/components/account/billing/depositAndBillingHistory/PeriodSelection.vue
View File

@ -31,17 +31,16 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import DatePickerIcon from '@/../static/images/account/billing/datePicker.svg';
import SelectedIcon from '@/../static/images/account/billing/selected.svg';
import ExpandIcon from '@/../static/images/common/BlueExpand.svg';
import HideIcon from '@/../static/images/common/BlueHide.svg';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsHttpApi } from '@/api/analytics';
// @vue/component
@Component({
components: {

7
web/satellite/src/components/account/billing/depositAndBillingHistory/SmallDepositHistory.vue
View File

@ -19,14 +19,13 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import PaymentsItem from '@/components/account/billing/depositAndBillingHistory/PaymentsItem.vue';
import SortingHeader from '@/components/account/billing/depositAndBillingHistory/SortingHeader.vue';
import { RouteConfig } from '@/router';
import { PaymentsHistoryItem, PaymentsHistoryItemType } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import SortingHeader from '@/components/account/billing/depositAndBillingHistory/SortingHeader.vue';
import PaymentsItem from '@/components/account/billing/depositAndBillingHistory/PaymentsItem.vue';
// @vue/component
@Component({
components: {

20
web/satellite/src/components/account/billing/depositAndBillingHistory/SortingHeader2.vue
View File

@ -45,10 +45,10 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
import { SortDirection } from '@/types/common';
import VerticalArrows from '@/components/common/VerticalArrows.vue';
// @vue/component
@Component({
components: {
@ -57,15 +57,15 @@ import { SortDirection } from '@/types/common';
})
export default class SortingHeader2 extends Vue {
public DATE_DIRECTION = 'date-descending'
public AMOUNT_DIRECTION = 'amount-descending'
public STATUS_DIRECTION = 'status-descending'
public DATE_DIRECTION = 'date-descending';
public AMOUNT_DIRECTION = 'amount-descending';
public STATUS_DIRECTION = 'status-descending';
public dateSortDirection: SortDirection = SortDirection.ASCENDING;
public amountSortDirection: SortDirection = SortDirection.ASCENDING;
public statusSortDirection: SortDirection = SortDirection.ASCENDING;
public arrowController: {date: boolean, amount: boolean, status: boolean} = {date: false, amount: false, status: false}
public arrowController: {date: boolean, amount: boolean, status: boolean} = { date: false, amount: false, status: false };
/**
* sorts table by date
@ -75,19 +75,19 @@ export default class SortingHeader2 extends Vue {
case 'date':
this.$emit('sortFunction', this.DATE_DIRECTION);
this.DATE_DIRECTION = this.DATE_DIRECTION === 'date-ascending' ? 'date-descending' : 'date-ascending';
this.arrowController = {date: true, amount: false, status: false};
this.arrowController = { date: true, amount: false, status: false };
this.dateSortDirection = this.dateSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
break;
case 'amount':
this.$emit('sortFunction', this.AMOUNT_DIRECTION);
this.AMOUNT_DIRECTION = this.AMOUNT_DIRECTION === 'amount-ascending' ? 'amount-descending' : 'amount-ascending';
this.arrowController = {date: false, amount: true, status: false};
this.arrowController = { date: false, amount: true, status: false };
this.amountSortDirection = this.amountSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
break
break;
case 'status':
this.$emit('sortFunction', this.STATUS_DIRECTION);
this.STATUS_DIRECTION = this.STATUS_DIRECTION === 'status-ascending' ? 'status-descending' : 'status-ascending';
this.arrowController = {date: false, amount: false, status: true};
this.arrowController = { date: false, amount: false, status: true };
this.statusSortDirection = this.statusSortDirection === SortDirection.DESCENDING ? SortDirection.ASCENDING : SortDirection.DESCENDING;
break;
default:

6
web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue
View File

@ -27,14 +27,14 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import UsageAndChargesItem from '@/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue';
import VLoader from '@/components/common/VLoader.vue';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectUsageAndCharges } from '@/types/payments';
import { MONTHS_NAMES } from '@/utils/constants/date';
import VLoader from '@/components/common/VLoader.vue';
import UsageAndChargesItem from '@/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue';
// @vue/component
@Component({
components: {

8
web/satellite/src/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem.vue
View File

@ -49,15 +49,15 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import ChargesExpandIcon from '@/../static/images/account/billing/chargesExpand.svg';
import ChargesHideIcon from '@/../static/images/account/billing/chargesHide.svg';
import { ProjectUsageAndCharges } from '@/types/payments';
import { Project } from '@/types/projects';
import { Size } from '@/utils/bytesSize';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { MetaUtils } from '@/utils/meta';
import ChargesHideIcon from '@/../static/images/account/billing/chargesHide.svg';
import ChargesExpandIcon from '@/../static/images/account/billing/chargesExpand.svg';
// @vue/component
@Component({
components: {
@ -69,7 +69,7 @@ export default class UsageAndChargesItem extends Vue {
/**
* item represents usage and charges of current project by period.
*/
@Prop({default: () => new ProjectUsageAndCharges()})
@Prop({ default: () => new ProjectUsageAndCharges() })
private readonly item: ProjectUsageAndCharges;
/**

9
web/satellite/src/components/account/billing/estimatedCostsAndCredits/UsageAndChargesItem2.vue
View File

@ -54,14 +54,14 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import GreyChevron from '@/../static/images/common/greyChevron.svg';
import { ProjectUsageAndCharges } from '@/types/payments';
import { Project } from '@/types/projects';
import { Size } from '@/utils/bytesSize';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { MetaUtils } from '@/utils/meta';
import GreyChevron from '@/../static/images/common/greyChevron.svg';
// @vue/component
@Component({
components: {
@ -72,7 +72,7 @@ export default class UsageAndChargesItem2 extends Vue {
/**
* item represents usage and charges of current project by period.
*/
@Prop({default: () => new ProjectUsageAndCharges()})
@Prop({ default: () => new ProjectUsageAndCharges() })
private readonly item: ProjectUsageAndCharges;
/**
@ -85,8 +85,7 @@ export default class UsageAndChargesItem2 extends Vue {
*/
private readonly GB_IN_TB = 1000;
public paymentMethod = "test";
public paymentMethod = 'test';
/**
* projectName returns project name.

5
web/satellite/src/components/account/billing/paymentMethods/AddCardForm.vue
View File

@ -16,14 +16,13 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { USER_ACTIONS } from '@/store/modules/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
const {
ADD_CREDIT_CARD,
GET_CREDIT_CARDS,

1
web/satellite/src/components/account/billing/paymentMethods/AddStorjForm.vue
View File

@ -9,6 +9,7 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PaymentAmountOption } from '@/types/payments';

13
web/satellite/src/components/account/billing/paymentMethods/AddTokenCard.vue
View File

@ -33,12 +33,13 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import StorjLarge from '@/../static/images/billing/storj-icon-large.svg';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PaymentAmountOption } from '@/types/payments';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PaymentAmountOption } from '@/types/payments';
import StorjLarge from '@/../static/images/billing/storj-icon-large.svg';
const {
MAKE_TOKEN_DEPOSIT,
@ -54,7 +55,7 @@ const {
},
})
export default class AddTokenCard extends Vue {
@Prop({default: 0})
@Prop({ default: 0 })
private readonly totalCount: number;
private readonly DEFAULT_TOKEN_DEPOSIT_VALUE = 10; // in dollars.
private readonly MAX_TOKEN_AMOUNT = 1000000; // in dollars.
@ -63,7 +64,7 @@ export default class AddTokenCard extends Vue {
private pageLoaded = true;
public toggleShowAddFunds(): void {
this.$emit("toggleShowAddFunds");
this.$emit('toggleShowAddFunds');
}
/**
@ -94,7 +95,7 @@ export default class AddTokenCard extends Vue {
depositWindow.focus();
this.pageLoaded = true;
}
this.$emit("fetchHistory");
this.$emit('fetchHistory');
} catch (error) {
await this.$notify.error(error.message);
this.$emit('toggleIsLoading');

8
web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
View File

@ -76,8 +76,8 @@
import { Component, Vue } from 'vue-property-decorator';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
import { Wallet } from "@/types/payments";
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { Wallet } from '@/types/payments';
import VButton from '@/components/common/VButton.vue';
import VInfo from '@/components/common/VInfo.vue';
@ -109,7 +109,7 @@ export default class AddTokenCardNative extends Vue {
try {
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_WALLET);
} catch (error) {
await this.$notify.error(error.message)
await this.$notify.error(error.message);
} finally {
this.isLoading = false;
}
@ -128,7 +128,7 @@ export default class AddTokenCardNative extends Vue {
*/
private get wallet(): Wallet {
// TODO: remove this when backend is ready.
return {address: 'ijefiw54et945t89459ty8e98c4jyc8489yec985yce8i59y8c598yc56', balance: 234234}
return { address: 'ijefiw54et945t89459ty8e98c4jyc8489yec985yce8i59y8c598yc56', balance: 234234 };
// return this.$store.state.paymentsModule.wallet;
}
}

12
web/satellite/src/components/account/billing/paymentMethods/BalanceTokenCard.vue
View File

@ -83,10 +83,12 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { PaymentsHistoryItem } from '@/types/payments';
import VButton from '@/components/common/VButton.vue';
import StorjSmall from '@/../static/images/billing/storj-icon-small.svg';
import StorjLarge from '@/../static/images/billing/storj-icon-large.svg';
import VButton from '@/components/common/VButton.vue';
import { PaymentsHistoryItem } from '@/types/payments';
// @vue/component
@Component({
@ -97,15 +99,15 @@ import { PaymentsHistoryItem } from '@/types/payments';
},
})
export default class BalanceTokenCard extends Vue {
@Prop({default: () => new PaymentsHistoryItem()})
@Prop({ default: () => new PaymentsHistoryItem() })
private readonly billingItem: PaymentsHistoryItem;
public toggleShowAddFunds(): void {
this.$emit("toggleShowAddFunds")
this.$emit('toggleShowAddFunds');
}
public toggleTransactionsTable(): void {
this.$emit("showTransactions")
this.$emit('showTransactions');
}
}
</script>

8
web/satellite/src/components/account/billing/paymentMethods/CardComponent.vue
View File

@ -41,6 +41,9 @@
import Vue, { VueConstructor } from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { CreditCard } from '@/types/payments';
import CardDialog from '@/components/account/billing/paymentMethods/CardDialog.vue';
import AmericanExpressIcon from '@/../static/images/payments/cardIcons/americanexpress.svg';
@ -52,9 +55,6 @@ import MastercardIcon from '@/../static/images/payments/cardIcons/mastercard.svg
import UnionPayIcon from '@/../static/images/payments/cardIcons/unionpay.svg';
import VisaIcon from '@/../static/images/payments/cardIcons/visa.svg';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { CreditCard } from '@/types/payments';
const {
TOGGLE_CARD_SELECTION,
} = PAYMENTS_ACTIONS;
@ -74,7 +74,7 @@ const {
},
})
export default class CardComponent extends Vue {
@Prop({default: () => new CreditCard()})
@Prop({ default: () => new CreditCard() })
private readonly creditCard: CreditCard;
// TODO: move to CreditCard

2
web/satellite/src/components/account/billing/paymentMethods/CardDialog.vue
View File

@ -22,7 +22,7 @@ const {
// @vue/component
@Component
export default class CardDialog extends Vue {
@Prop({default: ''})
@Prop({ default: '' })
private readonly cardId: string;
/**

8
web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
View File

@ -85,6 +85,10 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { CreditCard } from '@/types/payments';
import { PaymentMethodsBlockState } from '@/utils/constants/billingEnums';
import AddCardForm from '@/components/account/billing/paymentMethods/AddCardForm.vue';
import AddStorjForm from '@/components/account/billing/paymentMethods/AddStorjForm.vue';
import CardComponent from '@/components/account/billing/paymentMethods/CardComponent.vue';
@ -95,10 +99,6 @@ import VLoader from '@/components/common/VLoader.vue';
import LockImage from '@/../static/images/account/billing/lock.svg';
import SuccessImage from '@/../static/images/account/billing/success.svg';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { CreditCard } from '@/types/payments';
import { PaymentMethodsBlockState } from '@/utils/constants/billingEnums';
interface AddCardConfirm {
onConfirmAddStripe(): Promise<void>;
}

2
web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue
View File

@ -41,7 +41,7 @@ export default class PaymentsBonus extends Vue {
/**
* Indicates if any credit card is attached to account.
*/
@Prop({default: false})
@Prop({ default: false })
public readonly anyCreditCards: boolean;
}
</script>

8
web/satellite/src/components/account/billing/paymentMethods/StripeCardInput.vue
View File

@ -32,7 +32,7 @@ interface StripeResponse {
// @vue/component
@Component
export default class StripeCardInput extends Vue {
@Prop({default: () => () => console.error('onStripeResponse is not reinitialized')})
@Prop({ default: () => () => console.error('onStripeResponse is not reinitialized') })
private readonly onStripeResponseCallback: (tokenId: unknown) => void;
private isLoading = false;
@ -93,11 +93,11 @@ export default class StripeCardInput extends Vue {
*/
public async mounted(): Promise<void> {
if (!window['Stripe']){
const script = new LoadScript("https://js.stripe.com/v3/",
const script = new LoadScript('https://js.stripe.com/v3/',
() => { this.initStripe(); },
() => { this.$notify.error('Stripe library not loaded');
script.remove(); }
)
script.remove(); },
);
return;
}

4
web/satellite/src/components/account/billing/paymentMethods/TokenDepositSelection.vue
View File

@ -68,9 +68,9 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
// @vue/component
@Component
export default class TokenDepositSelection3 extends Vue {
@Prop({default: () => []})
@Prop({ default: () => [] })
public readonly paymentOptions: PaymentAmountOption[];
@Prop({default: 'old'})
@Prop({ default: 'old' })
public readonly selectionStyle: string;
/**

2
web/satellite/src/components/account/billing/paymentMethods/TokenTransactionItem.vue
View File

@ -44,7 +44,7 @@ import { PaymentsHistoryItem } from '@/types/payments';
// @vue/component
@Component
export default class TokenTransactionItem extends Vue {
@Prop({default: () => new PaymentsHistoryItem()})
@Prop({ default: () => new PaymentsHistoryItem() })
private readonly billingItem: PaymentsHistoryItem;
}
</script>

6
web/satellite/src/components/account/mfa/ConfirmMFAInput.vue
View File

@ -25,11 +25,11 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class ConfirmMFAInput extends Vue {
@Prop({default: () => () => {}})
@Prop({ default: () => () => {} })
public readonly onInput: (value: string) => void;
@Prop({default: false})
@Prop({ default: false })
public readonly isRecovery: boolean;
@Prop({default: false})
@Prop({ default: false })
public readonly isError: boolean;
public code = '';

6
web/satellite/src/components/browser/BreadCrumbs.vue
View File

@ -66,7 +66,7 @@ export default class BreadCrumbs extends Vue {
* Retrieves the current path from the store and creates an array of folders for the bread crumbs that the user can click on.
*/
public get crumbs(): string[] {
let path: string[] = this.$store.state.files.path.split("/");
let path: string[] = this.$store.state.files.path.split('/');
path =
path.length > 1
? [this.bucketName, ...path.slice(0, path.length - 1)]
@ -79,8 +79,8 @@ export default class BreadCrumbs extends Vue {
*/
public link(idx: number): string {
const crumbs = this.crumbs;
let path = "";
if (idx > 0) path = crumbs.slice(1, idx + 1).join("/") + "/";
let path = '';
if (idx > 0) path = crumbs.slice(1, idx + 1).join('/') + '/';
return this.$store.state.files.browserRoot + path;
}

99
web/satellite/src/components/browser/FileBrowser.vue
View File

@ -365,22 +365,25 @@
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import FileBrowserHeader from "./FileBrowserHeader.vue";
import FileEntry from "./FileEntry.vue";
import BreadCrumbs from "./BreadCrumbs.vue";
import FileModal from "./FileModal.vue";
import FileShareModal from "./FileShareModal.vue";
import NewFolderModal from "./NewFolderModal.vue";
import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
import BlackArrowHide from '@/../static/images/common/BlackArrowHide.svg';
import FileBrowserHeader from './FileBrowserHeader.vue';
import FileEntry from './FileEntry.vue';
import BreadCrumbs from './BreadCrumbs.vue';
import FileModal from './FileModal.vue';
import FileShareModal from './FileShareModal.vue';
import NewFolderModal from './NewFolderModal.vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { BrowserFile } from "@/types/browser";
import { BrowserFile } from '@/types/browser';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { RouteConfig } from "@/router";
import BucketSettingsNav from "@/components/objects/BucketSettingsNav.vue";
import { RouteConfig } from '@/router';
import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
import VTable from '@/components/common/VTable.vue';
import BlackArrowHide from '@/../static/images/common/BlackArrowHide.svg';
import BlackArrowExpand from '@/../static/images/common/BlackArrowExpand.svg';
// @vue/component
@Component({
components: {
@ -393,7 +396,7 @@ import VTable from '@/components/common/VTable.vue';
FileShareModal,
BlackArrowExpand,
BlackArrowHide,
NewFolderModal
NewFolderModal,
},
})
export default class FileBrowser extends Vue {
@ -401,7 +404,7 @@ export default class FileBrowser extends Vue {
folderInput: HTMLInputElement;
fileInput: HTMLInputElement;
};
public createFolderInput = "";
public createFolderInput = '';
public creatingFolderSpinner = false;
public deleteConfirmation = false;
public fetchingFilesSpinner = false;
@ -413,7 +416,7 @@ export default class FileBrowser extends Vue {
* Check if the s3 client has been initialized in the store.
*/
public get isInitialized(): boolean {
return this.$store.getters["files/isInitialized"];
return this.$store.getters['files/isInitialized'];
}
/**
@ -452,10 +455,10 @@ export default class FileBrowser extends Vue {
* Return the text of how many files in total are being uploaded to be displayed to give users more context.
*/
public get formattedFilesWaitingToBeUploaded(): string {
let file = "file";
let file = 'file';
if (this.filesUploadingLength > 1) {
file = "files";
file = 'files';
}
return `${this.filesUploadingLength} ${file}`;
@ -468,16 +471,16 @@ export default class FileBrowser extends Vue {
const charsOtherThanSpaceExist =
this.createFolderInput.trim().length > 0;
const noForwardSlashes = this.createFolderInput.indexOf("/") === -1;
const noForwardSlashes = this.createFolderInput.indexOf('/') === -1;
const nameIsNotOnlyPeriods =
[...this.createFolderInput.trim()].filter(
(char) => char === "."
(char) => char === '.',
).length !== this.createFolderInput.trim().length;
const notDuplicate =
this.files.filter(
(file) => file.Key === this.createFolderInput.trim()
(file) => file.Key === this.createFolderInput.trim(),
).length === 0;
return (
@ -499,21 +502,21 @@ export default class FileBrowser extends Vue {
* Retrieve all of the files sorted from the store.
*/
private get files(): BrowserFile[] {
return this.$store.getters["files/sortedFiles"];
return this.$store.getters['files/sortedFiles'];
}
/**
* Return an array of BrowserFile type that are files and not folders.
*/
public get singleFiles(): BrowserFile[] {
return this.files.filter((f) => f.type === "file");
return this.files.filter((f) => f.type === 'file');
}
/**
* Return an array of BrowserFile type that are folders and not files.
*/
public get folders(): BrowserFile[] {
return this.files.filter((f) => f.type === "folder");
return this.files.filter((f) => f.type === 'folder');
}
/**
@ -522,7 +525,7 @@ export default class FileBrowser extends Vue {
private get routePath(): string {
let pathMatch = this.$route.params.pathMatch;
pathMatch = Array.isArray(pathMatch)
? pathMatch.join("/") + "/"
? pathMatch.join('/') + '/'
: pathMatch;
return pathMatch;
}
@ -572,7 +575,7 @@ export default class FileBrowser extends Vue {
/**
* Watch for changes in the path and call goToRoutePath, navigating away from the current page.
*/
@Watch("routePath")
@Watch('routePath')
private async handleRoutePathChange() {
await this.goToRoutePath();
}
@ -598,10 +601,10 @@ export default class FileBrowser extends Vue {
try {
this.analytics.pageVisit(`${this.$store.state.files.browserRoot}${this.path}`);
await this.$router.push({
path: `${this.$store.state.files.browserRoot}${this.path}`
path: `${this.$store.state.files.browserRoot}${this.path}`,
});
} catch (err) {
await this.list("");
await this.list('');
}
}
@ -614,19 +617,19 @@ export default class FileBrowser extends Vue {
*/
public closeModalDropdown(): void {
if (this.$store.state.files.modalPath) {
this.$store.commit("files/closeModal");
this.$store.commit('files/closeModal');
}
if (this.$store.state.files.fileShareModal) {
this.$store.commit("files/closeFileShareModal");
this.$store.commit('files/closeFileShareModal');
}
if (this.$store.state.files.openedDropdown) {
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/closeDropdown');
}
if (this.$store.state.files.selectedFile) {
this.$store.dispatch("files/clearAllSelectedFiles");
this.$store.dispatch('files/clearAllSelectedFiles');
}
}
@ -635,8 +638,8 @@ export default class FileBrowser extends Vue {
*/
public toggleFolderCreationInput(): void {
this.$store.dispatch(
"files/updateCreateFolderInputShow",
!this.$store.state.files.createFolderInputShow
'files/updateCreateFolderInputShow',
!this.$store.state.files.createFolderInputShow,
);
}
@ -645,7 +648,7 @@ export default class FileBrowser extends Vue {
*/
public filename(file: BrowserFile): string {
return file.Key.length > 25
? file.Key.slice(0, 25) + "..."
? file.Key.slice(0, 25) + '...'
: file.Key;
}
@ -653,25 +656,25 @@ export default class FileBrowser extends Vue {
* Upload the current selected or dragged-and-dropped file.
*/
public async upload(e: Event): Promise<void> {
await this.$store.dispatch("files/upload", e);
await this.$store.dispatch('files/upload', e);
this.analytics.eventTriggered(AnalyticsEvent.OBJECT_UPLOADED);
const target = e.target as HTMLInputElement;
target.value = "";
target.value = '';
}
/**
* Cancel the upload of the current file that's passed in as an argument.
*/
public cancelUpload(fileName: string): void {
this.$store.dispatch("files/cancelUpload", fileName);
this.$store.dispatch('files/cancelUpload', fileName);
}
/**
* Call the list method from the store, which will trigger a re-render and fetch all files under the current path passed in as an argument.
*/
private async list(path: string): Promise<void> {
await this.$store.dispatch("files/list", path, {
root: true
await this.$store.dispatch('files/list', path, {
root: true,
});
}
@ -679,16 +682,16 @@ export default class FileBrowser extends Vue {
* Remove the folder creation input and close any opened dropdowns when a user chooses to navigate back to the previous folder.
*/
public async back(): Promise<void> {
this.$store.dispatch("files/updateCreateFolderInputShow", false);
await this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/updateCreateFolderInputShow', false);
await this.$store.dispatch('files/closeDropdown');
}
/**
* Navigate to the path under routePath.
*/
private async goToRoutePath(): Promise<void> {
if (typeof this.routePath === "string") {
await this.$store.dispatch("files/closeDropdown");
if (typeof this.routePath === 'string') {
await this.$store.dispatch('files/closeDropdown');
await this.list(this.routePath);
}
}
@ -725,15 +728,15 @@ export default class FileBrowser extends Vue {
// create folder
await this.$store.dispatch(
"files/createFolder",
this.createFolderInput.trim()
'files/createFolder',
this.createFolderInput.trim(),
);
// clear folder input
this.createFolderInput = "";
this.createFolderInput = '';
// remove the folder creation input
this.$store.dispatch("files/updateCreateFolderInputShow", false);
this.$store.dispatch('files/updateCreateFolderInputShow', false);
// remove the spinner
this.creatingFolderSpinner = false;
@ -743,8 +746,8 @@ export default class FileBrowser extends Vue {
* Cancel folder creation clearing out the input and hiding the folder creation input.
*/
public cancelFolderCreation(): void {
this.createFolderInput = "";
this.$store.dispatch("files/updateCreateFolderInputShow", false);
this.createFolderInput = '';
this.$store.dispatch('files/updateCreateFolderInputShow', false);
}
/**

48
web/satellite/src/components/browser/FileBrowserHeader.vue
View File

@ -218,17 +218,17 @@ import { Fragment } from 'vue-fragment';
// @vue/component
@Component({
components: {
Fragment
Fragment,
},
})
export default class FileBrowserHeader extends Vue {
private hover = "";
private hover = '';
/**
* Check if a heading is sorted in descending order.
*/
private isDesc(heading: string): boolean {
return this.headingSorted === heading && this.orderBy === "desc";
return this.headingSorted === heading && this.orderBy === 'desc';
}
/**
@ -256,63 +256,63 @@ export default class FileBrowserHeader extends Vue {
* Set the heading for files/folders to be sorted by in the store.
*/
private sortBy(heading: string): void {
this.$store.commit("files/sort", heading);
this.$store.commit('files/sort', heading);
}
/**
* Get the current heading being sorted from the store.
*/
private get headingSorted(): string {
return this.fromFilesStore("headingSorted");
return this.fromFilesStore('headingSorted');
}
/**
* Get the current order being sorted from the store.
*/
private get orderBy(): string {
return this.fromFilesStore("orderBy");
return this.fromFilesStore('orderBy');
}
/**
* Check if the name heading is being sorted in descending order.
*/
public get nameDesc(): boolean {
return this.isDesc("name");
return this.isDesc('name');
}
/**
* Check if the size heading is being sorted in descending order.
*/
public get sizeDesc(): boolean {
return this.isDesc("size");
return this.isDesc('size');
}
/**
* Check if the date heading is being sorted in descending order.
*/
public get dateDesc(): boolean {
return this.isDesc("date");
return this.isDesc('date');
}
/**
* Check if the name heading's arrow should be displayed.
*/
public get showNameArrow(): boolean {
return this.showArrow("name");
return this.showArrow('name');
}
/**
* Check if the size heading's arrow should be displayed.
*/
public get showSizeArrow(): boolean {
return this.showArrow("size");
return this.showArrow('size');
}
/**
* Check if the date heading's arrow should be displayed.
*/
public get showDateArrow(): boolean {
return this.showArrow("date");
return this.showArrow('date');
}
/**
@ -333,56 +333,56 @@ export default class FileBrowserHeader extends Vue {
* Check if the files/folders deletion dropdown should be displayed.
*/
public get displayDropdown(): boolean {
return this.$store.state.files.openedDropdown === "FileBrowser";
return this.$store.state.files.openedDropdown === 'FileBrowser';
}
/**
* Sort files/folder based on their name.
*/
public sortByName(): void {
this.sortBy("name");
this.sortBy('name');
}
/**
* Sort files/folder based on their size.
*/
public sortBySize(): void {
this.sortBy("size");
this.sortBy('size');
}
/**
* Sort files/folder based on their date.
*/
public sortByDate(): void {
this.sortBy("date");
this.sortBy('date');
}
/**
* Change the hover property to the name heading on hover.
*/
public mouseOverName(): void {
this.mouseOver("name");
this.mouseOver('name');
}
/**
* Change the hover property to the size heading on hover.
*/
public mouseOverSize(): void {
this.mouseOver("size");
this.mouseOver('size');
}
/**
* Change the hover property to the date heading on hover.
*/
public mouseOverDate(): void {
this.mouseOver("date");
this.mouseOver('date');
}
/**
* Change the hover property to nothing on mouse leave.
*/
public mouseLeave(): void {
this.hover = "";
this.hover = '';
}
/**
@ -390,22 +390,22 @@ export default class FileBrowserHeader extends Vue {
*/
public deleteSelectedDropdown(event: Event): void {
event.stopPropagation();
this.$store.dispatch("files/openFileBrowserDropdown");
this.$store.dispatch('files/openFileBrowserDropdown');
}
/**
* Delete the selected files/folders.
*/
public confirmDeleteSelection(): void {
this.$store.dispatch("files/deleteSelected");
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/deleteSelected');
this.$store.dispatch('files/closeDropdown');
}
/**
* Abort files/folder selected for deletion.
*/
public cancelDeleteSelection(): void {
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/closeDropdown');
}
}
</script>

140
web/satellite/src/components/browser/FileEntry.vue
View File

@ -366,21 +366,23 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import type { BrowserFile } from "@/types/browser";
import prettyBytes from "pretty-bytes";
import MiddleTruncate from "./MiddleTruncate.vue";
import { Component, Prop, Vue } from 'vue-property-decorator';
import prettyBytes from 'pretty-bytes';
import MiddleTruncate from './MiddleTruncate.vue';
import type { BrowserFile } from '@/types/browser';
// @vue/component
@Component({
components: {
MiddleTruncate,
}
},
})
export default class FileEntry extends Vue {
public deleteConfirmation = false;
@Prop({default: ""})
@Prop({ default: '' })
private readonly path: string;
@Prop()
private readonly file: BrowserFile;
@ -389,7 +391,7 @@ export default class FileEntry extends Vue {
* Return the name of file/folder formatted.
*/
public get filename(): string {
return this.file.Key
return this.file.Key;
}
/**
@ -403,7 +405,7 @@ export default class FileEntry extends Vue {
* Return the upload date of the file formatted.
*/
public get uploadDate(): string {
return this.file.LastModified.toLocaleString().split(",")[0];
return this.file.LastModified.toLocaleString().split(',')[0];
}
/**
@ -421,7 +423,7 @@ export default class FileEntry extends Vue {
const pathAndKey = this.$store.state.files.path + this.file.Key;
const url =
pathAndKey.length > 0
? browserRoot + pathAndKey + "/"
? browserRoot + pathAndKey + '/'
: browserRoot;
return url;
}
@ -433,10 +435,10 @@ export default class FileEntry extends Vue {
return !!(
this.$store.state.files.selectedAnchorFile === this.file ||
this.$store.state.files.selectedFiles.find(
(file) => file === this.file
(file) => file === this.file,
) ||
this.$store.state.files.shiftSelectedFiles.find(
(file) => file === this.file
(file) => file === this.file,
)
);
}
@ -445,22 +447,22 @@ export default class FileEntry extends Vue {
* Return a boolean signifying whether the current file/folder is a folder.
*/
public get fileTypeIsFolder(): boolean {
return this.file.type === "folder";
return this.file.type === 'folder';
}
/**
* Return a boolean signifying whether the current file/folder is a folder.
*/
public get fileTypeIsFile(): boolean {
return this.file.type === "file";
return this.file.type === 'file';
}
/**
* Open the modal for the current file.
*/
public openModal(): void {
this.$store.commit("files/openModal", this.path + this.file.Key);
this.$store.dispatch("files/closeDropdown");
this.$store.commit('files/openModal', this.path + this.file.Key);
this.$store.dispatch('files/closeDropdown');
}
/**
@ -468,7 +470,7 @@ export default class FileEntry extends Vue {
*/
public loadingSpinner(): boolean {
return !!this.$store.state.files.filesToBeDeleted.find(
(file) => file === this.file
(file) => file === this.file,
);
}
@ -476,7 +478,7 @@ export default class FileEntry extends Vue {
* Hide the folder creation input on navigation due to folder click.
*/
public fileClick(): void {
this.$store.dispatch("files/updateCreateFolderInputShow", false);
this.$store.dispatch('files/updateCreateFolderInputShow', false);
}
/**
@ -484,7 +486,7 @@ export default class FileEntry extends Vue {
*/
public selectFile(event: KeyboardEvent): void {
if (this.$store.state.files.openedDropdown) {
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/closeDropdown');
}
if (event.shiftKey) {
@ -504,7 +506,7 @@ export default class FileEntry extends Vue {
const files = [
...this.$store.state.files.selectedFiles,
...this.$store.state.files.shiftSelectedFiles
...this.$store.state.files.shiftSelectedFiles,
];
const selectedAnchorFile =
@ -516,23 +518,23 @@ export default class FileEntry extends Vue {
if (command && this.file === selectedAnchorFile) {
/* if it's [CMD + click] and the file selected is the actual selectedAnchorFile, then unselect the file but store it under unselectedAnchorFile in case the user decides to do a [shift + click] right after this action. */
this.$store.commit("files/setUnselectedAnchorFile", this.file);
this.$store.commit("files/setSelectedAnchorFile", null);
this.$store.commit('files/setUnselectedAnchorFile', this.file);
this.$store.commit('files/setSelectedAnchorFile', null);
} else if (command && files.includes(this.file)) {
/* if it's [CMD + click] and the file selected is a file that has already been selected in selectedFiles and shiftSelectedFiles, then unselect it by filtering it out. */
this.$store.dispatch(
"files/updateSelectedFiles",
'files/updateSelectedFiles',
selectedFiles.filter(
(fileSelected) => fileSelected !== this.file
)
(fileSelected) => fileSelected !== this.file,
),
);
this.$store.dispatch(
"files/updateShiftSelectedFiles",
'files/updateShiftSelectedFiles',
shiftSelectedFiles.filter(
(fileSelected) => fileSelected !== this.file
)
(fileSelected) => fileSelected !== this.file,
),
);
} else if (command && selectedAnchorFile) {
/* if it's [CMD + click] and there is already a selectedAnchorFile, then add the selectedAnchorFile and shiftSelectedFiles into the array of selectedFiles, set selectedAnchorFile to the file that was clicked, set unselectedAnchorFile to null, and set shiftSelectedFiles to an empty array. */
@ -543,34 +545,34 @@ export default class FileEntry extends Vue {
filesSelected.push(selectedAnchorFile);
}
this.$store.dispatch("files/updateSelectedFiles", [
this.$store.dispatch('files/updateSelectedFiles', [
...filesSelected,
...shiftSelectedFiles.filter(
(file) => !filesSelected.includes(file)
)
(file) => !filesSelected.includes(file),
),
]);
this.$store.commit("files/setSelectedAnchorFile", this.file);
this.$store.commit("files/setUnselectedAnchorFile", null);
this.$store.dispatch("files/updateShiftSelectedFiles", []);
this.$store.commit('files/setSelectedAnchorFile', this.file);
this.$store.commit('files/setUnselectedAnchorFile', null);
this.$store.dispatch('files/updateShiftSelectedFiles', []);
} else if (command) {
/* if it's [CMD + click] and it has not met any of the above conditions, then set selectedAnchorFile to file and set unselectedAnchorfile to null, update the selectedFiles, and update the shiftSelectedFiles */
this.$store.commit("files/setSelectedAnchorFile", this.file);
this.$store.commit("files/setUnselectedAnchorFile", null);
this.$store.commit('files/setSelectedAnchorFile', this.file);
this.$store.commit('files/setUnselectedAnchorFile', null);
this.$store.dispatch("files/updateSelectedFiles", [
this.$store.dispatch('files/updateSelectedFiles', [
...selectedFiles,
...shiftSelectedFiles
...shiftSelectedFiles,
]);
this.$store.dispatch("files/updateShiftSelectedFiles", []);
this.$store.dispatch('files/updateShiftSelectedFiles', []);
} else {
/* if it's just a file click without any modifier, then set selectedAnchorFile to the file that was clicked, set shiftSelectedFiles and selectedFiles to an empty array. */
this.$store.commit("files/setSelectedAnchorFile", this.file);
this.$store.dispatch("files/updateShiftSelectedFiles", []);
this.$store.dispatch("files/updateSelectedFiles", []);
this.$store.commit('files/setSelectedAnchorFile', this.file);
this.$store.dispatch('files/updateShiftSelectedFiles', []);
this.$store.dispatch('files/updateSelectedFiles', []);
}
}
@ -580,7 +582,7 @@ export default class FileEntry extends Vue {
private setShiftSelectedFiles(): void {
/* this function is responsible for selecting all files from selectedAnchorFile to the file that was selected with [shift + click] */
const files = this.$store.getters["files/sortedFiles"];
const files = this.$store.getters['files/sortedFiles'];
const unselectedAnchorFile =
this.$store.state.files.unselectedAnchorFile;
@ -588,22 +590,22 @@ export default class FileEntry extends Vue {
/* if there is an unselectedAnchorFile, meaning that in the previous action the user unselected the anchor file but is now chosing to do a [shift + click] on another file, then reset the selectedAnchorFile, the achor file, to unselectedAnchorFile. */
this.$store.commit(
"files/setSelectedAnchorFile",
unselectedAnchorFile
'files/setSelectedAnchorFile',
unselectedAnchorFile,
);
this.$store.commit("files/setUnselectedAnchorFile", null);
this.$store.commit('files/setUnselectedAnchorFile', null);
}
const selectedAnchorFile =
this.$store.state.files.selectedAnchorFile;
if (!selectedAnchorFile) {
this.$store.commit("files/setSelectedAnchorFile", this.file);
this.$store.commit('files/setSelectedAnchorFile', this.file);
return;
}
const anchorIdx = files.findIndex(
(file) => file === selectedAnchorFile
(file) => file === selectedAnchorFile,
);
const shiftIdx = files.findIndex((file) => file === this.file);
@ -611,15 +613,15 @@ export default class FileEntry extends Vue {
const end = Math.max(anchorIdx, shiftIdx) + 1;
this.$store.dispatch(
"files/updateShiftSelectedFiles",
'files/updateShiftSelectedFiles',
files
.slice(start, end)
.filter(
(file) =>
!this.$store.state.files.selectedFiles.includes(
file
) && file !== selectedAnchorFile
)
file,
) && file !== selectedAnchorFile,
),
);
}
@ -627,11 +629,11 @@ export default class FileEntry extends Vue {
* Open the share modal for the current file.
*/
public async share(): Promise<void> {
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/closeDropdown');
this.$store.commit(
"files/setFileShareModal",
this.path + this.file.Key
'files/setFileShareModal',
this.path + this.file.Key,
);
}
@ -640,9 +642,9 @@ export default class FileEntry extends Vue {
*/
public toggleDropdown(): void {
if (this.$store.state.files.openedDropdown === this.file.Key) {
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/closeDropdown');
} else {
this.$store.dispatch("files/openDropdown", this.file.Key);
this.$store.dispatch('files/openDropdown', this.file.Key);
}
// remove the dropdown delete confirmation
@ -654,13 +656,13 @@ export default class FileEntry extends Vue {
*/
public download(): void {
try {
this.$store.dispatch("files/download", this.file);
this.$notify.warning("Do not share download link with other people. If you want to share this data better use \"Share\" option.");
this.$store.dispatch('files/download', this.file);
this.$notify.warning('Do not share download link with other people. If you want to share this data better use "Share" option.');
} catch (error) {
this.$notify.error("Can not download your file");
this.$notify.error('Can not download your file');
}
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/closeDropdown');
this.deleteConfirmation = false;
}
@ -675,23 +677,23 @@ export default class FileEntry extends Vue {
* Delete the selected file/folder.
*/
public async finalDelete(): Promise<void> {
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch("files/addFileToBeDeleted", this.file);
this.$store.dispatch('files/closeDropdown');
this.$store.dispatch('files/addFileToBeDeleted', this.file);
const params = {
path: this.path,
file: this.file
file: this.file,
};
if (this.file.type === "file") {
await this.$store.dispatch("files/delete", params);
if (this.file.type === 'file') {
await this.$store.dispatch('files/delete', params);
} else {
this.$store.dispatch("files/deleteFolder", params);
this.$store.dispatch('files/deleteFolder', params);
}
// refresh the files displayed
await this.$store.dispatch("files/list");
this.$store.dispatch("files/removeFileFromToBeDeleted", this.file);
await this.$store.dispatch('files/list');
this.$store.dispatch('files/removeFileFromToBeDeleted', this.file);
this.deleteConfirmation = false;
}
@ -699,7 +701,7 @@ export default class FileEntry extends Vue {
* Abort the deletion of the current file/folder.
*/
public cancelDeletion(): void {
this.$store.dispatch("files/closeDropdown");
this.$store.dispatch('files/closeDropdown');
this.deleteConfirmation = false;
}
}

41
web/satellite/src/components/browser/FileModal.vue
View File

@ -204,16 +204,17 @@
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { BrowserFile } from '@/types/browser';
import prettyBytes from 'pretty-bytes';
import PlaceholderImage from '@/../static/images/browser/placeholder.svg'
import { BrowserFile } from '@/types/browser';
import PlaceholderImage from '@/../static/images/browser/placeholder.svg';
// @vue/component
@Component({
components: {
PlaceholderImage,
}
},
})
export default class FileModal extends Vue {
public objectLink = '';
@ -226,14 +227,14 @@ export default class FileModal extends Vue {
previewImage: HTMLImageElement;
previewVideo: HTMLVideoElement;
previewAudio: HTMLAudioElement;
}
};
/**
* Retrieve the file object that the modal is set to from the store.
*/
private get file(): BrowserFile {
return this.$store.state.files.files.find(
(file) => file.Key === this.filePath.split("/").slice(-1)[0]
(file) => file.Key === this.filePath.split('/').slice(-1)[0],
);
}
@ -250,8 +251,8 @@ export default class FileModal extends Vue {
public get size(): string {
return prettyBytes(
this.$store.state.files.files.find(
(file) => file.Key === this.file.Key
).Size
(file) => file.Key === this.file.Key,
).Size,
);
}
@ -259,7 +260,7 @@ export default class FileModal extends Vue {
* Format the upload date of the current file.
*/
public get uploadDate(): string {
return this.file.LastModified.toLocaleString().split(",")[0];
return this.file.LastModified.toLocaleString().split(',')[0];
}
/**
@ -278,7 +279,7 @@ export default class FileModal extends Vue {
}
return ['bmp', 'svg', 'jpg', 'jpeg', 'png', 'ico', 'gif'].includes(
this.extension.toLowerCase()
this.extension.toLowerCase(),
);
}
@ -291,7 +292,7 @@ export default class FileModal extends Vue {
}
return ['m4v', 'mp4', 'webm', 'mov', 'mkv'].includes(
this.extension.toLowerCase()
this.extension.toLowerCase(),
);
}
@ -313,14 +314,14 @@ export default class FileModal extends Vue {
return [
this.previewIsImage,
this.previewIsVideo,
this.previewIsAudio
this.previewIsAudio,
].every((value) => !value);
}
/**
* Watch for changes on the filepath and call `fetchObjectMapUrl` the moment it updates.
*/
@Watch("filePath")
@Watch('filePath')
private handleFilePathChange() {
this.fetchObjectMap();
if (!this.placeHolderDisplayable) this.setPreview();
@ -343,7 +344,7 @@ export default class FileModal extends Vue {
}
const objectMap: Blob | null = await this.$store.state.files.fetchObjectMap(
this.filePath
this.filePath,
);
if (!objectMap) {
@ -359,10 +360,10 @@ export default class FileModal extends Vue {
*/
public download(): void {
try {
this.$store.dispatch("files/download", this.file);
this.$notify.warning("Do not share download link with other people. If you want to share this data better use \"Share\" option.");
this.$store.dispatch('files/download', this.file);
this.$notify.warning('Do not share download link with other people. If you want to share this data better use "Share" option.');
} catch (error) {
this.$notify.error("Can not download your file");
this.$notify.error('Can not download your file');
}
}
@ -375,11 +376,11 @@ export default class FileModal extends Vue {
}
const object: Blob | null = await this.$store.state.files.fetchObjectPreview(
this.filePath
this.filePath,
);
if (!object) {
this.previewFailed = true
this.previewFailed = true;
return;
}
@ -420,7 +421,7 @@ export default class FileModal extends Vue {
*/
public async getSharedLink(): Promise<void> {
this.objectLink = await this.$store.state.files.fetchSharedLink(
this.filePath
this.filePath,
);
}
@ -429,7 +430,7 @@ export default class FileModal extends Vue {
*/
public stopClickPropagation(e: Event): void {
const target = e.target as HTMLElement;
if (target.id !== "detail-modal") {
if (target.id !== 'detail-modal') {
e.stopPropagation();
}
}

20
web/satellite/src/components/browser/FileShareModal.vue
View File

@ -74,19 +74,19 @@
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component, Vue } from 'vue-property-decorator';
import ShareContainer from "@/components/common/share/ShareContainer.vue";
import ShareContainer from '@/components/common/share/ShareContainer.vue';
// @vue/component
@Component({
components: {
ShareContainer,
}
},
})
export default class FileShareModal extends Vue {
public objectLink = "";
public copyText = "Copy Link";
public objectLink = '';
public copyText = 'Copy Link';
/**
* Retrieve the path to the current file that has the fileShareModal opened from the store.
@ -100,7 +100,7 @@ export default class FileShareModal extends Vue {
*/
public async created(): Promise<void> {
this.objectLink = await this.$store.state.files.fetchSharedLink(
this.filePath
this.filePath,
);
}
@ -109,9 +109,9 @@ export default class FileShareModal extends Vue {
*/
public async copy(): Promise<void> {
await this.$copyText(this.objectLink);
this.copyText = "Copied!";
this.copyText = 'Copied!';
setTimeout(() => {
this.copyText = "Copy Link";
this.copyText = 'Copy Link';
}, 2000);
}
@ -119,7 +119,7 @@ export default class FileShareModal extends Vue {
* Close the FileShareModal.
*/
public close(): void {
this.$store.commit("files/closeFileShareModal");
this.$store.commit('files/closeFileShareModal');
}
/**
@ -127,7 +127,7 @@ export default class FileShareModal extends Vue {
*/
public stopClickPropagation(e: Event): void {
const target = e.target as HTMLElement;
if (target.id !== "share-modal") {
if (target.id !== 'share-modal') {
e.stopPropagation();
}
}

2
web/satellite/src/components/browser/MiddleTruncate.vue
View File

@ -9,7 +9,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Component, Prop, Vue } from 'vue-property-decorator';
// @vue/component
@Component

27
web/satellite/src/components/browser/NewFolderModal.vue
View File

@ -74,6 +74,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { BrowserFile } from '@/types/browser';
// @vue/component
@ -83,21 +84,21 @@ export default class NewFolderModal extends Vue {
folderInput: HTMLInputElement;
fileInput: HTMLInputElement;
};
public createFolderInput = "";
public createFolderInput = '';
public creatingFolderSpinner = false;
/**
* Close the NewFolderModal.
*/
public close(): void {
this.$store.commit("files/closeNewFolderModal");
this.$store.commit('files/closeNewFolderModal');
}
/**
* Retrieve all of the files sorted from the store.
*/
private get files(): BrowserFile[] {
return this.$store.getters["files/sortedFiles"];
return this.$store.getters['files/sortedFiles'];
}
/**
@ -107,16 +108,16 @@ export default class NewFolderModal extends Vue {
const charsOtherThanSpaceExist =
this.createFolderInput.trim().length > 0;
const noForwardSlashes = this.createFolderInput.indexOf("/") === -1;
const noForwardSlashes = this.createFolderInput.indexOf('/') === -1;
const nameIsNotOnlyPeriods =
[...this.createFolderInput.trim()].filter(
(char) => char === "."
(char) => char === '.',
).length !== this.createFolderInput.trim().length;
const notDuplicate =
this.files.filter(
(file) => file.Key === this.createFolderInput.trim()
(file) => file.Key === this.createFolderInput.trim(),
).length === 0;
return (
@ -139,15 +140,15 @@ export default class NewFolderModal extends Vue {
// create folder
await this.$store.dispatch(
"files/createFolder",
this.createFolderInput.trim()
'files/createFolder',
this.createFolderInput.trim(),
);
// clear folder input
this.createFolderInput = "";
this.createFolderInput = '';
// remove the folder creation input
this.$store.dispatch("files/updateCreateFolderInputShow", false);
this.$store.dispatch('files/updateCreateFolderInputShow', false);
// remove the spinner
this.creatingFolderSpinner = false;
@ -157,8 +158,8 @@ export default class NewFolderModal extends Vue {
* Cancel folder creation clearing out the input and hiding the folder creation input.
*/
public cancelFolderCreation(): void {
this.createFolderInput = "";
this.$store.dispatch("files/updateCreateFolderInputShow", false);
this.createFolderInput = '';
this.$store.dispatch('files/updateCreateFolderInputShow', false);
}
/**
@ -166,7 +167,7 @@ export default class NewFolderModal extends Vue {
*/
public stopClickPropagation(e: Event): void {
const target = e.target as HTMLElement;
if (target.id !== "new-folder-modal") {
if (target.id !== 'new-folder-modal') {
e.stopPropagation();
}
}

8
web/satellite/src/components/common/AddCouponCodeInput.vue
View File

@ -68,16 +68,16 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { PaymentsHttpApi } from '@/api/payments';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import VInput from '@/components/common/VInput.vue';
import ValidationMessage from '@/components/common/ValidationMessage.vue';
import VButton from '@/components/common/VButton.vue';
import CheckIcon from '@/../static/images/common/validCheck.svg';
import { PaymentsHttpApi } from '@/api/payments';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
// @vue/component
@Component({
components: {

8
web/satellite/src/components/common/AddCouponCodeInput2.vue
View File

@ -41,16 +41,16 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { PaymentsHttpApi } from '@/api/payments';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import VInput from '@/components/common/VInput.vue';
import ValidationMessage from '@/components/common/ValidationMessage.vue';
import VButton from '@/components/common/VButton.vue';
import CheckIcon from '@/../static/images/common/validCheck.svg';
import { PaymentsHttpApi } from '@/api/payments';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
// @vue/component
@Component({
components: {

4
web/satellite/src/components/common/BaseChart.vue
View File

@ -7,9 +7,9 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
// @vue/component
@Component
export default class BaseChart extends Vue {
@Prop({default: 0})
@Prop({ default: 0 })
public readonly width: number;
@Prop({default: 0})
@Prop({ default: 0 })
public readonly height: number;
/**

16
web/satellite/src/components/common/GeneratePassphrase.vue
View File

@ -97,18 +97,18 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { generateMnemonic } from "bip39";
import { generateMnemonic } from 'bip39';
import { LocalData, UserIDPassSalt } from "@/utils/localData";
import { Download } from "@/utils/download";
import { LocalData, UserIDPassSalt } from '@/utils/localData';
import { Download } from '@/utils/download';
import VButton from '@/components/common/VButton.vue';
import VInfo from "@/components/common/VInfo.vue";
import VInput from "@/components/common/VInput.vue";
import VCheckbox from "@/components/common/VCheckbox.vue";
import VInfo from '@/components/common/VInfo.vue';
import VInput from '@/components/common/VInput.vue';
import VCheckbox from '@/components/common/VCheckbox.vue';
import EncryptIcon from "@/../static/images/objects/encrypt.svg";
import InfoIcon from "@/../static/images/common/smallGreyInfo.svg";
import EncryptIcon from '@/../static/images/objects/encrypt.svg';
import InfoIcon from '@/../static/images/common/smallGreyInfo.svg';
// @vue/component
@Component({

2
web/satellite/src/components/common/InfoNotification.vue
View File

@ -22,7 +22,7 @@ import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
components: {
CloseIcon,
InfoIcon,
}
},
})
export default class InfoNotification extends Vue {
public isShown = true;

4
web/satellite/src/components/common/PagesBlock.vue
View File

@ -21,9 +21,9 @@ import { CheckSelected, Page } from '@/types/pagination';
// @vue/component
@Component
export default class PagesBlock extends Vue {
@Prop({default: () => []})
@Prop({ default: () => [] })
public readonly pages: Page[];
@Prop({default: () => () => {}})
@Prop({ default: () => () => {} })
public readonly isSelected: CheckSelected;
}
</script>

8
web/satellite/src/components/common/PasswordStrength.vue
View File

@ -37,9 +37,9 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import VectorIcon from '@/../static/images/register/StrengthVector.svg';
import { Validator } from '@/utils/validation';
import {Validator} from '@/utils/validation';
import VectorIcon from '@/../static/images/register/StrengthVector.svg';
/**
* BarFillStyle class holds info for BarFillStyle entity.
@ -72,12 +72,12 @@ class StrengthLabelColor {
},
})
export default class PasswordStrength extends Vue {
@Prop({default: ''})
@Prop({ default: '' })
private readonly passwordString: string;
/**
* Indicates if component should be rendered.
*/
@Prop({default: false})
@Prop({ default: false })
private readonly isShown: boolean;
public get isPasswordLengthAcceptable(): boolean {

10
web/satellite/src/components/common/RegistrationSuccess.vue
View File

@ -53,14 +53,14 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { AuthHttpApi } from '@/api/auth';
import { RouteConfig } from '@/router';
import VButton from '@/components/common/VButton.vue';
import LogoIcon from '@/../static/images/logo.svg';
import MailIcon from '@/../static/images/register/mail.svg';
import { AuthHttpApi } from '@/api/auth';
import { RouteConfig } from "@/router";
// @vue/component
@Component({
components: {
@ -70,9 +70,9 @@ import { RouteConfig } from "@/router";
},
})
export default class RegistrationSuccess extends Vue {
@Prop({default: ''})
@Prop({ default: '' })
private readonly email: string;
@Prop({default: true})
@Prop({ default: true })
private readonly showManualActivationMsg: boolean;
private secondsToWait = 30;

10
web/satellite/src/components/common/SelectInput.vue
View File

@ -41,16 +41,16 @@ export default class SelectInput extends Vue {
protected value = '';
@Prop({default: ''})
@Prop({ default: '' })
protected readonly label: string;
@Prop({default: '48px'})
@Prop({ default: '48px' })
protected readonly height: string;
@Prop({default: '100%'})
@Prop({ default: '100%' })
protected readonly width: string;
@Prop({default: () => []})
@Prop({ default: () => [] })
protected readonly optionsList: string[];
@Prop({default: false})
@Prop({ default: false })
private readonly isWhite: boolean;
public created() {

5
web/satellite/src/components/common/TableItem.vue
View File

@ -21,11 +21,12 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import VTableCheckbox from "@/components/common/VTableCheckbox.vue";
import VTableCheckbox from '@/components/common/VTableCheckbox.vue';
// @vue/component
@Component({
components: { VTableCheckbox }
components: { VTableCheckbox },
})
export default class TableItem extends Vue {
@Prop({ default: false })

14
web/satellite/src/components/common/TablePagination.vue
View File

@ -18,10 +18,10 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import PaginationRightIcon from '@/../static/images/common/tablePaginationArrowRight.svg';
import { OnPageClickCallback } from '@/types/pagination';
import PaginationRightIcon from '@/../static/images/common/tablePaginationArrowRight.svg';
// @vue/component
@Component({
components: {
@ -32,20 +32,20 @@ export default class TablePagination extends Vue {
private currentPageNumber = 1;
public isLoading = false;
@Prop({default: 0})
@Prop({ default: 0 })
private readonly totalPageCount: number;
@Prop({default: 0})
@Prop({ default: 0 })
private readonly limit: number;
@Prop({default: 0})
@Prop({ default: 0 })
private readonly totalItemsCount: number;
@Prop({default: () => () => new Promise(() => false)})
@Prop({ default: () => () => new Promise(() => false) })
private readonly onPageClickCallback: OnPageClickCallback;
public get label(): string {
const currentMaxPage = this.currentPageNumber * this.limit > this.totalItemsCount ?
this.totalItemsCount
: this.currentPageNumber * this.limit;
return `${this.currentPageNumber * this.limit - this.limit + 1} - ${currentMaxPage} of ${this.totalItemsCount}`
return `${this.currentPageNumber * this.limit - this.limit + 1} - ${currentMaxPage} of ${this.totalItemsCount}`;
}
/**

6
web/satellite/src/components/common/VBar.vue
View File

@ -26,11 +26,11 @@ class BarFillStyle {
// @vue/component
@Component
export default class VBar extends Vue {
@Prop({default: 0})
@Prop({ default: 0 })
private readonly current: number;
@Prop({default: 0})
@Prop({ default: 0 })
private readonly max: number;
@Prop({default: '#0068DC'})
@Prop({ default: '#0068DC' })
private readonly color: string;
public get barFillStyle(): BarFillStyle {

34
web/satellite/src/components/common/VButton.vue
View File

@ -40,43 +40,43 @@ import DocumentIcon from '@/../static/images/common/documentIcon.svg';
LockIcon,
CreditCardIcon,
DocumentIcon,
TrashIcon
TrashIcon,
},
})
export default class VButton extends Vue {
@Prop({default: 'Default'})
@Prop({ default: 'Default' })
private readonly label: string;
@Prop({default: 'inherit'})
@Prop({ default: 'inherit' })
private readonly width: string;
@Prop({default: 'inherit'})
@Prop({ default: 'inherit' })
private readonly height: string;
@Prop({default: '16px'})
@Prop({ default: '16px' })
private readonly fontSize: string;
@Prop({default: '6px'})
@Prop({ default: '6px' })
private readonly borderRadius: string;
@Prop({ default: 'none' })
private readonly icon: string;
@Prop({default: false})
@Prop({ default: false })
private readonly isWhite: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isSolidDelete: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isTransparent: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isDeletion: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isGreyBlue: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isBlueWhite: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isWhiteGreen: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isGreenWhite: boolean;
@Prop({default: false})
@Prop({ default: false })
private isDisabled: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isUppercase: boolean;
@Prop({default: () => () => {}})
@Prop({ default: () => () => {} })
private readonly onPress: () => void;
public get style(): Record<string, unknown> {

10
web/satellite/src/components/common/VChart.vue
View File

@ -63,7 +63,7 @@ export default class VChart extends Vue {
ctx.stroke();
ctx.restore();
}
}
},
});
(this as unknown as RenderChart).renderChart(this.chartData, this.chartOptions);
}
@ -87,7 +87,7 @@ export default class VChart extends Vue {
maintainAspectRatios: false,
animation: false,
hover: {
animationDuration: 0
animationDuration: 0,
},
responsiveAnimationDuration: 0,
legend: {
@ -96,7 +96,7 @@ export default class VChart extends Vue {
layout: {
padding: {
top: 40,
}
},
},
elements: {
point: {
@ -112,8 +112,8 @@ export default class VChart extends Vue {
yAxes: [{
display: false,
ticks: {
beginAtZero: true
}
beginAtZero: true,
},
}],
xAxes: [{
display: true,

4
web/satellite/src/components/common/VCheckbox.vue
View File

@ -18,9 +18,9 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
// @vue/component
@Component
export default class VCheckbox extends Vue {
@Prop({default: false})
@Prop({ default: false })
private readonly isCheckboxError: boolean;
@Prop({default: ''})
@Prop({ default: '' })
private readonly label: string;
private checked = false;

8
web/satellite/src/components/common/VDateRangePicker.vue
View File

@ -14,7 +14,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Component, Prop, Vue } from 'vue-property-decorator';
import DatePicker from 'vue2-datepicker';
// @vue/component
@ -25,11 +25,11 @@ import DatePicker from 'vue2-datepicker';
})
export default class VDateRangePicker extends Vue {
@Prop({ default: false })
public readonly isOpen: boolean
public readonly isOpen: boolean;
@Prop({ default: () => false })
public readonly onDatePick: (dateRange: Date[]) => void
public readonly onDatePick: (dateRange: Date[]) => void;
@Prop({ default: undefined })
public readonly dateRange: Date[]
public readonly dateRange: Date[];
}
</script>

8
web/satellite/src/components/common/VHeader.vue
View File

@ -39,13 +39,13 @@ declare type searchCallback = (search: string) => Promise<void>;
},
})
export default class VHeader extends Vue {
@Prop({default: 'common'})
@Prop({ default: 'common' })
private readonly styleType: string;
@Prop({default: ''})
@Prop({ default: '' })
private readonly placeholder: string;
@Prop({default: function(): searchCallback {
@Prop({ default: function(): searchCallback {
return async function(_: string) {};
}})
} })
private readonly search: searchCallback;
public $refs!: {

8
web/satellite/src/components/common/VInfo.vue
View File

@ -32,14 +32,14 @@ import VButton from '@/components/common/VButton.vue';
@Component({
components: {
VButton,
}
},
})
export default class VInfo extends Vue {
@Prop({default: ''})
@Prop({ default: '' })
private readonly title: string;
@Prop({default: ''})
@Prop({ default: '' })
private readonly buttonLabel: string;
@Prop({default: () => () => false})
@Prop({ default: () => () => false })
private readonly onButtonClick: () => unknown;
public isVisible = false;

36
web/satellite/src/components/common/VInput.vue
View File

@ -81,41 +81,41 @@ import ErrorIcon from '@/../static/images/register/ErrorInfo.svg';
})
// TODO: merge these two components to have one single source of truth.
export default class VInput extends Vue {
@Prop({default: ''})
@Prop({ default: '' })
private readonly additionalLabel: string;
@Prop({default: 0})
@Prop({ default: 0 })
private readonly currentLimit: number;
@Prop({default: false})
@Prop({ default: false })
private readonly isOptional: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isLimitShown: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isMultiline: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly isLoading: boolean;
@Prop({default: ''})
@Prop({ default: '' })
protected readonly initValue: string;
@Prop({default: ''})
@Prop({ default: '' })
protected readonly label: string;
@Prop({default: 'default'})
@Prop({ default: 'default' })
protected readonly placeholder: string;
@Prop({default: false})
@Prop({ default: false })
protected readonly isPassword: boolean;
@Prop({default: '48px'})
@Prop({ default: '48px' })
protected readonly height: string;
@Prop({default: '100%'})
@Prop({ default: '100%' })
protected readonly width: string;
@Prop({default: ''})
@Prop({ default: '' })
protected readonly error: string;
@Prop({default: Number.MAX_SAFE_INTEGER})
@Prop({ default: Number.MAX_SAFE_INTEGER })
protected readonly maxSymbols: number;
@Prop({default: false})
@Prop({ default: false })
private readonly isWhite: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly withIcon: boolean;
@Prop({default: false})
@Prop({ default: false })
private readonly disabled: boolean;
@Prop({default: 'input-container'})
@Prop({ default: 'input-container' })
private readonly roleDescription: boolean;
private readonly textType: string = 'text';

Some files were not shown because too many files have changed in this diff Show More