Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
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
close
Edit File :
Caracteristici.vue
| Size :
8.98
KB
Copy
<!-- @format --> <template> <!-- Informatii generale --> <div class="pt-10 grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-3"> <div class="px-4 sm:px-0"> <h2 class="text-base font-semibold leading-7 text-gray-900">Caracteristicile Produsului</h2> <p class="mt-1 text-sm leading-6 text-gray-600"> Caracteristicile reprezintă atribuțiile tangibile și măsurabile ale unui produs, care pot influența decizia de cumpărare a consumatorului: Calitatea, caracteristici fizice, performanță, funcții, brand, ambalaj, preț, servicii post vânzare etc. </p> </div> <form class="border-2 border-dashed border-gray-300 sm:rounded-xl md:col-span-2" @submit.prevent="submitForm"> <div class="px-4 py-6 sm:p-8 rounded-xl"> <div class="font-semibold text-sm text-gray-900"> Caracteristici <span class="px-1.5 py-1 font-semibold text-white rounded-md text-xs bg-gray-900 inline-block ml-1" :class="{ 'bg-green-500': characteristics.length > 9 }">{{ characteristics.length }}</span> </div> <div class="relative mt-5 grid grid-cols-1 gap-4 sm:grid-cols-3"> <div v-for="(item, index) in characteristics" :key="item.id" class="relative rounded-lg border border-gray-200 bg-white px-6 py-5 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2"> <div class="flex items-center justify-between"> <p class="text-sm font-medium text-gray-900 flex-shrink">#{{ index + 1 }}</p> <Popper hover :openDelay="200" offsetDistance="5" placement="top" :arrow="true"> <div @click="deleteAttribute(item.id)" class="text-gray-500 hover:text-gray-900 cursor-pointer"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path vector-effect="non-scaling-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </div> <template #content> <div class="bg-gray-900/80 backdrop-blur-sm shadow-sm rounded-lg py-1 px-2"> <p class="text-xs text-white">Șterge</p> </div> </template> </Popper> </div> <p class="mt-1 text-sm text-gray-500 flex-grow">{{ item.description }}</p> </div> <template v-if="characteristics.length < 3"> <div v-for="item in 3 - characteristics.length" class="relative rounded-lg border border-gray-200 bg-white px-6 py-5"> <div class="flex items-center justify-between"> <div class="h-4 w-7 bg-gray-200 rounded-lg"></div> <div class="w-4 h-4 bg-gray-100 rounded-lg"></div> </div> <div class="h-4 bg-gray-100 rounded-lg mt-2.5"></div> <div class="h-4 bg-gray-100 rounded-lg mt-1.5"></div> </div> </template> </div> <!-- Buttons --> <div class="bg-white rounded-xl mt-5 ring-1 ring-inset ring-gray-200 flex items-center justify-between gap-x-6 py-4 px-6 focus-within:ring-2 focus-within:ring-blue-500"> <input class="flex-1 border-none text-gray-900 block w-full rounded-md border-0 py-1.5 px-0 sm:text-sm sm:leading-6 focus:outline-none focus:ring-0 disabled:cursor-not-allowed" placeholder="Scrie o caracteristică..." :class="[{ 'placeholder:text-red-300': v$.input_name.$errors.length }]" :disabled="loadedGenerateAi" type="text" v-model="input_name" /> <div class="flex gap-2 items-center"> <button v-if="false" type="button" :disabled="loadedGenerateAi" @click="generateWithAi" class="flex items-center gap-1 rounded-md bg-transparent px-3 py-2.5 text-sm font-medium text-gray-700 hover:text-blue-500 disabled:text-gray-500 disabled:hover:text-gray-500 disabled:cursor-not-allowed"> <LoaderTbf color="text-gray-700" class="ml-2 inline-flex items-center justify-center" v-if="loadedGenerateAi" /> <svg class="inline-block ml-2 w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" v-else> <path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M9 4.5a.75.75 0 01.721.544l.813 2.846a3.75 3.75 0 002.576 2.576l2.846.813a.75.75 0 010 1.442l-2.846.813a3.75 3.75 0 00-2.576 2.576l-.813 2.846a.75.75 0 01-1.442 0l-.813-2.846a3.75 3.75 0 00-2.576-2.576l-2.846-.813a.75.75 0 010-1.442l2.846-.813A3.75 3.75 0 007.466 7.89l.813-2.846A.75.75 0 019 4.5zM18 1.5a.75.75 0 01.728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 010 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 01-1.456 0l-.258-1.036a2.625 2.625 0 00-1.91-1.91l-1.036-.258a.75.75 0 010-1.456l1.036-.258a2.625 2.625 0 001.91-1.91l.258-1.036A.75.75 0 0118 1.5zM16.5 15a.75.75 0 01.712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 010 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 01-1.422 0l-.395-1.183a1.5 1.5 0 00-.948-.948l-1.183-.395a.75.75 0 010-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0116.5 15z" clip-rule="evenodd" /> </svg> Generează cu AI </button> <button 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" /> Adaugă </button> </div> </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"; export default { setup: () => ({ v$: useVuelidate() }), props: { productData: Object, isActive: Boolean, requiredStep: Object, }, components: { LoaderTbf, }, data() { return { loadingSubmit: false, loadedGenerateAi: false, input_name: "", characteristics: [], realTimeNotifications: userNotificationsStore(), }; }, validations() { return { input_name: { required }, }; }, watch: { "productData.characteristics"(newValue) { this.characteristics = newValue; }, }, mounted() { if (this.productData.characteristics && this.productData.characteristics.length) { this.characteristics = this.productData.characteristics; } }, methods: { async submitForm() { if (this.isActive) { const isFormCorrect = await this.v$.$validate(); if (!isFormCorrect) { this.loadingSubmit = false; return; } this.loadingSubmit = true; var formData = { characteristic: { description: this.input_name, attribute_type: "characteristic", }, }; axios .post(`instances/${this.$auth.user().instance.id}/products/${this.productData.id}/add-attribute`, formData) .then(({ data }) => { this.$emit("updateProduct", data.data); this.v$.$reset(); }) .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; this.input_name = ""; }); } else { this.realTimeNotifications.addNotification({ type: "error", title: "Formularul trebuie completat în ordine.", description: `Pentru a introduce date în secțiunea <span class="font-medium">Caracteristicile Produsului</span> e nevoie prima data să completezi începând cu secțiunea <span class="font-medium">${this.requiredStep.step}</span>.`, }); } }, deleteAttribute(attributeId) { var foundIndex = this.characteristics.findIndex((el) => el.id == attributeId); axios .delete(`instances/${this.$auth.user().instance.id}/products/${this.productData.id}/remove-attribute/${attributeId}`) .then(() => { this.characteristics.splice(foundIndex, 1); }) .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.`, }); }); }, generateWithAi() { this.loadedGenerateAi = true; axios .post(`/generate/product-attribute/${this.productData.id}`, { "attribute-type": "characteristic" }) .then(({ data }) => { this.input_name = data.message; }) .finally(() => { this.loadedGenerateAi = false; }); }, }, }; </script>
Back