ONE PIECE HACKING

Ngiler SH3LL 360
: / home / tbf / tbfguest.tbf.ro / src / components / public / sales /

Information Server
MySQL : OFF Perl : OFF CURL : ON WGET : OFF PKEXEC : OFF

Directive	Local Value
IP Address	89.40.16.97
System	Linux server.atelieruldeit.ro 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64
User	tbf
PHP Version	7.3.33
Software	Apache
Doc root	Writable

Edit File : PublicTinta.vue \| Size : 26.28 KB
<!-- @format --> <template> <!-- Informatii generale --> <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3" ref="formAudience"> <div class="px-4 sm:px-0"> <h2 class="text-base font-semibold leading-7 text-gray-900">Public țintă</h2> <p class="mt-1 text-sm leading-6 text-gray-600">Completează detaliile publicului țintă pentru acest produs</p> </div> <form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2 relative" @submit.prevent="submitForm"> <!-- <div class="absolute left-0 top-0 w-full h-full z-20"></div> --> <div class="px-4 py-6 sm:p-8"> <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> <!-- Public țintă pe scurt --> <div class="sm:col-span-4"> <label for="audience-name" class="block text-sm font-medium leading-6 text-gray-900"> Public țintă pe scurt <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Descrie pe scurt publicul țintă. Exemplu: Antreprenori cu afaceri de peste 1 milion de euro</p> </div> </template> </Popper> </label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode"> <input type="text" id="audience-name" v-model="name" placeholder="Ex: Directori de HR din companii mari" :class="[ v$.name.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6" /> </template> <p v-else class="text-sm text-gray-700 leading-6">{{ name }}</p> </div> </div> <!-- Descriere public țintă --> <div class="col-span-full"> <label for="audience-description" class="block text-sm font-medium leading-6 text-gray-900"> Descriere public țintă <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Descrie în detaliu publicul țintă. Scrie toate informațiile pe care le consideri relevante.</p> </div> </template> </Popper> </label> <div class="mt-2"> <template v-if="!onlyPreviewMode"> <resize-textarea id="audience-description" v-model="description" :rows="5" :class="[ v$.description.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Noi ne adresăm directorilor de HR din companii cu peste 500 de angajați. În special ne adresăm celor care au echipe care sunt nevoite să lucreze cu furnizori internaționali și au nevoie să vorbească fluent în diferite limbi." class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6" /> </template> <p v-else class="text-sm text-gray-700 leading-6">{{ description }}</p> </div> </div> <div class="grid grid-cols-4 gap-6 col-span-6"> <!-- Gen / Sex --> <div> <label for="produs" class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedGenre.$errors.length ? 'text-red-500' : 'text-gray-900']"> Gen / Sex <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Dacă te adresezi atât femeilor cât și bărbaților atunci selectează opțiunea "Oricare"</p> </div> </template> </Popper> </label> <fieldset class="mt-2"> <div class="space-y-3"> <div v-for="item in genres" class="flex items-center"> <input v-model="selectedGenre" type="radio" :value="item.id" :id="`genre-${item.id}`" class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer" :class="[v$.selectedGenre.$errors.length ? 'border-red-500' : 'border-gray-300']" :disabled="onlyPreviewMode" /> <label :for="`genre-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label> </div> </div> </fieldset> <p class="mt-2 text-sm text-red-600" v-if="v$.selectedGenre.$errors.length">Selectează o opțiune.</p> </div> <!-- Stare civilă --> <div> <label for="produs" class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedMaritalStatus.$errors.length ? 'text-red-500' : 'text-gray-900']"> Stare civilă <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Selectează "Oricare" dacă starea civilă nu este relevantă pentru publicul tău țintă</p> </div> </template> </Popper> </label> <fieldset class="mt-2"> <div class="space-y-3"> <div v-for="item in maritalstatues" class="flex items-center"> <input v-model="selectedMaritalStatus" type="radio" :value="item.id" :id="`marital-status-${item.id}`" :class="[v$.selectedMaritalStatus.$errors.length ? 'border-red-500' : 'border-gray-300']" class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer" :disabled="onlyPreviewMode" /> <label :for="`marital-status-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label> </div> </div> </fieldset> <p class="mt-2 text-sm text-red-600" v-if="v$.selectedMaritalStatus.$errors.length">Selectează o opțiune.</p> </div> <!-- Copii --> <div> <label for="produs" class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedChildrenOption.$errors.length ? 'text-red-500' : 'text-gray-900']"> Copii <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Selectează "Oricare" dacă nu este relevant pentru publicul tău țintă dacă are copii sau nu</p> </div> </template> </Popper> </label> <fieldset class="mt-2"> <div class="space-y-3"> <div v-for="item in childrens" class="flex items-center"> <input v-model="selectedChildrenOption" type="radio" :value="item.id" :id="`children-${item.id}`" :class="[v$.selectedChildrenOption.$errors.length ? 'border-red-500' : 'border-gray-300']" class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer" :disabled="onlyPreviewMode" /> <label :for="`children-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label> </div> </div> </fieldset> <p class="mt-2 text-sm text-red-600" v-if="v$.selectedChildrenOption.$errors.length">Selectează o opțiune.</p> </div> <!-- Vârstă --> <div> <label for="produs" class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedAge.$errors.length ? 'text-red-500' : 'text-gray-900']"> Vârstă <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Selectează "Oricare" vârsta nu este relevantă pentru publicul tău țintă</p> </div> </template> </Popper> </label> <fieldset class="mt-2"> <div class="space-y-3"> <div v-for="item in ages" class="flex items-center"> <input v-model="selectedAge" type="radio" :value="item.id" :id="`age-${item.id}`" :class="[v$.selectedAge.$errors.length ? 'border-red-500' : 'border-gray-300']" class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer" :disabled="onlyPreviewMode" /> <label :for="`age-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label> </div> </div> </fieldset> <p class="mt-2 text-sm text-red-600" v-if="v$.selectedAge.$errors.length">Selectează o opțiune.</p> </div> </div> <!-- Localizare --> <div class="col-span-6"> <label for="audience-location" class="block text-sm font-medium leading-6 text-gray-900"> Localizare geografică <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Care este localizarea geografică a publicului tău țintă. Exemple: Doar în orașul București. În toată România. În România, Ungaria, Grecia și Bulgaria.</p> </div> </template> </Popper> </label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode"> <input type="text" id="audience-location" v-model="location" :class="[ v$.location.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Oriunde / Doar în București / În toată România / Internațional" class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6" /> </template> <p v-else class="text-sm text-gray-700 leading-6">{{ location }}</p> </div> </div> <!-- Nivel profesional --> <div class="sm:col-span-6"> <label for="audience-performance" class="block text-sm font-medium leading-6 text-gray-900"> Descrie nivelul profesional <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Dacă nivelul profesional nu se aplică pentru publicul tău țintă atunci completează cu "Nu se aplică".</p> </div> </template> </Popper> </label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode"> <input type="text" id="audience-performance" v-model="performance_level" :class="[ v$.performance_level.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Manageri cu experiență de peste 10 ani / Orice nivel profesional" class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6" /> </template> <p v-else class="text-sm text-gray-700 leading-6">{{ performance_level }}</p> </div> </div> <!-- Hobby-uri --> <div class="sm:col-span-6"> <label for="audience-hobbies" class="block text-sm font-medium leading-6 text-gray-900"> Interese / Hobby-uri <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p> Descrie ce interese sau hobby-uri are publicul tău țintă. Completează doar dacă ești sigur de informație. Dacă hobby-urile nu sunt un criteriu important completatează "Nu se aplică". </p> </div> </template> </Popper> </label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode"> <resize-textarea type="text" id="audience-hobbies" :rows="8" v-model="hobbies" :class="[ v$.hobbies.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Este pasionat de fotbal. Urmrăește foarte des și este la curent cu tot ce se întâmplă. Exemplele și analogiile cu fotbalul sunt foarte bine primite. Este foarte interesat de tehnologie. Mereu investește în cele mai noi gadgeturi și este early adopter." class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6" /> </template> <p v-else-if="hobbies" class="text-sm text-gray-700 leading-6 whitespace-pre-wrap" v-html="hobbies.replace(/(?:\r\n\|\r\|\n)/g, `<div class='h-[6px]'></div>`)"></p> </div> </div> <div class="col-span-6"> <label class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedTone.$errors.length ? 'text-red-500' : 'text-gray-900']"> Alege tonul de adresare acestui public țintă <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p>Alege tonul prin care ne vom adresa acestui public țintă în materialele de vânzare: Landing Page-uri, Email-uri, Scripturi pentru vânzători, etc.</p> </div> </template> </Popper> </label> <div class="grid grid-cols-4 gap-x-6 col-span-6 mt-2 gap-y-3"> <div v-for="item in tones" class="flex items-center"> <input v-model="selectedTone" type="radio" :value="item.id" :id="`genre-${item.id}`" class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer" :class="[v$.selectedTone.$errors.length ? 'border-red-500' : 'border-gray-300']" :disabled="onlyPreviewMode" /> <label :for="`genre-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label> </div> </div> <p class="mt-2 text-sm text-red-600" v-if="v$.selectedTone.$errors.length">Selectează o opțiune.</p> </div> </div> </div> <!-- Buttons --> <div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> <p class="text-sm text-red-600" v-if="v$.$errors.length">Completează formularul pentru a salva.</p> <div class="flex items-center gap-x-6 ml-auto"> <template v-if="!onlyPreviewMode"> <button v-if="canOnlyPreview" @click="changePreviewMode" type="button" class="text-sm font-semibold leading-6 text-gray-900">Anulează</button> <button v-else @click="resetForm" type="button" class="text-sm font-semibold leading-6 text-gray-900">Resetează</button> </template> <template v-if="onlyPreviewMode"> <button @click="changePreviewMode" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-white border-gray-300 text-gray-900 hover:bg-gray-50 border"> Modifică </button> </template> <button v-else type="submit" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-blue-500 text-white hover:bg-blue-400" :class="{ 'disabled:cursor-not-allowed': loadingSubmit }" :disabled="loadingSubmit"> <LoaderTbf class="inline-block mr-2" color="text-white" v-if="loadingSubmit" /> Salvează </button> </div> </div> </form> </div> </template> <script> import { userNotificationsStore } from "@/stores/notifications.js"; import { useVuelidate } from "@vuelidate/core"; import { required } from "@vuelidate/validators"; import LoaderTbf from "@/components/public/LoadingTbf.vue"; import { RadioGroup, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue"; export default { setup: () => ({ v$: useVuelidate() }), props: { productData: Object, isActive: Boolean, options: Array, requiredStep: Object, }, components: { LoaderTbf, RadioGroup, RadioGroupLabel, RadioGroupOption, }, data() { return { loadingSubmit: false, name: "", description: "", location: "", performance_level: "", hobbies: "", selectedGenre: "", genres: [ { name: "Oricare", key: "oricare" }, { name: "Masculin", key: "masculin" }, { name: "Feminin", key: "feminin" }, ], selectedMaritalStatus: "", maritalstatues: [ { name: "Oricare", key: "oricare" }, { name: "Fără relație", key: "necasatoriti-fara-relatie" }, { name: "În relație", key: "necasatoriti-in-relatie" }, { name: "Căsătoriți", key: "casatoriti" }, { name: "Divorțați", key: "divortati" }, ], selectedChildrenOption: "", childrens: [ { name: "Oricare", key: "oricare" }, { name: "Fără copii", key: "fara" }, { name: "Au copii", key: "au-copii" }, { name: "2 copii", key: "2" }, { name: "3+ copii", key: "3-plus" }, ], selectedAge: "", ages: [ { name: "Oricare", key: "oricare" }, { name: "Copii", key: "copii" }, { name: "Adolescenți", key: "adolescenti" }, { name: "Tineri", key: "tineri" }, { name: "Adulți", key: "adulti" }, { name: "Vârstnici", key: "varstnici" }, ], selectedTone: "", tones: [ { name: "Formal", key: "formal" }, { name: "Informal", key: "informal" }, { name: "Haios", key: "haios" }, { name: "Colocvial", key: "colocvial" }, { name: "Emoțional", key: "emotional" }, { name: "Motivațional", key: "motivational" }, { name: "Neutru", key: "neutru" }, { name: "Oricare", key: "oricare" }, ], onlyPreviewMode: false, canOnlyPreview: false, realTimeNotifications: userNotificationsStore(), }; }, validations() { return { name: { required }, description: { required }, location: { required }, performance_level: { required }, hobbies: { required }, selectedGenre: { required }, selectedMaritalStatus: { required }, selectedChildrenOption: { required }, selectedAge: { required }, selectedTone: { required }, }; }, watch: { "productData.audience"(newValue) { this.populateData(); }, }, async mounted() { await this.populateData(); if ( this.name !== "" && this.name != null && this.location !== "" && this.location != null && this.description !== "" && this.description != null && this.hobbies !== "" && this.hobbies != null && this.performance_level !== "" && this.performance_level != null && this.selectedGenre !== "" && this.selectedGenre != null && this.selectedAge !== "" && this.selectedAge != null && this.selectedChildrenOption !== "" && this.selectedChildrenOption != null && this.selectedMaritalStatus !== "" && this.selectedMaritalStatus != null && this.selectedTone !== "" && this.selectedTone != null ) { this.onlyPreviewMode = true; this.canOnlyPreview = true; } }, methods: { async submitForm() { if (this.isActive) { const isFormCorrect = await this.v$.$validate(); if (!isFormCorrect) { this.$refs.formAudience.scrollIntoView({ behavior: "smooth", block: "start" }); this.loadingSubmit = false; return; } this.loadingSubmit = true; var arrayOfOptions = [this.selectedGenre, this.selectedMaritalStatus, this.selectedChildrenOption, this.selectedAge, this.selectedTone]; var formData = { name: this.name, description: this.description, location: this.location, professional_level: this.performance_level, hobby: this.hobbies, options: arrayOfOptions, }; axios .post(`instances/${this.$auth.user().instance.id}/products/${this.productData.id}/add-audience`, formData) .then(({ data }) => { this.$emit("updateProduct", data.data); this.v$.$reset(); this.canOnlyPreview = true; this.onlyPreviewMode = true; }) .catch((error) => { var responseError = error.response.data; this.realTimeNotifications.addNotification({ type: "error", title: "TBF ERROR", description: `"${responseError.message}"<br>Vă rugăm să ne contactați și să ne transmiteți eroare. În interesul remedierii acestei probleme cât mai curând posibil.`, }); }) .finally(() => { this.loadingSubmit = false; }); } else { this.realTimeNotifications.addNotification({ type: "error", title: "Formularul trebuie completat în ordine.", description: `Pentru a introduce date în secțiunea <span class="font-medium">Public țintă</span> e nevoie prima data să completezi începând cu secțiunea <span class="font-medium">${this.requiredStep.step}</span>. ${this.requiredStep.message}`, }); } }, async populateData() { this.genres = this.options.filter((el) => el.category == "audience_gender"); this.ages = this.options.filter((el) => el.category == "audience_age"); this.maritalstatues = this.options.filter((el) => el.category == "audience_marital_status"); this.childrens = this.options.filter((el) => el.category == "audience_child"); this.tones = this.options.filter((el) => el.category == "audience_tone"); if (this.productData.audience) { const audienceData = this.productData.audience; this.name = audienceData.name; this.description = audienceData.description; this.location = audienceData.location; this.hobbies = audienceData.hobby; this.performance_level = audienceData.professional_level; this.selectedGenre = audienceData.options.find((el) => el.category == "audience_gender") ? audienceData.options.find((el) => el.category == "audience_gender").id : ""; this.selectedAge = audienceData.options.find((el) => el.category == "audience_age") ? audienceData.options.find((el) => el.category == "audience_age").id : ""; this.selectedChildrenOption = audienceData.options.find((el) => el.category == "audience_child") ? audienceData.options.find((el) => el.category == "audience_child").id : ""; this.selectedMaritalStatus = audienceData.options.find((el) => el.category == "audience_marital_status") ? audienceData.options.find((el) => el.category == "audience_marital_status").id : ""; this.selectedTone = audienceData.options.find((el) => el.category == "audience_tone") ? audienceData.options.find((el) => el.category == "audience_tone").id : ""; } }, resetForm() { this.name = ""; this.description = ""; this.location = ""; this.hobbies = ""; this.performance_level = ""; this.selectedGenre = ""; this.selectedAge = ""; this.selectedChildrenOption = ""; this.selectedMaritalStatus = ""; this.selectedTone = ""; }, changePreviewMode() { this.v$.$reset(); this.onlyPreviewMode = !this.onlyPreviewMode; this.populateData(); }, }, }; </script> Back

Edit File : PublicTinta.vue | Size : 26.28 KB

<template>
	
	<div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3" ref="formAudience">
		<div class="px-4 sm:px-0">
			<h2 class="text-base font-semibold leading-7 text-gray-900">Public țintă</h2>
			<p class="mt-1 text-sm leading-6 text-gray-600">Completează detaliile publicului țintă pentru acest produs</p>
		</div>

<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2 relative" @submit.prevent="submitForm">
			
			<div class="px-4 py-6 sm:p-8">
				<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
					
					<div class="sm:col-span-4">
						<label for="audience-name" class="block text-sm font-medium leading-6 text-gray-900">
							Public țintă pe scurt
							<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
								<span class="text-gray-400">(?)</span>
								<template #content>
									<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
										<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
										<p>Descrie pe scurt publicul țintă. Exemplu: Antreprenori cu afaceri de peste 1 milion de euro</p>
									</div>
								</template>
							</Popper>
						</label>
						<div class="mt-2 relative">
							<template v-if="!onlyPreviewMode">
								<input
									type="text"
									id="audience-name"
									v-model="name"
									placeholder="Ex: Directori de HR din companii mari"
									:class="[
										v$.name.$errors.length
											? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500'
											: 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500',
									]"
									class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6" />
							</template>
							<p v-else class="text-sm text-gray-700 leading-6">{{ name }}</p>
						</div>
					</div>

<div class="col-span-full">
						<label for="audience-description" class="block text-sm font-medium leading-6 text-gray-900">
							Descriere public țintă
							<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
								<span class="text-gray-400">(?)</span>
								<template #content>
									<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
										<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
										<p>Descrie în detaliu publicul țintă. Scrie toate informațiile pe care le consideri relevante.</p>
									</div>
								</template>
							</Popper>
						</label>
						<div class="mt-2">
							<template v-if="!onlyPreviewMode">
								<resize-textarea
									id="audience-description"
									v-model="description"
									:rows="5"
									:class="[
										v$.description.$errors.length
											? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500'
											: 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500',
									]"
									placeholder="Ex: Noi ne adresăm directorilor de HR din companii cu peste 500 de angajați. În special ne adresăm celor care au echipe care sunt nevoite să lucreze cu furnizori internaționali și au nevoie să vorbească fluent în diferite limbi."
									class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-500 sm:text-sm sm:leading-6" />
							</template>
							<p v-else class="text-sm text-gray-700 leading-6">{{ description }}</p>
						</div>
					</div>

<div class="grid grid-cols-4 gap-6 col-span-6">
						
						<div>
							<label for="produs" class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedGenre.$errors.length ? 'text-red-500' : 'text-gray-900']">
								Gen / Sex
								<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
									<span class="text-gray-400">(?)</span>
									<template #content>
										<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
											<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
											<p>Dacă te adresezi atât femeilor cât și bărbaților atunci selectează opțiunea "Oricare"</p>
										</div>
									</template>
								</Popper>
							</label>
							<fieldset class="mt-2">
								<div class="space-y-3">
									<div v-for="item in genres" class="flex items-center">
										<input
											v-model="selectedGenre"
											type="radio"
											:value="item.id"
											:id="`genre-${item.id}`"
											class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer"
											:class="[v$.selectedGenre.$errors.length ? 'border-red-500' : 'border-gray-300']"
											:disabled="onlyPreviewMode" />
										<label :for="`genre-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label>
									</div>
								</div>
							</fieldset>
							<p class="mt-2 text-sm text-red-600" v-if="v$.selectedGenre.$errors.length">Selectează o opțiune.</p>
						</div>

