Создаем веб-приложение на Vue.js и Laravel

<template>
  <div>
    <h1>Мое первое приложение на Vue.js и Laravel</h1>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>

<template>
  <div class="home">
    <h1>Домашняя страница</h1>
    <p>Добро пожаловать в наше приложение!</p>
  </div>
</template>
 
<script>
export default {
  name: 'Home'
}
</script>

<template>
  <div class="task-list">
    <h1>Список задач</h1>
    <div v-if="loading">Загрузка...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else>
      <task-item 
        v-for="task in tasks" 
        :key="task.id" 
        :task="task"
        @delete="deleteTask"
        @update="updateTask"
      />
    </div>
    <task-form @submit="createTask" />
  </div>
</template>
 
<script>
import TaskItem from '@/components/TaskItem.vue'
import TaskForm from '@/components/TaskForm.vue'
import api from '@/utils/api'
 
export default {
  components: {
    TaskItem,
    TaskForm
  },
  data() {
    return {
      tasks: [],
      loading: true,
      error: null
    }
  },
  mounted() {
    this.fetchTasks()
  },
  methods: {
    async fetchTasks() {
      try {
        const response = await api.get('/tasks')
        this.tasks = response.data.data
        this.loading = false
      } catch (err) {
        this.error = 'Ошибка при загрузке задач'
        this.loading = false
      }
    },
    // другие методы для работы с задачами
  }
}
</script>

<!-- TaskForm.vue -->
<template>
  <form @submit.prevent="submitForm">
    <div class="form-group">
      <label for="name">Название</label>
      <input
        id="name"
        v-model="form.name"
        class="form-control"
        :class="{ 'is-invalid': errors.name }"
      />
      <div v-if="errors.name" class="invalid-feedback">{{ errors.name }}</div>
    </div>
    
    <button type="submit" :disabled="isSubmitting">Сохранить</button>
  </form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        description: '',
        status: 'pending'
      },
      errors: {},
      isSubmitting: false
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      
      if (!this.form.name) {
        this.errors.name = 'Название задачи обязательно'
      } else if (this.form.name.length > 255) {
        this.errors.name = 'Название не должно превышать 255 символов'
      }
      
      return Object.keys(this.errors).length === 0
    },
    
    async submitForm() {
      if (!this.validateForm()) return
      
      this.isSubmitting = true
      
      try {
        await api.post('/tasks', this.form)
        this.$emit('created')
        this.resetForm()
      } catch (error) {
        if (error.response && error.response.status === 422) {
          this.errors = error.response.data.errors
        } else {
          console.error('Ошибка при создании задачи', error)
        }
      } finally {
        this.isSubmitting = false
      }
    },
    
    resetForm() {
      this.form = {
        name: '',
        description: '',
        status: 'pending'
      }
      this.errors = {}
    }
  }
}
</script>

<template>
  <form @submit.prevent="submitForm" class="task-form">
    <div class="form-group">
      <label for="name">Название задачи</label>
      <input
        id="name"
        v-model="form.name"
        class="form-control"
        :class="{ 'is-invalid': errors.name }"
      />
      <div v-if="errors.name" class="invalid-feedback">{{ errors.name[0] }}</div>
    </div>
    
    <div class="form-group">
      <label for="description">Описание</label>
      <textarea
        id="description"
        v-model="form.description"
        class="form-control"
        :class="{ 'is-invalid': errors.description }"
      ></textarea>
      <div v-if="errors.description" class="invalid-feedback">{{ errors.description[0] }}</div>
    </div>
    
    <div class="form-group">
      <label for="status">Статус</label>
      <select
        id="status"
        v-model="form.status"
        class="form-control"
        :class="{ 'is-invalid': errors.status }"
      >
        <option value="pending">В ожидании</option>
        <option value="in_progress">В процессе</option>
        <option value="completed">Завершено</option>
      </select>
      <div v-if="errors.status" class="invalid-feedback">{{ errors.status[0] }}</div>
    </div>
    
    <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
      {{ isSubmitting ? 'Сохранение...' : 'Сохранить' }}
    </button>
  </form>
</template>
 
<script>
import { ref, reactive } from 'vue'
import api from '@/utils/api'
 
export default {
  props: {
    task: {
      type: Object,
      default: null
    }
  },
  
  setup(props, { emit }) {
    const form = reactive({
      name: props.task?.name || '',
      description: props.task?.description || '',
      status: props.task?.status || 'pending'
    })
    
    const errors = reactive({})
    const isSubmitting = ref(false)
    
    const validateForm = () => {
      errors.name = !form.name ? ['Название задачи обязательно'] : null
      
      return !errors.name
    }
    
    const submitForm = async () => {
      if (!validateForm()) return
      
      isSubmitting.value = true
      
      try {
        let response
        
        if (props.task) {
          response = await api.put(`/tasks/${props.task.id}`, form)
          emit('updated', response.data.data)
        } else {
          response = await api.post('/tasks', form)
          emit('created', response.data.data)
        }
        
        // Сброс формы после успешного создания
        if (!props.task) {
          form.name = ''
          form.description = ''
          form.status = 'pending'
        }
      } catch (error) {
        if (error.response && error.response.status === 422) {
          Object.assign(errors, error.response.data.errors)
        } else {
          console.error('Ошибка при сохранении задачи', error)
        }
      } finally {
        isSubmitting.value = false
      }
    }
    
    return {
      form,
      errors,
      isSubmitting,
      submitForm
    }
  }
}
</script>

