Add tooltip slot to sidebar header
This commit is contained in:
philipp lang
parent
07d309f606
commit
a526683082
|
|
@ -2,25 +2,7 @@
|
|||
<div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-500">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-1 text-xl font-semibold leading-none text-white" v-html="title"></span>
|
||||
<a
|
||||
v-for="(link, index) in links.filter((link) => link.icon === undefined)"
|
||||
:key="index"
|
||||
@click.prevent="$emit(link.event)"
|
||||
href="#"
|
||||
class="btn label btn-primary-light"
|
||||
>
|
||||
<span v-if="link.label" v-text="link.label"></span>
|
||||
<svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
|
||||
</a>
|
||||
<a
|
||||
v-for="(link, index) in links.filter((link) => link.icon !== undefined)"
|
||||
:key="index"
|
||||
:href="link.href"
|
||||
class="btn label icon btn-primary-light ml-1"
|
||||
>
|
||||
<span v-if="link.label" v-text="link.label"></span>
|
||||
<svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
|
||||
</a>
|
||||
<slot name="toolbar"></slot>
|
||||
</div>
|
||||
<div class="flex ml-4">
|
||||
<a href="#" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">
|
||||
|
|
@ -33,11 +15,6 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
links: {
|
||||
default: function () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
title: {
|
||||
default: function () {
|
||||
return '';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<i-link :href="href" class="btn label mr-2" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
|
||||
<i-link :href="href" v-on="$listeners" class="btn label mr-2" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
|
||||
<svg-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></svg-sprite>
|
||||
<span class="hidden xl:inline"><slot></slot></span>
|
||||
</i-link>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,15 @@
|
|||
<template>
|
||||
<div class="sidebar flex flex-col">
|
||||
<sidebar-header
|
||||
:links="indexLinks"
|
||||
@close="$emit('close')"
|
||||
@create="
|
||||
mode = 'create';
|
||||
single = {};
|
||||
"
|
||||
title="Ausbildungen"
|
||||
></sidebar-header>
|
||||
<sidebar-header :links="indexLinks" @close="$emit('close')" title="Ausbildungen">
|
||||
<div class="flex" slot="toolbar">
|
||||
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Ausbildung</page-toolbar-button>
|
||||
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
|
||||
</div>
|
||||
</sidebar-header>
|
||||
|
||||
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
|
||||
<f-text id="completed_at" type="date" v-model="single.completed_at" label="Datum" required></f-text>
|
||||
<f-select
|
||||
id="course_id"
|
||||
name="course_id"
|
||||
:options="courses"
|
||||
v-model="single.course_id"
|
||||
label="Baustein"
|
||||
required
|
||||
></f-select>
|
||||
<f-select id="course_id" name="course_id" :options="courses" v-model="single.course_id" label="Baustein" required></f-select>
|
||||
<f-text id="event_name" v-model="single.event_name" label="Veranstaltung" required></f-text>
|
||||
<f-text id="organizer" v-model="single.organizer" label="Veranstalter" required></f-text>
|
||||
<button type="submit" class="btn btn-primary">Absenden</button>
|
||||
|
|
@ -50,9 +40,7 @@
|
|||
class="inline-flex btn btn-warning btn-sm"
|
||||
><svg-sprite src="pencil"></svg-sprite
|
||||
></a>
|
||||
<i-link href="#" @click.prevent="remove(course)" class="inline-flex btn btn-danger btn-sm"
|
||||
><svg-sprite src="trash"></svg-sprite
|
||||
></i-link>
|
||||
<i-link href="#" @click.prevent="remove(course)" class="inline-flex btn btn-danger btn-sm"><svg-sprite src="trash"></svg-sprite></i-link>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -80,6 +68,13 @@ export default {
|
|||
components: {SidebarHeader},
|
||||
|
||||
methods: {
|
||||
create() {
|
||||
this.mode = 'create';
|
||||
this.single = {};
|
||||
},
|
||||
cancel() {
|
||||
this.mode = this.single = null;
|
||||
},
|
||||
remove(payment) {
|
||||
this.$inertia.delete(`/member/${this.value.id}/course/${payment.id}`);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,34 +1,15 @@
|
|||
<template>
|
||||
<div class="sidebar flex flex-col">
|
||||
<sidebar-header
|
||||
:links="links"
|
||||
@create="
|
||||
mode = 'create';
|
||||
single = {...def};
|
||||
"
|
||||
@close="$emit('close')"
|
||||
title="Mitgliedschaften"
|
||||
></sidebar-header>
|
||||
<sidebar-header :links="links" @close="$emit('close')" title="Mitgliedschaften">
|
||||
<div class="flex" slot="toolbar">
|
||||
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Mitgliedschaft</page-toolbar-button>
|
||||
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
|
||||
</div>
|
||||
</sidebar-header>
|
||||
|
||||
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
|
||||
<f-select
|
||||
id="group_id"
|
||||
name="group_id"
|
||||
:options="groups"
|
||||
v-model="single.group_id"
|
||||
label="Gruppierung"
|
||||
size="sm"
|
||||
required
|
||||
></f-select>
|
||||
<f-select
|
||||
id="activity_id"
|
||||
name="activity_id"
|
||||
:options="activities"
|
||||
v-model="single.activity_id"
|
||||
label="Tätigkeit"
|
||||
size="sm"
|
||||
required
|
||||
></f-select>
|
||||
<f-select id="group_id" name="group_id" :options="groups" v-model="single.group_id" label="Gruppierung" size="sm" required></f-select>
|
||||
<f-select id="activity_id" name="activity_id" :options="activities" v-model="single.activity_id" label="Tätigkeit" size="sm" required></f-select>
|
||||
<f-select
|
||||
v-if="single.activity_id"
|
||||
name="subactivity_id"
|
||||
|
|
@ -38,21 +19,8 @@
|
|||
label="Untertätigkeit"
|
||||
size="sm"
|
||||
></f-select>
|
||||
<f-switch
|
||||
id="has_promise"
|
||||
:items="single.promised_at !== null"
|
||||
@input="single.promised_at = $event ? '2000-02-02' : null"
|
||||
size="sm"
|
||||
label="Hat Versprechen"
|
||||
></f-switch>
|
||||
<f-text
|
||||
v-show="single.promised_at !== null"
|
||||
type="date"
|
||||
id="promised_at"
|
||||
v-model="single.promised_at"
|
||||
label="Versprechensdatum"
|
||||
size="sm"
|
||||
></f-text>
|
||||
<f-switch id="has_promise" :items="single.promised_at !== null" @input="single.promised_at = $event ? '2000-02-02' : null" size="sm" label="Hat Versprechen"></f-switch>
|
||||
<f-text v-show="single.promised_at !== null" type="date" id="promised_at" v-model="single.promised_at" label="Versprechensdatum" size="sm"></f-text>
|
||||
<button type="submit" class="btn btn-primary">Absenden</button>
|
||||
</form>
|
||||
|
||||
|
|
@ -79,9 +47,7 @@
|
|||
class="inline-flex btn btn-warning btn-sm"
|
||||
><svg-sprite src="pencil"></svg-sprite
|
||||
></a>
|
||||
<i-link href="#" @click.prevent="remove(membership)" class="inline-flex btn btn-danger btn-sm"
|
||||
><svg-sprite src="trash"></svg-sprite
|
||||
></i-link>
|
||||
<i-link href="#" @click.prevent="remove(membership)" class="inline-flex btn btn-danger btn-sm"><svg-sprite src="trash"></svg-sprite></i-link>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -109,12 +75,19 @@ export default {
|
|||
group_id: this.value.group_id,
|
||||
activity_id: null,
|
||||
subactivity_id: null,
|
||||
promised_at: null
|
||||
promised_at: null,
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
create() {
|
||||
this.mode = 'create';
|
||||
this.single = {...this.def};
|
||||
},
|
||||
cancel() {
|
||||
this.mode = this.single = null;
|
||||
},
|
||||
remove(membership) {
|
||||
this.$inertia.delete(`/member/${this.value.id}/membership/${membership.id}`);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,33 +1,16 @@
|
|||
<template>
|
||||
<div class="sidebar flex flex-col">
|
||||
<sidebar-header
|
||||
:links="indexLinks"
|
||||
@close="$emit('close')"
|
||||
@create="
|
||||
mode = 'create';
|
||||
single = {};
|
||||
"
|
||||
title="Zahlungen"
|
||||
></sidebar-header>
|
||||
<sidebar-header @close="$emit('close')" title="Zahlungen">
|
||||
<div class="flex" slot="toolbar">
|
||||
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Zahlung</page-toolbar-button>
|
||||
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
|
||||
</div>
|
||||
</sidebar-header>
|
||||
|
||||
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
|
||||
<f-text id="nr" v-model="single.nr" label="Jahr" required></f-text>
|
||||
<f-select
|
||||
id="subscription_id"
|
||||
name="subscription_id"
|
||||
:options="subscriptions"
|
||||
v-model="single.subscription_id"
|
||||
label="Beitrag"
|
||||
required
|
||||
></f-select>
|
||||
<f-select
|
||||
id="status_id"
|
||||
name="status_id"
|
||||
:options="statuses"
|
||||
v-model="single.status_id"
|
||||
label="Status"
|
||||
required
|
||||
></f-select>
|
||||
<f-select id="subscription_id" name="subscription_id" :options="subscriptions" v-model="single.subscription_id" label="Beitrag" required></f-select>
|
||||
<f-select id="status_id" name="status_id" :options="statuses" v-model="single.status_id" label="Status" required></f-select>
|
||||
<button type="submit" class="btn btn-primary">Absenden</button>
|
||||
</form>
|
||||
|
||||
|
|
@ -54,16 +37,8 @@
|
|||
class="inline-flex btn btn-warning btn-sm"
|
||||
><svg-sprite src="pencil"></svg-sprite
|
||||
></a>
|
||||
<i-link
|
||||
v-show="!payment.is_accepted"
|
||||
href="#"
|
||||
@click.prevent="accept(payment)"
|
||||
class="inline-flex btn btn-success btn-sm"
|
||||
><svg-sprite src="check"></svg-sprite
|
||||
></i-link>
|
||||
<i-link href="#" @click.prevent="remove(payment)" class="inline-flex btn btn-danger btn-sm"
|
||||
><svg-sprite src="trash"></svg-sprite
|
||||
></i-link>
|
||||
<i-link v-show="!payment.is_accepted" href="#" @click.prevent="accept(payment)" class="inline-flex btn btn-success btn-sm"><svg-sprite src="check"></svg-sprite></i-link>
|
||||
<i-link href="#" @click.prevent="remove(payment)" class="inline-flex btn btn-danger btn-sm"><svg-sprite src="trash"></svg-sprite></i-link>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -91,13 +66,19 @@ export default {
|
|||
return {
|
||||
mode: null,
|
||||
single: null,
|
||||
indexLinks: [{event: 'create', label: 'Neue Zahlung'}],
|
||||
};
|
||||
},
|
||||
|
||||
components: {SidebarHeader},
|
||||
|
||||
methods: {
|
||||
create() {
|
||||
this.mode = 'create';
|
||||
this.single = {};
|
||||
},
|
||||
cancel() {
|
||||
this.mode = this.single = null;
|
||||
},
|
||||
remove(payment) {
|
||||
this.$inertia.delete(`/member/${this.value.id}/payment/${payment.id}`);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue