cabal_frontend

Paso 1

Crear el proyecto

npm create quasar@latest

> starfit@0.0.1 npx
> "create-quasar"



 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

✔ What would you like to build? › App with Quasar CLI, let's go!
✔ Project folder: … journal_frontend
✔ Pick script type: › Javascript
✔ Pick Quasar App CLI variant: › Quasar App CLI with Vite
✔ Package name: … journal_frontend
✔ Project product name: (must start with letter if building mobile apps) … journal_frontend
✔ Project description: … A Quasar Project
? Check the features needed for your project: ›  
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
◉   Sass CSS preprocessor
◯   Linting (vite-plugin-checker + ESLint) - recommended
◯   State Management (Pinia)

....................

 Quasar •  SUCCESS  • The project has been scaffolded

✔ Install project dependencies? (recommended) › Yes, use npm

Paso 2

Agregar el codigo de CRUD en src/pages/IndexPage.vue

<template>
  <q-page padding class="bg-blue-grey-1">
    <div class="row justify-center">
      <div class="col-12 col-md-10 col-lg-8">
        <q-card flat bordered class="shadow-3 rounded-borders q-mb-lg overflow-hidden">
          <q-card-section class="bg-primary text-white q-py-lg">
            <div class="text-h5">Bitacora de trabajo</div>
            <div class="text-subtitle2 text-blue-grey-3">Crear y administrar registro de actividades</div>
          </q-card-section>
          <q-card-section>
            <div class="row q-col-gutter-md">
              <div class="col-12 col-sm-6">
                <q-input v-model="title" outlined dense label="Titulo" bg-color="white" />
              </div>
              <div class="col-12">
                <q-input
                  v-model="description"
                  type="textarea"
                  outlined
                  dense
                  rows="3"
                  label="Descripción"
                  bg-color="white"
                />
              </div>
              <div class="col-12 row q-gutter-sm">
                <q-btn
                  v-if="!editId"
                  unelevated
                  color="primary"
                  icon="add"
                  label="Create"
                  @click="createEntry"
                />
                <template v-else>
                  <q-btn unelevated color="secondary" icon="save" label="Update" @click="updateEntry" />
                  <q-btn outline color="grey-8" label="Cancel" @click="cancelEdit" />
                </template>
              </div>
            </div>
          </q-card-section>
        </q-card>
        <q-card flat bordered class="shadow-2 rounded-borders">
          <q-card-section>
            <div class="text-h6 q-mb-md text-blue-grey-9">All entries</div>
            <q-table
              flat
              bordered
              :rows="entries"
              :columns="columns"
              row-key="id"
              :loading="loading"
              separator="cell"
              class="rounded-borders bg-white"
            >
              <template #body-cell-actions="props">
                <q-td :props="props">
                  <q-btn dense flat round color="primary" icon="edit" @click="startEdit(props.row)" />
                  <q-btn dense flat round color="negative" icon="delete" @click="deleteEntry(props.row)" />
                </q-td>
              </template>
            </q-table>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-page>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useQuasar } from 'quasar'

const $q = useQuasar()
const entries = ref([])
const title = ref('')
const description = ref('')
const editId = ref(null)
const loading = ref(false)

const columns = [
  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
  { name: 'title', label: 'Title', field: 'title', align: 'left' },
  { name: 'description', label: 'Description', field: 'description', align: 'left' },
  { name: 'actions', label: '', field: 'actions', align: 'right' }
]

async function loadEntries() {
  loading.value = true
  try {
    const r = await fetch('http://127.0.0.1:8000/api/entries')
    entries.value = await r.json()
  } finally {
    loading.value = false
  }
}

async function createEntry() {
  const r = await fetch('http://127.0.0.1:8000/api/entries/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: title.value, description: description.value })
  })
  if (r.ok) {
    title.value = ''
    description.value = ''
    await loadEntries()
    $q.notify({ type: 'positive', message: 'Created', position: 'top' })
  } else {
    $q.notify({ type: 'negative', message: 'Create failed', position: 'top' })
  }
}

function startEdit(row) {
  editId.value = row.id
  title.value = row.title
  description.value = row.description
}

function cancelEdit() {
  editId.value = null
  title.value = ''
  description.value = ''
}

async function updateEntry() {
  const r = await fetch('http://127.0.0.1:8000/api/entries/' + editId.value + '/', {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title: title.value, description: description.value })
  })
  if (r.ok) {
    cancelEdit()
    await loadEntries()
  }
}

async function deleteEntry(row) {
  const r = await fetch('http://127.0.0.1:8000/api/entries/' + row.id + '/', { method: 'DELETE' })
  if (r.status === 204 || r.ok) {
    await loadEntries()
  }
}

onMounted(loadEntries)
</script>