<template>
<div class="task-item" :class="statusClass">
  <div class="task-header">
    <h3>{{ task.name }}</h3>
    <div class="task-controls">
      <button @click="editTask" class="btn btn-sm btn-outline-primary">
        <i class="fas fa-edit"></i>
      </button>
      <button @click="confirmDelete" class="btn btn-sm btn-outline-danger">
        <i class="fas fa-trash"></i>
      </button>
    </div>
  </div>
  
  <p v-if="task.description">{{ task.description }}</p>
  
  <div class="task-footer">
    <div class="task-status">
      <span class="status-badge">{{ statusText }}</span>
    </div>
    <div class="task-date">
      {{ formatDate(task.created_at) }}
    </div>
  </div>
</div>
</template>
 
<script>
import { computed } from 'vue'
import { formatDistanceToNow } from 'date-fns'
import { ru } from 'date-fns/locale'
 
export default {
props: {
  task: {
    type: Object,
    required: true
  }
},
 
setup(props, { emit }) {
  const statusClass = computed(() => `status-${props.task.status}`)
  
  const statusText = computed(() => {
    const statuses = {
      'pending': 'В ожидании',
      'in_progress': 'В процессе',
      'completed': 'Завершено'
    }
    return statuses[props.task.status] || props.task.status
  })
  
  const formatDate = (date) => {
    return formatDistanceToNow(new Date(date), { addSuffix: true, locale: ru })
  }
  
  const editTask = () => {
    emit('edit', props.task)
  }
  
  const confirmDelete = () => {
    if (confirm('Вы уверены, что хотите удалить эту задачу?')) {
      emit('delete', props.task.id)
    }
  }
  
  return {
    statusClass,
    statusText,
    formatDate,
    editTask,
    confirmDelete
  }
}
}
</script>
 
<style scoped>
.task-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
 
.status-pending {
  border-left: 4px solid #ffc107;
}
 
.status-in_progress {
  border-left: 4px solid #17a2b8;
}
 
.status-completed {
  border-left: 4px solid #28a745;
}
</style>

<template>
<div class="tasks-container">
  <div class="tasks-header">
    <h1>Мои задачи</h1>
    <div class="filters">
      <select v-model="currentFilter" class="form-control">
        <option value="all">Все задачи</option>
        <option value="pending">В ожидании</option>
        <option value="in_progress">В процессе</option>
        <option value="completed">Завершенные</option>
      </select>
    </div>
  </div>
  
  <div v-if="loading" class="loader">
    <div class="spinner-border" role="status">
      <span class="sr-only">Загрузка...</span>
    </div>
  </div>
  
  <div v-else-if="error" class="alert alert-danger">
    {{ error }}
  </div>
  
  <div v-else-if="filteredTasks.length === 0" class="no-tasks">
    <p>Задачи не найдены</p>
    <button @click="showForm = true" class="btn btn-primary">
      Создать первую задачу
    </button>
  </div>
  
  <div v-else class="task-list">
    <task-item
      v-for="task in filteredTasks"
      :key="task.id"
      :task="task"
      @edit="startEditing"
      @delete="deleteTask"
    />
  </div>
  
  <button v-if="filteredTasks.length > 0" @click="showForm = true" class="btn btn-primary add-task-btn">
    Добавить задачу
  </button>
  
  <div v-if="showForm" class="task-form-modal">
    <div class="task-form-container">
      <h2>{{ editingTask ? 'Редактировать задачу' : 'Новая задача' }}</h2>
      <task-form
        :task="editingTask"
        @created="taskCreated"
        @updated="taskUpdated"
        @cancel="cancelForm"
      />
    </div>
  </div>
</div>
</template>
 
<script>
import { ref, computed, onMounted } from 'vue'
import TaskItem from '@/components/TaskItem.vue'
import TaskForm from '@/components/TaskForm.vue'
import api from '@/utils/api'
 
