- Mise en page historique (ajout de dates + texte customisés) (75f66dbd) · Commits · open-source / oscar

ui/src/components/DateSlider.vue

+3 −1

Changes for ui/src/components/DateSlider.vue: 3 added lines, 1 removed line.
Original line number	Diff line number	Diff line
		@@ -21,6 +21,7 @@
		<div class="timeline-dot" :class="item.status">
		<i class="icon-bank" v-if="item.type === 'payment'"></i>
		<i class="icon-location" v-else-if="item.status === 'today'"></i>
		<i class="icon-flag" v-else-if="item.type === 'step'"></i>
		<i class="icon-calendar" v-else></i>
		</div>

		@@ -151,7 +152,7 @@ const formaterDate = (dateString) => {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 150px;
		min-width: 200px;
		margin: 0 1em;
		z-index: 2;
		transition: transform 0.3s ease;
		@@ -204,6 +205,7 @@ const formaterDate = (dateString) => {
		/* Couleurs selon le type */
		.timeline-dot.error { background: var(--bs-danger); }
		.timeline-dot.done { background: var(--bs-green); }
		.timeline-dot.step { background: var(--bs-blue); }

		.timeline-content {
		background: white;

ui/src/views/Activity.vue

+174 −21

Changes for ui/src/views/Activity.vue: 174 added lines, 21 removed lines.
Original line number	Diff line number	Diff line
		@@ -259,7 +259,8 @@
		<div class="title">
		<div class="label">
		<i class="icon-cube"></i>
		<code class="cartouche">{{ core.numOscar }}</code>
		<code class="cartouche primary-light">{{ core.numOscar }}</code>
		<code class="cartouche primary" v-if="core.pfi">{{ core.pfi }}</code>
		<strong>{{ core.label }}</strong>
		</div>
		<div class="activity-financial packed nowrap" v-if="budget && credentials.budget.read">
		@@ -272,41 +273,128 @@
		</div>
		<nav>
		<div class="nav nav-tabs" id="nav-tab" role="tablist">
		<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">
		Générale
		<button class="nav-link" id="nav-home-tab"
		:class="{'active': uiActiveTab === 'history'}"
		@click="uiActiveTab = 'history'"
		data-bs-toggle="tab" data-bs-target="#nav-history"
		type="button" role="tab" aria-controls="nav-history" aria-selected="true">
		<i class="icon-clock"></i> Historique
		</button>
		<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">
		<button class="nav-link" id="nav-dates-tab"
		:class="{'active': uiActiveTab === 'dates'}"
		@click="uiActiveTab = 'dates'"
		data-bs-toggle="tab" data-bs-target="#nav-dates" type="button" role="tab" aria-controls="nav-dates" aria-selected="false">
		<i class="icon-calendar"></i> Dates clefs
		</button>
		<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">
		Numérotations
		<button class="nav-link" id="nav-numbers-tab"
		:class="{'active': uiActiveTab === 'numbers'}"
		@click="uiActiveTab = 'numbers'"
		data-bs-toggle="tab" data-bs-target="#nav-numbers" type="button" role="tab" aria-controls="nav-numbers" aria-selected="false">
		<i class="icon-database-1"></i> Numérotations
		</button>
		<button class="nav-link" id="nav-financial-tab"
		:class="{'active': uiActiveTab === 'financial'}"
		@click="uiActiveTab = 'financial'"
		data-bs-toggle="tab" data-bs-target="#nav-financial" type="button" role="tab" aria-controls="nav-numbers" aria-selected="false">
		<i class="icon-bank"></i> Finances
		</button>
		<button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>
		Disabled
		TEST {{ uiActiveTab }}
		</button>
		</div>
		</nav>
		<div class="tab-content" id="nav-tabContent">
		<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
		<div class="tab-pane fade show" id="nav-history" :class="{'active show': uiActiveTab === 'history'}"
		role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
		<DateSlider :donnees="timeline" />
		</div>
		<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
		<div class="tab-pane fade" id="nav-financial"
		:class="{'active show': uiActiveTab === 'financial'}"
		role="tabpanel" aria-labelledby="nav-financial-tab" tabindex="0">
		Finances
		</div>
		<div class="tab-pane fade" id="nav-dates"
		:class="{'active show': uiActiveTab === 'dates'}"
		role="tabpanel" aria-labelledby="nav-dates-tab" tabindex="0">
		<div class="row">
		<div class="col-md-4">
		<div>Début : <time :datetime="core.dateStart">{{ $filters.dateFull(core.dateStart) }}</time></div>
		<div>Fin : <time :datetime="core.dateEnd">{{ $filters.dateFull(core.dateEnd) }}</time></div>
		<div>Date d'ouverture : <time :datetime="core.dateOpened">{{ $filters.dateFull(core.dateOpened) }}</time></div>
		<div>Date de négociation : <time :datetime="core.dateNegociation">{{ $filters.dateFull(core.dateNegociation) }}</time></div>
		<div class="col-md-6">
		<div>{{ $filters.oscarText("dateStart") }} :
		<span v-if="core.dateStart">
		<time :datetime="core.date">{{ $filters.date(core.dateStart) }}</time>
		<small class="ago"> ({{ $filters.timeAgo(core.dateStart) }})</small>
		</span>
		<em class="missing-data" v-else>
		<i class="icon-block" />Non définie
		</em>
		</div>

		<div>{{ $filters.oscarText("dateEnd") }} :
		<span v-if="core.dateEnd">
		<time :datetime="core.date">{{ $filters.date(core.dateEnd) }}</time>
		<small class="ago"> ({{ $filters.timeAgo(core.dateEnd) }})</small>
		</span>
		<em class="missing-data" v-else>
		<i class="icon-block" />Non définie
		</em>
		</div>

		<div>{{ $filters.oscarText("dateOpened") }} :
		<span v-if="core.dateOpened">
		<time :datetime="core.date">{{ $filters.date(core.dateOpened) }}</time>
		<small class="ago"> ({{ $filters.timeAgo(core.dateOpened) }})</small>
		</span>
		<em class="missing-data" v-else>
		<i class="icon-block" />Non définie
		</em>
		</div>

		<div>{{ $filters.oscarText("dateSigned") }} :
		<span v-if="core.dateSigned">
		<time :datetime="core.date">{{ $filters.date(core.dateSigned) }}</time>
		<small class="ago"> ({{ $filters.timeAgo(core.dateSigned) }})</small>
		</span>
		<em class="missing-data" v-else>
		<i class="icon-block" />Non définie
		</em>
		</div>

		<div>{{ $filters.oscarText("dateNegociation") }} :
		<span v-if="core.dateNegociation">
		<time :datetime="core.date">{{ $filters.date(core.dateNegociation) }}</time>
		<small class="ago"> ({{ $filters.timeAgo(core.dateNegociation) }})</small>
		</span>
		<em class="missing-data" v-else>
		<i class="icon-block" />Non définie
		</em>
		</div>

		</div>
		<div class="col-md-6">
		<div>{{ $filters.oscarText("Création de la fiche") }} :
		<span v-if="core.dateCreated">
		<time :datetime="core.date">{{ $filters.date(core.dateCreated) }}</time>
		<small class="ago"> ({{ $filters.timeAgo(core.dateCreated) }})</small>
		</span>
		<em class="missing-data" v-else>
		<i class="icon-block" />Non définie
		</em>
		</div>
		<div>{{ $filters.oscarText("Mise à jour de la fiche") }} :
		<span v-if="core.dateUpdated">
		<time :datetime="core.date">{{ $filters.date(core.dateUpdated) }}</time>
		<small class="ago"> ({{ $filters.timeAgo(core.dateUpdated) }})</small>
		</span>
		<em class="missing-data" v-else>
		<i class="icon-block" />Non définie
		</em>
		</div>
		<div class="col-md-4">
		<div>Créé : <time :datetime="core.dateCreated">{{ $filters.dateFull(core.dateCreated) }}</time></div>
		<div>Mise à jour : <time :datetime="core.dateUpdated">{{ $filters.dateFull(core.dateUpdated) }}</time></div>
		</div>
		</div>
		...
		</div>
		<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">
		<div class="tab-pane fade" id="nav-numbers"
		:class="{'active show': uiActiveTab === 'numbers'}"
		role="tabpanel" aria-labelledby="nav-numbers-tab" tabindex="0">
		<div>N° <strong class="cartouche">{{ core.numOscar }}</strong></div>
		<div>N° financier <strong class="cartouche">{{ core.eotp }}</strong></div>
		<div>API° <strong class="cartouche">{{ core.remoteId }}</strong></div>
		@@ -871,6 +959,7 @@ axios.defaults.headers.common['Accept'] = 'application/json';
		axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

		const storage_key = 'activities_sticky';
		const ACTIVITY_TAB_ACTIVE_STOREKEY = 'activity_tab_active';

		export default {
		name: 'Activity',
		@@ -899,6 +988,8 @@ export default {
		enroleWithDate: { default: true, type: Boolean }
		},



		data() {
		return {
		administration: null,
		@@ -941,10 +1032,12 @@ export default {
		organizationsUrl: null,
		organizationsUrlNew: null,

		spents: null,

		workpackages: null,
		workpackagesUrl: null,

		spents: null,
		uiActiveTab: "history",


		activity: {},
		@@ -961,8 +1054,9 @@ export default {
		}
		},
		watch:{
		core(el){
		console.log("Core change", el);
		uiActiveTab(){
		console.log(this.uiActiveTab);
		window.localStorage.setItem(ACTIVITY_TAB_ACTIVE_STOREKEY, this.uiActiveTab);
		}
		},

		@@ -977,6 +1071,62 @@ export default {
		let eventToday = false;
		let today = (new Date()).toLocaleDateString('fr-CA');
		console.log(today);

		if( this.core ){
		if( this.core.dateStart ){
		date = this.core.dateStart.substring(0, 10);
		timeline.push({
		label: this.$filters.oscarText("dateStart"),
		date: date,
		late: false,
		status: 'step',
		type: 'step'
		})
		}
		if( this.core.dateEnd ){
		date = this.core.dateEnd.substring(0, 10);
		timeline.push({
		label: this.$filters.oscarText("dateEnd"),
		date: date,
		late: false,
		status: 'step',
		type: 'step'
		})
		}
		if( this.core.dateStart ){
		date = this.core.dateOpened.substring(0, 10);
		timeline.push({
		label: this.$filters.oscarText("dateOpened"),
		date: date,
		late: false,
		status: 'step',
		type: 'step'
		})
		}
		if( this.core.dateSigned ){
		date = this.core.dateSigned.substring(0, 10);
		timeline.push({
		label: this.$filters.oscarText("dateSigned"),
		date: date,
		late: false,
		status: 'step',
		type: 'step'
		})
		}
		if( this.core.dateNegiciation ){
		date = this.core.dateNegiciation.substring(0, 10);
		timeline.push({
		label: this.$filters.oscarText("dateNegiciation"),
		date: date,
		late: false,
		status: 'step',
		type: 'step'
		})
		}

		//
		}

		if( this.milestones ){

		this.milestones.forEach(item => {
		@@ -1308,6 +1458,9 @@ export default {
		}
		},
		mounted() {
		let activeTab = window.localStorage.getItem(ACTIVITY_TAB_ACTIVE_STOREKEY) \|\| 'history';
		console.log(activeTab);
		this.uiActiveTab = activeTab;
		this.fetch();
		let saved = localStorage.getItem(storage_key);
		if (saved) {