From 08da9f9776be16b4019828c31f6edb7dd7f862b3 Mon Sep 17 00:00:00 2001
From: Olivier Legat <olivier.legat@ldc.fr>
Date: Sat, 18 Dec 2021 16:46:50 +0100
Subject: [PATCH] loading modale, getting user selections

---
 app/Enums/Planning/ActivityType.php           |  12 +
 app/Http/Controllers/ScheduleController.php   |  13 +-
 config/app.php                                |   1 +
 resources/js/components/ScheduleComponent.vue | 279 ++++++++++++++----
 resources/views/schedule/index.blade.php      | 125 ++++----
 5 files changed, 315 insertions(+), 115 deletions(-)

diff --git a/app/Enums/Planning/ActivityType.php b/app/Enums/Planning/ActivityType.php
index 1fe2346..76bc307 100644
--- a/app/Enums/Planning/ActivityType.php
+++ b/app/Enums/Planning/ActivityType.php
@@ -30,4 +30,16 @@ class ActivityType extends BaseEnumRoutable
             'absence' => trans('Absence'),
         ];
     }
+
+    public static function colors(): array
+    {
+        return [
+            'support' => '#c6e0b4',
+            'rnd' => '#b4c6e7',
+            'dev' => '#00b0f0',
+            'projects' => '#ffe699',
+            'management' => '#f4b084',
+            'absence' => '#aeaaaa'
+        ];
+    }
 }
diff --git a/app/Http/Controllers/ScheduleController.php b/app/Http/Controllers/ScheduleController.php
index d14ac4f..61e0479 100644
--- a/app/Http/Controllers/ScheduleController.php
+++ b/app/Http/Controllers/ScheduleController.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Enums\Planning\ActivityType;
 use App\Enums\Role;
 use App\Models\Schedule;
 use App\Models\User;
@@ -45,6 +46,11 @@ class ScheduleController extends Controller
         $prevDate = null;
         $prevSlot = null;
         foreach ($schedules as $schedule) {
+            if (isset($schedule->relatedModel->name)) {
+                $id_lie = array('label'=>$schedule->relatedModel->name, 'value'=>$schedule->id_lie);
+            } else {
+                $id_lie = array('label'=>'Ticket '.$schedule->id_lie, 'value'=>$schedule->id_lie);
+            }
             if ($prevUserId != $schedule->user_id) {
                 //nouveau user
                 $arSchedules[$schedule->user_id] = array(
@@ -53,7 +59,7 @@ class ScheduleController extends Controller
                             'id' => $schedule->id,
                             'type' => $schedule->activity,
                             'text' => $schedule->description,
-                            'id_lie' => $schedule->id_lie,
+                            'id_lie' => $id_lie, //$schedule->id_lie,
                             'model_lie' => $schedule->model_lie,
                         ),
                     )
@@ -67,7 +73,7 @@ class ScheduleController extends Controller
                             'id' => $schedule->id,
                             'type' => $schedule->activity,
                             'text' => $schedule->description,
-                            'id_lie' => $schedule->id_lie,
+                            'id_lie' => $id_lie, //$schedule->id_lie,
                             'model_lie' => $schedule->model_lie,
                         ),
                     );
@@ -79,7 +85,7 @@ class ScheduleController extends Controller
                             'id' => $schedule->id,
                             'type' => $schedule->activity,
                             'text' => $schedule->description,
-                            'id_lie' => $schedule->id_lie,
+                            'id_lie' => $id_lie, //$schedule->id_lie,
                             'model_lie' => $schedule->model_lie,
                         );
                     } else {
@@ -102,7 +108,6 @@ class ScheduleController extends Controller
                         );
         }
 
-
         return view('schedule.index', compact('users', 'date', 'weekCells', 'arSchedules'));
     }
 }
diff --git a/config/app.php b/config/app.php
index 3602bed..bb31bde 100644
--- a/config/app.php
+++ b/config/app.php
@@ -236,6 +236,7 @@ return [
         'LoadLevel' => App\Enums\LoadLevel::class,
         'CellModel' => App\Enums\Planning\CellModel::class,
         'CellType' => App\Enums\Planning\CellType::class,
+        'ActivityType' => App\Enums\Planning\ActivityType::class,
         'TableRow' => App\Enums\Planning\TableRow::class,
         'Carbon' => 'Carbon\Carbon'
     ],
diff --git a/resources/js/components/ScheduleComponent.vue b/resources/js/components/ScheduleComponent.vue
index c79e35c..1e6b26a 100644
--- a/resources/js/components/ScheduleComponent.vue
+++ b/resources/js/components/ScheduleComponent.vue
@@ -12,26 +12,26 @@
                         <th rowspan="2" colspan="2">
 
                         </th>
