From af2745c2c09c738f74e1aa5bd9c412c76ca11337 Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Tue, 7 Jan 2025 00:08:05 +0300
Subject: [PATCH 1/3] feat: select component integration

By this update Select Component was integrated into note's settings into Role Select component.
Due to this integration, some issues were fixed:
- added ability to get selected value outside the component via @value-update attribute
- changed Popover's reactive styling to avoid unapplying component's positioning
- Updated Select Component's page in Playground
---
 codex-ui/dev/pages/components/Select.vue      |  9 ++++-
 .../src/vue/components/popover/Popover.vue    | 10 +++---
 codex-ui/src/vue/components/select/Select.vue |  4 +++
 .../components/team/RoleSelect.vue            | 34 +++++++++++--------
 4 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/codex-ui/dev/pages/components/Select.vue b/codex-ui/dev/pages/components/Select.vue
index 91c8070d..8b573e34 100644
--- a/codex-ui/dev/pages/components/Select.vue
+++ b/codex-ui/dev/pages/components/Select.vue
@@ -8,17 +8,24 @@
   <Select
     :items="options"
     :default-item="defaultItem"
+    @value-update="(value) => updatedValue = value"
   />
+  <Heading :level="3">
+    Getting selected option
+  </Heading>
+  You can use selected item outside the component via <code>@value-update</code>: <i>{{ updatedValue }}</i>
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { ContextMenuItem, DefaultItem, Select } from '../../../src';
+import { ContextMenuItem, DefaultItem, Heading, Select } from '../../../src';
+import { ref } from 'vue';
 
 const defaultItem: DefaultItem = {
   title: 'Choose an option',
   onActivate: () => {},
 };
