design en table
This commit is contained in:
Olivier Legat
parent
251b04814a
commit
726609b930
2 changed files with 236 additions and 7 deletions
|
|
@ -4,6 +4,43 @@
|
|||
<div class="col-1 text-center">
|
||||
<a class="sticky-top btn btn-primary mt-5" @click="goToPlanning(false)">←</a>
|
||||
</div>
|
||||
|
||||
<div class="col-10">
|
||||
<table class="table table-bordered align-middle text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2" colspan="2">
|
||||
|
||||
</th>
|
||||
<th colspan="5" v-for="item in weeksCells" class="Mon Fri">
|
||||
S {{item.num}} - {{item.month}} {{item.year}}
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th v-for="day in days" :class="'day '+day.eday">
|
||||
{{day.day}} {{day.num}}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="(user,index) in schedules">
|
||||
<tr v-for="(slot,key) in user">
|
||||
<th rowspan="4" colspan="2" v-if="key == 1">
|
||||
{{users[index].name}}
|
||||
</th>
|
||||
<td v-for="day in days" :class="'dynCell day '+user[key][day.key].type.value+ ' ' +day.eday">
|
||||
{{user[key][day.key]['text']}}
|
||||
<button class="btn btn-edit" type="button" data-bs-toggle="modal"
|
||||
data-bs-target="#editModal" @click="setModalData(user[key][day.key]['id'])">✎</button>
|
||||
<button class="btn btn-clear" @click="eraseCell(user[key][day.key]['id'])">⌫</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
<div :class="'col-10 grid-week grid-'+weeksCells.length+'week'">
|
||||
<!--line header 1 -->
|
||||
<div class="empty"></div>
|
||||
|
|
@ -27,6 +64,85 @@
|
|||
<a class="sticky-top btn btn-primary mt-5" @click="goToPlanning(true)">→</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div v-if="currentWeek" class="modal fade" id="editModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" >
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalLabel" ref="modalLabel">Modal title</h5>
|
||||
<button ref="close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div v-if="error" class="alert alert-danger" role="alert">
|
||||
{{ error }}
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="form-group mb-3">
|
||||
<label :for="'type'+currentWeek.id" class="col-form-label text-md-right ms-5">Categorie</label>
|
||||
<select :id="'type'+currentWeek.id" ref="type" class="form-select" aria-label="Sélectionnez une catégorie">
|
||||
<option value="" :selected="!currentType">Sélectionnez une catégorie</option>
|
||||
<option v-for="type in types" :key="type.value" :value="type.value"
|
||||
:selected="type.value === currentType"
|
||||
:style="'background-color:'+ type.value+';'">{{ type.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
<label :for="'morph'+currentWeek.id" class="col-form-label text-md-right ms-5">Type d'élément lié</label>
|
||||
<select :id="'morph'+currentWeek.id" ref="morph" class="form-select" @change="selectChange" aria-label="Sélectionnez un élément à lier">
|
||||
<option value="" :selected="!currentModel">Sélectionnez un élément à lier</option>
|
||||
<option v-for="model in models" :key="model.value" :selected="model.value === currentModel" :value="model.value">{{ model.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mb-3" v-if="dDisplay">
|
||||
<label :for="'select'+currentWeek.id" class="col-form-label text-md-right ms-5">Élément lié</label>
|
||||
<v-select
|
||||
:id="'select'+currentWeek.id"
|
||||
ref="select"
|
||||
:loading="loading"
|
||||
v-model="value"
|
||||
:clearable="false"
|
||||
label="label"
|
||||
:options='data'
|
||||
@search="search"
|
||||
:disabled="dReadonly||dDisabled"
|
||||
:filterable="true"
|
||||
:searchable="true">
|
||||
<li slot="list-footer" class="pagination">
|
||||
<button
|
||||
@click="$event.preventDefault(); page -= 1"
|
||||
:disabled="!hasPrevPage"
|
||||
class="btn btn-sm btn-primary mt-2 mb-2 ms-2 me-2">Précédent</button>
|
||||
<button
|
||||
@click="$event.preventDefault(); page += 1"
|
||||
:disabled="!hasNextPage"
|
||||
class="btn btn-sm btn-primary mt-2 mb-2">Suivant</button>
|
||||
</li>
|
||||
</v-select>
|
||||
</div>
|
||||
<div class="form-group mb-3">
|
||||
<label :for="'text'+currentWeek.id" class="col-form-label text-md-right ms-5">Description courte</label>
|
||||
<textarea ref="text" class="form-control" name="text"
|
||||
:id="'text'+currentWeek.id" rows="2" placeholder="" @keydown="limitLines($event)" ></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-8 text-center">
|
||||
<button class="btn btn-primary me-3" @click="saveCell()">Valider</button>
|
||||
<button class="btn btn-danger" @click="$refs.close.click()">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -96,7 +212,7 @@ export default {
|
|||
return mydays;
|
||||
},
|
||||
prepareSched(dbscheds) {
|
||||
var templateObj = {"type":{"label":"","value":""},"text":"","id_lie":null,"model_lie":null}
|
||||
var templateObj = {"type":{"label":"","value":""},"text":"","id_lie":null,"model_lie":null,"id":null}
|
||||
//we need to make missing users
|
||||
Object.keys(this.users).forEach(id => {
|
||||
if(dbscheds[id] === undefined) {
|
||||
|
|
@ -121,6 +237,12 @@ export default {
|
|||
});
|
||||
});
|
||||
return dbscheds;
|
||||
},
|
||||
setModalData(id) {
|
||||
console.log(id);
|
||||
},
|
||||
eraseCell(id) {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -165,4 +287,111 @@ export default {
|
|||
grid-column: auto;
|
||||
grid-row: auto /span 4;
|
||||
}
|
||||
|
||||
table {
|
||||
.Mon {
|
||||
border-left: 4px solid;
|
||||
}
|
||||
.Fri {
|
||||
border-right: 4px solid;
|
||||
}
|
||||
}
|
||||
|
||||
.dynCell.day {
|
||||
position: relative;
|
||||
&:hover .btn {
|
||||
opacity: 1;
|
||||
}
|
||||
$buttonBgColor: #4d4d4d;
|
||||
|
||||
// Reset button Style to nice one
|
||||
button {
|
||||
display: inline;
|
||||
border: none;
|
||||
padding: 0.6rem 3rem;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
background: $buttonBgColor;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
button[disabled] {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
background: darken($buttonBgColor, 10%);
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px solid #fff;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 0.1rem;
|
||||
right: 0.1rem;
|
||||
padding: 0;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
margin: 0;
|
||||
background-color: $buttonBgColor;
|
||||
opacity: 0;
|
||||
transition: 200ms opacity;
|
||||
&.hide {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($buttonBgColor, 10%);
|
||||
}
|
||||
&.btn-clear {
|
||||
color: darken($color: #fff, $amount: 5);
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
right: inherit;
|
||||
left: 0.1rem;
|
||||
}
|
||||
&:nth-last-child(3) {
|
||||
right: inherit;
|
||||
top: 2.1rem;
|
||||
left: 0.1rem;
|
||||
}
|
||||
&:nth-last-child(1) {
|
||||
top: 2.1rem;
|
||||
right: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import "toastify-js/src/toastify.css";
|
||||
@import "vue-select/src/scss/vue-select.scss";
|
||||
.planning {
|
||||
overflow: auto;
|
||||
|
||||
td {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#text {
|
||||
height: 5.5rem;
|
||||
padding: 1rem 2rem;
|
||||
resize: none;
|
||||
width: 37rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,22 +40,22 @@
|
|||
}
|
||||
--}}
|
||||
.support {
|
||||
background-color: {{CellType::support()->value}};
|
||||
background-color: {{CellType::support()->value}} !important;
|
||||
}
|
||||
.rnd {
|
||||
background-color: {{CellType::rnd()->value}};
|
||||
background-color: {{CellType::rnd()->value}} !important;
|
||||
}
|
||||
.dev {
|
||||
background-color: {{CellType::dev()->value}};
|
||||
background-color: {{CellType::dev()->value}} !important;
|
||||
}
|
||||
.projects {
|
||||
background-color: {{CellType::projects()->value}};
|
||||
background-color: {{CellType::projects()->value}} !important;
|
||||
}
|
||||
.management {
|
||||
background-color: {{CellType::management()->value}};
|
||||
background-color: {{CellType::management()->value}} !important;
|
||||
}
|
||||
.absence, .Sat, .Sun {
|
||||
background-color: {{CellType::absence()->value}};
|
||||
background-color: {{CellType::absence()->value}} !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue