base_ui/pages/admin/permit/Projects.vue

<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 "@permission/permitApi";
import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      projects: [],
      canView: false,
      fetchingData: false,
    };
  },
  computed: {
    ...mapGetters("permit", ["projectGetter"]),
  },
  methods: {
    ...mapMutations("permit", ["SET_PROJECT"]),
    ...mapActions(["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>