Skip to content

Commit

Permalink
Merge pull request #19 from AnimalFoodBank:feature/20231104-vue-router
Browse files Browse the repository at this point in the history 
Update UI with Vue Router support
  • Loading branch information
@delano
delano authored Nov 4, 2023
2 parents 37042e4 + 387ce1c commit eed62bf
Show file tree
Hide file tree
Showing 51 changed files with 293 additions and 120 deletions.
51 changes: 42 additions & 9 deletions apps/ui/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,64 @@
# ui2
# AFB UI

## Commands
https://vitejs.dev/guide/cli.html

- **template of:** vite + vue + typescript
- **tailwindcss:** v3.x

## Started
### Started

```bash
yarn
# or `npm install`
```

---
## Develop
### Develop

```bash
yarn dev
# or `npm run dev`
```

---
## Build
### Build

```bash
yarn build
# or `npm run build`
```

---
<p align="center">
<img src="./powered-by-vitawind-bright.png">
</p>


## About Vue apps

In a Vite + Vue application, main.ts and index.ts have different roles:

main.ts: This is the entry point of your Vue application. It's where you create the Vue instance and mount it to a DOM element. It's also where you import your root component, any global styles, plugins, and other global configurations.

index.ts: This file is typically used for organizing exports from a directory. In the context of Vue Router, index.ts is often used to define and export the router instance, as shown in your code snippet.

Here's a simplified example of how these files might be used:

```ts
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router
```

In the main.ts file, we import the router from router/index.ts and use it in our Vue application.
4 changes: 2 additions & 2 deletions apps/ui/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>AFB - Animal Food Bank</title>
</head>
<body>
<div id="app"></div>
Expand Down
11 changes: 8 additions & 3 deletions apps/ui/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
{
"name": "ui",
"name": "afb-ui",
"version": "0.1.0",
"scripts": {
"build": "vue-tsc --noEmit && vite build",
"dev": "vite",
"TODO": "postcss e.g. postcss styles.css -o src/styles.css",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@headlessui/vue": "^1.7.16",
"@heroicons/vue": "^2.0.18",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.6",
"vue": "^3.2.25"
"@types/vue-router": "^2.0.0",
"vue": "^3.3.7",
"vue-router": "^4.2.5",
"vue-service": "^1.0.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "^5.0.8",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"postcss-import": "^15.1.0",
Expand Down
Binary file removed apps/ui/powered-by-vitawind-bright.png
View file
Binary file not shown.
115 changes: 83 additions & 32 deletions apps/ui/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,35 @@
-->
<template>
<!--
This example requires updating your template:
This example requires updating your template:

```
<html class="h-full bg-gray-100">
<body class="h-full">
```
-->
```
<html class="h-full bg-gray-100">
<body class="h-full">
```
-->
<div class="min-h-full">
<div class="bg-indigo-600 pb-32">
<Disclosure as="nav" class="border-b border-indigo-300 border-opacity-25 bg-indigo-600 lg:border-none" v-slot="{ open }">
<Disclosure as="nav" class="border-b border-indigo-300 border-opacity-25 bg-indigo-600 lg:border-none"
v-slot="{ open }">
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
<div class="relative flex h-16 items-center justify-between lg:border-b lg:border-indigo-400 lg:border-opacity-25">
<div
class="relative flex h-16 items-center justify-between lg:border-b lg:border-indigo-400 lg:border-opacity-25">
<div class="flex items-center px-2 lg:px-0">
<div class="flex-shrink-0">
<img class="block h-8 w-8" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=300" alt="Your Company" />
<!--
Renders the company logo as an image.
The @ symbol in the src attribute is used to indicate that the path is relative to the project's src directory.
-->
<a href="/"><img class="block h-8 w-8" src="@/assets/img/afb_icon_colour.png" alt="Animal Food Bank logo" /></a>
</div>
<div class="hidden lg:ml-10 lg:block">
<div class="flex space-x-4">
<a v-for="item in navigation" :key="item.name" :href="item.href" :class="[item.current ? 'bg-indigo-700 text-white' : 'text-white hover:bg-indigo-500 hover:bg-opacity-75', 'rounded-md py-2 px-3 text-sm font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</a>
<div class="flex space-x-4 ">

<router-link v-for="item in navigation"
:key="item.name" :to="item.href" >{{ item.name }}
</router-link>

</div>
</div>
</div>
Expand All @@ -43,13 +53,16 @@
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<MagnifyingGlassIcon class="h-5 w-5" aria-hidden="true" />
</div>
<input id="search" class="block w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-3 text-gray-900 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600 sm:text-sm sm:leading-6" placeholder="Search" type="search" name="search" />
<input id="search"
class="block w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-3 text-gray-900 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600 sm:text-sm sm:leading-6"
placeholder="Search" type="search" name="search" />
</div>
</div>
</div>
<div class="flex lg:hidden">
<!-- Mobile menu button -->
<DisclosureButton class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
<DisclosureButton
class="relative inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-200 hover:bg-indigo-500 hover:bg-opacity-75 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
<span class="absolute -inset-0.5" />
<span class="sr-only">Open main menu</span>
<Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
Expand All @@ -58,7 +71,8 @@
</div>
<div class="hidden lg:ml-4 lg:block">
<div class="flex items-center">
<button type="button" class="relative flex-shrink-0 rounded-full bg-indigo-600 p-1 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
<button type="button"
class="relative flex-shrink-0 rounded-full bg-indigo-600 p-1 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
<span class="absolute -inset-1.5" />
<span class="sr-only">View notifications</span>
<BellIcon class="h-6 w-6" aria-hidden="true" />
Expand All @@ -67,16 +81,25 @@
<!-- Profile dropdown -->
<Menu as="div" class="relative ml-3 flex-shrink-0">
<div>
<MenuButton class="relative flex rounded-full bg-indigo-600 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
<MenuButton
class="relative flex rounded-full bg-indigo-600 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
<span class="absolute -inset-1.5" />
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" :src="user.imageUrl" alt="" />
</MenuButton>
</div>
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<MenuItems class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<transition enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95">
<MenuItems
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }">
<a :href="item.href" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">{{ item.name }}</a>
<a :href="item.href"
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">{{ item.name
}}</a>
</MenuItem>
</MenuItems>
</transition>
Expand All @@ -88,7 +111,9 @@

