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

Create page and components for admin panel #326

Closed
wants to merge 1 commit into from
Closed

Create page and components for admin panel #326

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
28 changes: 28 additions & 0 deletions .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "client: chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "server: nuxt",
"outputCapture": "std",
"program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
"args": ["dev"]
}
],
"compounds": [
{
"name": "fullstack: nuxt",
"configurations": ["server: nuxt", "client: chrome"]
}
]
}
70 changes: 70 additions & 0 deletions components/AdminPanelDesktopSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<template>
<div class="lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
<div
class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4"
>
<nav class="mt-5 flex flex-1 flex-col">
<ul role="list" class="flex flex-1 flex-col gap-y-7">
<li
v-for="(item, index) in adminStore.panelItems"
:key="index"
>
<ul role="list" class="-mx-2 space-y-1">
<li>
<button
@click="
adminStore.setSelectedComponent(
item.component
)
"
:class="
adminStore.selectedComponent ==
item.component
? 'bg-indigo-700 text-white'
: 'text-indigo-200'
"
class="w-full group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
>
{{ item.displayText }}
</button>
</li>
</ul>
</li>

<li class="mt-auto">
<button
class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
>
<svg
class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
Settings
</button>
</li>
</ul>
</nav>
</div>
</div>
</template>

<script setup lang="ts">
import { useAdminPanelStore } from "../stores/adminPanelStore";

const adminStore = useAdminPanelStore();
</script>
3 changes: 3 additions & 0 deletions components/AdminPanelFacilities.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<div>Facilities</div>
</template>
3 changes: 3 additions & 0 deletions components/AdminPanelHealthcareProfessionals.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<div>Healthcare Professionals</div>
</template>
137 changes: 137 additions & 0 deletions components/AdminPanelSubmissions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<template>
<div class="mx-8">
<h1>Submissions</h1>
<div class="flex flex-row mt-8">
<section>
<h2>Original submission</h2>
<div>
<span>ID:</span>
<span> some ID</span>
</div>
<div>
<span>Created date:</span>
<span> some date</span>
</div>
<div>
<span>Google maps URL:</span>
<span> some URL</span>
</div>
<div>
<span>Healthcare professional name:</span>
<span> some name</span>
</div>
<div>
<span>Is Approved:</span>
<span> False</span>
</div>
<div>
<span>Is Rejected:</span>
<span> False</span>
</div>
<div>
<span>Is Under Review:</span>
<span> True</span>
</div>
<div>
<span>Notes:</span>
<span> some notes</span>
</div>
<div>
<span>Spoken languages:</span>
<span> some language 1 , some language 2</span>
</div>
<div>
<span>Updated date:</span>
<span> some date</span>
</div>
</section>
<div class="mx-8">
<section>
<h2>Facility Input</h2>
<div class="flex flex-col">
<div>
<span>ID:</span>
<span> some ID</span>
</div>
<label>facility name en</label>
<input type="text" />
<label>address line 1 en</label>
<input type="text" />
<label>address line 2 en</label>
<input type="text" />
<label>city en</label>
<input type="text" />
<label>prefecture en</label>
<input type="text" />
<label>facility name ja</label>
<input type="text" />
<label>address line 1 ja</label>
<input type="text" />
<label>address line 1 ja</label>
<input type="text" />
<label>city ja</label>
<input type="text" />
<label>prefecture ja</label>
<input type="text" />
<label>postal code</label>
<input type="text" />
<label>email address</label>
<input type="text" />
<label>phone number</label>
<input type="text" />
<label>google maps url</label>
<input type="text" />
<label>website url</label>
<input type="text" />
<label>map latitude</label>
<input type="text" />
<label>map longitude</label>
<input type="text" />
<label>healthcare professional Ids</label>
<input type="text" disabled />
<label>created date</label>
<input type="text" disabled />
<label>updated date</label>
<input type="text" disabled />
<button>Save Facility</button>
</div>
</section>
<section class="mt-8">
<h2>Healthcare Professional Input</h2>
<div>
<span>ID:</span>
<span> some ID</span>
</div>
<div class="flex flex-col">
<!-- change to select -->
<label>accepted insurance</label>
<input type="text" />
<label>degrees</label>
<input type="text" />
<label>created date</label>
<input type="text" disabled />
<label>facility ids</label>
<input type="text" />
<!-- add locale btn -->
<label>first name</label>
<input type="text" />
<label>last name</label>
<input type="text" />
<label>locale</label>
<input type="text" />
<label>specialties</label>
<input type="text" />
<!-- change to select -->
<label>spoken languages</label>
<input type="text" />
<label>created date</label>
<input type="text" disabled />
<label>updated date</label>
<input type="text" disabled />
<button>Save Healthcare Professional</button>
</div>
</section>
</div>
</div>
</div>
</template>
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"dependencies": {
"@apollo/client": "^3.8.8",
"@pinia/nuxt": "^0.5.1",
"@tailwindcss/forms": "^0.5.7",
"@vue/apollo-composable": "^4.0.0-beta.12",
"graphql": "^16.8.1",
"pinia": "^2.1.7",
Expand Down
22 changes: 22 additions & 0 deletions pages/adminpanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import AdminPanelDesktopSidebar from
'~/components/AdminPanelDesktopSidebar.vue';
<template>
<div>
<AdminPanelDesktopSidebar />
<AdminPanelSubmissions
v-show="adminStore.selectedComponent == 'submissions'"
/>
<AdminPanelFacilities
v-show="adminStore.selectedComponent == 'facilities'"
/>
<AdminPanelHealthcareProfessionals
v-show="adminStore.selectedComponent == 'healthcareProfessionals'"
/>
</div>
</template>

<script setup lang="ts">
import { useAdminPanelStore } from "../stores/adminPanelStore";

const adminStore = useAdminPanelStore();
</script>
30 changes: 30 additions & 0 deletions stores/adminPanelStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { defineStore } from "pinia"
import { Ref, ref, watch } from 'vue'

export const useAdminPanelStore = defineStore('adminPanelStore', () => {
let selectedComponent = ref('submissions')
const panelOpen = ref(false)
const panelItems = {
"submissions": { "displayText": "Submissions", "component": "submissions" },
"facilities": { "displayText": "Facilities", "component": "facilities" },
"healthcareProfessionals": { "displayText": "Healthcare Professionals", "component": "healthcareProfessionals" },
}


function setSelectedComponent(component: string) {
selectedComponent.value = component
}

function togglePanel() {
console.log("menu= ", panelOpen.value)
panelOpen.value = !panelOpen.value
}

return {
panelItems,
panelOpen,
selectedComponent,
setSelectedComponent,
togglePanel
}
})
2 changes: 1 addition & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,5 +46,5 @@ module.exports = {
zinc: colors.zinc
}
},
plugins: []
plugins: [require('@tailwindcss/forms')]
}
Loading