@ -1,2 +1,8 @@
|
|||||||
*~
|
*~
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
bin/
|
||||||
|
obj/
|
||||||
|
.vs/
|
||||||
|
.vscode/
|
||||||
|
*.exe
|
||||||
|
*.dll
|
||||||
|
|||||||
@ -0,0 +1,7 @@
|
|||||||
|
**/node_modules
|
||||||
|
**/.vs
|
||||||
|
**/.vscode
|
||||||
|
**/wwwroot
|
||||||
|
**/bin
|
||||||
|
**/obj
|
||||||
|
**/publish
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
Dockerfile
|
||||||
|
docker-compose.yml
|
||||||
|
nginx.conf
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
**/node_modules
|
||||||
|
**/.vs
|
||||||
|
**/.vscode
|
||||||
|
**/wwwroot
|
||||||
|
**/bin
|
||||||
|
**/obj
|
||||||
|
**/publish
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*~
|
||||||
|
.DS_Store
|
||||||
|
bin/
|
||||||
|
obj/
|
||||||
|
publish/
|
||||||
|
.vs/
|
||||||
|
wwwroot/
|
||||||
|
.vscode/
|
||||||
|
!.vscode/extensions.json
|
||||||
|
*.exe
|
||||||
|
*.dll
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*proj.user
|
||||||
|
*.sw?
|
||||||
|
coverage
|
||||||
@ -0,0 +1,120 @@
|
|||||||
|
using Microsoft.AspNetCore.Mvc;
|
||||||
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
using TodoApi.Model;
|
||||||
|
|
||||||
|
namespace TodoApi.Controllers
|
||||||
|
{
|
||||||
|
[ApiController]
|
||||||
|
[Route("api/[controller]")]
|
||||||
|
public class TodoController : ControllerBase
|
||||||
|
{
|
||||||
|
private const int MaxResultCount = 100;
|
||||||
|
|
||||||
|
private readonly TodoDbContext _db;
|
||||||
|
private readonly ILogger<TodoController> _logger;
|
||||||
|
|
||||||
|
public TodoController(TodoDbContext db, ILogger<TodoController> logger)
|
||||||
|
{
|
||||||
|
_db = db;
|
||||||
|
_logger = logger;
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpGet]
|
||||||
|
public async Task<IActionResult> GetAll(
|
||||||
|
[FromQuery] int? skip,
|
||||||
|
[FromQuery] int? take,
|
||||||
|
[FromQuery] string? search,
|
||||||
|
[FromQuery] bool? completed)
|
||||||
|
{
|
||||||
|
var q = _db.Todos.AsQueryable();
|
||||||
|
|
||||||
|
if (!string.IsNullOrWhiteSpace(search))
|
||||||
|
{
|
||||||
|
q = q.Where(e => e.Description.ToLower().Contains(search.ToLower()));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (completed.HasValue)
|
||||||
|
{
|
||||||
|
q = q.Where(e => e.IsCompleted == completed.Value);
|
||||||
|
}
|
||||||
|
|
||||||
|
var totalCount = await q.CountAsync();
|
||||||
|
|
||||||
|
if (skip is { } s)
|
||||||
|
{
|
||||||
|
q = q.Skip(s);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (take is { } t)
|
||||||
|
{
|
||||||
|
q = q.Take(Math.Min(t, MaxResultCount));
|
||||||
|
}
|
||||||
|
|
||||||
|
var result = new
|
||||||
|
{
|
||||||
|
Items = await q.ToArrayAsync(),
|
||||||
|
totalCount
|
||||||
|
};
|
||||||
|
|
||||||
|
return Ok(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpPost]
|
||||||
|
public async Task<IActionResult> Create([FromBody] NewTodo input)
|
||||||
|
{
|
||||||
|
var todo = new Todo
|
||||||
|
{
|
||||||
|
Description = input.Description,
|
||||||
|
CreatedAt = DateTimeOffset.UtcNow,
|
||||||
|
IsCompleted = false
|
||||||
|
};
|
||||||
|
await _db.AddAsync(todo);
|
||||||
|
await _db.SaveChangesAsync();
|
||||||
|
return Ok(todo);
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpPost("toggle")]
|
||||||
|
public async Task<IActionResult> Toggle(ToggleModel vm)
|
||||||
|
{
|
||||||
|
var now = DateTimeOffset.UtcNow;
|
||||||
|
|
||||||
|
await _db.Todos.Where(e => vm.Ids.Contains(e.Id))
|
||||||
|
.ExecuteUpdateAsync(setters =>
|
||||||
|
setters
|
||||||
|
.SetProperty(e => e.IsCompleted, e => vm.IsCompleted)
|
||||||
|
.SetProperty(e => e.UpdatedAt, now));
|
||||||
|
|
||||||
|
return Ok();
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpDelete("{id:int}")]
|
||||||
|
public async Task<IActionResult> Delete(int id)
|
||||||
|
{
|
||||||
|
await _db.Todos.Where(e => e.Id == id).ExecuteDeleteAsync();
|
||||||
|
return Ok();
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpDelete("completed")]
|
||||||
|
public async Task<IActionResult> DeleteCompleted()
|
||||||
|
{
|
||||||
|
await _db.Todos.Where(e => e.IsCompleted)
|
||||||
|
.ExecuteDeleteAsync();
|
||||||
|
return Ok();
|
||||||
|
}
|
||||||
|
|
||||||
|
[HttpGet("status")]
|
||||||
|
public async Task<IActionResult> Status()
|
||||||
|
{
|
||||||
|
var result = await
|
||||||
|
(from todo in _db.Todos
|
||||||
|
group todo by 1 into g
|
||||||
|
select new
|
||||||
|
{
|
||||||
|
totalCount = g.Count(),
|
||||||
|
left = g.Count(e => !e.IsCompleted)
|
||||||
|
}).FirstOrDefaultAsync();
|
||||||
|
|
||||||
|
return Ok(result);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
using System.ComponentModel.DataAnnotations;
|
||||||
|
|
||||||
|
namespace TodoApi.Model
|
||||||
|
{
|
||||||
|
public record NewTodo([Required] string Description);
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
using System.ComponentModel.DataAnnotations;
|
||||||
|
|
||||||
|
namespace TodoApi.Model
|
||||||
|
{
|
||||||
|
public class Todo
|
||||||
|
{
|
||||||
|
[Required]
|
||||||
|
public int Id { get; set; }
|
||||||
|
|
||||||
|
[Required]
|
||||||
|
public bool IsCompleted { get; set; }
|
||||||
|
|
||||||
|
[Required]
|
||||||
|
public string Description { get; set; } = string.Empty;
|
||||||
|
|
||||||
|
public DateTimeOffset CreatedAt { get; set; }
|
||||||
|
|
||||||
|
public DateTimeOffset? UpdatedAt { get; set; }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
|
||||||
|
namespace TodoApi.Model
|
||||||
|
{
|
||||||
|
public class TodoDbContext : DbContext
|
||||||
|
{
|
||||||
|
public TodoDbContext(DbContextOptions options)
|
||||||
|
: base(options)
|
||||||
|
{ }
|
||||||
|
|
||||||
|
public DbSet<Todo> Todos { get; set; } = null!;
|
||||||
|
|
||||||
|
protected override void OnModelCreating(ModelBuilder modelBuilder)
|
||||||
|
{
|
||||||
|
modelBuilder.HasDefaultSchema("todo_mvc");
|
||||||
|
|
||||||
|
var entityBuilder = modelBuilder.Entity<Todo>();
|
||||||
|
|
||||||
|
entityBuilder.ToTable("todo");
|
||||||
|
|
||||||
|
entityBuilder.Property(e => e.Id)
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnName("id")
|
||||||
|
.HasColumnType("int")
|
||||||
|
.UseIdentityColumn();
|
||||||
|
|
||||||
|
entityBuilder.Property(e => e.IsCompleted)
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnName("is_completed")
|
||||||
|
.HasColumnType("boolean");
|
||||||
|
|
||||||
|
entityBuilder.Property(e => e.Description)
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnName("description")
|
||||||
|
.HasColumnType("text");
|
||||||
|
|
||||||
|
entityBuilder.Property(e => e.CreatedAt)
|
||||||
|
.IsRequired()
|
||||||
|
.HasColumnName("created_at")
|
||||||
|
.HasColumnType("timestamptz");
|
||||||
|
|
||||||
|
entityBuilder.Property(e => e.UpdatedAt)
|
||||||
|
.IsRequired(false)
|
||||||
|
.HasColumnName("updated_at")
|
||||||
|
.HasColumnType("timestamptz");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
using System.ComponentModel.DataAnnotations;
|
||||||
|
|
||||||
|
namespace TodoApi.Model
|
||||||
|
{
|
||||||
|
public record ToggleModel(
|
||||||
|
[Required] bool IsCompleted,
|
||||||
|
[Required] int[] Ids);
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
using Microsoft.EntityFrameworkCore;
|
||||||
|
using System.Text.Json;
|
||||||
|
using System.Text.Json.Serialization;
|
||||||
|
using TodoApi.Model;
|
||||||
|
|
||||||
|
var builder = WebApplication.CreateBuilder(args);
|
||||||
|
|
||||||
|
var config = builder.Configuration;
|
||||||
|
|
||||||
|
// Add services to the container.
|
||||||
|
|
||||||
|
builder.Services.AddDbContext<TodoDbContext>(o =>
|
||||||
|
{
|
||||||
|
o.UseNpgsql(config.GetConnectionString("PostgreSQL"), opt =>
|
||||||
|
{
|
||||||
|
opt.UseQuerySplittingBehavior(QuerySplittingBehavior.SingleQuery);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
builder.Services.AddControllers()
|
||||||
|
.AddJsonOptions(o =>
|
||||||
|
{
|
||||||
|
var enumConverter = new JsonStringEnumConverter();
|
||||||
|
o.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
|
||||||
|
o.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;
|
||||||
|
o.JsonSerializerOptions.AllowTrailingCommas = true;
|
||||||
|
o.JsonSerializerOptions.Converters.Add(enumConverter);
|
||||||
|
});
|
||||||
|
|
||||||
|
var app = builder.Build();
|
||||||
|
|
||||||
|
// Configure the HTTP request pipeline.
|
||||||
|
|
||||||
|
app.UseStaticFiles();
|
||||||
|
|
||||||
|
app.MapControllers();
|
||||||
|
|
||||||
|
app.MapFallbackToFile("index.html");
|
||||||
|
|
||||||
|
app.Run();
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/launchsettings.json",
|
||||||
|
"profiles": {
|
||||||
|
"http": {
|
||||||
|
"commandName": "Project",
|
||||||
|
"dotnetRunMessages": true,
|
||||||
|
"launchBrowser": false,
|
||||||
|
"applicationUrl": "http://127.0.0.1:5000",
|
||||||
|
"environmentVariables": {
|
||||||
|
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<Project Sdk="Microsoft.NET.Sdk.Web">
|
||||||
|
|
||||||
|
<PropertyGroup>
|
||||||
|
<TargetFramework>net7.0</TargetFramework>
|
||||||
|
<Nullable>enable</Nullable>
|
||||||
|
<ImplicitUsings>enable</ImplicitUsings>
|
||||||
|
</PropertyGroup>
|
||||||
|
|
||||||
|
<ItemGroup>
|
||||||
|
<PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="7.0.11" />
|
||||||
|
</ItemGroup>
|
||||||
|
|
||||||
|
</Project>
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"Logging": {
|
||||||
|
"LogLevel": {
|
||||||
|
"Default": "Trace",
|
||||||
|
"Microsoft.AspNetCore": "Trace"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"Logging": {
|
||||||
|
"LogLevel": {
|
||||||
|
"Default": "Information",
|
||||||
|
"Microsoft.AspNetCore": "Warning"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"Logging": {
|
||||||
|
"LogLevel": {
|
||||||
|
"Default": "Information",
|
||||||
|
"Microsoft.AspNetCore": "Warning"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"ConnectionStrings": {
|
||||||
|
"PostgreSQL": "Host=localhost;Port=5432;Database=todo;Username=todo;Password=todo"
|
||||||
|
},
|
||||||
|
"AllowedHosts": "*"
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
|
||||||
|
do $$
|
||||||
|
begin
|
||||||
|
create schema if not exists todo_mvc;
|
||||||
|
set search_path to todo_mvc;
|
||||||
|
end $$;
|
||||||
|
|
||||||
|
do $$
|
||||||
|
begin
|
||||||
|
create table if not exists todo (
|
||||||
|
id int not null generated by default as identity,
|
||||||
|
is_completed boolean not null,
|
||||||
|
description text not null,
|
||||||
|
created_at timestamptz not null default now(),
|
||||||
|
updated_at timestamptz null,
|
||||||
|
constraint todo_pkey primary key(id)
|
||||||
|
);
|
||||||
|
end $$;
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
**/node_modules
|
||||||
|
**/.vs
|
||||||
|
**/.vscode
|
||||||
|
**/wwwroot
|
||||||
|
**/bin
|
||||||
|
**/obj
|
||||||
|
**/publish
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
wwwroot/
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*proj.user
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
# todo-ui
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon16.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="96x96" href="/favicon96.png">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Todo List</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "todo-ui",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
||||||
|
"@fortawesome/free-brands-svg-icons": "^6.4.2",
|
||||||
|
"@fortawesome/free-regular-svg-icons": "^6.4.2",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||||
|
"@fortawesome/vue-fontawesome": "^3.0.5",
|
||||||
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"axios": "^1.6.1",
|
||||||
|
"bootstrap": "^5.3.2",
|
||||||
|
"vue": "^3.3.4",
|
||||||
|
"vue-router": "^4.2.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.5.1",
|
||||||
|
"@vitejs/plugin-vue": "^4.4.1",
|
||||||
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
|
"eslint": "^8.53.0",
|
||||||
|
"eslint-plugin-vue": "^9.18.1",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
|
"sass": "^1.69.5",
|
||||||
|
"vite": "^4.5.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
Binary file not shown.
|
After Width: | Height: | Size: 228 B |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapper h-100 d-flex flex-column">
|
||||||
|
<div class="content flex-grow-1 flex-shrink-0">
|
||||||
|
<RouterView></RouterView>
|
||||||
|
</div>
|
||||||
|
<footer class="w-100 p-2">
|
||||||
|
Favicon by <a href="https://icons8.com" class="text-secondary">icons8.com</a>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { RouterView } from 'vue-router'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.wrapper {
|
||||||
|
>footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
@import "~bootstrap/scss/bootstrap.scss";
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
height: 100%;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row p-3">
|
||||||
|
<h1 class="col justify-content-center text-center not-found-header text-secondary">No such page!</h1>
|
||||||
|
</div>
|
||||||
|
<div class="row p-3">
|
||||||
|
<h1 class="col justify-content-center text-center not-found-header text-secondary">404</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.not-found-header {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card mb-0 rounded-0 border-top-0" @mouseover="hover = true" @mouseleave="hover = false">
|
||||||
|
<div class="card-body my-0 py-0">
|
||||||
|
<div class="container p-0 m-0">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-1 d-flex flex-row justify-content-start align-items-center p-0 ps-lg-2">
|
||||||
|
<div class="form-check form-switch m-0">
|
||||||
|
<input class="form-check-input" :checked="isCompleted" @change="toggle" type="checkbox"
|
||||||
|
role="switch" :disabled="disabled">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-10 d-flex">
|
||||||
|
<div class="vr me-2 h-100"></div>
|
||||||
|
<span class="description py-2" :class="{ 'completed': isCompleted }">
|
||||||
|
{{ description }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-1 d-flex flex-row align-items-center" v-if="hover">
|
||||||
|
<button class="btn btn-trash p-0 m-0 shadow-none border-0" @click="emit('delete')">
|
||||||
|
<font-awesome-icon icon="fa-solid fa-trash-can fa-5x" class="trash-icon" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, toRef } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
'isCompleted': {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
'description': {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
|
'disabled': {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['toggle', 'delete'])
|
||||||
|
|
||||||
|
const hover = ref(false)
|
||||||
|
const isCompleted = toRef(() => props.isCompleted)
|
||||||
|
const disabled = toRef(() => props.disabled)
|
||||||
|
|
||||||
|
function toggle() {
|
||||||
|
emit('toggle')
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.completed {
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-trash {
|
||||||
|
color: var(--bs-warning);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--bs-danger);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trash-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vr {
|
||||||
|
min-height: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,295 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row p-3">
|
||||||
|
<h1 class="col justify-content-center text-center todo-header text-secondary">todo</h1>
|
||||||
|
</div>
|
||||||
|
<div class=row>
|
||||||
|
<div class="col-lg-5 offset-lg-4">
|
||||||
|
<div class="card mb-0 rounded-bottom-0">
|
||||||
|
<div class="card-body py-0">
|
||||||
|
<div class="container p-0 m-0">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-1 d-flex flex-row justify-content-start align-items-center p-0 ps-lg-2">
|
||||||
|
<div class="form-check form-switch m-0" v-if="items.length">
|
||||||
|
<input class="form-check-input" @change="onToggleAll" type="checkbox"
|
||||||
|
:disabled="isLoading || isEmpty" :checked="isCompleted" role="switch" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-11 d-flex">
|
||||||
|
<div class="vr me-2 h-100"></div>
|
||||||
|
<form @submit.prevent="onSubmit" class="w-100 h-100">
|
||||||
|
<input type="text" placeholder="What's next to be done?"
|
||||||
|
class="form-control shadow-none my-2 ps-0 border-0 new-input"
|
||||||
|
v-model="newTodo" />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-5 offset-lg-4">
|
||||||
|
<TodoItem v-for="item in items" :key="item.id" :isCompleted="item.isCompleted"
|
||||||
|
:description="item.description" :disabled="isLoading" @delete="deleteItem(item.id)"
|
||||||
|
@toggle="onToggle(item)">
|
||||||
|
</TodoItem>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-5 offset-lg-4">
|
||||||
|
<div class="card mb-0 rounded-top-0 border-top-0">
|
||||||
|
<div class="card-body py-0">
|
||||||
|
<div class="container p-0 m-0">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3 col-lg-2 py-2">
|
||||||
|
<span v-if="left" class="text-secondary">
|
||||||
|
{{ left }} left
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="col col-lg-7 d-flex flex-row justify-content-evenly align-items-center py-2">
|
||||||
|
<RouterLink :to="{ name: 'all' }" class="btn btn-outline-secondary px-2 py-0 mx-1">
|
||||||
|
All
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink :to="{ name: 'active' }" class="btn btn-outline-secondary px-2 py-0 mx-1">
|
||||||
|
Active
|
||||||
|
</RouterLink>
|
||||||
|
<RouterLink :to="{ name: 'completed' }"
|
||||||
|
class="btn btn-outline-secondary px-2 py-0 mx-1">
|
||||||
|
Completed
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
<div class="col col-lg-3 py-2 text-end">
|
||||||
|
<a href="#" v-if="totalCount - left" @click.prevent="deleteCompleted"
|
||||||
|
class="clear-link text-secondary">Clear
|
||||||
|
completed</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="loading-overlay position-absolute" v-if="isLoading">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<div class="spinner-border text-secondary" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, computed } from 'vue'
|
||||||
|
import { onBeforeRouteUpdate, useRoute, RouterLink } from 'vue-router'
|
||||||
|
import svc from '../services/todoService'
|
||||||
|
import { useDebouncedRef } from '../services/composables'
|
||||||
|
import TodoItem from './TodoItem.vue';
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const totalCount = ref(0)
|
||||||
|
const left = ref(0)
|
||||||
|
const search = ref()
|
||||||
|
const items = ref([])
|
||||||
|
const newTodo = ref('')
|
||||||
|
const isCompleted = ref(false)
|
||||||
|
const isLoading = useDebouncedRef(false, 500)
|
||||||
|
const routeName = ref(route.name)
|
||||||
|
|
||||||
|
const completedFilter = computed(() => {
|
||||||
|
const name = routeName.value
|
||||||
|
if (name == 'active') {
|
||||||
|
return false
|
||||||
|
} else if (name == 'completed') {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const isEmpty = computed(() => !totalCount.value)
|
||||||
|
|
||||||
|
async function updateStatus() {
|
||||||
|
try {
|
||||||
|
const status = await svc.status()
|
||||||
|
totalCount.value = status.totalCount
|
||||||
|
left.value = status.left
|
||||||
|
if (items.value.length > 0) {
|
||||||
|
isCompleted.value = items.value.every(todo => todo.isCompleted)
|
||||||
|
} else {
|
||||||
|
isCompleted.value = false
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refresh() {
|
||||||
|
isLoading.value = true
|
||||||
|
try {
|
||||||
|
const rv = await svc.getAll({
|
||||||
|
search: search.value,
|
||||||
|
completed: completedFilter.value
|
||||||
|
})
|
||||||
|
items.value = rv.items
|
||||||
|
totalCount.value = rv.totalCount
|
||||||
|
await updateStatus()
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteItem(id) {
|
||||||
|
isLoading.value = true
|
||||||
|
try {
|
||||||
|
await svc.delete(id)
|
||||||
|
items.value = items.value.filter(todo => {
|
||||||
|
return todo.id != id
|
||||||
|
})
|
||||||
|
await updateStatus()
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onSubmit() {
|
||||||
|
const description = newTodo.value
|
||||||
|
if (description) {
|
||||||
|
isLoading.value = true
|
||||||
|
try {
|
||||||
|
const todo = await svc.create(description)
|
||||||
|
newTodo.value = null
|
||||||
|
if (routeName.value == 'all' || routeName.value == 'active') {
|
||||||
|
const newItems = [...items.value]
|
||||||
|
newItems.push(todo)
|
||||||
|
items.value = newItems
|
||||||
|
}
|
||||||
|
await updateStatus()
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onToggle(todo) {
|
||||||
|
const idx = items.value.findIndex(v => v.id == todo.id)
|
||||||
|
if (idx >= 0) {
|
||||||
|
isLoading.value = true
|
||||||
|
try {
|
||||||
|
todo = { ...todo }
|
||||||
|
todo.isCompleted = !todo.isCompleted
|
||||||
|
await svc.toggle(todo.isCompleted, [todo.id])
|
||||||
|
if (route.name == 'all' ||
|
||||||
|
(route.name == 'active' && !todo.isCompleted) ||
|
||||||
|
(route.name == 'completed' && todo.isCompleted)) {
|
||||||
|
items.value[idx] = todo
|
||||||
|
} else {
|
||||||
|
items.value.splice(idx, 1)
|
||||||
|
}
|
||||||
|
await updateStatus()
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onToggleAll() {
|
||||||
|
isLoading.value = true
|
||||||
|
try {
|
||||||
|
const newValue = !isCompleted.value
|
||||||
|
const ids = items.value.map(v => v.id)
|
||||||
|
await svc.toggle(newValue, ids)
|
||||||
|
if ((routeName.value == 'active' && newValue) ||
|
||||||
|
(routeName.value == 'completed' && !newValue)) {
|
||||||
|
items.value.splice(0, items.value.length)
|
||||||
|
} else {
|
||||||
|
items.value = items.value.map(todo => {
|
||||||
|
todo = { ...todo }
|
||||||
|
todo.isCompleted = newValue
|
||||||
|
return todo
|
||||||
|
})
|
||||||
|
}
|
||||||
|
await updateStatus()
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteCompleted() {
|
||||||
|
isLoading.value = true
|
||||||
|
try {
|
||||||
|
await svc.deleteCompleted();
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e)
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false
|
||||||
|
}
|
||||||
|
await refresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(refresh)
|
||||||
|
|
||||||
|
onBeforeRouteUpdate(async to => {
|
||||||
|
routeName.value = to.name
|
||||||
|
await refresh()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.todo-header {
|
||||||
|
font-size: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-input {
|
||||||
|
&::placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--bs-gray-500);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-overlay {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
|
>div {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-border {
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear-link {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.router-link-active {
|
||||||
|
background-color: var(--bs-secondary);
|
||||||
|
color: var(--bs-btn-active-color)
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import './assets/main.scss'
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
import * as bootstrap from 'bootstrap'
|
||||||
|
import { library as iconLibrary } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import {
|
||||||
|
faTrashCan
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
iconLibrary.add(faTrashCan)
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.component("font-awesome-icon", FontAwesomeIcon)
|
||||||
|
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import TodoList from '../components/TodoList.vue'
|
||||||
|
import NotFound from '../components/NotFound.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: TodoList,
|
||||||
|
redirect: 'all',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'all',
|
||||||
|
name: 'all',
|
||||||
|
component: TodoList
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'active',
|
||||||
|
name: 'active',
|
||||||
|
component: TodoList
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'completed',
|
||||||
|
name: 'completed',
|
||||||
|
component: TodoList
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{ path: '/404', component: NotFound, name: 'NotFound' },
|
||||||
|
{ path: '/:pathMatch(.*)*', redirect: { name: 'NotFound', params: {} } }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import { ref, customRef } from 'vue'
|
||||||
|
|
||||||
|
const DEFAULT_DEBOUNCE_TIMEOUT = 1000
|
||||||
|
|
||||||
|
function debounce(f, delay = DEFAULT_DEBOUNCE_TIMEOUT, immediate = false) {
|
||||||
|
let timeout
|
||||||
|
return (...args) => {
|
||||||
|
if (immediate && !timeout) {
|
||||||
|
f(...args)
|
||||||
|
}
|
||||||
|
clearTimeout(timeout)
|
||||||
|
|
||||||
|
timeout = setTimeout(() => {
|
||||||
|
f(...args)
|
||||||
|
}, delay)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function useDebouncedRef(initialValue, delay = DEFAULT_DEBOUNCE_TIMEOUT, immediate = false) {
|
||||||
|
const state = ref(initialValue)
|
||||||
|
const debouncedRef = customRef((track, trigger) => ({
|
||||||
|
get() {
|
||||||
|
track()
|
||||||
|
return state.value
|
||||||
|
},
|
||||||
|
set: debounce(value => {
|
||||||
|
state.value = value
|
||||||
|
trigger()
|
||||||
|
},
|
||||||
|
delay,
|
||||||
|
immediate)
|
||||||
|
}))
|
||||||
|
return debouncedRef
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
useDebouncedRef
|
||||||
|
}
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
const TIMEOUT_MS = 5000
|
||||||
|
|
||||||
|
const BASE_URL = import.meta.env.BASE_URL ?? '/';
|
||||||
|
|
||||||
|
function send(method, url, {params, data} = {}) {
|
||||||
|
return axios({
|
||||||
|
method,
|
||||||
|
url,
|
||||||
|
params,
|
||||||
|
data,
|
||||||
|
timeout: TIMEOUT_MS
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
async getAll({search, skip, take, completed} = {}) {
|
||||||
|
let result = await send('GET', `${BASE_URL}api/todo`, {
|
||||||
|
params: {
|
||||||
|
search,
|
||||||
|
skip,
|
||||||
|
take,
|
||||||
|
completed
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return result.data
|
||||||
|
},
|
||||||
|
async status() {
|
||||||
|
let result = await send('GET', `${BASE_URL}api/todo/status`)
|
||||||
|
return result.data
|
||||||
|
},
|
||||||
|
async create(description) {
|
||||||
|
let result = await send('POST', `${BASE_URL}api/todo`, {
|
||||||
|
data: {
|
||||||
|
description
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return result.data
|
||||||
|
},
|
||||||
|
async toggle(isCompleted, ids = []) {
|
||||||
|
let result = await send('POST', `${BASE_URL}api/todo/toggle`, {
|
||||||
|
data: {
|
||||||
|
isCompleted,
|
||||||
|
ids
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return result.data
|
||||||
|
},
|
||||||
|
async delete(id) {
|
||||||
|
let result = await send('DELETE', `${BASE_URL}api/todo/${id}`)
|
||||||
|
return result.data
|
||||||
|
},
|
||||||
|
async deleteCompleted() {
|
||||||
|
let result = await send('DELETE', `${BASE_URL}api/todo/completed`)
|
||||||
|
return result.data
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import * as path from 'node:path'
|
||||||
|
import * as process from 'node:process'
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
const currentDir = fileURLToPath(new URL('.', import.meta.url))
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.join(currentDir, 'src/'),
|
||||||
|
'~bootstrap': path.resolve(currentDir, 'node_modules/bootstrap'),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: path.resolve(currentDir, 'wwwroot')
|
||||||
|
},
|
||||||
|
base: ((process.env.BASE_PATH ?? '').replace(/\/$/, '') ?? '') + '/',
|
||||||
|
server: {
|
||||||
|
port: 8080,
|
||||||
|
hot: true,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:5000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue