#9 - eslint
This commit is contained in:
Adrian Hopek
parent
160ce40f82
commit
108f3d9103
16
.eslintrc.js
Normal file
16
.eslintrc.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:vue/vue3-recommended',
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
semi: [2, 'always'],
|
||||||
|
quotes: ['error', 'single'],
|
||||||
|
indent: ['error', 4],
|
||||||
|
'vue/html-indent': ['error', 4],
|
||||||
|
'vue/multi-word-component-names': 'off',
|
||||||
|
}
|
||||||
|
};
|
||||||
33
.github/workflows/test-and-lint-js.yml
vendored
Normal file
33
.github/workflows/test-and-lint-js.yml
vendored
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
name: Test & lint JS stuff
|
||||||
|
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
branches: [ "main" ]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
test-and-lint-js:
|
||||||
|
runs-on: ubuntu-20.04
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
|
||||||
|
- name: Cache dependencies
|
||||||
|
uses: actions/cache@v2
|
||||||
|
with:
|
||||||
|
path: node_modules
|
||||||
|
key: ${{ runner.os }}-npm-dependencies-${{ hashFiles('package.lock') }}
|
||||||
|
restore-keys: ${{ runner.os }}-npm-dependencies
|
||||||
|
|
||||||
|
- name: Set up node
|
||||||
|
uses: actions/setup-node@v2
|
||||||
|
with:
|
||||||
|
node-version: 16
|
||||||
|
|
||||||
|
- name: Instal npm dependencies
|
||||||
|
run: npm install
|
||||||
|
|
||||||
|
- name: Run JS linter
|
||||||
|
uses: reviewdog/action-eslint@v1
|
||||||
|
with:
|
||||||
|
reporter: github-check
|
||||||
|
eslint_flags: 'resources/js/ --ext .js,.vue'
|
||||||
@ -1,4 +1,4 @@
|
|||||||
name: Build & Test
|
name: Test & lint PHP stuff
|
||||||
|
|
||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
@ -7,7 +7,7 @@ on:
|
|||||||
branches: [ "main" ]
|
branches: [ "main" ]
|
||||||
|
|
||||||
jobs:
|
jobs:
|
||||||
build:
|
test-and-lint-php:
|
||||||
runs-on: ubuntu-20.04
|
runs-on: ubuntu-20.04
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
@ -33,7 +33,7 @@ jobs:
|
|||||||
- name: Install Composer dependencies
|
- name: Install Composer dependencies
|
||||||
run: composer install --prefer-dist --no-interaction --no-suggest
|
run: composer install --prefer-dist --no-interaction --no-suggest
|
||||||
|
|
||||||
- name: Run linter
|
- name: Run PHP linter
|
||||||
run: composer ecs
|
run: composer ecs
|
||||||
|
|
||||||
- name: Execute tests
|
- name: Execute tests
|
||||||
1004
package-lock.json
generated
1004
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -7,7 +7,9 @@
|
|||||||
"watch-poll": "mix watch -- --watch-options-poll=1000",
|
"watch-poll": "mix watch -- --watch-options-poll=1000",
|
||||||
"hot": "mix watch --hot",
|
"hot": "mix watch --hot",
|
||||||
"prod": "npm run production",
|
"prod": "npm run production",
|
||||||
"production": "mix --production"
|
"production": "mix --production",
|
||||||
|
"lint": "./node_modules/.bin/eslint resources/js --ext .js,.vue",
|
||||||
|
"lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui/vue": "^1.4.2",
|
"@headlessui/vue": "^1.4.2",
|
||||||
@ -25,5 +27,9 @@
|
|||||||
"tailwindcss": "^3.0.12",
|
"tailwindcss": "^3.0.12",
|
||||||
"vue": "^3.2.26",
|
"vue": "^3.2.26",
|
||||||
"vue-loader": "^16.8.3"
|
"vue-loader": "^16.8.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"eslint": "^8.6.0",
|
||||||
|
"eslint-plugin-vue": "^8.2.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,42 +1,71 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="min-h-full">
|
<div class="min-h-full">
|
||||||
<Popover as="header" class="pb-24 bg-gradient-to-r from-sky-800 to-cyan-600" v-slot="{ open }">
|
<Popover
|
||||||
|
v-slot="{ open }"
|
||||||
|
as="header"
|
||||||
|
class="pb-24 bg-gradient-to-r from-sky-800 to-cyan-600"
|
||||||
|
>
|
||||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||||
<div class="relative flex flex-wrap items-center justify-center lg:justify-between">
|
<div class="relative flex flex-wrap items-center justify-center lg:justify-between">
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<div class="absolute left-0 py-5 flex-shrink-0 lg:static">
|
<div class="absolute left-0 py-5 flex-shrink-0 lg:static">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<span class="sr-only">Workflow</span>
|
<span class="sr-only">Workflow</span>
|
||||||
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-cyan-200.svg"
|
<img
|
||||||
alt="Workflow"/>
|
class="h-8 w-auto"
|
||||||
|
src="https://tailwindui.com/img/logos/workflow-mark-cyan-200.svg"
|
||||||
|
alt="Workflow"
|
||||||
|
>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Right section on desktop -->
|
<!-- Right section on desktop -->
|
||||||
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
|
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
|
||||||
<button type="button"
|
<button
|
||||||
class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white">
|
type="button"
|
||||||
|
class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||||
|
>
|
||||||
<span class="sr-only">View notifications</span>
|
<span class="sr-only">View notifications</span>
|
||||||
<BellIcon class="h-6 w-6" aria-hidden="true"/>
|
<BellIcon
|
||||||
|
class="h-6 w-6"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- Profile dropdown -->
|
<!-- Profile dropdown -->
|
||||||
<Menu as="div" class="ml-4 relative flex-shrink-0">
|
<Menu
|
||||||
|
as="div"
|
||||||
|
class="ml-4 relative flex-shrink-0"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<MenuButton
|
<MenuButton
|
||||||
class="bg-white rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100">
|
class="bg-white rounded-full flex text-sm ring-2 ring-white ring-opacity-20 focus:outline-none focus:ring-opacity-100"
|
||||||
|
>
|
||||||
<span class="sr-only">Open user menu</span>
|
<span class="sr-only">Open user menu</span>
|
||||||
<img class="h-8 w-8 rounded-full" :src="user.imageUrl" alt=""/>
|
<img
|
||||||
|
class="h-8 w-8 rounded-full"
|
||||||
|
:src="user.imageUrl"
|
||||||
|
alt=""
|
||||||
|
>
|
||||||
</MenuButton>
|
</MenuButton>
|
||||||
</div>
|
</div>
|
||||||
<transition leave-active-class="transition ease-in duration-75"
|
<transition
|
||||||
|
leave-active-class="transition ease-in duration-75"
|
||||||
leave-from-class="transform opacity-100 scale-100"
|
leave-from-class="transform opacity-100 scale-100"
|
||||||
leave-to-class="transform opacity-0 scale-95">
|
leave-to-class="transform opacity-0 scale-95"
|
||||||
|
>
|
||||||
<MenuItems
|
<MenuItems
|
||||||
class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
class="origin-top-right z-40 absolute -right-2 mt-2 w-48 rounded-md shadow-lg py-1 bg-white 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"
|
<MenuItem
|
||||||
:class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">
|
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 }}
|
{{ item.name }}
|
||||||
</a>
|
</a>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
@ -50,9 +79,13 @@
|
|||||||
<!-- Left nav -->
|
<!-- Left nav -->
|
||||||
<div class="hidden lg:block lg:col-span-2">
|
<div class="hidden lg:block lg:col-span-2">
|
||||||
<nav class="flex space-x-4">
|
<nav class="flex space-x-4">
|
||||||
<a v-for="item in navigation" :key="item.name" :href="item.href"
|
<a
|
||||||
|
v-for="item in navigation"
|
||||||
|
:key="item.name"
|
||||||
|
:href="item.href"
|
||||||
:class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
|
:class="[item.current ? 'text-white' : 'text-cyan-100', 'text-sm font-medium rounded-md bg-white bg-opacity-0 px-3 py-2 hover:bg-opacity-10']"
|
||||||
:aria-current="item.current ? 'page' : undefined">
|
:aria-current="item.current ? 'page' : undefined"
|
||||||
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
@ -60,15 +93,26 @@
|
|||||||
<div class="px-12 lg:px-0">
|
<div class="px-12 lg:px-0">
|
||||||
<!-- Search -->
|
<!-- Search -->
|
||||||
<div class="max-w-xs mx-auto w-full lg:max-w-md">
|
<div class="max-w-xs mx-auto w-full lg:max-w-md">
|
||||||
<label for="search" class="sr-only">Search</label>
|
<label
|
||||||
|
for="search"
|
||||||
|
class="sr-only"
|
||||||
|
>Search</label>
|
||||||
<div class="relative text-white focus-within:text-gray-600">
|
<div class="relative text-white focus-within:text-gray-600">
|
||||||
<div
|
<div
|
||||||
class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
|
class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center"
|
||||||
<SearchIcon class="h-5 w-5" aria-hidden="true"/>
|
>
|
||||||
|
<SearchIcon
|
||||||
|
class="h-5 w-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<input id="search"
|
<input
|
||||||
|
id="search"
|
||||||
class="block w-full text-white bg-white bg-opacity-20 py-2 pl-10 pr-3 border border-transparent rounded-md leading-5 focus:text-gray-900 placeholder-white focus:outline-none focus:bg-opacity-100 focus:border-transparent focus:placeholder-gray-500 focus:ring-0 sm:text-sm"
|
class="block w-full text-white bg-white bg-opacity-20 py-2 pl-10 pr-3 border border-transparent rounded-md leading-5 focus:text-gray-900 placeholder-white focus:outline-none focus:bg-opacity-100 focus:border-transparent focus:placeholder-gray-500 focus:ring-0 sm:text-sm"
|
||||||
placeholder="Search" type="search" name="search"/>
|
placeholder="Search"
|
||||||
|
type="search"
|
||||||
|
name="search"
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -79,48 +123,85 @@
|
|||||||
<div class="absolute right-0 flex-shrink-0 lg:hidden">
|
<div class="absolute right-0 flex-shrink-0 lg:hidden">
|
||||||
<!-- Mobile menu button -->
|
<!-- Mobile menu button -->
|
||||||
<PopoverButton
|
<PopoverButton
|
||||||
class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white">
|
class="bg-transparent p-2 rounded-md inline-flex items-center justify-center text-cyan-200 hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
|
||||||
|
>
|
||||||
<span class="sr-only">Open main menu</span>
|
<span class="sr-only">Open main menu</span>
|
||||||
<MenuIcon v-if="!open" class="block h-6 w-6" aria-hidden="true"/>
|
<MenuIcon
|
||||||
<XIcon v-else class="block h-6 w-6" aria-hidden="true"/>
|
v-if="!open"
|
||||||
|
class="block h-6 w-6"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<XIcon
|
||||||
|
v-else
|
||||||
|
class="block h-6 w-6"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
</PopoverButton>
|
</PopoverButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TransitionRoot as="template" :show="open">
|
<TransitionRoot
|
||||||
|
as="template"
|
||||||
|
:show="open"
|
||||||
|
>
|
||||||
<div class="lg:hidden">
|
<div class="lg:hidden">
|
||||||
<TransitionChild as="template" enter="duration-150 ease-out" enter-from="opacity-0"
|
<TransitionChild
|
||||||
enter-to="opacity-100" leave="duration-150 ease-in" leave-from="opacity-100"
|
as="template"
|
||||||
leave-to="opacity-0">
|
enter="duration-150 ease-out"
|
||||||
<PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25"/>
|
enter-from="opacity-0"
|
||||||
|
enter-to="opacity-100"
|
||||||
|
leave="duration-150 ease-in"
|
||||||
|
leave-from="opacity-100"
|
||||||
|
leave-to="opacity-0"
|
||||||
|
>
|
||||||
|
<PopoverOverlay class="z-20 fixed inset-0 bg-black bg-opacity-25" />
|
||||||
</TransitionChild>
|
</TransitionChild>
|
||||||
|
|
||||||
<TransitionChild as="template" enter="duration-150 ease-out" enter-from="opacity-0 scale-95"
|
<TransitionChild
|
||||||
enter-to="opacity-100 scale-100" leave="duration-150 ease-in"
|
as="template"
|
||||||
leave-from="opacity-100 scale-100" leave-to="opacity-0 scale-95">
|
enter="duration-150 ease-out"
|
||||||
<PopoverPanel focus
|
enter-from="opacity-0 scale-95"
|
||||||
class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top">
|
enter-to="opacity-100 scale-100"
|
||||||
|
leave="duration-150 ease-in"
|
||||||
|
leave-from="opacity-100 scale-100"
|
||||||
|
leave-to="opacity-0 scale-95"
|
||||||
|
>
|
||||||
|
<PopoverPanel
|
||||||
|
focus
|
||||||
|
class="z-30 absolute top-0 inset-x-0 max-w-3xl mx-auto w-full p-2 transition transform origin-top"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200">
|
class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y divide-gray-200"
|
||||||
|
>
|
||||||
<div class="pt-3 pb-2">
|
<div class="pt-3 pb-2">
|
||||||
<div class="flex items-center justify-between px-4">
|
<div class="flex items-center justify-between px-4">
|
||||||
<div>
|
<div>
|
||||||
<img class="h-8 w-auto"
|
<img
|
||||||
|
class="h-8 w-auto"
|
||||||
src="https://tailwindui.com/img/logos/workflow-mark-cyan-600.svg"
|
src="https://tailwindui.com/img/logos/workflow-mark-cyan-600.svg"
|
||||||
alt="Workflow"/>
|
alt="Workflow"
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="-mr-2">
|
<div class="-mr-2">
|
||||||
<PopoverButton
|
<PopoverButton
|
||||||
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500">
|
class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-500"
|
||||||
|
>
|
||||||
<span class="sr-only">Close menu</span>
|
<span class="sr-only">Close menu</span>
|
||||||
<XIcon class="h-6 w-6" aria-hidden="true"/>
|
<XIcon
|
||||||
|
class="h-6 w-6"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
</PopoverButton>
|
</PopoverButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 px-2 space-y-1">
|
<div class="mt-3 px-2 space-y-1">
|
||||||
<a v-for="item in navigation" :key="item.name" :href="item.href"
|
<a
|
||||||
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800">
|
v-for="item in navigation"
|
||||||
|
:key="item.name"
|
||||||
|
:href="item.href"
|
||||||
|
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
|
||||||
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -128,7 +209,11 @@
|
|||||||
<div class="pt-4 pb-2">
|
<div class="pt-4 pb-2">
|
||||||
<div class="flex items-center px-5">
|
<div class="flex items-center px-5">
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0">
|
||||||
<img class="h-10 w-10 rounded-full" :src="user.imageUrl" alt=""/>
|
<img
|
||||||
|
class="h-10 w-10 rounded-full"
|
||||||
|
:src="user.imageUrl"
|
||||||
|
alt=""
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3 min-w-0 flex-1">
|
<div class="ml-3 min-w-0 flex-1">
|
||||||
<div class="text-base font-medium text-gray-800 truncate">
|
<div class="text-base font-medium text-gray-800 truncate">
|
||||||
@ -138,15 +223,24 @@
|
|||||||
{{ user.email }}
|
{{ user.email }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button type="button"
|
<button
|
||||||
class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500">
|
type="button"
|
||||||
|
class="ml-auto flex-shrink-0 bg-white p-1 text-gray-400 rounded-full hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"
|
||||||
|
>
|
||||||
<span class="sr-only">View notifications</span>
|
<span class="sr-only">View notifications</span>
|
||||||
<BellIcon class="h-6 w-6" aria-hidden="true"/>
|
<BellIcon
|
||||||
|
class="h-6 w-6"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3 px-2 space-y-1">
|
<div class="mt-3 px-2 space-y-1">
|
||||||
<a v-for="item in userNavigation" :key="item.name" :href="item.href"
|
<a
|
||||||
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800">
|
v-for="item in userNavigation"
|
||||||
|
:key="item.name"
|
||||||
|
:href="item.href"
|
||||||
|
class="block rounded-md px-3 py-2 text-base text-gray-900 font-medium hover:bg-gray-100 hover:text-gray-800"
|
||||||
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -159,7 +253,9 @@
|
|||||||
</Popover>
|
</Popover>
|
||||||
<main class="-mt-24 pb-8">
|
<main class="-mt-24 pb-8">
|
||||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8">
|
||||||
<h1 class="sr-only">Profile</h1>
|
<h1 class="sr-only">
|
||||||
|
Profile
|
||||||
|
</h1>
|
||||||
<!-- Main 3 column grid -->
|
<!-- Main 3 column grid -->
|
||||||
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
<div class="grid grid-cols-1 gap-4 items-start lg:grid-cols-3 lg:gap-8">
|
||||||
<!-- Left column -->
|
<!-- Left column -->
|
||||||
@ -167,13 +263,21 @@
|
|||||||
<!-- Welcome panel -->
|
<!-- Welcome panel -->
|
||||||
<section aria-labelledby="profile-overview-title">
|
<section aria-labelledby="profile-overview-title">
|
||||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||||
<h2 class="sr-only" id="profile-overview-title">Profile Overview</h2>
|
<h2
|
||||||
|
id="profile-overview-title"
|
||||||
|
class="sr-only"
|
||||||
|
>
|
||||||
|
Profile Overview
|
||||||
|
</h2>
|
||||||
<div class="bg-white p-6">
|
<div class="bg-white p-6">
|
||||||
<div class="sm:flex sm:items-center sm:justify-between">
|
<div class="sm:flex sm:items-center sm:justify-between">
|
||||||
<div class="sm:flex sm:space-x-5">
|
<div class="sm:flex sm:space-x-5">
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0">
|
||||||
<img class="mx-auto h-20 w-20 rounded-full" :src="user.imageUrl"
|
<img
|
||||||
alt=""/>
|
class="mx-auto h-20 w-20 rounded-full"
|
||||||
|
:src="user.imageUrl"
|
||||||
|
alt=""
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
<div class="mt-4 text-center sm:mt-0 sm:pt-1 sm:text-left">
|
||||||
<p class="text-sm font-medium text-gray-600">
|
<p class="text-sm font-medium text-gray-600">
|
||||||
@ -188,17 +292,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-5 flex justify-center sm:mt-0">
|
<div class="mt-5 flex justify-center sm:mt-0">
|
||||||
<a href="#"
|
<a
|
||||||
class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
href="#"
|
||||||
|
class="flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||||
|
>
|
||||||
View profile
|
View profile
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="border-t border-gray-200 bg-gray-50 grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-y-0 sm:divide-x">
|
class="border-t border-gray-200 bg-gray-50 grid grid-cols-1 divide-y divide-gray-200 sm:grid-cols-3 sm:divide-y-0 sm:divide-x"
|
||||||
<div v-for="stat in stats" :key="stat.label"
|
>
|
||||||
class="px-6 py-5 text-sm font-medium text-center">
|
<div
|
||||||
|
v-for="stat in stats"
|
||||||
|
:key="stat.label"
|
||||||
|
class="px-6 py-5 text-sm font-medium text-center"
|
||||||
|
>
|
||||||
<span class="text-gray-900">{{ stat.value }}</span>
|
<span class="text-gray-900">{{ stat.value }}</span>
|
||||||
{{ ' ' }}
|
{{ ' ' }}
|
||||||
<span class="text-gray-600">{{ stat.label }}</span>
|
<span class="text-gray-600">{{ stat.label }}</span>
|
||||||
@ -210,21 +320,41 @@
|
|||||||
<!-- Actions panel -->
|
<!-- Actions panel -->
|
||||||
<section aria-labelledby="quick-links-title">
|
<section aria-labelledby="quick-links-title">
|
||||||
<div
|
<div
|
||||||
class="rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
|
class="rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px"
|
||||||
<h2 class="sr-only" id="quick-links-title">Quick links</h2>
|
>
|
||||||
<div v-for="(action, actionIdx) in actions" :key="action.name"
|
<h2
|
||||||
:class="[actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '', actionIdx === 1 ? 'sm:rounded-tr-lg' : '', actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '', actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '', 'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500']">
|
id="quick-links-title"
|
||||||
|
class="sr-only"
|
||||||
|
>
|
||||||
|
Quick links
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
v-for="(action, actionIdx) in actions"
|
||||||
|
:key="action.name"
|
||||||
|
:class="[actionIdx === 0 ? 'rounded-tl-lg rounded-tr-lg sm:rounded-tr-none' : '', actionIdx === 1 ? 'sm:rounded-tr-lg' : '', actionIdx === actions.length - 2 ? 'sm:rounded-bl-lg' : '', actionIdx === actions.length - 1 ? 'rounded-bl-lg rounded-br-lg sm:rounded-bl-none' : '', 'relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-cyan-500']"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<span
|
<span
|
||||||
:class="[action.iconBackground, action.iconForeground, 'rounded-lg inline-flex p-3 ring-4 ring-white']">
|
:class="[action.iconBackground, action.iconForeground, 'rounded-lg inline-flex p-3 ring-4 ring-white']"
|
||||||
<component :is="action.icon" class="h-6 w-6" aria-hidden="true"/>
|
>
|
||||||
|
<component
|
||||||
|
:is="action.icon"
|
||||||
|
class="h-6 w-6"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-8">
|
<div class="mt-8">
|
||||||
<h3 class="text-lg font-medium">
|
<h3 class="text-lg font-medium">
|
||||||
<a :href="action.href" class="focus:outline-none">
|
<a
|
||||||
|
:href="action.href"
|
||||||
|
class="focus:outline-none"
|
||||||
|
>
|
||||||
<!-- Extend touch target to entire panel -->
|
<!-- Extend touch target to entire panel -->
|
||||||
<span class="absolute inset-0" aria-hidden="true"/>
|
<span
|
||||||
|
class="absolute inset-0"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
{{ action.name }}
|
{{ action.name }}
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
@ -235,11 +365,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<span
|
<span
|
||||||
class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
|
class="pointer-events-none absolute top-6 right-6 text-gray-300 group-hover:text-gray-400"
|
||||||
aria-hidden="true">
|
aria-hidden="true"
|
||||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
|
>
|
||||||
viewBox="0 0 24 24">
|
<svg
|
||||||
<path
|
class="h-6 w-6"
|
||||||
d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z"/>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M20 4h1a1 1 0 00-1-1v1zm-1 12a1 1 0 102 0h-2zM8 3a1 1 0 000 2V3zM3.293 19.293a1 1 0 101.414 1.414l-1.414-1.414zM19 4v12h2V4h-2zm1-1H8v2h12V3zm-.707.293l-16 16 1.414 1.414 16-16-1.414-1.414z" />
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@ -253,19 +387,33 @@
|
|||||||
<section aria-labelledby="announcements-title">
|
<section aria-labelledby="announcements-title">
|
||||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h2 class="text-base font-medium text-gray-900" id="announcements-title">
|
<h2
|
||||||
|
id="announcements-title"
|
||||||
|
class="text-base font-medium text-gray-900"
|
||||||
|
>
|
||||||
Announcements
|
Announcements
|
||||||
</h2>
|
</h2>
|
||||||
<div class="flow-root mt-6">
|
<div class="flow-root mt-6">
|
||||||
<ul role="list" class="-my-5 divide-y divide-gray-200">
|
<ul
|
||||||
<li v-for="announcement in announcements" :key="announcement.id"
|
role="list"
|
||||||
class="py-5">
|
class="-my-5 divide-y divide-gray-200"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
v-for="announcement in announcements"
|
||||||
|
:key="announcement.id"
|
||||||
|
class="py-5"
|
||||||
|
>
|
||||||
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
<div class="relative focus-within:ring-2 focus-within:ring-cyan-500">
|
||||||
<h3 class="text-sm font-semibold text-gray-800">
|
<h3 class="text-sm font-semibold text-gray-800">
|
||||||
<a :href="announcement.href"
|
<a
|
||||||
class="hover:underline focus:outline-none">
|
:href="announcement.href"
|
||||||
|
class="hover:underline focus:outline-none"
|
||||||
|
>
|
||||||
<!-- Extend touch target to entire panel -->
|
<!-- Extend touch target to entire panel -->
|
||||||
<span class="absolute inset-0" aria-hidden="true"/>
|
<span
|
||||||
|
class="absolute inset-0"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
{{ announcement.title }}
|
{{ announcement.title }}
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</h3>
|
||||||
@ -277,8 +425,10 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a href="#"
|
<a
|
||||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
href="#"
|
||||||
|
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||||
|
>
|
||||||
View all
|
View all
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -290,16 +440,29 @@
|
|||||||
<section aria-labelledby="recent-hires-title">
|
<section aria-labelledby="recent-hires-title">
|
||||||
<div class="rounded-lg bg-white overflow-hidden shadow">
|
<div class="rounded-lg bg-white overflow-hidden shadow">
|
||||||
<div class="p-6">
|
<div class="p-6">
|
||||||
<h2 class="text-base font-medium text-gray-900" id="recent-hires-title">
|
<h2
|
||||||
|
id="recent-hires-title"
|
||||||
|
class="text-base font-medium text-gray-900"
|
||||||
|
>
|
||||||
Recent Hires
|
Recent Hires
|
||||||
</h2>
|
</h2>
|
||||||
<div class="flow-root mt-6">
|
<div class="flow-root mt-6">
|
||||||
<ul role="list" class="-my-5 divide-y divide-gray-200">
|
<ul
|
||||||
<li v-for="person in recentHires" :key="person.handle" class="py-4">
|
role="list"
|
||||||
|
class="-my-5 divide-y divide-gray-200"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
v-for="person in recentHires"
|
||||||
|
:key="person.handle"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
<div class="flex items-center space-x-4">
|
<div class="flex items-center space-x-4">
|
||||||
<div class="flex-shrink-0">
|
<div class="flex-shrink-0">
|
||||||
<img class="h-8 w-8 rounded-full" :src="person.imageUrl"
|
<img
|
||||||
alt=""/>
|
class="h-8 w-8 rounded-full"
|
||||||
|
:src="person.imageUrl"
|
||||||
|
alt=""
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 min-w-0">
|
<div class="flex-1 min-w-0">
|
||||||
<p class="text-sm font-medium text-gray-900 truncate">
|
<p class="text-sm font-medium text-gray-900 truncate">
|
||||||
@ -310,8 +473,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a :href="person.href"
|
<a
|
||||||
class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50">
|
:href="person.href"
|
||||||
|
class="inline-flex items-center shadow-sm px-2.5 py-0.5 border border-gray-300 text-sm leading-5 font-medium rounded-full text-gray-700 bg-white hover:bg-gray-50"
|
||||||
|
>
|
||||||
View
|
View
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -320,8 +485,10 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-6">
|
<div class="mt-6">
|
||||||
<a href="#"
|
<a
|
||||||
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
href="#"
|
||||||
|
class="w-full flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||||
|
>
|
||||||
View all
|
View all
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -334,8 +501,10 @@
|
|||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
|
||||||
<div class="border-t border-gray-200 py-8 text-sm text-gray-500 text-center sm:text-left"><span
|
<div class="border-t border-gray-200 py-8 text-sm text-gray-500 text-center sm:text-left">
|
||||||
class="block sm:inline">© 2021 Tailwind Labs Inc.</span> <span class="block sm:inline">All rights reserved.</span>
|
<span
|
||||||
|
class="block sm:inline"
|
||||||
|
>© 2021 Tailwind Labs Inc.</span> <span class="block sm:inline">All rights reserved.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@ -459,7 +628,7 @@ const recentHires = [
|
|||||||
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
|
||||||
href: '#',
|
href: '#',
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
const announcements = [
|
const announcements = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
@ -485,7 +654,7 @@ const announcements = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Dashboard",
|
name: 'Dashboard',
|
||||||
components: {
|
components: {
|
||||||
Menu,
|
Menu,
|
||||||
MenuButton,
|
MenuButton,
|
||||||
@ -511,7 +680,7 @@ export default {
|
|||||||
actions,
|
actions,
|
||||||
recentHires,
|
recentHires,
|
||||||
announcements,
|
announcements,
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -1,14 +1,14 @@
|
|||||||
import {createApp, h} from 'vue'
|
import {createApp, h} from 'vue';
|
||||||
import {createInertiaApp} from '@inertiajs/inertia-vue3'
|
import {createInertiaApp} from '@inertiajs/inertia-vue3';
|
||||||
import {InertiaProgress} from '@inertiajs/progress'
|
import {InertiaProgress} from '@inertiajs/progress';
|
||||||
|
|
||||||
createInertiaApp({
|
createInertiaApp({
|
||||||
resolve: name => require(`./Pages/${name}`),
|
resolve: name => require(`./Pages/${name}`),
|
||||||
setup({el, App, props, plugin}) {
|
setup({el, App, props, plugin}) {
|
||||||
createApp({render: () => h(App, props)})
|
createApp({render: () => h(App, props)})
|
||||||
.use(plugin)
|
.use(plugin)
|
||||||
.mount(el)
|
.mount(el);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
InertiaProgress.init()
|
InertiaProgress.init();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user