LF2/Alisa
6
0
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

web: refactor listview

Browse source 
Co-authored-by: wollenberg.niklas@gmail.com <wollenberg.niklas@gmail.com>
This commit is contained in:
Mika 2024-07-09 16:35:30 +02:00
parent 431a510a5d
commit 6cb16d4fa3
10 changed files with 403 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

5
web/src/App.vue
View file

@ -10,6 +10,7 @@
<li>
<CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
<CategoryContainer licenseGroupName="Microsoft"/>
<CategoryContainer licenseGroupName="Willy Wonker Online Movie"/>
</li>
</div>
</div>
@ -30,5 +31,9 @@ import { store } from './store';
li {
list-style-type: none;
}
html,body,main {
background-color: #E3E3E3
}
</style>

10
web/src/components/CategoryContainer.vue
View file

@ -6,9 +6,17 @@
licenseKey="321z8321789"
startDate="12.12.2020"
endDate="13.12.2021"
:amount=1
:amount=undefined
notes="No notes"
/>
<ListViewElement
licenseName="Mockup 2"
licenseKey="XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX-XXXX"
startDate=""
endDate=""
:amount=1
notes="No notes"
/>
<!-- <ListViewElement
licenseName="Jetbrains Ultimate 2024.2.1"
key=""

20
web/src/components/Clipboard.vue Normal file
View file

@ -0,0 +1,20 @@
<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })
</script>
<template>
<div v-if="isSupported">
<button @click="copy(source)">
<!-- by default, `copied` will be reset in 1.5s -->
<span v-if="!copied">Copy</span>
<span v-else>Copied!</span>
</button>
<p>Current copied: <code>{{ text || 'none' }}</code></p>
</div>
<p v-else>
Your browser does not support Clipboard API
</p>
</template>

23
web/src/components/HeaderBar.vue
View file

@ -6,20 +6,21 @@
prominent
>
<img src="../assets/turbologo.svg" alt="logo" class="logo" width="75" />
<v-spacer></v-spacer>
<!-- Create, Delete, Edit -->
<div>
<v-btn icon class="mr-3">
<Plus />
</v-btn>
<v-btn icon class="mr-3">
<Pencil />
</v-btn>
<v-btn icon class="mr-3">
<Plus />
</v-btn>
<v-btn icon class="mr-3">
<Trash2 />
</v-btn>
<v-btn icon class="mr-3">
<Pencil />
<Trash2 />
</v-btn>
</div>
<!-- Search -->
<v-text-field
class="compact-form mr-2"
label="Search"
@ -30,7 +31,9 @@
single-line
clearable
rounded="pill"
></v-text-field>
></v-text-field>
<!-- Logout -->
<v-btn icon variant="outlined" @click="handlelogout">
<LogOut />
</v-btn>
@ -40,9 +43,9 @@
</template>
<script setup lang="ts">
import { LogOut } from 'lucide-vue-next';
import { store } from '@/store';
import { Plus } from 'lucide-vue-next';
import { LogOut } from 'lucide-vue-next';
import { Trash2 } from 'lucide-vue-next';
import { Pencil } from 'lucide-vue-next';

87
web/src/components/ListViewElement.vue
View file

@ -3,36 +3,59 @@
elevation="4"
width="93vw"
rounded="lg"
class="mt-3"
>
<div class="values ml-2 py-3">
<div class="mr-3">
{{ props.licenseName }}
</div>
<div class="mr-3">
<span style="display: flex;">
<KeyRound class="transform mr-1"/>
{{ props.licenseKey }}
</span>
</div>
<div class="mr-3">
<span style="display: flex;">
<Check class="mr-1"/>
{{ props.startDate }}
</span>
</div>
<div class="mr-3">
<span style="display: flex;">
<Skull class="mr-1"/>
{{ props.endDate }}
</span>
</div>
<div class="mr-3">
<span style="display: flex;">
<img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
{{ props.amount }}
</span>
</div>
</div>
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-title>
<div class="mr-3">
{{ props.licenseName }}
</div>
<div
class="mr-3 d-flex align-self-center" style="align-items:center">
<KeyRound class="mr-1"/>
{{ props.licenseKey }}
</div>
<div class="mr-3 d-flex align-self-center" style="align-items:center">
<Check class="mr-1"/>
<span v-if="props.startDate == null || props.startDate == undefined || props.startDate.length == 0">
Verfügbar
</span>
<span v-else>
{{ props.startDate }}
</span>
</div>
<div class="mr-3 d-flex align-self-center" style="align-items:center">
<Skull class="mr-1"/>
<span v-if="props.endDate == null || props.endDate == undefined || props.endDate.length == 0">
Ewig Verfügbar
</span>
<span v-else>
{{ props.endDate }}
</span>
</div>
<div class="mr-3">
<span style="display: flex;" >
<img src="../assets/doublekey.svg" alt="logo" class="logo mr-1" width="24" />
<span v-if="props.amount == null || props.amount == undefined">
<Infinity />
</span>
<span v-else>
{{ props.amount }}
</span>
</span>
</div>
</v-expansion-panel-title>
<v-expansion-panel-text>
Notes: {{ props.notes }}
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</v-sheet>
</template>
@ -41,6 +64,7 @@
import { KeyRound } from 'lucide-vue-next';
import { Check } from 'lucide-vue-next';
import { Skull } from 'lucide-vue-next';
import { Infinity } from 'lucide-vue-next';
const props = defineProps({
licenseName: String,
@ -59,9 +83,4 @@
align-items: center;
}
transform {
transform: scale(0.85);
transform-origin: left;
}
</style>