+const updatedValue = ref<DefaultItem>(defaultItem);
 const options: ContextMenuItem[] = [
   {
     type: 'default',
diff --git a/codex-ui/src/vue/components/popover/Popover.vue b/codex-ui/src/vue/components/popover/Popover.vue
index 3e00a07a..43ff4b35 100644
--- a/codex-ui/src/vue/components/popover/Popover.vue
+++ b/codex-ui/src/vue/components/popover/Popover.vue
@@ -3,6 +3,12 @@
     v-show="isOpen"
     ref="popoverEl"
     :class="$style.popover"
+    :style="{
+      left: position.left + 'px',
+      top: position.top + 'px',
+      transform: position.transform,
+      width: width + 'px' // Assuming width is in pixels
+    }"
   >
     <component
       :is="content.component"
@@ -51,10 +57,6 @@ onClickOutside(popoverEl, hide, {
   border-radius: var(--radius-field);
   border: 1px solid var(--base--border);
   padding: var(--h-padding);
-  left: v-bind('position.left');
-  top: v-bind('position.top');
-  transform: v-bind('position.transform');
-  width: v-bind('width');
   box-sizing: border-box;
 }
 </style>
diff --git a/codex-ui/src/vue/components/select/Select.vue b/codex-ui/src/vue/components/select/Select.vue
index 905e930d..f8049a3c 100644
--- a/codex-ui/src/vue/components/select/Select.vue
+++ b/codex-ui/src/vue/components/select/Select.vue
@@ -15,6 +15,7 @@ import { onMounted, ref } from 'vue';
 import { usePopover, PopoverShowParams } from '../popover';
 import { Button } from '../button';
 
+const emit = defineEmits(['valueUpdate']);
 const props = defineProps<{
   items: SelectItem[];
   defaultItem: DefaultItem;
@@ -45,8 +46,11 @@ const defaultValue: SelectItem = props.defaultItem;
 const activeItem = ref(defaultValue);
 
 /* Main function to update selected item */
+/* Also creates new event, which could be caught outside */
+
 const updateActiveItem = (item: DefaultItem) => {
   activeItem.value = item;
+  emit('valueUpdate', activeItem.value);
   hide();
 };
 
diff --git a/src/presentation/components/team/RoleSelect.vue b/src/presentation/components/team/RoleSelect.vue
index 96f3242e..4e97d901 100644
--- a/src/presentation/components/team/RoleSelect.vue
+++ b/src/presentation/components/team/RoleSelect.vue
@@ -1,17 +1,10 @@
 <template>
   <div v-if="teamMember.user.id != user?.id">
-    <select
-      v-model="selectedRole"
-      @change="updateMemberRole"
-    >
-      <option
-        v-for="(role, index) in roleOptions"
-        :key="index"
-        :value="role"
-      >
-        {{ t(`noteSettings.team.roles.${role}`) }}
-      </option>
-    </select>
+    <Select
+      :items="roleItems"
+      :default-item="defaultRole"
+      @value-update="(updatedRole) => updateMemberRole(updatedRole)"
+    />
   </div>
 </template>
 
@@ -22,6 +15,7 @@ import { computed, ref } from 'vue';
 import useNoteSettings from '@/application/services/useNoteSettings.ts';
 import { useAppState } from '@/application/services/useAppState';
 import { useI18n } from 'vue-i18n';
+import { ContextMenuItem, DefaultItem, Select } from 'codex-ui/vue';
 
 /**
  * TeamMember props
@@ -38,8 +32,20 @@ const props = defineProps<{
 }>();
 
 const selectedRole = ref(MemberRole[props.teamMember.role]);
+const defaultRole: DefaultItem = {
+  title: selectedRole.value,
+  onActivate: () => {},
+};
 
 const roleOptions = computed(() => Object.values(MemberRole).filter(value => typeof value === 'string'));
+const roleItems: ContextMenuItem[] = [];
+
+roleOptions.value.forEach((role) => {
+  roleItems.push({
+    title: role.toString(),
+    onActivate: () => {},
+  });
+});
 
 const { changeRole } = useNoteSettings();
 
@@ -50,8 +56,8 @@ const { t } = useI18n();
 /**
  * Updates the user role if it has been changed
  */
-async function updateMemberRole() {
-  changeRole(props.noteId, props.teamMember.user.id, MemberRole[selectedRole.value as keyof typeof MemberRole]);
+async function updateMemberRole(updatedRole: DefaultItem | any) {
+  changeRole(props.noteId, props.teamMember.user.id, MemberRole[updatedRole.title as keyof typeof MemberRole]);
 }
 </script>
 

From f66af35ad36c1f49a4bb551003379ca7ce782b43 Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Tue, 7 Jan 2025 00:18:56 +0300
Subject: [PATCH 2/3] fix: old lines clean & function's info update

Nothing special
---
 src/presentation/components/team/RoleSelect.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/presentation/components/team/RoleSelect.vue b/src/presentation/components/team/RoleSelect.vue
index 4e97d901..055cbb76 100644
--- a/src/presentation/components/team/RoleSelect.vue
+++ b/src/presentation/components/team/RoleSelect.vue
@@ -14,7 +14,6 @@ import { NoteId } from '@/domain/entities/Note.ts';
 import { computed, ref } from 'vue';
 import useNoteSettings from '@/application/services/useNoteSettings.ts';
 import { useAppState } from '@/application/services/useAppState';
-import { useI18n } from 'vue-i18n';
 import { ContextMenuItem, DefaultItem, Select } from 'codex-ui/vue';
 
 /**
@@ -51,10 +50,10 @@ const { changeRole } = useNoteSettings();
 
 const { user } = useAppState();
 
-const { t } = useI18n();
-
 /**
  * Updates the user role if it has been changed
+ *
+ * @param updatedRole - new role needed to set
  */
 async function updateMemberRole(updatedRole: DefaultItem | any) {
   changeRole(props.noteId, props.teamMember.user.id, MemberRole[updatedRole.title as keyof typeof MemberRole]);

From 9423b2807a10c1cf40f3eed276b73864ad031426 Mon Sep 17 00:00:00 2001
From: TheGeniusOfEternity <max06safin@yandex.ru>
Date: Fri, 10 Jan 2025 14:35:33 +0300
Subject: [PATCH 3/3] fix: Select behavior like native input

Some changes in Select behavior:
- Now selected Item is two-binded, so it can be accessed outside the component easier and native
- Added style properties: align to configure select's popover and isDisabled property to make component unaccessible in needed cases
- Update Select's page on Playground according to its new interactions
---
 codex-ui/dev/pages/components/Select.vue      | 75 ++++++++++++++++---
 codex-ui/src/vue/components/select/Select.vue | 26 +++----
 .../components/team/RoleSelect.vue            | 49 +++++++-----
 src/presentation/components/team/Team.vue     |  1 +
 4 files changed, 107 insertions(+), 44 deletions(-)

diff --git a/codex-ui/dev/pages/components/Select.vue b/codex-ui/dev/pages/components/Select.vue
index 8b573e34..b221cda1 100644
--- a/codex-ui/dev/pages/components/Select.vue
+++ b/codex-ui/dev/pages/components/Select.vue
@@ -5,27 +5,73 @@
       Component of the form that allows you to select one or more options from the list (currently one)
     </template>
   </PageHeader>
-  <Select
-    :items="options"
-    :default-item="defaultItem"
-    @value-update="(value) => updatedValue = value"
-  />
-  <Heading :level="3">
+  <div class="ex">
+    Default
+    <Select
+      v-model="currentItem"
+      :align="{vertically: 'below', horizontally: 'left'}"
+      :is-disabled="false"
+      :items="options"
+    />
+    Disabled
+    <Select
+      v-model="currentItem"
+      :align="{vertically: 'below', horizontally: 'left'}"
+      :is-disabled="true"
+      :items="options"
+    />
+  </div>
+  <Heading :level="2">
     Getting selected option
   </Heading>
-  You can use selected item outside the component via <code>@value-update</code>: <i>{{ updatedValue }}</i>
+  Selected option replaces default value and can be easily got from the same object:
+  <div class="ex">
+    <i>{{ currentItem }}</i>
+  </div>
+  <Heading
+    :level="2"
+  >
+    Aligning
+  </Heading>
+  You can choose vertical aligning from <code>below</code> and <code>above</code> and horizontal aligning from <code>left</code> and <code>right</code>
+  <div class="ex">
+    <Select
+      v-model="currentItem"
+      :align="{vertically: 'below', horizontally: 'left'}"
+      :is-disabled="false"
+      :items="options"
+    />
+    <Select
+      v-model="currentItem"
+      :align="{vertically: 'below', horizontally: 'right'}"
+      :is-disabled="false"
+      :items="options"
+    />
+    <Select
+      v-model="currentItem"
+      :align="{vertically: 'above', horizontally: 'left'}"
+      :is-disabled="false"
+      :items="options"
+    />
+    <Select
+      v-model="currentItem"
+      :align="{vertically: 'above', horizontally: 'right'}"
+      :is-disabled="false"
+      :items="options"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
 import PageHeader from '../../components/PageHeader.vue';
-import { ContextMenuItem, DefaultItem, Heading, Select } from '../../../src';
+import { ContextMenuItem, Heading, Select } from '../../../src';
 import { ref } from 'vue';
 
-const defaultItem: DefaultItem = {
+const currentItem = ref({
   title: 'Choose an option',
   onActivate: () => {},
-};
-const updatedValue = ref<DefaultItem>(defaultItem);
+});
+
 const options: ContextMenuItem[] = [
   {
     type: 'default',
@@ -57,4 +103,11 @@ const options: ContextMenuItem[] = [
 </script>
 
 <style scoped>
+.ex {
+  display: grid;
+  gap: var(--spacing-xl);
+  margin: var(--spacing-xl) 0 var(--spacing-xxl);
+  grid-template-columns: repeat(2, max-content);
+  align-items: center;
+}
 </style>
diff --git a/codex-ui/src/vue/components/select/Select.vue b/codex-ui/src/vue/components/select/Select.vue
index f8049a3c..2a4b2ccd 100644
--- a/codex-ui/src/vue/components/select/Select.vue
+++ b/codex-ui/src/vue/components/select/Select.vue
@@ -1,31 +1,33 @@
 <template>
   <Button
-    :icon="activeItem.icon"
+    :icon="currentItem.icon"
+    :disabled="isDisabled"
     trailing-icon="BracketsVertical"
     secondary
-    @click="togglePopover($event.currentTarget, {vertically: 'below', horizontally: 'left'})"
+    @click="togglePopover($event.currentTarget)"
   >
-    {{ activeItem.title }}
+    {{ currentItem.title }}
   </Button>
 </template>
 <script setup lang="ts">
 import type { ContextMenuItem as SelectItem, DefaultItem } from '../context-menu/ContextMenu.types';
 import { ContextMenu } from '../context-menu';
-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 import { usePopover, PopoverShowParams } from '../popover';
 import { Button } from '../button';
 
-const emit = defineEmits(['valueUpdate']);
 const props = defineProps<{
+  align: PopoverShowParams['align'];
+  isDisabled: boolean;
   items: SelectItem[];
-  defaultItem: DefaultItem;
 }>();
 
+const align = props.align;
 const items = props.items;
 const { showPopover, hide, isOpen } = usePopover();
 
-const togglePopover = (el: HTMLElement, align: PopoverShowParams['align']) => {
-  if (!isOpen.value) {
+const togglePopover = (el: HTMLElement) => {
+  if (!isOpen.value && !props.isDisabled) {
     showPopover({
       targetEl: el,
       with: {
@@ -42,15 +44,11 @@ const togglePopover = (el: HTMLElement, align: PopoverShowParams['align']) => {
 };
 
 /* Default item value for select on page load */
-const defaultValue: SelectItem = props.defaultItem;
-const activeItem = ref(defaultValue);
+const currentItem = defineModel<DefaultItem>({ required: true });
 
 /* Main function to update selected item */
-/* Also creates new event, which could be caught outside */
-
 const updateActiveItem = (item: DefaultItem) => {
-  activeItem.value = item;
-  emit('valueUpdate', activeItem.value);
+  currentItem.value = item;
   hide();
 };
 
diff --git a/src/presentation/components/team/RoleSelect.vue b/src/presentation/components/team/RoleSelect.vue
index 055cbb76..3d4d1e99 100644
--- a/src/presentation/components/team/RoleSelect.vue
+++ b/src/presentation/components/team/RoleSelect.vue
@@ -1,9 +1,10 @@
 <template>
-  <div v-if="teamMember.user.id != user?.id">
+  <div>
     <Select
+      v-model="selectedRole"
+      :align="{ vertically: 'below', horizontally: 'right' }"
+      :is-disabled="teamMember.user.id == user?.id || isCreator"
       :items="roleItems"
-      :default-item="defaultRole"
-      @value-update="(updatedRole) => updateMemberRole(updatedRole)"
     />
   </div>
 </template>
@@ -11,7 +12,7 @@
 <script setup lang="ts">
 import { MemberRole, TeamMember } from '@/domain/entities/Team.ts';
 import { NoteId } from '@/domain/entities/Note.ts';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import useNoteSettings from '@/application/services/useNoteSettings.ts';
 import { useAppState } from '@/application/services/useAppState';
 import { ContextMenuItem, DefaultItem, Select } from 'codex-ui/vue';
@@ -30,11 +31,13 @@ const props = defineProps<{
   noteId: NoteId;
 }>();
 
-const selectedRole = ref(MemberRole[props.teamMember.role]);
-const defaultRole: DefaultItem = {
-  title: selectedRole.value,
+/* property to disable select for changing creator's role */
+let isCreator = false;
+
+const selectedRole = ref<DefaultItem>({
+  title: MemberRole[props.teamMember.role],
   onActivate: () => {},
-};
+});
 
 const roleOptions = computed(() => Object.values(MemberRole).filter(value => typeof value === 'string'));
 const roleItems: ContextMenuItem[] = [];
@@ -47,26 +50,34 @@ roleOptions.value.forEach((role) => {
 });
 
 const { changeRole } = useNoteSettings();
-
 const { user } = useAppState();
 
+/* Watch role's update */
+watch(selectedRole, (newRole, oldRole) => {
+  if (newRole.title !== oldRole.title) {
+    updateMemberRole(newRole.title);
+  }
+});
+
 /**
  * Updates the user role if it has been changed
  *
  * @param updatedRole - new role needed to set
  */
-async function updateMemberRole(updatedRole: DefaultItem | any) {
-  changeRole(props.noteId, props.teamMember.user.id, MemberRole[updatedRole.title as keyof typeof MemberRole]);
+async function updateMemberRole(updatedRole: string | any) {
+  changeRole(props.noteId, props.teamMember.user.id, MemberRole[updatedRole as keyof typeof MemberRole]).catch(() => {
+    selectedRole.value = {
+      title: 'Write',
+      onActivate: () => {},
+    };
+    isCreator = true;
+  });
 }
+/* Check, is the user creator or not to disable select on true */
+onMounted(() => {
+  updateMemberRole(MemberRole[props.teamMember.role]);
+});
 </script>
 
 <style scoped>
-.member {
-  margin-top: var(--spacing-l);
-}
-.member-name {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-very-x);
-}
 </style>
diff --git a/src/presentation/components/team/Team.vue b/src/presentation/components/team/Team.vue
index 581f97f2..c4fc3f30 100644
--- a/src/presentation/components/team/Team.vue
+++ b/src/presentation/components/team/Team.vue
@@ -8,6 +8,7 @@
       :key="member.id"
       :title="member.user.name || member.user.email"
       :has-delimiter="memberIndex !== team.length - 1"
+      data-dimensions="medium"
     >
       <template #right>
         <RoleSelect