opnform/resources/js/components/pages/forms/NewFeatures.vue

108 lines
3.6 KiB
Vue

<template>
<div id="new-features"
class="w-full bg-gray-50 dark:bg-gray-800 border rounded-lg mt-4"
>
<div class="border-b">
<div v-track.new_in_notionforms_click
class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4" role="button"
@click.prevent="showNewFeatures=!showNewFeatures"
>
<div class="text-gray-700 dark:text-gray-300 pr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
/>
</svg>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">
New in OpnForm
</p>
<p class="text-sm text-gray-700 dark:text-gray-300">
Click here to see our new features
</p>
</div>
</div>
<v-transition>
<ul v-if="showNewFeatures" class="list-disc list-inside border-t pt-2 p-4">
<li v-for="changelog in changelogEntries" :key="changelog.id" v-track.new_feature_click class="text-sm">
<a :href="changelog.url" target="_blank" class="text-gray-700 dark:text-gray-300">{{ changelog.title }}</a>
</li>
<li v-track.new_feature_read_more_click class="text-sm">
<a class="text-gray-700 dark:text-gray-300" :href="changelogLink" target="_blank">Read more</a>
</li>
</ul>
</v-transition>
</div>
<div class="relative flex items-center cursor-pointer hover:bg-gray-100 p-4">
<a v-track.feature_request_click="{user_has_forms:user.has_forms}" :href="requestFeatureLink"
class="absolute inset-0" target="_blank"
/>
<div class="text-gray-700 dark:text-gray-300 pr-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
/>
</svg>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">
An idea for a new feature?
</p>
<p class="text-sm text-gray-700 dark:text-gray-300">
Click here to request a new feature
</p>
</div>
</div>
</div>
</template>
<script>
import { computed } from 'vue'
import axios from 'axios'
import { useAuthStore } from '../../../stores/auth';
import VTransition from '../../common/transitions/VTransition.vue'
export default {
components: { VTransition },
props: {},
setup () {
const authStore = useAuthStore()
return {
user : computed(() => authStore.user)
}
},
data: () => ({
changelogEntries: [],
showNewFeatures: false
}),
mounted () {
this.loadChangelogEntries()
},
computed: {
requestFeatureLink () {
return window.config.links.feature_requests
},
changelogLink () {
return window.config.links.changelog_url
}
},
methods: {
loadChangelogEntries () {
axios.get('/api/content/changelog/entries').then(response => {
this.changelogEntries = response.data.splice(0, 3)
})
}
}
}
</script>