<template> <div class="pages role-page"> <div class="pages-content px-0"> <template v-if="canView"> <div class="container-fluid no-gutters"> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-3" v-for="project in projects" :key="project.id" > <a @click.prevent="redirectTo(project)" :href="project.link" class="project-card p-3" :class="{ active: project.id === projectGetter?.id }" :title="project.title" > <div class="row no-gutters card-hover flex-grow-1"> <div class="col-md-2 d-flex justify-content-center align-items-center" > <img :src="projectIcon(project.link)" class="img-fluid" :alt="project.title" /> </div> <div class="col-md-10 d-flex align-items-center"> <div class="card-body text-dark"> <h5 class="card-title"> {{ $t(project.link) }} </h5> <p class="card-text"> {{ $t(project.link + "Description") }} </p> </div> </div> </div> </a> </div> </div> </div> </template> <no-data v-else> <the-content-loading v-if="fetchingData"></the-content-loading> <div v-else class="d-flex justify-content-center align-items-center"> <div class="alert alert-warning d-flex justify-content-center align-items-center" > <span class="tavasi tavasi-warning-circle color-inherit ms-1 text__32" ></span> {{ $t("NoFindData") }} </div> </div> </no-data> </div> </div> </template> <script> import apis from "@apis/permitApi"; import { mapState, mapActions } from "pinia"; import { useCommonStore } from "~/stores/commonStore"; import { usePermitStore } from "~/stores/permitStore"; export default { data() { return { projects: [], canView: false, fetchingData: false, }; }, computed: { ...mapState(usePermitStore, ["projectGetter"]), }, methods: { ...mapActions(usePermitStore, ["SET_PROJECT"]), ...mapActions(useCommonStore, ["checkPermissions"]), projectIcon(name) { try { return require(`@assets/common/img/logo/${name}.svg`); } catch (err) { try { return require(`@assets/common/img/logo/${name}.jpg`); } catch (err) { return require("@assets/common/img/default.svg"); } } }, async getProjects() { return await ApiService.formData(apis.projects.list, []).then((res) => { this.projects = res.data.data; }); }, redirectTo(project) { this.SET_PROJECT(project); //this.$router.push({ name: 'sections' }); }, checkPermisionBeforGetList() { if (this.fetchingData) return; this.fetchingData = true; // this.checkPermissions({ permission: 'projects_view', _this: this }) // .then(() => { // if (this.projectGetter) this.getProjects() .then(() => { this.canView = true; this.fetchingData = false; }) .catch(() => { this.canView = false; this.fetchingData = false; }); // }) // .catch(() => { // this.canView = false; // this.fetchingData = false; // }) }, }, mounted() { this.checkPermisionBeforGetList(); }, }; </script> <style lang="scss" scoped> .row { &.row-gap { row-gap: 2em; } } .no-text-decoration { text-decoration: none; } .project-card { display: flex; align-items: center; margin-bottom: 1em; text-decoration: none; // gap: 1em 0; &:hover { background-color: rgba(189, 246, 255, 0.38); border-radius: 9px; } &.active { background-color: rgba(189, 246, 255, 0.38); border-radius: 9px; } } </style>