From e5e4bb2ea17fc0dda390595e285541efe03998dc Mon Sep 17 00:00:00 2001 From: Cris Date: Wed, 21 Aug 2024 13:32:37 +0200 Subject: [PATCH] Added Component LvTemplateUebersicht.js --- .../lehre/lvplanung/LvTemplateUebersicht.js | 267 ++++++++++++++++++ 1 file changed, 267 insertions(+) create mode 100644 public/js/lehre/lvplanung/LvTemplateUebersicht.js diff --git a/public/js/lehre/lvplanung/LvTemplateUebersicht.js b/public/js/lehre/lvplanung/LvTemplateUebersicht.js new file mode 100644 index 000000000..6ffc02881 --- /dev/null +++ b/public/js/lehre/lvplanung/LvTemplateUebersicht.js @@ -0,0 +1,267 @@ +import {CoreFilterCmpt} from '../../components/filter/Filter.js'; +import CoreFormInput from "../../components/Form/Input.js"; + +// Fields used to restructure table data for dataTree +const idField = 'lehrveranstaltung_id'; +const parentIdField = 'lehrveranstaltung_template_id'; +const STUDIENSEMESTER_DROPDOWN_STARTDATE = '2011-01-01'; + +export default { + components: { + CoreFilterCmpt, + CoreFormInput + }, + data: function() { + return { + table: null, + studiensemester: [], + selectedStudiensemester: '', + cbDataTreeStartExpanded: false, // checkbox expand dataTree or not + cbGroupStartOpen: true, // checkbox group organisationseinheit start open + } + }, + watch: { + cbGroupStartOpen(newVal){ + this.table.setGroupStartOpen(newVal); + this.table.setData(); + } + }, + computed: { + tabulatorOptions() { + const self = this; + return { + // NOTE: data is set on table built to await preselected actual Studiensemester + ajaxResponse(url, params, response) { + return self.prepDataTreeData(response.data) // Prepare data for dataTree view + }, + layout: 'fitColumns', + autoResize: false, // prevent auto resizing of table + resizableColumnFit: true, //maintain the fit of columns when resizing + index: 'lehrveranstaltung_id', + selectable: true, + selectableRangeMode: 'click', + dataTree: true, + dataTreeStartExpanded: self.cbDataTreeStartExpanded, + dataTreeChildIndent: 15, //indent child rows by 15 px + groupBy: ["lv_oe_bezeichnung"], + groupToggleElement:"header", //toggle group on click anywhere in the group header + groupStartOpen: self.cbGroupStartOpen, + persistence:{ + filter: false, //persist filter sorting + }, + columns: [ + {title: 'LV-ID', field: 'lehrveranstaltung_id', headerFilter: true, visible: false}, + {title: 'LV Kurzbz', field: 'kurzbz', headerFilter: true, visible:false, width: 70}, + {title: 'STG Kurzbz', field: 'stg_typ_kurzbz', headerFilter: true, visible:true, width: 80}, + {title: 'Lehrtyp Kurzbz', field: 'lehrtyp_kurzbz', headerFilter: true, visible:false, width: 70}, + {title: 'Studiengangtyp', field: 'stg_typ_bezeichnung', headerFilter: true, width: 250}, + {title: 'OrgForm', field: 'orgform_kurzbz', headerFilter: true, width: 70}, + {title: 'Semester', field: 'semester', headerFilter: true, width: 50}, + {title: 'Lehrveranstaltung', field: 'lv_bezeichnung', headerFilter: true, minWidth: 250}, + {title: 'Lehrveranstaltung ENG', field: 'bezeichnung_english', headerFilter: true, minWidth: 250}, + {title: 'ECTS', field: 'ects', headerFilter: true, width: 50, hozAlign: 'right'}, + {title: 'Lehrform', field: 'lehrform_kurzbz', headerFilter: true, width: 50}, + {title: 'Sprache', field: 'sprache', headerFilter: true, width: 100}, + {title: 'Aktiv', field: 'aktiv', width: 50, + formatter:"tickCross", + headerFilter:"tickCross", + headerFilterParams:{"tristate": true}, + hozAlign:"center", + formatterParams: { + tickElement: '', + crossElement: '' + } + }, + {title: 'Studienplan', field: 'studienplan_bezeichnung', headerFilter: true, visible:true, width: 220}, + {title: 'LE-Gruppen', field: 'lehreinheitgruppen_bezeichnung', headerFilter: true, width: 200}, + {title: 'OE Kurzbz', field: 'lv_oe_kurzbz', headerFilter: true, visible:false, minWidth: 80}, + { + title: this.$p.t('global/aktionen'), + field: 'actions', + width: 140, + formatter: (cell, formatterParams, onRendered) => { + let container = document.createElement('div'); + container.className = "d-flex gap-2"; + + let button = document.createElement('button'); + button.className = 'btn btn-outline-secondary'; + button.innerHTML = ' ' + this.$p.t('global/verwalten'); + button.addEventListener('click', (event) => this.openAdminLvTemplate(event, cell.getRow())); + container.append(button); + + return container; + }, + frozen: true + } + ] + } + }, + urlToAdminAllTemplates() { + return FHC_JS_DATA_STORAGE_OBJECT.app_root + + 'vilesci/lehre/lehrveranstaltung.php?stg_kz=99999&semester=-1&orgform=-1'; + } + }, + methods: { + async loadAndSetStudiensemester(){ + const result = await this.$fhcApi + .get('api/frontend/v1/organisation/Studiensemester/getAll', {start: STUDIENSEMESTER_DROPDOWN_STARTDATE}) + .then(result => this.studiensemester = result.data ) + .then(() => this.$fhcApi.get('api/frontend/v1/organisation/Studiensemester/getAktNext') ) // Get actual Studiensemester + .then(result => this.selectedStudiensemester = result.data[0].studiensemester_kurzbz ) // Preselect Studiensemester + .catch(error => this.$fhcAlert.handleSystemError(error) ); + }, + async onTableBuilt(){ + + this.table = this.$refs.lvTemplateUebersichtTable.tabulator; + + // Await Studiensemester + await this.loadAndSetStudiensemester(); + + // Set table data + // TODO change with brandnew FHCAPI getUrl after merge master + this.table.setData(FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + + '/api/frontend/v1/education/Lehrveranstaltung/getTemplateLvTree' + + '?studiensemester_kurzbz=' + this.selectedStudiensemester + ); + + // Await phrases categories + await this.$p.loadCategory(['lehre']); + + // Replace column titles with phrasen + this.table.updateColumnDefinition('lv_bezeichnung', {title: this.$p.t('lehre', 'lehrveranstaltung')}); + + }, + onChangeStudiensemester(){ + // Reset table data + // TODO change with brandnew FHCAPI getUrl after merge master + // ...danach im SWB auch die core rest clients raus bzw. ggf änderung requests auf api/frontend/... wie hier und core rest client ggf raus. + this.table.setData(FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + + '/api/frontend/v1/education/Lehrveranstaltung/getTemplateLvTree' + + '?studiensemester_kurzbz=' + this.selectedStudiensemester + ); + }, + openAdminLvTemplate(event, row){ + const url = FHC_JS_DATA_STORAGE_OBJECT.app_root + + 'vilesci/lehre/lehrveranstaltung.php?stg_kz=&semester=-1&orgform=-1&lehrveranstaltung_id=' + row.getData().lehrveranstaltung_id; + + window.open(url, '_blank').focus(); + }, + prepDataTreeData(data){ + let toDelete = []; + + // loop through all data + for (let childIdx = 0; childIdx < data.length; childIdx++) + { + let child = data[childIdx]; + + // if it has parent id, it is a child + if (child[parentIdField]) + { + // append the child on the right place. If parent found, mark original sw child on 0 level for deleting + if (this._appendChild(data, child)) toDelete.push(childIdx); + } + } + + // delete the marked children from 0 level + for (let counter = 0; counter < toDelete.length; counter++) + { + // decrease index by counter as index of data array changes after every deletion + data.splice(toDelete[counter] - counter, 1); + } + + return data; + }, + _appendChild(data, child) { + // get parent id + let parentId = child[parentIdField]; + + // loop thorugh all data + for (let parentIdx = 0; parentIdx < data.length; parentIdx++) + { + let parent = data[parentIdx]; + + // if it's the parent + if (parent[idField] == parentId) + { + // create children array if not done yet + if (!parent._children) parent._children = []; + + // if child is not included in children array, append the child + if (!parent._children.includes(child)) parent._children.push(child); + + // parent found + return true; + } + // search children for parents + else if (parent._children) this._appendChild(parent._children, child); + } + + // parent not found + return false; + }, + reloadTabulator() { + if (this.table !== null && this.table !== undefined) + { + for (let option in this.tabulatorOptions) + { + if (this.table.options.hasOwnProperty(option)) + this.table.options[option] = this.tabulatorOptions[option]; + } + this.$refs.lvTemplateUebersichtTable.reloadTable(); + } + }, + }, + template: ` +
+
+
{{ $p.t('lehre/lvTemplatesUebersicht') }}
+
+ + + +
+
+
+
+ + + +
+
+ +
+` +};