base_ui/components/dashboard/default/Settings.vue

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 col-md-3 my-tabs">
        <nav class="popUp-tab__menu">
          <div
            class="nav nav-tabs flex-md-wrap flex-nowrap"
            id="nav-tab"
            role="tablist"
          >
            <template v-if="!isGuest">
              <label class="label-settings d-none d-md-flex"
                >تنظیمات کاربری</label
              >
              <a
                @click="setTab(1)"
                class="nav-item align-items-start"
                :class="{ active: localMenuId == 1 }"
                id="nav-myAccount-tab"
                data-bs-toggle="tab"
                href="#nav-myAccount"
                role="tab"
                aria-controls="nav-myAccount"
                aria-selected="true"
                ><span v-tooltip="'مشخصات'" class="d-flex align-items-center">
                  <svg class="icon icon-portal-roles ms-2 d-none d-md-flex">
                    <use xlink:href="#icon-Group-7932"></use>
                  </svg>
                  <span class="">مشخصات</span>
                </span>
              </a>
              <a
                @click="setTab(2)"
                class="nav-item align-items-start"
                :class="{ active: localMenuId == 2 }"
                id="nav-changepass-tab"
                data-bs-toggle="tab"
                href="#nav-changepass"
                role="tab"
                aria-controls="nav-changepass"
                aria-selected="false"
              >
                <span v-tooltip="'تغییر رمز'" class="d-flex align-items-center">
                  <svg class="icon icon-lock ms-3 d-none d-md-flex">
                    <use xlink:href="#icon-lock"></use>
                  </svg>
                  <span class="">تغییر رمز</span>
                </span>
              </a>
            </template>
            <label class="label-settings d-none d-md-flex">تنظیمات ظاهری</label>
            <a
              @click="setTab(3)"
              class="nav-item align-items-start"
              :class="{ active: localMenuId == 3 }"
              id="nav-myAccount-tab"
              data-bs-toggle="tab"
              href="#nav-myAccount"
              role="tab"
              aria-controls="nav-myAccount"
              aria-selected="false"
              ><span v-tooltip="'قالب'" class="d-flex align-items-center">
                <svg class="icon icon-portal-roles ms-3 d-none d-md-flex">
                  <use xlink:href="#icon-portal-roles"></use>
                </svg>
                <span class="">قالب</span>
              </span>
            </a>
            <a
              @click="setTab(4)"
              class="nav-item align-items-start"
              :class="{ active: localMenuId == 4 }"
              id="nav-myEntitySetting-tab"
              data-bs-toggle="tab"
              href="#nav-myEntitySetting"
              role="tab"
              aria-controls="nav-myEntitySetting"
              aria-selected="true"
              ><span v-tooltip="'نمایش متن'" class="d-flex align-items-center">
                <svg class="icon icon-doc-outline ms-3 d-none d-md-flex">
                  <use xlink:href="#icon-doc-outline"></use>
                </svg>
                <span class="">نمایش متن</span>
              </span>
            </a>
          </div>
        </nav>
      </div>
      <div class="col-12 col-md-9 main-section">
        <!-- <template v-if="currentTab == 1"
          ><My-Account :currentTab="currentTab"></My-Account
        ></template>

        <template v-if="currentTab == 2">
          <Reset-Password :currentTab="currentTab"></Reset-Password>
        </template>
        <template v-if="currentTab == 3">
          <div class="d-flex align-items-center mb-3">
            <label>حالت نمایش:</label>
            <label class="switch-name me-3">
              <input
                @change="setTheme"
                v-model="lightMode"
                true-value="1"
                false-value="0"
                type="checkbox"
                class="checkbox"
              />
              <div class="back"></div>
              <svg class="icon icon-moon moon">
                <use xlink:href="#icon-moon"></use>
              </svg>
              <svg class="icon icon-sun sun">
                <use xlink:href="#icon-sun"></use>
              </svg>
            </label>
          </div>
          <div class="mb-5">
            <div>
              <div class="header-progress"></div>
              <div class="progress-main" style="">
                <div class="progress-div">
                  <label class="">اندازه فونت متن:</label>
                  <div class="d-flex align-items-center">
                    <span>{{ rangeMin }} پیکسل</span>
                    <input
                      class="progress mx-3"
                      type="range"
                      :min="rangeMin"
                      :max="rangeMax"
                      step="0.5"
                      v-model="progress"
                      @input="changeFontSize"
                      style="width: 70%"
                    />
                    <span>{{ rangeMax }} پیکسل</span>
                  </div>
                </div>
              </div>
              <div class="d-block d-sm-flex align-items-center text-size">
                <p :style="fontSize">متن نمونه جهت تست اندازه قلم.</p>
                <span class="font-label me-auto">
                  {{ progress ?? localDefaultFont }} پیکسل
                </span>
              </div>
            </div>
          </div>
          <div class="mb-4">
            <span class="alert alert-warning">
              جهت ثبت تغییرات، دکمه ذخیره را کلیک نمایید.
            </span>
          </div>
          <div class="d-flex justify-content-end">
            <a @click="updateSettings()" class="button" data-dismiss="modal">{{
              $t("Save")
            }}</a>
          </div>
        </template>
        <template v-if="currentTab == 4"
          ><myEntitySetting></myEntitySetting
        ></template> -->
      </div>
    </div>
  </div>
