punkfairie/library
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start medias page

Browse source
This commit is contained in:
Marley 2023-07-13 20:25:53 -07:00
parent e4870d28ca
commit 7b99ae5488
4 changed files with 158 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/.idea/codeStyles/Project.xml
View file

@ -1,5 +1,6 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<option name="LINE_SEPARATOR" value="&#10;" />
<option name="RIGHT_MARGIN" value="80" />
<JSCodeStyleSettings version="0">
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
@ -8,6 +9,13 @@
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
</JSCodeStyleSettings>
<TypeScriptCodeStyleSettings version="0">
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="USE_DOUBLE_QUOTES" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
</TypeScriptCodeStyleSettings>
<codeStyleSettings language="JavaScript">
<indentOptions>
<option name="INDENT_SIZE" value="2" />
@ -15,5 +23,12 @@
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="TypeScript">
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
</code_scheme>
</component>

2
frontend/app.vue
View file

@ -6,7 +6,7 @@
<nav>
<NuxtLink to="/patrons">Patrons</NuxtLink>
<NuxtLink to="/catalog">Catalog</NuxtLink>
<NuxtLink to="/medias">Catalog</NuxtLink>
<NuxtLink to="/account">Account</NuxtLink>
</nav>
</header>

110
frontend/data/medias.ts
View file

@ -1,20 +1,94 @@
const medias = {
books: [
{id: 1, title: 'The Small Backs of Children', author: 'Lidia Yuknavitch', copies: 1, checkedOut: 0, holds: []},
{id: 2, title: 'Beauty Queens', author: 'Libby Bray', copies: 2, checkedOut: 1, holds: []},
{id: 3, title: 'Pride and Prejudice', author: 'Jane Austen', copies: 5, checkedOut: 5, holds: [1]},
{id: 4, title: 'Audacious', author: 'Gabrielle Prendergast', copies: 1, checkedOut: 1, holds: [3, 7]}
],
movies: [
{id: 1, title: 'Itty Bitty Titty Committee', director: 'Yaela Howard', copies: 1, checkedOut: 0, holds: []},
{id: 2, title: 'Sing!', director: 'Tom Ford', copies: 2, checkedOut: 2, holds: [2]},
{id: 3, title: 'Barbie', director: 'Greta Greenwood', copies: 0, checkedOut: 0, holds: [6, 3, 9]},
],
music: [
{id: 1, title: 'Fearless', artist: 'Taylor Swift', copies: 2, checkedOut: 1, holds: []},
{id: 2, title: 'Gag Order', artist: 'Kesha', copies: 1, checkedOut: 1, holds: [5]},
{id: 3, title: 'Speak Now', artist: 'Taylor Swift', copies: 3, checkedOut: 1, holds: []}
]
}
const medias = [
{
id: 1,
type: 'book',
title: 'The Small Backs of Children',
name: 'Lidia Yuknavitch',
copies: 1,
checkedOut: 0,
holds: [],
},
{
id: 2,
type: 'book',
title: 'Beauty Queens',
name: 'Libby Bray',
copies: 2,
checkedOut: 1,
holds: [],
},
{
id: 3,
type: 'book',
title: 'Pride and Prejudice',
name: 'Jane Austen',
copies: 5,
checkedOut: 5,
holds: [1],
},
{
id: 4,
type: 'book',
title: 'Audacious',
name: 'Gabrielle Prendergast',
copies: 1,
checkedOut: 1,
holds: [3, 7],
},
{
id: 5,
type: 'film',
title: 'Itty Bitty Titty Committee',
name: 'Yaela Howard',
copies: 1,
checkedOut: 0,
holds: [],
},
{
id: 6,
type: 'film',
title: 'Sing!',
name: 'Tom Ford',
copies: 2,
checkedOut: 2,
holds: [2],
},
{
id: 7,
type: 'film',
title: 'Barbie',
name: 'Greta Greenwood',
copies: 0,
checkedOut: 0,
holds: [6, 3, 9],
},
{
id: 8,
type: 'album',
title: 'Fearless',
name: 'Taylor Swift',
copies: 2,
checkedOut: 1,
holds: [],
},
{
id: 9,
type: 'album',
title: 'Gag Order',
name: 'Kesha',
copies: 1,
checkedOut: 1,
holds: [5],
},
{
id: 10,
type: 'album',
title: 'Speak Now',
name: 'Taylor Swift',
copies: 3,
checkedOut: 1,
holds: [],
},
]
export default medias

50
frontend/pages/medias/index.vue Normal file
View file

@ -0,0 +1,50 @@
<script setup lang="ts">
import medias from '@data/medias'
const mediaList = computed(() => {
return medias.filter((m) => m.type === 'book')
})
</script>
<template>
<section>
<Table>
<TableThead>
<tr>
<TableTh>Title</TableTh>
<TableTh>Copies</TableTh>
<TableTh>Checked Out</TableTh>
<TableTh actions>
<PrimaryButton>Add New</PrimaryButton>
</TableTh>
</tr>
</TableThead>
<TableTbody>
<tr v-for="(media, index) in mediaList" :key="index">
<TableTd>
<div>{{ media.title }}</div>
<SecondaryInfo>{{ media.name }}</SecondaryInfo>
</TableTd>
<TableTd>{{ media.copies }}</TableTd>
<TableTd>
<div>{{ media.checkedOut }}</div>
<SecondaryInfo>{{ media.holds.length }} on hold</SecondaryInfo>
</TableTd>
<TableTd actions>
<NuxtLink :to="`/medias/${media.id}/checkout`">Check Out</NuxtLink>
<NuxtLink :to="`/medias/${media.id}`">View</NuxtLink>
<NuxtLink :to="`/medias/${media.id}/edit`">Edit</NuxtLink>
</TableTd>
</tr>
</TableTbody>
</Table>
</section>
</template>
<style scoped lang="postcss">
</style>