From d249acde6f9bc5dd604cc28e0ed6092a2c83b657 Mon Sep 17 00:00:00 2001
From: Olivier Legat <olivier.legat@ldc.fr>
Date: Tue, 15 Mar 2022 16:58:14 +0100
Subject: [PATCH] remove front end old plannings elements

---
 resources/js/components/PlanningComponent.vue | 582 ------------------
 .../js/components/PlanningsComponent.vue      |  68 --
 resources/views/planning/index.blade.php      |  41 --
 3 files changed, 691 deletions(-)
 delete mode 100644 resources/js/components/PlanningComponent.vue
 delete mode 100644 resources/js/components/PlanningsComponent.vue
 delete mode 100644 resources/views/planning/index.blade.php

diff --git a/resources/js/components/PlanningComponent.vue b/resources/js/components/PlanningComponent.vue
deleted file mode 100644
index 149540f..0000000
--- a/resources/js/components/PlanningComponent.vue
+++ /dev/null
@@ -1,582 +0,0 @@
-<template>
-<div class="planning">
-    <table v-if="currentWeek" class="table table-bordered align-middle text-center">
-        <thead>
-            <tr>
-                <th rowspan="2">
-                    <b>{{ currentWeek.user.name }}</b>
-                </th>
-                <th :colspan="daysOfWeek">
-                    <span class="fs-5">S{{ moment(currentWeek.start).week() }}</span>
-                    <span class="float-end me-5 mt-1">{{ moment(currentWeek.start).format('MMMM YYYY') }}</span>
-                </th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td></td>
-                <td v-for="(day, timestamp) in currentWeek.planning"
-                    :key="timestamp">
-                    <b>{{ moment.unix(timestamp).format("dddd DD") }}</b>
-                </td>
-            </tr>
-            <tr v-for="row in rows" :key="row.value">
-                <td><b>{{ row.label }}</b></td>
-                <template v-for="(day, timestamp) in currentWeek.planning">
-                    <td :key="timestamp" class="dynCell" :style="'background-color:' + day[row.value]['type'] + ';'">
-                        <b v-if="day[row.value]['cellModel']">
-                            <a target="_blank" class="text-light bg-dark"
-                                :href="getCellObjectInfo(day[row.value]).url">{{ getCellObjectInfo(day[row.value]).text }}</a>
-                            </b>
-                        <span v-else-if="!day[row.value]['text'].length">Rien</span><br>
-                        {{ day[row.value]["text"] | str_limit(25) }}
-                        <button class="btn btn-edit" type="button" data-bs-toggle="modal"
-                        :data-bs-target="'#editModal'+currentWeek.id" @click="setModalData(timestamp, row)">✎</button>
-                        <button :class="'btn btn-paste '+(!clipBoard.week ? 'hide' : '') " type="button"
-                        @click="pasteCell(timestamp, row)">📋</button>
-                        <button class="btn btn-copy" type="button"
-                        @click="copyCell(timestamp, row)">
-                        <span style="font-size: .875em; margin-right: .125em; position: relative; top: -.25em; left: -.125em">
-                            📄<span style="position: absolute; top: .25em; left: .25em">📄</span>
-                        </span></button>
-                        <button class="btn btn-clear" @click="eraseCell(timestamp, row)">⌫</button>
-                    </td>
-                </template>
-            </tr>
-        </tbody>
-    </table>
-    <!-- Modal -->
-    <div v-if="currentWeek" class="modal fade" :id="'editModal'+currentWeek.id" tabindex="-1" :aria-labelledby="'modalLabel'+currentWeek.id" aria-hidden="true" >
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" :id="'modalLabel'+currentWeek.id" 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>
-
-<script>
-import Toastify from 'toastify-js'
-export default {
-    mounted() {
-        window.Toastify = Toastify
-        this.models = this.dbModels
-        this.types = this.dbTypes
-        this.rows = this.dbRows
-        this.$set(this, 'currentWeek', this.dbCurrentWeek)
-        this.search(false)
-    },
-    props: ["dbModels", "dbTypes", "dbRows", "dbCurrentWeek"],
-    data() {
-        return {
-            clipBoard: {
-                week: null,
-                timestamp: null,
-                row: null
-            },
-            textLimit: 90,
-            daysOfWeek: 5,
-            types: [],
-            rows: [],
-            models: [],
-            currentWeek: null,
-            currentTimestamp: null,
-            currentRow: null,
-            currentModel: null,
-            currentType: null,
-            error: false,
-
-            // v-select
-            dDisplay : false,
-            dDisabled : false,
-            dReadonly : false,
-            value: {
-                label: null,
-                value: null
-            },
-            loading: false,
-            searchText: '',
-            data: [],
-            page: 1,
-            perPage: 15,
-            hasNextPage: true,
-            hasPrevPage: false
-        };
-    },
-    watch: {
-        dbRows() {
-            this.rows = this.dbRows;
-        },
-        dbTypes() {
-            this.types = this.dbTypes;
-        },
-        dbModels() {
-            this.models = this.dbModels;
-        },
-        dbCurrentWeek() {
-            this.currentWeek = this.dbCurrentWeek;
-        },
-        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: {
-        sendToast(message) {
-            Toastify({
-                text: message,
-                duration: 3000,
-                gravity: "top",
-                position: "right",
-                offset: {
-                    x: '2rem',
-                    y: '3rem'
-                },
-                style: {
-                    background: "linear-gradient(to right, #00317d, #0058ca)",
-                }
-            }).showToast();
-        },
-        clearClipBoard() {
-            this.clipBoard = {
-                week: null,
-                timestamp: null,
-                row: null
-            }
-        },
-        copyCell(timestamp, row) {
-            this.clipBoard = {
-                week: this.currentWeek.id,
-                timestamp: timestamp,
-                row: row
-            }
-            this.sendToast('Cellule copiée')
-        },
-        pasteCell(timestamp, row) {
-            const cell = this.currentWeek.planning[this.clipBoard.timestamp][this.clipBoard.row.value]
-            const data = {
-                'id': this.clipBoard.week,
-                'day': timestamp,
-                'type': cell.type,
-                'row': row.value,
-                'cellModel': cell.cellModel,
-                'foreign': cell.foreign,
-                'text': cell.text,
-            }
-            if(!data.text.length) {
-                this.eraseCell(timestamp, row)
-                return;
-            }
-            this.saveCellOnServer(timestamp, row.value, data)
-            this.clearClipBoard()
-            this.sendToast('Cellule collée')
-        },
-        eraseCell(timestamp, row) {
-            this.clearClipBoard()
-            this.setModalData(timestamp, row)
-            const data = {
-                'id': this.currentWeek.id,
-                'day': this.currentTimestamp,
-                'row': this.currentRow.value,
-            }
-            axios.post(this.route('planning.eraseCellContent'), data)
-            .then(response => {
-                if(response.data.status) {
-                    this.$set(this.currentWeek.planning[this.currentTimestamp], this.currentRow.value, {
-                        'type': '',
-                        'foreign': null,
-                        'cellModel': null,
-                        'text': '',
-                    })
-                } else {
-                    console.error('Unknown response')
-                }
-            })
-            .catch(error => {
-                if(error.response.status === 429) {
-                    location.reload()
-                }
-                console.error(error)
-            })
-        },
-        saveCell() {
-            this.error = false
-            const data = {
-                'id': this.currentWeek.id,
-                'day': this.currentTimestamp,
-                'type': this.$refs.type.value,
-                'row': this.currentRow.value,
-                'cellModel': this.$refs.morph.value,
-                'foreign': this.value.value,
-                'text': this.$refs.text.value,
-            }
-            this.saveCellOnServer(this.currentTimestamp, this.currentRow.value, data)
-        },
-        saveCellOnServer(timestamp, row, data) {
-            this.error = false
-            axios.post(this.route('planning.setCellContent'), data)
-            .then(response => {
-                if(response.data.status) {
-                    console.log(this.currentWeek.planning[timestamp])
-                    console.log(row)
-                    this.$set(this.currentWeek.planning[timestamp], row, {
-                        'type': data['type'],
-                        'foreign': data['foreign'],
-                        'cellModel': data['cellModel'],
-                        'text': data['text'],
-                    })
-                    this.$refs.close.click()
-                } else {
-                    this.error = 'Réponse inconnue';
-                }
-            })
-            .catch(error => {
-                if(error.response.status === 429) {
-                    location.reload()
-                }
-                if(error.response.status === 422) {
-                    if(error.response.data.errors) {
-                        this.error = ''
-                        for(let id in error.response.data.errors) {
-                            let field = error.response.data.errors[id]
-                            this.error += field.join('\n') + '\n'
-                        }
-                        return
-                    } else if(error.response.data.message) {
-                        this.error = error.response.data.message
-                        return
-                    }
-                }
-                this.error = error
-            })
-        },
-        selectChange() {
-            this.value = {
-                label: null,
-                value: null
-            }
-            switch(this.$refs.morph.value) {
-                case 'tickets':
-                case 'projects':
-                case 'sites':
-                    this.dDisplay = true
-                    this.search()
-                    break
-                default: this.dDisplay = false
-            }
-        },
-        resetModalFields() {
-            this.$set(this, 'currentType' , null)
-            this.$set(this, 'value' , {
-                label: null,
-                value: null
-            })
-            this.$refs.type.value = ''
-            this.$refs.morph.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
-                })
-            });
-        },
-        getModel(cellModelValue) {
-            for (let model of this.models) {
-                if (model.value === cellModelValue) {
-                    return model;
-                }
-            }
-            throw new Error("Unknown cell model value " + cellModelValue);
-        },
-        getCellObjectInfo(cellData) {
-            for(let model of this.models) {
-                if(cellData['cellModel'] === model.value && model.value == 'tickets') {
-                    return {
-                        'url': this.route('ticket.show', { TICKET: cellData['foreign']}),
-                        'text': this.getModel(cellData["cellModel"]).label
-                    }
-                }
-                if(cellData['cellModel'] === model.value && model.value == 'sites') {
-                    return {
-                        'url': this.route('sites.show', { SITE: cellData['foreign']}),
-                        'text': this.getModel(cellData["cellModel"]).label
-                    }
-                }
-                if(cellData['cellModel'] === model.value && model.value == 'projects') {
-                    return {
-                        'url': this.route('projects.show', { PROJECT: cellData['foreign']}),
-                        'text': this.getModel(cellData["cellModel"]).label
-                    }
-                }
-            }
-            return null
-        },
-        setModalData(timestamp, row) {
-            this.currentTimestamp = timestamp
-            this.currentRow = row
-            this.currentType = this.currentWeek.planning[this.currentTimestamp][this.currentRow.value].type
-            this.currentModel = this.currentWeek.planning[this.currentTimestamp][this.currentRow.value].cellModel
-            let cellData = this.currentWeek.planning[timestamp][row.value]
-            this.$refs.modalLabel.innerHTML = 'Jour : <u>' +
-            this.moment.unix(timestamp).format("dddd, D MMMM YYYY")+ '</u>' +
-            '&nbsp;&nbsp;&nbsp;&nbsp;<b>' + row.label + '<b/>';
-            this.$refs.text.value = cellData.text
-            this.$nextTick(() => {
-                let route = null
-                this.resetModalFields()
-                switch(this.currentModel) {
-                    case 'tickets':
-                        this.dDisplay = true
-                        route = this.route('ticket.show', {
-                            TICKET: this.currentWeek.planning[this.currentTimestamp][this.currentRow.value].foreign
-                        })
-                        break
-                    case 'projects':
-                        this.dDisplay = true
-                        route = this.route('projects.show', {
-                            PROJECT: this.currentWeek.planning[this.currentTimestamp][this.currentRow.value].foreign
-                        })
-                        break
-                    case 'sites':
-                        this.dDisplay = true
-                        route = this.route('sites.show', {
-                            SITE: this.currentWeek.planning[this.currentTimestamp][this.currentRow.value].foreign
-                        })
-                        break
-                    default: this.dDisplay = false
-                }
-            })
-        },
-        limitLines(e) {
-            let keynum, lines = this.$refs.text.value.split('\n').length;
-            // IE
-            if(window.event) {
-                keynum = e.keyCode;
-            // Netscape/Firefox/Opera
-            } else if(e.which) {
-                keynum = e.which;
-            }
-            if(keynum != 8 && this.$refs.text.value.length >= this.textLimit) {
-                e.preventDefault()
-                return false;
-            }
-            if(keynum == 13 && lines == this.$refs.text.rows) {
-                e.preventDefault()
-                return false;
-            }
-        }
-    }
-};
-</script>
-
-<style lang="scss">
-@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;
-    }
-
-    .dynCell {
-        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;
-            }
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/PlanningsComponent.vue b/resources/js/components/PlanningsComponent.vue
deleted file mode 100644
index ee79671..0000000
--- a/resources/js/components/PlanningsComponent.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-<div class="plannings">
-    <div class="row justify-content-center">
-        <div class="col-1 text-center">
-            <button class="sticky-top btn btn-primary mt-5" @click="goToPlanning(false)">←</button>
-        </div>
-        <div class="col-10" v-if="weeks.length">
-            <template v-for="week in weeks">
-                <planning-component
-                    :key="week.id"
-                    :db-current-week='week'
-                    :db-models='models'
-                    :db-types='types'
-                    :db-rows='rows'></planning-component>
-            </template>
-        </div>
-        <div v-else class="col-10">
-            <h3>Pas de planning à afficher</h3>
-        </div>
-        <div class="col-1 text-center">
-            <button class="sticky-top btn btn-primary mt-5" @click="goToPlanning(true)">→</button>
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-export default {
-    mounted() {
-        this.weeks = JSON.parse(this.dbWeeks);
-        this.models = JSON.parse(this.dbModels);
-        this.types = JSON.parse(this.dbTypes);
-        this.rows = JSON.parse(this.dbRows);
-        this.currentDate = JSON.parse(this.browseDate);
-    },
-    props: ["browseDate", "dbWeeks", "dbModels", "dbTypes", "dbRows"],
-    data() {
-        return {
-            currentDate: null,
-            types: [],
-            rows: [],
-            models: [],
-            weeks: []
-        };
-    },
-    watch: {
-    },
-    methods: {
-        goToPlanning(forward) {
-            let date = this.moment(this.currentDate).startOf('week').subtract(1, 'day');
-            if(forward) {
-                date = this.moment(this.currentDate).endOf('week').add(1, 'day')
-            }
-            let url = new URL(this.route('planning.index'))
-            location = url.origin+ url.pathname + '?p='+date.unix()
-        }
-    }
-};
-</script>
-
-<style lang="scss">
-@import "vue-select/src/scss/vue-select.scss";
-.plannings {
-    .sticky-top {
-        top: 20rem !important;
-    }
-}
-</style>
diff --git a/resources/views/planning/index.blade.php b/resources/views/planning/index.blade.php
deleted file mode 100644
index b831adc..0000000
--- a/resources/views/planning/index.blade.php
+++ /dev/null
@@ -1,41 +0,0 @@
-@extends('layout.app')
-
-@section('content')
-<div id="planning" class="container container-xxl vueComponent">
-    <div class="row mb-3 sticky-top bg-white">
-        <div class="col-2">
-            <h1><a href="{{ route('planning.index') }}">{{__('Planning') }}</a></h1>
-        </div>
-        <div class="col pt-2">
-            <h4 class="d-inline me-3">Légende</h4>
-            <div class="d-inline">
-                @foreach(CellType::toArray() as $type)
-                <span style="background-color: {{ $type->value }}; border: 1px solid black;">{{ $type->label }}</span>
-                @endforeach
-            </div>
-        </div>
-    </div>
-    <plannings-component
-        browse-date='@json($date)'
-        db-weeks='@json($weeks)'
-        db-models='@json(CellModel::toArray())'
-        db-types='@json(CellType::toArray())'
-        db-rows='@json(TableRow::toArray())'></plannings-component>
-</div>
-@endsection
-
-@push('scriptsConstants')
-<script>
-    window._routes = {
-        "planning.index": "{{ route('planning.index') }}",
-        "ticket.show": "{{ route('ticket.show', 'TICKET') }}",
-        "projects.show": "{{ route('projects.show', 'PROJECT') }}",
-        "sites.show": "{{ route('sites.show', 'SITE') }}",
-        "ticket.index": "{{ route('ticket.index') }}",
-        "projects.index": "{{ route('projects.index') }}",
-        "sites.index": "{{ route('sites.index') }}",
-        "planning.setCellContent": "{{ route('planning.setCellContent') }}",
-        "planning.eraseCellContent": "{{ route('planning.eraseCellContent') }}"
-    };
-</script>
-@endpush