accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-02-13 17:39:09 +00:00
Code Issues Releases Activity

Added empty states for empty lists

Browse Source
This commit is contained in:
Piyush Singhania 2021-10-27 09:21:03 +05:30
parent 17bf07a3ae
commit d185345bd1
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/img/list-empty-state.svg Normal file
View File

@ -0,0 +1,10 @@
<svg viewBox="0 0 78 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="13" y="12" width="64" height="72" rx="7" stroke="#A6B1B9" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2H58C61.3137 2 64 4.68629 64 8V9H66V8C66 3.58172 62.4183 0 58 0H8C3.58172 0 0 3.58172 0 8V66C0 70.4183 3.58172 74 8 74H10V72H8C4.68629 72 2 69.3137 2 66V8C2 4.68629 4.68629 2 8 2Z" fill="#A6B1B9"/>
<path d="M42 31H66" stroke="#A6B1B9" stroke-width="2" stroke-linecap="round"/>
<path d="M42 51H66" stroke="#A6B1B9" stroke-width="2" stroke-linecap="round"/>
<path d="M42 25H55" stroke="#A6B1B9" stroke-width="2" stroke-linecap="round"/>
<path d="M42 45H55" stroke="#A6B1B9" stroke-width="2" stroke-linecap="round"/>
<rect x="24" y="23" width="10" height="10" rx="2" stroke="#2D95F0" stroke-width="2"/>
<rect x="24" y="43" width="10" height="10" rx="2" stroke="#2D95F0" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 912 B

13
src/pages/ListView/List.vue
View File

@ -19,7 +19,7 @@
</div>
</Row>
</div>
<div class="overflow-y-auto">
<div class="overflow-y-auto" v-if="data.length !== 0">
<div
class="px-3 flex hover:bg-gray-100 rounded-md"
v-for="doc in data"
@ -46,6 +46,13 @@
</Row>
</div>
</div>
<div v-else class="flex flex-col items-center justify-center my-auto">
<img src="@/assets/img/list-empty-state.svg" alt="" class="w-24" />
<p class="my-3 text-gray-800">No records found</p>
<Button type="primary" class="text-white" @click="$emit('makeNewDoc')">
Create a new {{ meta.label || meta.name }}
</Button>
</div>
</div>
</template>
<script>
@ -54,6 +61,7 @@ import Row from '@/components/Row';
import ListCell from './ListCell';
import Avatar from '@/components/Avatar';
import { openQuickEdit } from '@/utils';
import Button from '@/components/Button';
export default {
name: 'List',
@ -61,7 +69,8 @@ export default {
components: {
Row,
ListCell,
Avatar
Avatar,
Button
},
watch: {
listConfig(oldValue, newValue) {

1
src/pages/ListView/ListView.vue
View File

@ -20,6 +20,7 @@
:listConfig="listConfig"
:filters="filters"
class="flex-1"
@makeNewDoc="makeNewDoc"
/>
</div>
</div>