Filtres de date fixes (test) (595be5c5) · Commits · open-source / oscar

front/package-lock.json

+20585 −2918

File changed.

Preview size limit exceeded, changes collapsed.

front/package.json

+2 −2

Original line number	Diff line number	Diff line
		@@ -22,12 +22,12 @@
		"@vue/cli-service-global": "^4.5.15",
		"@vue/composition-api": "^1.4.3",
		"axios": "^0.21.4",
		"gulp": "^4.0.2",
		"vue-loader": "^15.9.8",
		"vue-resource": "^1.5.3",
		"vue-template-compiler": "^2.6.14"
		},
		"dependencies": {
		"vue-select": "^3.20.0"
		"vue-select": "^3.20.0",
		"@vuepic/vue-datepicker": "lasted"
		}
		}

front/src/ActivitySearchItem.vue

+17 −1

Original line number	Diff line number	Diff line
		<template>
		<article class="card" :class="'activity-item-' +activity.statutId">
		<article class="card" :class="'activity-item-' +activity.statutId" @click.shift="handlerDebug(activity)">
		<h3 class="card-title">
		<span class="picto" :class="'status-'+activity.statutId">
		<i class="icon"></i>
		@@ -32,6 +32,16 @@

		<div class="card-content">
		<div class="row metas">
		<div class="col-md-12">
		<span class="number">
		<small class="key number-label">N°OSCAR</small>
		<strong class="value number-value">{{ activity.numOscar }} </strong>
		</span>
		<span class="number">
		<small class="key number-label">PFI</small>
		<strong class="value number-value">{{ activity.PFI }} </strong>
		</span>
		</div>
		<div class="col-sm-12">
		Signature :
		<strong v-if="activity.dateSigned">{{ activity.dateSigned \| fullDate }}</strong>
		@@ -115,6 +125,12 @@ export default {
		props: {
		activity: {required: true},
		compact: {type: Boolean, default: false}
		},
		methods: {
		handlerDebug(dt){
		console.log(dt);
		this.$emit('debug', dt);
		}
		}
		}
		</script>
		No newline at end of file

front/src/ActivitySearchUi.vue

+65 −14

Original line number	Diff line number	Diff line
		@@ -6,6 +6,18 @@
		{{ error }}
		</div>
		</div>

		<div class="overlay" v-if="debug">
		<div class="overlay-content">
		<a href="#" @click="debug = ''">
		<i class="icon-bug"></i>
		Fermer</a>
		<pre>
		{{ debug }}
		</pre>
		</div>
		</div>

		<transition name="fade">
		<div class="vue-loader" v-show="loaderMsg">
		<div class="content-loader">
		@@ -20,15 +32,7 @@
		{{ title }}
		</h1>


		<hr>

		<hr>
		{{ filters_obj }}

		<form action="">


		<div class="input-group input-group-lg">
		<input placeholder="Rechercher dans l'intitulé, code PFI...…"
		class="form-control input-lg" name="q"
		@@ -37,6 +41,7 @@
		<button type="submit" class="btn btn-primary">Rechercher</button>
		</span>
		</div>

		<h3>Critères de recherche</h3>
		<div class="row">
		<div class="col-md-4">
		@@ -116,10 +121,46 @@
		<a-s-filter-select v-else-if="f.type == 'cnt'" :type="'cnt'"
		:value1="f.value1"
		:label="'Pays (d\'une organisation)'"
		:icon="'icon-flag'"
		:error="f.error"
		:options="options_pays"
		@delete="handlerDeleteFilter(f)"/>

		<select-key-value v-else-if="f.type == 'tnt'" :type="'tnt'"
		:value1="f.value1"
		:label="'Type d\'organisation'"
		:icon="'icon-tag'"
		:error="f.error"
		:options="options_organization_types"
		@delete="handlerDeleteFilter(f)"/>

		<single-date-field v-else-if="f.type == 'add'" :type="f.type"
		:moment="moment"
		:value1="f.value1"
		:value2="f.value2"
		:label="'Date de début'"
		:error="f.error"
		@delete="handlerDeleteFilter(f)"/>

		<single-date-field v-else-if="f.type == 'adf'" :type="f.type"
		:moment="moment" :error="f.error"
		:value1="f.value1" :value2="f.value2"
		:label="'Date de fin'"
		@delete="handlerDeleteFilter(f)"/>

		<single-date-field v-else-if="f.type == 'adc'" :type="f.type"
		:moment="moment" :error="f.error"
		:value1="f.value1" :value2="f.value2"
		:label="'Date de Création'"
		@delete="handlerDeleteFilter(f)"/>

		<single-date-field v-else-if="f.type == 'adm'" :type="f.type"
		:moment="moment" :error="f.error"
		:value1="f.value1" :value2="f.value2"
		:label="'Date de Mise à jour'"
		@delete="handlerDeleteFilter(f)"/>


		<div v-else class="card critera">
		non géré {{ f }}
		</div>
		@@ -135,17 +176,16 @@
		</nav>

		</form>
		<pre>{{ urlSearch }} </pre>

		<section v-if="search !== null">
		<h2 class="text-right">{{ totalResultQuery }} résultat(s)</h2>
		<transition-group name="list" tag="div">
		<activity :activity="activity" v-for="activity in activities" :key="activity.id" :compact="ui_vuecompact"/>
		<activity :activity="activity" v-for="activity in activities"
		@debug="catchDebug"
		:key="activity.id" :compact="ui_vuecompact"/>
		</transition-group>
		</section>

		<pre>{{ filters_obj }}</pre>

		</div>
		</template>
		<script>
		@@ -159,6 +199,8 @@ import vSelect from 'vue-select';
		import ASFilterPerson from "./searchfilters/ASFilterPerson";
		import ASFilterOrganization from "./searchfilters/ASFilterOrganization";
		import ASFilterSelect from "./searchfilters/ASFilterSelect";
		import SelectKeyValue from "./searchfilters/SelectKeyValue";
		import SingleDateField from "./searchfilters/SingleDateField";

		// import OscarGrowl from './OscarGrowl.vue';
		// import OscarBus from './OscarBus.js';
		@@ -180,6 +222,7 @@ export default {
		first: {required: true, typ: Boolean},
		title: {default: "Activités de recherche"},
		sortters: {required: true},
		moment: {require: true },
		filters: {required: true},
		directions: {required: true},
		direction: { default: 'desc' },
		@@ -190,6 +233,7 @@ export default {
		search: { require: false },
		selected_status: { default: [] },
		options_pays: { default: [] },
		options_organization_types: { default: [] },
		used_filters: { require: false, default: []},
		used_status: { require: false, default: []},

		@@ -204,7 +248,9 @@ export default {
		vSelect,
		OrganizationAutoCompleter,
		ASFilterPerson,
		ASFilterSelect
		ASFilterSelect,
		SelectKeyValue,
		SingleDateField
		},

		data() {
		@@ -217,7 +263,8 @@ export default {
		activities: [],
		ui_vuecompact: true,
		filters_obj: [],
		selecting_filter: ""
		selecting_filter: "",
		debug: ''
		}
		},

		@@ -245,6 +292,9 @@ export default {
		},

		methods: {
		catchDebug(arg){
		this.debug = arg;
		},

		///////////////////////////////////////////////////////////
		// Capture des interactions
		@@ -358,6 +408,7 @@ export default {

		// Filtres
		this.used_filters.forEach(filterStr => {
		console.log("Traitement du filtre ", filterStr);
		let spt = filterStr.split(';');
		let obj = {
		type: spt[0],

front/src/components/Datepicker.vue

0 → 100644

+360 −0

Original line number	Diff line number	Diff line
		<template>
		<div @mouseenter="handlerShow" @mouseleave="handlerHide">

		<div class="input-group">
		<input type="text" class="form-control" v-model="renderValue"/>
		<div class="input-group-addon">
		<i class="icon-calendar"></i>
		</div>
		</div>

		<div class="datepicker-selector" @mouseleave="handlerHide" v-show="picker">
		<div class="datepicker-wrapper">
		<header>
		<nav>
		<span href="#" @click.stop.prevent="pickerPrevMonth">
		<i class="icon-angle-left"></i></span>
		<strong class="heading">
		<span class="currentMonth" @click.stop="handlerPickerMonth">{{ currentMonth }}</span>
		<span class="currentYear" @click.stop="handlerPickerYear">{{ currentYear }}</span>
		</strong>
		<span href="#" @click.stop="pickerNextMonth">
		<i class="icon-angle-right"></i></span>
		</nav>
		<div class="day-labels week" v-if="pickerMode == 'day'">
		<span class="week-label"> </span>
		<span class="day-label" v-for="d in pickerData.dayslabels">{{ d }}</span>
		</div>
		</header>

		<section v-if="pickerMode == 'day'">
		<div class="weeks" v-for="week in pickerData.weeks">
		<span class="week">
		<span class="week-label">{{ week.num }}</span>
		<span class="week-day" v-for="d in week.days" :class="{ active: d.active, disabled: !d.enabled }"
		@click.prevent.stop="changeDate(d.date)">
		{{ d.day }}
		</span>
		</span>
		</div>
		</section>

		<section v-if="pickerMode == 'month'" class="months">
		<span class="month" @click.prevent.stop="handlerSelectMonth(month)"
		v-for="month in months"
		:class="{ active: pickerMonthRef == month }">
		{{ month }}
		</span>
		</section>

		<section v-if="pickerMode == 'year'" class="years">
		<span class="year"
		@click.prevent.stop="pickerYearRef -= 22"><<</span>
		<span class="year"
		@click.prevent.stop="handlerSelectYear(year)"
		v-for="year in years"
		:class="{ active: pickerYearRef == year }">
		{{ year }}
		</span>
		<span class="year" @click.prevent.stop="pickerYearRef += 22">>></span>
		</section>
		</div>
		<div style="text-align: center; cursor: pointer" @click="handlerClear">
		<i class="icon-cancel-alt"></i>
		Supprimer la date
		</div>
		</div>
		</div>

		</template>

		<script>
		export default {
		// Configuration
		model: {
		prop: 'value',
		event: 'input'
		},
		props: {
		moment: {
		required: true
		},

		// Valeur par défaut
		value: {
		default: null
		},

		// Deprecated
		i18n: {
		default: "fr"
		},

		limitFrom: {
		default: null
		},

		// Liste des jours utilisés dans l'UI
		daysShort: {
		default: () => ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
		},

		// Liste des mois utilisés dans l'UI
		months: {
		default: () => ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
		},

		// Format utilisé pour la valeur
		valueFormat: {
		default: 'YYYY-MM-DD'
		},

		// Format d'affichage
		displayFormat: {
		default: 'D MMMM YYYY'
		},

		// Format utilisé pour l'affichage
		format: {
		default: 'dddd D MMMM YYYY'
		}
		},

		data() {
		return {
		picker: false,
		pickerMode: 'day',
		pickerDayRef: this.moment().format(),
		pickerYearRef: this.moment().format('YYYY'),
		pickerMonthRef: this.moment().month(),
		realValue: this.value,
		manualChange: ""
		}
		},

		computed: {

		// Liste des années affichées dans le datepicker
		years() {
		let from = this.pickerYearRef - 11;
		let to = this.pickerYearRef + 11;
		let years = [];
		for (var i = from; i < to; i++) {
		years.push(i);
		}
		return years;
		},

		/**
		* Retourne la valeur active sous la forme d'un objet Moment.
		*/
		mmValue() {
		if (this.realValue)
		return this.moment(this.realValue);
		else
		return this.moment();
		},

		/**
		* Retourne les données utilisées pour afficher le selecteur de date en mode JOUR du MOIS.
		*/
		pickerData() {
		this.moment.locale(this.i18n);

		// Make list of days
		var days = this.daysShort;

		var realValueFormatted = this.moment(this.realValue).format(this.valueFormat);
		// Début du mois
		let weekStart = this.moment(this.pickerDayRef).startOf('month').startOf('isoWeek');
		let weekEnd = this.moment(this.pickerDayRef).endOf('month').startOf('isoWeek');

		let datas = []
		for (; weekStart.unix() <= weekEnd.unix();) {
		let week = {
		num: weekStart.week(),
		days: []
		}
		for (let d = 1; d <= 7; d++) {
		let enabled = !this.limitFrom \|\| (this.limitFrom && this.limitFrom < weekStart.format());
		week.days.push({
		enabled,
		date: weekStart.format(),
		active: weekStart.format(this.valueFormat) == realValueFormatted,
		day: weekStart.format('D')
		});
		weekStart.add(1, 'day');
		}
		datas.push(week);
		}
		return {
		dayslabels: days,
		weeks: datas
		}
		},

		currentMonth() {
		return this.moment(this.pickerDayRef).format('MMMM');
		},

		/**
		* Retourne l'année courante.
		*
		* @returns {string}
		*/
		currentYear() {
		return this.moment(this.pickerDayRef).format('YYYY');
		},

		/**
		* Rendu de la date en utilisant de format 'humain'
		* @returns {*}
		*/
		renderDate() {
		if (this.realValue == null) {
		return ""
		}
		else {
		return this.moment(this.realValue).format(this.format)
		}
		},

		/**
		* Rendu de la valeur courante en utilisant le format.
		*
		* @returns {string}
		*/
		renderValue: {
		get() {
		return !this.realValue ? '' : this.mmValue.format(this.displayFormat);
		},
		set( text ){
		console.log('convert ', text);
		try {
		let v = this.moment(text, this.displayFormat);
		if( v.isValid() )
		this.changeDate(v.format(this.valueFormat));
		}catch (e) {
		return;
		}
		}
		}
		},

		////////////////////////////////////////////////////////////////////: METHODES
		methods: {
		/////////////////////////////////////////////////////////////////// HANDLERS
		handlerClear(){
		console.log(this.realValue);
		this.changeDate(null);
		},

		handlerInputChange(e){

		try {
		var v = this.moment(e.target.value);
		this.changeDate(v.format(this.valueFormat));
		} catch (e) {
		console.error("WTF DATE", e);
		}

		},

		/**
		* Déclenché quand un mois un selectionné.
		*
		* @param month
		*/
		handlerSelectMonth(month) {
		let monthIndex = this.months.indexOf(month);
		this.pickerDayRef = this.moment(this.pickerDayRef).month(monthIndex).format();
		this.pickerMode = 'day';
		},

		/**
		* Déclanché quand une année est selectionnée.
		*
		* @param year
		*/
		handlerSelectYear(year) {
		this.pickerDayRef = this.moment(this.pickerDayRef).year(year).format();
		this.pickerMode = 'day';
		},

		/**
		* Méthode à utiliser pour modifier la date saisie.
		*/
		changeDate(date) {
		console.log("Modification de la date", date);
		this.picker = false;
		this.realValue = date ? this.moment(date).format(this.valueFormat) : '';
		this.$emit('input', this.realValue);
		this.$emit('change', this.realValue);
		this.handlerHide();
		},

		/**
		* Déclenché lors d'un défilement vers le mois suivant
		*/
		pickerNextMonth() {
		this.pickerDayRef = this.moment(this.pickerDayRef).add(1, 'month').format();
		},

		/**
		* Déclenché lors d'un défilement vers le mois précédent
		*/
		pickerPrevMonth() {
		this.pickerDayRef = this.moment(this.pickerDayRef).subtract(1, 'month').format();
		},

		/**
		* Affichage du selecteur de mois.
		*/
		handlerPickerMonth(e) {
		e.preventDefault();
		e.stopImmediatePropagation();
		e.stopPropagation();
		this.pickerMode = 'month';
		},

		/**
		* Affichage du selecteur d'année.
		*/
		handlerPickerYear() {
		this.pickerMode = 'year';
		},

		handlerShow() {

		this.initPickerVar();
		this.picker = true;
		this.watchOut();
		},

		watchOut() {
		// console.log(document.querySelector('body'));
		//window.addEventListener('mouseup', this.handlerHide);
		},

		handlerHide(event) {
		//window.removeEventListener('mouseup', this.handlerHide);
		this.picker = false;
		},

		/**
		* Initialisation des données pour l'affichage du picker.
		*/
		initPickerVar() {
		var ref = this.moment(this.pickerDayRef ? this.pickerDayRef : moment());
		this.pickerYearRef = ref.year();
		this.pickerMonthRef = ref.format('MMMM');
		}
		},

		created() {
		this.moment.locale(this.i18n);
		this.pickerDayRef = this.value ? this.value : this.moment().format();
		this.initPickerVar();
		}
		}
		</script>
		No newline at end of file