Este guia mostra os passos para montar uma interface de criação de artigos e conectar os campos do formulário aos dados do modelo, usando Vue.js como exemplo.

Pré‑requisitos

• Ambiente de desenvolvimento configurado (Node.js, npm/yarn).
• Arquivo article-manager.view existente no projeto (componente principal).

Passos para construir a página

1. Inserir um painel lateral (drawer) no componente

   • Copie a definição do modelo de dados, o código do componente e os estilos do painel lateral fornecidos.
   • No article-manager.view, cole as definições de dados (objeto reativo) antes do bloco de métodos.
   • Cole o marcador HTML do drawer logo após o componente de paginação.
   • Adicioen as regras CSS copaidas ao final do arquivo (ou no bloco de estilos scoped).

2. Adicionar evento de clique para abrir o drawer

   • Localize o botão "Adicionar artigo".
   • Atribua a ele um evento @click que altera a variável de controle do drawer para true:

   <button @click="showDrawer = true">Novo artigo</button>
   

3. Integrar o editor de texto rico (Quill)

   • Instale o pacote via npm:

   npm install vue-quill-editor --save
   

   • No arquivo do componente, importe os estilos e o componente:

   import 'quill/dist/quill.core.css'
   import 'quill/dist/quill.snow.css'
   import 'quill/dist/quill.bubble.css'
   import { quillEditor } from 'vue-quill-editor'
   

   • Registre o componente quill-editor em components.
   • Utilize-o no template onde o corpo do artigo será editado:

   <quill-editor v-model="formData.body" />
   

Vínculo entre formulário e modelo de dados

No objeto reativo (data) do componente, temos:

• showDrawer (booleano, padrão false) – controla a visibilidade do painel lateral.
• formData – objeto que contém os campos do artigo:
  • title – vinculado ao campo de texto do título via v-model.
  • categoryId – vinculado ao <select> de categorias.
  • coverImage – usado no img dentro do componente de upload.
  • body – ligado ao editor Quill (conteúdo HTML).
  • status – atribuído dinamicamente no clique dos botões "Publicar" ou "Salvar rascunho".

Exemplo de código (Vue 2/3 simplificado)

<template>
  <div>
    <button @click="showDrawer = true">Adicionar artigo</button>

    <drawer v-if="showDrawer" @close="showDrawer = false">
      <form @submit.prevent="handleSave">
        <input v-model="formData.title" placeholder="Título" />

        <select v-model="formData.categoryId">
          <option disabled value="">Selecione categoria</option>
          <option value="1">Notícias</option>
          <option value="2">Tutoriais</option>
        </select>

        <upload-component>
          <img :src="formData.coverImage" />
        </upload-component>

        <quill-editor v-model="formData.body" />

        <button type="submit" @click="formData.status = 'published'">Publicar</button>
        <button type="button" @click="formData.status = 'draft'; handleSave()">Salvar rascunho</button>
      </form>
    </drawer>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: { quillEditor },
  data() {
    return {
      showDrawer: false,
      formData: {
        title: '',
        categoryId: '',
        coverImage: '',
        body: '',
        status: ''
      }
    }
  },
  methods: {
    handleSave() {
      // Lógica para enviar os dados ao backend
      console.log('Artigo salvo', this.formData)
    }
  }
}
</script>

<style scoped>
/* Estilos copiados do drawer e demais componentes */
</style>

Adapte os nomes de propriedades, eventos e a lógica de envio conforme a estrutura real do seu projeto e o framework utilizado.