</template>

<script>
// import settingsMixin from "~/mixins/settingsMixin.js";

import settingsApi from "~/apis/settingsApi.js";
import { mapActions, mapState } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { useAuthStore } from "~/stores/authStore";

// import MyAccount from "@pages/settings/pages/MyAccount.vue";
// import MyEntitySetting from "@pages/settings/pages/MyEntitySetting.vue";
// import ResetPassword from "@pages/settings/pages/ResetPassword.vue";

export default {
  // mixins: [settingsMixin],

  props: {
    menuId: {
      default: 1,
    },
  },
  beforeMount() {
    this.httpService = useNuxtApp()["$http"];
  },
  mounted() {
    // const htmlElement = document.querySelector("html");
    // const computedStyle = window.getComputedStyle(htmlElement);
    // const htmlFontSize = computedStyle.getPropertyValue("font-size");

    // برای اولین بار که تگ html مقداری نداره، یه مقدار پیش فرض به عنوان قلم پیش فرض کاربر انتخاب میکنیم.
    // let fzWithoutPx = htmlFontSize.split("px")[0];
    // this.localDefaultFont = fzWithoutPx;
    // this.progress = fzWithoutPx;
    const htmlElm = document.querySelector("html");
    const computedStyle = getComputedStyle(htmlElm);
    const fontSize = computedStyle.fontSize;
    const fontSizeNumber = parseFloat(fontSize);

    this.localDefaultFont = this.fontDataGetter?.defaultFont ?? fontSizeNumber;
    this.progress = this.fontDataGetter?.newFont;
    this.lightMode = this.fontDataGetter?.lightMode ?? "1";
    if (this.isGuest) this.localMenuId = 3;
    this.setTab(this.localMenuId);
  },
  data() {
    return {
      currentTab: 1,
      progress: "",
      localDefaultFont: null,
      lightMode: "1",
      localMenuId: this.menuId,
    };
  },
  computed: {
    ...mapState(useCommonStore, ["fontDataGetter", "currentUser", "isGuest"]),
    fontSize() {
      let size = this.progress ?? this.localDefaultFont;
      return {
        fontSize: size + "px",
      };
    },
    rangeMin() {
      return 8;

      // try {

      //   let defaultFontSize = 8;
      //   if(this.localDefaultFont)
      //       defaultFontSize = parseInt(this.localDefaultFont.split("px")[0]);

      //   if (this.fontDataGetter?.defaultFont)
      //     //return parseInt(this.fontDataGetter?.defaultFont) - 8 ;
      //     return 10;

      //   return defaultFontSize - 8;
      // } catch (err) {
      //   return this.localDefaultFont - 8;
      // }
    },
    rangeMax() {
      return 30;

      // try {
      //   let defaultFontSize = 8;
      //   if(this.localDefaultFont)
      //       defaultFontSize = parseInt(this.localDefaultFont.split("px")[0]);
      //   if (this.fontDataGetter?.defaultFont)
      //     return parseInt(this.fontDataGetter?.defaultFont) + 8;
      //   return defaultFontSize + 8;
      // } catch (err) {
      //   return this.localDefaultFont + 8;
      // }
    },
  },
  methods: {
    ...mapActions(useCommonStore, ["fontDataSetter"]),
    setTheme() {
      const htmlElm = document.querySelector("html");
      if (this.lightMode == "1") {
        htmlElm.style.removeProperty("filter");
      } else {
        htmlElm.style.filter = "hue-rotate(180deg) invert(1)";
      }
    },
    settingHtmlFontSize(fontData) {
      const htmlElm = document.querySelector("html");
      htmlElm.style.fontSize = fontData.newFont;
      this.fontDataSetter(fontData);

      this.localDefaultFont = fontData.defaultFont;
      this.progress = fontData.newFont;
    },
    setTab(tab) {
      this.currentTab = tab;
    },
    changeFontSize() {
      // const htmlElm = document.querySelector("html");
      // htmlElm.style.fontSize = this.progress + "px";
    },
    updateSettings() {
      let payload = {
        ui_last_state: {
          newFont: this.progress,
          defaultFont:
            this.fontDataGetter?.defaultFont ?? this.localDefaultFont,
          lightMode: this.lightMode,
        },
      };
      let url = repoUrl() + settingsApi.user.setKey_object;
      url = url.replace("{{key}}", "ui_last_state");

      this.httpService.postRequest(url, payload).then((res) => {
        this.fontDataSetter(payload.ui_last_state);

        this.mySwalToast({
          title: res.message,
        });
      });
    },
  },
  // components: {
  //   MyAccount,
  //   MyEntitySetting,
  //   ResetPassword,
  // },
};
</script>

<style lang="scss" scoped>
.popUp-tab__menu a {
  display: flex;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-right: 10px;
  border-radius: 0;
  width: 100%;
  border: unset;
  margin: 0;
  font-size: 1rem;
  color: #444444;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 1em;
  padding-left: 10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  &.active {
    background-color: #e8fcff;
  }
  &:hover {
    background-color: #e8fcff;
  }
}
.label-settings {
  color: #96a5b5;
  margin: 1em 0;
}
.nav-tabs {
  border-bottom: unset !important;
}

// سوئیچ حالت شب و روز
.switch-name {
  --dark-sky: #000000;
  --moon: #ffd365;
  --light-sky: #35d5e5;
  --sun: #ffed89;
  display: inline-block;
  position: relative;
  border-radius: 5em;
  cursor: pointer;
  width: 60px;
  height: 30px;
  overflow: hidden;
  transition: all 0.5s;
}

.switch-name .back {
  background-color: var(--dark-sky);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: 0.5s ease-in-out;
}

.switch-name .checkbox {
  opacity: 0;
}

.switch-name .checkbox:checked ~ .back {
  background-color: var(--light-sky);
}

.switch-name .checkbox:checked ~ .moon {
  transform: translate(100%) rotate(180deg);
  opacity: 0;
}

.switch-name .checkbox:checked ~ .sun {
  transform: translate(100%) rotate(180deg);
  opacity: 1;
}

.switch-name .moon {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding: 0.3em;
  fill: var(--moon);
  transition: 0.5s;
}

.switch-name .sun {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  padding: 0.3em;
  fill: var(--sun);
  transition: 0.5s;
  opacity: 0;
}
.nav-item {
  white-space: nowrap;
}
.text-size {
  height: 5em;
}
// 1600px
@media screen and (max-width: 100em) {
}
// 1399px
@media screen and (max-width: 87.499em) {
}

// 991px
@media screen and (max-width: 61.998em) {
}

// 767px
@media screen and (max-width: 47.938em) {
  .my-tabs {
    border-bottom: 1px solid rgb(222, 226, 230);
  }
}
@media screen and (min-width: 47.938em) {
  .my-tabs {
    border-left: 1px solid rgb(222, 226, 230);
  }
}

// 575px
@media screen and (max-width: 35.938em) {
  .main-section {
    height: 18em;
    overflow-y: auto;
  }
}
// end
</style>