form state rewrite
This commit is contained in:
parent
5e50b85631
commit
b0ea9d13e7
40 changed files with 1123 additions and 1070 deletions
18
package-lock.json
generated
18
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" };
|
||||
});
|
||||
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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@ export interface AwardViewModel {
|
|||
award: string;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateAwardViewModel {
|
||||
export interface CreateAwardViewModel {
|
||||
award: string;
|
||||
}
|
||||
|
||||
export interface UpdateAwardViewModel {
|
||||
id: number;
|
||||
award: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@ export interface ExecutivePositionViewModel {
|
|||
position: string;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateExecutivePositionViewModel {
|
||||
export interface CreateExecutivePositionViewModel {
|
||||
position: string;
|
||||
}
|
||||
|
||||
export interface UpdateExecutivePositionViewModel {
|
||||
id: number;
|
||||
position: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@ export interface MembershipStatusViewModel {
|
|||
status: string;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateMembershipStatusViewModel {
|
||||
export interface CreateMembershipStatusViewModel {
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface UpdateMembershipStatusViewModel {
|
||||
id: number;
|
||||
status: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue