s.probst/OpenXE
1
0
Fork 0
mirror of https://github.com/OpenXE-org/OpenXE.git synced 2024-12-24 13:40:29 +01:00
Code Issues Projects Releases Wiki Activity

Update primevue to v4

Browse Source
This commit is contained in:
Andreas Palm 2024-10-04 22:49:08 +02:00
parent eddd41dfd6
commit b59bd65635
18 changed files with 2451 additions and 286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
classes/Modules/MatrixProduct/www/js/AddGlobalToArticle.vue
View File

@ -1,5 +1,5 @@
<!--
SPDX-FileCopyrightText: 2023 Andreas Palm
SPDX-FileCopyrightText: 2023-2024 Andreas Palm
SPDX-License-Identifier: LicenseRef-EGPL-3.1
-->
@ -9,6 +9,7 @@ import {ref, onMounted} from "vue";
import axios from "axios";
import Dialog from "primevue/dialog";
import Listbox from "primevue/listbox";
import Fluid from "primevue/fluid";
import Button from "primevue/button";
import {AlertErrorHandler} from '@res/js/ajaxErrorHandler';
@ -36,17 +37,19 @@ async function save() {
<template>
<Dialog visible modal header="Globale Optionen hinzufügen" style="width: 500px" @update:visible="emit('close')">
<div v-if="model" class="grid gap-1" style="grid-template-columns: 25% 75%">
<label for="matrixProductOptions" style="padding-top: 5px;">Optionen:</label>
<Listbox multiple
:options="model"
optionGroupLabel="name"
optionGroupChildren="options"
optionLabel="name"
optionValue="id"
listStyle="height: 200px"
v-model="selected" />
</div>
<Fluid>
<div v-if="model" class="grid gap-1" style="grid-template-columns: 25% 75%">
<label for="matrixProductOptions" style="padding-top: 5px;">Optionen:</label>
<Listbox multiple
:options="model"
option-group-label="name"
option-group-children="options"
option-label="name"
option-value="id"
list-style="height: 200px"
v-model="selected" />
</div>
</Fluid>
<template #footer>
<Button label="ABBRECHEN" @click="emit('close')" />
<Button label="HINZUFÜGEN" @click="save" :disabled="selected.length === 0"/>

33
classes/Modules/MatrixProduct/www/js/CreateMissing.vue
View File

@ -1,7 +1,14 @@
<!--
SPDX-FileCopyrightText: 2023-2024 Andreas Palm
SPDX-License-Identifier: LicenseRef-EGPL-3.1
-->
<script setup>
import Button from "primevue/button";
import Dialog from "primevue/dialog";
import MultiSelect from "primevue/multiselect";
import Fluid from "primevue/fluid";
import {onMounted, ref} from "vue";
import axios from "axios";
import {AlertErrorHandler} from "@res/js/ajaxErrorHandler";
@ -16,27 +23,33 @@ const model = ref({});
onMounted(async () => {
model.value = await axios.get('index.php?module=matrixprodukt&action=artikel&cmd=createMissing', {
params: {...props}
}).then(response => { return {...props, ...response.data}})
}).then(response => {
return {...props, ...response.data}
})
})
async function save() {
await axios.post('index.php?module=matrixprodukt&action=artikel&cmd=createMissing', {...props, ...model.value})
.catch(AlertErrorHandler)
.then(() => {emit('save')});
.then(() => {
emit('save')
});
}
</script>
<template>
<Dialog visible modal header="Variante" style="width: 500px" @update:visible="emit('close')">
<div class="grid gap-1" style="grid-template-columns: 25% 75%;">
<template v-for="group in model.groups">
<label>{{ group.name }}</label>
<MultiSelect v-model="group.selected" :options="group.options" optionLabel="name" optionValue="value" />
</template>
</div>
<Fluid>
<div class="grid gap-1" style="grid-template-columns: 25% 75%;" autofocus>
<template v-for="group in model.groups">
<label>{{ group.name }}</label>
<MultiSelect v-model="group.selected" :options="group.options" option-label="name" option-value="value"/>
</template>
</div>
</Fluid>
<template #footer>
<Button label="ABBRECHEN" @click="emit('close')" />
<Button label="ERSTELLEN" @click="save" />
<Button label="ABBRECHEN" @click="emit('close')"/>
<Button label="ERSTELLEN" @click="save"/>
</template>
</Dialog>
</template>