-                        <th colspan="5" v-for="item in weeksCells" class="Mon Fri">
+                        <th :colspan="showWeekends ? 7:5" v-for="item in weeksCells" class="Mon Fri" :key="item.num">
                             S {{item.num}} - {{item.month}} {{item.year}}
                         </th>
                     </tr>
                     <tr>
-                        <th v-for="day in days" :class="'day '+day.eday">
+                        <th v-for="day in days" :class="'day '+day.eday" :key="day.num">
                             {{day.day}} {{day.num}}
                         </th>
                     </tr>
                 </thead>
                 <tbody>
                      <template v-for="(user,index) in schedules">
-                        <tr v-for="(slot,key) in user">
+                        <tr v-for="(slot,key) in user" :key="index + '' + key">
                             <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">
+                            <td v-for="day in days" :class="'dynCell day '+user[key][day.key].type.value+ ' ' +day.eday" :key="day.key">
                                 {{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>
+                                data-bs-target="#editModal" @click="setModalData(index,key,day.key,user[key][day.key]['id'])">✎</button>
                                 <button class="btn btn-clear" @click="eraseCell(user[key][day.key]['id'])">⌫</button>
                             </td>
                         </tr>
@@ -66,11 +66,11 @@
     </div>
 
     <!-- Modal -->
-    <div v-if="currentWeek" class="modal fade" id="editModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" >
+    <div 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>
+                    <h5 class="modal-title" id="modalLabel" ref="modalLabel">{{modale.title}}</h5>
                     <button ref="close" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                 </div>
                 <div class="modal-body">
@@ -81,51 +81,54 @@
                             </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>
+                                    <label for="categorie" class="col-form-label text-md-right ms-5">Categorie</label>
+                                    <select id="categorie" ref="type" class="form-select" aria-label="Sélectionnez une catégorie">
+                                        <option value="" >Sélectionnez une catégorie</option>
+                                        <option v-for="activity in activities" :key="activity.value" :value="activity.value"
+                                        :selected="modale.activity.value == activity.value"
+                                        :class="activity.value">{{ activity.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>
+                                    <label for="morph" class="col-form-label text-md-right ms-5">Type d'élément lié</label>
+                                    <select id="morph" ref="morph" class="form-select" @change="selectChange" aria-label="Sélectionnez un élément à lier">
+                                        <option value="">Sélectionnez un type d'objet à lier</option>
+                                        <option v-for="model in models" :key="model.value" :value="model.value"
+                                        :selected="modale.model_lie.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>
+                                <div class="form-group mb-3" v-if="modale.dDisplay">
+                                    <label for="select_id_lie" 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>
+                                    id="select_id_lie"
+                                    ref="select"
+                                    :loading="loading"
+                                    v-model="value"
+                                    :clearable="false"
+                                    label="label"
+                                    :options='data'
+                                    @search="search"
+                                    :disabled="dReadonly||dDisabled"
+                                    :filterable="true"
+                                    :searchable="true"
+                                    @input="setSelected">
+                                    <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>
+                                    <label for="text" 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>
+                                        id="text" rows="2" placeholder="" @keydown="limitLines($event)" v-model="modale.text"></textarea>
                                 </div>
                             </div>
                         </div>
@@ -152,6 +155,12 @@ export default {
         dbSchedules: {
             type: String,
         },
+        dbActivities: {
+            type: String,
+        },
+        dbModels: {
+            type: String,
+        },
         dbUsers: {
             type: String,
         },
@@ -164,6 +173,10 @@ export default {
                 return new Date();
             }
         },
+        showWeekends: {
+            type: Boolean,
+            default: false,
+        }
     },
     mounted() {
         this.currentDate = JSON.parse(this.browseDate);
@@ -172,6 +185,8 @@ export default {
         this.days = this.prepareDays();
         this.users = JSON.parse(this.dbUsers);
         this.schedules = this.prepareSched(JSON.parse(this.dbSchedules));
+        this.activities = JSON.parse(this.dbActivities);
+        this.models = JSON.parse(this.dbModels);
     },
     data() {
         return {
@@ -180,13 +195,65 @@ export default {
             days: [],
             users:[],
             schedules: [],
+            activities: [],
+            models: [],
+            error: '',
+            modale:{
+                userid: 0,
+                slot: 0,
+                day: '01/01/1900',
+                title: 0,
+                dDisplay: false,
+                text: '',
+                activity: {
+                    label: '',
+                    value: '',
+                },
+                model_lie: {
+                    label: '',
+                    value: '',
+                },
+                id_lie: 0,
+            },
+            //v-select de ses morts
+            dDisabled : false,
+            dReadonly : false,
+            loading: false,
+            value: {
+                label: null,
+                value: null
+            },
+            searchText: '',
+            data: [],
+            page: 1,
+            perPage: 15,
+            hasNextPage: true,
+            hasPrevPage: false
         };
     },
     watch: {
+        page() {
+            if(this.page < 1) {
+                this.page = 1
+            }
+            if(this.page > 1) {
+                this.hasPrevPage = true
+            } else {
+                this.hasPrevPage = false
+            }
+            this.search()
+        },
+        data() {
+            if(this.data.length == this.perPage) {
+                this.hasNextPage = true
+            } else {
+                this.hasNextPage = false
+            }
+        }
     },
     methods: {
         goToPlanning(forward) {
-            console.log(forward);
+//            console.log(forward);
             let date = this.moment(this.currentDate).startOf('week').subtract(7, 'day');
             if(forward) {
                 date = this.moment(this.currentDate).add(7, 'day')
@@ -205,14 +272,16 @@ export default {
                     key: date.format('DD/MM/YYYY'),
                 }
                 mydays.push(obj);
-                if(date.day() == 5) {
-                    i+=2;
+                if(!this.showWeekends) {
+                    if(date.day() == 5) {
+                        i+=2;
+                    }
                 }
             }
             return mydays;
         },
         prepareSched(dbscheds) {
-            var templateObj = {"type":{"label":"","value":""},"text":"","id_lie":null,"model_lie":null,"id":null}
+            var templateObj = {"type":{"label":"","value":""},"text":"","id_lie":{"label":"","value":""},"model_lie":{"label":"","value":""},"id":null}
             //we need to make missing users
             Object.keys(this.users).forEach(id => {
                 if(dbscheds[id] === undefined) {
@@ -238,8 +307,116 @@ export default {
             });
             return dbscheds;
         },
-        setModalData(id) {
-            console.log(id);
+        resetModalFields() {
+            this.$set(this, 'currentType' , null)
+            this.$set(this, 'value' , {
+                label: null,
+                value: null
+            })
+            this.$refs.type.value = ''
+            this.$refs.morph.value = ''
+        },
+        setModalData(userid,slotkey,day,id) {
+            let text = this.schedules[userid][slotkey][day]['text'];
+            let activity = this.schedules[userid][slotkey][day]['type'];
+            let model = this.schedules[userid][slotkey][day]['model_lie'];
+            let enumobject = {
+                    label: '',
+                    value: '',
+                };
+            let currentModale = {
+                userid: userid,
+                slot: slotkey,
+                day: day,
+                title: id,
+                dDisplay: false,
+                text: text,
+                activity: activity,
+                model_lie: model ?? enumobject,
+                id_lie: this.schedules[userid][slotkey][day]['id_lie'],
+            }
+            this.modale = currentModale;
+            this.$nextTick(() => {
+                let route = null
+                switch(this.modale.model_lie.value) {
+                    case 'tickets':
+                        this.dDisplay = true
+                        route = this.route('ticket.show', {
+                            TICKET: this.modale.id_lie
+                        })
+                        break
+                    case 'projects':
+                        this.dDisplay = true
+                        route = this.route('projects.show', {
+                            PROJECT: this.modale.id_lie
+                        })
+                        break
+                    case 'sites':
+                        this.dDisplay = true
+                        route = this.route('sites.show', {
+                            SITE: this.modale.id_lie
+                        })
+                        break
+                    default: this.dDisplay = false
+                }
+                this.selectChange();
+                this.value = this.schedules[userid][slotkey][day]['id_lie'];
+            })
+        },
+        setSelected(value) {
+            this.modale.id_lie = value;
+        },
+        search (search = null) {
+            this.$nextTick(() => {
+                this.error = null
+                let route;
+                switch(this.$refs.morph.value) {
+                    case 'tickets':
+                        route = this.route('ticket.index')
+                        break
+                    case 'projects':
+                        route = this.route('projects.index')
+                        break
+                    case 'sites':
+                        route = this.route('sites.index')
+                        break
+                    default: return
+                }
+                if(search !== false && search !== null) {
+                    this.searchText = search
+                }
+                let init = search === false ? true : false
+                route += '?page='+this.page
+                route += '&s='+this.searchText
+                this.loading = true
+                axios.get(route)
+                .then(response => {
+                    this.data = response.data
+                })
+                .catch(error => {
+                    if(error.response.status === 429) {
+                        location.reload()
+                    }
+                    this.error = error
+                }).then(() => {
+                    this.loading = false
+                })
+            });
+        },
+        selectChange() {
+            this.value = {
+                label: null,
+                value: null
+            }
+            switch(this.$refs.morph.value) {
+                case 'tickets':
+                case 'projects':
+                case 'sites':
+                    this.modale.dDisplay = true
+                    this.search(false)
+                    break
+                default: this.modale.dDisplay = false
+            }
         },
         eraseCell(id) {
 
@@ -292,9 +469,9 @@ table {
     .Mon {
         border-left: 4px solid;
     }
-    .Fri {
-        border-right: 4px solid;
-    }
+    // .Fri {
+    //     border-right: 4px solid;
+    // }
 }
 
 .dynCell.day {
diff --git a/resources/views/schedule/index.blade.php b/resources/views/schedule/index.blade.php
index 649082a..8976da2 100644
--- a/resources/views/schedule/index.blade.php
+++ b/resources/views/schedule/index.blade.php
@@ -1,64 +1,6 @@
 @extends('layout.app')
 
-@push('customCss')
-    <style>
-{{--
-        .grid-1week {
-            display: grid;
-            grid-template-columns: 2fr repeat(5, 1fr);
-            grid-auto-rows: minmax(50px, auto);
-        }
-        .grid-2week {
-            display: grid;
-            grid-template-columns: 2fr repeat(10, 1fr);
-            grid-auto-rows: minmax(50px, auto);
-            align-items: center;
-        }
-        .grid-week div {
-            border-width:0 1px 1px 0;
-            border-style: solid;
-            border-color: var(--bs-cyan);
-            display: flex;
-            justify-content: center;
-            align-self: stretch;
-            align-items: center;
-        }
-        .grid-week div.Sat, .grid-week div.Sun {
-            //width: 0px;
-        }
-        .empty {
-            grid-column: auto;
-            grid-row: auto /span 2;
-        }
-        .week {
-            grid-column: auto /span 5;
-            grid-row: auto;
-        }
-        .name {
-            grid-column: auto;
-            grid-row: auto /span 4;
-        }
---}}
-        .support {
-            background-color: {{CellType::support()->value}} !important;
-        }
-        .rnd {
-            background-color: {{CellType::rnd()->value}} !important;
-        }
-        .dev {
-            background-color: {{CellType::dev()->value}} !important;
-        }
-        .projects {
-            background-color: {{CellType::projects()->value}} !important;
-        }
-        .management {
-            background-color: {{CellType::management()->value}} !important;
-        }
-        .absence, .Sat, .Sun {
-            background-color: {{CellType::absence()->value}} !important;
-        }
-    </style>
-@endpush
+
 
 @section('content')
 <div id="planning" class="container container-xxl vueComponent">
@@ -78,8 +20,11 @@
     <schedule-component
         browse-date='@json($date)'
         db-schedules='@json($arSchedules)'
+        db-activities='@json(ActivityType::toArray())'
+        db-models='@json(CellModel::toArray())'
         db-users='@json($users)'
-        weeks='@json($weekCells)'></schedule-component>
+        weeks='@json($weekCells)'
+        v-bind:show-weekends='true'></schedule-component>
 {{--    <div class="plannings">
         <div class="row justify-content-center">
             <div class="col-1 text-center">
@@ -146,3 +91,63 @@
     };
 </script>
 @endpush
+
+@push('customCss')
+    <style>
+{{--
+        .grid-1week {
+            display: grid;
+            grid-template-columns: 2fr repeat(5, 1fr);
+            grid-auto-rows: minmax(50px, auto);
+        }
+        .grid-2week {
+            display: grid;
+            grid-template-columns: 2fr repeat(10, 1fr);
+            grid-auto-rows: minmax(50px, auto);
+            align-items: center;
+        }
+        .grid-week div {
+            border-width:0 1px 1px 0;
+            border-style: solid;
+            border-color: var(--bs-cyan);
+            display: flex;
+            justify-content: center;
+            align-self: stretch;
+            align-items: center;
+        }
+        .grid-week div.Sat, .grid-week div.Sun {
+            //width: 0px;
+        }
+        .empty {
+            grid-column: auto;
+            grid-row: auto /span 2;
+        }
+        .week {
+            grid-column: auto /span 5;
+            grid-row: auto;
+        }
+        .name {
+            grid-column: auto;
+            grid-row: auto /span 4;
+        }
+--}}
+        .support {
+            background-color: {{CellType::support()->value}} !important;
+        }
+        .rnd {
+            background-color: {{CellType::rnd()->value}} !important;
+        }
+        .dev {
+            background-color: {{CellType::dev()->value}} !important;
+        }
+        .projects {
+            background-color: {{CellType::projects()->value}} !important;
+        }
+        .management {
+            background-color: {{CellType::management()->value}} !important;
+        }
+        .absence, .Sat, .Sun {
+            background-color: {{CellType::absence()->value}} !important;
+        }
+    </style>
+@endpush