added toggle switch to header to toggle between fullview and default view

This commit is contained in:
Peter Olu 2022-04-23 14:38:17 +01:00
parent d1236895f5
commit efc4bcd61a

View File

@ -104,6 +104,20 @@ limitations under the License. -->
</i> </i>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="switch">
<span style="margin-right: 5px">Toggle full view</span>
<el-switch
v-model="dashboardStore.fullView"
active-text="Full view"
inactive-text="FV"
size="small"
inline-prompt
active-color="#409eff"
inactive-color="#999"
@change="toggleFullView"
/>
</div>
<div class="switch"> <div class="switch">
<el-switch <el-switch
v-model="dashboardStore.editMode" v-model="dashboardStore.editMode"
@ -121,7 +135,7 @@ limitations under the License. -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, computed, watch } from "vue"; import { reactive, ref, computed, watch } from "vue";
import { useRoute } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { import {
@ -144,6 +158,13 @@ const dashboardStore = useDashboardStore();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const params = useRoute().params; const params = useRoute().params;
const path = useRoute();
const router = useRouter();
if (!path.path.includes("fullview")) {
dashboardStore.setViewMode(false)
}else{
dashboardStore.setViewMode(true)
}
const toolIcons = ref<{ name: string; content: string; id: string }[]>( const toolIcons = ref<{ name: string; content: string; id: string }[]>(
EndpointRelationTools EndpointRelationTools
); );
@ -387,7 +408,16 @@ function changeDestPods(pod: any) {
selectorStore.setCurrentDestPod(null); selectorStore.setCurrentDestPod(null);
} }
} }
function toggleFullView(e) {
dashboardStore.setViewMode(e);
if (dashboardStore.fullView) {
const newPath = path.path.replace("dashboard", "fullview");
router.push(newPath);
} else {
const newPath = path.path.replace("fullview", "dashboard");
router.push(newPath);
}
}
function changeMode() { function changeMode() {
if (dashboardStore.editMode) { if (dashboardStore.editMode) {
ElMessage.warning(t("editWarning")); ElMessage.warning(t("editWarning"));