export default {
components: {
  TaskItem,
  TaskForm
},
 
setup() {
  const tasks = ref([])
  const loading = ref(true)
  const error = ref(null)
  const showForm = ref(false)
  const editingTask = ref(null)
  const currentFilter = ref('all')
  
  const fetchTasks = async () => {
    loading.value = true
    error.value = null
    
    try {
      const response = await api.get('/tasks')
      tasks.value = response.data.data
    } catch (err) {
      error.value = 'Не удалось загрузить задачи. Пожалуйста, попробуйте позже.'
      console.error(err)
    } finally {
      loading.value = false
    }
  }
  
  const filteredTasks = computed(() => {
    if (currentFilter.value === 'all') {
      return tasks.value
    }
    
    return tasks.value.filter(task => task.status === currentFilter.value)
  })
  
  const startEditing = (task) => {
    editingTask.value = task
    showForm.value = true
  }
  
  const cancelForm = () => {
    showForm.value = false
    editingTask.value = null
  }
  
  const taskCreated = (newTask) => {
    tasks.value.unshift(newTask)
    showForm.value = false
  }
  
  const taskUpdated = (updatedTask) => {
    const index = tasks.value.findIndex(t => t.id === updatedTask.id)
    if (index !== -1) {
      tasks.value[index] = updatedTask
    }
    showForm.value = false
    editingTask.value = null
  }
  
  const deleteTask = async (taskId) => {
    try {
      await api.delete(`/tasks/${taskId}`)
      tasks.value = tasks.value.filter(t => t.id !== taskId)
    } catch (err) {
      error.value = 'Не удалось удалить задачу'
      console.error(err)
    }
  }
  
  onMounted(fetchTasks)
  
  return {
    tasks,
    loading,
    error,
    showForm,
    editingTask,
    currentFilter,
    filteredTasks,
    startEditing,
    cancelForm,
    taskCreated,
    taskUpdated,
    deleteTask
  }
}
}
</script>

<template>
<div class="auth-form">
  <h2>{{ isLogin ? 'Вход' : 'Регистрация' }}</h2>
  
  <form @submit.prevent="submitForm">
    <div v-if="!isLogin" class="form-group">
      <label for="name">Имя</label>
      <input
        id="name"
        v-model="form.name"
        type="text"
        class="form-control"
        :class="{ 'is-invalid': errors.name }"
        required
      />
      <div v-if="errors.name" class="invalid-feedback">{{ errors.name[0] }}</div>
    </div>
    
    <div class="form-group">
      <label for="email">Email</label>
      <input
        id="email"
        v-model="form.email"
        type="email"
        class="form-control"
        :class="{ 'is-invalid': errors.email }"
        required
      />
      <div v-if="errors.email" class="invalid-feedback">{{ errors.email[0] }}</div>
    </div>
    
    <div class="form-group">
      <label for="password">Пароль</label>
      <input
        id="password"
        v-model="form.password"
        type="password"
        class="form-control"
        :class="{ 'is-invalid': errors.password }"
        required
      />
      <div v-if="errors.password" class="invalid-feedback">{{ errors.password[0] }}</div>
    </div>
    
    <div v-if="!isLogin" class="form-group">
      <label for="password_confirmation">Подтверждение пароля</label>
      <input
        id="password_confirmation"
        v-model="form.password_confirmation"
        type="password"
        class="form-control"
        required
      />
    </div>
    
    <button type="submit" class="btn btn-primary btn-block" :disabled="isSubmitting">
      {{ isSubmitting ? 'Подождите...' : (isLogin ? 'Войти' : 'Зарегистрироваться') }}
    </button>
    
    <div v-if="formError" class="alert alert-danger mt-3">
      {{ formError }}
    </div>
  </form>
  
  <div class="auth-toggle">
    <p>
      {{ isLogin ? 'Нет аккаунта?' : 'Уже есть аккаунт?' }}
      <a href="#" @click.prevent="toggleAuthMode">
        {{ isLogin ? 'Зарегистрироваться' : 'Войти' }}
      </a>
    </p>
  </div>
</div>
</template>

<script>
import { computed, onMounted } from 'vue'
import { useStore } from 'vuex'
 
export default {
  setup() {
    const store = useStore()
    
    const tasks = computed(() => store.state.tasks.tasks)
    const loading = computed(() => store.state.tasks.loading)
    const error = computed(() => store.state.tasks.error)
    
    const pendingTasks = computed(() => store.getters['tasks/pendingTasks'])
    
    onMounted(() => {
      store.dispatch('tasks/fetchTasks')
    })
    
    const createTask = (taskData) => {
      return store.dispatch('tasks/createTask', taskData)
    }
    
    return {
      tasks,
      loading,
      error,
      pendingTasks,
      createTask
    }
  }
}
</script>

<script>
import { onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';
 
export default {
  setup() {
    const store = useStore();
    let echoChannel = null;
    
    onMounted(() => {
      // Подписываемся на приватный канал для текущего пользователя
      echoChannel = window.Echo.private(`tasks.${store.state.auth.user.id}`)
        .listen('TaskUpdated', (e) => {
          // Обновляем задачу в хранилище
          store.commit('tasks/UPDATE_TASK', e.task);
          
          // Показываем уведомление
          store.dispatch('notifications/add', {
            type: 'success',
            message: [INLINE]Задача "${e.task.name}" была обновлена[/INLINE]
          });
        });
    });
    
    onUnmounted(() => {
      // Отписываемся от канала при уничтожении компонента
      if (echoChannel) {
        echoChannel.unsubscribe();
      }
    });
    
    // Остальной код компонента
  }
}
</script>