✨ feat(store): remove sidebar related mutations

🔥 Remove 'expandSidebar', 'collapseSidebar', 'expandActions', and 'collapseActions' mutations from store.ts. Update components dependent on these mutations accordingly.
crawlab-team · Aug 6, 2024 · 61b7e97 · 61b7e97
1 parent ebad957
commit 61b7e97
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 250 deletions.
diff --git a/src/components/ui/nav/NavActions.vue b/src/components/ui/nav/NavActions.vue
@@ -1,74 +1,30 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
-
-const props = defineProps<{
-  collapsed?: boolean;
-  minHeight?: string;
-}>();
-
-const originalHeight = ref<string>();
-const height = ref<string>();
+import { computed, onMounted, ref } from 'vue';
 
 const navActions = ref<HTMLDivElement>();
 
 const unmounted = ref<boolean>(true);
 
-const collapsed = computed<boolean>(() => {
-  const { collapsed } = props as NavActionsProps;
-  return collapsed || false;
-});
-
-const style = computed(() => {
-  return {
-    minHeight: height.value,
-  };
-});
-
 const classes = computed<string[]>(() => {
   const cls = [];
-  if (collapsed.value) cls.push('collapsed');
   if (unmounted.value) cls.push('unmounted');
   return cls;
 });
 
-const getHeight = () => {
-  return height.value;
-};
-
-const updateHeight = () => {
-  if (!collapsed.value) {
-    if (!originalHeight.value) {
-      if (!navActions.value) return;
-      originalHeight.value = window.getComputedStyle(navActions.value).height;
-    }
-    height.value = originalHeight.value;
-  } else {
-    height.value = '0';
-  }
-};
-
-watch(collapsed, () => updateHeight());
-
 onMounted(() => {
-  updateHeight();
   unmounted.value = false;
 });
 
-defineExpose({
-  getHeight,
-  updateHeight,
-});
-
 defineOptions({ name: 'ClNavActions' });
 </script>
 
 <template>
-  <div ref="navActions" :class="classes" :style="style" class="nav-actions">
+  <div ref="navActions" :class="classes" class="nav-actions">
     <slot></slot>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .nav-actions {
   margin: 0;
   padding: 0 10px;

diff --git a/src/components/ui/nav/NavTabs.vue b/src/components/ui/nav/NavTabs.vue
@@ -6,23 +6,16 @@ const t = translate;
 defineProps<{
   items?: NavItem[];
   activeKey?: string;
-  collapsed?: boolean;
-  toggle?: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'select', index: string): void;
-  (e: 'toggle'): void;
 }>();
 
 const onSelect = (index: string) => {
   emit('select', index);
 };
 
