add crud to curriculums

Author: jeanbfly

@apps/front/app/services/store.ts

@@ -1,6 +1,7 @@
 import { useLegacyStore } from '@warp-drive/legacy';
 import { JSONAPICache } from '@warp-drive/json-api';
 import UserSchema from '@libs/users-front/schemas/users';
+import CurriculumSchema from '@libs/users-front/schemas/curriculums';
 import { setBuildURLConfig } from '@warp-drive/utilities';
 import { CacheHandler, Fetch, RequestManager } from '@warp-drive/core';
 import type Owner from '@ember/owner';
@@ -19,7 +20,7 @@ const legacyStore = useLegacyStore({
   legacyRequests: true,
   modelFragments: true,
   cache: JSONAPICache,
-  schemas: [UserSchema],
+  schemas: [UserSchema, CurriculumSchema],
   handlers: [],
 });
 

@apps/front/translations/curriculums/en-us.yaml

@@ -8,3 +8,10 @@ moreActions:
   duplicate: 'Duplicate'
   download: 'Download'
   rename: 'Rename'
+validation:
+  titleRequired: 'Title is required'
+  minimumTitleLength: 'Title must be at least 1 character long'
+  maximumTitleLength: 'Title must be at most 255 characters long'
+create:
+  createSuccess: 'Curriculum vitae created successfully'
+  title: 'Title'

@apps/front/translations/curriculums/fr-fr.yaml

@@ -8,3 +8,10 @@ moreActions:
   duplicate: 'Dupliquer'
   download: 'Télécharger'
   rename: 'Renommer'
+validation:
+  titleRequired: 'Le titre est requis'
+  minimumTitleLength: 'Le titre doit comporter au moins 1 caractère'
+  maximumTitleLength: 'Le titre doit comporter au maximum 255 caractères'
+create:
+  createSuccess: 'Le curriculum vitae a été créé avec succès'
+  title: 'Titre'

@libs/users-front/package.json

