[Vue3] Fixed some eslint warnings on template part of vue files

This commit is contained in:
Ferdinand Thiessen 2021-01-31 17:09:29 +01:00
parent 6be07b1001
commit 152b86fb4f
14 changed files with 43 additions and 43 deletions

View File

@ -5,13 +5,13 @@
:label="label" :label="label"
:value="getDateTime()" :value="getDateTime()"
:placeholder="placeholder" :placeholder="placeholder"
v-on:input="dateTimeChanged" @input="dateTimeChanged"
:rules="customRules" :rules="customRules"
> >
<template v-slot:append> <template #append>
<q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'"> <q-icon name="event" class="cursor-pointer" v-if="type == 'date' || type == 'datetime'">
<q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale"> <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
<q-date :value="getDate()" mask="YYYY-MM-DD" v-on:input="dateChanged"> <q-date :value="getDate()" mask="YYYY-MM-DD" @input="dateChanged">
<div class="row items-center justify-end"> <div class="row items-center justify-end">
<q-btn v-close-popup label="Schließen" color="primary" flat /> <q-btn v-close-popup label="Schließen" color="primary" flat />
</div> </div>
@ -24,7 +24,7 @@
v-if="type == 'time' || type == 'datetime'" v-if="type == 'time' || type == 'datetime'"
> >
<q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale"> <q-popup-proxy ref="qTimeProxy" transition-show="scale" transition-hide="scale">
<q-time :value="getTime()" mask="HH:mm" v-on:input="timeChanged"> <q-time :value="getTime()" mask="HH:mm" @input="timeChanged">
<div class="row items-center justify-end"> <div class="row items-center justify-end">
<q-btn v-close-popup label="Schließen" color="primary" flat /> <q-btn v-close-popup label="Schließen" color="primary" flat />
</div> </div>

View File

@ -5,7 +5,7 @@
class="fit row justify-around items-start q-col-gutter-sm" class="fit row justify-around items-start q-col-gutter-sm"
> >
<div v-for="(item, index) in widgets" :key="index" class="col-4 full-height col-sm-6 col-xs-12"> <div v-for="(item, index) in widgets" :key="index" class="col-4 full-height col-sm-6 col-xs-12">
<component v-bind:is="item" /> <component :is="item" />
</div> </div>
</q-page> </q-page>
</template> </template>

View File

@ -2,7 +2,7 @@
<q-card> <q-card>
<BalanceHeader <BalanceHeader
@update:user="userUpdated" @update:user="userUpdated"
:showSelector="showSelector" :show-selector="showSelector"
@open-history="openHistory" @open-history="openHistory"
/> />
<q-separator /> <q-separator />

View File

@ -2,7 +2,7 @@
<q-card> <q-card>
<BalanceHeader <BalanceHeader
@update:user="senderUpdated" @update:user="senderUpdated"
:showSelector="showSelector" :show-selector="showSelector"
@open-history="openHistory" @open-history="openHistory"
/> />
<q-separator /> <q-separator />

View File

@ -1,13 +1,13 @@
<template> <template>
<div> <div>
<q-card flat square> <q-card flat square>
<q-card-section class="row items-center justify-between" horizontal> <q-card-section class="row items-center justify-between" horizontal>
<div class="col-5 text-left q-px-sm"> <div class="col-5 text-left q-px-sm">
<div v-bind:class="{ 'text-negative': isNegative() }" class="text-weight-bold text-h6"> <div
<span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239; :class="{ 'text-negative': isNegative() }"
</div> class="text-weight-bold text-h6"
<div class="text-caption">{{ text }}</div> >
<div class="text-caption">{{ timeStr }}</div> <span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239;
</div> </div>
<div class="col-5 q-px-sm text-center"> <div class="col-5 q-px-sm text-center">
<div class="text-subtitle1" v-if="isReversed">Storniert</div> <div class="text-subtitle1" v-if="isReversed">Storniert</div>

View File

@ -32,9 +32,9 @@
</q-item> </q-item>
</q-list> </q-list>
<q-list v-if="show"> <q-list v-if="show">
<div v-for="(transaction, index) in transactions" v-bind:key="index" class="col-sm-12"> <div v-for="(transaction, index) in transactions" :key="index" class="col-sm-12">
<!-- TODO: In Vue3 use v-model:transaction="..." --> <!-- TODO: In Vue3 use v-model:transaction="..." -->
<Transaction :transaction.sync="transactions[index]" /> <Transaction v-model:transaction="transactions[index]" />
</div> </div>
</q-list> </q-list>
</q-drawer> </q-drawer>

