87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<Card
|
|
class="md:col-span-2"
|
|
title="Screenshots"
|
|
subtitle="Add screenshots to show on the marketplace website"
|
|
>
|
|
<div>
|
|
<div class="flex flex-row">
|
|
<Avatar
|
|
size="lg"
|
|
class="mx-1 cursor-pointer hover:bg-red-100 hover:opacity-20"
|
|
shape="square"
|
|
:image="image.image"
|
|
v-for="(image, index) in app.screenshots"
|
|
@click="removeScreenshot(image.image, index)"
|
|
>
|
|
</Avatar>
|
|
<FileUploader
|
|
@success="onAppImageAdd"
|
|
@failure="onAppImageUploadError"
|
|
fileTypes="image/*"
|
|
:upload-args="{
|
|
pagetype: 'Marketplace App',
|
|
docname: app.name,
|
|
method: 'jcloud.api.marketplace.add_app_screenshot'
|
|
}"
|
|
>
|
|
<template v-slot="{ openFileSelector, uploading, progress, error }">
|
|
<Button
|
|
class="ml-1 h-12 w-12"
|
|
@click="openFileSelector()"
|
|
icon="plus"
|
|
>
|
|
</Button>
|
|
</template>
|
|
</FileUploader>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import FileUploader from '@/components/FileUploader.vue';
|
|
import { notify } from '@/utils/toast';
|
|
|
|
export default {
|
|
name: 'MarketplaceAppScreenshots',
|
|
props: {
|
|
app: Object
|
|
},
|
|
components: {
|
|
FileUploader
|
|
},
|
|
methods: {
|
|
onAppImageAdd(file) {
|
|
this.app.screenshots.push({ image: file });
|
|
notify({
|
|
title: 'Screenshot was added successfully!',
|
|
icon: 'check',
|
|
color: 'green'
|
|
});
|
|
},
|
|
removeScreenshot(file, index) {
|
|
this.$resources.removeScreenshot.submit({
|
|
name: this.app.name,
|
|
file: file
|
|
});
|
|
this.app.screenshots.splice(index, 1);
|
|
},
|
|
onAppImageUploadError(errorMessage) {
|
|
notify({
|
|
title: errorMessage,
|
|
color: 'red',
|
|
icon: 'x'
|
|
});
|
|
}
|
|
},
|
|
resources: {
|
|
removeScreenshot(file) {
|
|
return {
|
|
url: 'jcloud.api.marketplace.remove_app_screenshot'
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|