-
Notifications
You must be signed in to change notification settings - Fork 387
/
ApplicationItem.vue
91 lines (79 loc) · 2.96 KB
/
ApplicationItem.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// Copyright (C) 2024 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<v-col cols="12" md="6" lg="6" xl="3">
<v-card class="px-2 py-4 h-100 align-content-space-between">
<v-card-item class="pb-0">
<img :src="app.src" :alt="app.name" width="42" height="42" class="rounded">
</v-card-item>
<v-card-item>
<v-chip size="small" variant="tonal" color="default" class="mb-2" rounded>
{{ app.category }}
</v-chip>
<h3 class="mb-1">
{{ app.name }}
</h3>
<p class="mt-1 text-high-emphasis">
{{ app.description }}
</p>
</v-card-item>
<v-card-item class="bottom">
<v-btn color="primary" @click="onSetup">
Setup
<template #append>
<v-icon :icon="mdiArrowRight" />
</template>
</v-btn>
<v-btn variant="outlined" color="default" class="ml-2" :href="app.docs" target="_blank" rel="noopener noreferrer">
Docs
<template #append>
<v-icon :icon="mdiOpenInNew" />
</template>
</v-btn>
</v-card-item>
</v-card>
</v-col>
<AccessSetupDialog
v-if="newAppSetupFlowEnabled"
v-model="dialog"
:access-name="app.name"
:docs-link="app.docs"
:default-access-type="neededAccessType"
is-app-setup
/>
<CreateAccessDialog v-else ref="accessDialog" v-model="dialog" :default-name="app.name" />
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { VBtn, VCard, VCardItem, VChip, VCol, VIcon } from 'vuetify/components';
import { mdiArrowRight, mdiOpenInNew } from '@mdi/js';
import { Application } from '@/types/applications';
import { AccessType, Exposed } from '@/types/createAccessGrant';
import { useTrialCheck } from '@/composables/useTrialCheck';
import { useConfigStore } from '@/store/modules/configStore';
import CreateAccessDialog from '@/components/dialogs/CreateAccessDialog.vue';
import AccessSetupDialog from '@/components/dialogs/AccessSetupDialog.vue';
const props = defineProps<{
app: Application
}>();
const { newAppSetupFlowEnabled } = useConfigStore().state.config;
const { withTrialCheck } = useTrialCheck();
const accessDialog = ref<Exposed>();
const dialog = ref<boolean>(false);
/**
* Returns access type needed for current app.
*/
const neededAccessType = computed<AccessType>(() => {
return props.app.name === 'Uplink' ? AccessType.AccessGrant : AccessType.S3;
});
/**
* Holds on setup button click logic.
* Starts create S3 credentials flow.
*/
function onSetup(): void {
withTrialCheck(() => {
accessDialog.value?.setTypes([neededAccessType.value]);
dialog.value = true;
});
}
</script>