-const onToggle = () => {
-  emit('toggle');
-};
-
 const getClassName = (item: NavItem): string => {
   const cls = [];
   if (item.emphasis) cls.push('emphasis');
@@ -34,18 +27,6 @@ defineOptions({ name: 'ClNavTabs' });
 
 <template>
   <div class="nav-tabs">
-    <el-tooltip
-      v-if="toggle"
-      :content="
-        collapsed
-          ? t('components.nav.tabs.toggle.expand')
-          : t('components.nav.tabs.toggle.collapse')
-      "
-    >
-      <div class="toggle" @click="onToggle">
-        <cl-icon :icon="collapsed ? ['fa', 'indent'] : ['fa', 'outdent']" />
-      </div>
-    </el-tooltip>
     <el-menu :default-active="activeKey" mode="horizontal" @select="onSelect">
       <el-menu-item
         v-for="item in items"

diff --git a/src/interfaces/components/ui/nav/NavActions.d.ts b/src/interfaces/components/ui/nav/NavActions.d.ts
diff --git a/src/interfaces/store/index.d.ts b/src/interfaces/store/index.d.ts
@@ -129,10 +129,6 @@ export declare global {
     resetTableListSortByKey: StoreMutation<BaseStoreState<T>, string>;
     setAllList: StoreMutation<BaseStoreState<T>, T[]>;
     resetAllList: StoreMutation<BaseStoreState<T>>;
-    expandSidebar: StoreMutation<BaseStoreState<T>>;
-    collapseSidebar: StoreMutation<BaseStoreState<T>>;
-    expandActions: StoreMutation<BaseStoreState<T>>;
-    collapseActions: StoreMutation<BaseStoreState<T>>;
     setTabs: StoreMutation<BaseStoreState, NavItem[]>;
     setDisabledTabKeys: StoreMutation<BaseStoreState, string[]>;
     resetDisabledTabKeys: StoreMutation<BaseStoreState, string[]>;

diff --git a/src/layouts/content/detail/DetailLayout.vue b/src/layouts/content/detail/DetailLayout.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeMount, onBeforeUnmount, onMounted } from 'vue';
-import useDetail from '@/layouts/content/detail/useDetail';
 import { useStore } from 'vuex';
-import { translate } from '@/utils';
+import useDetail from '@/layouts/content/detail/useDetail';
 
 const props = withDefaults(
   defineProps<{
@@ -20,35 +19,16 @@ const props = withDefaults(
   }
 );
 
-const IGNORE_GET_ALL_NS = ['task'];
-
 const ns = computed(() => props.storeNamespace);
 const store = useStore();
-const state = store.state[ns.value] as BaseStoreState;
-
-const computedNavItems = computed<NavItem[]>(() =>
-  state.allList.map((d: BaseModel) => {
-    const { navItemNameKey } = props;
-    return {
-      id: d._id,
-      title: d[navItemNameKey],
-    } as NavItem;
-  })
-);
 
 const {
   activeId,
   activeTabName,
-  navSidebar,
   getForm,
-  sidebarCollapsed,
-  actionsCollapsed,
-  contentContainerStyle,
-  navActions,
-  onNavSidebarSelect,
-  onNavSidebarToggle,
+  navLoading,
+  onNavSelect,
   onNavTabsSelect,
-  onNavTabsToggle,
   onBack,
   onSave,
 } = useDetail(ns.value);
@@ -57,63 +37,60 @@ const computedTabs = computed<NavItem[]>(
   () => store.getters[`${ns.value}/tabs`]
 );
 
+const allListSelectOptions = computed(() => {
+  return store.state[ns.value].allList.map((item: BaseModel) => ({
+    label: item[props.navItemNameKey],
+    value: item._id,
+  }));
+});
+
 // get form before mount
 onBeforeMount(getForm);
 
 // get all list before mount
 onBeforeMount(async () => {
-  if (IGNORE_GET_ALL_NS.includes(ns.value)) return;
   await store.dispatch(`${ns.value}/getAllList`);
 });
 
-// scroll nav sidebar after mounted
-onMounted(() => {
-  if (!navSidebar.value) return;
-  navSidebar.value.scroll(activeId.value);
-});
-
-onMounted(() => {});
-
 // reset form before unmount
 onBeforeUnmount(() => {
   if (!activeTabName.value) {
     store.commit(`${ns.value}/resetForm`);
   }
 });
+
 defineOptions({ name: 'ClDetailLayout' });
 </script>
 
 <template>
-  <div
-    :class="noSidebar || sidebarCollapsed ? 'collapsed' : ''"
-    class="detail-layout"
-  >
-    <div class="sidebar">
-      <cl-nav-sidebar
-        v-if="!noSidebar"
-        ref="navSidebar"
-        :active-key="activeId"
-        :collapsed="noSidebar || sidebarCollapsed"
-        :items="computedNavItems"
-        @select="onNavSidebarSelect"
-        @toggle="onNavSidebarToggle"
-      />
-    </div>
-    <div class="content">
+  <div class="detail-layout">
+    <div v-loading="navLoading" class="content">
       <cl-nav-tabs
         :active-key="activeTabName"
         :items="computedTabs"
-        :collapsed="sidebarCollapsed"
-        toggle
         class="nav-tabs"
         @select="onNavTabsSelect"
-        @toggle="onNavTabsToggle"
-      />
-      <cl-nav-actions
-        ref="navActions"
-        :collapsed="actionsCollapsed"
-        class="nav-actions"
       >
+        <template #extra>
+          <div class="nav-select">
+            <cl-icon :icon="['fa', 'exchange-alt']" size="small" />
+            <el-select
+              :model-value="activeId"
+              size="small"
+              placement="bottom-end"
+              @change="onNavSelect"
+            >
+              <el-option
+                v-for="op in allListSelectOptions"
+                :key="op.value"
+                :label="op.label"
+                :value="op.value"
+              />
+            </el-select>
+          </div>
+        </template>
+      </cl-nav-tabs>
+      <cl-nav-actions class="nav-actions">
         <cl-nav-action-group-detail-common
           :show-back-button="showBackButton"
           :show-save-button="showSaveButton"
@@ -122,7 +99,7 @@ defineOptions({ name: 'ClDetailLayout' });
         />
         <slot name="actions" />
       </cl-nav-actions>
-      <div :style="contentContainerStyle" class="content-container">
+      <div class="content-container">
         <router-view />
       </div>
     </div>
@@ -134,29 +111,8 @@ defineOptions({ name: 'ClDetailLayout' });
   display: flex;
   height: 100%;
 
-  &.collapsed {
-    .sidebar {
-      flex: 0 0 0;
-    }
-
-    .content {
-      flex: 1 0 100%;
-      max-width: 100%;
-    }
-  }
-
-  .sidebar {
-    flex: 0 0 var(--cl-nav-sidebar-width);
-    width: 0;
-    transition: flex var(--cl-nav-sidebar-collapse-transition-duration);
-    border-right: 1px solid var(--cl-info-plain-color);
-    background-color: #ffffff;
-  }
-
   .content {
-    flex: 1 0 calc(100% - var(--cl-nav-sidebar-width));
-    width: var(--cl-nav-sidebar-width);
-    max-width: calc(100% - var(--cl-nav-sidebar-width));
+    flex: 1;
     background-color: var(--cl-container-white-bg);
     display: flex;
     flex-direction: column;
@@ -165,28 +121,21 @@ defineOptions({ name: 'ClDetailLayout' });
       height: fit-content;
     }
 
-    .content-container {
-      flex: 1;
-    }
-  }
+    .nav-select {
+      width: 180px;
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: var(--cl-info-medium-color);
 
-  .actions-toggle {
-    display: flex;
-    align-items: center;
-    height: var(--cl-nav-tabs-height);
-    color: var(--cl-info-color);
-    cursor: pointer;
-    padding: 0 20px;
-    border-left: 1px solid var(--cl-container-border-color);
-
-    .icon {
-      transition: all var(--cl-default-transition-duration);
+      .el-select {
+        flex: 1;
+      }
     }
 
-    &.collapsed {
-      .icon {
-        transform: rotate(180deg);
-      }
+    .content-container {
+      flex: 1;
     }
   }
 }