ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[notifications] Make text clickable if link is present

This commit is contained in:
Ferdinand Thiessen 2021-03-30 15:48:15 +02:00
parent b7aeea0a23
commit 6891a3ffba
2 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/boot/store.ts
View File

@ -1,9 +1,13 @@
import { createPinia } from 'pinia';
import { createPinia, Pinia } from 'pinia';
import { boot } from 'quasar/wrappers';
import { useMainStore } from 'src/stores';
import { ref } from 'vue';
export const pinia = ref<Pinia>();
export default boot(({ app }) => {
app.use(createPinia());
pinia.value = createPinia();
app.use(pinia.value);
const store = useMainStore();
void store.init();

24
src/components/Notification.vue
View File

@ -1,7 +1,13 @@
<template>
<q-card bordered class="row q-ma-xs q-pa-xs" style="position: relative">
<q-card
bordered
class="row q-ma-xs q-pa-xs"
style="position: relative; min-height: 3em"
:class="{ 'cursor-pointer': modelValue.link }"
@click="click"
>
<div class="col-12 text-weight-light">{{ dateString }}</div>
<div :id="`ntfctn-${modelValue.id}`" class="col-12" @click="click">{{ modelValue.text }}</div>
<div :id="`ntfctn-${modelValue.id}`" class="col-12">{{ modelValue.text }}</div>
<q-btn
round
dense
@ -16,11 +22,11 @@
v-if="modelValue.accept !== undefined"
round
dense
icon="close"
icon="check"
size="sm"
color="positive"
class="q-ma-xs"
style="position: absolute; top: 50px; right: 0"
style="position: absolute; top: 0; right: 3em"
@click="accept"
/>
</q-card>
@ -52,15 +58,15 @@ export default defineComponent({
}
function accept() {
if (props.modelValue.accept)
void props.modelValue.accept().then(() => emit('remove', props.modelValue.id));
if (typeof props.modelValue.accept === 'function')
void props.modelValue.accept().finally(() => emit('remove', props.modelValue.id));
else emit('remove', props.modelValue.id);
}
function remove() {
if (props.modelValue.reject)
void props.modelValue.reject().then(() => emit('remove', props.modelValue.id));
emit('remove', props.modelValue.id);
if (typeof props.modelValue.reject === 'function')
void props.modelValue.reject().finally(() => emit('remove', props.modelValue.id));
else emit('remove', props.modelValue.id);
}
return { accept, click, dateString, remove };