feature:teamspace:create

extracted DialogTeamspaceTypes and DialogTeamspaceCreate together in view TeamspaceCreate

src/ui/components/DialogTeamspaceCreate.vue

@@ -47,14 +47,15 @@
                             >Permissions</label>
 
                             <base-button
+                                @click.stop="handleTeamspaceTypesDisplay"
                                 style="min-height: 45px; width: 100%; padding: 4px 0; box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px inset;"
                             >
-                                <div style="display: flex; line-height: 120%; width: 100%; user-select: none; padding-top: 4px; padding-bottom: 4px;">
+                                <div ref="typeBtn" style="display: flex; line-height: 120%; width: 100%; user-select: none; padding-top: 4px; padding-bottom: 4px;">
                                     <div style="margin-left: 10px; margin-right: 6px;">
-                                        <div>Open</div>
+                                        <div>{{ props.type.type }}</div>
 
                                         <div style="margin-top: 2px; font-size: 12px; color: rgb(120, 119, 116);"
-                                        >Anyone can see and join this teamspace</div>
+                                        >{{ props.type.description }}</div>
                                     </div>
                                 </div>
                             </base-button>
@@ -63,7 +64,7 @@
                                 <div style="display: inline-flex;">
                                     <base-button style="height: 32px; padding: 0 12px; white-space: nowrap; border-radius: 4px; color: white; font-weight: 500;"
                                         :style="state.name === '' ? { opacity: 0.4, cursor: 'default' } : { cursor: 'pointer' }"
-                                        @click.stop="handleCreateTeamspace"
+                                        @click.stop="state.name && handleCreateTeamspace()"
                                         :hover-style="{background: 'rgb(0, 119, 212)'}"
                                         :default-style="{background: 'rgb(35, 131, 226)'}"
                                     >Create teamspace</base-button>
@@ -80,18 +81,40 @@
 <script setup>
 import { useGeneralStore } from '@/stores/general';
 import BaseButton from './BaseButton.vue';
-import { reactive } from 'vue';
+import { reactive, ref, defineProps } from 'vue';
+
+const props = defineProps({
+    type: {
+        type: Object,
+        required: true
+    }
+});
 
 const state = reactive({
     name: "",
     description: ""
 });
 
+const typeBtn = ref(null);
+
+const generalStore = useGeneralStore();
+
+function handleTeamspaceTypesDisplay() {
+    const { top, width, left, height } = typeBtn.value.getBoundingClientRect();
+    generalStore.setCurrentComponentInDefaultOverlay("dialog_teamspace_types", {
+        top,
+        left,
+        height,
+        width
+    });
+}
+
 function handleClose() {
-    useGeneralStore().hideCurrentComponent();
+    generalStore.hideCurrentComponent();
 }
 
 function handleCreateTeamspace() {
-    console.log(state.name, state.description);
+    console.log(state.name, state.description, props.type);
+    handleClose();
 }
 </script>

src/ui/components/DialogTeamspaceTypes.vue

@@ -0,0 +1,40 @@
+<template>
+    <dialog-view pos="store">
+        <div>
+            <base-button v-for="(spaceTypeInfo, i) in types"
+                :key="i"
+                @click.stop="handleTypeSelect(spaceTypeInfo)"
+                style="min-height: 45px; width: 100%; padding: 4px 0;"
+            >
+                <div style="display: flex; line-height: 120%; width: 100%; user-select: none; padding-top: 4px; padding-bottom: 4px;">
+                    <div style="margin-left: 10px; margin-right: 6px;">
+                        <div>{{ spaceTypeInfo.type }}</div>
+
+                        <div style="margin-top: 2px; font-size: 12px; color: rgb(120, 119, 116);"
+                        >{{ spaceTypeInfo.description }}</div>
+                    </div>
+                </div>
+            </base-button>
+        </div>
+    </dialog-view>
+</template>
+
+<script setup>
+import DialogView from './DialogView.vue';
+import BaseButton from './BaseButton.vue';
+import { useGeneralStore } from '@/stores/general';
+import { defineEmits } from 'vue';
+
+const emits = defineEmits(["typeSelect"]);
+
+const types = [
+    { type: "Default", description: "Everyone at workspace must me member" },
+    { type: "Open", description: "Anyone can see and join this teamspace" },
+    { type: "Closed", description: "Anyone can see teamspace but not join" }
+];
+
+function handleTypeSelect(type) {
+    emits("typeSelect", type);
+    useGeneralStore().hideCurrentComponent();
+}
+</script>

src/ui/components/DialogView.vue

@@ -9,15 +9,15 @@
             :style="{ top: `${pos.top}px`, left: `${pos.left}px`}"
         >
             <div style="height: 0px;"
