From 726609b9305dbaad1a06ab3682e73ee2edef34e4 Mon Sep 17 00:00:00 2001
From: Olivier Legat <olivier.legat@ldc.fr>
Date: Sun, 12 Dec 2021 15:57:53 +0100
Subject: [PATCH] design en table

---
 resources/js/components/ScheduleComponent.vue | 231 +++++++++++++++++-
 resources/views/schedule/index.blade.php      |  12 +-
 2 files changed, 236 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/ScheduleComponent.vue b/resources/js/components/ScheduleComponent.vue
index 8cb1532..c79e35c 100644
--- a/resources/js/components/ScheduleComponent.vue
+++ b/resources/js/components/ScheduleComponent.vue
@@ -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>
diff --git a/resources/views/schedule/index.blade.php b/resources/views/schedule/index.blade.php
index b21b5ff..649082a 100644
--- a/resources/views/schedule/index.blade.php
+++ b/resources/views/schedule/index.blade.php
@@ -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