<div>
							<label for="produs" class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedMaritalStatus.$errors.length ? 'text-red-500' : 'text-gray-900']">
								Stare civilă
								<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
									<span class="text-gray-400">(?)</span>
									<template #content>
										<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
											<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
											<p>Selectează "Oricare" dacă starea civilă nu este relevantă pentru publicul tău țintă</p>
										</div>
									</template>
								</Popper>
							</label>
							<fieldset class="mt-2">
								<div class="space-y-3">
									<div v-for="item in maritalstatues" class="flex items-center">
										<input
											v-model="selectedMaritalStatus"
											type="radio"
											:value="item.id"
											:id="`marital-status-${item.id}`"
											:class="[v$.selectedMaritalStatus.$errors.length ? 'border-red-500' : 'border-gray-300']"
											class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer"
											:disabled="onlyPreviewMode" />

<label :for="`marital-status-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label>
									</div>
								</div>
							</fieldset>
							<p class="mt-2 text-sm text-red-600" v-if="v$.selectedMaritalStatus.$errors.length">Selectează o opțiune.</p>
						</div>

<div>
							<label for="produs" class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedChildrenOption.$errors.length ? 'text-red-500' : 'text-gray-900']">
								Copii
								<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
									<span class="text-gray-400">(?)</span>
									<template #content>
										<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
											<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
											<p>Selectează "Oricare" dacă nu este relevant pentru publicul tău țintă dacă are copii sau nu</p>
										</div>
									</template>
								</Popper>
							</label>
							<fieldset class="mt-2">
								<div class="space-y-3">
									<div v-for="item in childrens" class="flex items-center">
										<input
											v-model="selectedChildrenOption"
											type="radio"
											:value="item.id"
											:id="`children-${item.id}`"
											:class="[v$.selectedChildrenOption.$errors.length ? 'border-red-500' : 'border-gray-300']"
											class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer"
											:disabled="onlyPreviewMode" />
										<label :for="`children-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label>
									</div>
								</div>
							</fieldset>
							<p class="mt-2 text-sm text-red-600" v-if="v$.selectedChildrenOption.$errors.length">Selectează o opțiune.</p>
						</div>

<div>
							<label for="produs" class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedAge.$errors.length ? 'text-red-500' : 'text-gray-900']">
								Vârstă
								<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
									<span class="text-gray-400">(?)</span>
									<template #content>
										<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
											<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
											<p>Selectează "Oricare" vârsta nu este relevantă pentru publicul tău țintă</p>
										</div>
									</template>
								</Popper>
							</label>
							<fieldset class="mt-2">
								<div class="space-y-3">
									<div v-for="item in ages" class="flex items-center">
										<input
											v-model="selectedAge"
											type="radio"
											:value="item.id"
											:id="`age-${item.id}`"
											:class="[v$.selectedAge.$errors.length ? 'border-red-500' : 'border-gray-300']"
											class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer"
											:disabled="onlyPreviewMode" />
										<label :for="`age-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label>
									</div>
								</div>
							</fieldset>
							<p class="mt-2 text-sm text-red-600" v-if="v$.selectedAge.$errors.length">Selectează o opțiune.</p>
						</div>
					</div>

<div class="col-span-6">
						<label for="audience-location" class="block text-sm font-medium leading-6 text-gray-900">
							Localizare geografică
							<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
								<span class="text-gray-400">(?)</span>
								<template #content>
									<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
										<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
										<p>Care este localizarea geografică a publicului tău țintă. Exemple: Doar în orașul București. În toată România. În România, Ungaria, Grecia și Bulgaria.</p>
									</div>
								</template>
							</Popper>
						</label>
						<div class="mt-2 relative">
							<template v-if="!onlyPreviewMode">
								<input
									type="text"
									id="audience-location"
									v-model="location"
									:class="[
										v$.location.$errors.length
											? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500'
											: 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500',
									]"
									placeholder="Ex: Oriunde / Doar în București / În toată România / Internațional"
									class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6" />
							</template>
							<p v-else class="text-sm text-gray-700 leading-6">{{ location }}</p>
						</div>
					</div>

<div class="sm:col-span-6">
						<label for="audience-performance" class="block text-sm font-medium leading-6 text-gray-900">
							Descrie nivelul profesional
							<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
								<span class="text-gray-400">(?)</span>
								<template #content>
									<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
										<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
										<p>Dacă nivelul profesional nu se aplică pentru publicul tău țintă atunci completează cu "Nu se aplică".</p>
									</div>
								</template>
							</Popper>
						</label>
						<div class="mt-2 relative">
							<template v-if="!onlyPreviewMode">
								<input
									type="text"
									id="audience-performance"
									v-model="performance_level"
									:class="[
										v$.performance_level.$errors.length
											? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500'
											: 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500',
									]"
									placeholder="Ex: Manageri cu experiență de peste 10 ani / Orice nivel profesional"
									class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6" />
							</template>
							<p v-else class="text-sm text-gray-700 leading-6">{{ performance_level }}</p>
						</div>
					</div>

<div class="sm:col-span-6">
						<label for="audience-hobbies" class="block text-sm font-medium leading-6 text-gray-900">
							Interese / Hobby-uri
							<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
								<span class="text-gray-400">(?)</span>
								<template #content>
									<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
										<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
										<p>
											Descrie ce interese sau hobby-uri are publicul tău țintă. Completează doar dacă ești sigur de informație. Dacă hobby-urile nu sunt un criteriu important
											completatează "Nu se aplică".
										</p>
									</div>
								</template>
							</Popper>
						</label>
						<div class="mt-2 relative">
							<template v-if="!onlyPreviewMode">
								<resize-textarea
									type="text"
									id="audience-hobbies"
									:rows="8"
									v-model="hobbies"
									:class="[
										v$.hobbies.$errors.length
											? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500'
											: 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500',
									]"
									placeholder="Ex: Este pasionat de fotbal. Urmrăește foarte des și este la curent cu tot ce se întâmplă. Exemplele și analogiile cu fotbalul sunt foarte bine primite. Este foarte interesat de tehnologie. Mereu investește în cele mai noi gadgeturi și este early adopter."
									class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6" />
							</template>
							<p v-else-if="hobbies" class="text-sm text-gray-700 leading-6 whitespace-pre-wrap" v-html="hobbies.replace(/(?:\r\n|\r|\n)/g, `<div class='h-[6px]'></div>`)"></p>
						</div>
					</div>