<DisclosurePanel class="lg:hidden">
<div class="space-y-1 px-2 pb-3 pt-2">
<DisclosureButton v-for="item in navigation" :key="item.name" as="a" :href="item.href" :class="[item.current ? 'bg-indigo-700 text-white' : 'text-white hover:bg-indigo-500 hover:bg-opacity-75', 'block rounded-md py-2 px-3 text-base font-medium']" :aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton>
<DisclosureButton v-for="item in navigation" :key="item.name" as="a" :href="item.href"
:class="[item.current ? 'bg-indigo-700 text-white' : 'text-white hover:bg-indigo-500 hover:bg-opacity-75', 'block rounded-md py-2 px-3 text-base font-medium']"
:aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton>
</div>
<div class="border-t border-indigo-700 pb-3 pt-4">
<div class="flex items-center px-5">
Expand All @@ -99,14 +124,17 @@
<div class="text-base font-medium text-white">{{ user.name }}</div>
<div class="text-sm font-medium text-indigo-300">{{ user.email }}</div>
</div>
<button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-indigo-600 p-1 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
<button type="button"
class="relative ml-auto flex-shrink-0 rounded-full bg-indigo-600 p-1 text-indigo-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">
<span class="absolute -inset-1.5" />
<span class="sr-only">View notifications</span>
<BellIcon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div class="mt-3 space-y-1 px-2">
<DisclosureButton v-for="item in userNavigation" :key="item.name" as="a" :href="item.href" class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75">{{ item.name }}</DisclosureButton>
<DisclosureButton v-for="item in userNavigation" :key="item.name" as="a" :href="item.href"
class="block rounded-md px-3 py-2 text-base font-medium text-white hover:bg-indigo-500 hover:bg-opacity-75">
{{ item.name }}</DisclosureButton>
</div>
</div>
</DisclosurePanel>
Expand All @@ -121,20 +149,19 @@
<main class="-mt-32">
<div class="mx-auto max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
<div class="rounded-lg bg-white px-5 py-6 shadow sm:px-6">
<!-- Your content -->hi

pl
<router-view />

</div>
</div>
</main>
</div>
</template>

<script setup>
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
<script setup lang="ts">
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline';

const user = {
name: 'Tom Cook',
Expand All @@ -143,15 +170,39 @@ const user = {
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
}
const navigation = [
{ name: 'Dashboard', href: '#', current: true },
{ name: 'Team', href: '#', current: false },
{ name: 'Projects', href: '#', current: false },
{ name: 'Calendar', href: '#', current: false },
{ name: 'Reports', href: '#', current: false },
{ name: 'Dashboard', href: '/dashboard', current: true },
{ name: 'About', href: '/about', current: false },
{ name: 'Requests', href: '/request', current: false },
]

const userNavigation = [
{ name: 'Your Profile', href: '#' },
{ name: 'Settings', href: '#' },
{ name: 'Sign out', href: '#' },
]
</script>



<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

nav {
padding: 30px;
}

nav a {
font-weight: bold;
color: #2c3e50;
}

nav a.router-link-exact-active {
color: #42b983;
}
</style>
Binary file added apps/ui/src/assets/img/afb_icon_black.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/afb_icon_colour.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/afb_icon_white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/afb_logo_horizontal_black.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/afb_logo_horizontal_colour.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/afb_logo_horizontal_white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/afb_logo_vertical_black.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/afb_logo_vertical_colour.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/afb_logo_vertical_white.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/android-icon-144x144.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/android-icon-192x192.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/android-icon-36x36.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/android-icon-48x48.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/android-icon-72x72.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/android-icon-96x96.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-114x114.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-120x120.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-144x144.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-152x152.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-180x180.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-57x57.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-60x60.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-72x72.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-76x76.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/ui/src/assets/img/favicons/apple-icon-precomposed.png
View file
Binary file added apps/ui/src/assets/img/favicons/apple-icon.png
View file
2 changes: 2 additions & 0 deletions apps/ui/src/assets/img/favicons/browserconfig.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
Binary file added apps/ui/src/assets/img/favicons/favicon-16x16.png
View file
Binary file added apps/ui/src/assets/img/favicons/favicon-32x32.png
View file
Binary file added apps/ui/src/assets/img/favicons/favicon-96x96.png
View file
Binary file added apps/ui/src/assets/img/favicons/favicon.ico
View file
Binary file not shown.
41 changes: 41 additions & 0 deletions apps/ui/src/assets/img/favicons/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{
"name": "App",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
Binary file added apps/ui/src/assets/img/favicons/ms-icon-144x144.png
View file
Binary file added apps/ui/src/assets/img/favicons/ms-icon-150x150.png
View file
Binary file added apps/ui/src/assets/img/favicons/ms-icon-310x310.png
View file
Binary file added apps/ui/src/assets/img/favicons/ms-icon-70x70.png
View file
Binary file removed apps/ui/src/assets/logo.png
View file
Diff not rendered.
Binary file removed apps/ui/src/assets/powered-by-vitawind-bright.png
View file
Diff not rendered.
Loading

0 comments on commit eed62bf

Please sign in to comment.