148 lines
6.0 KiB
Vue
148 lines
6.0 KiB
Vue
<template>
|
|
<teleport to="body">
|
|
<div class="modal fade show d-block" tabindex="-1" role="dialog" aria-modal="true" @click.self="closeModal">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Create New Note</h5>
|
|
<button type="button" class="btn-close" aria-label="Close" @click="closeModal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form @submit.prevent="handleCreate">
|
|
<div class="mb-3">
|
|
<label for="noteTitle" class="form-label">Note Title</label>
|
|
<input id="noteTitle" v-model="form.title" type="text" class="form-control" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="noteContent" class="form-label">Content</label>
|
|
<textarea id="noteContent" v-model="form.content" class="form-control" rows="5"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="noteDescription" class="form-label">Description</label>
|
|
<textarea id="noteDescription" v-model="form.description" class="form-control" rows="2" maxlength="500" placeholder="Short summary shown in note lists"></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="noteCategory" class="form-label">Category</label>
|
|
<select id="noteCategory" v-model="form.category_id" class="form-select">
|
|
<option :value="null">Uncategorized</option>
|
|
<option v-for="category in categoryOptions" :key="category.id" :value="category.id">
|
|
{{ category.label }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="note-flags mb-3">
|
|
<label class="form-check flag-check">
|
|
<input v-model="form.is_pinned" class="form-check-input" type="checkbox" />
|
|
<span class="form-check-label">Pinned</span>
|
|
</label>
|
|
|
|
<label class="form-check flag-check">
|
|
<input v-model="form.is_favorite" class="form-check-input" type="checkbox" />
|
|
<span class="form-check-label">Featured</span>
|
|
</label>
|
|
|
|
<label v-if="publicSharingEnabled" class="form-check flag-check">
|
|
<input v-model="form.is_public" class="form-check-input" type="checkbox" />
|
|
<span class="form-check-label">Public</span>
|
|
</label>
|
|
|
|
<label class="form-check flag-check">
|
|
<input v-model="form.is_password_protected" class="form-check-input" type="checkbox" />
|
|
<span class="form-check-label">Password Protected</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div v-if="form.is_password_protected" class="mb-3">
|
|
<label for="notePassword" class="form-label">Note Password</label>
|
|
<input id="notePassword" v-model="form.note_password" type="password" class="form-control" minlength="4" maxlength="128" required />
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Create</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-backdrop fade show"></div>
|
|
</teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, watch } from "vue";
|
|
import { useSettingsStore } from "../stores/settingsStore";
|
|
|
|
const props = defineProps({
|
|
categoryOptions: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
defaultCategoryId: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["close", "create"]);
|
|
const settingsStore = useSettingsStore();
|
|
const publicSharingEnabled = ref(true);
|
|
|
|
const form = ref({
|
|
title: "",
|
|
description: "",
|
|
content: "",
|
|
category_id: null,
|
|
is_pinned: false,
|
|
is_favorite: false,
|
|
is_public: false,
|
|
is_password_protected: false,
|
|
note_password: "",
|
|
});
|
|
|
|
watch(
|
|
() => props.defaultCategoryId,
|
|
(defaultCategoryId) => {
|
|
form.value.category_id = defaultCategoryId || null;
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
onMounted(async () => {
|
|
await settingsStore.loadFeatureFlags();
|
|
publicSharingEnabled.value = settingsStore.publicSharingEnabled;
|
|
|
|
if (!publicSharingEnabled.value) {
|
|
form.value.is_public = false;
|
|
}
|
|
});
|
|
|
|
const closeModal = () => {
|
|
emit("close");
|
|
};
|
|
|
|
const handleCreate = () => {
|
|
if (form.value.title.trim()) {
|
|
const { is_password_protected, ...payload } = form.value;
|
|
emit("create", {
|
|
...payload,
|
|
category_id: payload.category_id || null,
|
|
note_password: is_password_protected ? payload.note_password || "" : "",
|
|
});
|
|
form.value = {
|
|
title: "",
|
|
description: "",
|
|
content: "",
|
|
category_id: props.defaultCategoryId || null,
|
|
is_pinned: false,
|
|
is_favorite: false,
|
|
is_public: false,
|
|
is_password_protected: false,
|
|
note_password: "",
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped src="../assets/styles/scoped/components/CreateNoteModal.css"></style>
|
|
|
|
|
|
|