Skip to content

User Role #11

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

Open
CassandraBrucelo wants to merge 1 commit into
base: master
Choose a base branch
from
Open

User Role #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added src/assets/profile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 107 additions & 0 deletions src/components/userrole/AddModalRole.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<template>
<transition name="modal-animation">
<div v-show="modalActiveAddRole"
class="modal bg-black shadow-md p-7 z-20 flex justify-center items-center h-screen w-screen fixed top-0 left-0 bg-opacity-20">
<transition name="modal-animation-inner">
<div v-show="modalActiveAddRole"
class="modal-inner relative md:w-2/5 shadow-md bg-neutrals-1 p-9 rounded-lg">
<div @click="close" class="close-icon">
<i
class="fa-solid fa-xmark cursor-pointer text-neutrals-5 absolute right-5 hover:text-neutrals-7"></i>
</div>

<!-- Modal Content -->
<div class="modal-content flex flex-col justify-center align-middle gap-6">
<div class="headerz text-center text-brand-6">
<h1>Add New User</h1>
</div>
<div class="supplier-content flex justify-center">
<div class="grid grid-cols-2 gap-8">
<div class="supplier-name flex flex-col justify-center">
<span class="text-xs uppercase text-left mb-2">Name</span>
<input type="text" name="input" class="h-8 w-48" placeholder="Divina Lacu" value="">
</div>
<div class="supplier-email flex flex-col justify-center">
<span class="text-xs uppercase text-left mb-2">Branch</span>
<input type="text" name="input" class="h-8 w-48" placeholder="CAINTA/ANTIPOLO"
value="">
</div>
<div class="flex justify-center ml-56">
<div class="m-4">
<label class="inline-block mb-2 justify-center text-y-black">Profile</label>
<div class="flex items-center justify-center w-full">
<label
class="flex flex-col w-full h-32 border-4 border-blue-200 border-dashed hover:bg-gray-100 hover:border-gray-300">
<div class="flex flex-col items-center justify-center pt-7">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-8 h-8 text-gray-400 group-hover:text-gray-600"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<p
class="pt-1 text-sm tracking-wider text-gray-400 group-hover:text-gray-600">
Choose Photo</p>
</div>
<input type="file" class="opacity-0" />
</label>
</div>
<div class="flex justify-center p-2">
<button class="w-32 assumpta-gradient">Upload</button>
</div>
</div>
</div>
</div>
</div>
<div class="add-btns flex flex-row justify-center gap-2">
<a href="" class="assumpta-gradient">Add User</a>
<a href="" @click="close" class="assumpta-btn-secondary"><span
class="assumpta-btn-span">Cancel</span></a>
</div>
</div>
</div>
</transition>
</div>
</transition>
</template>

<script>
export default {
props: ['modalActiveAddRole'],
setup(props, {
emit
}) {
const close = () => {
emit("close");
};
return {
close
}
},
};
</script>

<style>
.modal-animation-enter-active,
.modal-animation-leave-active {
transition: opacity 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}
.modal-animation-enter-from,
.modal-animation-leave-to {
opacity: 0;
}
.modal-animation-inner-enter-active {
transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02) 0.15s;
}
.modal-animation-inner-leave-active {
transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}
.modal-animation-inner-enter-from {
opacity: 0;
transform: scale(0.8);
}
.modal-animation-inner-leave-to {
transform: scale(0.8);
}
</style>
102 changes: 102 additions & 0 deletions src/components/userrole/AdminModalRole.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<template>

<transition name="modal-animation">
<div v-show="modalActiveAdminConf"
class="modal bg-black shadow-md p-7 z-20 flex justify-center items-center h-screen w-screen fixed top-0 left-0 bg-opacity-20">
<transition name="modal-animation-inner">
<div v-show="modalActiveAdminConf"
class="modal-inner relative md:w-2/5 shadow-md bg-neutrals-1 p-9 h-fit rounded-lg">
<div @click="close" class="close-icon">
<i
class="fa-solid fa-xmark cursor-pointer text-neutrals-5 absolute right-5 hover:text-neutrals-7"></i>
</div>

<!-- Modal Content -->
<!-- <slot /> -->
<NotifModalRole @close="toggleModalAdminNotif" :modalActiveAdminNotif="modalActiveAdminNotif" />
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div
class="h-96 relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-5 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex justify-center mb-10 mt-10">
<div class="mt-3 sm:mt-0 sm:ml-4">
<h3 class="mt-10 text-center text-2xl font-medium leading-6 text-gray-900"
id="modal-title">Admin Confirmation</h3>
</div>
</div>
<div class="w-full">
<label for="input"
class="block w-full text-sm font-medium text-neutrals-9 mb-2"></label>
<input type="text" name="inputadminpass" class="pr-3 pl-10"
placeholder="Enter admin Password">
</div>
</div>
<div class="bg-white-50 px-4 py-3 justify-center sm:flex sm:px-6 mb-10 gap-5">
<div class="bar-right flex flex-row gap-2">
<div @click="toggleModalAdminNotif" class="add-roles">
<a href="javascript:void(0)" class="assumpta-gradient px-8">
CONFIRM
</a>
</div>
<button class="assumpta-btn-secondary">
<a href="/userroles">
<span class="w-32 assumpta-btn-span">
CANCEL
</span>
</a>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</transition>
</template>