<div class="col-span-6">
						<label class="block text-sm font-medium leading-6 text-gray-900" :class="[v$.selectedTone.$errors.length ? 'text-red-500' : 'text-gray-900']">
							Alege tonul de adresare acestui public țintă
							<Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode">
								<span class="text-gray-400">(?)</span>
								<template #content>
									<div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]">
										<div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div>
										<p>Alege tonul prin care ne vom adresa acestui public țintă în materialele de vânzare: Landing Page-uri, Email-uri, Scripturi pentru vânzători, etc.</p>
									</div>
								</template>
							</Popper>
						</label>

<div class="grid grid-cols-4 gap-x-6 col-span-6 mt-2 gap-y-3">
							<div v-for="item in tones" class="flex items-center">
								<input
									v-model="selectedTone"
									type="radio"
									:value="item.id"
									:id="`genre-${item.id}`"
									class="h-4 w-4 border-gray-300 text-blue-500 focus:ring-blue-500 peer"
									:class="[v$.selectedTone.$errors.length ? 'border-red-500' : 'border-gray-300']"
									:disabled="onlyPreviewMode" />
								<label :for="`genre-${item.id}`" class="ml-3 block text-sm leading-6 text-gray-500 peer-checked:text-gray-900">{{ item.name }}</label>
							</div>
						</div>
						<p class="mt-2 text-sm text-red-600" v-if="v$.selectedTone.$errors.length">Selectează o opțiune.</p>
					</div>
				</div>
			</div>