48
classes/Modules/MatrixProduct/www/js/GroupEdit.vue
View File

@ -1,5 +1,5 @@
<!--
SPDX-FileCopyrightText: 2023 Andreas Palm
SPDX-FileCopyrightText: 2023-2024 Andreas Palm
SPDX-License-Identifier: LicenseRef-EGPL-3.1
-->
@ -9,6 +9,10 @@ import {ref, onMounted} from "vue";
import axios from "axios";
import Dialog from "primevue/dialog";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import InputNumber from "primevue/inputnumber";
import Checkbox from "primevue/checkbox";
import Fluid from "primevue/fluid";
import {AlertErrorHandler} from "@res/js/ajaxErrorHandler";
import AutoComplete from "@res/vue/AutoComplete.vue";
@ -44,26 +48,28 @@ async function save() {
</script>
<template>
<Dialog visible modal header="Gruppe anlegen/bearbeiten" style="width: 500px" @update:visible="emit('close')" class="p-fluid">
<div class="grid gap-1" style="grid-template-columns: 25% 75%">
<label for="matrixProduct_group_name">Name:</label>
<input type="text" v-model="model.name" required />
<label for="matrixProduct_group_nameExternal">Name Extern:</label>
<input type="text" v-model="model.nameExternal" />
<label for="matrixProduct_group_project">Projekt:</label>
<AutoComplete
v-model="model.project"
:optionLabel="item => [item.abkuerzung, item.name].join(' ')"
ajaxFilter="projektname"
forceSelection
/>
<label v-if="articleId" for="matrixProduct_group_sort">Sortierung:</label>
<input v-if="articleId" type="text" v-model="model.sort">
<label for="matrixProduct_group_required">Pflicht:</label>
<input type="checkbox" v-model="model.required" class="justify-self-start">
<label for="matrixProduct_group_active">Aktiv:</label>
<input type="checkbox" v-model="model.active" class="justify-self-start">
</div>
<Dialog visible modal header="Gruppe anlegen/bearbeiten" style="width: 500px" @update:visible="emit('close')">
<Fluid>
<div class="grid gap-1" style="grid-template-columns: 25% 75%">
<label for="matrixProduct_group_name">Name:</label>
<InputText id="matrixProduct_group_name" v-model="model.name" autofocus required />
<label for="matrixProduct_group_nameExternal">Name Extern:</label>
<InputText id="matrixProduct_group_nameExternal" v-model="model.nameExternal" />
<label for="matrixProduct_group_project">Projekt:</label>
<AutoComplete input-id="matrixProduct_group_project"
v-model="model.project"
:optionLabel="item => [item.abkuerzung, item.name].join(' ')"
ajaxFilter="projektname"
forceSelection
/>
<label v-if="articleId" for="matrixProduct_group_sort">Sortierung:</label>
<InputNumber v-if="articleId" v-model="model.sort" input-id="matrixProduct_group_sort" show-buttons />
<label for="matrixProduct_group_required">Pflicht:</label>
<Checkbox v-model="model.required" binary />
<label for="matrixProduct_group_active">Aktiv:</label>
<Checkbox v-model="model.active" binary />
</div>
</Fluid>
<template #footer>
<Button label="ABBRECHEN" @click="emit('close')" />
<Button label="SPEICHERN" @click="save" :disabled="!model.name"/>

32
classes/Modules/MatrixProduct/www/js/OptionEdit.vue
View File

@ -1,5 +1,5 @@
<!--
SPDX-FileCopyrightText: 2023 Andreas Palm
SPDX-FileCopyrightText: 2023-2024 Andreas Palm
SPDX-License-Identifier: LicenseRef-EGPL-3.1
-->
@ -9,6 +9,10 @@ import {ref, onMounted} from "vue";
import axios from "axios";
import Button from "primevue/button";
import Dialog from "primevue/dialog";
import Fluid from "primevue/fluid";
import InputText from "primevue/inputtext";
import InputNumber from "primevue/inputnumber";
import Checkbox from "primevue/checkbox";
import {AlertErrorHandler} from "@res/js/ajaxErrorHandler";
const props = defineProps({
@ -43,18 +47,20 @@ async function save() {
<template>
<Dialog visible modal header="Option anlegen/bearbeiten" style="width: 500px" @update:visible="emit('close')">
<div class="grid gap-1" style="grid-template-columns: 25% 75%">
<label for="matrixProduct_option_name">Name:</label>
<input id="matrixProduct_option_name" type="text" v-model="model.name" required />
<label for="matrixProduct_option_nameExternal">Name Extern:</label>
<input id="matrixProduct_option_nameExternal" type="text" v-model="model.nameExternal" />
<label for="matrixProduct_option_articleNumberSuffix">Artikelnummer-Suffix:</label>
<input id="matrixProduct_option_articleNumberSuffix" type="text" v-model="model.articleNumberSuffix" />
<label for="matrixProduct_option_sort">Sortierung:</label>
<input id="matrixProduct_option_sort" type="text" v-model="model.sort" />
<label for="matrixProduct_option_active">Aktiv:</label>
<input id="matrixProduct_option_active" type="checkbox" v-model="model.active" class="justify-self-start" />
</div>
<Fluid>
<div class="grid gap-1" style="grid-template-columns: 25% 75%">
<label for="matrixProduct_option_name">Name:</label>
<InputText id="matrixProduct_option_name" v-model="model.name" required autofocus />
<label for="matrixProduct_option_nameExternal">Name Extern:</label>
<InputText id="matrixProduct_option_nameExternal" v-model="model.nameExternal" />
<label for="matrixProduct_option_articleNumberSuffix">Artikelnummer-Suffix:</label>
<InputText id="matrixProduct_option_articleNumberSuffix" v-model="model.articleNumberSuffix" />
<label for="matrixProduct_option_sort">Sortierung:</label>
<InputNumber input-id="matrixProduct_option_sort" v-model="model.sort" show-buttons />
<label for="matrixProduct_option_active">Aktiv:</label>
<Checkbox input-id="matrixProduct_option_active" v-model="model.active" binary />
</div>
</Fluid>
<template #footer>
<Button label="ABBRECHEN" @click="emit('close')" />
<Button label="SPEICHERN" @click="save" :disabled="!model.name" />

44
classes/Modules/MatrixProduct/www/js/Translation.vue
View File

@ -1,5 +1,5 @@
<!--
SPDX-FileCopyrightText: 2023 Andreas Palm
SPDX-FileCopyrightText: 2023-2024 Andreas Palm
SPDX-License-Identifier: LicenseRef-EGPL-3.1
-->
@ -9,7 +9,9 @@ import {ref, onMounted} from "vue";
import axios from "axios";
import Dialog from "primevue/dialog";
import Button from "primevue/button";
import Dropdown from "primevue/dropdown";
import Fluid from "primevue/fluid";
import InputText from "primevue/inputtext";
import Select from "primevue/select";
import {AlertErrorHandler} from "@res/js/ajaxErrorHandler";
@ -59,24 +61,26 @@ function ready() {
</script>
<template>
<Dialog visible modal header="Übersetzung anlegen/bearbeiten" style="width: 500px" @update:visible="emit('close')" class="p-fluid">
<div class="grid gap-1" style="grid-template-columns: 25% 75%">
<label for="matrixProduct_nameFrom">DE Name:</label>
<input type="text" v-model="model.nameFrom" required />
<label for="matrixProduct_nameExternalFrom">DE Name Extern:</label>
<input type="text" v-model="model.nameExternalFrom" />
<label for="matrixProduct_languageTo">Sprache:</label>
<Dropdown
v-model="model.languageTo"
:options="languages"
option-label="bezeichnung_de"
option-value="iso"
/>
<label for="matrixProduct_nameTo">Übersetzung Name:</label>
<input type="text" v-model="model.nameTo" required>
<label for="matrixProduct_nameTo">Übersetzung Name Extern:</label>
<input type="text" v-model="model.nameExternalTo" :required="model.nameExternalFrom">
</div>
<Dialog visible modal header="Übersetzung anlegen/bearbeiten" style="width: 500px" @update:visible="emit('close')">
<Fluid>
<div class="grid gap-1" style="grid-template-columns: 25% 75%">
<label for="matrixProduct_nameFrom">DE Name:</label>
<InputText v-model="model.nameFrom" required autofocus />
<label for="matrixProduct_nameExternalFrom">DE Name Extern:</label>
<InputText v-model="model.nameExternalFrom" />
<label for="matrixProduct_languageTo">Sprache:</label>
<Select
v-model="model.languageTo"
:options="languages"
option-label="bezeichnung_de"
option-value="iso"
/>
<label for="matrixProduct_nameTo">Übersetzung Name:</label>
<InputText v-model="model.nameTo" required />
<label for="matrixProduct_nameTo">Übersetzung Name Extern:</label>
<InputText v-model="model.nameExternalTo" :required="model.nameExternalFrom" />
</div>
</Fluid>
<template #footer>
<Button label="ABBRECHEN" @click="emit('close')" />
<Button label="SPEICHERN" @click="save" :disabled="!ready()"/>

32
classes/Modules/MatrixProduct/www/js/Variant.vue
View File

@ -1,5 +1,5 @@
<!--
SPDX-FileCopyrightText: 2023 Andreas Palm
SPDX-FileCopyrightText: 2023-2024 Andreas Palm
SPDX-License-Identifier: LicenseRef-EGPL-3.1
-->
@ -8,7 +8,8 @@ SPDX-License-Identifier: LicenseRef-EGPL-3.1
import AutoComplete from "@res/vue/AutoComplete.vue";
import Button from "primevue/button";
import Dialog from "primevue/dialog";
import Dropdown from "primevue/dropdown";
import Select from "primevue/select";
import Fluid from "primevue/fluid";
import {onMounted, ref} from "vue";
import axios from "axios";
import {AlertErrorHandler} from "@res/js/ajaxErrorHandler";
@ -41,18 +42,21 @@ const buttons = {
<template>
<Dialog visible modal header="Variante" style="width: 500px" @update:visible="emit('close')">
<div class="grid gap-1" style="grid-template-columns: 25% 75%;">
<label>Artikel</label>
<AutoComplete v-model="model.variant"
:optionLabel="(item) => [item.nummer, item.name].join(' ')"
ajax-filter="artikelnummer"
forceSelection
/>
<template v-for="group in model.groups">
<label>{{ group.name }}</label>
<Dropdown v-model="group.selected" :options="group.options" optionLabel="name" optionValue="value" />
</template>
</div>
<Fluid>
<div class="grid gap-1" style="grid-template-columns: 25% 75%;">
<label>Artikel</label>
<AutoComplete v-model="model.variant"
:option-label="(item) => [item.nummer, item.name].join(' ')"
ajax-filter="artikelnummer"
force-selection
autofocus
/>
<template v-for="group in model.groups">
<label>{{ group.name }}</label>
<Select v-model="group.selected" :options="group.options" option-label="name" option-value="value" />
</template>
</div>
</Fluid>
<template #footer>
<Button label="ABBRECHEN" @click="emit('close')" />
<Button label="SPEICHERN" @click="save" />

4
classes/Modules/MatrixProduct/www/js/entry.js
View File

@ -1,8 +1,8 @@
// SPDX-FileCopyrightText: 2023 Andreas Palm
// SPDX-FileCopyrightText: 2023-2024 Andreas Palm
//
// SPDX-License-Identifier: LicenseRef-EGPL-3.1
import App from "./App.vue";
import {createVueApp} from "@res/js/vue";
const app = createVueApp(App).mount('#vueapp')
createVueApp(App).mount('#vueapp')

83
package-lock.json generated
View File

@ -5,10 +5,13 @@
"packages": {
"": {
"dependencies": {
"@primevue/icons": "^4.0.7",
"@primevue/themes": "^4.0.7",
"@vitejs/plugin-vue": "^5",
"axios": "^1",
"glob": "^11",
"primevue": "^3",
"primeicons": "^7.0.0",
"primevue": "^4",
"vite": "^5",
"vue": "^3"
},
@ -442,6 +445,63 @@
"node": ">=14"
}
},
"node_modules/@primeuix/styled": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
"integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
"dependencies": {
"@primeuix/utils": "^0.0.5"
},
"engines": {
"node": ">=12.11.0"
}
},
"node_modules/@primeuix/utils": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
"integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
"engines": {
"node": ">=12.11.0"
}
},
"node_modules/@primevue/core": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.7.tgz",
"integrity": "sha512-SvWiNBEeR6hm4wjnze+rITUjHMFLwIzpRFlq+GqmJyZmjJy4h8UUksi0EoyqAWCAwKgmwlxY6XNqGJmMVyOguQ==",
"dependencies": {
"@primeuix/styled": "^0.0.5",
"@primeuix/utils": "^0.0.5"
},
"engines": {
"node": ">=12.11.0"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/@primevue/icons": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.7.tgz",
"integrity": "sha512-tj4dfRdV5iN6O0mbkpjhMsGlT3wZTqOPL779ndY5gKuCwN5zcFmKmABWVQmr/ClRivnMkw6Yr1x6gRTV/N0ydg==",
"dependencies": {
"@primeuix/utils": "^0.0.5",
"@primevue/core": "4.0.7"
},
"engines": {
"node": ">=12.11.0"
}
},
"node_modules/@primevue/themes": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.7.tgz",
"integrity": "sha512-ZbDUrpBmtuqdeegNwUaJTubaLDBBJWOc4Z6UoQM3DG2c7EAE19wQbuh+cG9zqA7sT/Xsp+ACC/Z9e4FnfqB55g==",
"dependencies": {
"@primeuix/styled": "^0.0.5"
},
"engines": {
"node": ">=12.11.0"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.22.5",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.5.tgz",
@ -2606,12 +2666,23 @@
"node": ">=0.10.0"
}
},
"node_modules/primeicons": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
"integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
},
"node_modules/primevue": {
"version": "3.53.0",
"resolved": "https://registry.npmjs.org/primevue/-/primevue-3.53.0.tgz",
"integrity": "sha512-mRqTPGGZX+3AQokaCCjxLVSNEjGEA7LaPdBT4qSpGEdMstK6vhUBCxgLH7IPjHudbaSi4Xo3CIO62pXQxbz8dQ==",
"peerDependencies": {
"vue": "^3.0.0"
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.7.tgz",
"integrity": "sha512-88qazHqldkqsCxvhjnjO65XMBfJyHQoFW3BQvrJYO6RqPheHB4f7cY61eqtBpJAjnM5x+YKTZiWx/gBuUzqT7Q==",
"dependencies": {
"@primeuix/styled": "^0.0.5",
"@primeuix/utils": "^0.0.5",
"@primevue/core": "4.0.7",
"@primevue/icons": "4.0.7"
},
"engines": {
"node": ">=12.11.0"
}
},
"node_modules/promise-polyfill": {

5
package.json
View File

@ -13,10 +13,13 @@
"raml2html-werk-theme": "^1.3.4"
},
"dependencies": {
"@primevue/icons": "^4.0.7",
"@primevue/themes": "^4.0.7",
"@vitejs/plugin-vue": "^5",
"axios": "^1",
"glob": "^11",
"primevue": "^3",
"primeicons": "^7.0.0",
"primevue": "^4",
"vite": "^5",
"vue": "^3"
}

6
resources/css/vue.css
View File

@ -28,10 +28,6 @@
gap: 0.25rem;
}
.grid label {
.grid label, .grid .p-checkbox {
padding-top: 5px;
}
.grid input[type=text] {
width: 100%;
}

17
resources/js/vue.js
View File

@ -3,10 +3,23 @@
// SPDX-License-Identifier: LicenseRef-EGPL-3.1
import '@res/css/vue.css';
import '@res/css/primevue/_base.css';
import {createApp} from "vue";
import PrimeVue from "primevue/config";
import Aura from '@primevue/themes/aura';
import {definePreset} from "@primevue/themes";
const OpenXePreset = definePreset(Aura, {
});
export function createVueApp(rootComponent, rootProps) {
return createApp(rootComponent, rootProps).use(PrimeVue);
return createApp(rootComponent, rootProps)
.use(PrimeVue, {
theme: {
preset: OpenXePreset,
options: {
darkModeSelector: '.openXeDarkMode'
}
}
});
}

6
resources/vue/AutoComplete.vue
View File

@ -8,12 +8,13 @@ SPDX-License-Identifier: AGPL-3.0-only
import {ref} from "vue";
import AutoComplete from "primevue/autocomplete";
import axios from "axios";
import SearchIcon from "primevue/icons/search";
import SearchIcon from "@primevue/icons/search";
const props = defineProps({
ajaxFilter: String,
modelValue: null,
forceSelection: Boolean
forceSelection: Boolean,
inputId: String,
});
const emit = defineEmits(['update:modelValue']);
@ -42,6 +43,7 @@ async function search(event) {
dataKey="id"
:forceSelection="forceSelection"
dropdown
:input-id="inputId"
>
<template #dropdownicon>
<SearchIcon />

4
www/dist/.vite/manifest.json vendored
View File

@ -1,11 +1,11 @@
{
"classes/Modules/MatrixProduct/www/js/entry.js": {
"file": "modules/MatrixProduct-C8PPYLoy.js",
"file": "modules/MatrixProduct-BFgn1wkj.js",
"name": "modules/MatrixProduct",
"src": "classes/Modules/MatrixProduct/www/js/entry.js",
"isEntry": true,
"css": [
"assets/MatrixProduct-4Oiurn1N.css"
"assets/MatrixProduct-DbDUAZJF.css"
]
}
}

1
www/dist/assets/MatrixProduct-4Oiurn1N.css vendored
View File

File diff suppressed because one or more lines are too long

1
www/dist/assets/MatrixProduct-DbDUAZJF.css vendored Normal file
View File

@ -0,0 +1 @@
.vueAction{cursor:pointer}.flex{display:flex}.grid{display:grid}.flex-align-center{align-items:center}.justify-self-start{justify-self:start}.gap-1{gap:.25rem}.grid label,.grid .p-checkbox{padding-top:5px}

2218
www/dist/modules/MatrixProduct-BFgn1wkj.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

175
www/dist/modules/MatrixProduct-C8PPYLoy.js vendored
View File

File diff suppressed because one or more lines are too long

1
www/themes/new/css/styles.css
View File

@ -9,6 +9,7 @@ body {
html {
box-sizing: border-box;
font-size: 11px;
}
*,