282 lines
10 KiB
Vue
282 lines
10 KiB
Vue
<template>
|
|
<teleport to="body">
|
|
<div class="modal fade show d-block admin-modal" tabindex="-1" role="dialog" aria-modal="true" @click.self="emit('close')">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Edit Space</h5>
|
|
<button type="button" class="btn-close" aria-label="Close" @click="emit('close')"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-5">
|
|
<label class="form-label">Name</label>
|
|
<input v-model="form.name" type="text" class="form-control" />
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label class="form-label">Description</label>
|
|
<input v-model="form.description" type="text" class="form-control" />
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label">Icon</label>
|
|
<input v-model="form.icon" type="text" class="form-control" maxlength="20" />
|
|
</div>
|
|
<div class="col-12 d-flex justify-content-between align-items-center">
|
|
<div class="form-check form-switch">
|
|
<input id="admin-space-public" v-model="form.is_public" class="form-check-input" type="checkbox" />
|
|
<label for="admin-space-public" class="form-check-label">Public space</label>
|
|
</div>
|
|
<button class="btn btn-primary" :disabled="savingSpace" @click="saveSpace">
|
|
{{ savingSpace ? "Saving..." : "Save Space" }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div class="d-flex justify-content-between align-items-center mt-3 mb-2">
|
|
<h6 class="mb-0">Members</h6>
|
|
<button class="btn btn-sm btn-outline-secondary" :disabled="loadingMembers" @click="loadMembers">Refresh</button>
|
|
</div>
|
|
|
|
<form class="row g-2 align-items-end mb-3" @submit.prevent="addMember">
|
|
<div class="col-md-10">
|
|
<label class="form-label form-label-sm mb-1">Username</label>
|
|
<select v-model="newMember.user_id" class="form-select form-select-sm" required>
|
|
<option disabled value="">Select user</option>
|
|
<option v-for="u in selectableUsers" :key="u.id" :value="u.id">{{ u.username }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="submit" class="btn btn-primary btn-sm w-100" :disabled="addingMember">
|
|
{{ addingMember ? "..." : "Add" }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div v-if="loadingMembers" class="text-muted small">Loading members...</div>
|
|
<div v-else-if="members.length === 0" class="text-muted small">No members found.</div>
|
|
|
|
<div v-else class="table-responsive">
|
|
<table class="table table-sm align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Username</th>
|
|
<th>Joined</th>
|
|
<th class="text-end">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="m in members" :key="m.user_id">
|
|
<td>{{ m.username || m.user_id }}</td>
|
|
<td class="small text-muted">{{ formatDate(m.joined_at) }}</td>
|
|
<td class="text-end">
|
|
<button class="btn btn-sm btn-outline-danger" :disabled="removingMemberId === m.user_id" @click="removeMember(m)">
|
|
{{ removingMemberId === m.user_id ? "Removing..." : "Remove" }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div v-if="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
|
|
<div v-if="success" class="alert alert-success mt-3 mb-0">{{ success }}</div>
|
|
|
|
<hr />
|
|
<div class="border border-danger rounded p-3 mt-3">
|
|
<h6 class="text-danger mb-1">Danger Zone</h6>
|
|
<p class="text-muted small mb-3">Permanently delete this space and all its notes, categories, and members. This cannot be undone.</p>
|
|
<button class="btn btn-danger btn-sm" :disabled="deleting" @click="deleteSpace">
|
|
{{ deleting ? "Deleting..." : "Delete Space" }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-backdrop fade show admin-modal-backdrop"></div>
|
|
</teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from "vue";
|
|
import apiClient from "../services/apiClient";
|
|
|
|
const props = defineProps({
|
|
space: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
users: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["close", "saved", "deleted"]);
|
|
|
|
const form = ref({
|
|
name: "",
|
|
description: "",
|
|
icon: "",
|
|
is_public: false,
|
|
});
|
|
|
|
const members = ref([]);
|
|
const loadingMembers = ref(false);
|
|
const savingSpace = ref(false);
|
|
const addingMember = ref(false);
|
|
const removingMemberId = ref("");
|
|
const error = ref("");
|
|
const success = ref("");
|
|
const newMember = ref({ user_id: "" });
|
|
const deleting = ref(false);
|
|
|
|
const formatDate = (iso) => (iso ? new Date(iso).toLocaleDateString() : "-");
|
|
|
|
const clearMessages = () => {
|
|
error.value = "";
|
|
success.value = "";
|
|
};
|
|
|
|
const resetFormFromSpace = () => {
|
|
form.value = {
|
|
name: props.space?.name || "",
|
|
description: props.space?.description || "",
|
|
icon: props.space?.icon || "",
|
|
is_public: !!props.space?.is_public,
|
|
};
|
|
};
|
|
|
|
const selectableUsers = computed(() => {
|
|
const memberIds = new Set(members.value.map((m) => m.user_id));
|
|
return (props.users || []).filter((u) => !memberIds.has(u.id));
|
|
});
|
|
|
|
const loadMembers = async () => {
|
|
loadingMembers.value = true;
|
|
clearMessages();
|
|
try {
|
|
const response = await apiClient.get(`/api/v1/admin/spaces/${props.space.id}/members`);
|
|
members.value = response.data.members || [];
|
|
} catch (e) {
|
|
error.value = e.response?.data || "Failed to load members.";
|
|
} finally {
|
|
loadingMembers.value = false;
|
|
}
|
|
};
|
|
|
|
const saveSpace = async () => {
|
|
savingSpace.value = true;
|
|
clearMessages();
|
|
try {
|
|
const response = await apiClient.put(`/api/v1/admin/spaces/${props.space.id}`, {
|
|
name: form.value.name,
|
|
description: form.value.description,
|
|
icon: form.value.icon,
|
|
is_public: form.value.is_public,
|
|
});
|
|
success.value = "Space updated.";
|
|
emit("saved", response.data);
|
|
} catch (e) {
|
|
error.value = e.response?.data || "Failed to update space.";
|
|
} finally {
|
|
savingSpace.value = false;
|
|
}
|
|
};
|
|
|
|
const addMember = async () => {
|
|
if (!newMember.value.user_id) {
|
|
return;
|
|
}
|
|
|
|
addingMember.value = true;
|
|
clearMessages();
|
|
try {
|
|
await apiClient.post(`/api/v1/admin/spaces/${props.space.id}/members`, {
|
|
user_id: newMember.value.user_id,
|
|
});
|
|
success.value = "Member added.";
|
|
newMember.value = { user_id: "" };
|
|
await loadMembers();
|
|
} catch (e) {
|
|
error.value = e.response?.data || "Failed to add member.";
|
|
} finally {
|
|
addingMember.value = false;
|
|
}
|
|
};
|
|
|
|
const removeMember = async (member) => {
|
|
const memberName = member?.username || member?.user_id;
|
|
if (!member?.user_id || !confirm(`Remove member "${memberName}" from this space?`)) {
|
|
return;
|
|
}
|
|
|
|
removingMemberId.value = member.user_id;
|
|
clearMessages();
|
|
try {
|
|
await apiClient.delete(`/api/v1/admin/spaces/${props.space.id}/members/${member.user_id}`);
|
|
success.value = "Member removed.";
|
|
await loadMembers();
|
|
} catch (e) {
|
|
error.value = e.response?.data || "Failed to remove member.";
|
|
} finally {
|
|
removingMemberId.value = "";
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => props.space,
|
|
async () => {
|
|
resetFormFromSpace();
|
|
await loadMembers();
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
const deleteSpace = async () => {
|
|
if (!confirm(`Permanently delete space "${props.space.name}"? All notes, categories, and members will be removed. This cannot be undone.`)) {
|
|
return;
|
|
}
|
|
deleting.value = true;
|
|
clearMessages();
|
|
try {
|
|
await apiClient.delete(`/api/v1/admin/spaces/${props.space.id}`);
|
|
emit("deleted", props.space);
|
|
} catch (e) {
|
|
error.value = e.response?.data || "Failed to delete space.";
|
|
} finally {
|
|
deleting.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-modal {
|
|
z-index: 2000;
|
|
overflow-y: auto;
|
|
padding-top: max(0.5rem, env(safe-area-inset-top));
|
|
}
|
|
|
|
.admin-modal-backdrop {
|
|
z-index: 1990;
|
|
}
|
|
|
|
.admin-modal .modal-dialog {
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.admin-modal {
|
|
padding-top: max(0.75rem, env(safe-area-inset-top));
|
|
}
|
|
|
|
.admin-modal .modal-dialog {
|
|
margin: 0.75rem;
|
|
max-width: none;
|
|
}
|
|
}
|
|
</style>
|