Skip to content

Commit

Permalink
feat(users): add update user role feature
Browse files Browse the repository at this point in the history
  • Loading branch information
NicolasRichel committed Jul 7, 2021
1 parent 9575896 commit daa25d1
Show file tree
Hide file tree
Showing 13 changed files with 231 additions and 57 deletions.
2 changes: 2 additions & 0 deletions src/components/global-components.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import BIMDataDropdownList from "@bimdata/design-system/dist/js/BIMDataComponent
import BIMDataDropdownMenu from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataDropdownMenu.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";
import BIMDataRadio from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataRadio.js";
import BIMDataSearch from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSearch.js";
import BIMDataSelect from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSelect.js";
import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
Expand All @@ -23,6 +24,7 @@ export default {
BIMDataDropdownMenu,
BIMDataIcon,
BIMDataInput,
BIMDataRadio,
BIMDataSearch,
BIMDataSelect,
BIMDataSpinner,
Expand Down
92 changes: 58 additions & 34 deletions src/components/specific/users/user-card/UserCard.vue
Original file line number Diff line number Diff line change
@@ -1,54 +1,71 @@
<template>
<div data-test="user-card" class="user-card" v-click-away="resetCard">
<transition name="fade" mode="out-in">
<div class="user-card__loader" v-if="loading">
<BIMDataSpinner />
</div>
<template v-if="loading">
<div class="user-card__loader">
<BIMDataSpinner />
</div>
</template>

<UserCardDeleteGuard
v-else-if="showDeleteGuard"
:user="user"
:space="space"
:project="project"
@close="closeDeleteGuard"
/>
<template v-else-if="showUpdateForm">
<UserCardUpdateForm
:user="user"
:space="space"
:project="project"
@close="closeUpdateForm"
/>
</template>

<div class="user-card__content" v-else>
<UserAvatar :user="user" size="42" color="tertiary" />
<div class="user-card__content__info">
<div class="user-card__content__info__name">
{{ fullName }}
{{ user.isSelf ? `(${$t("UserCard.self")})` : "" }}
<UserRoleBadge :role="role" />
</div>
<div class="user-card__content__info__email">
{{ user.email }}
<template v-else-if="showDeleteGuard">
<UserCardDeleteGuard
:user="user"
:space="space"
:project="project"
@close="closeDeleteGuard"
/>
</template>

<template v-else>
<div class="user-card__content">
<UserAvatar :user="user" size="42" color="tertiary" />
<div class="user-card__content__info">
<div class="user-card__content__info__name">
{{ fullName }}
{{ user.isSelf ? `(${$t("UserCard.self")})` : "" }}
<UserRoleBadge :role="role" />
</div>
<div class="user-card__content__info__email">
{{ user.email }}
</div>
</div>
<UserCardActionMenu
v-if="!user.isSelf"
@open-update="openUpdateForm"
@open-delete="openDeleteGuard"
/>
</div>
<UserCardActionMenu
v-if="!user.isSelf"
@open-update="() => {}"
@open-delete="openDeleteGuard"
/>
</div>
</template>
</transition>
</div>
</template>

<script>
import { computed, provide, ref } from "vue";
import { useToggle } from "@/composables/toggle";
// Components
import UserAvatar from "@/components/specific/users/user-avatar/UserAvatar";
import UserRoleBadge from "@/components/specific/users/user-role-badge/UserRoleBadge";
import UserCardActionMenu from "./user-card-action-menu/UserCardActionMenu";
import UserCardDeleteGuard from "./user-card-delete-guard/UserCardDeleteGuard";
import UserCardUpdateForm from "./user-card-update-form/UserCardUpdateForm";
export default {
components: {
UserAvatar,
UserRoleBadge,
UserCardActionMenu,
UserCardDeleteGuard
UserCardDeleteGuard,
UserCardUpdateForm
},
props: {
user: {
Expand All @@ -75,16 +92,20 @@ export default {
const loading = ref(false);
provide("loading", loading);
const showDeleteGuard = ref(false);
const openDeleteGuard = () => {
showDeleteGuard.value = true;
};
const closeDeleteGuard = () => {
showDeleteGuard.value = false;
};
const {
isOpen: showUpdateForm,
open: openUpdateForm,
close: closeUpdateForm
} = useToggle();
const {
isOpen: showDeleteGuard,
open: openDeleteGuard,
close: closeDeleteGuard
} = useToggle();
const resetCard = () => {
loading.value = false;
closeUpdateForm();
closeDeleteGuard();
};
Expand All @@ -94,9 +115,12 @@ export default {
loading,
role,
showDeleteGuard,
showUpdateForm,
// Methods
closeDeleteGuard,
closeUpdateForm,
openDeleteGuard,
openUpdateForm,
resetCard
};
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@

<transition name="fade">
<div class="user-card-action-menu__container" v-show="showMenu">
<!-- <BIMDataButton
<BIMDataButton
data-test="btn-open-update"
ghost
rounded
icon
@click="$emit('open-update')"
>
<BIMDataIcon name="edit" size="xxs" />
</BIMDataButton> -->
</BIMDataButton>
<BIMDataButton
data-test="btn-open-delete"
ghost
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
text-align: center;
}

&__close-btn {
&__btn-close {
margin-right: $spacing-unit/2;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@
</span>
<BIMDataButton
data-test="btn-submit-delete"
class="user-card-delete-guard__delete-btn"
class="user-card-delete-guard__btn-submit"
width="80px"
color="high"
fill
radius
@click="removeSpaceUser"
@click="submit"
>
{{ $t("UserCardDeleteGuard.deleteButtonText") }}
{{ $t("UserCardDeleteGuard.submitButtonText") }}
</BIMDataButton>
<BIMDataButton
data-test="btn-close-delete"
class="user-card-delete-guard__close-btn"
class="user-card-delete-guard__btn-close"
color="default"
ghost
rounded
Expand Down Expand Up @@ -59,14 +59,19 @@ export default {
const loading = inject("loading", false);
const removeSpaceUser = async () => {
loading.value = true;
if (props.project) {
await deleteProjectUser(props.project, props.user);
} else if (props.space) {
await deleteSpaceUser(props.space, props.user);
const submit = async () => {
try {
loading.value = true;
if (props.project) {
await deleteProjectUser(props.project, props.user);
} else if (props.space) {
await deleteSpaceUser(props.space, props.user);
}
} catch (error) {
console.log(error);
} finally {
loading.value = false;
}
loading.value = false;
close();
};
Expand All @@ -77,7 +82,7 @@ export default {
return {
// Methods
close,
removeSpaceUser
submit
};
}
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.user-card-update-form {
display: flex;
align-items: center;
gap: $spacing-unit/2;
width: 100%;
height: 100%;

&__input {
flex-grow: 1;
display: flex;
justify-content: center;
gap: $spacing-unit * 2;
}

&__btn-close {
margin-right: $spacing-unit/2;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<template>
<div class="user-card-update-form">
<span class="user-card-update-form__input">
<template v-if="project">
<BIMDataRadio name="role" text="Guest" :value="25" v-model="role" />
</template>
<BIMDataRadio name="role" text="User" :value="50" v-model="role" />
<BIMDataRadio name="role" text="Admin" :value="100" v-model="role" />
</span>
<BIMDataButton
data-test="btn-submit-update"
class="user-card-update-form__btn-submit"
width="80px"
color="primary"
fill
radius
@click="submit"
>
{{ $t("UserCardUpdateForm.submitButtonText") }}
</BIMDataButton>
<BIMDataButton
data-test="btn-close-update"
class="user-card-update-form__btn-close"
color="default"
ghost
rounded
icon
@click="close"
>
<BIMDataIcon name="close" size="xxs" />
</BIMDataButton>
</div>
</template>

<script>
import { inject, ref } from "vue";
import { useProjects } from "@/state/projects";
import { useSpaces } from "@/state/spaces";
export default {
props: {
user: {
type: Object,
required: true
},
space: {
type: Object,
default: null
},
project: {
type: Object,
default: null
}
},
emits: ["close"],
setup(props, { emit }) {
const { updateSpaceUser } = useSpaces();
const { updateProjectUser } = useProjects();
const loading = inject("loading", false);
const role = ref(
props.project ? props.user.projectRole : props.user.cloudRole
);
const submit = async () => {
try {
loading.value = true;
if (props.project) {
await updateProjectUser(props.project, {
...props.user,
projectRole: role.value,
role: role.value
});
} else if (props.space) {
await updateSpaceUser(props.space, {
...props.user,
cloudRole: role.value,
role: role.value
});
}
} catch (error) {
console.log(error);
} finally {
loading.value = false;
}
close();
};
const close = () => {
emit("close");
};
return {
// Reference
role,
// Methods
close,
submit
};
}
};
</script>

<style scoped lang="scss" src="./UserCardUpdateForm.scss"></style>
6 changes: 5 additions & 1 deletion src/i18n/lang/en.js
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,11 @@ export default {
space: "Remove {name} from this space ?",
project: "Remove {name} from this project ?"
},
deleteButtonText: "Remove"
submitButtonText: "Remove"
},

UserCardUpdateForm: {
submitButtonText: "Validate"
},

UserRoleBadge: {
Expand Down
6 changes: 5 additions & 1 deletion src/i18n/lang/fr.js
Original file line number Diff line number Diff line change
Expand Up @@ -429,7 +429,11 @@ export default {
space: "Supprimer {name} de cet espace ?",
project: "Supprimer {name} de ce projet ?"
},
deleteButtonText: "Supprimer"
submitButtonText: "Supprimer"
},

UserCardUpdateForm: {
submitButtonText: "Valider"
},

UserRoleBadge: {
Expand Down
Loading

0 comments on commit daa25d1

Please sign in to comment.