View File

@ -12,16 +12,16 @@
:data="data" :data="data"
:columns="columns" :columns="columns"
row-key="id" row-key="id"
:pagination.sync="pagination" v-model:pagination="pagination"
:loading="loading" :loading="loading"
@request="onRequest" @request="onRequest"
binary-state-sort binary-state-sort
> >
<template v-slot:top> <template #top>
<q-toggle v-model="showCancelled" label="Stornierte einblenden" /> <q-toggle v-model="showCancelled" label="Stornierte einblenden" />
</template> </template>
<template v-slot:body-cell="props"> <template #body-cell="props">
<q-td :props="props" v-bind:class="{ 'bg-grey': props.row.reversal_id != null }"> <q-td :props="props" :class="{ 'bg-grey': props.row.reversal_id != null }">
{{ props.value }} {{ props.value }}
</q-td> </q-td>
</template> </template>

View File

@ -40,11 +40,11 @@
<q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" /> <q-btn color="primary" label="Schicht hinzufügen" @click="addJob()" />
</q-card-section> </q-card-section>
<q-card-section v-for="(job, index) in event.jobs" v-bind:key="index"> <q-card-section v-for="(job, index) in event.jobs" :key="index">
<q-card class="q-my-auto"> <q-card class="q-my-auto">
<job <job
:job="job" :job="job"
:jobCanDelete="jobDeleteDisabled" :job-can-delete="jobDeleteDisabled"
@set-start="setStart" @set-start="setStart"
@set-required="setRequired" @set-required="setRequired"
@set-end="setEnd" @set-end="setEnd"

View File

@ -19,13 +19,13 @@
<q-card> <q-card>
<q-card-section> <q-card-section>
<q-table title="Veranstaltungstypen" :data="rows" row-key="jobid" :columns="columns"> <q-table title="Veranstaltungstypen" :data="rows" row-key="jobid" :columns="columns">
<template v-slot:top-right> <template #top-right>
<q-input dense v-model="newEventType" placeholder="Neuer Typ" /> <q-input dense v-model="newEventType" placeholder="Neuer Typ" />
<div></div> <div></div>
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" /> <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
</template> </template>
<template v-slot:body-cell-actions="props"> <template #body-cell-actions="props">
<!-- <q-btn :label="item"> --> <!-- <q-btn :label="item"> -->
<!-- {{ item.row.name }} --> <!-- {{ item.row.name }} -->
<q-td :props="props" align="right" :auto-width="true"> <q-td :props="props" align="right" :auto-width="true">

View File

@ -4,7 +4,7 @@
<IsoDateInput <IsoDateInput
class="col-xs-12 col-sm-6 q-pa-sm" class="col-xs-12 col-sm-6 q-pa-sm"
:value="job.start" :value="job.start"
v-on:input="setStart" @input="setStart"
label="Beginn" label="Beginn"
type="datetime" type="datetime"
:rules="[noValidDate, notEmpty]" :rules="[noValidDate, notEmpty]"
@ -13,7 +13,7 @@
ref="bla" ref="bla"
class="col-xs-12 col-sm-6 q-pa-sm" class="col-xs-12 col-sm-6 q-pa-sm"
:value="job.end" :value="job.end"
v-on:input="setEnd" @input="setEnd"
label="Ende" label="Ende"
type="datetime" type="datetime"
:rules="[noValidDate, isAfterDate, notEmpty]" :rules="[noValidDate, isAfterDate, notEmpty]"
@ -29,7 +29,7 @@
class="col-xs-12 col-sm-6 q-pa-sm" class="col-xs-12 col-sm-6 q-pa-sm"
:value="job.type" :value="job.type"
:options="jobtypes" :options="jobtypes"
v-on:input="setJobType" @input="setJobType"
option-label="name" option-label="name"
option-value="name" option-value="name"
map-options map-options
@ -52,7 +52,7 @@
label="Beschreibung" label="Beschreibung"
type="textarea" type="textarea"
:value="job.comment" :value="job.comment"
v-on:input="setComment" @input="setComment"
filled filled
:rules="[notEmpty]" :rules="[notEmpty]"
/> />

