Synthèse financière dans l'onglet de la fiche activité (15c9a0ae) · Commits · open-source / oscar

ui/src/styles/_oscar-core.scss

+50 −0

Changes for ui/src/styles/_oscar-core.scss: 50 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -200,6 +200,11 @@ label {
		font-size: 1.2em;
		}
		}
		.label {
		>*{
		padding: .3em;
		}
		}
		}
		.title {
		font-size: 1.4em;
		@@ -222,3 +227,48 @@ label {
		//}
		}
		}
		.labeled-values-lines {
		.labeled-value {
		border-bottom: thin solid var(--bs-gray-300);
		}
		}

		.labeled-value {
		&.labeled-value-hudge {
		font-size: 2em;
		}
		&.labeled-value-vertical {
		text-align: center;
		.label {
		border-bottom: thin solid var(--bs-gray-100);
		}
		//background: var(--bs-primary-light);
		}
		&.labeled-value-horizontal {
		display: flex;
		>*{
		flex: 1;
		}
		:last-child {
		flex: 0;
		}
		align-items: center;
		.label {
		padding-right: .5em;
		&:after {
		content: ' : '
		}
		}
		}
		.label {
		color: var(--bs-gray-600);
		font-weight: 300;
		line-height: 1em;
		font-size: .9em;
		}
		.value {
		font-size: 1.1em;
		font-weight: 900;
		white-space: nowrap;
		}
		}
		No newline at end of file

ui/src/views/Activity.vue

+100 −0

Changes for ui/src/views/Activity.vue: 100 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -312,6 +312,73 @@
		:class="{'active show': uiActiveTab === 'financial'}"
		role="tabpanel" aria-labelledby="nav-financial-tab" tabindex="0">
		Finances
		<div class="row">
		<div class="col-md-3">
		<div class="budget-details">
		<div class="montant labeled-value labeled-value-hudge labeled-value-vertical">
		<div class="label">{{ $filters.oscarText('amount') }}</div>
		<div class="amount value">
		<span class="main">{{ budget.amount }}</span>
		<small class="currency addon">{{ budget.currency.symbol }}</small>
		</div>
		</div>
		</div>
		<div class="labeled-value labeled-value-horizontal">
		<div class="label">{{ $filters.oscarText('codeEOTP') }}</div>
		<div class="value">{{ core.pfi }}</div>
		</div>
		<div class="labeled-value labeled-value-horizontal">
		<div class="label">{{ $filters.oscarText('assietteSubventionnable') }}</div>
		<div class="value">{{ budget.assietteSubventionnable }}</div>
		</div>

		</div>
		<div class="col-md-3">
		<div class="labeled-value labeled-value-horizontal">
		<div class="label">{{ $filters.oscarText('tva') }}</div>
		<div class="value">{{ budget.tva }}</div>
		</div>
		<div class="labeled-value labeled-value-horizontal">
		<div class="label">{{ $filters.oscarText('fraisDeGestion') }}</div>
		<div class="value">{{ budget.fraisDeGestion }}</div>
		</div>
		<div class="labeled-value labeled-value-horizontal">
		<div class="label">{{ $filters.oscarText('fraisDeGestionPartHebergeur') }}</div>
		<div class="value">{{ budget.fraisDeGestionPartHebergeur }}</div>
		</div>
		<div class="labeled-value labeled-value-horizontal">
		<div class="label">{{ $filters.oscarText('fraisDeGestionPartUnite') }}</div>
		<div class="value">{{ budget.fraisDeGestionPartUnite }}</div>
		</div>
		<div class="labeled-value labeled-value-horizontal">
		<div class="label">{{ $filters.oscarText('fraisDeGestionPartGestionnaire') }}</div>
		<div class="value">{{ budget.fraisDeGestionPartGestionnaire }}</div>
		</div>
		</div>
		<div class="col-md-6">
		<h3>Versements</h3>
		<div class="labeled-values-lines">
		<div class="labeled-value labeled-value-horizontal" v-for="v in paymentsSorted">

		<div class="label">
		<i class="icon-valid" v-if="v.status === 'done'"></i>
		<i class="icon-clock" v-if="v.status === 'futur'"></i>
		<i class="icon-attention-1" v-if="v.status === 'late'"></i>

		{{ v.status }}
		<strong class="main">{{ $filters.date(v.date) }}</strong>
		<small class="addon">({{ $filters.timeAgo(v.date) }})</small>
		</div>
		<div class="value">
		<strong>{{ $filters.money(v.amount) }}</strong>
		</div>
		</div>
		</div>

		</div>
		</div>
		<hr>
		{{ budget }}
		</div>
		<div class="tab-pane fade" id="nav-dates"
		:class="{'active show': uiActiveTab === 'dates'}"
		@@ -1065,6 +1132,39 @@ export default {
		},

		computed: {
		paymentsSorted(){
		let sorted = [];
		let date, status;
		this.payments.forEach(item => {
		date = item.datePredicted;
		status = 'todo';

		if(item.status === 1){
		status = 'futur';
		}
		if(item.status === 2){
		date = item.datePayment;
		status = 'done';
		}

		if( item.late ){
		status = 'error';
		}

		date = date.substring(0, 10);

		sorted.push({
		label: item.amount + item.currency.symbol,
		date: date,
		amount: item.amount,
		currency: item.currency.symbol,
		late: item.late,
		status: status,
		type: 'payment'
		})
		})
		return sorted.sort((a,b) => new Date(b.date) - new Date(a.date) )
		},
		timeline(){
		let timeline = [];
		let status, date;