Move Add Feed button from hamburger menu to admin area
The Add RSS modal is now opened from a button directly above the feed list in AdminFeeds.vue instead of the hamburger menu, so feed creation lives alongside the rest of feed management. AppNav.vue no longer renders it. AddUrl.vue emits an `added` event on a successful save; AdminFeeds.vue listens for it and reloads its feed list, so a newly added feed shows up immediately without leaving the admin page. Also fixes a bug this move surfaced: the modal's "Close" button had no `type`, so inside the form it defaulted to type="submit" — clicking Close on a filled-in form silently created the feed.
This commit is contained in:
@@ -1,7 +1,9 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import axios from 'axios'
|
||||
import Modal from './modal/AddUrl.vue'
|
||||
|
||||
const showModal = ref(false)
|
||||
const feeds = ref([])
|
||||
const error = ref('')
|
||||
|
||||
@@ -40,6 +42,7 @@ onMounted(loadFeeds)
|
||||
<template>
|
||||
<div class="admin">
|
||||
<h1 class="admin__heading">Admin</h1>
|
||||
<button class="admin__add" type="button" @click="showModal = true">Add RSS</button>
|
||||
<p v-if="error" class="admin__error">{{ error }}</p>
|
||||
<p v-else-if="feeds.length === 0" class="admin__empty">No feeds added yet.</p>
|
||||
<ul v-else class="admin__list">
|
||||
@@ -51,6 +54,14 @@ onMounted(loadFeeds)
|
||||
<button class="admin__delete" type="button" @click="deleteFeed(feed.id)">Delete</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Teleport to="body">
|
||||
<Modal :show="showModal" @close="showModal = false" @added="loadFeeds">
|
||||
<template #header>
|
||||
<h3>Add RSS Feed</h3>
|
||||
</template>
|
||||
</Modal>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -67,6 +78,24 @@ onMounted(loadFeeds)
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.admin__add {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
margin-bottom: 1.25rem;
|
||||
padding: 0.5rem 1.1rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.admin__add:hover {
|
||||
border-color: var(--color-border-hover);
|
||||
}
|
||||
|
||||
.admin__error,
|
||||
.admin__empty {
|
||||
opacity: 0.6;
|
||||
|
||||
Reference in New Issue
Block a user