View File

@ -19,13 +19,13 @@
<q-card> <q-card>
<q-card-section> <q-card-section>
<q-table title="Diensttypen" :data="rows" row-key="jobid" :columns="columns"> <q-table title="Diensttypen" :data="rows" row-key="jobid" :columns="columns">
<template v-slot:top-right> <template #top-right>
<q-input dense v-model="newJob" placeholder="Neuer Typ" /> <q-input dense v-model="newJob" placeholder="Neuer Typ" />
<div></div> <div></div>
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" /> <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
</template> </template>
<template v-slot:body-cell-actions="props"> <template #body-cell-actions="props">
<!-- <q-btn :label="item"> --> <!-- <q-btn :label="item"> -->
<!-- {{ item.row.name }} --> <!-- {{ item.row.name }} -->
<q-td :props="props" align="right" :auto-width="true"> <q-td :props="props" align="right" :auto-width="true">

View File

@ -50,8 +50,6 @@ import { computed, defineComponent, ref } from 'vue';
import Eventtypes from '../components/management/Eventtypes.vue'; import Eventtypes from '../components/management/Eventtypes.vue';
import JobTypes from '../components/management/JobTypes.vue'; import JobTypes from '../components/management/JobTypes.vue';
import CreateEvent from '../components/management/CreateEvent.vue'; import CreateEvent from '../components/management/CreateEvent.vue';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { hasPermission } from 'src/utils/permission'; import { hasPermission } from 'src/utils/permission';
import { PERMISSIONS } from '../permissions'; import { PERMISSIONS } from '../permissions';
import { Screen } from 'quasar'; import { Screen } from 'quasar';
@ -59,10 +57,8 @@ import { Screen } from 'quasar';
export default defineComponent({ export default defineComponent({
name: 'EventManagement', name: 'EventManagement',
components: { CreateEvent, Eventtypes, JobTypes }, components: { CreateEvent, Eventtypes, JobTypes },
setup(_, { root }) { setup() {
const store = <Store<StateInterface>>root.$store; const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));
const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT, store));
interface Tab { interface Tab {
name: string; name: string;

View File

@ -3,7 +3,7 @@
filled filled
:label="label" :label="label"
@input="updated" @input="updated"
:value="user" :value="modelValue"
:options="users" :options="users"
option-label="display_name" option-label="display_name"
option-value="userid" option-value="userid"
@ -12,13 +12,17 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent, onBeforeMount } from 'vue'; import { computed, defineComponent, Prop, onBeforeMount } from 'vue';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { UserSessionState } from '../store'; import { UserSessionState } from '../store';
export default defineComponent({ export default defineComponent({
name: 'UserSelector', name: 'UserSelector',
props: { user: { required: true, type: Object }, label: { type: String, default: 'Benutzer' } }, props: {
label: { type: String, default: 'Benutzer' },
modelValue: { required: true, type: Object } as Prop<FG.User>,
},
emits: { 'update:modelValue': (user: FG.User) => !!user },
setup(_, { emit }) { setup(_, { emit }) {
const store = useStore<UserSessionState>(); const store = useStore<UserSessionState>();
@ -30,7 +34,7 @@ export default defineComponent({
const users = computed(() => store.state.users.users); const users = computed(() => store.state.users.users);
const updated = (value: FG.User) => { const updated = (value: FG.User) => {
emit('update:user', value); emit('update:modelValue', value);
}; };
return { return {

View File

@ -14,7 +14,7 @@
<span v-if="hasBirthday">Herzlichen Glückwunsch zum Geburtstag!<br /></span> <span v-if="hasBirthday">Herzlichen Glückwunsch zum Geburtstag!<br /></span>
<span v-if="birthday.length > 0" <span v-if="birthday.length > 0"
>Heute <span v-if="birthday.length === 1">hat </span><span v-else>haben </span >Heute <span v-if="birthday.length === 1">hat </span><span v-else>haben </span
><span v-for="(user, index) in birthday" v-bind:key="index" ><span v-for="(user, index) in birthday" :key="index"
>{{ user.display_name }}<span v-if="index < birthday.length - 1">, </span></span >{{ user.display_name }}<span v-if="index < birthday.length - 1">, </span></span
> >
Geburtstag.</span Geburtstag.</span