[core] Notifications can now be dismissed without triggering a reject

This commit is contained in:
Ferdinand Thiessen 2021-11-24 15:28:53 +01:00
parent e4889ddac2
commit a8578e2803
4 changed files with 47 additions and 21 deletions

View File

@ -23,7 +23,7 @@
"quasar": "^2.3.3" "quasar": "^2.3.3"
}, },
"devDependencies": { "devDependencies": {
"@flaschengeist/types": "^1.0.0-alpha.5", "@flaschengeist/types": "^1.0.0-alpha.6",
"@quasar/app": "^3.2.3", "@quasar/app": "^3.2.3",
"@quasar/extras": "^1.12.1", "@quasar/extras": "^1.12.1",
"@types/node": "^14.17.34", "@types/node": "^14.17.34",

View File

@ -132,6 +132,7 @@ module.exports = configure(function (/* ctx */) {
plugins: [ plugins: [
'LocalStorage', 'LocalStorage',
'SessionStorage', 'SessionStorage',
'Dialog',
'Loading', 'Loading',
'Notify', 'Notify',
'LoadingBar' 'LoadingBar'

View File

@ -1,34 +1,53 @@
<template> <template>
<q-card <q-card
bordered bordered
class="row q-ma-xs q-pa-xs"
style="position: relative; min-height: 3em" style="position: relative; min-height: 3em"
:class="{ 'cursor-pointer': modelValue.link }" :class="{ 'cursor-pointer': modelValue.link }"
@click="click" @click="click"
> >
<div class="col-12 text-weight-light">{{ dateString }}</div>
<div :id="`ntfctn-${modelValue.id}`" class="col-12">{{ modelValue.text }}</div>
<q-btn
round
dense
icon="mdi-close"
size="sm"
color="negative"
class="q-ma-xs"
style="position: absolute; top: 0; right: 0"
@click="remove"
/>
<q-btn <q-btn
v-if="modelValue.accept !== undefined" v-if="modelValue.accept !== undefined"
round round
dense dense
icon="mdi-check" icon="mdi-trash-can"
size="sm" size="sm"
color="positive" color="negative"
class="q-ma-xs" class="q-ma-xs"
style="position: absolute; top: 0; right: 3em" title="Löschen"
style="position: absolute; top: 0; right: 0"
@click="dismiss"
/>
<q-card-section class="q-pa-xs">
<div class="text-overline">{{ dateString }}</div>
<q-item style="padding: 1px">
<q-item-section v-if="modelValue.icon" side
><q-icon color="primary" :name="modelValue.icon"
/></q-item-section>
<q-item-section>{{ modelValue.text }}</q-item-section>
</q-item>
</q-card-section>
<q-card-actions v-if="modelValue.reject || modelValue.accept">
<q-btn
v-if="modelValue.accept"
icon="mdi-check"
color="positive"
label="Annehmen"
flat
dense
size="sm"
@click="accept" @click="accept"
/> />
<q-btn
v-if="modelValue.reject"
icon="mdi-close"
color="negative"
label="Ablehnen"
flat
dense
size="sm"
@click="reject"
/>
</q-card-actions>
</q-card> </q-card>
</template> </template>
@ -63,13 +82,19 @@ export default defineComponent({
else emit('remove', props.modelValue.id); else emit('remove', props.modelValue.id);
} }
function remove() { function reject() {
if (typeof props.modelValue.reject === 'function') if (typeof props.modelValue.reject === 'function')
void props.modelValue.reject().finally(() => emit('remove', props.modelValue.id)); void props.modelValue.reject().finally(() => emit('remove', props.modelValue.id));
else emit('remove', props.modelValue.id); else emit('remove', props.modelValue.id);
} }
return { accept, click, dateString, remove }; function dismiss() {
if (typeof props.modelValue.dismiss === 'function')
void props.modelValue.dismiss().finally(() => emit('remove', props.modelValue.id));
else emit('remove', props.modelValue.id);
}
return { accept, click, dateString, dismiss, reject };
}, },
}); });
</script> </script>

View File

@ -18,7 +18,7 @@
<q-badge color="negative" floating> <q-badge color="negative" floating>
{{ notifications.length }} {{ notifications.length }}
</q-badge> </q-badge>
<q-menu style="max-height: 400px; overflow: auto"> <q-menu max-height="400px" style="min-width: 290px" class="q-pa-xs">
<q-btn <q-btn
v-if="useNative && noPermission" v-if="useNative && noPermission"
label="Benachrichtigungen erlauben" label="Benachrichtigungen erlauben"