btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: implementation of users module of the admin dashboard (#29)

Browse Source 
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Joel Jacob Stephen
2023-03-03 19:26:34 +05:30
committed by GitHub
parent 223150550f
commit 90569192b7
26 changed files with 797 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/hoppscotch-sh-admin/src/components/app/Header.vue
View File

@@ -5,12 +5,12 @@
<div class="flex items-center">
<button
@click="isOpen = true"
class="text-gray-200 focus:outline-none lg:hidden mr-2"
class="text-gray-200 focus:outline-none md:hidden mr-2"
>
<icon-lucide-menu class="text-gray-300 w-6" />
</button>
<div class="mr-3 mt-2">
<div class="mr-3 mt-2 xs:hidden md:block">
<button @click="expandSidebar">
<icon-lucide-sidebar-open
v-if="isExpanded"

6
packages/hoppscotch-sh-admin/src/components/app/Modal.vue
View File

@@ -41,7 +41,7 @@
<div class="px-6 py-4 text-left modal-content">
<!--Title-->
<div class="flex items-center justify-between pb-3">
<p class="text-2xl ml-3 font-bold">{{ title }}</p>
<p class="text-2xl ml-3 font-bold text-gray-300">{{ title }}</p>
<div class="z-50 cursor-pointer modal-close" @click="open = false">
<svg
class="text-white fill-current"
@@ -79,6 +79,10 @@ defineProps({
button: {
type: String,
},
requireButton: {
type: Boolean,
default: true,
},
});
</script>

13
packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
View File

@@ -9,8 +9,8 @@
<!-- End Backdrop -->
<div
:class="isOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'"
class="flex fixed inset-y-0 left-0 z-30 overflow-y-auto transition duration-300 transform bg-neutral-200 dark:bg-neutral-900 lg:translate-x-0 lg:static lg:inset-0 border-r border-gray-300 dark:border-gray-600"
:class="isOpen ? '' : '!-translate-x-full ease-in'"
class="sidebar-container transform !md:translate-x-0 ease-out"
>
<div :class="isExpanded ? 'w-64' : 'w-full'">
<div class="flex items-center justify-start mt-6 ml-6">
@@ -98,3 +98,12 @@ const activeClass =
const inactiveClass =
'border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100';
</script>
<style scoped>
.sidebar-container {
@apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30;
@apply transition duration-300;
@apply flex overflow-y-auto bg-neutral-200 dark:bg-neutral-900 border-r border-gray-300 dark:border-gray-600;
}
</style>

28
packages/hoppscotch-sh-admin/src/components/app/Toast.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div
:class="`fixed bottom-0 right-0 mb-4 mr-4 bg-zinc-500 text-gray-800 px-6 py-3 rounded-md z-50 transition-opacity duration-300 ${
state.isVisible ? 'opacity-100' : 'opacity-0'
}`"
@click="close"
>
{{ message }}
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
defineProps({
message: {
type: String,
required: true,
},
});
const state = reactive({
isVisible: true,
});
const close = () => {
state.isVisible = false;
};
</script>

108
packages/hoppscotch-sh-admin/src/components/users/Details.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<div>
<div>
<div class="px-6 rounded-md">
<div class="grid gap-6 mt-4">
<div v-if="user.photoURL" class="h-10">
<img :src="user?.photoURL" alt="" />
</div>
<div>
<label class="text-gray-800 dark:text-gray-200" for="username"
>UID</label
>
<div
v-if="user.uid"
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.uid }}
</div>
</div>
<div v-if="user.displayName">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Name</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.displayName }}
</div>
</div>
<div v-if="user.email">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Email</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.email }}
</div>
</div>
<div v-if="user.createdOn">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Created On</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ getCreatedDateAndTime(user?.createdOn) }}
</div>
</div>
</div>
<div class="flex justify-center sm:justify-start mt-8">
<button
class="mr-3 px-4 py-2 text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
>
Go Back
</button>
<button
@click="deleteUser"
class="px-4 py-2 text-gray-200 bg-red-800 rounded-md hover:bg-red-600 focus:outline-none focus:bg-red-800"
>
Delete User
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps, onMounted, ref } from 'vue';
import { format } from 'date-fns';
import { useQuery } from '@urql/vue';
import { UserInfoDocument } from '../../helpers/backend/graphql';
import { routeLocationKey, useRoute } from 'vue-router';
const route = useRoute();
const { fetching, error, data } = useQuery({ query: UserInfoDocument });
// Get Proper Date Formats
const getCreatedDateAndTime = (date: string) =>
format(new Date(date), 'd-MM-yyyy hh:mm a');
const props = defineProps({
user: {
type: Object,
required: true,
},
});
onMounted(() => {
console.log('mounted');
console.log(props.user.uid);
});
const deleteUser = () => {
console.log('delete user');
};
</script>
<style>
.modal {
transition: opacity 0.25s ease;
}
</style>