@@ -143,12 +143,10 @@
     "type": "addon",
     "main": "addon-main.cjs",
     "app-js": {
-      "./components/curriculums/create/curriculum-create-form.js": "./dist/_app_/components/curriculums/create/curriculum-create-form.js",
       "./components/forms/login-form.js": "./dist/_app_/components/forms/login-form.js",
       "./components/forms/user-form.js": "./dist/_app_/components/forms/user-form.js",
       "./handlers/auth.js": "./dist/_app_/handlers/auth.js",
       "./helpers/relative-time.js": "./dist/_app_/helpers/relative-time.js",
-      "./routes/dashboard/curriculums/create.js": "./dist/_app_/routes/dashboard/curriculums/create.js",
       "./routes/dashboard/curriculums/edit.js": "./dist/_app_/routes/dashboard/curriculums/edit.js",
       "./routes/dashboard/curriculums/index.js": "./dist/_app_/routes/dashboard/curriculums/index.js",
       "./routes/dashboard/users/create.js": "./dist/_app_/routes/dashboard/users/create.js",
@@ -157,10 +155,11 @@
       "./routes/forgot-password.js": "./dist/_app_/routes/forgot-password.js",
       "./routes/login.js": "./dist/_app_/routes/login.js",
       "./routes/logout.js": "./dist/_app_/routes/logout.js",
+      "./schemas/curriculums.js": "./dist/_app_/schemas/curriculums.js",
       "./schemas/users.js": "./dist/_app_/schemas/users.js",
       "./services/current-user.js": "./dist/_app_/services/current-user.js",
+      "./services/curriculum.js": "./dist/_app_/services/curriculum.js",
       "./services/user.js": "./dist/_app_/services/user.js",
-      "./templates/dashboard/curriculums/create.js": "./dist/_app_/templates/dashboard/curriculums/create.js",
       "./templates/dashboard/curriculums/edit.js": "./dist/_app_/templates/dashboard/curriculums/edit.js",
       "./templates/dashboard/curriculums/index.js": "./dist/_app_/templates/dashboard/curriculums/index.js",
       "./templates/dashboard/users/create.js": "./dist/_app_/templates/dashboard/users/create.js",

@libs/users-front/src/changesets/curriculum.ts

@@ -0,0 +1,10 @@
+import ImmerChangeset from 'ember-immer-changeset';
+
+export interface DraftCurriculum {
+  id?: string;
+  userId?: string;
+  title?: string;
+  updatedAt?: string;
+}
+
+export class CurriculumChangeset extends ImmerChangeset<DraftCurriculum> {}

@libs/users-front/src/components/curriculums/create/curriculum-create-form.gts

@@ -1,34 +1,75 @@
 import Component from '@glimmer/component';
 import t from 'ember-intl/helpers/t';
-import { on } from '@ember/modifier';
-import type RouterService from '@ember/routing/router-service';
 import { service } from '@ember/service';
+import TpkForm from '@triptyk/ember-input-validation/components/tpk-form';
+import type HandleSaveService from '@libs/shared-front/services/handle-save';
+import type CurriculumService from '#src/services/curriculum.ts';
+import ImmerChangeset from 'ember-immer-changeset';
+import { createCurriculumValidationSchema } from '#src/components/curriculums/curriculum-validation.ts';
+import type { ValidatedCurriculum } from '#src/components/curriculums/curriculum-validation.ts';
+import type Owner from '@ember/owner';
+import type { IntlService } from 'ember-intl';
 
 interface CurriculumAddSignature {
   Element: HTMLDivElement;
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  Args: {};
+  Args: {
+    onAdd: () => void;
+  };
 }
 
 class CurriculumAdd extends Component<CurriculumAddSignature> {
-  @service declare router: RouterService;
+  @service declare handleSave: HandleSaveService;
+  @service declare curriculum: CurriculumService;
+  @service declare intl: IntlService;
+
+  changeset = new ImmerChangeset<ValidatedCurriculum>(
+    {} as ValidatedCurriculum
+  );
+  validationSchema: ReturnType<typeof createCurriculumValidationSchema>;
+
+  constructor(owner: Owner, args: CurriculumAddSignature['Args']) {
+    super(owner, args);
+    this.validationSchema = createCurriculumValidationSchema(this.intl);
+  }
+
+  onSubmit = async (
+    data: ValidatedCurriculum,
+    c: ImmerChangeset<ValidatedCurriculum>
+  ) => {
+    await this.handleSave.handleSave({
+      saveAction: () => this.curriculum.create(data),
+      changeset: c,
+      successMessage: 'curriculums.create.createSuccess',
+    });
 
-  addCurriculum = () => {
-    this.router.transitionTo('dashboard.curriculums.create');
+    this.args.onAdd?.();
   };
 
   <template>
-    <button
-      data-test-curriculum-add-button
-      type="button"
-      class="flex flex-col cursor-pointer items-center justify-center w-51 m-5 mb-20 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-gray-400 hover:text-gray-700 transition-colors duration-200"
-      {{on "click" this.addCurriculum}}
+    <TpkForm
+      class="flex flex-col cursor-pointer items-center justify-center w-51 m-5 p-2 mb-20 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-gray-400 hover:text-gray-700 transition-colors duration-200"
+      @changeset={{this.changeset}}
+      @onSubmit={{this.onSubmit}}
+      @validationSchema={{this.validationSchema}}
+      data-test-todos-form
+      as |F|
     >
-      <span class="text-3xl font-bold">+</span>
-      <span class="mt-2 text-sm font-medium">
-        {{t "curriculums.view.createNewCV"}}
-      </span>
-    </button>
+      <F.TpkInputPrefab
+        @label={{t "curriculums.create.title"}}
+        @validationField="title"
+        class="col-span-12 m-2 md:col-span-4"
+      />
+      <button
+        data-test-curriculum-add-button
+        type="submit"
+        class="border-gray-300 hover:border-gray-400 rounded-lg p-4 flex flex-col items-center justify-center transition-colors duration-200 w-full mt-4"
+      >
+        <span class="text-3xl font-bold">+</span>
+        <span class="mt-2 text-sm font-medium">
+          {{t "curriculums.view.createNewCV"}}
+        </span>
+      </button>
+    </TpkForm>
   </template>
 }
 

@libs/users-front/src/components/curriculums/curriculum-add.gts

@@ -15,21 +15,43 @@ import {
   text,
   value,
 } from 'ember-cli-page-object';
+import type CurriculumService from '#src/services/curriculum.ts';
 
 interface CurriculumItemSignature {
   Element: HTMLDivElement;
 
   Args: {
     curriculum: {
-      id: number;
+      id: string | null;
       title: string;
-      lastModified: string;
+      updatedAt: string;
     };
+    onRefresh: () => void;
   };
 }
 
 class CurriculumItem extends Component<CurriculumItemSignature> {
   @service declare router: RouterService;
+  @service declare curriculum: CurriculumService;
+
+  @action
+  async renameOnEnter(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      await this.rename((event.target as HTMLInputElement).value);
+    }
+  }
+
+  @action
+  async renameOnBlur(event: FocusEvent) {
+    await this.rename((event.target as HTMLInputElement).value);
+  }
+
+  async rename(title: string) {
+    if (!this.args.curriculum.id || title === this.args.curriculum.title)
+      return;
+    await this.curriculum.rename(this.args.curriculum.id, title);
+    this.args.onRefresh?.();
+  }
 
   @action
   focusTitle() {
@@ -43,6 +65,11 @@ class CurriculumItem extends Component<CurriculumItemSignature> {
     }
   }
 
+  @action
+  refresh() {
+    this.args.onRefresh?.();
+  }
+
   goToCurriculum = () => {
     const curriculumId = this.args.curriculum.id;
     this.router.transitionTo('dashboard.curriculums.edit', curriculumId);
@@ -63,6 +90,7 @@ class CurriculumItem extends Component<CurriculumItemSignature> {
           <CurriculumMoreActions
             @curriculumId={{@curriculum.id}}
             @onRename={{this.focusTitle}}
+            @onDelete={{this.refresh}}
           />
         </div>
       </div>
@@ -73,10 +101,12 @@ class CurriculumItem extends Component<CurriculumItemSignature> {
         name="curriculum-title-{{@curriculum.id}}"
         class="font-medium pb-1 hover:text-blue-600 hover:underline hover:underline-offset-6 focus:outline-none transition-colors duration-200"
         value={{@curriculum.title}}
+        {{on "keydown" this.renameOnEnter}}
+        {{on "blur" this.renameOnBlur}}
       />
       <span data-test-curriculum-last-modified class="text-sm text-gray-500">
         {{t "curriculums.view.lastModified"}}
-        {{relativeTime @curriculum.lastModified}}
+        {{relativeTime @curriculum.updatedAt}}
       </span>
     </div>
   </template>

@libs/users-front/src/components/curriculums/curriculum-item.gts

@@ -4,37 +4,59 @@ import CurriculumAdd from '#src/components/curriculums/curriculum-add.gts';
 import { create, collection, clickable, text } from 'ember-cli-page-object';
 import t from 'ember-intl/helpers/t';
 import { CurriculumItemPageObject } from './curriculum-item.gts';
+import { service } from '@ember/service';
+import type CurriculumService from '#src/services/curriculum.ts';
+import type Owner from '@ember/owner';
+import { tracked } from '@glimmer/tracking';
+import type { Curriculum } from '#src/schemas/curriculums.ts';
 
 interface CurriculumListSignature {
   Element: HTMLDivElement;
-
-  Args: {
-    curriculums?: Array<{
-      id: number;
-      title: string;
-      lastModified: string;
-    }>;
-  };
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  Args: {};
 }
 
 class CurriculumList extends Component<CurriculumListSignature> {
-  get curriculums() {
-    const sortedCurriculums = [...(this.args.curriculums || [])].sort(
+  @service declare curriculum: CurriculumService;
+  @tracked curriculums: Curriculum[] = [];
+
+  constructor(owner: Owner, args: CurriculumListSignature['Args']) {
+    super(owner, args);
+    void this.loadCurriculums();
+  }
+
+  async loadCurriculums() {
+    this.curriculums = this.sortCurriculums(await this.curriculum.findAll());
+  }
+
+  onRefresh = async () => {
+    await this.loadCurriculums();
+  };
+
+  sortCurriculums(curriculums: Curriculum[] = this.curriculums): Curriculum[] {
+    const sortedCurriculums = [...(curriculums || [])].sort(
       (a, b) =>
-        new Date(b.lastModified).getTime() - new Date(a.lastModified).getTime()
+        new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
     );
     return sortedCurriculums;
   }
 
+  onAdd = async () => {
+    await this.loadCurriculums();
+  };
+
   <template>
     <div data-test-curriculums-list class="flex flex-col gap-4">
       <h2 data-test-curriculums-title class="text-xl font-bold">
         {{t "curriculums.view.curriculumsVitae"}}
       </h2>
       <div class="flex flex-row flex-wrap">
-        <CurriculumAdd />
+        <CurriculumAdd @onAdd={{this.onAdd}} />
         {{#each this.curriculums as |curriculum|}}
-          <CurriculumItem @curriculum={{curriculum}} />
+          <CurriculumItem
+            @curriculum={{curriculum}}
+            @onRefresh={{this.onRefresh}}
+          />
         {{/each}}
       </div>
     </div>

@libs/users-front/src/components/curriculums/curriculum-list.gts

@@ -13,16 +13,19 @@ import DuplicateIcon from '#src/assets/icons/duplicate.gts';
 import DownloadIcon from '#src/assets/icons/download.gts';
 import DeleteIcon from '#src/assets/icons/delete.gts';
 import { clickable, create, isVisible } from 'ember-cli-page-object';
+import type CurriculumService from '#src/services/curriculum.ts';
 
 interface CurriculumMoreActionsSignature {
   Args: {
-    curriculumId: number;
+    curriculumId: string | null;
     onRename: () => void;
+    onDelete: () => void;
   };
 }
 
 class CurriculumMoreActions extends Component<CurriculumMoreActionsSignature> {
   @service declare router: RouterService;
+  @service declare curriculum: CurriculumService;
 
   @tracked isOpen = false;
 
@@ -31,6 +34,16 @@ class CurriculumMoreActions extends Component<CurriculumMoreActionsSignature> {
     this.isOpen = !this.isOpen;
   }
 
+  @action
+  async delete(event: MouseEvent) {
+    event.stopPropagation();
+    this.isOpen = false;
+
+    if (!this.args.curriculumId) return;
+    await this.curriculum.delete(this.args.curriculumId);
+    this.args.onDelete?.();
+  }
+
   @action
   rename(event: MouseEvent) {
     event.stopPropagation();
@@ -105,6 +118,7 @@ class CurriculumMoreActions extends Component<CurriculumMoreActionsSignature> {
 
         <button
           data-test-curriculum-more-action-delete-button
+          {{on "click" this.delete}}
           type="button"
           class="w-full text-left px-4 py-2 flex flex-row items-center cursor-pointer hover:bg-gray-100"
         >