HostXtra/notely
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
domrichardson
2026-03-24 16:03:04 +00:00
commit df40cc57e1
80 changed files with 16766 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
frontend/src/components/CreateNoteModal.vue Normal file
View File

@@ -0,0 +1,156 @@
<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>
.note-flags {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.flag-check {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
</style>