Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 10 Pull requests Projects Releases 7 Packages Wiki Activity Actions

form state rewrite

Browse source
This commit is contained in:
Julian Krauser 2024-09-15 13:52:54 +02:00
parent 5e50b85631
commit b0ea9d13e7
40 changed files with 1123 additions and 1070 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
package-lock.json generated
View file

@ -11,9 +11,11 @@
"dependencies": {
"@headlessui/vue": "^1.7.13",
"@heroicons/vue": "^2.1.5",
"@types/lodash.isequal": "^4.5.8",
"axios": "^0.26.1",
"jwt-decode": "^4.0.0",
"lodash.clonedeep": "^4.5.0",
"lodash.isequal": "^4.5.0",
"nprogress": "^0.2.0",
"pdf-dist": "^1.0.0",
"pinia": "^2.1.7",
@ -3068,7 +3070,6 @@
"version": "4.17.7",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
"integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/lodash.clonedeep": {
@ -3081,6 +3082,15 @@
"@types/lodash": "*"
}
},
"node_modules/@types/lodash.isequal": {
"version": "4.5.8",
"resolved": "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.8.tgz",
"integrity": "sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==",
"license": "MIT",
"dependencies": {
"@types/lodash": "*"
}
},
"node_modules/@types/node": {
"version": "20.14.15",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.15.tgz",
@ -6624,6 +6634,12 @@
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"dev": true
},
"node_modules/lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
"license": "MIT"
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

2
package.json
View file

@ -29,6 +29,7 @@
"axios": "^0.26.1",
"jwt-decode": "^4.0.0",
"lodash.clonedeep": "^4.5.0",
"lodash.isequal": "^4.5.0",
"nprogress": "^0.2.0",
"pdf-dist": "^1.0.0",
"pinia": "^2.1.7",
@ -44,6 +45,7 @@
"@tsconfig/node20": "^20.1.4",
"@types/eslint": "~9.6.0",
"@types/lodash.clonedeep": "^4.5.9",
"@types/lodash.isequal": "^4.5.8",
"@types/node": "^20.14.5",
"@types/nprogress": "^0.2.0",
"@types/qrcode": "^1.5.5",

29
src/components/admin/Permission.vue
View file

@ -66,8 +66,10 @@
</div>
</div>
<div class="flex flex-row gap-2 self-end pt-4">
<button primary-outline class="!w-fit" @click="reset" :disabled="!detect_change">verwerfen</button>
<button primary class="!w-fit" @click="submit" :disabled="status != null">speichern</button>
<button primary-outline class="!w-fit" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
<button primary class="!w-fit" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
@ -89,7 +91,8 @@ import { sectionsAndModules, permissionSections, permissionTypes } from "@/types
import { mapState, mapActions } from "pinia";
import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { useAbilityStore } from "@/stores/ability";
import _cloneDeep from "lodash.clonedeep";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
@ -111,39 +114,35 @@ export default defineComponent({
default: null,
},
},
emits: ["savePermissions", "resetStatus"],
emits: ["savePermissions"],
data() {
return {
isAdmin: false,
sections: [] as Array<PermissionSection>,
permissionStructure: {} as SectionsAndModulesObject,
permissionUpdate: {} as PermissionObject,
detect_change: false as boolean,
};
},
computed: {
...mapState(useAbilityStore, ["_can"]),
canSaveOrReset(): boolean {
return isEqual(this.permissions, this.permissionUpdate);
},
},
mounted() {
this.sections = permissionSections;
this.permissionStructure = sectionsAndModules;
this.permissionUpdate = _cloneDeep(this.permissions);
this.permissionUpdate = cloneDeep(this.permissions);
this.isAdmin = this.permissions.admin ?? false;
},
methods: {
toggleAdmin(e: Event) {
this.detect_change = true;
this.$emit("resetStatus");
const target = e.target as HTMLInputElement;
this.isAdmin = target.checked ?? false;
this.permissionUpdate.admin = this.isAdmin;
},
togglePermission(type: PermissionType, section: PermissionSection, modul?: PermissionModule) {
this.detect_change = true;
this.$emit("resetStatus");
let permissions = [] as Array<PermissionType> | "*";
if (!modul) {
permissions = this.permissionUpdate[section]?.all ?? [];
@ -177,15 +176,11 @@ export default defineComponent({
}
},
reset() {
this.detect_change = false;
this.permissionUpdate = _cloneDeep(this.permissions);
this.permissionUpdate = cloneDeep(this.permissions);
this.isAdmin = this.permissions.admin ?? false;
},
submit() {
this.$emit("savePermissions", this.permissionUpdate);
this.detect_change = false;
},
},
});

45
src/components/admin/settings/award/CreateAwardModal.vue
View file

@ -10,18 +10,16 @@
<input type="text" id="award" required />
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -35,45 +33,40 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useAwardStore } from "@/stores/admin/award";
import type { CreateOrUpdateAwardViewModel } from "@/viewmodels/admin/award.models";
import type { CreateAwardViewModel } from "@/viewmodels/admin/award.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
createStatus() {
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
computed: {
...mapState(useAwardStore, ["createStatus"]),
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useAwardStore, ["createAward", "resetStatus"]),
...mapActions(useAwardStore, ["createAward"]),
triggerCreate(e: any) {
let formData = e.target.elements;
let createAward: CreateOrUpdateAwardViewModel = {
let createAward: CreateAwardViewModel = {
award: formData.award.value,
};
this.createAward(createAward);
this.createAward(createAward)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

38
src/components/admin/settings/award/DeleteAwardModal.vue
View file

@ -6,17 +6,17 @@
<br />
<div class="flex flex-row gap-2">
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -37,21 +37,10 @@ import { useAwardStore } from "@/stores/admin/award";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
deleteStatus() {
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
@ -59,16 +48,25 @@ export default defineComponent({
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useAwardStore, ["awards", "deleteStatus"]),
...mapState(useAwardStore, ["awards"]),
award() {
return this.awards.find((r) => r.id == this.data);
},
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useAwardStore, ["deleteAward", "resetStatus"]),
...mapActions(useAwardStore, ["deleteAward"]),
triggerDelete() {
this.deleteAward(this.data);
this.deleteAward(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

42
src/components/admin/settings/communicationType/CreateCommunicationTypeModal.vue
View file

@ -56,18 +56,16 @@
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -81,7 +79,7 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
import type { CreateOrUpdateCommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
import type { CreateCommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
</script>
@ -90,21 +88,12 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
selectedFields: [] as Array<string>,
};
},
watch: {
createStatus() {
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
this.fetchAvailableFields();
},
beforeUnmount() {
@ -113,18 +102,27 @@ export default defineComponent({
} catch (error) {}
},
computed: {
...mapState(useCommunicationTypeStore, ["createStatus", "availableFields"]),
...mapState(useCommunicationTypeStore, ["availableFields"]),
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useCommunicationTypeStore, ["createCommunicationType", "fetchAvailableFields", "resetStatus"]),
...mapActions(useCommunicationTypeStore, ["createCommunicationType", "fetchAvailableFields"]),
triggerCreate(e: any) {
let formData = e.target.elements;
let createCommunicationType: CreateOrUpdateCommunicationTypeViewModel = {
let createCommunicationType: CreateCommunicationTypeViewModel = {
type: formData.communicationType.value,
fields: this.selectedFields,
};
this.createCommunicationType(createCommunicationType);
this.createCommunicationType(createCommunicationType)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

38
src/components/admin/settings/communicationType/DeleteCommunicationTypeModal.vue
View file

@ -6,17 +6,17 @@
<br />
<div class="flex flex-row gap-2">
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -36,21 +36,10 @@ import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
deleteStatus() {
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
@ -58,16 +47,25 @@ export default defineComponent({
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useCommunicationTypeStore, ["communicationTypes", "deleteStatus"]),
...mapState(useCommunicationTypeStore, ["communicationTypes"]),
communicationType() {
return this.communicationTypes.find((r) => r.id == this.data);
},
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useCommunicationTypeStore, ["deleteCommunicationType", "resetStatus"]),
...mapActions(useCommunicationTypeStore, ["deleteCommunicationType"]),
triggerDelete() {
this.deleteCommunicationType(this.data);
this.deleteCommunicationType(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

45
src/components/admin/settings/executivePosition/CreateExecutivePositionModal.vue
View file

@ -10,18 +10,16 @@
<input type="text" id="executivePosition" required />
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -35,45 +33,40 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useExecutivePositionStore } from "@/stores/admin/executivePosition";
import type { CreateOrUpdateExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
import type { CreateExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
createStatus() {
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
computed: {
...mapState(useExecutivePositionStore, ["createStatus"]),
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useExecutivePositionStore, ["createExecutivePosition", "resetStatus"]),
...mapActions(useExecutivePositionStore, ["createExecutivePosition"]),
triggerCreate(e: any) {
let formData = e.target.elements;
let createExecutivePosition: CreateOrUpdateExecutivePositionViewModel = {
let createExecutivePosition: CreateExecutivePositionViewModel = {
position: formData.executivePosition.value,
};
this.createExecutivePosition(createExecutivePosition);
this.createExecutivePosition(createExecutivePosition)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

38
src/components/admin/settings/executivePosition/DeleteExecutivePositionModal.vue
View file

@ -6,17 +6,17 @@
<br />
<div class="flex flex-row gap-2">
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -37,21 +37,10 @@ import { useExecutivePositionStore } from "@/stores/admin/executivePosition";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
deleteStatus() {
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
@ -59,16 +48,25 @@ export default defineComponent({
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useExecutivePositionStore, ["executivePositions", "deleteStatus"]),
...mapState(useExecutivePositionStore, ["executivePositions"]),
executivePosition() {
return this.executivePositions.find((r) => r.id == this.data);
},
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useExecutivePositionStore, ["deleteExecutivePosition", "resetStatus"]),
...mapActions(useExecutivePositionStore, ["deleteExecutivePosition"]),
triggerDelete() {
this.deleteExecutivePosition(this.data);
this.deleteExecutivePosition(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

45
src/components/admin/settings/membershipStatus/CreateMembershipStatusModal.vue
View file

@ -10,18 +10,16 @@
<input type="text" id="membershipStatus" required />
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -35,45 +33,40 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useMembershipStatusStore } from "@/stores/admin/membershipStatus";
import type { CreateOrUpdateMembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
import type { CreateMembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
createStatus() {
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
computed: {
...mapState(useMembershipStatusStore, ["createStatus"]),
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useMembershipStatusStore, ["createMembershipStatus", "resetStatus"]),
...mapActions(useMembershipStatusStore, ["createMembershipStatus"]),
triggerCreate(e: any) {
let formData = e.target.elements;
let createMembershipStatus: CreateOrUpdateMembershipStatusViewModel = {
let createMembershipStatus: CreateMembershipStatusViewModel = {
status: formData.membershipStatus.value,
};
this.createMembershipStatus(createMembershipStatus);
this.createMembershipStatus(createMembershipStatus)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

44
src/components/admin/settings/membershipStatus/DeleteMembershipStatusModal.vue
View file

@ -1,22 +1,22 @@
<template>
<div class="w-full md:max-w-md">
<div class="flex flex-col items-center">
<p class="text-xl font-medium">Auszeichnung {{ membershipStatus?.status }} löschen?</p>
<p class="text-xl font-medium">Auszeichnung {{ mStatus?.status }} löschen?</p>
</div>
<br />
<div class="flex flex-row gap-2">
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -37,21 +37,10 @@ import { useMembershipStatusStore } from "@/stores/admin/membershipStatus";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
deleteStatus() {
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
@ -59,16 +48,25 @@ export default defineComponent({
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useMembershipStatusStore, ["membershipStatuss", "deleteStatus"]),
membershipStatus() {
return this.membershipStatuss.find((r) => r.id == this.data);
...mapState(useMembershipStatusStore, ["membershipStatus"]),
mStatus() {
return this.membershipStatus.find((r) => r.id == this.data);
},
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useMembershipStatusStore, ["deleteMembershipStatus", "resetStatus"]),
...mapActions(useMembershipStatusStore, ["deleteMembershipStatus"]),
triggerDelete() {
this.deleteMembershipStatus(this.data);
this.deleteMembershipStatus(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

45
src/components/admin/settings/qualification/CreateQualificationModal.vue
View file

@ -14,18 +14,16 @@
<input type="text" id="description" />
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -39,46 +37,41 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { useQualificationStore } from "@/stores/admin/qualification";
import type { CreateOrUpdateQualificationViewModel } from "@/viewmodels/admin/qualification.models";
import type { CreateQualificationViewModel } from "@/viewmodels/admin/qualification.models";
</script>
<script lang="ts">
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
createStatus() {
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
computed: {
...mapState(useQualificationStore, ["createStatus"]),
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useQualificationStore, ["createQualification", "resetStatus"]),
...mapActions(useQualificationStore, ["createQualification"]),
triggerCreate(e: any) {
let formData = e.target.elements;
let createQualification: CreateOrUpdateQualificationViewModel = {
let createQualification: CreateQualificationViewModel = {
qualification: formData.qualification.value,
description: formData.description.value,
};
this.createQualification(createQualification);
this.createQualification(createQualification)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

38
src/components/admin/settings/qualification/DeleteQualificationModal.vue
View file

@ -6,17 +6,17 @@
<br />
<div class="flex flex-row gap-2">
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -37,21 +37,10 @@ import { useQualificationStore } from "@/stores/admin/qualification";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
deleteStatus() {
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
@ -59,16 +48,25 @@ export default defineComponent({
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useQualificationStore, ["qualifications", "deleteStatus"]),
...mapState(useQualificationStore, ["qualifications"]),
qualification() {
return this.qualifications.find((r) => r.id == this.data);
},
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useQualificationStore, ["deleteQualification", "resetStatus"]),
...mapActions(useQualificationStore, ["deleteQualification"]),
triggerDelete() {
this.deleteQualification(this.data);
this.deleteQualification(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

41
src/components/admin/user/role/CreateRoleModal.vue
View file

@ -10,18 +10,16 @@
<input type="text" id="role" required />
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -41,35 +39,30 @@ import { useRoleStore } from "@/stores/admin/role";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
createStatus() {
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
computed: {
...mapState(useRoleStore, ["createStatus"]),
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useRoleStore, ["createRole", "resetStatus"]),
...mapActions(useRoleStore, ["createRole"]),
triggerCreateRole(e: any) {
let formData = e.target.elements;
this.createRole(formData.role.value);
this.createRole(formData.role.value)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

42
src/components/admin/user/role/DeleteRoleModal.vue
View file

@ -6,21 +6,17 @@
<br />
<div class="flex flex-row gap-2">
<button
primary
:disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
@click="triggerDeleteRole"
>
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteRole">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -40,21 +36,10 @@ import { useRoleStore } from "@/stores/admin/role";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
deleteStatus() {
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
@ -62,16 +47,25 @@ export default defineComponent({
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useRoleStore, ["roles", "deleteStatus"]),
...mapState(useRoleStore, ["roles"]),
role() {
return this.roles.find((r) => r.id == this.data);
},
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useRoleStore, ["deleteRole", "resetStatus"]),
...mapActions(useRoleStore, ["deleteRole"]),
triggerDeleteRole() {
this.deleteRole(this.data);
this.deleteRole(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

42
src/components/admin/user/user/DeleteUserModal.vue
View file

@ -6,21 +6,17 @@
<br />
<div class="flex flex-row gap-2">
<button
primary
:disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
@click="triggerDeleteUser"
>
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteUser">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
<div class="flex flex-row justify-end">
<div class="flex flex-row gap-4 py-2">
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
<button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
</div>
</div>
</div>
@ -40,21 +36,10 @@ import { useUserStore } from "@/stores/admin/user";
export default defineComponent({
data() {
return {
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
timeout: undefined as any,
};
},
watch: {
deleteStatus() {
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
}
},
},
mounted() {
this.resetStatus();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
@ -62,16 +47,25 @@ export default defineComponent({
},
computed: {
...mapState(useModalStore, ["data"]),
...mapState(useUserStore, ["users", "deleteStatus"]),
...mapState(useUserStore, ["users"]),
user() {
return this.users.find((u) => u.id == this.data);
},
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useUserStore, ["deleteUser", "resetStatus"]),
...mapActions(useUserStore, ["deleteUser"]),
triggerDeleteUser() {
this.deleteUser(this.data);
this.deleteUser(this.data)
.then(() => {
this.status = { status: "success" };
this.timeout = setTimeout(() => {
this.closeModal();
}, 1500);
})
.catch(() => {
this.status = { status: "failed" };
});
},
},
});

81
src/stores/admin/award.ts
View file

@ -1,92 +1,49 @@
import { defineStore } from "pinia";
import type { CreateOrUpdateAwardViewModel, AwardViewModel } from "../../viewmodels/admin/award.models";
import type { CreateAwardViewModel, UpdateAwardViewModel, AwardViewModel } from "../../viewmodels/admin/award.models";
import { http } from "../../serverCom";
import type { AxiosResponse } from "axios";
export const useAwardStore = defineStore("award", {
state: () => {
return {
awards: [] as Array<AwardViewModel>,
award: null as null | AwardViewModel,
loadingAll: "loading" as "loading" | "fetched" | "failed",
loadingSingle: "loading" as "loading" | "fetched" | "failed",
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
resetStatus() {
this.createStatus = null;
this.updateStatus = null;
this.deleteStatus = null;
},
fetchAwards() {
this.loadingAll = "loading";
this.loading = "loading";
http
.get("/admin/award")
.then((result) => {
this.awards = result.data;
this.loadingAll = "fetched";
this.loading = "fetched";
})
.catch((err) => {
this.loadingAll = "failed";
this.loading = "failed";
});
},
fetchAwardById(id: number) {
this.award = null;
this.loadingSingle = "loading";
http
.get(`/admin/award/${id}`)
.then((result) => {
this.award = result.data;
this.loadingSingle = "fetched";
})
.catch((err) => {
this.loadingSingle = "failed";
});
fetchAwardById(id: number): Promise<AxiosResponse<any, any>> {
return http.get(`/admin/award/${id}`);
},
createAward(award: CreateOrUpdateAwardViewModel) {
this.createStatus = "loading";
http
.post(`/admin/award`, {
async createAward(award: CreateAwardViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/award`, {
award: award.award,
})
.then((result) => {
this.createStatus = { status: "success" };
this.fetchAwards();
})
.catch((err) => {
this.createStatus = { status: "failed" };
});
this.fetchAwards();
return result;
},
updateActiveAward(award: CreateOrUpdateAwardViewModel) {
if (this.award == null) return;
let id = this.award.id;
this.updateStatus = "loading";
http
.patch(`/admin/award/${id}`, {
async updateActiveAward(award: UpdateAwardViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/award/${award.id}`, {
award: award.award,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchAwardById(id);
this.fetchAwards();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
});
this.fetchAwards();
return result;
},
deleteAward(award: number) {
this.deleteStatus = "loading";
http
.delete(`/admin/award/${award}`)
.then((res) => {
this.deleteStatus = { status: "success" };
async deleteAward(award: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/award/${award}`);
this.fetchAwards();
})
.catch((err) => {
this.deleteStatus = { status: "failed", reason: err.data };
});
return result;
},
},
});

86
src/stores/admin/communicationType.ts
View file

@ -1,54 +1,36 @@
import { defineStore } from "pinia";
import type {
CreateOrUpdateCommunicationTypeViewModel,
CreateCommunicationTypeViewModel,
UpdateCommunicationTypeViewModel,
CommunicationTypeViewModel,
} from "../../viewmodels/admin/communicationType.models";
import { http } from "../../serverCom";
import type { AxiosResponse } from "axios";
export const useCommunicationTypeStore = defineStore("communicationType", {
state: () => {
return {
communicationTypes: [] as Array<CommunicationTypeViewModel>,
communicationType: null as null | CommunicationTypeViewModel,
availableFields: [] as Array<string>,
loadingAll: "loading" as "loading" | "fetched" | "failed",
loadingSingle: "loading" as "loading" | "fetched" | "failed",
loading: "loading" as "loading" | "fetched" | "failed",
loadingFields: "loading" as "loading" | "fetched" | "failed",
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
};
},
actions: {
resetStatus() {
this.createStatus = null;
this.updateStatus = null;
this.deleteStatus = null;
},
fetchCommunicationTypes() {
this.loadingAll = "loading";
this.loading = "loading";
http
.get("/admin/communicationType")
.then((result) => {
this.communicationTypes = result.data;
this.loadingAll = "fetched";
this.loading = "fetched";
})
.catch((err) => {
this.loadingAll = "failed";
this.loading = "failed";
});
},
fetchCommunicationTypeById(id: number) {
this.communicationType = null;
this.loadingSingle = "loading";
http
.get(`/admin/communicationType/${id}`)
.then((result) => {
this.communicationType = result.data;
this.loadingSingle = "fetched";
})
.catch((err) => {
this.loadingSingle = "failed";
});
fetchCommunicationTypeById(id: number): Promise<AxiosResponse<any, any>> {
return http.get(`/admin/communicationType/${id}`);
},
fetchAvailableFields() {
this.loadingFields = "loading";
@ -62,50 +44,30 @@ export const useCommunicationTypeStore = defineStore("communicationType", {
this.loadingFields = "failed";
});
},
createCommunicationType(communicationType: CreateOrUpdateCommunicationTypeViewModel) {
this.createStatus = "loading";
http
.post(`/admin/communicationType`, {
async createCommunicationType(
communicationType: CreateCommunicationTypeViewModel
): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/communicationType`, {
communicationType: communicationType.type,
fields: communicationType.fields,
})
.then((result) => {
this.createStatus = { status: "success" };
this.fetchCommunicationTypes();
})
.catch((err) => {
this.createStatus = { status: "failed" };
});
this.fetchCommunicationTypes();
return result;
},
updateActiveCommunicationType(communicationType: CreateOrUpdateCommunicationTypeViewModel) {
if (this.communicationType == null) return;
let id = this.communicationType.id;
this.updateStatus = "loading";
http
.patch(`/admin/communicationType/${id}`, {
async updateActiveCommunicationType(
communicationType: UpdateCommunicationTypeViewModel
): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/communicationType/${communicationType.id}`, {
communicationType: communicationType.type,
fields: communicationType.fields,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchCommunicationTypeById(id);
this.fetchCommunicationTypes();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
});
this.fetchCommunicationTypes();
return result;
},
deleteCommunicationType(communicationType: number) {
this.deleteStatus = "loading";
http
.delete(`/admin/communicationType/${communicationType}`)
.then((res) => {
this.deleteStatus = { status: "success" };
async deleteCommunicationType(communicationType: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/communicationType/${communicationType}`);
this.fetchCommunicationTypes();
})
.catch((err) => {
this.deleteStatus = { status: "failed", reason: err.data };
});
return result;
},
},
});

84
src/stores/admin/executivePosition.ts
View file

@ -1,95 +1,55 @@
import { defineStore } from "pinia";
import type {
CreateOrUpdateExecutivePositionViewModel,
CreateExecutivePositionViewModel,
UpdateExecutivePositionViewModel,
ExecutivePositionViewModel,
} from "../../viewmodels/admin/executivePosition.models";
import { http } from "../../serverCom";
import type { AxiosResponse } from "axios";
export const useExecutivePositionStore = defineStore("executivePosition", {
state: () => {
return {
executivePositions: [] as Array<ExecutivePositionViewModel>,
executivePosition: null as null | ExecutivePositionViewModel,
loadingAll: "loading" as "loading" | "fetched" | "failed",
loadingSingle: "loading" as "loading" | "fetched" | "failed",
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
resetStatus() {
this.createStatus = null;
this.updateStatus = null;
this.deleteStatus = null;
},
fetchExecutivePositions() {
this.loadingAll = "loading";
this.loading = "loading";
http
.get("/admin/executivePosition")
.then((result) => {
this.executivePositions = result.data;
this.loadingAll = "fetched";
this.loading = "fetched";
})
.catch((err) => {
this.loadingAll = "failed";
this.loading = "failed";
});
},
fetchExecutivePositionById(id: number) {
this.executivePosition = null;
this.loadingSingle = "loading";
http
.get(`/admin/executivePosition/${id}`)
.then((result) => {
this.executivePosition = result.data;
this.loadingSingle = "fetched";
})
.catch((err) => {
this.loadingSingle = "failed";
});
fetchExecutivePositionById(id: number): Promise<AxiosResponse<any, any>> {
return http.get(`/admin/executivePosition/${id}`);
},
createExecutivePosition(executivePosition: CreateOrUpdateExecutivePositionViewModel) {
this.createStatus = "loading";
http
.post(`/admin/executivePosition`, {
async createExecutivePosition(executivePosition: CreateExecutivePositionViewModel) {
const result = await http.post(`/admin/executivePosition`, {
executivePosition: executivePosition.position,
})
.then((result) => {
this.createStatus = { status: "success" };
this.fetchExecutivePositions();
})
.catch((err) => {
this.createStatus = { status: "failed" };
});
this.fetchExecutivePositions();
return result;
},
updateActiveExecutivePosition(executivePosition: CreateOrUpdateExecutivePositionViewModel) {
if (this.executivePosition == null) return;
let id = this.executivePosition.id;
this.updateStatus = "loading";
http
.patch(`/admin/executivePosition/${id}`, {
async updateActiveExecutivePosition(
executivePosition: UpdateExecutivePositionViewModel
): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/executivePosition/${executivePosition.id}`, {
executivePosition: executivePosition.position,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchExecutivePositionById(id);
this.fetchExecutivePositions();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
});
this.fetchExecutivePositions();
return result;
},
deleteExecutivePosition(executivePosition: number) {
this.deleteStatus = "loading";
http
.delete(`/admin/executivePosition/${executivePosition}`)
.then((res) => {
this.deleteStatus = { status: "success" };
async deleteExecutivePosition(executivePosition: number) {
const result = await http.delete(`/admin/executivePosition/${executivePosition}`);
this.fetchExecutivePositions();
})
.catch((err) => {
this.deleteStatus = { status: "failed", reason: err.data };
});
return result;
},
},
});

92
src/stores/admin/membershipStatus.ts
View file

@ -1,95 +1,55 @@
import { defineStore } from "pinia";
import type {
CreateOrUpdateMembershipStatusViewModel,
CreateMembershipStatusViewModel,
UpdateMembershipStatusViewModel,
MembershipStatusViewModel,
} from "../../viewmodels/admin/membershipStatus.models";
import { http } from "../../serverCom";
import type { AxiosResponse } from "axios";
export const useMembershipStatusStore = defineStore("membershipStatus", {
state: () => {
return {
membershipStatuss: [] as Array<MembershipStatusViewModel>,
membershipStatus: null as null | MembershipStatusViewModel,
loadingAll: "loading" as "loading" | "fetched" | "failed",
loadingSingle: "loading" as "loading" | "fetched" | "failed",
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
membershipStatus: [] as Array<MembershipStatusViewModel>,
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
resetStatus() {
this.createStatus = null;
this.updateStatus = null;
this.deleteStatus = null;
},
fetchMembershipStatuss() {
this.loadingAll = "loading";
fetchMembershipStatus() {
this.loading = "loading";
http
.get("/admin/membershipStatus")
.then((result) => {
this.membershipStatuss = result.data;
this.loadingAll = "fetched";
})
.catch((err) => {
this.loadingAll = "failed";
});
},
fetchMembershipStatusById(id: number) {
this.membershipStatus = null;
this.loadingSingle = "loading";
http
.get(`/admin/membershipStatus/${id}`)
.then((result) => {
this.membershipStatus = result.data;
this.loadingSingle = "fetched";
this.loading = "fetched";
})
.catch((err) => {
this.loadingSingle = "failed";
this.loading = "failed";
});
},
createMembershipStatus(membershipStatus: CreateOrUpdateMembershipStatusViewModel) {
this.createStatus = "loading";
http
.post(`/admin/membershipStatus`, {
fetchMembershipStatusById(id: number): Promise<AxiosResponse<any, any>> {
return http.get(`/admin/membershipStatus/${id}`);
},
async createMembershipStatus(membershipStatus: CreateMembershipStatusViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/membershipStatus`, {
membershipStatus: membershipStatus.status,
})
.then((result) => {
this.createStatus = { status: "success" };
this.fetchMembershipStatuss();
})
.catch((err) => {
this.createStatus = { status: "failed" };
});
this.fetchMembershipStatus();
return result;
},
updateActiveMembershipStatus(membershipStatus: CreateOrUpdateMembershipStatusViewModel) {
if (this.membershipStatus == null) return;
let id = this.membershipStatus.id;
this.updateStatus = "loading";
http
.patch(`/admin/membershipStatus/${id}`, {
async updateActiveMembershipStatus(
membershipStatus: UpdateMembershipStatusViewModel
): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/membershipStatus/${membershipStatus.id}`, {
membershipStatus: membershipStatus.status,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchMembershipStatusById(id);
this.fetchMembershipStatuss();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
});
this.fetchMembershipStatus();
return result;
},
deleteMembershipStatus(membershipStatus: number) {
this.deleteStatus = "loading";
http
.delete(`/admin/membershipStatus/${membershipStatus}`)
.then((res) => {
this.deleteStatus = { status: "success" };
this.fetchMembershipStatuss();
})
.catch((err) => {
this.deleteStatus = { status: "failed", reason: err.data };
});
async deleteMembershipStatus(membershipStatus: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/membershipStatus/${membershipStatus}`);
this.fetchMembershipStatus();
return result;
},
},
});

82
src/stores/admin/qualification.ts
View file

@ -1,97 +1,55 @@
import { defineStore } from "pinia";
import type {
CreateOrUpdateQualificationViewModel,
CreateQualificationViewModel,
UpdateQualificationViewModel,
QualificationViewModel,
} from "../../viewmodels/admin/qualification.models";
import { http } from "../../serverCom";
import type { AxiosResponse } from "axios";
export const useQualificationStore = defineStore("qualification", {
state: () => {
return {
qualifications: [] as Array<QualificationViewModel>,
qualification: null as null | QualificationViewModel,
loadingAll: "loading" as "loading" | "fetched" | "failed",
loadingSingle: "loading" as "loading" | "fetched" | "failed",
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
resetStatus() {
this.createStatus = null;
this.updateStatus = null;
this.deleteStatus = null;
},
fetchQualifications() {
this.loadingAll = "loading";
this.loading = "loading";
http
.get("/admin/qualification")
.then((result) => {
this.qualifications = result.data;
this.loadingAll = "fetched";
this.loading = "fetched";
})
.catch((err) => {
this.loadingAll = "failed";
this.loading = "failed";
});
},
fetchQualificationById(id: number) {
this.qualification = null;
this.loadingSingle = "loading";
http
.get(`/admin/qualification/${id}`)
.then((result) => {
this.qualification = result.data;
this.loadingSingle = "fetched";
})
.catch((err) => {
this.loadingSingle = "failed";
});
fetchQualificationById(id: number): Promise<AxiosResponse<any, any>> {
return http.get(`/admin/qualification/${id}`);
},
createQualification(qualification: CreateOrUpdateQualificationViewModel) {
this.createStatus = "loading";
http
.post(`/admin/qualification`, {
async createQualification(qualification: CreateQualificationViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/qualification`, {
qualification: qualification.qualification,
description: qualification.description,
})
.then((result) => {
this.createStatus = { status: "success" };
this.fetchQualifications();
})
.catch((err) => {
this.createStatus = { status: "failed" };
});
this.fetchQualifications();
return result;
},
updateActiveQualification(qualification: CreateOrUpdateQualificationViewModel) {
if (this.qualification == null) return;
let id = this.qualification.id;
this.updateStatus = "loading";
http
.patch(`/admin/qualification/${id}`, {
async updateActiveQualification(qualification: UpdateQualificationViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/qualification/${qualification.id}`, {
qualification: qualification.qualification,
description: qualification.description,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchQualificationById(id);
this.fetchQualifications();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
});
this.fetchQualifications();
return result;
},
deleteQualification(qualification: number) {
this.deleteStatus = "loading";
http
.delete(`/admin/qualification/${qualification}`)
.then((res) => {
this.deleteStatus = { status: "success" };
async deleteQualification(qualification: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/qualification/${qualification}`);
this.fetchQualifications();
})
.catch((err) => {
this.deleteStatus = { status: "failed", reason: err.data };
});
return result;
},
},
});

97
src/stores/admin/role.ts
View file

@ -2,109 +2,56 @@ import { defineStore } from "pinia";
import type { RoleViewModel } from "../../viewmodels/admin/role.models";
import { http } from "../../serverCom";
import type { PermissionObject } from "../../types/permissionTypes";
import type { AxiosResponse } from "axios";
export const useRoleStore = defineStore("role", {
state: () => {
return {
roles: [] as Array<RoleViewModel>,
role: null as null | RoleViewModel,
loadingAll: null as null | "loading" | "success" | "failed",
loadingSingle: null as null | "loading" | "success" | "failed",
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
loading: null as null | "loading" | "success" | "failed",
};
},
actions: {
resetStatus() {
this.createStatus = null;
this.updateStatus = null;
this.deleteStatus = null;
},
fetchRoles() {
this.loadingAll = "loading";
this.loading = "loading";
http
.get("/admin/role")
.then((result) => {
this.roles = result.data;
this.loadingAll = "success";
this.loading = "success";
})
.catch((err) => {
this.loadingAll = "failed";
this.loading = "failed";
});
},
fetchRoleById(id: number) {
this.role = null;
this.loadingSingle = "loading";
http
.get(`/admin/role/${id}`)
.then((result) => {
this.role = result.data;
this.loadingSingle = "success";
})
.catch((err) => {
this.loadingSingle = "failed";
});
fetchRoleById(id: number): Promise<AxiosResponse<any, any>> {
return http.get(`/admin/role/${id}`);
},
createRole(role: string) {
this.createStatus = "loading";
http
.post("/admin/role", {
async createRole(role: string): Promise<AxiosResponse<any, any>> {
const result = await http.post("/admin/role", {
role: role,
})
.then((res) => {
this.createStatus = { status: "success" };
this.fetchRoles();
})
.catch((err) => {
this.createStatus = { status: "failed", reason: err.data };
});
this.fetchRoles();
return result;
},
updateActiveRole(role: string) {
if (this.role == null) return;
let id = this.role.id;
this.updateStatus = "loading";
http
.patch(`/admin/role/${id}`, {
async updateActiveRole(id: number, role: string): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/role/${id}`, {
role: role,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchRoleById(id);
this.fetchRoles();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
});
this.fetchRoles();
return result;
},
updateActiveRolePermissions(permission: PermissionObject) {
if (this.role == null) return;
let id = this.role.id;
this.updateStatus = "loading";
http
.patch(`/admin/role/${id}/permissions`, {
async updateActiveRolePermissions(role: number, permission: PermissionObject): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/role/${role}/permissions`, {
permissions: permission,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchRoleById(id);
this.fetchRoles();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
});
this.fetchRoles();
return result;
},
deleteRole(role: number) {
this.deleteStatus = "loading";
http
.delete(`/admin/role/${role}`)
.then((res) => {
this.deleteStatus = { status: "success" };
async deleteRole(role: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/role/${role}`);
this.fetchRoles();
})
.catch((err) => {
this.deleteStatus = { status: "failed", reason: err.data };
});
return result;
},
},
});

92
src/stores/admin/user.ts
View file

@ -1,115 +1,69 @@
import { defineStore } from "pinia";
import type { CreateOrUpdateUserViewModel, UserViewModel } from "../../viewmodels/admin/user.models";
import type { UpdateUserViewModel, UserViewModel } from "../../viewmodels/admin/user.models";
import { http } from "../../serverCom";
import type { PermissionObject } from "../../types/permissionTypes";
import type { AxiosResponse } from "axios";
export const useUserStore = defineStore("user", {
state: () => {
return {
users: [] as Array<UserViewModel>,
user: null as null | UserViewModel,
loadingAll: "loading" as "loading" | "fetched" | "failed",
loadingSingle: "loading" as "loading" | "fetched" | "failed",
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
resetStatus() {
this.createStatus = null;
this.updateStatus = null;
this.deleteStatus = null;
},
fetchUsers() {
this.loadingAll = "loading";
this.loading = "loading";
http
.get("/admin/user")
.then((result) => {
this.users = result.data;
this.loadingAll = "fetched";
this.loading = "fetched";
})
.catch((err) => {
this.loadingAll = "failed";
this.loading = "failed";
});
},
fetchUserById(id: number) {
this.user = null;
this.loadingSingle = "loading";
http
.get(`/admin/user/${id}`)
.then((result) => {
this.user = result.data;
this.loadingSingle = "fetched";
})
.catch((err) => {
this.loadingSingle = "failed";
});
fetchUserById(id: number): Promise<AxiosResponse<any, any>> {
return http.get(`/admin/user/${id}`);
},
updateActiveUser(user: CreateOrUpdateUserViewModel) {
if (this.user == null) return;
let id = this.user.id;
this.updateStatus = "loading";
http
.patch(`/admin/user/${id}`, {
updateActiveUser(user: UpdateUserViewModel): Promise<AxiosResponse<any, any>> {
return http
.patch(`/admin/user/${user.id}`, {
username: user.username,
firstname: user.firstname,
lastname: user.lastname,
mail: user.mail,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchUserById(id);
this.fetchUsers();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
return result;
});
},
updateActiveUserPermissions(permission: PermissionObject) {
if (this.user == null) return;
let id = this.user.id;
this.updateStatus = "loading";
http
.patch(`/admin/user/${id}/permissions`, {
updateActiveUserPermissions(user: number, permission: PermissionObject): Promise<AxiosResponse<any, any>> {
return http
.patch(`/admin/user/${user}/permissions`, {
permissions: permission,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchUserById(id);
this.fetchUsers();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
return result;
});
},
updateActiveUserRoles(roles: Array<number>) {
if (this.user == null) return;
let id = this.user.id;
this.updateStatus = "loading";
http
.patch(`/admin/user/${id}/roles`, {
updateActiveUserRoles(user: number, roles: Array<number>): Promise<AxiosResponse<any, any>> {
return http
.patch(`/admin/user/${user}/roles`, {
roleIds: roles,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchUserById(id);
this.fetchUsers();
})
.catch((err) => {
this.updateStatus = { status: "failed" };
return result;
});
},
deleteUser(user: number) {
this.deleteStatus = "loading";
http
.delete(`/admin/user/${user}`)
.then((res) => {
this.deleteStatus = { status: "success" };
deleteUser(user: number): Promise<AxiosResponse<any, any>> {
return http.delete(`/admin/user/${user}`).then((result) => {
this.fetchUsers();
})
.catch((err) => {
this.deleteStatus = { status: "failed", reason: err.data };
return result;
});
},
},

7
src/viewmodels/admin/award.models.ts
View file

@ -3,6 +3,11 @@ export interface AwardViewModel {
award: string;
}
export interface CreateOrUpdateAwardViewModel {
export interface CreateAwardViewModel {
award: string;
}
export interface UpdateAwardViewModel {
id: number;
award: string;
}

8
src/viewmodels/admin/communicationType.models.ts
View file

@ -4,7 +4,13 @@ export interface CommunicationTypeViewModel {
fields: Array<string>;
}
export interface CreateOrUpdateCommunicationTypeViewModel {
export interface CreateCommunicationTypeViewModel {
type: string;
fields: Array<string>;
}
export interface UpdateCommunicationTypeViewModel {
id: number;
type: string;
fields: Array<string>;
}

7
src/viewmodels/admin/executivePosition.models.ts
View file

@ -3,6 +3,11 @@ export interface ExecutivePositionViewModel {
position: string;
}
export interface CreateOrUpdateExecutivePositionViewModel {
export interface CreateExecutivePositionViewModel {
position: string;
}
export interface UpdateExecutivePositionViewModel {
id: number;
position: string;
}

7
src/viewmodels/admin/membershipStatus.models.ts
View file

@ -3,6 +3,11 @@ export interface MembershipStatusViewModel {
status: string;
}
export interface CreateOrUpdateMembershipStatusViewModel {
export interface CreateMembershipStatusViewModel {
status: string;
}
export interface UpdateMembershipStatusViewModel {
id: number;
status: string;
}

8
src/viewmodels/admin/qualification.models.ts
View file

@ -4,7 +4,13 @@ export interface QualificationViewModel {
description: string | null;
}
export interface CreateOrUpdateQualificationViewModel {
export interface CreateQualificationViewModel {
qualification: string;
description: string | null;
}
export interface UpdateQualificationViewModel {
id: number;
qualification: string;
description: string | null;
}

14
src/viewmodels/admin/user.models.ts
View file

@ -1,5 +1,5 @@
import { PermissionObject } from "../../type/permissionTypes";
import { RoleViewModel } from "./role.models";
import { PermissionObject } from "@/type/permissionTypes";
import type { RoleViewModel } from "./role.models";
export interface UserViewModel {
id: number;
@ -12,7 +12,15 @@ export interface UserViewModel {
permissions_total: PermissionObject;
}
export interface CreateOrUpdateUserViewModel {
export interface CreateUserViewModel {
username: string;
mail: string;
firstname: string;
lastname: string;
}
export interface UpdateUserViewModel {
id: number;
username: string;
mail: string;
firstname: string;

86
src/views/admin/settings/AwardEdit.vue
View file

@ -5,25 +5,31 @@
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Auszeichnung {{ award?.award }} - Daten bearbeiten</h1>
<h1 class="font-bold text-xl h-8">Auszeichnung {{ origin?.award }} - Daten bearbeiten</h1>
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="award != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<div>
<label for="award">Bezeichnung</label>
<input type="text" id="award" required :value="award?.award" @change="detectChange" />
<input type="text" id="award" required v-model="award.award" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
</button>
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
@ -39,7 +45,9 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router";
import type { CreateOrUpdateAwardViewModel } from "@/viewmodels/admin/award.models";
import type { AwardViewModel, UpdateAwardViewModel } from "@/viewmodels/admin/award.models";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
</script>
<script lang="ts">
@ -49,29 +57,63 @@ export default defineComponent({
},
data() {
return {
change_detect: false as boolean,
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | AwardViewModel,
award: null as null | AwardViewModel,
timeout: null as any,
};
},
computed: {
...mapState(useAwardStore, ["award", "updateStatus", "loadingSingle"]),
canSaveOrReset(): boolean {
return isEqual(this.origin, this.award);
},
},
mounted() {
this.resetStatus();
this.fetchAwardById(parseInt(this.id ?? ""));
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useAwardStore, ["fetchAwardById", "updateActiveAward", "resetStatus"]),
detectChange() {
this.resetStatus();
this.change_detect = true;
...mapActions(useAwardStore, ["fetchAwardById", "updateActiveAward"]),
resetForm() {
this.award = cloneDeep(this.origin);
},
fetchItem() {
this.fetchAwardById(parseInt(this.id ?? ""))
.then((result) => {
this.award = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: any) {
if (this.award == null) return;
let formData = e.target.elements;
let updateAward: CreateOrUpdateAwardViewModel = {
let updateAward: UpdateAwardViewModel = {
id: this.award.id,
award: formData.award.value,
};
this.updateActiveAward(updateAward);
this.change_detect = false;
this.status = "loading";
this.updateActiveAward(updateAward)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

106
src/views/admin/settings/CommunicationTypeEdit.vue
View file

@ -5,25 +5,29 @@
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Kommunikationsart {{ communicationType?.type }} - Daten bearbeiten</h1>
<h1 class="font-bold text-xl h-8">Kommunikationsart {{ origin?.type }} - Daten bearbeiten</h1>
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="communicationType != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<div>
<label for="communicationType">Bezeichnung</label>
<input type="text" id="communicationType" required :value="communicationType?.type" @change="detectChange" />
<input type="text" id="communicationType" required v-model="communicationType.type" />
</div>
<div>
<Listbox v-model="selectedFields" multiple>
<Listbox v-model="communicationType.fields" multiple>
<ListboxLabel>Felder</ListboxLabel>
<div class="relative mt-1">
<ListboxButton
class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
>
<span class="block truncate w-full text-start"> {{ selectedFields.join(", ") }}</span>
<span class="block truncate w-full text-start"> {{ communicationType.fields.join(", ") }}</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
</span>
@ -62,13 +66,15 @@
</Listbox>
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="reset">
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
</button>
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
@ -84,9 +90,14 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router";
import type { CreateOrUpdateCommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
import type {
CommunicationTypeViewModel,
UpdateCommunicationTypeViewModel,
} from "@/viewmodels/admin/communicationType.models";
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
</script>
<script lang="ts">
@ -94,51 +105,72 @@ export default defineComponent({
props: {
id: String,
},
watch: {
selectedFields() {
this.detectChange();
},
loadingSingle() {
if (this.loadingSingle == "fetched") this.selectedFields = this.communicationType?.fields ?? [];
},
},
data() {
return {
change_detect: false as boolean,
selectedFields: [] as Array<string>,
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | CommunicationTypeViewModel,
communicationType: null as null | CommunicationTypeViewModel,
timeout: null as any,
};
},
computed: {
...mapState(useCommunicationTypeStore, ["communicationType", "updateStatus", "loadingSingle", "availableFields"]),
...mapState(useCommunicationTypeStore, ["availableFields"]),
canSaveOrReset(): boolean {
return isEqual(this.origin, this.communicationType);
},
},
mounted() {
this.resetStatus();
this.fetchItem();
this.fetchAvailableFields();
this.fetchCommunicationTypeById(parseInt(this.id ?? ""));
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useCommunicationTypeStore, [
"fetchCommunicationTypeById",
"updateActiveCommunicationType",
"resetStatus",
"fetchAvailableFields",
]),
detectChange() {
this.resetStatus();
this.change_detect = true;
resetForm() {
this.communicationType = cloneDeep(this.origin);
},
reset() {
this.change_detect = false;
this.selectedFields = this.communicationType?.fields ?? [];
fetchItem() {
this.fetchCommunicationTypeById(parseInt(this.id ?? ""))
.then((result) => {
this.communicationType = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: any) {
if (this.communicationType == null) return;
let formData = e.target.elements;
let updateCommunicationType: CreateOrUpdateCommunicationTypeViewModel = {
let updateCommunicationType: UpdateCommunicationTypeViewModel = {
id: this.communicationType.id,
type: formData.communicationType.value,
fields: this.selectedFields,
fields: this.communicationType.fields,
};
this.updateActiveCommunicationType(updateCommunicationType);
this.change_detect = false;
this.status = "loading";
this.updateActiveCommunicationType(updateCommunicationType)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

99
src/views/admin/settings/ExecutivePositionEdit.vue
View file

@ -5,31 +5,31 @@
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Vereinsamt {{ executivePosition?.position }} - Daten bearbeiten</h1>
<h1 class="font-bold text-xl h-8">Vereinsamt {{ origin?.position }} - Daten bearbeiten</h1>
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="executivePosition != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<div>
<label for="executivePosition">Bezeichnung</label>
<input
type="text"
id="executivePosition"
required
:value="executivePosition?.position"
@change="detectChange"
/>
<input type="text" id="executivePosition" required v-model="executivePosition.position" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
</button>
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
@ -45,7 +45,12 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router";
import type { CreateOrUpdateExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
import type {
ExecutivePositionViewModel,
UpdateExecutivePositionViewModel,
} from "@/viewmodels/admin/executivePosition.models";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
</script>
<script lang="ts">
@ -55,33 +60,63 @@ export default defineComponent({
},
data() {
return {
change_detect: false as boolean,
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | ExecutivePositionViewModel,
executivePosition: null as null | ExecutivePositionViewModel,
timeout: null as any,
};
},
computed: {
...mapState(useExecutivePositionStore, ["executivePosition", "updateStatus", "loadingSingle"]),
canSaveOrReset(): boolean {
return isEqual(this.origin, this.executivePosition);
},
},
mounted() {
this.resetStatus();
this.fetchExecutivePositionById(parseInt(this.id ?? ""));
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useExecutivePositionStore, [
"fetchExecutivePositionById",
"updateActiveExecutivePosition",
"resetStatus",
]),
detectChange() {
this.resetStatus();
this.change_detect = true;
...mapActions(useExecutivePositionStore, ["fetchExecutivePositionById", "updateActiveExecutivePosition"]),
resetForm() {
this.executivePosition = cloneDeep(this.origin);
},
fetchItem() {
this.fetchExecutivePositionById(parseInt(this.id ?? ""))
.then((result) => {
this.executivePosition = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: any) {
if (this.executivePosition == null) return;
let formData = e.target.elements;
let updateExecutivePosition: CreateOrUpdateExecutivePositionViewModel = {
let updateExecutivePosition: UpdateExecutivePositionViewModel = {
id: this.executivePosition.id,
position: formData.executivePosition.value,
};
this.updateActiveExecutivePosition(updateExecutivePosition);
this.change_detect = false;
this.status = "loading";
this.updateActiveExecutivePosition(updateExecutivePosition)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

12
src/views/admin/settings/MembershipStatus.vue
View file

@ -8,11 +8,7 @@
<template #diffMain>
<div class="flex flex-col gap-4 grow pl-7">
<div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
<MembershipStatusListItem
v-for="membershipStatus in membershipStatuss"
:key="membershipStatus.id"
:membershipStatus="membershipStatus"
/>
<MembershipStatusListItem v-for="status in membershipStatus" :key="status.id" :membershipStatus="status" />
</div>
<div class="flex flex-row gap-4">
<button primary class="!w-fit" @click="openCreateModal">Mitgliedsstatus erstellen</button>
@ -34,13 +30,13 @@ import { useModalStore } from "@/stores/modal";
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useMembershipStatusStore, ["membershipStatuss"]),
...mapState(useMembershipStatusStore, ["membershipStatus"]),
},
mounted() {
this.fetchMembershipStatuss();
this.fetchMembershipStatus();
},
methods: {
...mapActions(useMembershipStatusStore, ["fetchMembershipStatuss"]),
...mapActions(useMembershipStatusStore, ["fetchMembershipStatus"]),
...mapActions(useModalStore, ["openModal"]),
openCreateModal() {
this.openModal(

97
src/views/admin/settings/MembershipStatusEdit.vue
View file

@ -5,25 +5,31 @@
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ membershipStatus?.status }} - Daten bearbeiten</h1>
<h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ origin?.status }} - Daten bearbeiten</h1>
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="membershipStatus != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<div>
<label for="membershipStatus">Bezeichnung</label>
<input type="text" id="membershipStatus" required :value="membershipStatus?.status" @change="detectChange" />
<label for="membershipStatusStatus">Bezeichnung</label>
<input type="text" id="membershipStatusStatus" required v-model="membershipStatus.status" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
</button>
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
@ -39,7 +45,12 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router";
import type { CreateOrUpdateMembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
import type {
UpdateMembershipStatusViewModel,
MembershipStatusViewModel,
} from "@/viewmodels/admin/membershipStatus.models";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
</script>
<script lang="ts">
@ -49,33 +60,63 @@ export default defineComponent({
},
data() {
return {
change_detect: false as boolean,
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | MembershipStatusViewModel,
membershipStatus: null as null | MembershipStatusViewModel,
timeout: null as any,
};
},
computed: {
...mapState(useMembershipStatusStore, ["membershipStatus", "updateStatus", "loadingSingle"]),
canSaveOrReset(): boolean {
return isEqual(this.origin, this.membershipStatus);
},
},
mounted() {
this.resetStatus();
this.fetchMembershipStatusById(parseInt(this.id ?? ""));
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useMembershipStatusStore, [
"fetchMembershipStatusById",
"updateActiveMembershipStatus",
"resetStatus",
]),
detectChange() {
this.resetStatus();
this.change_detect = true;
...mapActions(useMembershipStatusStore, ["fetchMembershipStatusById", "updateActiveMembershipStatus"]),
resetForm() {
this.membershipStatus = cloneDeep(this.origin);
},
fetchItem() {
this.fetchMembershipStatusById(parseInt(this.id ?? ""))
.then((result) => {
this.membershipStatus = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: any) {
if (this.membershipStatus == null) return;
let formData = e.target.elements;
let updateMembershipStatus: CreateOrUpdateMembershipStatusViewModel = {
status: formData.membershipStatus.value,
let updateMembershipStatus: UpdateMembershipStatusViewModel = {
id: this.membershipStatus.id,
status: formData.membershipStatusStatus.value,
};
this.updateActiveMembershipStatus(updateMembershipStatus);
this.change_detect = false;
this.status = "loading";
this.updateActiveMembershipStatus(updateMembershipStatus)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

88
src/views/admin/settings/QualificationEdit.vue
View file

@ -5,29 +5,35 @@
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Qualifikation {{ qualification?.qualification }} - Daten bearbeiten</h1>
<h1 class="font-bold text-xl h-8">Qualifikation {{ origin?.qualification }} - Daten bearbeiten</h1>
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="qualification != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<div>
<label for="qualification">Bezeichnung</label>
<input type="text" id="qualification" required :value="qualification?.qualification" @change="detectChange" />
<input type="text" id="qualification" required v-model="qualification.qualification" />
</div>
<div>
<label for="description">Beschreibung (optional)</label>
<input type="text" id="description" :value="qualification?.description" @change="detectChange" />
<input type="text" id="description" v-model="qualification.description" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
</button>
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
@ -43,7 +49,9 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router";
import type { CreateOrUpdateQualificationViewModel } from "@/viewmodels/admin/qualification.models";
import type { UpdateQualificationViewModel, QualificationViewModel } from "@/viewmodels/admin/qualification.models";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
</script>
<script lang="ts">
@ -53,30 +61,64 @@ export default defineComponent({
},
data() {
return {
change_detect: false as boolean,
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | QualificationViewModel,
qualification: null as null | QualificationViewModel,
timeout: null as any,
};
},
computed: {
...mapState(useQualificationStore, ["qualification", "updateStatus", "loadingSingle"]),
canSaveOrReset(): boolean {
return isEqual(this.origin, this.qualification);
},
},
mounted() {
this.resetStatus();
this.fetchQualificationById(parseInt(this.id ?? ""));
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useQualificationStore, ["fetchQualificationById", "updateActiveQualification", "resetStatus"]),
detectChange() {
this.resetStatus();
this.change_detect = true;
...mapActions(useQualificationStore, ["fetchQualificationById", "updateActiveQualification"]),
resetForm() {
this.qualification = cloneDeep(this.origin);
},
fetchItem() {
this.fetchQualificationById(parseInt(this.id ?? ""))
.then((result) => {
this.qualification = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: any) {
if (this.qualification == null) return;
let formData = e.target.elements;
let updateQualification: CreateOrUpdateQualificationViewModel = {
let updateQualification: UpdateQualificationViewModel = {
id: this.qualification.id,
qualification: formData.qualification.value,
description: formData.description.value,
};
this.updateActiveQualification(updateQualification);
this.change_detect = false;
this.status = "loading";
this.updateActiveQualification(updateQualification)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

82
src/views/admin/user/RoleEdit.vue
View file

@ -5,25 +5,31 @@
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Rolle {{ role?.role }} - Daten bearbeiten</h1>
<h1 class="font-bold text-xl h-8">Rolle {{ origin?.role }} - Daten bearbeiten</h1>
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerRoleUpdate">
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="role"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerRoleUpdate"
>
<div>
<label for="role">Rollenbezeichnung</label>
<input type="text" id="role" required :value="role?.role" @change="detectChange" />
<input type="text" id="role" required v-model="role.role" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
</button>
<button primary type="submit" class="!w-fit" :disabled="updateStatus != null">speichern</button>
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
@ -39,6 +45,9 @@ import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
import type { RoleViewModel } from "@/viewmodels/admin/role.models";
</script>
<script lang="ts">
@ -48,26 +57,59 @@ export default defineComponent({
},
data() {
return {
change_detect: false as boolean,
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | RoleViewModel,
role: null as null | RoleViewModel,
timeout: null as any,
};
},
computed: {
...mapState(useRoleStore, ["role", "updateStatus", "loadingSingle"]),
canSaveOrReset(): boolean {
return isEqual(this.origin, this.role);
},
},
mounted() {
this.resetStatus();
this.fetchRoleById(parseInt(this.id ?? ""));
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRole", "resetStatus"]),
detectChange() {
this.resetStatus();
this.change_detect = true;
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRole"]),
resetForm() {
this.role = cloneDeep(this.origin);
},
fetchItem() {
this.fetchRoleById(parseInt(this.id ?? ""))
.then((result) => {
this.role = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerRoleUpdate(e: any) {
if (this.role == null) return;
let formData = e.target.elements;
this.updateActiveRole(formData.role.value);
this.change_detect = false;
this.status = "loading";
this.updateActiveRole(this.role.id, formData.role.value)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

61
src/views/admin/user/RoleEditPermission.vue
View file

@ -9,14 +9,13 @@
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<Permission
v-else
:permissions="role?.permissions"
:status="updateStatus"
@savePermissions="triggerPermissionUpdate"
@resetStatus="resetStatus"
v-else-if="role != null"
:permissions="role.permissions"
:status="status"
@savePermissions="triggerUpdate"
/>
</template>
</MainTemplate>
@ -30,6 +29,7 @@ import { useRoleStore } from "../../../stores/admin/role";
import Permission from "@/components/admin/Permission.vue";
import Spinner from "@/components/Spinner.vue";
import type { PermissionObject } from "@/types/permissionTypes";
import type { RoleViewModel } from "@/viewmodels/admin/role.models";
</script>
<script lang="ts">
@ -37,17 +37,50 @@ export default defineComponent({
props: {
id: String,
},
computed: {
...mapState(useRoleStore, ["role", "loadingSingle", "updateStatus"]),
data() {
return {
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
role: null as null | RoleViewModel,
timeout: null as any,
};
},
mounted() {
this.resetStatus();
this.fetchRoleById(parseInt(this.id ?? ""));
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRolePermissions", "resetStatus"]),
triggerPermissionUpdate(e: PermissionObject) {
this.updateActiveRolePermissions(e);
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRolePermissions"]),
fetchItem() {
this.fetchRoleById(parseInt(this.id ?? ""))
.then((result) => {
this.role = result.data;
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: PermissionObject) {
if (this.role == null) return;
this.status = "loading";
this.updateActiveRolePermissions(this.role.id, e)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

92
src/views/admin/user/UserEdit.vue
View file

@ -5,37 +5,43 @@
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Nutzer {{ user?.username }} - Daten bearbeiten</h1>
<h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Daten bearbeiten</h1>
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdateUser">
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="user != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdateUser"
>
<div>
<label for="username">Nutzername</label>
<input type="text" id="username" required :value="user?.username" @change="detectChange" />
<input type="text" id="username" required v-model="user.username" />
</div>
<div>
<label for="firstname">Vorname</label>
<input type="text" id="firstname" required :value="user?.firstname" @change="detectChange" />
<input type="text" id="firstname" required v-model="user.firstname" />
</div>
<div>
<label for="lastname">Nachname</label>
<input type="text" id="lastname" required :value="user?.lastname" @change="detectChange" />
<input type="text" id="lastname" required v-model="user.lastname" />
</div>
<div>
<label for="mail">Mailadresse</label>
<input type="email" id="mail" required :value="user?.mail" @change="detectChange" />
<input type="email" id="mail" required v-model="user.mail" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
</button>
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
<button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
@ -51,7 +57,9 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router";
import { useUserStore } from "@/stores/admin/user";
import type { CreateOrUpdateUserViewModel, UserViewModel } from "@/viewmodels/admin/user.models";
import type { UpdateUserViewModel, UserViewModel } from "@/viewmodels/admin/user.models";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
</script>
<script lang="ts">
@ -61,32 +69,66 @@ export default defineComponent({
},
data() {
return {
change_detect: false as boolean,
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | UserViewModel,
user: null as null | UserViewModel,
timeout: null as any,
};
},
computed: {
...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
canSaveOrReset(): boolean {
return isEqual(this.origin, this.user);
},
},
mounted() {
this.resetStatus();
this.fetchUserById(parseInt(this.id ?? ""));
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useUserStore, ["fetchUserById", "updateActiveUser", "resetStatus"]),
detectChange() {
this.resetStatus();
this.change_detect = true;
...mapActions(useUserStore, ["fetchUserById", "updateActiveUser"]),
resetForm() {
this.user = cloneDeep(this.origin);
},
fetchItem() {
this.fetchUserById(parseInt(this.id ?? ""))
.then((result) => {
this.user = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdateUser(e: any) {
if (this.user == null) return;
let formData = e.target.elements;
let user: CreateOrUpdateUserViewModel = {
let user: UpdateUserViewModel = {
id: this.user.id,
username: formData.username.value,
firstname: formData.firstname.value,
lastname: formData.lastname.value,
mail: formData.mail.value,
};
this.updateActiveUser(user);
this.change_detect = false;
this.status = "loading";
this.updateActiveUser(user)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

61
src/views/admin/user/UserEditPermission.vue
View file

@ -9,14 +9,13 @@
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<Permission
v-else
:permissions="user?.permissions"
:status="updateStatus"
@savePermissions="triggerPermissionUpdate"
@resetStatus="resetStatus"
v-else-if="user != null"
:permissions="user.permissions"
:status="status"
@savePermissions="triggerUpdate"
/>
</template>
</MainTemplate>
@ -30,6 +29,7 @@ import Permission from "@/components/admin/Permission.vue";
import Spinner from "@/components/Spinner.vue";
import { useUserStore } from "@/stores/admin/user";
import type { PermissionObject } from "@/types/permissionTypes";
import type { UserViewModel } from "@/viewmodels/admin/user.models";
</script>
<script lang="ts">
@ -37,17 +37,50 @@ export default defineComponent({
props: {
id: String,
},
computed: {
...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
data() {
return {
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
user: null as null | UserViewModel,
timeout: null as any,
};
},
mounted() {
this.resetStatus();
this.fetchUserById(parseInt(this.id ?? ""));
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useUserStore, ["fetchUserById", "updateActiveUserPermissions", "resetStatus"]),
triggerPermissionUpdate(e: PermissionObject) {
this.updateActiveUserPermissions(e);
...mapActions(useUserStore, ["fetchUserById", "updateActiveUserPermissions"]),
fetchItem() {
this.fetchUserById(parseInt(this.id ?? ""))
.then((result) => {
this.user = result.data;
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: PermissionObject) {
if (this.user == null) return;
this.status = "loading";
this.updateActiveUserPermissions(this.user.id, e)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});

78
src/views/admin/user/UserEditRoles.vue
View file

@ -5,12 +5,12 @@
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8">Nutzer {{ user?.username }} - Rollen bearbeiten</h1>
<h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Rollen bearbeiten</h1>
</div>
</template>
<template #main>
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<div v-else class="flex flex-col grow gap-4">
<div class="flex flex-col gap-2 grow">
<p class="text-xl font-semibold">zugewiesene Rollen</p>
@ -39,13 +39,13 @@
</div>
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline class="!w-fit" :disabled="!change_detect" @click="reset">verwerfen</button>
<button primary class="!w-fit" :disabled="updateStatus == 'loading'" @click="triggerRolesUpdate">
<button primary-outline class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
<button primary class="!w-fit" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
speichern
</button>
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</div>
</template>
@ -60,11 +60,13 @@ import { useUserStore } from "@/stores/admin/user";
import { useRoleStore } from "@/stores/admin/role";
import type { PermissionObject } from "@/types/permissionTypes";
import MainTemplate from "@/templates/Main.vue";
import Permission from "@/components/admin/Permission.vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { XMarkIcon, PlusIcon } from "@heroicons/vue/24/outline";
import type { UserViewModel } from "@/viewmodels/admin/user.models";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isEqual";
</script>
<script lang="ts">
@ -74,17 +76,19 @@ export default defineComponent({
},
watch: {
user() {
this.assigned = this.user?.roles.map((r) => r.id) ?? [];
this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
},
},
data() {
return {
change_detect: false as boolean,
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | UserViewModel,
assigned: [] as Array<number>,
timeout: null as any,
};
},
computed: {
...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
...mapState(useRoleStore, ["roles"]),
assignedRoles() {
return this.roles.filter((r) => this.assigned.includes(r.id));
@ -92,34 +96,58 @@ export default defineComponent({
availableRoles() {
return this.roles.filter((r) => !this.assigned.includes(r.id));
},
canSaveOrReset(): boolean {
return isEqual(this.origin?.roles, this.assigned);
},
},
mounted() {
this.resetStatus();
this.fetchUserById(parseInt(this.id ?? ""));
this.fetchRoles();
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useUserStore, ["fetchUserById", "updateActiveUserRoles", "resetStatus"]),
...mapActions(useUserStore, ["fetchUserById", "updateActiveUserRoles"]),
...mapActions(useRoleStore, ["fetchRoles"]),
detectChange() {
this.resetStatus();
this.change_detect = true;
resetForm() {
this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
},
reset() {
this.change_detect = false;
this.assigned = this.user?.roles.map((r) => r.id) ?? [];
fetchItem() {
this.fetchUserById(parseInt(this.id ?? ""))
.then((result) => {
this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
addAvailable(id: number) {
this.detectChange();
this.assigned.push(id);
},
removeAssigned(id: number) {
this.detectChange();
this.assigned = this.assigned.filter((roleId) => roleId !== id);
},
triggerRolesUpdate() {
this.change_detect = false;
this.updateActiveUserRoles(this.assigned);
if (this.origin == null) return;
this.status = "loading";
this.updateActiveUserRoles(this.origin.id, this.assigned)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});