173 lines
11 KiB
HTML
173 lines
11 KiB
HTML
{{ define "content" }}
|
|
<main class="py-10">
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8">
|
|
<div class="flex items-center space-x-5">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900">{{.ViewState.event.Name}}</h1>
|
|
<p class="text-m font-medium text-gray-500">
|
|
{{if eq .ViewState.event.Startdate .ViewState.event.Enddate}}
|
|
Le {{(timeFrom .ViewState.event.Startdate).Format "02/01/2006"}}
|
|
{{else}}
|
|
Du {{(timeFrom .ViewState.event.Startdate).Format "02/01/2006"}} au {{(timeFrom .ViewState.event.Enddate).Format "02/01/2006"}}
|
|
{{end}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 sm:px-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-3">
|
|
<div class="space-y-6 lg:col-start-1 lg:col-span-2">
|
|
<section aria-labelledby="event-information-title">
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<h2 id="event-information-title" class="text-lg leading-6 font-medium text-gray-900">Informations</h2>
|
|
<p class="mt-1 max-w-2xl text-sm text-gray-500">Informations sur le dispositif.</p>
|
|
</div>
|
|
<div class="border-t border-gray-200 px-4 py-5 sm:px-6">
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
|
|
{{if .ViewState.event.Type}}
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Type</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.Type}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if .ViewState.group}}
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Structure gestionnaire</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{.ViewState.group.Data.name}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if .ViewState.event.MaxSubscribers}}
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Total places</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.MaxSubscribers}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if ne .ViewState.event.MaxSubscribers 0}}
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Places restantes</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.RemainingSubscriptions}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if .ViewState.event.Data.address}}
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Adresse</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.Data.address.properties.label}}</dd>
|
|
</div>
|
|
{{end}}
|
|
{{if .ViewState.event.Description}}
|
|
<div class="sm:col-span-2">
|
|
<dt class="text-sm font-medium text-gray-500">Description</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{.ViewState.event.Description}}</dd>
|
|
</div>
|
|
{{end}}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ if eq (index .ViewState.event.Owners 0) .Group.ID }}
|
|
<section aria-labelledby="subscribers-table"></section>
|
|
<div class="bg-white shadow sm:rounded-lg">
|
|
<div class="flex justify-between px-4 py-5 sm:px-6">
|
|
<h2 id="event-information-title" class="text-lg leading-6 font-medium text-gray-900">Tous les inscrits</h2>
|
|
<a href="/app/agenda/{{.ViewState.event.ID}}/history">
|
|
<button type="submit"class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
|
|
Bénéficiaires désinscrits
|
|
</button>
|
|
</a>
|
|
</div>
|
|
{{template "subscribers_table" .}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
</div>
|
|
<section aria-labelledby="subscribers-title" class="lg:col-start-3 lg:col-span-1">
|
|
<div class="bg-white px-4 py-5 shadow sm:rounded-lg sm:px-6" x-data="{
|
|
text: '',
|
|
error: false,
|
|
beneficiariesListOpen: false,
|
|
beneficiaries: {{json .ViewState.beneficiaries}},
|
|
filteredBeneficiaries: (text) => {
|
|
if(text=='') return beneficiaries
|
|
return this.beneficiaries.filter(b => b['data']['first_name'].includes(text) || b['data']['last_name'].includes(text))
|
|
},
|
|
fields: {
|
|
beneficiaryid: {{if .ViewState.search}}'{{.ViewState.search.beneficiary.ID}}'{{else}}null{{end}},
|
|
},
|
|
selectbeneficiary(beneficiary) {
|
|
console.log(beneficiary)
|
|
this.fields.beneficiaryid = beneficiary.id
|
|
this.text = beneficiary.data.first_name + ' ' + beneficiary.data.last_name
|
|
this.beneficiariesListOpen = false
|
|
},
|
|
submit(event) {
|
|
if(!this.fields.beneficiaryid) {
|
|
this.error = true
|
|
event.preventDefault()
|
|
}
|
|
return this.formValidation.valid
|
|
}
|
|
}">
|
|
<h2 id="subscribers-title" class="text-lg font-medium text-gray-900">Inscrire un bénéficiaire</h2>
|
|
{{if gt .ViewState.event.RemainingSubscriptions 0}}
|
|
<form class="mt-4" action="/app/agenda/{{.ViewState.event.ID}}/subscribe" method="POST" @submit="submit">
|
|
<div class="relative mt-1 mb-4">
|
|
<input @focus="beneficiariesListOpen = true" x-model="text" id="combobox" type="text" class="w-full rounded-2xl border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-co-blue focus:outline-none focus:ring-1 focus:ring-co-blue sm:text-sm" role="combobox" aria-controls="options" aria-expanded="false">
|
|
|
|
<button @click="beneficiariesListOpen = ! beneficiariesListOpen" type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-2xl px-2 focus:outline-none">
|
|
<!-- Heroicon name: solid/selector -->
|
|
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
|
|
<ul x-show="beneficiariesListOpen" class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" id="options" role="listbox">
|
|
|
|
<template x-for="beneficiary in beneficiaries">
|
|
<li @click="selectbeneficiary(beneficiary)" class="relative cursor-default hover:bg-gray-100 select-none py-2 pl-3 pr-9 text-gray-900" id="option-0" role="option" tabindex="-1">
|
|
|
|
<span class="truncate" x-text="beneficiary.data.first_name"></span> <span class="truncate" x-text="beneficiary.data.last_name"></span>
|
|
|
|
<span class="absolute inset-y-0 right-0 flex items-center pr-4 text-co-blue">
|
|
|
|
</span>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
<input type="hidden" name="subscriber" x-model="fields.beneficiaryid">
|
|
</div>
|
|
<p class="text-co-red text-xs mb-4" x-show="error">Vous devez sélectionner un bénéficiaire</p>
|
|
<button type="submit"
|
|
class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
|
|
Inscrire le bénéficiaire
|
|
</button>
|
|
</form>
|
|
{{else}}
|
|
<p class="p-12 text-gray-500 text-center text-md">Il n'y a plus de place disponible</p>
|
|
{{end}}
|
|
{{if .ViewState.subscribers}}
|
|
{{if ne (index .ViewState.event.Owners 0) .Group.ID}}
|
|
<h2 id="subscribers-title" class="text-lg font-medium text-gray-900 mt-10">Bénéficiaires {{.Group.Data.name}} inscrits</h2>
|
|
<div class="mt-2">
|
|
<ul class="p-1">
|
|
{{$evid := .ViewState.event.ID}}
|
|
{{range .ViewState.event.Subscriptions}}
|
|
{{if eq $.Group.ID .Data.subscribed_by.group.id}}
|
|
<a href="/app/beneficiaries/{{.Subscriber}}">
|
|
<li class="inline-flex text-sm p-2"><img class="h-6 w-6 rounded-co mr-2" src="/app/beneficiaries/{{.Subscriber}}/picture"> {{ (index $.ViewState.subscribers .Subscriber).Data.first_name }} {{ (index $.ViewState.subscribers .Subscriber).Data.last_name }}
|
|
</a>
|
|
<a href="/app/agenda/{{$evid}}/{{.Subscriber}}/delete" class="inline-flex">
|
|
<button type="button"
|
|
class="w-full ml-2 px-2 border border-transparent text-sm font-medium rounded-2xl shadow-sm text-white bg-co-red hover:bg-co-red focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-co-red">x</button></a>
|
|
</li>
|
|
{{end}}
|
|
{{end}}
|
|
</ul>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
{{ end }} |