Planning et agenda: nouveau flux de création et formulaires de demande
This commit is contained in:
nyavokevin
parent
a9a2429b67
commit
083f78673e
File diff suppressed because it is too large
Load Diff
@ -3,80 +3,113 @@
|
||||
<h6 class="mb-3 text-dark font-weight-bold">Informations du Défunt</h6>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<div class="btn-group" role="group">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="deceasedMode"
|
||||
id="modeNew"
|
||||
autocomplete="off"
|
||||
:checked="!formData.is_existing"
|
||||
@change="formData.is_existing = false; formData.id = null"
|
||||
>
|
||||
<label class="btn btn-outline-primary" for="modeNew">Nouveau Défunt</label>
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<div class="btn-group" role="group">
|
||||
<input
|
||||
id="modeNew"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="deceasedMode"
|
||||
autocomplete="off"
|
||||
:checked="!formData.is_existing"
|
||||
@change="
|
||||
formData.is_existing = false;
|
||||
formData.id = null;
|
||||
"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="modeNew"
|
||||
>Nouveau Défunt</label
|
||||
>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="deceasedMode"
|
||||
id="modeSearch"
|
||||
autocomplete="off"
|
||||
:checked="formData.is_existing"
|
||||
@change="formData.is_existing = true"
|
||||
>
|
||||
<label class="btn btn-outline-primary" for="modeSearch">Rechercher</label>
|
||||
</div>
|
||||
<input
|
||||
id="modeSearch"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="deceasedMode"
|
||||
autocomplete="off"
|
||||
:checked="formData.is_existing"
|
||||
@change="formData.is_existing = true"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="modeSearch"
|
||||
>Rechercher</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SEARCH MODE -->
|
||||
<div v-if="formData.is_existing" class="row">
|
||||
<div class="col-12 mb-3 position-relative">
|
||||
<label class="form-label">Rechercher un défunt (Nom, Prénom)</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': hasError('deceased_id') }"
|
||||
placeholder="Tapez pour rechercher..."
|
||||
@input="handleSearchInput"
|
||||
/>
|
||||
<button v-if="formData.id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="getFieldError('deceased_id')" class="invalid-feedback d-block">
|
||||
{{ getFieldError("deceased_id") }}
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Results -->
|
||||
<div v-if="showResults && searchResults.length" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
|
||||
<button
|
||||
v-for="deceased in searchResults"
|
||||
:key="deceased.id"
|
||||
type="button"
|
||||
class="list-group-item list-group-item-action"
|
||||
@click="selectDeceased(deceased)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">{{ deceased.first_name }} {{ deceased.last_name }}</h6>
|
||||
<small>{{ deceased.birth_date }} - {{ deceased.death_date }}</small>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="showResults && searchResults.length === 0 && searchQuery.length >= 2 && !isSearching" class="list-group position-absolute w-100 shadow" style="z-index: 1000;">
|
||||
<div class="list-group-item text-muted">Aucun résultat trouvé.</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 position-relative">
|
||||
<label class="form-label">Rechercher un défunt (Nom, Prénom)</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': hasError('deceased_id') }"
|
||||
placeholder="Tapez pour rechercher..."
|
||||
@input="handleSearchInput"
|
||||
/>
|
||||
<button
|
||||
v-if="formData.id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.id" class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<strong>Défunt sélectionné:</strong> {{ formData.first_name }} {{ formData.last_name }}
|
||||
</div>
|
||||
<div
|
||||
v-if="getFieldError('deceased_id')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("deceased_id") }}
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Results -->
|
||||
<div
|
||||
v-if="showResults && searchResults.length"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000; max-height: 200px; overflow-y: auto"
|
||||
>
|
||||
<button
|
||||
v-for="deceased in searchResults"
|
||||
:key="deceased.id"
|
||||
type="button"
|
||||
class="list-group-item list-group-item-action"
|
||||
@click="selectDeceased(deceased)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">
|
||||
{{ deceased.first_name }} {{ deceased.last_name }}
|
||||
</h6>
|
||||
<small
|
||||
>{{ deceased.birth_date }} - {{ deceased.death_date }}</small
|
||||
>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
showResults &&
|
||||
searchResults.length === 0 &&
|
||||
searchQuery.length >= 2 &&
|
||||
!isSearching
|
||||
"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000"
|
||||
>
|
||||
<div class="list-group-item text-muted">Aucun résultat trouvé.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.id" class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<strong>Défunt sélectionné:</strong> {{ formData.first_name }}
|
||||
{{ formData.last_name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CREATE MODE -->
|
||||
@ -230,7 +263,7 @@ const showResults = ref(false);
|
||||
let searchTimeout;
|
||||
const handleSearchInput = () => {
|
||||
if (searchTimeout) clearTimeout(searchTimeout);
|
||||
|
||||
|
||||
if (searchQuery.value.length < 2) {
|
||||
searchResults.value = [];
|
||||
showResults.value = false;
|
||||
@ -260,9 +293,9 @@ const selectDeceased = (deceased) => {
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
props.formData.id = null;
|
||||
searchQuery.value = "";
|
||||
searchResults.value = [];
|
||||
props.formData.id = null;
|
||||
searchQuery.value = "";
|
||||
searchResults.value = [];
|
||||
};
|
||||
|
||||
// Error helpers using props
|
||||
|
||||
@ -3,82 +3,113 @@
|
||||
<h6 class="mb-3 text-dark font-weight-bold">Lieu de l'intervention</h6>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<div class="btn-group" role="group">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="locationMode"
|
||||
id="locModeNew"
|
||||
autocomplete="off"
|
||||
:checked="!formData.is_existing"
|
||||
@change="formData.is_existing = false; formData.id = null"
|
||||
>
|
||||
<label class="btn btn-outline-primary" for="locModeNew">Nouveau Lieu</label>
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<div class="btn-group" role="group">
|
||||
<input
|
||||
id="locModeNew"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="locationMode"
|
||||
autocomplete="off"
|
||||
:checked="!formData.is_existing"
|
||||
@change="
|
||||
formData.is_existing = false;
|
||||
formData.id = null;
|
||||
"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="locModeNew"
|
||||
>Nouveau Lieu</label
|
||||
>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="locationMode"
|
||||
id="locModeSearch"
|
||||
autocomplete="off"
|
||||
:checked="formData.is_existing"
|
||||
@change="formData.is_existing = true"
|
||||
>
|
||||
<label class="btn btn-outline-primary" for="locModeSearch">Rechercher</label>
|
||||
</div>
|
||||
<input
|
||||
id="locModeSearch"
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="locationMode"
|
||||
autocomplete="off"
|
||||
:checked="formData.is_existing"
|
||||
@change="formData.is_existing = true"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" for="locModeSearch"
|
||||
>Rechercher</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SEARCH MODE -->
|
||||
<div v-if="formData.is_existing" class="row">
|
||||
<div class="col-12 mb-3 position-relative">
|
||||
<label class="form-label">Rechercher un lieu (Nom, Ville...)</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': hasError('location_id') }"
|
||||
placeholder="Hôpital, Funérarium, Ville..."
|
||||
@input="handleSearchInput"
|
||||
/>
|
||||
<button v-if="formData.id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="getFieldError('location_id')" class="invalid-feedback d-block">
|
||||
{{ getFieldError("location_id") }}
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Results -->
|
||||
<div v-if="showResults && searchResults.length" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
|
||||
<button
|
||||
v-for="loc in searchResults"
|
||||
:key="loc.id"
|
||||
type="button"
|
||||
class="list-group-item list-group-item-action"
|
||||
@click="selectLocation(loc)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">{{ loc.name || 'Lieu sans nom' }}</h6>
|
||||
<small>{{ loc.city }}</small>
|
||||
</div>
|
||||
<small class="text-muted">{{ loc.address_line1 }}</small>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="showResults && searchResults.length === 0 && searchQuery.length >= 2 && !isSearching" class="list-group position-absolute w-100 shadow" style="z-index: 1000;">
|
||||
<div class="list-group-item text-muted">Aucun résultat trouvé.</div>
|
||||
</div>
|
||||
<div class="col-12 mb-3 position-relative">
|
||||
<label class="form-label">Rechercher un lieu (Nom, Ville...)</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': hasError('location_id') }"
|
||||
placeholder="Hôpital, Funérarium, Ville..."
|
||||
@input="handleSearchInput"
|
||||
/>
|
||||
<button
|
||||
v-if="formData.id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="getFieldError('location_id')"
|
||||
class="invalid-feedback d-block"
|
||||
>
|
||||
{{ getFieldError("location_id") }}
|
||||
</div>
|
||||
|
||||
<div v-if="formData.id" class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<strong>Lieu sélectionné:</strong> {{ formData.name }} <br/>
|
||||
<small>{{ formData.address }}, {{ formData.postal_code }} {{ formData.city }}</small>
|
||||
<!-- Dropdown Results -->
|
||||
<div
|
||||
v-if="showResults && searchResults.length"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000; max-height: 200px; overflow-y: auto"
|
||||
>
|
||||
<button
|
||||
v-for="loc in searchResults"
|
||||
:key="loc.id"
|
||||
type="button"
|
||||
class="list-group-item list-group-item-action"
|
||||
@click="selectLocation(loc)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">{{ loc.name || "Lieu sans nom" }}</h6>
|
||||
<small>{{ loc.city }}</small>
|
||||
</div>
|
||||
<small class="text-muted">{{ loc.address_line1 }}</small>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
showResults &&
|
||||
searchResults.length === 0 &&
|
||||
searchQuery.length >= 2 &&
|
||||
!isSearching
|
||||
"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000"
|
||||
>
|
||||
<div class="list-group-item text-muted">Aucun résultat trouvé.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formData.id" class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<strong>Lieu sélectionné:</strong> {{ formData.name }} <br />
|
||||
<small
|
||||
>{{ formData.address }}, {{ formData.postal_code }}
|
||||
{{ formData.city }}</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CREATE MODE -->
|
||||
@ -233,54 +264,53 @@ const showResults = ref(false);
|
||||
// Debounce search
|
||||
let searchTimeout;
|
||||
const handleSearchInput = () => {
|
||||
if (searchTimeout) clearTimeout(searchTimeout);
|
||||
if (searchTimeout) clearTimeout(searchTimeout);
|
||||
|
||||
if (searchQuery.value.length < 2) {
|
||||
searchResults.value = [];
|
||||
showResults.value = false;
|
||||
return;
|
||||
if (searchQuery.value.length < 2) {
|
||||
searchResults.value = [];
|
||||
showResults.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
isSearching.value = true;
|
||||
searchTimeout = setTimeout(async () => {
|
||||
try {
|
||||
// Use getAllClientLocations with search param
|
||||
const response = await ClientLocationService.getAllClientLocations({
|
||||
search: searchQuery.value,
|
||||
per_page: 10,
|
||||
});
|
||||
searchResults.value = response.data;
|
||||
showResults.value = true;
|
||||
} catch (e) {
|
||||
console.error("Location search failed", e);
|
||||
} finally {
|
||||
isSearching.value = false;
|
||||
}
|
||||
|
||||
isSearching.value = true;
|
||||
searchTimeout = setTimeout(async () => {
|
||||
try {
|
||||
// Use getAllClientLocations with search param
|
||||
const response = await ClientLocationService.getAllClientLocations({
|
||||
search: searchQuery.value,
|
||||
per_page: 10
|
||||
});
|
||||
searchResults.value = response.data;
|
||||
showResults.value = true;
|
||||
} catch (e) {
|
||||
console.error("Location search failed", e);
|
||||
} finally {
|
||||
isSearching.value = false;
|
||||
}
|
||||
}, 300);
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const selectLocation = (location) => {
|
||||
props.formData.id = location.id;
|
||||
props.formData.name = location.name;
|
||||
props.formData.address = location.address_line1; // Map address_line1 to address
|
||||
props.formData.city = location.city;
|
||||
props.formData.postal_code = location.postal_code;
|
||||
props.formData.country_code = location.country_code;
|
||||
|
||||
// Construct display string
|
||||
let display = location.name || "";
|
||||
if (location.city) display += ` (${location.city})`;
|
||||
searchQuery.value = display;
|
||||
showResults.value = false;
|
||||
props.formData.id = location.id;
|
||||
props.formData.name = location.name;
|
||||
props.formData.address = location.address_line1; // Map address_line1 to address
|
||||
props.formData.city = location.city;
|
||||
props.formData.postal_code = location.postal_code;
|
||||
props.formData.country_code = location.country_code;
|
||||
|
||||
// Construct display string
|
||||
let display = location.name || "";
|
||||
if (location.city) display += ` (${location.city})`;
|
||||
searchQuery.value = display;
|
||||
showResults.value = false;
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
props.formData.id = null;
|
||||
searchQuery.value = "";
|
||||
searchResults.value = [];
|
||||
props.formData.id = null;
|
||||
searchQuery.value = "";
|
||||
searchResults.value = [];
|
||||
};
|
||||
|
||||
|
||||
const getFieldError = (field) => {
|
||||
const error = props.errors.find((err) => err.field === field);
|
||||
return error ? error.message : "";
|
||||
|
||||
@ -6,21 +6,26 @@
|
||||
<div class="col-md-12 mb-3 position-relative">
|
||||
<label class="form-label">Type de soins</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': hasError('product_id') }"
|
||||
placeholder="Rechercher un soin..."
|
||||
@input="handleSearchInput"
|
||||
@focus="showResults = true"
|
||||
/>
|
||||
<button v-if="formData.product_id" class="btn btn-outline-secondary" type="button" @click="clearSelection">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="form-control"
|
||||
:class="{ 'is-invalid': hasError('product_id') }"
|
||||
placeholder="Rechercher un soin..."
|
||||
@input="handleSearchInput"
|
||||
@focus="showResults = true"
|
||||
/>
|
||||
<button
|
||||
v-if="formData.product_id"
|
||||
class="btn btn-outline-secondary"
|
||||
type="button"
|
||||
@click="clearSelection"
|
||||
>
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
v-if="getFieldError('product_id')"
|
||||
class="invalid-feedback d-block"
|
||||
@ -29,32 +34,46 @@
|
||||
</div>
|
||||
|
||||
<!-- Dropdown Results -->
|
||||
<div v-if="showResults" class="list-group position-absolute w-100 shadow" style="z-index: 1000; max-height: 250px; overflow-y: auto;">
|
||||
<div v-if="loading" class="list-group-item text-center">
|
||||
<div class="spinner-border spinner-border-sm text-primary" role="status"></div>
|
||||
<div
|
||||
v-if="showResults"
|
||||
class="list-group position-absolute w-100 shadow"
|
||||
style="z-index: 1000; max-height: 250px; overflow-y: auto"
|
||||
>
|
||||
<div v-if="loading" class="list-group-item text-center">
|
||||
<div
|
||||
class="spinner-border spinner-border-sm text-primary"
|
||||
role="status"
|
||||
></div>
|
||||
</div>
|
||||
<button
|
||||
v-for="product in searchResults"
|
||||
v-else
|
||||
:key="product.id"
|
||||
type="button"
|
||||
class="list-group-item list-group-item-action"
|
||||
@click="selectProduct(product)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">{{ product.nom }}</h6>
|
||||
<small>{{ product.reference }}</small>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
v-for="product in searchResults"
|
||||
:key="product.id"
|
||||
type="button"
|
||||
class="list-group-item list-group-item-action"
|
||||
@click="selectProduct(product)"
|
||||
>
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">{{ product.nom }}</h6>
|
||||
<small>{{ product.reference }}</small>
|
||||
</div>
|
||||
<small class="text-muted">{{ product.description }}</small>
|
||||
</button>
|
||||
<div v-if="!loading && searchResults.length === 0" class="list-group-item text-muted">Aucun résultat trouvé.</div>
|
||||
<small class="text-muted">{{ product.description }}</small>
|
||||
</button>
|
||||
<div
|
||||
v-if="!loading && searchResults.length === 0"
|
||||
class="list-group-item text-muted"
|
||||
>
|
||||
Aucun résultat trouvé.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selected Product Display -->
|
||||
<div v-if="formData.product_id && selectedProductDisplay" class="alert alert-info mt-3">
|
||||
<strong>Soin sélectionné:</strong> {{ selectedProductDisplay }}
|
||||
<div
|
||||
v-if="formData.product_id && selectedProductDisplay"
|
||||
class="alert alert-info mt-3"
|
||||
>
|
||||
<strong>Soin sélectionné:</strong> {{ selectedProductDisplay }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -113,11 +132,11 @@ defineEmits(["next", "prev"]);
|
||||
|
||||
const productService = new ProductService();
|
||||
const instanceService = new ProductService(); // Fix instantiation if needed or use static
|
||||
// Actually services are usually exported as objects or classes.
|
||||
// Actually services are usually exported as objects or classes.
|
||||
// Looking at product.ts content: 'class ProductService' and 'export default ProductService' at end but usually instantiated?
|
||||
// The file has 'class ProductService' but also looks like it might be designed to be used as new ProductService().
|
||||
// Wait, looking at `product.ts` again:
|
||||
// `export default ProductService;` and it's a class.
|
||||
// `export default ProductService;` and it's a class.
|
||||
// So `new ProductService()` is correct.
|
||||
|
||||
// Search state
|
||||
@ -129,16 +148,17 @@ const selectedProductDisplay = ref("");
|
||||
const loading = ref(false);
|
||||
|
||||
const filterProducts = () => {
|
||||
if (!searchQuery.value) {
|
||||
searchResults.value = allProducts.value;
|
||||
return;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
searchResults.value = allProducts.value.filter(p =>
|
||||
p.nom.toLowerCase().includes(query) ||
|
||||
(p.reference && p.reference.toLowerCase().includes(query)) ||
|
||||
(p.description && p.description.toLowerCase().includes(query))
|
||||
);
|
||||
if (!searchQuery.value) {
|
||||
searchResults.value = allProducts.value;
|
||||
return;
|
||||
}
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
searchResults.value = allProducts.value.filter(
|
||||
(p) =>
|
||||
p.nom.toLowerCase().includes(query) ||
|
||||
(p.reference && p.reference.toLowerCase().includes(query)) ||
|
||||
(p.description && p.description.toLowerCase().includes(query))
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
@ -147,17 +167,17 @@ onMounted(async () => {
|
||||
const service = new ProductService();
|
||||
// Fetch all intervention products (using existing logic or new method if needed)
|
||||
// Assuming getProductsByCategory or getAllProducts with filter works.
|
||||
// The previous code used productStore.fetchProducts({ is_intervention: true }).
|
||||
// ProductService has getAllProducts but doesn't seem to explicitly have is_intervention param in interface,
|
||||
// but the store might have passed it.
|
||||
// The previous code used productStore.fetchProducts({ is_intervention: true }).
|
||||
// ProductService has getAllProducts but doesn't seem to explicitly have is_intervention param in interface,
|
||||
// but the store might have passed it.
|
||||
// Let's check ProductService.getAllProducts code in product.ts.
|
||||
// It takes params object. We can pass 'is_intervention': true/1 if backend supports it.
|
||||
// Based on previous code, it seems supported.
|
||||
const response = await service.getAllProducts({
|
||||
per_page: 100, // Fetch enough
|
||||
is_intervention: true // Assuming backend handles this param as before
|
||||
per_page: 100, // Fetch enough
|
||||
is_intervention: true, // Assuming backend handles this param as before
|
||||
});
|
||||
|
||||
|
||||
// Check response structure. product.ts says ProductListResponse { data: Product[] ... }
|
||||
allProducts.value = response.data;
|
||||
searchResults.value = allProducts.value;
|
||||
@ -169,22 +189,22 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
const handleSearchInput = () => {
|
||||
showResults.value = true;
|
||||
filterProducts();
|
||||
showResults.value = true;
|
||||
filterProducts();
|
||||
};
|
||||
|
||||
const selectProduct = (product) => {
|
||||
props.formData.product_id = product.id;
|
||||
selectedProductDisplay.value = product.nom;
|
||||
searchQuery.value = product.nom;
|
||||
showResults.value = false;
|
||||
props.formData.product_id = product.id;
|
||||
selectedProductDisplay.value = product.nom;
|
||||
searchQuery.value = product.nom;
|
||||
showResults.value = false;
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
props.formData.product_id = null;
|
||||
selectedProductDisplay.value = "";
|
||||
searchQuery.value = "";
|
||||
searchResults.value = [];
|
||||
props.formData.product_id = null;
|
||||
selectedProductDisplay.value = "";
|
||||
searchQuery.value = "";
|
||||
searchResults.value = [];
|
||||
};
|
||||
|
||||
const getFieldError = (field) => {
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="modal fade"
|
||||
:class="{ show: show, 'd-block': show }"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-labelledby="planningNewRequestModalLabel"
|
||||
:aria-hidden="!show"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 id="planningNewRequestModalLabel" class="modal-title">Nouvelle demande</h5>
|
||||
<button type="button" class="btn-close" aria-label="Close" @click="$emit('close')"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<p v-if="!creationType" class="text-sm text-muted mb-3">Choisissez le type à créer :</p>
|
||||
<p v-else class="text-sm text-muted mb-3">{{ creationTypeTitle }}</p>
|
||||
|
||||
<planning-creation-type-selector
|
||||
v-if="!creationType"
|
||||
@select-type="$emit('select-type', $event)"
|
||||
/>
|
||||
|
||||
<planning-leave-request-form
|
||||
v-else-if="creationType === 'leave'"
|
||||
:form="leaveForm"
|
||||
:collaborators="collaborators"
|
||||
@update:form="$emit('update:leave-form', $event)"
|
||||
@submit="$emit('submit-leave')"
|
||||
@back="$emit('reset-type')"
|
||||
/>
|
||||
|
||||
<planning-event-form
|
||||
v-else-if="creationType === 'event'"
|
||||
:form="eventForm"
|
||||
@update:form="$emit('update:event-form', $event)"
|
||||
@submit="$emit('submit-event')"
|
||||
@back="$emit('reset-type')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="show" class="modal-backdrop fade show" @click="$emit('close')"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PlanningCreationTypeSelector from "@/components/molecules/Planning/PlanningCreationTypeSelector.vue";
|
||||
import PlanningLeaveRequestForm from "@/components/molecules/Planning/PlanningLeaveRequestForm.vue";
|
||||
import PlanningEventForm from "@/components/molecules/Planning/PlanningEventForm.vue";
|
||||
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
|
||||
defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
creationType: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
creationTypeTitle: {
|
||||
type: String,
|
||||
default: "Nouvelle demande",
|
||||
},
|
||||
collaborators: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
leaveForm: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
eventForm: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits([
|
||||
"close",
|
||||
"select-type",
|
||||
"reset-type",
|
||||
"submit-leave",
|
||||
"submit-event",
|
||||
"update:leave-form",
|
||||
"update:event-form",
|
||||
]);
|
||||
</script>
|
||||
|
||||
@ -1,31 +1,41 @@
|
||||
<template>
|
||||
<planning-template>
|
||||
<template #header>
|
||||
<div class="d-flex flex-column gap-3">
|
||||
<div>
|
||||
<h1 class="display-4 font-bold bg-gradient-indigo-text mb-1">Planning</h1>
|
||||
<p class="text-sm text-secondary">{{ interventionCount }} intervention(s) (mes tâches)</p>
|
||||
</div>
|
||||
<!-- Date Navigator Mobile Position could go here if needed, but keeping simple for now -->
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<p class="text-sm text-secondary mb-0">
|
||||
{{ interventionCount }} intervention(s) (mes tâches)
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex flex-column flex-md-row gap-3 w-100 w-md-auto align-items-center">
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row gap-2 w-100 w-md-auto align-items-center justify-content-md-end"
|
||||
>
|
||||
<!-- Date Navigator -->
|
||||
<planning-date-navigator
|
||||
<planning-date-navigator
|
||||
:current-date="currentDate"
|
||||
@prev-week="$emit('prev-week')"
|
||||
@next-week="$emit('next-week')"
|
||||
/>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<planning-action-button variant="secondary" size="sm" @click="$emit('refresh')">
|
||||
<template #icon><i class="fas fa-sync-alt"></i></template>
|
||||
|
||||
<div class="d-flex gap-2 flex-wrap justify-content-end">
|
||||
<soft-button
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="$emit('refresh')"
|
||||
>
|
||||
<i class="fas fa-sync-alt me-1"></i>
|
||||
<span class="d-none d-lg-inline">Actualiser</span>
|
||||
</planning-action-button>
|
||||
<planning-action-button variant="primary" size="sm" @click="$emit('new-request')">
|
||||
<template #icon><i class="fas fa-plus"></i></template>
|
||||
</soft-button>
|
||||
<soft-button
|
||||
color="info"
|
||||
variant="gradient"
|
||||
size="sm"
|
||||
@click="$emit('new-request')"
|
||||
>
|
||||
<i class="fas fa-plus me-1"></i>
|
||||
<span class="d-none d-lg-inline">Nouvelle demande</span>
|
||||
<span class="d-lg-none">Nouveau</span>
|
||||
</planning-action-button>
|
||||
</soft-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -48,22 +58,22 @@
|
||||
|
||||
<template #calendar-grid>
|
||||
<!-- Grille View -->
|
||||
<planning-week-grid
|
||||
<planning-week-grid
|
||||
v-if="localActiveView === 'grille'"
|
||||
:start-date="currentDate"
|
||||
:start-date="currentDate"
|
||||
:interventions="interventions"
|
||||
@cell-click="handleCellClick"
|
||||
/>
|
||||
|
||||
|
||||
<!-- List View -->
|
||||
<planning-list
|
||||
<planning-list
|
||||
v-if="localActiveView === 'liste'"
|
||||
:interventions="interventions"
|
||||
@edit="handleEdit"
|
||||
/>
|
||||
|
||||
|
||||
<!-- Kanban View -->
|
||||
<planning-kanban
|
||||
<planning-kanban
|
||||
v-if="localActiveView === 'kanban'"
|
||||
:interventions="interventions"
|
||||
@edit="handleEdit"
|
||||
@ -76,7 +86,6 @@
|
||||
<script setup>
|
||||
import { ref, watch, defineProps, defineEmits } from "vue";
|
||||
import PlanningTemplate from "@/components/templates/Planning/PlanningTemplate.vue";
|
||||
import PlanningActionButton from "@/components/atoms/Planning/PlanningActionButton.vue";
|
||||
import PlanningViewToggles from "@/components/molecules/Planning/PlanningViewToggles.vue";
|
||||
import PlanningLegend from "@/components/molecules/Planning/PlanningLegend.vue";
|
||||
import PlanningCollaboratorsSidebar from "@/components/molecules/Planning/PlanningCollaboratorsSidebar.vue";
|
||||
@ -84,50 +93,57 @@ import PlanningWeekGrid from "@/components/molecules/Planning/PlanningWeekGrid.v
|
||||
import PlanningList from "@/components/molecules/Planning/PlanningList.vue";
|
||||
import PlanningKanban from "@/components/molecules/Planning/PlanningKanban.vue";
|
||||
import PlanningDateNavigator from "@/components/molecules/Planning/PlanningDateNavigator.vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
|
||||
const props = defineProps({
|
||||
interventionCount: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
collaborators: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
currentDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
default: () => new Date(),
|
||||
},
|
||||
activeView: {
|
||||
type: String,
|
||||
default: "grille"
|
||||
}
|
||||
default: "grille",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
"refresh",
|
||||
"new-request",
|
||||
"cell-click",
|
||||
"update:activeView",
|
||||
"prev-week",
|
||||
"refresh",
|
||||
"new-request",
|
||||
"cell-click",
|
||||
"update:activeView",
|
||||
"prev-week",
|
||||
"next-week",
|
||||
"edit-intervention",
|
||||
"update-status"
|
||||
"update-status",
|
||||
]);
|
||||
|
||||
const localActiveView = ref(props.activeView);
|
||||
|
||||
watch(() => props.activeView, (newVal) => {
|
||||
localActiveView.value = newVal;
|
||||
});
|
||||
watch(
|
||||
() => props.activeView,
|
||||
(newVal) => {
|
||||
localActiveView.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => localActiveView.value, (newVal) => {
|
||||
emit("update:activeView", newVal);
|
||||
});
|
||||
watch(
|
||||
() => localActiveView.value,
|
||||
(newVal) => {
|
||||
emit("update:activeView", newVal);
|
||||
}
|
||||
);
|
||||
|
||||
const handleCellClick = (info) => {
|
||||
emit("cell-click", info);
|
||||
@ -143,28 +159,6 @@ const handleUpdateStatus = (payload) => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bg-gradient-indigo-text {
|
||||
background: linear-gradient(to right, #2563eb, #4f46e5, #9333ea);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.display-4 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.display-4 {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
class="btn d-inline-flex align-items-center justify-content-center gap-2 border-0 shadow-sm transition-all"
|
||||
:class="[
|
||||
variant === 'primary' ? 'btn-primary-gradient' : 'btn-outline-indigo',
|
||||
size === 'sm' ? 'btn-sm py-1 px-3' : 'py-2 px-4'
|
||||
size === 'sm' ? 'btn-sm py-1 px-3' : 'py-2 px-4',
|
||||
]"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
@ -20,16 +20,16 @@ import { defineProps, defineEmits } from "vue";
|
||||
defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
default: "secondary" // primary or secondary
|
||||
default: "secondary", // primary or secondary
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: "md"
|
||||
default: "md",
|
||||
},
|
||||
hideTextOnMobile: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["click"]);
|
||||
|
||||
@ -13,7 +13,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 card-body">
|
||||
<div ref="calendarEl" :id="calendarId" data-toggle="widget-calendar"></div>
|
||||
<div
|
||||
:id="calendarId"
|
||||
ref="calendarEl"
|
||||
data-toggle="widget-calendar"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,17 +1,24 @@
|
||||
<template>
|
||||
<div class="card border-0 shadow-lg rounded-xl h-100 sidebar-card" :class="{ 'collapsed': isCollapsed }">
|
||||
<div
|
||||
class="card border-0 shadow-lg rounded-xl h-100 sidebar-card"
|
||||
:class="{ collapsed: isCollapsed }"
|
||||
>
|
||||
<div class="card-header bg-white border-0 pb-0">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="fas fa-users text-indigo-600"></i>
|
||||
<h3 class="text-xs font-semibold mb-0">👥 Collaborateurs ({{ count }})</h3>
|
||||
<h3 class="text-xs font-semibold mb-0">
|
||||
👥 Collaborateurs ({{ count }})
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0">
|
||||
<div v-if="count === 0" class="text-center text-secondary py-4 text-xs">
|
||||
<p class="mb-2">Aucun collaborateur</p>
|
||||
<p class="text-muted opacity-60">💡 Allouez une couleur depuis la page Salariés</p>
|
||||
<p class="text-muted opacity-60">
|
||||
💡 Allouez une couleur depuis la page Salariés
|
||||
</p>
|
||||
</div>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
@ -26,12 +33,12 @@ import { defineProps } from "vue";
|
||||
defineProps({
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 0,
|
||||
},
|
||||
isCollapsed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="d-grid gap-2">
|
||||
<soft-button color="info" variant="gradient" @click="$emit('select-type', 'intervention')">
|
||||
<i class="fas fa-briefcase-medical me-2"></i>
|
||||
Créer une intervention
|
||||
</soft-button>
|
||||
|
||||
<soft-button color="warning" variant="gradient" @click="$emit('select-type', 'leave')">
|
||||
<i class="fas fa-umbrella-beach me-2"></i>
|
||||
Demande de congé employé
|
||||
</soft-button>
|
||||
|
||||
<soft-button color="success" variant="gradient" @click="$emit('select-type', 'event')">
|
||||
<i class="fas fa-calendar-plus me-2"></i>
|
||||
Créer un événement
|
||||
</soft-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineEmits } from "vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
|
||||
defineEmits(["select-type"]);
|
||||
</script>
|
||||
|
||||
@ -1,31 +1,42 @@
|
||||
<template>
|
||||
<div class="d-flex align-items-center bg-white shadow-sm rounded-lg p-1 border">
|
||||
<button
|
||||
class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md"
|
||||
<div
|
||||
class="d-flex align-items-center bg-white shadow-sm rounded-lg p-1 border"
|
||||
>
|
||||
<soft-button
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="btn-icon-soft"
|
||||
@click="$emit('prev-week')"
|
||||
>
|
||||
<i class="fas fa-chevron-left text-secondary text-xs"></i>
|
||||
</button>
|
||||
<div class="px-3 py-1 text-sm font-semibold text-dark whitespace-nowrap min-w-140 text-center">
|
||||
</soft-button>
|
||||
<div
|
||||
class="px-3 py-1 text-sm font-semibold text-dark whitespace-nowrap min-w-140 text-center"
|
||||
>
|
||||
{{ dateRangeDisplay }}
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm btn-icon mb-0 shadow-none border-0 hover:bg-gray-100 rounded-md"
|
||||
<soft-button
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="btn-icon-soft"
|
||||
@click="$emit('next-week')"
|
||||
>
|
||||
<i class="fas fa-chevron-right text-secondary text-xs"></i>
|
||||
</button>
|
||||
</soft-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineProps, defineEmits } from "vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
|
||||
const props = defineProps({
|
||||
currentDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
}
|
||||
default: () => new Date(),
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["prev-week", "next-week"]);
|
||||
@ -33,22 +44,26 @@ defineEmits(["prev-week", "next-week"]);
|
||||
const dateRangeDisplay = computed(() => {
|
||||
const current = new Date(props.currentDate);
|
||||
const dayOfWeek = current.getDay(); // 0 is Sunday
|
||||
|
||||
|
||||
// Calculate Monday of current week
|
||||
const diff = current.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
|
||||
const monday = new Date(current);
|
||||
monday.setDate(diff);
|
||||
|
||||
|
||||
// Calculate Sunday of current week
|
||||
const sunday = new Date(monday);
|
||||
sunday.setDate(monday.getDate() + 6);
|
||||
|
||||
const options = { day: 'numeric', month: 'short' };
|
||||
const startStr = monday.toLocaleDateString('fr-FR', options);
|
||||
|
||||
|
||||
const options = { day: "numeric", month: "short" };
|
||||
const startStr = monday.toLocaleDateString("fr-FR", options);
|
||||
|
||||
// If same month, don't repeat month in start date (optional refinement, sticking to simple for now)
|
||||
const endStr = sunday.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
|
||||
const endStr = sunday.toLocaleDateString("fr-FR", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
|
||||
return `${startStr} - ${endStr}`;
|
||||
});
|
||||
</script>
|
||||
@ -58,10 +73,6 @@ const dateRangeDisplay = computed(() => {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
@ -78,16 +89,14 @@ const dateRangeDisplay = computed(() => {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.hover\:bg-gray-100:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
.btn-icon-soft {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
min-width: 30px;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<form class="d-grid gap-2" @submit.prevent="$emit('submit')">
|
||||
<div>
|
||||
<label class="form-label">Titre</label>
|
||||
<soft-input
|
||||
:model-value="form.title"
|
||||
placeholder="Réunion équipe"
|
||||
@update:model-value="updateField('title', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Date et heure</label>
|
||||
<soft-input
|
||||
:model-value="form.date"
|
||||
type="datetime-local"
|
||||
@update:model-value="updateField('date', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Lieu</label>
|
||||
<soft-input
|
||||
:model-value="form.location"
|
||||
placeholder="Salle principale"
|
||||
@update:model-value="updateField('location', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Description</label>
|
||||
<input
|
||||
:value="form.description"
|
||||
class="form-control"
|
||||
type="text"
|
||||
placeholder="Détails de l'événement"
|
||||
@input="updateField('description', $event.target.value)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 justify-content-end pt-2">
|
||||
<soft-button color="secondary" variant="outline" @click="$emit('back')">Retour</soft-button>
|
||||
<soft-button color="success" variant="gradient" type="submit">Enregistrer</soft-button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
import SoftInput from "@/components/SoftInput.vue";
|
||||
import { defineEmits, defineProps } from "vue";
|
||||
defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:form", "submit", "back"]);
|
||||
|
||||
const updateField = (field, value) => {
|
||||
emit("update:form", { field, value });
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="planning-kanban-container mt-3">
|
||||
<div class="py-2 min-vh-100 d-inline-flex" style="overflow-x: auto">
|
||||
<div class="planning-kanban-scroll py-2">
|
||||
<div id="planningKanban"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -92,7 +92,7 @@ const initKanban = () => {
|
||||
kanbanInstance = new jKanban({
|
||||
element: "#planningKanban",
|
||||
gutter: "10px",
|
||||
widthBoard: "300px",
|
||||
widthBoard: "360px",
|
||||
responsivePercentage: false,
|
||||
dragItems: true,
|
||||
boards: boards,
|
||||
@ -153,12 +153,18 @@ watch(() => props.interventions, () => {
|
||||
/* Global styles for jKanban overrides */
|
||||
.kanban-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: visible !important;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
background: transparent !important;
|
||||
padding: 0 !important;
|
||||
width: 360px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.kanban-board-header {
|
||||
@ -183,9 +189,27 @@ watch(() => props.interventions, () => {
|
||||
}
|
||||
|
||||
.kanban-drag {
|
||||
min-height: 500px;
|
||||
min-height: 100%;
|
||||
background-color: #f1f5f9; /* slate-100 */
|
||||
border-radius: 0.75rem;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.planning-kanban-container {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 220px);
|
||||
}
|
||||
|
||||
.planning-kanban-scroll {
|
||||
width: 100%;
|
||||
height: calc(100vh - 220px);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
#planningKanban {
|
||||
width: 100%;
|
||||
min-width: max-content;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<form class="d-grid gap-2" @submit.prevent="$emit('submit')">
|
||||
<div>
|
||||
<label class="form-label">Employé</label>
|
||||
<select :value="form.employee" class="form-select" @change="updateField('employee', $event.target.value)">
|
||||
<option value="" disabled>Choisir un employé</option>
|
||||
<option v-for="collab in collaborators" :key="collab.id" :value="collab.name">
|
||||
{{ collab.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Du</label>
|
||||
<soft-input :model-value="form.startDate" type="date" @update:model-value="updateField('startDate', $event)" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Au</label>
|
||||
<soft-input :model-value="form.endDate" type="date" @update:model-value="updateField('endDate', $event)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="form-label">Motif</label>
|
||||
<soft-input
|
||||
:model-value="form.reason"
|
||||
placeholder="Congé annuel"
|
||||
@update:model-value="updateField('reason', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 justify-content-end pt-2">
|
||||
<soft-button color="secondary" variant="outline" @click="$emit('back')">Retour</soft-button>
|
||||
<soft-button color="warning" variant="gradient" type="submit">Enregistrer</soft-button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
import SoftInput from "@/components/SoftInput.vue";
|
||||
import { defineEmits, defineProps } from "vue";
|
||||
defineProps({
|
||||
form: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
collaborators: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:form", "submit", "back"]);
|
||||
|
||||
const updateField = (field, value) => {
|
||||
emit("update:form", { field, value });
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -7,9 +7,16 @@
|
||||
</div>
|
||||
<div class="card-body pt-2">
|
||||
<div class="d-flex flex-wrap gap-3">
|
||||
<div v-for="item in legend" :key="item.label" class="d-flex align-items-center gap-2">
|
||||
<div
|
||||
v-for="item in legend"
|
||||
:key="item.label"
|
||||
class="d-flex align-items-center gap-2"
|
||||
>
|
||||
<span class="text-sm">{{ item.emoji }}</span>
|
||||
<div class="legend-bar rounded-pill" :style="{ backgroundColor: item.color }"></div>
|
||||
<div
|
||||
class="legend-bar rounded-pill"
|
||||
:style="{ backgroundColor: item.color }"
|
||||
></div>
|
||||
<span class="text-xs text-secondary">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -23,7 +30,7 @@ const legend = [
|
||||
{ emoji: "🏥", label: "Maladie", color: "#ef4444" },
|
||||
{ emoji: "📚", label: "Formation", color: "#8b5cf6" },
|
||||
{ emoji: "💼", label: "Sans solde", color: "#6b7280" },
|
||||
{ emoji: "🚑", label: "Accident travail", color: "#dc2626" }
|
||||
{ emoji: "🚑", label: "Accident travail", color: "#dc2626" },
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
@ -5,56 +5,111 @@
|
||||
<table class="table align-items-center mb-0">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4">Date & Heure</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Type</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Défunt / Client</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Collaborateur</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Statut</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Actions</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-4"
|
||||
>
|
||||
Date & Heure
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Défunt / Client
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Collaborateur
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Statut
|
||||
</th>
|
||||
<th
|
||||
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="interventions.length === 0">
|
||||
<td colspan="6" class="text-center py-5">
|
||||
<span class="text-muted text-sm">Aucune intervention pour cette période</span>
|
||||
<span class="text-muted text-sm"
|
||||
>Aucune intervention pour cette période</span
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="intervention in interventions" :key="intervention.id" class="hover-row transition-all">
|
||||
<tr
|
||||
v-for="intervention in interventions"
|
||||
:key="intervention.id"
|
||||
class="hover-row transition-all"
|
||||
>
|
||||
<td class="ps-4">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 text-sm font-weight-bold">{{ formatDate(intervention.date) }}</h6>
|
||||
<span class="text-xs text-secondary">{{ formatTime(intervention.date) }}</span>
|
||||
<h6 class="mb-0 text-sm font-weight-bold">
|
||||
{{ formatDate(intervention.date) }}
|
||||
</h6>
|
||||
<span class="text-xs text-secondary">{{
|
||||
formatTime(intervention.date)
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="badge badge-sm bg-gradient-light text-dark mb-0 d-flex align-items-center gap-1 border">
|
||||
<span class="width-8-px height-8-px rounded-circle me-1" :style="{ backgroundColor: getTypeColor(intervention.type) }"></span>
|
||||
<span
|
||||
class="badge badge-sm bg-gradient-light text-dark mb-0 d-flex align-items-center gap-1 border"
|
||||
>
|
||||
<span
|
||||
class="width-8-px height-8-px rounded-circle me-1"
|
||||
:style="{
|
||||
backgroundColor: getTypeColor(intervention.type),
|
||||
}"
|
||||
></span>
|
||||
{{ intervention.type }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-0 text-sm">{{ intervention.deceased || 'Non spécifié' }}</h6>
|
||||
<span class="text-xs text-secondary">Client: {{ intervention.client || '-' }}</span>
|
||||
<h6 class="mb-0 text-sm">
|
||||
{{ intervention.deceased || "Non spécifié" }}
|
||||
</h6>
|
||||
<span class="text-xs text-secondary"
|
||||
>Client: {{ intervention.client || "-" }}</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar avatar-xs me-2 bg-gradient-primary rounded-circle text-white d-flex align-items-center justify-content-center text-xxs">
|
||||
<div
|
||||
class="avatar avatar-xs me-2 bg-gradient-primary rounded-circle text-white d-flex align-items-center justify-content-center text-xxs"
|
||||
>
|
||||
{{ getInitials(intervention.collaborator) }}
|
||||
</div>
|
||||
<span class="text-sm font-weight-bold text-secondary">{{ intervention.collaborator }}</span>
|
||||
<span class="text-sm font-weight-bold text-secondary">{{
|
||||
intervention.collaborator
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-sm" :class="getStatusBadgeClass(intervention.status)">
|
||||
<span
|
||||
class="badge badge-sm"
|
||||
:class="getStatusBadgeClass(intervention.status)"
|
||||
>
|
||||
{{ intervention.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-link text-secondary mb-0 px-2" @click="$emit('edit', intervention)">
|
||||
<button
|
||||
class="btn btn-link text-secondary mb-0 px-2"
|
||||
@click="$emit('edit', intervention)"
|
||||
>
|
||||
<i class="fas fa-edit text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
@ -72,45 +127,57 @@ import { defineProps, defineEmits } from "vue";
|
||||
defineProps({
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["edit"]);
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return "-";
|
||||
return new Date(dateString).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'short' });
|
||||
return new Date(dateString).toLocaleDateString("fr-FR", {
|
||||
weekday: "long",
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
});
|
||||
};
|
||||
|
||||
const formatTime = (dateString) => {
|
||||
if (!dateString) return "-";
|
||||
return new Date(dateString).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
|
||||
return new Date(dateString).toLocaleTimeString("fr-FR", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
};
|
||||
|
||||
const getInitials = (name) => {
|
||||
if (!name) return "?";
|
||||
return name.split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
|
||||
return name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")
|
||||
.substring(0, 2)
|
||||
.toUpperCase();
|
||||
};
|
||||
|
||||
const getTypeColor = (type) => {
|
||||
const colors = {
|
||||
'Soin': '#3b82f6',
|
||||
'Transport': '#10b981',
|
||||
'Mise en bière': '#f59e0b',
|
||||
'Cérémonie': '#8b5cf6'
|
||||
Soin: "#3b82f6",
|
||||
Transport: "#10b981",
|
||||
"Mise en bière": "#f59e0b",
|
||||
Cérémonie: "#8b5cf6",
|
||||
};
|
||||
return colors[type] || '#6b7280';
|
||||
return colors[type] || "#6b7280";
|
||||
};
|
||||
|
||||
const getStatusBadgeClass = (status) => {
|
||||
const map = {
|
||||
'Confirmé': 'bg-gradient-info',
|
||||
'Terminé': 'bg-gradient-success',
|
||||
'En attente': 'bg-gradient-warning',
|
||||
'Annulé': 'bg-gradient-danger'
|
||||
Confirmé: "bg-gradient-info",
|
||||
Terminé: "bg-gradient-success",
|
||||
"En attente": "bg-gradient-warning",
|
||||
Annulé: "bg-gradient-danger",
|
||||
};
|
||||
return map[status] || 'bg-gradient-secondary';
|
||||
return map[status] || "bg-gradient-secondary";
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,28 +1,29 @@
|
||||
<template>
|
||||
<div class="d-flex gap-2">
|
||||
<button
|
||||
<soft-button
|
||||
v-for="view in views"
|
||||
:key="view.id"
|
||||
class="btn d-inline-flex align-items-center justify-content-center gap-2 border-0 shadow-sm transition-all"
|
||||
:class="[
|
||||
activeView === view.id ? 'btn-active' : 'btn-inactive'
|
||||
]"
|
||||
class="d-inline-flex align-items-center justify-content-center gap-2 transition-all"
|
||||
:color="activeView === view.id ? 'info' : 'secondary'"
|
||||
:variant="activeView === view.id ? 'gradient' : 'outline'"
|
||||
size="sm"
|
||||
@click="$emit('update:activeView', view.id)"
|
||||
>
|
||||
<i :class="view.icon"></i>
|
||||
<span class="d-none d-sm-inline">{{ view.label }}</span>
|
||||
</button>
|
||||
</soft-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
import SoftButton from "@/components/SoftButton.vue";
|
||||
|
||||
defineProps({
|
||||
activeView: {
|
||||
type: String,
|
||||
default: "grille"
|
||||
}
|
||||
default: "grille",
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["update:activeView"]);
|
||||
@ -30,35 +31,16 @@ defineEmits(["update:activeView"]);
|
||||
const views = [
|
||||
{ id: "liste", label: "Liste", icon: "fas fa-list", color: "gray" },
|
||||
{ id: "kanban", label: "Kanban", icon: "fas fa-columns", color: "gray" },
|
||||
{ id: "grille", label: "Grille", icon: "fas fa-calendar-alt", color: "indigo" }
|
||||
{
|
||||
id: "grille",
|
||||
label: "Grille",
|
||||
icon: "fas fa-calendar-alt",
|
||||
color: "indigo",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-active {
|
||||
background-color: #4f46e5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-inactive {
|
||||
background-color: white;
|
||||
color: #64748b;
|
||||
border: 1px solid #e2e8f0 !important;
|
||||
}
|
||||
|
||||
.btn-inactive:hover {
|
||||
background-color: #f8fafc;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="calendar-grid-container card h-100 border-0 shadow-sm rounded-xl">
|
||||
<div class="card-body p-3 h-100">
|
||||
<div ref="calendarEl" id="fullCalendarGrid" class="h-100"></div>
|
||||
<div id="fullCalendarGrid" ref="calendarEl" class="h-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,12 +16,12 @@ import frLocale from "@fullcalendar/core/locales/fr";
|
||||
const props = defineProps({
|
||||
startDate: {
|
||||
type: Date,
|
||||
default: () => new Date()
|
||||
default: () => new Date(),
|
||||
},
|
||||
interventions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["cell-click", "edit"]);
|
||||
@ -49,7 +49,7 @@ const initializeCalendar = () => {
|
||||
contentHeight: "auto",
|
||||
expandRows: true,
|
||||
stickyHeaderDates: true,
|
||||
dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'short' }, // "Lundi 12 janv."
|
||||
dayHeaderFormat: { weekday: "long", day: "numeric", month: "short" }, // "Lundi 12 janv."
|
||||
events: mapEvents(props.interventions),
|
||||
eventClick: (info) => {
|
||||
const originalEvent = info.event.extendedProps.originalData;
|
||||
@ -61,39 +61,39 @@ const initializeCalendar = () => {
|
||||
},
|
||||
// Styling customization via class names injection if needed
|
||||
eventClassNames: (arg) => {
|
||||
return ['shadow-sm', 'border-0'];
|
||||
}
|
||||
return ["shadow-sm", "border-0"];
|
||||
},
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
};
|
||||
|
||||
const mapEvents = (interventions) => {
|
||||
return interventions.map(i => {
|
||||
return interventions.map((i) => {
|
||||
// Map props.interventions structure to FullCalendar event object
|
||||
// Assuming intervention has: id, date (ISO string), title (or type), status, color
|
||||
const typeColors = {
|
||||
'Soin': '#3b82f6',
|
||||
'Transport': '#10b981',
|
||||
'Mise en bière': '#f59e0b',
|
||||
'Cérémonie': '#8b5cf6'
|
||||
Soin: "#3b82f6",
|
||||
Transport: "#10b981",
|
||||
"Mise en bière": "#f59e0b",
|
||||
Cérémonie: "#8b5cf6",
|
||||
};
|
||||
|
||||
|
||||
// Default duration 1 hour if not specified
|
||||
const start = new Date(i.date);
|
||||
const end = new Date(start.getTime() + 60 * 60 * 1000);
|
||||
const end = new Date(start.getTime() + 60 * 60 * 1000);
|
||||
|
||||
return {
|
||||
id: i.id,
|
||||
title: i.deceased ? `${i.type} - ${i.deceased}` : i.type,
|
||||
start: i.date,
|
||||
end: i.end || end, // Use provided end or default
|
||||
backgroundColor: typeColors[i.type] || '#6b7280',
|
||||
borderColor: typeColors[i.type] || '#6b7280',
|
||||
textColor: '#ffffff',
|
||||
backgroundColor: typeColors[i.type] || "#6b7280",
|
||||
borderColor: typeColors[i.type] || "#6b7280",
|
||||
textColor: "#ffffff",
|
||||
extendedProps: {
|
||||
originalData: i
|
||||
}
|
||||
originalData: i,
|
||||
},
|
||||
};
|
||||
});
|
||||
};
|
||||
@ -102,19 +102,25 @@ onMounted(() => {
|
||||
initializeCalendar();
|
||||
});
|
||||
|
||||
watch(() => props.startDate, (newDate) => {
|
||||
if (calendar) {
|
||||
calendar.gotoDate(newDate);
|
||||
watch(
|
||||
() => props.startDate,
|
||||
(newDate) => {
|
||||
if (calendar) {
|
||||
calendar.gotoDate(newDate);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.interventions, (newInterventions) => {
|
||||
if (calendar) {
|
||||
calendar.removeAllEvents();
|
||||
calendar.addEventSource(mapEvents(newInterventions));
|
||||
}
|
||||
}, { deep: true });
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.interventions,
|
||||
(newInterventions) => {
|
||||
if (calendar) {
|
||||
calendar.removeAllEvents();
|
||||
calendar.addEventSource(mapEvents(newInterventions));
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -147,7 +153,8 @@ watch(() => props.interventions, (newInterventions) => {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.fc td), :deep(.fc th) {
|
||||
:deep(.fc td),
|
||||
:deep(.fc th) {
|
||||
border-color: #e9ecef;
|
||||
}
|
||||
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div class="planning-container p-2 p-md-4">
|
||||
<div class="container-max mx-auto">
|
||||
<div class="container-max mx-auto h-100">
|
||||
<!-- Header Section -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
|
||||
<div
|
||||
class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3"
|
||||
>
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
|
||||
@ -11,7 +13,7 @@
|
||||
<slot name="view-toggles"></slot>
|
||||
</div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="content-wrapper h-100">
|
||||
<div class="row g-4">
|
||||
<!-- Sidebar & Legend Column (Left on desktop) -->
|
||||
<!-- <div class="col-12 col-xl-3 order-2 order-xl-1">
|
||||
@ -44,11 +46,14 @@
|
||||
}
|
||||
|
||||
.container-max {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
min-height: calc(100vh - 2rem);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
min-height: calc(100vh - 12rem);
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
|
||||
@ -477,17 +477,20 @@ const routes = [
|
||||
{
|
||||
path: "/fournisseurs/factures",
|
||||
name: "Factures fournisseurs",
|
||||
component: () => import("@/views/pages/Fournisseurs/FactureFournisseurList.vue"),
|
||||
component: () =>
|
||||
import("@/views/pages/Fournisseurs/FactureFournisseurList.vue"),
|
||||
},
|
||||
{
|
||||
path: "/fournisseurs/factures/new",
|
||||
name: "Nouvelle Facture Fournisseur",
|
||||
component: () => import("@/views/pages/Fournisseurs/NewFactureFournisseur.vue"),
|
||||
component: () =>
|
||||
import("@/views/pages/Fournisseurs/NewFactureFournisseur.vue"),
|
||||
},
|
||||
{
|
||||
path: "/fournisseurs/factures/:id",
|
||||
name: "Facture Fournisseur Details",
|
||||
component: () => import("@/views/pages/Fournisseurs/FactureFournisseurDetail.vue"),
|
||||
component: () =>
|
||||
import("@/views/pages/Fournisseurs/FactureFournisseurDetail.vue"),
|
||||
},
|
||||
{
|
||||
path: "/fournisseurs/statistiques",
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<planning-presentation
|
||||
v-model:activeView="activeView"
|
||||
:intervention-count="interventions.length"
|
||||
:collaborators="collaborators"
|
||||
:interventions="interventions"
|
||||
:current-date="currentDate"
|
||||
v-model:activeView="activeView"
|
||||
@refresh="handleRefresh"
|
||||
@new-request="handleNewRequest"
|
||||
@cell-click="handleCellClick"
|
||||
@ -14,18 +14,82 @@
|
||||
@edit-intervention="handleEditIntervention"
|
||||
@update-status="handleUpdateStatus"
|
||||
/>
|
||||
|
||||
<planning-new-request-modal
|
||||
:show="showNewRequestModal"
|
||||
:creation-type="creationType"
|
||||
:creation-type-title="creationTypeTitle"
|
||||
:collaborators="collaborators"
|
||||
:leave-form="leaveForm"
|
||||
:event-form="eventForm"
|
||||
@close="closeNewRequestModal"
|
||||
@select-type="selectCreationType"
|
||||
@reset-type="resetType"
|
||||
@submit-leave="submitLeave"
|
||||
@submit-event="submitEvent"
|
||||
@update:leave-form="updateLeaveForm"
|
||||
@update:event-form="updateEventForm"
|
||||
/>
|
||||
|
||||
<intervention-multi-step-modal
|
||||
ref="interventionModalRef"
|
||||
:is-editing="false"
|
||||
:practitioners="practitioners"
|
||||
:initial-date="initialInterventionDate"
|
||||
@submit="handleInterventionSubmit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import PlanningPresentation from "@/components/Organism/Planning/PlanningPresentation.vue";
|
||||
import PlanningNewRequestModal from "@/components/Organism/Planning/PlanningNewRequestModal.vue";
|
||||
import InterventionMultiStepModal from "@/components/Organism/Agenda/InterventionMultiStepModal.vue";
|
||||
|
||||
// State
|
||||
const interventions = ref([]);
|
||||
const collaborators = ref([]);
|
||||
const currentDate = ref(new Date());
|
||||
const activeView = ref("grille");
|
||||
const showNewRequestModal = ref(false);
|
||||
const creationType = ref("");
|
||||
const interventionModalRef = ref(null);
|
||||
const initialInterventionDate = ref("");
|
||||
|
||||
const leaveForm = ref({
|
||||
employee: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
reason: "",
|
||||
});
|
||||
|
||||
const eventForm = ref({
|
||||
title: "",
|
||||
date: "",
|
||||
location: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
const creationTypeTitle = computed(() => {
|
||||
if (creationType.value === "intervention") return "Nouvelle intervention";
|
||||
if (creationType.value === "leave") return "Demande de congé";
|
||||
if (creationType.value === "event") return "Nouvel événement";
|
||||
return "Nouvelle demande";
|
||||
});
|
||||
|
||||
const practitioners = computed(() =>
|
||||
collaborators.value.map((collab) => {
|
||||
const [firstName = collab.name, ...rest] = collab.name.split(" ");
|
||||
return {
|
||||
id: collab.id,
|
||||
employee: {
|
||||
first_name: firstName,
|
||||
last_name: rest.join(" "),
|
||||
},
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Lifecycle
|
||||
onMounted(async () => {
|
||||
@ -38,13 +102,13 @@ const fetchData = async () => {
|
||||
collaborators.value = [
|
||||
{ id: 1, name: "Jean Dupont" },
|
||||
{ id: 2, name: "Marie Curie" },
|
||||
{ id: 3, name: "Lucas Martin" }
|
||||
{ id: 3, name: "Lucas Martin" },
|
||||
];
|
||||
|
||||
// Generate some random interventions around current date
|
||||
const baseDate = new Date(currentDate.value);
|
||||
const startOfWeek = getMonday(baseDate);
|
||||
|
||||
|
||||
interventions.value = [
|
||||
{
|
||||
id: 101,
|
||||
@ -53,7 +117,7 @@ const fetchData = async () => {
|
||||
deceased: "M. Martin",
|
||||
client: "Pompes Funèbres Générales",
|
||||
collaborator: "Jean Dupont",
|
||||
status: "Confirmé"
|
||||
status: "Confirmé",
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
@ -62,7 +126,7 @@ const fetchData = async () => {
|
||||
deceased: "Mme. Dubois",
|
||||
client: "Roc Eclerc",
|
||||
collaborator: "Marie Curie",
|
||||
status: "En cours"
|
||||
status: "En cours",
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
@ -71,7 +135,7 @@ const fetchData = async () => {
|
||||
deceased: "M. Lefebvre",
|
||||
client: "PF Locales",
|
||||
collaborator: "Lucas Martin",
|
||||
status: "En attente"
|
||||
status: "En attente",
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
@ -80,7 +144,7 @@ const fetchData = async () => {
|
||||
deceased: "Mme. Petit",
|
||||
client: "Famille Petit",
|
||||
collaborator: "Jean Dupont",
|
||||
status: "Terminé"
|
||||
status: "Terminé",
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
@ -89,8 +153,8 @@ const fetchData = async () => {
|
||||
deceased: "Inconnu",
|
||||
client: "Police",
|
||||
collaborator: "Marie Curie",
|
||||
status: "Annulé"
|
||||
}
|
||||
status: "Annulé",
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
@ -99,7 +163,119 @@ const handleRefresh = async () => {
|
||||
};
|
||||
|
||||
const handleNewRequest = () => {
|
||||
console.log("New request");
|
||||
creationType.value = "";
|
||||
showNewRequestModal.value = true;
|
||||
};
|
||||
|
||||
const closeNewRequestModal = () => {
|
||||
creationType.value = "";
|
||||
showNewRequestModal.value = false;
|
||||
};
|
||||
|
||||
const selectCreationType = (type) => {
|
||||
if (type === "intervention") {
|
||||
creationType.value = "";
|
||||
showNewRequestModal.value = false;
|
||||
const now = new Date();
|
||||
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
|
||||
initialInterventionDate.value = now.toISOString().slice(0, 16);
|
||||
interventionModalRef.value?.show();
|
||||
return;
|
||||
}
|
||||
|
||||
creationType.value = type;
|
||||
};
|
||||
|
||||
const resetType = () => {
|
||||
creationType.value = "";
|
||||
};
|
||||
|
||||
const handleInterventionSubmit = (formData) => {
|
||||
const practitioner = practitioners.value.find(
|
||||
(p) => p.id?.toString() === formData.assigned_practitioner_id?.toString()
|
||||
);
|
||||
|
||||
const collaboratorName = practitioner
|
||||
? `${practitioner.employee?.first_name || ""} ${
|
||||
practitioner.employee?.last_name || ""
|
||||
}`.trim()
|
||||
: collaborators.value[0]?.name || "-";
|
||||
|
||||
interventions.value.unshift({
|
||||
id: Date.now(),
|
||||
date: formData.scheduled_at
|
||||
? new Date(formData.scheduled_at).toISOString()
|
||||
: new Date().toISOString(),
|
||||
type: formData.product_name || formData.type || "Intervention",
|
||||
deceased: formData.deceased_name || "Défunt",
|
||||
client: formData.client_name || "Client",
|
||||
collaborator: collaboratorName,
|
||||
status: "En attente",
|
||||
});
|
||||
};
|
||||
|
||||
const submitLeave = () => {
|
||||
if (!leaveForm.value.employee || !leaveForm.value.startDate) {
|
||||
alert("Veuillez remplir les champs obligatoires de la demande de congé.");
|
||||
return;
|
||||
}
|
||||
|
||||
interventions.value.unshift({
|
||||
id: Date.now() + 1,
|
||||
date: new Date(`${leaveForm.value.startDate}T09:00`).toISOString(),
|
||||
type: "Congé",
|
||||
deceased: `Congé: ${leaveForm.value.employee}`,
|
||||
client: leaveForm.value.reason || "Demande de congé",
|
||||
collaborator: leaveForm.value.employee,
|
||||
status: "En attente",
|
||||
});
|
||||
|
||||
leaveForm.value = {
|
||||
employee: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
reason: "",
|
||||
};
|
||||
closeNewRequestModal();
|
||||
};
|
||||
|
||||
const updateLeaveForm = ({ field, value }) => {
|
||||
leaveForm.value = {
|
||||
...leaveForm.value,
|
||||
[field]: value,
|
||||
};
|
||||
};
|
||||
|
||||
const submitEvent = () => {
|
||||
if (!eventForm.value.title || !eventForm.value.date) {
|
||||
alert("Veuillez remplir les champs obligatoires de l'événement.");
|
||||
return;
|
||||
}
|
||||
|
||||
interventions.value.unshift({
|
||||
id: Date.now() + 2,
|
||||
date: new Date(eventForm.value.date).toISOString(),
|
||||
type: "Événement",
|
||||
deceased: eventForm.value.title,
|
||||
client: eventForm.value.location || eventForm.value.description || "Événement interne",
|
||||
collaborator: "Équipe",
|
||||
status: "Confirmé",
|
||||
});
|
||||
|
||||
eventForm.value = {
|
||||
title: "",
|
||||
date: "",
|
||||
location: "",
|
||||
description: "",
|
||||
};
|
||||
closeNewRequestModal();
|
||||
};
|
||||
|
||||
const updateEventForm = ({ field, value }) => {
|
||||
eventForm.value = {
|
||||
...eventForm.value,
|
||||
[field]: value,
|
||||
};
|
||||
};
|
||||
|
||||
const handleCellClick = (info) => {
|
||||
@ -118,11 +294,15 @@ const handlePrevWeek = () => {
|
||||
};
|
||||
|
||||
const handleUpdateStatus = (payload) => {
|
||||
const intervention = interventions.value.find(i => i.id.toString() === payload.id);
|
||||
const intervention = interventions.value.find(
|
||||
(i) => i.id.toString() === payload.id
|
||||
);
|
||||
if (intervention) {
|
||||
intervention.status = payload.status;
|
||||
// In a real app, we would make an API call here to persist the change
|
||||
console.log(`Updated status of intervention ${payload.id} to ${payload.status}`);
|
||||
console.log(
|
||||
`Updated status of intervention ${payload.id} to ${payload.status}`
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -137,7 +317,7 @@ const handleNextWeek = () => {
|
||||
function getMonday(d) {
|
||||
d = new Date(d);
|
||||
var day = d.getDay(),
|
||||
diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
|
||||
diff = d.getDate() - day + (day == 0 ? -6 : 1); // adjust when day is sunday
|
||||
return new Date(d.setDate(diff));
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user