diff --git a/package-lock.json b/package-lock.json index c129e69c174cf30509cd27955aeedd0b430f297e..ed435efa684a9eda2e377829455c27e01ac5955e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1777,16 +1777,6 @@ "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==", "dev": true }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, "cacache": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", @@ -1813,34 +1803,6 @@ "unique-filename": "^1.1.1" } }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", - "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, "find-cache-dir": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", @@ -1862,25 +1824,6 @@ "path-exists": "^4.0.0" } }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -1945,16 +1888,6 @@ "minipass": "^3.1.1" } }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, "terser-webpack-plugin": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", @@ -1971,18 +1904,6 @@ "terser": "^4.6.12", "webpack-sources": "^1.4.3" } - }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.0.0-beta.8", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz", - "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } } } }, @@ -4263,6 +4184,11 @@ "assert-plus": "^1.0.0" } }, + "dayjs": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.9.1.tgz", + "integrity": "sha512-01NCTBg8cuMJG1OQc6PR7T66+AFYiPwgDvdJmvJBn29NGzIG+DIFxPLNjHzwz3cpFIvG+NcwIjP9hSaPVoOaDg==" + }, "de-indent": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", @@ -11381,6 +11307,87 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.0.0-beta.8", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.8.tgz", + "integrity": "sha512-oouKUQWWHbSihqSD7mhymGPX1OQ4hedzAHyvm8RdyHh6m3oIvoRF+NM45i/bhNOlo8jCnuJhaSUf/6oDjv978g==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-password": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/vue-password/-/vue-password-3.0.0.tgz", diff --git a/package.json b/package.json index 38643f0c219669a27dc4f79d71218c387cc53729..596088a963d369980eb6b71ab8810febae3d83ee 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "bootstrap": "^4.5.2", "bootstrap-vue": "^2.17.3", "core-js": "^3.6.5", + "dayjs": "^1.9.1", "file-saver": "^2.0.2", "jquery": "^3.5.1", "lodash.trim": "^4.5.1", diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue index c9f0a50266e70c5771e9e4353330e5b2b25ed5bb..404c6bccb134cb896061182319c8f50d31a1a89b 100644 --- a/src/components/Calendar.vue +++ b/src/components/Calendar.vue @@ -1,27 +1,10 @@ <template> <div class="content col-md-12"> - Calendar </div> </template> <script> export default { name: "Calendar", - components: {} } -</script> - -<style scoped> - -/* Links on mouse-over */ -.sidebar a:hover:not(.active) { - background-color: #c4defa; - color: white; -} - -content { - background-color: whitesmoke; -} - - -</style> \ No newline at end of file +</script> \ No newline at end of file diff --git a/src/components/Certifications.vue b/src/components/Certifications.vue new file mode 100644 index 0000000000000000000000000000000000000000..b9aba63a6571d6c83234444d7f101b9b0e71c773 --- /dev/null +++ b/src/components/Certifications.vue @@ -0,0 +1,319 @@ +<template> + <div class="content col-md-12"> + <div id="search_box" class="search_box col-md-4"> + <div class="entry_box-inner"> + <a id="editbutton" class="button" href="./editcertification" style="visibility: hidden">Eintrag bearbeiten</a> + <a id="addbutton" class="button" href="./createcertification">neuen Eintrag hinzufügen</a> + <a id="deletebutton" class="button" @click="deleterows">ausgewählte Einträge löschen</a> + <a id="exportbutton" class="button" href="./exporttablecertification">Tabelle exportieren</a> + </div> + <div class="search_box-inner"> + <i><img src="../assets/search.svg"></i> + <input id="inpt_search" v-model="filter" type="text" class="search__input" placeholder="Suchen..." /> + </div> + </div> + <table id="Table"> + <tr> + <th scope="row"> + <div class="form-check"> + <input name="checkbox" type="checkbox" class="form-check-input" id="checkbox_headerline" @click="checkAllBoxes"> + <label class="form-check-label" for="checkbox_headerline"></label> + </div> + </th> + <th v-on:click="sortTable('imgsortcertificationnumber')"><img id='imgsortcertificationnumber' :src="require('../assets/'+sortImg)">Zertifikats-ID</th> + <th v-on:click="sortTable('imgsortcertificationtype')"><img id='imgsortcertificationtype' :src="require('../assets/'+sortImg)">Zertifikatsart</th> + <th v-on:click="sortTable('imgsortcertificationname')"><img id='imgsortcertificationname' :src="require('../assets/'+sortImg)">Zertifikatsname</th> + <th v-on:click="sortTable('imgsortcertificationowner')"><img id='imgsortcertificationowner' :src="require('../assets/'+sortImg)">Zertifikatsbesitzer</th> + <th v-on:click="sortTable('imgsortcertificationdate')"><img id='imgsortcertificationdate' :src="require('../assets/'+sortImg)">Austellungsdatum</th> + <th v-on:click="sortTable('imgsortcertificationexpiredate')"><img id='imgsortcertificationexpiredate' :src="require('../assets/'+sortImg)">Ablaufdatum</th> + + + </tr> + <tr v-for="row in filteredRows" :key="row.id"> + <td scope="row"> + <div class="form-check"> + <input type="checkbox" class="form-check-input" name="checkbox_tablerow" id="checkbox_tablerow" v-model="checkedBoxes" :value="row.id"> + <label class="form-check-label" for="checkbox_tablerow"></label> + </div> + </td> + <td>{{row.certificationid}}</td> + <td>{{row.certificationtype}}</td> + <td>{{row.certificationname}}</td> + <td>{{row.certificationowner}}</td> + <td>{{row.certificationdate}}</td> + <td>{{row.certificationexpiredate}}</td> + </tr> + </table> + </div> +</template> + +<script> +export default { + name: "Certifications", + data: function() { + return { + rows: [], + checkedBoxes: [], + rowIDs: ['imgsortcertificationnumber','imgsortcertificationname','imgsortcertificationowner','imgsortcertificationdate'], + filter:'', + currentSort:'imgsortcertificationnumber', + currentSortDir:'asc', + sortImg: 'sort_def.svg', + } + }, + + created() { + localStorage.setItem('checkedBoxID', 0); + this.loadData(); + }, + + methods: { + + deleterows(){ + let x = 0; + for (x; x < this.checkedBoxes.length; x++){ + this.$store.dispatch('certification/delete', this.checkedBoxes[x]).then( + data => { + this.message = data.message; + this.successful = true; + }, + error => { + this.message = (error.response && error.response.data) || error.message || error.toString(); + this.successful = false; + } + ); + } + this.rows = []; + this.loadData(); + }, + + checkAllBoxes(){ + var headercheckbox = document.getElementById('checkbox_headerline'); + var headercheckboxvalue = headercheckbox.checked; + + let checkboxes = document.getElementsByName('checkbox_tablerow'); + for(var i=0, n=checkboxes.length;i<n;i++) { + if (headercheckboxvalue){ + this.checkedBoxes.push(this.rows[i].id); + } else { + this.checkedBoxes.pop(this.rows[i].id); + } + checkboxes[i].checked = headercheckboxvalue; + } + }, + + loadData(){ + this.$store.dispatch('certification/getAll').then( + (data) => { + let x; + for(x = 0; x < data.length; x++){ + this.rows.push({certificationid: data[x].certificationid, certificationtype: data[x].certificationtype, certificationowner: data[x].certificationowner, certificationdate: data[x].certificationdate, certificationexpiredate: data[x].certificationexpiredate}); + } + }, + error => { + this.message = (error.response && error.response.data) || error.message || error.toString(); + this.successful = false; + } + ); + }, + + "sortTable": function sortTable(col) { + this.currentSort = col; + if (this.currentSortDir === 'asc') { + this.currentSortDir = 'desc'; + + this.rowIDs.forEach(element =>{ + console.log(this.currentSort); + if(this.currentSort === element){ + document.getElementById(element).src = require('../assets/sort_asc.svg') + } else { + document.getElementById(element).src = require('../assets/sort_def.svg') + } + }); + + col = col.toString().replace("imgsort",""); + this.rows.sort(function (a, b) { + if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){ + if (a[col] < b[col]) { + return 1; + } else if (a[col] > b[col]) { + return -1; + } + } else if (typeof(a[col]) === 'string' && typeof(b[col]) === 'string'){ + if (a[col].toLowerCase() < b[col].toLowerCase()) { + return 1; + } else if (a[col].toLowerCase() > b[col].toLowerCase()) { + return -1; + } + } + return 0; + }) + } else { + this.currentSortDir = 'asc'; + + this.rowIDs.forEach(element =>{ + if(this.currentSort === element){ + document.getElementById(element.toString()).src = require('../assets/sort_desc.svg'); + } else { + document.getElementById(element.toString()).src = require('../assets/sort_def.svg'); + } + }); + + col = col.toString().replace("imgsort",""); + this.rows.sort(function (a, b) { + if (typeof(a[col]) === 'number' && typeof(b[col]) === 'number'){ + if (a[col] > b[col]) { + return 1; + } else if (a[col]< b[col]) { + return -1; + } + } else if (a[col].toLowerCase() < b[col].toLowerCase()) { + if (a[col].toLowerCase() > b[col].toLowerCase()) { + return 1; + } else if (a[col].toLowerCase() < b[col].toLowerCase()) { + return -1; + } + } + return 0; + }) + } + } + }, + + watch: { + checkedBoxes(){ + if (this.checkedBoxes.length > 1 || this.checkedBoxes.length < 1){ + document.getElementById("editbutton").style.visibility = "hidden"; + // EXPORT & DELETE + } else { + document.getElementById("editbutton").style.visibility = "visible"; + } + localStorage.setItem('checkedBoxID', this.checkedBoxes[0]); + } + }, + computed: { + "columns": function columns() { + if (this.rows.length === 0) { + return []; + } + return Object.keys(this.rows[0]) + }, + filteredRows() { + return this.rows.filter(row => { + const certificationid = row.certificationid; + const certificationname = row.certificationname.toLowerCase(); + const certificationowner = row.certificationowner.toLowerCase(); + const certificationdate = row.certificationdate; + const certificationexpiredate = row.certificationexpiredate; + const searchTerm = this.filter.toLowerCase(); + + return certificationid.includes(searchTerm) || certificationname.includes(searchTerm) || certificationowner.includes(searchTerm) || certificationdate.includes(searchTerm) || certificationexpiredate.includes(searchTerm); + }); + }, + } +} +</script> + +<style scoped> +.content{ + background-color: whitesmoke; + width: 100%; + height: 100%; + overflow-x: auto; + white-space: nowrap; +} + +.search_box{ + width: 100%; + margin-top: 50px; + text-align:left; + position: relative; +} + +.search_box-inner { + display:inline; + font-size:1em; + border-radius: 8em; + border:0.1em solid rgba(218, 208, 190, 1); + box-shadow:0 0 0.3em rgba(60, 60, 60, 0.4); + padding:0.3em; + background:white; +} + +.entry_box-inner { + position: relative; + display:inline; +} + +#exportbutton, #addbutton, #editbutton, #deletebutton { + margin-right: 25px; + display:inline-block; + padding:0.3em 1.2em; + border-radius:2em; + box-sizing: border-box; + text-decoration:none; + font-weight:300; + color:#FFFFFF; + background-color:#528fff; + text-align:center; + transition: all 0.2s; +} + +#exportbutton:hover, #deletebutton:hover, #addbutton:hover , #editbutton:hover{ + background-color:#9fc1ff; +} + +.search_box-inner i img { + width: 5%; + text-align: center; + margin: 5px; +} + +#inpt_search{ + transition:all 0.2s ease-out; + width:15px; + border-radius:0; + box-shadow:none; + outline: none; + padding:0; + margin:0; + border:0; + background-color: transparent; + opacity:0; +} +#inpt_search:focus { + width: 10em; + opacity: 1; +} + +.content table { + margin-top: 50px; + margin-right: 1275px; + display: inline-block; + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; +} + +.content table th { + text-transform: uppercase; + text-align: left; + background: #9fc1ff; + color: #000000; + padding: 8px; + min-width: 30px; +} + +.content table td { + text-align: left; + padding: 8px; + border-right: 2px solid #9fc1ff; +} +.content table td:last-child { + border-right: none; +} + +.content table tbody tr:nth-child(2n) td { + background: #D4D8F9; +} +</style> \ No newline at end of file diff --git a/src/components/CreateEditComponents/CreateCertification.vue b/src/components/CreateEditComponents/CreateCertification.vue new file mode 100644 index 0000000000000000000000000000000000000000..12352bbf5bed948c3c285d54c992d6b97abbf5df --- /dev/null +++ b/src/components/CreateEditComponents/CreateCertification.vue @@ -0,0 +1,140 @@ +<template> + <div> + <div class="row col-md-12"> + <div id="content" class="content col-md-12"> + <form @submit="validateBeforeSubmit" class="col-md-10" style="margin-bottom: 20px"> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 30px">Zertifikats-ID</h1> + <div class="input_container"> + <input v-model="certification.certificationid" type="text" class="form-control inputField" placeholder="Zertifikats-ID" aria-label="certificationid" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationtype" type="text" class="form-control inputField" placeholder="Zertifikatsart" aria-label="certificationtype" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationname" type="text" class="form-control inputField" placeholder="Zertifikatsname" aria-label="certificationname" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationowner" type="text" class="form-control inputField" placeholder="Zertifikatsbesitzer" aria-label="certificationowner" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationdate" type="text" class="form-control inputField" placeholder="Austellungsdatum" aria-label="certificationdate" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationexpiredate" type="text" class="form-control inputField" placeholder="Ablaufdatum" aria-label="certificationexpiredate" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <button class="btn btn-primary btn-lg btn-block" style="margin-top: 20px; border-radius: 10px" type="button" @click="validateBeforeSubmit">Eintrag hinzufügen</button> + </div> + </div> + <div class="row"> + <div class="col-md-12 mb-3"> + </div> + </div> + </form> + </div> + </div> + </div> +</template> + +<script> +import Certification from "@/models/certification"; + +export default { + name: "CreateCertification.vue", + + data(){ + return { + message: "", + certification: new Certification('', '', '', '', '', ''), + } + }, + + methods: { + validateBeforeSubmit() { + this.$validator.validate().then(isValid => { + if (isValid) { + console.log("isvalid") + this.$store.dispatch('certification/insert', this.certification).then( + data => { + this.$router.push('/certification'); + this.message = data.message; + this.successful = true; + }, + error => { + this.message = (error.response && error.response.data) || error.message || error.toString(); + this.successful = false; + } + ); + } else { + + console.log("not isvalid") + } + }); + } + } +} +</script> + +<style scoped> +div.content { + background-color: whitesmoke; + position: fixed; + padding: 1px 16px; + height: 1000px; + overflow-y: auto; +} + +.formTitle { + font-size: 14px; + font-weight: 500; + color: #6B6C6F; +} + +.inputField { + height: 44px; + margin-top: 10px; + padding-left: 70px; + padding-right: 70px; + border-color: #DFE2E6; + border-width: 2px; + border-radius: 10px; +} + +.input_container { + position:relative; +} + +.btn { + margin-bottom: 200px; +} +</style> diff --git a/src/components/CreateEditComponents/EditCertificate.vue b/src/components/CreateEditComponents/EditCertificate.vue new file mode 100644 index 0000000000000000000000000000000000000000..1f69c07d7a0acc1cf168bf280865c3ee58584c58 --- /dev/null +++ b/src/components/CreateEditComponents/EditCertificate.vue @@ -0,0 +1,169 @@ +<template> + <div> + <div class="row col-md-12"> + <div id="content" class="content col-md-12"> + <form @submit="validateBeforeSubmit" class="col-md-10" style="margin-bottom: 20px"> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle" style="margin-top: 30px">Zertifikats-ID</h1> + <div class="input_container"> + <input v-model="certification.certificationid" type="text" class="form-control inputField" placeholder="Zertifikats-ID" aria-label="certificationid" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationtype" type="text" class="form-control inputField" placeholder="Zertifikatsart" aria-label="certificationtype" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationname" type="text" class="form-control inputField" placeholder="Zertifikatsname" aria-label="certificationname" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationowner" type="text" class="form-control inputField" placeholder="Zertifikatsbesitzer" aria-label="certificationowner" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationdate" type="text" class="form-control inputField" placeholder="Austellungsdatum" aria-label="certificationdate" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <h1 class="formTitle">Angebot</h1> + <div class="input_container"> + <input v-model="certification.certificationexpiredate" type="text" class="form-control inputField" placeholder="Ablaufdatum" aria-label="certificationexpiredate" required> + </div> + </div> + </div> + <div class="form-row"> + <div class="col-md-11 mb-3"> + <button class="btn btn-primary btn-lg btn-block" style="margin-top: 20px; border-radius: 10px" type="button" @click="validateBeforeSubmit">Eintrag bearbeiten</button> + </div> + </div> + <div class="row"> + <div class="col-md-12 mb-3"> + </div> + </div> + </form> + </div> + </div> + </div> +</template> + +<script> +import Certification from "@/models/certification"; + +export default { + name: "CreateCertification.vue", + + data(){ + return { + id: JSON.parse(localStorage.getItem('checkedBoxID')), + message: "", + certification: new Certification('', '', '', '', '', ''), + } + }, + + created() { + //this.loadData(); + this.getData(); + }, + + methods: { + + getData(){ + this.$store.dispatch('certification/getByID', this.id).then( + (data) => { + this.certification.certificationid = this.certificationid; + this.certification.certificationtype = data.certificationtype; + this.certification.certificationname = data.certificationname; + this.certification.certificationowner = data.certificationowner; + this.certification.certificationdate = data.certificationdate; + this.certification.certificationexpiredate = data.certificationexpiredate; + + }, + error => { + this.message = (error.response && error.response.data) || error.message || error.toString(); + this.successful = false; + } + ); + }, + + validateBeforeSubmit() { + this.$validator.validate().then(isValid => { + if (isValid) { + this.certification.certificationidid = this.id; + this.$store.dispatch('certification/update', this.certification).then( + data => { + this.$router.push('/certification'); + this.message = data.message; + this.successful = true; + }, + error => { + this.message = (error.response && error.response.data) || error.message || error.toString(); + this.successful = false; + } + ); + } else { + + console.log("not isvalid") + } + }); + }, + + loadData(){ + + } + } +} +</script> + +<style scoped> +div.content { + background-color: whitesmoke; + position: fixed; + padding: 1px 16px; + height: 1000px; + overflow-y: auto; +} + +.formTitle { + font-size: 14px; + font-weight: 500; + color: #6B6C6F; +} + +.inputField { + height: 44px; + margin-top: 10px; + padding-left: 70px; + padding-right: 70px; + border-color: #DFE2E6; + border-width: 2px; + border-radius: 10px; +} + +.input_container { + position:relative; +} + +.btn { + margin-bottom: 200px; +} +</style> \ No newline at end of file diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue index 671159ea4d1fffa47be9a37a271a0858e28036c2..4711ac53bc3af9cbf505ea75a718f4dea54a47ea 100644 --- a/src/components/SideMenu.vue +++ b/src/components/SideMenu.vue @@ -10,6 +10,9 @@ <li :class="[currentPage.includes('teachers') ? activeClass: '', 'navButton']"> <router-link style="margin-bottom: -25px;" to="/teachers" class="navA">Lehrbeauftragtenübersicht</router-link><br> </li> + <li :class="[currentPage.includes('certifications') ? activeClass: '', 'navButton']"> + <router-link style="margin-bottom: -25px;" to="/certifications" class="navA">Fort-und Weiterbildungen</router-link><br> + </li> <li :class="[currentPage.includes('layouts') ? activeClass: '', 'navButton']"> <router-link style="margin-bottom: -25px;" to="/layouts" class="navA">Vorlagen</router-link><br> </li> diff --git a/src/models/certification.js b/src/models/certification.js new file mode 100644 index 0000000000000000000000000000000000000000..bc0a8d4096b663f90d42f374dbe53a4383d5e492 --- /dev/null +++ b/src/models/certification.js @@ -0,0 +1,11 @@ +export default class Certification { + + constructor(certificationid, certificationtype, certificationname, certificationowner, certificationdate, certificationexpiredate) { + this.certificationid = certificationid; + this.certificationtype = certificationtype; + this.certificationname = certificationname; + this.certificationowner = certificationowner; + this.certificationdate = certificationdate; + this.certificationexpiredate = certificationexpiredate; + } +} diff --git a/src/router.js b/src/router.js index db389b1c141fb68091607ef8d5541ed6ca138886..3ca359a55b2b17c66047ee95131eb7bc90b09b0c 100644 --- a/src/router.js +++ b/src/router.js @@ -13,6 +13,9 @@ import CreateCourse from "@/components/CreateEditComponents/CreateCourse"; import EditCourse from "@/components/CreateEditComponents/EditCourse"; import CreateTeacher from "@/components/CreateEditComponents/CreateTeacher"; import EditTeacher from "@/components/CreateEditComponents/EditTeacher"; +import Certifications from "@/components/Certifications"; +import CreateCertification from "@/components/CreateEditComponents/CreateCertification"; +import EditCertificate from "@/components/CreateEditComponents/EditCertificate"; Vue.use(Router) @@ -52,6 +55,22 @@ const router = new Router({ name: 'Eintrag löschen' }, + // Button from Certification + { + path: '/createcertification', + name: 'neuen Eintrag hinzufügen', + component: CreateCertification + }, + { + path: '/editcertification', + name: 'Eintrag bearbeiten', + component: EditCertificate + }, + { + path: '/deletecertification', + name: 'Eintrag löschen' + }, + // LOGIN / REGISTER { path: '/login', @@ -93,6 +112,11 @@ const router = new Router({ path: '/teachers', name: 'teachers', component: Teachers, + }, + { + path: '/certifications', + name: 'certifications', + component: Certifications, } ] })