feat(spaces): create space management view

package.json

@@ -14,9 +14,11 @@
     "@bimdata/design-system": "0.1.1",
     "@bimdata/utils": "^0.2.15",
     "oidc-client": "^1.10.1",
+    "seedrandom": "^3.0.5",
     "vue": "^3.0.0",
     "vue-i18n": "^9.0.0-beta.14",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "vue3-click-away": "^1.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-e2e-cypress": "~4.5.0",

src/App.vue

@@ -3,6 +3,10 @@
 </template>
 
 <style>
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   padding: 0;

src/api/SpacesService.js

@@ -2,8 +2,20 @@ import { collaborationApiClient } from './index';
 
 class SpacesService {
 
-  async fetchUserSpaces() {
-    return await collaborationApiClient.getClouds();
+  fetchUserSpaces() {
+    return collaborationApiClient.getClouds();
+  }
+
+  createSpace(space) {
+    return collaborationApiClient.createCloud(space);
+  }
+
+  updateSpace(space) {
+    return collaborationApiClient.updateCloud(space.id, space);
+  }
+
+  deleteSpace(space) {
+    return collaborationApiClient.deleteCloud(space.id);
   }
 
 }

src/components/go-back-button/GoBackButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <BIMDataButton ghost radius
+    class="go-back-btn"
+    @click="goBack">
+    <BIMDataIcon name="arrow" size="xxxs" />
+    <span>{{ $t('Header.back') }}</span>
+  </BIMDataButton>
+</template>
+
+<script>
+import { useRouter } from 'vue-router';
+// Components
+import BIMDataButton from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js';
+import BIMDataIcon from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js';
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon
+  },
+  setup() {
+    const router = useRouter();
+    const goBack = () => router.currentRoute.name !== 'root' && router.back();
+    return {
+      goBack
+    };
+  }
+}
+</script>
+
+<style scoped lang="scss" src="./GoBackButton"></style>

src/components/platform-header/PlatformHeader.scss