<div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
				<p class="text-sm text-red-600" v-if="v$.$errors.length">Completează formularul pentru a salva.</p>

<div class="flex items-center gap-x-6 ml-auto">
					<template v-if="!onlyPreviewMode">
						<button v-if="canOnlyPreview" @click="changePreviewMode" type="button" class="text-sm font-semibold leading-6 text-gray-900">Anulează</button>
						<button v-else @click="resetForm" type="button" class="text-sm font-semibold leading-6 text-gray-900">Resetează</button>
					</template>

<template v-if="onlyPreviewMode">
						<button
							@click="changePreviewMode"
							type="button"
							class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-white border-gray-300 text-gray-900 hover:bg-gray-50 border">
							Modifică
						</button>
					</template>
					<button
						v-else
						type="submit"
						class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-blue-500 text-white hover:bg-blue-400"
						:class="{ 'disabled:cursor-not-allowed': loadingSubmit }"
						:disabled="loadingSubmit">
						<LoaderTbf class="inline-block mr-2" color="text-white" v-if="loadingSubmit" />
						Salvează
					</button>
				</div>
			</div>
		</form>
	</div>
</template>

export default {
	setup: () => ({ v$: useVuelidate() }),
	props: {
		productData: Object,
		isActive: Boolean,
		options: Array,
		requiredStep: Object,
	},
	components: {
		LoaderTbf,
		RadioGroup,
		RadioGroupLabel,
		RadioGroupOption,
	},
	data() {
		return {
			loadingSubmit: false,
			name: "",
			description: "",
			location: "",
			performance_level: "",
			hobbies: "",
			selectedGenre: "",
			genres: [
				{ name: "Oricare", key: "oricare" },
				{ name: "Masculin", key: "masculin" },
				{ name: "Feminin", key: "feminin" },
			],
			selectedMaritalStatus: "",
			maritalstatues: [
				{ name: "Oricare", key: "oricare" },
				{ name: "Fără relație", key: "necasatoriti-fara-relatie" },
				{ name: "În relație", key: "necasatoriti-in-relatie" },
				{ name: "Căsătoriți", key: "casatoriti" },
				{ name: "Divorțați", key: "divortati" },
			],
			selectedChildrenOption: "",
			childrens: [
				{ name: "Oricare", key: "oricare" },
				{ name: "Fără copii", key: "fara" },
				{ name: "Au copii", key: "au-copii" },
				{ name: "2 copii", key: "2" },
				{ name: "3+ copii", key: "3-plus" },
			],
			selectedAge: "",
			ages: [
				{ name: "Oricare", key: "oricare" },
				{ name: "Copii", key: "copii" },
				{ name: "Adolescenți", key: "adolescenti" },
				{ name: "Tineri", key: "tineri" },
				{ name: "Adulți", key: "adulti" },
				{ name: "Vârstnici", key: "varstnici" },
			],
			selectedTone: "",
			tones: [
				{ name: "Formal", key: "formal" },
				{ name: "Informal", key: "informal" },
				{ name: "Haios", key: "haios" },
				{ name: "Colocvial", key: "colocvial" },
				{ name: "Emoțional", key: "emotional" },
				{ name: "Motivațional", key: "motivational" },
				{ name: "Neutru", key: "neutru" },
				{ name: "Oricare", key: "oricare" },
			],
			onlyPreviewMode: false,
			canOnlyPreview: false,
			realTimeNotifications: userNotificationsStore(),
		};
	},
	validations() {
		return {
			name: { required },
			description: { required },
			location: { required },
			performance_level: { required },
			hobbies: { required },
			selectedGenre: { required },
			selectedMaritalStatus: { required },
			selectedChildrenOption: { required },
			selectedAge: { required },
			selectedTone: { required },
		};
	},
	watch: {
		"productData.audience"(newValue) {
			this.populateData();
		},
	},
	async mounted() {
		await this.populateData();

if (
			this.name !== "" &&
			this.name != null &&
			this.location !== "" &&
			this.location != null &&
			this.description !== "" &&
			this.description != null &&
			this.hobbies !== "" &&
			this.hobbies != null &&
			this.performance_level !== "" &&
			this.performance_level != null &&
			this.selectedGenre !== "" &&
			this.selectedGenre != null &&
			this.selectedAge !== "" &&
			this.selectedAge != null &&
			this.selectedChildrenOption !== "" &&
			this.selectedChildrenOption != null &&
			this.selectedMaritalStatus !== "" &&
			this.selectedMaritalStatus != null &&
			this.selectedTone !== "" &&
			this.selectedTone != null
		) {
			this.onlyPreviewMode = true;
			this.canOnlyPreview = true;
		}
	},
	methods: {
		async submitForm() {
			if (this.isActive) {
				const isFormCorrect = await this.v$.$validate();

if (!isFormCorrect) {
					this.$refs.formAudience.scrollIntoView({ behavior: "smooth", block: "start" });
					this.loadingSubmit = false;
					return;
				}

this.loadingSubmit = true;

var arrayOfOptions = [this.selectedGenre, this.selectedMaritalStatus, this.selectedChildrenOption, this.selectedAge, this.selectedTone];

var formData = {
					name: this.name,
					description: this.description,
					location: this.location,
					professional_level: this.performance_level,
					hobby: this.hobbies,
					options: arrayOfOptions,
				};

axios
					.post(`instances/${this.$auth.user().instance.id}/products/${this.productData.id}/add-audience`, formData)
					.then(({ data }) => {
						this.$emit("updateProduct", data.data);
						this.v$.$reset();
						this.canOnlyPreview = true;
						this.onlyPreviewMode = true;
					})
					.catch((error) => {
						var responseError = error.response.data;

this.realTimeNotifications.addNotification({
							type: "error",
							title: "TBF ERROR",
							description: `"${responseError.message}"<br>Vă rugăm să ne contactați și să ne transmiteți eroare. În interesul remedierii acestei probleme cât mai curând posibil.`,
						});
					})
					.finally(() => {
						this.loadingSubmit = false;
					});
			} else {
				this.realTimeNotifications.addNotification({
					type: "error",
					title: "Formularul trebuie completat în ordine.",
					description: `Pentru a introduce date în secțiunea <span class="font-medium">Public țintă</span> e nevoie prima data să completezi începând cu secțiunea <span class="font-medium">${this.requiredStep.step}</span>. ${this.requiredStep.message}`,
				});
			}
		},
		async populateData() {
			this.genres = this.options.filter((el) => el.category == "audience_gender");
			this.ages = this.options.filter((el) => el.category == "audience_age");
			this.maritalstatues = this.options.filter((el) => el.category == "audience_marital_status");
			this.childrens = this.options.filter((el) => el.category == "audience_child");
			this.tones = this.options.filter((el) => el.category == "audience_tone");

if (this.productData.audience) {
				const audienceData = this.productData.audience;
				this.name = audienceData.name;
				this.description = audienceData.description;
				this.location = audienceData.location;
				this.hobbies = audienceData.hobby;
				this.performance_level = audienceData.professional_level;
				this.selectedGenre = audienceData.options.find((el) => el.category == "audience_gender") ? audienceData.options.find((el) => el.category == "audience_gender").id : "";
				this.selectedAge = audienceData.options.find((el) => el.category == "audience_age") ? audienceData.options.find((el) => el.category == "audience_age").id : "";
				this.selectedChildrenOption = audienceData.options.find((el) => el.category == "audience_child") ? audienceData.options.find((el) => el.category == "audience_child").id : "";
				this.selectedMaritalStatus = audienceData.options.find((el) => el.category == "audience_marital_status")
					? audienceData.options.find((el) => el.category == "audience_marital_status").id
					: "";
				this.selectedTone = audienceData.options.find((el) => el.category == "audience_tone") ? audienceData.options.find((el) => el.category == "audience_tone").id : "";
			}
		},
		resetForm() {
			this.name = "";
			this.description = "";
			this.location = "";
			this.hobbies = "";
			this.performance_level = "";
			this.selectedGenre = "";
			this.selectedAge = "";
			this.selectedChildrenOption = "";
			this.selectedMaritalStatus = "";
			this.selectedTone = "";
		},
		changePreviewMode() {
			this.v$.$reset();
			this.onlyPreviewMode = !this.onlyPreviewMode;

this.populateData();
		},
	},
};
</script>

Back