feat: listview component
This commit is contained in:
Shariq Ansari
parent
cce028d0a1
commit
0669f3d7a1
31
frontend/src/components/Icons/FilterIcon.vue
Normal file
31
frontend/src/components/Icons/FilterIcon.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M2 4.5H14"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M4 8.5H12"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M6.5 12.5H9.5"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
45
frontend/src/components/Icons/SortIcon.vue
Normal file
45
frontend/src/components/Icons/SortIcon.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<svg
|
||||
width="16"
|
||||
height="17"
|
||||
viewBox="0 0 16 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.75 3.75H10.75"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1.75 7.75H7.75"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M1.75 11.75H5.75"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.25 8.25L12.25 6.25L10.25 8.25"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12.25 12.25L12.25 6.25"
|
||||
stroke="currentColor"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
142
frontend/src/components/ListView.vue
Normal file
142
frontend/src/components/ListView.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div id="header" class="flex justify-between items-center px-5 py-4">
|
||||
<div class="left flex space-x-2">
|
||||
<h1 class="font-semibold text-xl">{{ title }}</h1>
|
||||
</div>
|
||||
<div class="right flex space-x-2">
|
||||
<Button variant="solid" label="Create">
|
||||
<template #prefix><FeatherIcon name="plus" class="h-4" /></template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="sub-header"
|
||||
class="flex justify-between items-center px-5 pb-3 border-b"
|
||||
>
|
||||
<div class="left flex space-x-2">
|
||||
<Dropdown :options="viewsDropdownOptions">
|
||||
<template #default="{ open }">
|
||||
<Button
|
||||
:label="currentView.label"
|
||||
:icon-right="open ? 'chevron-up' : 'chevron-down'"
|
||||
>
|
||||
<template #prefix
|
||||
><FeatherIcon :name="currentView.icon" class="h-4"
|
||||
/></template>
|
||||
</Button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="right flex space-x-2">
|
||||
<Button label="Sort">
|
||||
<template #prefix><SortIcon class="h-4" /></template>
|
||||
</Button>
|
||||
<Button label="Filter">
|
||||
<template #prefix><FilterIcon class="h-4" /></template>
|
||||
</Button>
|
||||
<Button icon="more-horizontal" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="content" class="">
|
||||
<div
|
||||
id="list-header"
|
||||
class="flex space-x-2 items-center px-5 py-2 border-b"
|
||||
>
|
||||
<Checkbox class="mr-2" />
|
||||
<div
|
||||
v-for="column in columns"
|
||||
:key="column"
|
||||
class="text-sm text-gray-600"
|
||||
:class="[column.size, column.align]"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="list-rows">
|
||||
<div
|
||||
v-for="row in rows"
|
||||
:key="row"
|
||||
class="flex space-x-2 items-center mx-2 px-3 py-2 border-b"
|
||||
>
|
||||
<Checkbox class="mr-2" />
|
||||
<div
|
||||
v-for="column in columns"
|
||||
:key="column.key"
|
||||
class="text-base text-gray-900"
|
||||
:class="[column.size, column.align]"
|
||||
>
|
||||
{{ row[column.key] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { FeatherIcon, Dropdown, Checkbox } from 'frappe-ui'
|
||||
import SortIcon from './Icons/SortIcon.vue'
|
||||
import FilterIcon from './Icons/FilterIcon.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
rows: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
})
|
||||
|
||||
const currentView = ref({
|
||||
label: 'List',
|
||||
icon: 'list',
|
||||
})
|
||||
|
||||
const viewsDropdownOptions = [
|
||||
{
|
||||
label: 'List',
|
||||
icon: 'list',
|
||||
onClick() {
|
||||
currentView.value = {
|
||||
label: 'List',
|
||||
icon: 'list',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Table',
|
||||
icon: 'grid',
|
||||
onClick() {
|
||||
currentView.value = {
|
||||
label: 'Table',
|
||||
icon: 'grid',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Calender',
|
||||
icon: 'calendar',
|
||||
onClick() {
|
||||
currentView.value = {
|
||||
label: 'Calender',
|
||||
icon: 'calendar',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Board',
|
||||
icon: 'columns',
|
||||
onClick() {
|
||||
currentView.value = {
|
||||
label: 'Board',
|
||||
icon: 'columns',
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
</script>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="px-6 py-4 font-semibold text-xl">
|
||||
<div class="px-5 py-4 font-semibold text-xl">
|
||||
<h1>{{ title }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="px-6 py-4 font-semibold text-xl">
|
||||
<h1>{{ title }}</h1>
|
||||
</div>
|
||||
<ListView :title="title"/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ListView from '../components/ListView.vue';
|
||||
|
||||
let title = 'Deals'
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="px-6 py-4 font-semibold text-xl">
|
||||
<h1>{{ title }}</h1>
|
||||
</div>
|
||||
<ListView :title="title"/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ListView from '../components/ListView.vue';
|
||||
|
||||
let title = 'Inbox'
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,54 @@
|
||||
<template>
|
||||
<div class="px-6 py-4 font-semibold text-xl">
|
||||
<h1>{{ title }}</h1>
|
||||
</div>
|
||||
<ListView :title="title" :columns="columns" :rows="rows" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let title = 'Leads'
|
||||
import ListView from '../components/ListView.vue'
|
||||
|
||||
const title = 'Leads'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
label: 'Title',
|
||||
key: 'title',
|
||||
size: 'flex-1',
|
||||
},
|
||||
{
|
||||
label: 'Company',
|
||||
key: 'company',
|
||||
size: 'w-44',
|
||||
},
|
||||
{
|
||||
label: 'Stage',
|
||||
key: 'stage',
|
||||
size: 'w-40',
|
||||
},
|
||||
{
|
||||
label: 'Contact',
|
||||
key: 'contact',
|
||||
size: 'w-44',
|
||||
},
|
||||
{
|
||||
label: 'Closed Date',
|
||||
key: 'closedDate',
|
||||
size: 'w-44',
|
||||
},
|
||||
{
|
||||
label: 'Value',
|
||||
key: 'value',
|
||||
size: 'w-40',
|
||||
align: 'text-right',
|
||||
},
|
||||
]
|
||||
|
||||
const rows = [
|
||||
{
|
||||
title: 'Summer Catalog',
|
||||
company: 'Stripe',
|
||||
stage: 'Qualified',
|
||||
contact: 'Angela Bower',
|
||||
closedDate: '27 Sept, 2023',
|
||||
value: 99000.0,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user