jcloud/dashboard/src2/components/MarketplaceAppLinks.vue

100 lines
2.4 KiB
Vue

<template>
<Card title="Links" subtitle="Will be shown in marketplace">
<template #actions>
<Button icon-left="edit" @click="showEditLinksDialog = true">Edit</Button>
</template>
<Dialog
:options="{
title: 'Update Links',
actions: [
{
variant: 'solid',
label: 'Save Changes',
loading: $resources.updateAppLinks.loading,
onClick: () => $resources.updateAppLinks.submit()
}
]
}"
v-model="showEditLinksDialog"
>
<template v-slot:body-content>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<FormControl label="Website" v-model="app.website" />
<FormControl label="Support" v-model="app.support" />
<FormControl label="Documentation" v-model="app.documentation" />
<FormControl label="Privacy Policy" v-model="app.privacy_policy" />
<FormControl
label="Terms of Service"
v-model="app.terms_of_service"
/>
</div>
<ErrorMessage class="mt-4" :message="$resources.updateAppLinks.error" />
</template>
</Dialog>
<div class="divide-y" v-if="app">
<ListItem
title="Website"
:description="$sanitize(app.website || 'N/A')"
/>
<ListItem
title="Support"
:description="$sanitize(app.support || 'N/A')"
/>
<ListItem
title="Documentation"
:description="$sanitize(app.documentation || 'N/A')"
/>
<ListItem
title="Privacy Policy"
:description="$sanitize(app.privacy_policy || 'N/A')"
/>
<ListItem
title="Terms of Service"
:description="$sanitize(app.terms_of_service || 'N/A')"
/>
</div>
</Card>
</template>
<script>
import { notify } from '@/utils/toast';
export default {
name: 'MarketplaceAppLinks',
props: {
app: Object
},
data() {
return {
showEditLinksDialog: false
};
},
resources: {
updateAppLinks() {
return {
url: 'jcloud.api.marketplace.update_app_links',
params: {
name: this.app.name,
links: {
website: this.app.website,
support: this.app.support,
documentation: this.app.documentation,
privacy_policy: this.app.privacy_policy,
terms_of_service: this.app.terms_of_service
}
},
onSuccess() {
this.showEditLinksDialog = false;
notify({
title: 'Links Updated!',
icon: 'check',
color: 'green'
});
}
};
}
}
};
</script>