Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: select component integration #285

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: select component integration #285

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
af2745c
feat: select component integration
DeadCreator Jan 6, 2025
f66af35
fix: old lines clean & function's info update
DeadCreator Jan 6, 2025
9423b28
fix: Select behavior like native input
DeadCreator Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion codex-ui/dev/pages/components/Select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
10 changes: 6 additions & 4 deletions codex-ui/src/vue/components/popover/Popover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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>
4 changes: 4 additions & 0 deletions codex-ui/src/vue/components/select/Select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets use v-model instead. To make Select work like native input
https://vuejs.org/guide/components/v-model

<Select
  :items="roleItems"
  :default-item="defaultRole"
  v-model="currentRole"
/>

hide();
};

Expand Down
39 changes: 22 additions & 17 deletions src/presentation/components/team/RoleSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

Expand All @@ -21,7 +14,7 @@ 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';

/**
* TeamMember props
Expand All @@ -38,20 +31,32 @@ 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();

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() {
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>

Expand Down
Loading