From 63904366ceb34323c789987a97a2a74442936c51 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 20 Jan 2022 05:41:29 +0000
Subject: [PATCH] :sparkles: Adds widget compatibility into workspace view

---
 src/components/Workspace/SideBar.vue    |  1 +
 src/components/Workspace/WidgetView.vue | 39 +++++++++++++++++++++++++
 src/views/Workspace.vue                 | 16 +++++++++-
 3 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Workspace/WidgetView.vue

diff --git a/src/components/Workspace/SideBar.vue b/src/components/Workspace/SideBar.vue
index 94595b6e..40ac0d02 100644
--- a/src/components/Workspace/SideBar.vue
+++ b/src/components/Workspace/SideBar.vue
@@ -55,6 +55,7 @@ export default {
     /* Toggles the section clicked, and closes all other sections */
     openSection(index) {
       this.isOpen = this.isOpen.map((val, ind) => (ind !== index ? false : !val));
+      if (this.sections[index].widgets) this.$emit('launch-widget', this.sections[index].widgets);
     },
     /* When item clicked, emit a launch event */
     launchApp(options) {
diff --git a/src/components/Workspace/WidgetView.vue b/src/components/Workspace/WidgetView.vue
new file mode 100644
index 00000000..7ffa12b4
--- /dev/null
+++ b/src/components/Workspace/WidgetView.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="workspace-widget-view" v-if="widgets">
+    <WidgetBase
+      v-for="(widget, widgetIndx) in widgets"
+      :key="widgetIndx"
+      :widget="widget"
+      :index="widgetIndx"
+      class="workspace-widget"
+    />
+  </div>
+</template>
+
+<script>
+import WidgetBase from '@/components/Widgets/WidgetBase';
+
+export default {
+  components: {
+    WidgetBase,
+  },
+  props: {
+    widgets: Array,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.workspace-widget-view {
+  padding: 1rem 0;
+  background: var(--background);
+  position: absolute;
+  left: var(--side-bar-width);
+  height: calc(100% - var(--header-height) - 1rem);
+  width: calc(100% - var(--side-bar-width));
+  .workspace-widget {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index 80d22f33..452b3e2d 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -1,8 +1,14 @@
 <template>
   <div class="work-space">
-    <SideBar :sections="sections" @launch-app="launchApp" :initUrl="getInitialUrl()" />
+    <SideBar
+      :sections="sections"
+      @launch-app="launchApp"
+      @launch-widget="launchWidget"
+      :initUrl="getInitialUrl()"
+    />
     <WebContent :url="url" v-if="!isMultiTaskingEnabled" />
     <MultiTaskingWebComtent :url="url" v-else />
+    <WidgetView :widgets="widgets" v-if="widgets" />
   </div>
 </template>
 
@@ -10,6 +16,7 @@
 import HomeMixin from '@/mixins/HomeMixin';
 import SideBar from '@/components/Workspace/SideBar';
 import WebContent from '@/components/Workspace/WebContent';
+import WidgetView from '@/components/Workspace/WidgetView';
 import MultiTaskingWebComtent from '@/components/Workspace/MultiTaskingWebComtent';
 import Defaults from '@/utils/defaults';
 import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
@@ -19,6 +26,7 @@ export default {
   mixins: [HomeMixin],
   data: () => ({
     url: '',
+    widgets: null,
     GetTheme,
     ApplyLocalTheme,
     ApplyCustomVariables,
@@ -37,6 +45,7 @@ export default {
   components: {
     SideBar,
     WebContent,
+    WidgetView,
     MultiTaskingWebComtent,
   },
   methods: {
@@ -46,6 +55,11 @@ export default {
       } else {
         this.url = options.url;
       }
+      this.widgets = null;
+    },
+    launchWidget(widgets) {
+      this.url = '';
+      this.widgets = widgets;
     },
     setTheme() {
       const theme = this.GetTheme();