<script>
import NotifModalRole from './NotifModalRole.vue';
import { ref } from 'vue'
export default {
props: ["modalActiveAdminConf"],
name: "AdminModalRole",
components: { NotifModalRole },
setup() {
const modalActiveAdminNotif = ref(false)
const toggleModalAdminNotif = () => {
modalActiveAdminNotif.value = !modalActiveAdminNotif.value;
}
return {
modalActiveAdminNotif,
toggleModalAdminNotif,
};
}
}
</script>

<style>
.modal-animation-enter-active,
.modal-animation-leave-active {
transition: opacity 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}
.modal-animation-enter-from,
.modal-animation-leave-to {
opacity: 0;
}
.modal-animation-inner-enter-active {
transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02) 0.15s;
}
.modal-animation-inner-leave-active {
transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}
.modal-animation-inner-enter-from {
opacity: 0;
transform: scale(0.8);
}
.modal-animation-inner-leave-to {
transform: scale(0.8);
}
</style>
116 changes: 116 additions & 0 deletions src/components/userrole/ChangeModalRole.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<template>
<transition name="modal-animation">
<div v-show="modalActiveChangeRole"
class="modal bg-black shadow-md p-7 z-20 flex justify-center items-center h-screen w-screen fixed top-0 left-0 bg-opacity-20">
<transition name="modal-animation-inner">
<div v-show="modalActiveChangeRole"
class="modal-inner relative md:w-2/5 shadow-md bg-neutrals-1 p-9 h-fit rounded-lg">
<div @click="close" class="close-icon">
<i class="fa-solid fa-xmark cursor-pointer text-neutrals-5 absolute right-5 hover:text-neutrals-7"></i>
</div>

<!-- Modal Content -->
<!-- <slot /> -->
<div class="fixed inset-0 z-10 overflow-y-auto">
<AdminModalRole @close="toggleModalAdminConf" :modalActiveAdminConf="modalActiveAdminConf" />
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div
class="h-96 relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-5 pt-5 sm:px-10 sm:pb-4">
<div class="sm:flex justify-center">
<h3 class="text-2xl font-medium leading-6 text-gray-900" id="modal-title">Change Roles</h3>
</div>
</div>

<div class="flex justify-center w-fulL mb-2 sm:flex sm:px-10">
<button @click="toggleModalAdminConf">
<a type="editinfo" class="assumpta-btn-secondary">
<span class="w-64 font-bold text-base assumpta-btn-span">
INVENTORY ADMIN
</span></a>
</button>
</div>
<div class="flex justify-center w-fulL mb-2 sm:flex sm:px-6">
<button @click="toggleModalAdminConf">
<a type="editinfo" class="assumpta-btn-secondary">
<span class="w-64 font-bold text-base assumpta-btn-span">
INVENTORY STAFF
</span></a>
</button>
</div>
<div class="flex justify-center w-fulL mb-2 sm:flex sm:px-6">
<button @click="toggleModalAdminConf">
<a type="editinfo" class="assumpta-btn-secondary">
<span class="w-64 font-bold text-base assumpta-btn-span">
NON-INVENTORY STUFF
</span></a>
</button>
</div>
<div class="flex justify-center mb-5 sm:flex sm:px-6">
<button @click="toggleModalAdminConf">
<a type="cantaccess" class="assumpta-gradient">
<span class="w-48 font-bold text-base text-white flex justify-center">
CAN'T ACCESS
</span></a>
</button>
</div>
<div class="flex justify-center w-full mb-5 sm:flex sm:px-6">
<a href="/userroles" type="cancel" class="assumpta-btn-secondary">
<span class="w-32 font-bold text-base assumpta-btn-span">
CANCEL
</span></a>
</div>
</div>
</div>
</div>
</div>


</transition>
</div>
</transition>
</template>

<script>
import AdminModalRole from './AdminModalRole.vue';
import { ref } from 'vue'
export default {
props: ["modalActiveChangeRole"],
name: "ChangeModalRole",
components: { AdminModalRole },
setup() {
const modalActiveAdminConf = ref(false)
const toggleModalAdminConf = () => {
modalActiveAdminConf.value = !modalActiveAdminConf.value;
}
return {
modalActiveAdminConf,
toggleModalAdminConf,
};
}
}
</script>

<style>
.modal-animation-enter-active,
.modal-animation-leave-active {
transition: opacity 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}
.modal-animation-enter-from,
.modal-animation-leave-to {
opacity: 0;
}
.modal-animation-inner-enter-active {
transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02) 0.15s;
}
.modal-animation-inner-leave-active {
transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}
.modal-animation-inner-enter-from {
opacity: 0.6;
transform: scale(0.8);
}
.modal-animation-inner-leave-to {
transform: scale(0.8);
}
</style>
Loading