@@ -1,7 +1,9 @@
 .platform-header {
   display: flex;
   align-items: center;
+  margin-bottom: $spacing-unit;
   padding: $spacing-unit/2 $spacing-unit*2;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
   background-color: $color-white;
 
   .user-menu {

src/components/space-action-menu/SpaceActionMenu.scss

@@ -0,0 +1,48 @@
+.space-action-menu {
+  position: relative;
+
+  &__container {
+    position: absolute;
+    right: 0;
+    width: 203px;
+    min-height: 132px;
+    margin-top: $spacing-unit/2;
+    padding: $spacing-unit/2 0;
+    border-radius: 4px;
+    background-color: $color-white;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+
+    .action-menu {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .update-form {
+      position: relative;
+      padding: 0 $spacing-unit/2;
+
+      &__title {
+        display: block;
+        padding: $spacing-unit*3/4 0;
+        font-weight: bold;
+      }
+
+      &__cancel-btn {
+        position: absolute;
+        top: 0;
+        right: $spacing-unit/2;
+      }
+
+      &__input,
+      &__submit-btn {
+        width: calc(100% - #{$spacing-unit});
+        margin-left: $spacing-unit/2;
+        margin-bottom: $spacing-unit;
+      }
+    }
+  }
+}
+
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+.fade-enter-active { transition: opacity 0.25s ease-out; }
+.fade-leave-active { transition: opacity 0.15s ease-in; }

src/components/space-action-menu/SpaceActionMenu.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="space-action-menu" v-click-away="closeMenu">
+    <BIMDataButton color="default" fill rounded
+      class="space-action-menu__btn"
+      @click="toggleMenu">
+      <BIMDataIcon name="burgerMenu" size="xxxs" />
+    </BIMDataButton>
+    <transition name="fade">
+      <div class="space-action-menu__container" v-show="isOpen">
+        <transition name="fade" mode="out-in">
+          <div class="action-menu" v-if="!onUpdate">
+            <BIMDataButton ghost squared
+              @click="openUpdate">
+              {{ $t('Spaces.SpaceActionMenu.rename') }}
+            </BIMDataButton>
+            <BIMDataButton ghost squared>
+              {{ $t('Spaces.SpaceActionMenu.changeImage') }}
+            </BIMDataButton>
+            <BIMDataButton ghost squared>
+              {{ $t('Spaces.SpaceActionMenu.deleteImage') }}
+            </BIMDataButton>
+            <BIMDataButton ghost squared
+              @click="deleteSpace(space)">
+              {{ $t('Spaces.SpaceActionMenu.delete') }}
+            </BIMDataButton>
+          </div>
+          <div class="update-form" v-else>
+            <span class="update-form__title">
+              {{ $t('Spaces.SpaceRenameForm.title') }}
+            </span>
+            <BIMDataButton ghost rounded
+              class="update-form__cancel-btn"
+              @click="closeUpdate">
+              <BIMDataIcon name="close" size="xxxs" />
+            </BIMDataButton>
+            <BIMDataInput ref="nameInput"
+              class="update-form__input"
+              :placeholder="$t('Spaces.SpaceRenameForm.inputName')"
+              v-model="spaceName"
+            />
+            <BIMDataButton fill radius color="primary"
+              class="update-form__submit-btn"
+              @click="renameSpace">
+              {{ $t('Spaces.SpaceRenameForm.buttonRename') }}
+            </BIMDataButton>
+          </div>
+        </transition>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { useSpacesState } from '@/state/spacesState';
+// Components
+import BIMDataButton from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js';
+import BIMDataIcon from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js';
+import BIMDataInput from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataInput.js';
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon,
+    BIMDataInput
+  },
+  props: {
+    space: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const { deleteSpace, updateSpace } = useSpacesState();
+
+    const nameInput = ref(null);
+    const isOpen = ref(false);
+    const onUpdate = ref(false);
+    const spaceName = ref(props.space.name);
+
+    const closeMenu = () => { isOpen.value = false; closeUpdate(); };
+    const toggleMenu = () => { isOpen.value = !isOpen.value; closeUpdate(); };
+    const openUpdate = () => { onUpdate.value = true; setTimeout(() => nameInput.value.focus(), 400); };
+    const closeUpdate = () => onUpdate.value = false;
+    const renameSpace = () => updateSpace({ ...props.space, name: spaceName.value }).then(closeMenu);
+
+    return {
+      nameInput,
+      isOpen,
+      onUpdate,
+      spaceName,
+      closeMenu,
+      toggleMenu,
+      openUpdate,
+      closeUpdate,
+      renameSpace,
+      deleteSpace,
+    };
+  }
+}
+</script>
+
+<style scoped lang="scss" src="./SpaceActionMenu.scss"></style>

src/components/space-card/SpaceCard.scss

@@ -0,0 +1,45 @@
+.space-card {
+  width: 215px;
+  height: 275px;
+  margin: $spacing-unit*2;
+  transition-duration: 0.35s;
+
+  & /deep/ {
+    .bimdata-card__submenu {
+      position: relative;
+      top: $spacing-unit*2;
+      z-index: 1;
+      height: 0;
+      padding: 0 $spacing-unit/2;
+    }
+
+    .bimdata-card__content {
+      overflow: hidden;
+      height: 196px;
+      padding: 0;
+    }
+
+    .bimdata-card__footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: calc(100% - 196px);
+      padding: 0;
+
+      .title-underline {
+        height: 1px;
+        width: 50px;
+        margin-top: $spacing-unit;
+        background-color: $color-tertiary;
+      }
+    }
+  }
+
+  &:hover {
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
+    .space-image {
+      transform: translateY($spacing-unit/3) scale(1.04);
+    }
+  }
+}

src/components/space-card/SpaceCard.vue

@@ -0,0 +1,37 @@
+<template>
+  <BIMDataCard class="space-card">
+    <template #right>
+      <SpaceActionMenu :space="space" />
+    </template>
+    <template #content>
+      <SpaceImage :space="space" />
+    </template>
+    <template #footer>
+      <div>{{ space.name }}</div>
+      <div class="title-underline"></div>
+    </template>
+  </BIMDataCard>
+</template>
+
+<script>
+// Components
+import BIMDataCard from '@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js';
+import SpaceActionMenu from '@/components/space-action-menu/SpaceActionMenu';
+import SpaceImage from '@/components/space-image/SpaceImage';
+
+export default {
+  components: {
+    BIMDataCard,
+    SpaceActionMenu,
+    SpaceImage
+  },
+  props: {
+    space: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss" src="./SpaceCard.scss"></style>

src/components/space-creation-card/SpaceCreationCard.scss

@@ -0,0 +1,23 @@
+.space-creation-card {
+  width: 215px;
+  height: 275px;
+  margin: $spacing-unit*2;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
+
+  & /deep/ {
+    .bimdata-card__submenu {
+      height: $spacing-unit*4;
+      box-shadow: none;
+      font-size: 1.05rem;
+      font-weight: bold;
+    }
+
+    .bimdata-card__content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      height: calc(100% - #{$spacing-unit*4});
+      padding: $spacing-unit;
+    }
+  }
+}