initial commit of GUI

2024-12-06 11:22:41 +01:00 · 2024-11-18 18:32:34 +01:00 · 2024-11-18 18:32:34 +01:00 · f07b9953e3
commit f07b9953e3
parent b64ae41cd0
20 changed files with 1416 additions and 0 deletions
--- a/src/views/ResourceSettings.vue
+++ b/src/views/ResourceSettings.vue
@ -0,0 +1,165 @@
+<script setup>
+import { ref, watch, computed } from "vue";
+import { loadState } from '@nextcloud/initial-state';
+import { NcLoadingIcon, NcCheckboxRadioSwitch, NcButton, NcTextField } from '@nextcloud/vue';
+
+import BackupRestore from "vue-material-design-icons/BackupRestore.vue";
+import Delete from "vue-material-design-icons/Delete.vue";
+
+import MemberList from "../components/MemberList/index.js";
+import Permissions from "../components/Permissions/index.js";
+import ConfirmDeleteDialog from "../components/ConfirmDeleteDialog.vue";
+import ModalView from '../ModalView.vue';
+import api from "../api.js";
+import { validResourceName } from "../helpers/validation.js";
+
+const props = defineProps({
+  resourceId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const resource = ref(null);
+const loading = ref(false);
+const resourceActiveLoading = ref(false);
+
+const currentResourceName = ref(false);
+
+const resourceNameValid = computed(() => {
+    return validResourceName(currentResourceName.value); 
+});
+
+const saveName = async () => {
+    resource.value = await api.updateResource(resource.value.id, { name: currentResourceName.value });
+};
+
+watch(() => props.resourceId, async (newResourceId) => {
+    loading.value = true;
+    resource.value = await api.getResource(newResourceId, "model+members");
+    currentResourceName.value = resource.value.name;
+    loading.value = false;
+}, { immediate: true });
+
+const saveActive = async (active) => {
+    resourceActiveLoading.value = true;
+    resource.value = await api.updateResource(resource.value.id, { active });
+    resourceActiveLoading.value = false;
+};
+
+const savePermission = async ({ field, value }) => {
+    resource.value = await api.updateResource(resource.value.id, {
+	  [field]: value,
+	});
+};
+
+const switchToSnapshotRestoreView = ()  => {
+
+};
+
+const snapshotIntegrationActive = loadState('organization_folders', 'snapshot_integration_active', false);
+
+</script>
+
+<template>
+    <ModalView :has-back-button="true" :has-next-step-button="false" :has-last-step-button="false" :title="'Resource Settings'" :loading="loading" v-slot="">
+        <h3>Eigenschaften</h3>
+		<div class="name-input-container">
+			<NcTextField :value.sync="currentResourceName"
+				:error="!resourceNameValid"
+				:label-visible="!resourceNameValid"
+				:label-outside="true"
+				:helper-text="resourceNameValid ? '' : 'Ungültiger Name'"
+				label="Name"
+				:show-trailing-button="currentResourceName !== resource.name"
+				trailing-button-icon="arrowRight"
+				style=" --color-border-maxcontrast: #949494;"
+				@trailing-button-click="saveName"
+				@blur="() => currentResourceName = currentResourceName.trim()"
+				@keyup.enter="saveName" />
+		</div>
+		<h3>Berechtigungen</h3>
+		<Permissions :resource="resource" @permissionUpdated="savePermission" />
+		<MemberList :members="resource?.members" />
+		<h3>Einstellungen</h3>
+		<div class="settings-group">
+			<NcButton v-if="snapshotIntegrationActive" @click="switchToSnapshotRestoreView">
+				<template #icon>
+					<BackupRestore />
+				</template>
+				Aus Backup wiederherstellen
+			</NcButton>
+			<div class="resource-active-button">
+				<NcCheckboxRadioSwitch :checked="resource.active"
+					:loading="resourceActiveLoading"
+					type="checkbox"
+                    @update:checked="saveActive">
+					Resource aktiv
+				</NcCheckboxRadioSwitch>
+			</div>
+			<ConfirmDeleteDialog title="Ordner löschen"
+				:loading="loading"
+				button-label="Ordner löschen"
+				:match-text="resource.name">
+				<template #activator="{ open }">
+					<NcButton v-tooltip="resource.active ? 'Nur deaktivierte Resourcen können gelöscht werden' : undefined"
+						style="height: 52px;"
+						:disabled="resource.active"
+						type="error"
+						@click="open">
+						Gruppe löschen
+					</NcButton>
+				</template>
+				<template #content>
+					<p style="margin: 1rem 0 1rem 0">
+						Du bist dabei den Ordner {{ resource.name }} und den Inhalt komplett zu löschen.
+					</p>
+				</template>
+				<template #delete-button="{ close, disabled }">
+					<NcButton type="warning"
+						:disabled="disabled || loading"
+						:loading="loading"
+						@click="() => deleteResource(close)">
+						<template #icon>
+							<NcLoadingIcon v-if="loading" />
+							<Delete v-else :size="20" />
+						</template>
+						Gruppe löschen
+					</NcButton>
+				</template>
+			</ConfirmDeleteDialog>
+		</div>
+    </ModalView>
+</template>
+
+<style scoped>
+.name-input-group {
+	display: flex;
+	align-items: flex-end;
+	max-width: 500px;
+}
+
+.settings-group {
+	display: flex;
+	margin-top: 5px;
+}
+
+.settings-group > :not(:last-child) {
+	margin-right: 20px;
+}
+
+.resource-active-button >>> .checkbox-radio-switch__label {
+	/* Add primary background color like other buttons */
+	background-color: var(--color-primary-light);
+}
+
+label {
+	display: block;
+}
+
+h3 {
+	font-weight: bold;
+	margin-top: 24px;
+	margin-bottom: 0;
+}
+</style>