chat_ui/pages/Chat.vue

<template>
  <div>
    <group
      ref="chat-list-panel"
      @update-messages="rerenderChatList++"
      :show-header="statusPagHedear"
      id="group"
    ></group>

    <div class="flex-grow-1">
      <div class="position-relative d-flex justify-content-center"></div>
      <div v-if="listGetter">
        <!-- <chat-list
          ref="chat-content"
          :key="rerenderChatList"
          @show="statusPage"
          @my-event="openPagGrup"
        ></chat-list> -->
      </div>

      <div v-else class="no-group-selected" :class="$route.name">
        <img
          style="width: 10em"
          class="img-fluid"
          src="assets/common/img/logo/gray-logo.png"
          alt="هم فهمی"
        />
        <p class="title m-0">
          {{ selectedListBackTitle($route.name) }}
        </p>
      </div>
      <!-- </div> -->
    </div>

    <!-- <mobile-footer></mobile-footer> -->
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useChatStore } from "@chat/stores/chatStore";
import { useCommonStore } from "@stores/commonStore";

export default {
  name: "chat",
  setup() {
    definePageMeta({
      name: "chat",
    });
  },
  mounted() {
    this.TOGGLE_PANEL(false);
  },
  watch: {
    getPanelStatus(status) {
      if (status) this.openForm();
      else this.closeModal();
    },
    $route: {
      handler: function () {
        this.sidebarCollapsedSetter(true);
      },
      deep: true,
      immediate: true,
    },
    // listIdGetter(newId) {
    //   this.filterBy(this.selectedFilter);
    // },
  },
  data() {
    return {
      // #region mehdi
      nomber: 0,
      statusPagHedear: 1,

      // #endregion
      rerenderChatList: 1,
      showListPanel: false,
    };
  },
  computed: {
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "isSidebarCollapsed",
      "sidebarListStatusGetter",
      "listGetter",
    ]),
  },
  methods: {
    ...mapActions(useChatStore, [
      "SET_LIST_COMPONENT_NAME",
      "SET_SELECTED_ITEM",
      "SET_SELECTED_PROJECT",
      "SET_LIST_ID",
      "SET_LIST",
    ]),
    ...mapActions(useCommonStore, [
      "SET_SIDEBAR_LIST_STATUS",
      "checkPermissions",
      "sidebarCollapsedSetter",
      "TOGGLE_PANEL",
    ]),
    selectedListBackTitle(name) {
      if (name == "groups") return "دانشتو با بقیه به اشتراک بزار.";
      if (name == "privates") return "به هر کی دوست داری، پیام بده.";
      if (name == "lobbies") return "به تالار گفتگو خوش اومدی";
    },
    // showSearch() {
    // search in current group, not all groups.
    // this.$refs["chat-list-panel"].showSearchs(true);
    // },

    // #region mehdi
    statusPage($event) {
      const number = $event;

      if (number == 1) {
        if (this.$refs["chat-list-panel"].showMainpag == false) {
          this.$refs["chat-list-panel"].showMainpag = true;
        }
      } else {
        if (this.$refs["chat-list-panel"].showMainpag == false) {
          this.$refs["chat-list-panel"].showMainpag = true;
        }
      }
    },
    // #endregion

    toggleSidebarMenu() {
      this.TOGGLE_SIDEBAR_MENU();
    },
    showToggleListPanel() {
      this.showListPanel = !this.showListPanel;
      this.$refs["chat-list-panel"].showMainpag = true;
    },

    // #region mehdi
    openPagGrup(data) {
      this.enablePanelToggling = data;
      if (this.enablePanelToggling == 1) {
        this.showToggleListPanel();
      }
    },
    // #endregion
  },
  components: {
    Group: defineAsyncComponent(() =>
      import("@chat/components/chat/components/Group.vue")
    ),
    ChatList: defineAsyncComponent(() =>
      import("@chat/components/chat/components/ChatList.vue")
    ),
    // MobileFooter: defineAsyncComponent(() =>
    //   import("@chat/components/chat/components/MobileFooter.vue")
    // ),
  },
};
</script>