base_ui/components/other/VersionComponent.vue

<template>
  <div v-if="showNewVersionPrompt" class="prompt-modal">
    <div class="pwa-install-prompt-box">
      <h1 class="title mb-4">توجه!!!</h1>
      <div class="d-flex align-items-center mb-3">
        <img
          width="50"
          height="50"
          alt="لوگو"
          src="assets/common/img/logo/logo.png"
        />
        <p class="description mr-2 mb-0">
          نسخه جدیدی از سامانه منتشر شده است، آیا مایل به بروزرسانی هستید؟
          <span class="new-version-number">
            ( آخرین نسخه : {{ envVersion }} )
          </span>
        </p>
      </div>

      <!-- <div class="d-flex flex-column align-items-center mb-4">
          <div class="p-1">
            <span> نسخه فعلی: </span>
            <span class="">
              &nbsp;
              {{ lsVersion }}
            </span>
          </div>
          <div class="p-1">
            <span> نسخه جدید: </span>
            <span class="version-number">
              &nbsp;
              {{ envVersion }}
            </span>
          </div>
        </div> -->

      <div class="d-flex justify-content-between">
        <div>
          <button
            id="installPWA"
            title="بله"
            class="btn btn-primary ml-2"
            type="button"
            @click.prevent="reloadPage()"
          >
            بله
          </button>
          <button
            id="remindMeLater"
            title="بعدا"
            class="btn btn-secondary"
            @click.prevnet="dismissNewVersionPrompt()"
          >
            بعدا
          </button>
        </div>
        <div class="p-1 current-version-number">
          <span title="نسخه شما">نسخه:</span>
          <span>
            {{ lsVersion }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "pinia";
import { useResearchStore } from "~/stores/researchStore";

export default {
  mounted() {
    this.controlVersion();
  },
  data() {
    return {
      showNewVersionPrompt: false,
      envVersion: null,
      lsVersion: null,

      localStorageItemsToDelete: [
        "searchSchema",
        "favoriteSchema",
        "activeFavoriteSchema",
        "helpSchema",
        "researchSchema",
        "ontologyFileName",
        "borhanSchema",
        "activeBorhanSchema",
        "jahatSchema",
        "activeJahatSchema",
        "newEntitySchema",
        "activeNewEntitySchema",
        "navigateListSchema",
        "activeNavigateListSchema",
        "thiqatSchema",
        "activeThiqatSchema",
        "PUBLIC_STORAGE",
      ],
    };
  },

  methods: {
    ...mapActions("common", ["systemsSetter", "activeSystemSetter"]),
    ...mapActions("aiTools", [
      "aiToolsActiveActionSetter",
      "aiToolsSchemaSetter",
      "aiToolsActiveDomainSetter",
    ]),
    ...mapActions("entity", [
      "activeTabSetter",
      "entityViewSchemaSetter",
      "activeEntityViewSchemaSetter",
    ]),
    ...mapActions(useResearchStore, [
      "researchSchemaSetter",
      "researchActiveSchemaSetter",
      "domainActiveSetter",
      "selectionFilterItemsSetter",
    ]),
    ...mapActions("search", [
      "domainActiveSetter", //3
      "activeTabSetter", //2
      "searchActiveTabSetter",
      "searchSchemaSetter",
      "helpSchemaSetter",
      "helpActiveSchemaSetter",
      "searchActiveSchemaSetter",
      "searchChartActiveTabSetter",
      "searchChartSchemaSetter",
      "searchChartActiveSchemaSetter",
      "selectionFilterItemsSetter", //1
    ]),

    reloadPage() {
      let appVersion = useStorage("app-version", '0.0.0');
      appVersion.vlaue =  this.envVersion;

      this.clearStorage();
      // this.clearCookies();

      // setTimeout(() => {
      location.reload();
      // }, 500);
    },
    dismissNewVersionPrompt() {
      this.showNewVersionPrompt = false;
    },
    controlVersion() {
      this.envVersion = import.meta.env.VITE_VERSION;
      this.lsVersion = useStorage("app-version", "0.0.0").value;

      if (this.lsVersion) {
        if (this.envVersion != this.lsVersion) {
          this.reloadPage();
          // this.showNewVersionPrompt = true;
        }
      } else {
        this.reloadPage();
        // this.showNewVersionPrompt = true;
      }
    },

    clearStorage() {
      this.vuexStorageRemover();

      for (let i = 0; i < localStorage.length; i++) {
        let lsKey = localStorage.key(i);
        let isExist = this.localStorageItemsToDelete.findIndex(
          (i) => i == lsKey
        );
        if (isExist > -1) {
          localStorage.removeItem(lsKey);
        }
      }
    },
    clearCookies() {
      let cookies = this.$cookies.keys(); // return a array
      cookies.forEach((element) => {
        this.$cookies.remove(element);
      });
    },
    vuexStorageRemover() {
      // aiTools
      this.aiToolsActiveActionSetter();
      this.aiToolsSchemaSetter();
      this.aiToolsActiveDomainSetter();

      // entity
      this.activeTabSetter();
      this.entityViewSchemaSetter();
      this.activeEntityViewSchemaSetter();

      // research
      this.researchSchemaSetter();
      this.researchActiveSchemaSetter();
      this.domainActiveSetter();
      this.selectionFilterItemsSetter();

      // search
      this.domainActiveSetter();
      this.activeTabSetter();
      this.searchActiveTabSetter();
      this.searchSchemaSetter();
      this.helpSchemaSetter();
      this.helpActiveSchemaSetter();
      this.searchActiveSchemaSetter();
      this.searchChartActiveTabSetter();
      this.searchChartSchemaSetter();
      this.searchChartActiveSchemaSetter();
      this.selectionFilterItemsSetter();

      // common
      this.systemsSetter();
      this.activeSystemSetter();
    },
  },
};
</script>

<style lang="scss" scoped>
.prompt-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.11);

  // &::before {
  //   content: "";
  // }

  .pwa-install-prompt-box {
    max-width: 30em;
    width: 100%;
    background: #fafafa;
    border: 1px solid #eee;
    margin: auto;
    padding: 1em;
    border-radius: 0 0 0.5em 0.5em;

    .title {
      font-size: 1rem;
      font-family: "sahel-bold";
    }
    .description {
      font-size: 0.9rem;
      text-align: justify;
    }

    .current-version-number {
      font-size: 0.9rem;
      color: #aaa;
    }
    .new-version-number {
      font-family: "sahel-bold";
      font-size: 0.8rem;
    }
  }
}
</style>