-                :style="{ width: `${props.width}` }"
+                :style="{ width: pos.width ? `${pos.width}px` : `${props.width}`, height: `${pos.height}px` || '100%' }"
             ></div>
 
             <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end;">
                 <div style="position: relative; top: 100%; pointer-events: auto;">
                     <div style="display: flex; align-items: center; position: relative; flex-direction: column-reverse; transform-origin: 100% top; opacity: 1; transition-property: opacity, transform; transition-duration: 270ms; transition-timing-function: ease;">
                         <div ref="dialog" role="dialog" 
                             style="border-radius: 5px; background: white; backdrop-filter: none; position: relative; max-width: calc(-24px + 100vw); box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px; overflow: hidden;"
-                            :style="{ width: `${props.width}` }"
+                            :style="{width: pos.width ? `${pos.width}px` : `${props.width}`}"
                         >
 
                             <slot></slot>
@@ -43,6 +43,10 @@ const props = defineProps({
     width: {
         type: String,
         default: "272px"
+    },
+    pos: {
+        type: String,
+        default: null
     }
 })
 
@@ -72,14 +76,19 @@ const pos = ref({});
 const dialog = ref();
 
 onMounted(() => {
-    const { height: dialogHeight, width: dialogWidth } = dialog.value.getBoundingClientRect();
-
-    const adjustmentY = window.innerHeight - generalStore.dialog.top - dialogHeight - 36;
-    const adjustmentX = window.innerWidth - generalStore.dialog.left - dialogWidth - 36;
-
-    pos.value = {
-        top: adjustmentY < 0 ? generalStore.dialog.top + adjustmentY : generalStore.dialog.top,
-        left: adjustmentX < 0 ? generalStore.dialog.left + adjustmentX : generalStore.dialog.left
-    };
-})
+    
+    if(!props.pos) {
+        const { height: dialogHeight, width: dialogWidth } = dialog.value.getBoundingClientRect();
+        const adjustmentY = window.innerHeight - generalStore.dialog.top - dialogHeight - 36;
+        const adjustmentX = window.innerWidth - generalStore.dialog.left - dialogWidth - 36;
+    
+        pos.value = {
+            top: adjustmentY < 0 ? generalStore.dialog.top + adjustmentY : generalStore.dialog.top,
+            left: adjustmentX < 0 ? generalStore.dialog.left + adjustmentX : generalStore.dialog.left
+        };
+    }
+    else {
+        pos.value = generalStore.getCurrentComponentAndProps().props;
+    }
+});
 </script>

src/ui/views/MainView.vue

@@ -42,7 +42,7 @@
       >
         <div style="position: relative; z-index: 0;"></div>
 
-        <div 
+        <div
           v-for="(component, index) in components"
           :key="component.name"
           data-overlay="true" 
@@ -91,8 +91,8 @@
             :user-id="component.props.userId"
           />
 
-          <dialog-teamspace-create v-else-if="component.name === 'dialog_teamspace_create'"
-
+          <teamspace-create 
+            v-else-if="component.name === 'dialog_teamspace_create'"
           />
         </div>
 
@@ -106,8 +106,8 @@
         <div style="position: relative; z-index: 0;"></div>
       </div>
     </div>
+    {{ routeQuery }}
   </div>
-  {{ routeQuery }}
 </template>
 
 
@@ -130,7 +130,8 @@ import OptionEditView from '@/ui/views/OptionEditView.vue';
 import CollectionTemplatesList from '@/ui/components/CollectionTemplatesList.vue';
 import SpaceSettingsContentPeopleAddMember from '../components/SpaceSettingsContentPeopleAddMember.vue';
 import SpaceSettingsDialogPeopleRemove from '../components/SpaceSettingsDialogPeopleRemove.vue';
-import DialogTeamspaceCreate from "../components/DialogTeamspaceCreate.vue";
+import TeamspaceCreate from './TeamspaceCreate.vue';
+
 const spaceId = "f2cf1fd1-8789-4ddd-9190-49f41966c446";
 const spaceViewId = "dbf9ee2d-ded5-4b35-b63d-de778f9dc19a";
 

src/ui/views/TeamspaceCreate.vue

@@ -0,0 +1,24 @@
+<template>
+    <dialog-teamspace-create 
+        :type="selectedType"
+    />
+
+    <dialog-teamspace-types 
+        @typeSelect="selectedType = $event"
+        v-if="components?.[components.length-1].name === 'dialog_teamspace_types'"
+    />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import DialogTeamspaceCreate from "../components/DialogTeamspaceCreate.vue";
+import DialogTeamspaceTypes from "../components/DialogTeamspaceTypes.vue";
+import { useGeneralStore } from "@/stores/general";
+
+const components = useGeneralStore().components;
+
+const selectedType = ref({
+    type: "Open", 
+    description: "Everyone can see and join this teamspace"
+});
+</script>