From 894aa78e55da33140c78d6457d8473db81a3add8 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 09:58:06 +0100
Subject: [PATCH 01/84] Update quasar components

---
 .../quasar/common/components/ActionCell.vue   |  59 -----
 .../quasar/common/components/Breadcrumb.vue   |  32 ---
 .../common/components/ConfirmDelete.vue       |  35 ---
 .../quasar/common/components/DataFilter.vue   |  43 ----
 .../quasar/common/components/InputDate.vue    | 145 -----------
 .../quasar/common/components/Loading.vue      |  16 --
 .../quasar/common/components/Toolbar.vue      |  91 -------
 templates/quasar/common/components/index.js   |   7 -
 templates/quasar/common/mixins/CreateMixin.js |  39 ---
 templates/quasar/common/mixins/ListMixin.js   | 120 ---------
 templates/quasar/common/mixins/ShowMixin.js   |  61 -----
 templates/quasar/common/mixins/UpdateMixin.js |  83 ------
 .../components/common/ActionCellComponent.vue |  75 ++++++
 .../components/common/BreadcrumbComponent.vue |  27 ++
 .../common/ConfirmDeleteComponent.vue         |  54 ++++
 .../components/common/DataFilterComponent.vue |  44 ++++
 .../common/FormRepeaterComponent.vue          |  72 ++++++
 .../components/common/LoadingComponent.vue    |  11 +
 .../components/common/ToolbarComponent.vue    |  93 +++++++
 templates/quasar/components/foo/Create.vue    |  56 -----
 .../quasar/components/foo/CreateComponent.vue |  42 ++++
 templates/quasar/components/foo/Filter.vue    | 191 --------------
 .../quasar/components/foo/FilterComponent.vue |  31 +++
 templates/quasar/components/foo/Form.vue      | 228 -----------------
 .../quasar/components/foo/FormComponent.vue   | 100 ++++++++
 templates/quasar/components/foo/List.vue      | 132 ----------
 .../quasar/components/foo/ListComponent.vue   | 238 ++++++++++++++++++
 templates/quasar/components/foo/Show.vue      |  73 ------
 .../quasar/components/foo/ShowComponent.vue   | 155 ++++++++++++
 templates/quasar/components/foo/Update.vue    |  39 ---
 .../quasar/components/foo/UpdateComponent.vue |  90 +++++++
 31 files changed, 1032 insertions(+), 1450 deletions(-)
 delete mode 100644 templates/quasar/common/components/ActionCell.vue
 delete mode 100644 templates/quasar/common/components/Breadcrumb.vue
 delete mode 100644 templates/quasar/common/components/ConfirmDelete.vue
 delete mode 100644 templates/quasar/common/components/DataFilter.vue
 delete mode 100644 templates/quasar/common/components/InputDate.vue
 delete mode 100644 templates/quasar/common/components/Loading.vue
 delete mode 100644 templates/quasar/common/components/Toolbar.vue
 delete mode 100644 templates/quasar/common/components/index.js
 delete mode 100644 templates/quasar/common/mixins/CreateMixin.js
 delete mode 100644 templates/quasar/common/mixins/ListMixin.js
 delete mode 100644 templates/quasar/common/mixins/ShowMixin.js
 delete mode 100644 templates/quasar/common/mixins/UpdateMixin.js
 create mode 100644 templates/quasar/components/common/ActionCellComponent.vue
 create mode 100644 templates/quasar/components/common/BreadcrumbComponent.vue
 create mode 100644 templates/quasar/components/common/ConfirmDeleteComponent.vue
 create mode 100644 templates/quasar/components/common/DataFilterComponent.vue
 create mode 100644 templates/quasar/components/common/FormRepeaterComponent.vue
 create mode 100644 templates/quasar/components/common/LoadingComponent.vue
 create mode 100644 templates/quasar/components/common/ToolbarComponent.vue
 delete mode 100644 templates/quasar/components/foo/Create.vue
 create mode 100644 templates/quasar/components/foo/CreateComponent.vue
 delete mode 100644 templates/quasar/components/foo/Filter.vue
 create mode 100644 templates/quasar/components/foo/FilterComponent.vue
 delete mode 100644 templates/quasar/components/foo/Form.vue
 create mode 100644 templates/quasar/components/foo/FormComponent.vue
 delete mode 100644 templates/quasar/components/foo/List.vue
 create mode 100644 templates/quasar/components/foo/ListComponent.vue
 delete mode 100644 templates/quasar/components/foo/Show.vue
 create mode 100644 templates/quasar/components/foo/ShowComponent.vue
 delete mode 100644 templates/quasar/components/foo/Update.vue
 create mode 100644 templates/quasar/components/foo/UpdateComponent.vue

diff --git a/templates/quasar/common/components/ActionCell.vue b/templates/quasar/common/components/ActionCell.vue
deleted file mode 100644
index b65a0e76..00000000
--- a/templates/quasar/common/components/ActionCell.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <q-td slot="body-cell-action" auto-width>
-    <q-btn
-      v-if="handleShow"
-      flat
-      round
-      dense
-      color="secondary"
-      @click="handleShow"
-      icon="format_align_justify"
-    />
-    <q-btn v-if="handleEdit" flat round dense color="secondary" @click="handleEdit" icon="edit" />
-    <q-btn
-      v-if="handleDelete"
-      icon="delete"
-      flat
-      round
-      dense
-      color="secondary"
-      @click="confirmDelete = true"
-    />
-    <ConfirmDelete
-      v-if="handleDelete"
-      :show="confirmDelete"
-      :handle-delete="handleDelete"
-      :handle-cancel="() => (confirmDelete = false)"
-    />
-  </q-td>
-</template>
-
-<script>
-import ConfirmDelete from "./ConfirmDelete";
-
-export default {
-  name: "ActionCell",
-  components: {
-    ConfirmDelete
-  },
-  data() {
-    return {
-      confirmDelete: false
-    };
-  },
-  props: {
-    handleShow: {
-      type: Function,
-      required: false
-    },
-    handleEdit: {
-      type: Function,
-      required: false
-    },
-    handleDelete: {
-      type: Function,
-      required: false
-    }
-  }
-};
-</script>
diff --git a/templates/quasar/common/components/Breadcrumb.vue b/templates/quasar/common/components/Breadcrumb.vue
deleted file mode 100644
index 47a57ebe..00000000
--- a/templates/quasar/common/components/Breadcrumb.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <q-breadcrumbs class="q-mr-sm">
-    <q-breadcrumbs-el icon="home" to="/" />
-    <q-breadcrumbs-el
-      v-for="(breadcrumb, idx) in values"
-      :key="idx"
-      :label="
-        $t(breadcrumb.label) +
-          ' ' +
-          (idx === values.length - 1 && item && item['@id'] ? item['@id'] : '')
-      "
-      :icon="breadcrumb.icon"
-      :to="breadcrumb.to"
-    />
-  </q-breadcrumbs>
-</template>
-
-<script>
-export default {
-  name: 'Breadcrumb',
-  props: {
-    values: {
-      type: Array,
-      required: true,
-    },
-    item: {
-      type: Object,
-      required: false,
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/templates/quasar/common/components/ConfirmDelete.vue b/templates/quasar/common/components/ConfirmDelete.vue
deleted file mode 100644
index d05005d7..00000000
--- a/templates/quasar/common/components/ConfirmDelete.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <q-dialog :value="show" persistent>
-    <q-card>
-      <q-card-section class="row items-center">
-        <q-avatar icon="warning" color="primary" text-color="white" />
-        <span class="q-ml-sm">\{{ $t('{{{labels.confirmDelete}}}') }}</span>
-      </q-card-section>
-
-      <q-card-actions align="right">
-        <q-btn flat label="{{{labels.cancel}}}" color="primary" v-close-popup @click="handleCancel" />
-        <q-btn flat label="{{{labels.delete}}}" color="primary" v-close-popup @click="handleDelete" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script>
-export default {
-  name: 'ConfirmDelete',
-  props: {
-    show: {
-      type: Boolean,
-      required: true,
-    },
-    handleDelete: {
-      type: Function,
-      required: true,
-    },
-    handleCancel: {
-      type: Function,
-      required: false,
-    },
-  },
-};
-</script>
diff --git a/templates/quasar/common/components/DataFilter.vue b/templates/quasar/common/components/DataFilter.vue
deleted file mode 100644
index 066b38d2..00000000
--- a/templates/quasar/common/components/DataFilter.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <q-expansion-item icon="search" :label="$t('{{{labels.filters}}}')" v-model="filtersExpanded">
-    <q-card>
-      <q-card-section @keydown.enter.prevent="handleFilter">
-        <slot name="filter"></slot>
-      </q-card-section>
-      <q-card-section>
-        <q-btn :label="$t('{{{labels.filter}}}')" color="primary" @click="handleFilter" />
-        <q-btn :label="$t('{{{labels.reset}}}')" color="primary" flat class="q-ml-sm" @click="handleReset" />
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-</template>
-
-<script>
-export default {
-  name: 'DataFilter',
-  props: {
-    handleReset: {
-      type: Function,
-      required: true,
-    },
-    handleFilter: {
-      type: Function,
-      required: true,
-    },
-    expanded: {
-      type: Boolean,
-      default: false
-    },
-  },
-  data() {
-    return {
-      filtersExpanded: false,
-    };
-  },
-  watch: {
-    expanded(val) {
-      this.filtersExpanded = this.expanded;
-    }
-  }
-};
-</script>
diff --git a/templates/quasar/common/components/InputDate.vue b/templates/quasar/common/components/InputDate.vue
deleted file mode 100644
index 1716f7e2..00000000
--- a/templates/quasar/common/components/InputDate.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<!--
-  https://github.com/controledigital/quasar-solutions/blob/master/components/cInputDate.vue
-  Chamada:
-    <InputDate :value="data" :set="(v) => { data = v }" label="Data" />
--->
-<template>
-  <q-input
-    stack-label
-    lazy-rules
-    bottom-slots
-    v-on="$listeners"
-    v-bind="$attrs"
-    v-model="inputModel"
-    :error="!isValid"
-  >
-    <template v-slot:prepend v-if="kind === 'datetime' || kind === 'date'">
-      <q-icon name="event" class="cursor-pointer">
-        <q-popup-proxy transition-show="scale" transition-hide="scale" ref="qDateProxy">
-          <q-date v-model="calendarModel" :mask="mask" />
-        </q-popup-proxy>
-      </q-icon>
-    </template>
-
-    <template v-slot:append v-if="kind === 'datetime' || kind === 'time'">
-      <q-icon name="access_time" class="cursor-pointer">
-        <q-popup-proxy transition-show="scale" transition-hide="scale" ref="qTimeProxy">
-          <q-time v-model="calendarModel" format24h :mask="mask" />
-        </q-popup-proxy>
-      </q-icon>
-    </template>
-  </q-input>
-</template>
-
-<script>
-import { date } from 'quasar';
-
-const localISOString = (d = new Date()) => {
-  let pad = function(n) {
-      return n < 10 ? '0' + n : n;
-    },
-    tz = d.getTimezoneOffset(), // mins
-    tzs = (tz > 0 ? '-' : '+') + pad(parseInt(Math.abs(tz / 60))) + ':00';
-
-  if (tz % 60 != 0) tzs += pad(Math.abs(tz % 60));
-
-  if (tz === 0)
-    // Zulu time == UTC
-    tzs = 'Z';
-
-  return (
-    d.getFullYear() +
-    '-' +
-    pad(d.getMonth() + 1) +
-    '-' +
-    pad(d.getDate()) +
-    'T' +
-    pad(d.getHours()) +
-    ':' +
-    pad(d.getMinutes()) +
-    ':' +
-    pad(d.getSeconds()) +
-    tzs
-  );
-};
-
-export default {
-  name: 'InputDate',
-  props: { value: String, set: Function, kind: { type: String, default: 'datetime' } },
-  data() {
-    return {
-      isValid: true,
-    };
-  },
-
-  computed: {
-    mask: {
-      get() {
-        switch (this.kind) {
-          case 'date':
-            return 'YYYY/MM/DD';
-          case 'time':
-            return 'HH:mm';
-          case 'datetime':
-          default:
-            return 'YYYY/MM/DD HH:mm';
-        }
-      },
-    },
-    inputModel: {
-      get: function() {
-        switch (this.kind) {
-          case 'date':
-            return this.Model ? this.$d(new Date(this.Model), 'short') : '';
-          case 'time':
-            return this.Model;
-          case 'datetime':
-          default:
-            return this.Model ? this.$d(new Date(this.Model), 'long') : '';
-        }
-      },
-
-      set: function(value) {
-        if (!value) {
-          return;
-        }
-        this.Model = null;
-        this.isValid = true;
-        if (value.length === 10) {
-          let val = value.substr(6, 4) + '/' + value.substr(3, 2) + '/' + value.substr(0, 2);
-          if (new Date(val).toString() === 'Invalid Date') {
-            this.isValid = false;
-          } else {
-            this.isValid = true;
-            console.debug(val);
-            this.Model = val;
-          }
-        }
-      },
-    },
-    calendarModel: {
-      get: function() {
-        return this.Model ? date.formatDate(new Date(this.Model), this.mask) : '';
-      },
-      set: function(val) {
-        let value = val;
-        if (this.kind === 'datetime') {
-          localISOString(new Date(val));
-        }
-        this.$refs.qDateProxy.hide();
-        this.$refs.qTimeProxy.hide();
-        this.Model = value;
-        this.isValid = true;
-      },
-    },
-    Model: {
-      get: function() {
-        return this.value;
-      },
-      set: function(value) {
-        this.set(value);
-      },
-    },
-  },
-};
-</script>
diff --git a/templates/quasar/common/components/Loading.vue b/templates/quasar/common/components/Loading.vue
deleted file mode 100644
index 7c416bc4..00000000
--- a/templates/quasar/common/components/Loading.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <q-inner-loading :showing="showing">
-    <q-spinner size="50px" color="primary" />
-  </q-inner-loading>
-</template>
-
-<script>
-export default {
-  props: {
-    showing: {
-      type: Boolean,
-      required: true,
-    },
-  },
-};
-</script>
diff --git a/templates/quasar/common/components/Toolbar.vue b/templates/quasar/common/components/Toolbar.vue
deleted file mode 100644
index a552ad2c..00000000
--- a/templates/quasar/common/components/Toolbar.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <q-toolbar class="q-my-md">
-    <slot name="left"></slot>
-    <q-space />
-    <div>
-      <q-btn
-        v-if="handleSubmit"
-        :label="$t('{{{labels.submit}}}')"
-        color="primary"
-        @click="submitItem"
-        icon="save"
-      />
-      <q-btn
-        v-if="handleReset"
-        :label="$t('{{{labels.reset}}}')"
-        color="primary"
-        flat
-        class="q-ml-sm"
-        @click="resetItem"
-        icon="settings_backup_restore"
-      />
-      <q-btn
-        v-if="handleDelete"
-        :label="$t('{{{labels.delete}}}')"
-        color="primary"
-        flat
-        class="q-ml-sm"
-        @click="confirmDelete = true"
-        icon="delete"
-      />
-      <q-btn v-if="handleAdd" flat round dense icon="add" @click="addItem" />
-    </div>
-    <ConfirmDelete
-      v-if="handleDelete"
-      :show="confirmDelete"
-      :handle-delete="handleDelete"
-      :handle-cancel="() => (confirmDelete = false)"
-    />
-  </q-toolbar>
-</template>
-
-<script>
-import ConfirmDelete from "./ConfirmDelete";
-
-export default {
-  name: "Toolbar",
-  components: {
-    ConfirmDelete
-  },
-  data() {
-    return {
-      confirmDelete: false
-    };
-  },
-  props: {
-    handleSubmit: {
-      type: Function,
-      required: false
-    },
-    handleReset: {
-      type: Function,
-      required: false
-    },
-    handleDelete: {
-      type: Function,
-      required: false
-    },
-    handleAdd: {
-      type: Function,
-      required: false
-    }
-  },
-  methods: {
-    addItem() {
-      if (this.handleAdd) {
-        this.handleAdd();
-      }
-    },
-    submitItem() {
-      if (this.handleSubmit) {
-        this.handleSubmit();
-      }
-    },
-    resetItem() {
-      if (this.handleReset) {
-        this.handleReset();
-      }
-    }
-  }
-};
-</script>
diff --git a/templates/quasar/common/components/index.js b/templates/quasar/common/components/index.js
deleted file mode 100644
index d93a4ccb..00000000
--- a/templates/quasar/common/components/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as ActionCell } from './ActionCell';
-export { default as Breadcrumb } from './Breadcrumb';
-export { default as ConfirmDelete } from './ConfirmDelete';
-export { default as DataFilter } from './DataFilter';
-export { default as InputDate } from './InputDate';
-export { default as Loading } from './Loading';
-export { default as Toolbar } from './Toolbar';
diff --git a/templates/quasar/common/mixins/CreateMixin.js b/templates/quasar/common/mixins/CreateMixin.js
deleted file mode 100644
index 648530e8..00000000
--- a/templates/quasar/common/mixins/CreateMixin.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { error } from '../../utils/notify';
-
-export default {
-  watch: {
-    created(created) {
-      this.onCreated(created);
-    },
-
-    error(message) {
-      this.onError(message);
-    },
-  },
-
-  methods: {
-    onCreated(item) {
-      item &&
-        this.$router.push({
-          name: `${this.$options.servicePrefix}Update`,
-          params: { id: item['@id'] },
-        });
-    },
-
-    onError(message) {
-      message && error(message, this.$t('{{{labels.close}}}'));
-    },
-
-    onSendForm() {
-      this.$refs.createForm.$children[0].validate().then(success => {
-        if (success) {
-          this.create(this.item);
-        }
-      });
-    },
-
-    resetForm() {
-      this.item = {};
-    },
-  },
-};
diff --git a/templates/quasar/common/mixins/ListMixin.js b/templates/quasar/common/mixins/ListMixin.js
deleted file mode 100644
index a24a5faf..00000000
--- a/templates/quasar/common/mixins/ListMixin.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import { error, success } from '../../utils/notify';
-import { extractDate } from '../../utils/dates';
-
-export default {
-  created() {
-    this.onCreated();
-  },
-
-  data() {
-    return {
-      pagination: {
-        sortBy: null,
-        descending: false,
-        page: 1, // page to be displayed
-        rowsPerPage: 3, // maximum displayed rows
-        rowsNumber: 10, // max number of rows
-      },
-      nextPage: null,
-      filters: {},
-      filtration: {},
-      expandedFilter: false,
-    };
-  },
-
-  watch: {
-    error(message) {
-      this.onListError(message);
-    },
-
-    items() {
-      this.pagination.page = this.nextPage;
-      this.pagination.rowsNumber = this.totalItems;
-      this.nextPage = null;
-    },
-
-    deletedItem(val) {
-      this.onDeletedItem(val);
-    },
-  },
-
-  methods: {
-    onCreated() {
-      this.onRequest({
-        pagination: this.pagination
-      });
-    },
-
-    onListError(message) {
-      message && error(message, this.$t('{{{labels.close}}}'));
-    },
-
-    onDeletedItem(val) {
-      success(`${val['@id']} ${this.$t('{{{labels.deleted}}}')}.`, this.$t('{{{labels.close}}}'));
-    },
-
-    onRequest(props, init) {
-      const {
-        pagination: { page, rowsPerPage: itemsPerPage, sortBy, descending },
-      } = props;
-      this.nextPage = page;
-      let params = {
-        ...this.filtration,
-      };
-      if (itemsPerPage > 0) {
-        params = { ...params, itemsPerPage, page };
-      }
-      if (sortBy) {
-        params[`order[${sortBy}]`] = descending ? 'DESC' : 'ASC';
-      }
-      this.getPage({ params }).then(() => {
-        this.pagination.sortBy = sortBy;
-        this.pagination.descending = descending;
-        this.pagination.rowsPerPage = itemsPerPage;
-        if (!init) {
-          this.filters = { ...this.filtration };
-        }
-      });
-    },
-
-    formatDateTime(val, format) {
-      return val ? this.$d(extractDate(val), format) : '';
-    },
-
-    onSendFilter() {
-      this.onRequest({
-        pagination: this.pagination,
-      });
-    },
-
-    resetFilter() {
-      this.filters = {};
-    },
-
-    addHandler() {
-      this.$router.push({ name: `${this.$options.servicePrefix}Create` });
-    },
-
-    showHandler(item) {
-      this.$router.push({
-        name: `${this.$options.servicePrefix}Show`,
-        params: { id: item['@id'] }
-      });
-    },
-
-    editHandler(item) {
-      this.$router.push({
-        name: `${this.$options.servicePrefix}Update`,
-        params: { id: item['@id'] }
-      });
-    },
-
-    deleteHandler(item) {
-      this.deleteItem(item).then(() =>
-        this.onRequest({
-          pagination: this.pagination,
-        }),
-      );
-    },
-  },
-};
diff --git a/templates/quasar/common/mixins/ShowMixin.js b/templates/quasar/common/mixins/ShowMixin.js
deleted file mode 100644
index b3cf94b8..00000000
--- a/templates/quasar/common/mixins/ShowMixin.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { extractDate } from '../../utils/dates';
-
-export default {
-  created() {
-    this.onCreated();
-  },
-
-  beforeDestroy() {
-    this.onBeforeDestroy();
-  },
-
-  watch: {
-    error(message) {
-      this.onShowError(message);
-    },
-
-    deleteError(message) {
-      this.onDeletedError(message);
-    },
-  },
-
-  methods: {
-    onCreated() {
-      this.retrieve(decodeURIComponent(this.$route.params.id));
-    },
-
-    onBeforeDestroy() {
-      this.reset();
-    },
-
-    onShowError(message) {
-      message &&
-        this.$q.notify({
-          message,
-          color: 'red',
-          icon: 'error',
-          closeBtn: this.$t('{{{labels.close}}}'),
-        });
-    },
-
-    onDeletedError(message) {
-      message &&
-        this.$q.notify({
-          message,
-          color: 'red',
-          icon: 'error',
-          closeBtn: this.$t('{{{labels.close}}}'),
-        });
-    },
-
-    formatDateTime(val, format) {
-      return val ? this.$d(extractDate(val), format) : '';
-    },
-
-    deleteItem() {
-      this.deleteItem(this.item).then(() =>
-        this.$router.push({ name: `${this.$options.servicePrefix}List` })
-      );
-    },
-  },
-};
diff --git a/templates/quasar/common/mixins/UpdateMixin.js b/templates/quasar/common/mixins/UpdateMixin.js
deleted file mode 100644
index 948d50e0..00000000
--- a/templates/quasar/common/mixins/UpdateMixin.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { error, success } from '../../utils/notify';
-
-export default {
-  data() {
-    return {
-      item: {},
-    };
-  },
-
-  created() {
-    this.onCreated();
-  },
-
-  beforeDestroy() {
-    this.onBeforeDestroy();
-  },
-
-  watch: {
-    error(message) {
-      this.onUpdateError(message);
-    },
-
-    deleteError(message) {
-      this.onDeleteError(message);
-    },
-
-    updated(val) {
-      this.onUpdated(val);
-    },
-
-    retrieved(val) {
-      this.item = { ...val };
-    },
-  },
-
-  methods: {
-    del() {
-      this.deleteItem(this.retrieved).then(() =>
-        this.$router
-          .push({ name: `${this.$options.servicePrefix}List` })
-          .catch(() => {})
-      );
-    },
-
-    reset() {
-      this.updateReset();
-      this.delReset();
-      this.createReset();
-    },
-
-    onSendForm() {
-      this.$refs.updateForm.$children[0].validate().then(success => {
-        if (success) {
-          this.update(this.item);
-        }
-      });
-    },
-
-    resetForm() {
-      this.item = { ...this.retrieved };
-    },
-
-    onCreated() {
-      this.retrieve(decodeURIComponent(this.$route.params.id));
-    },
-
-    onBeforeDestroy() {
-      this.reset();
-    },
-
-    onUpdated(val) {
-      success(`${val['@id']} ${this.$t('{{{labels.updated}}}')}.`, this.$t('{{{labels.close}}}'));
-    },
-
-    onUpdateError(message) {
-      message && error(message, this.$t('{{{labels.close}}}'));
-    },
-
-    onDeleteError(message) {
-      message && error(message, this.$t('{{{labels.close}}}'));
-    },
-  },
-};
diff --git a/templates/quasar/components/common/ActionCellComponent.vue b/templates/quasar/components/common/ActionCellComponent.vue
new file mode 100644
index 00000000..dbda8fe0
--- /dev/null
+++ b/templates/quasar/components/common/ActionCellComponent.vue
@@ -0,0 +1,75 @@
+<template>
+  <q-td auto-width>
+    <q-btn
+      v-if="actions.includes('show')"
+      flat
+      round
+      dense
+      color="secondary"
+      icon="format_align_justify"
+      @click="emitShow"
+    />
+
+    <q-btn
+      v-if="actions.includes('edit')"
+      flat
+      round
+      dense
+      color="secondary"
+      icon="edit"
+      @click="emitEdit"
+    />
+
+    <q-btn
+      v-if="actions.includes('delete')"
+      icon="delete"
+      flat
+      round
+      dense
+      color="secondary"
+      @click="toggleConfirmDelete"
+    />
+
+    <ConfirmDelete
+      v-if="actions.includes('delete')"
+      :show="confirmDelete"
+      @delete="emitDelete"
+      @cancel="toggleConfirmDelete"
+    />
+  </q-td>
+</template>
+
+<script lang="ts" setup>
+import ConfirmDelete from 'src/components/common/ConfirmDeleteComponent.vue';
+import { ref, toRefs } from 'vue';
+
+const props = defineProps<{
+  actions: ('show' | 'edit' | 'delete')[];
+}>();
+
+const { actions } = toRefs(props);
+
+const emit = defineEmits<{
+  (e: 'show'): void;
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+}>();
+
+function emitShow() {
+  emit('show');
+}
+
+function emitEdit() {
+  emit('edit');
+}
+
+function emitDelete() {
+  emit('delete');
+}
+
+const confirmDelete = ref(false);
+
+function toggleConfirmDelete() {
+  confirmDelete.value = !confirmDelete.value;
+}
+</script>
diff --git a/templates/quasar/components/common/BreadcrumbComponent.vue b/templates/quasar/components/common/BreadcrumbComponent.vue
new file mode 100644
index 00000000..afa0ca82
--- /dev/null
+++ b/templates/quasar/components/common/BreadcrumbComponent.vue
@@ -0,0 +1,27 @@
+<template>
+  <q-breadcrumbs class="q-mr-sm">
+    <q-breadcrumbs-el icon="home" to="/" />
+
+    <q-breadcrumbs-el
+      v-for="(breadcrumb, index) in props.values"
+      :key="index"
+      :label="`${$t(breadcrumb.label)} ${
+        index === props.values.length - 1 && props.item?.['@id']
+          ? props.item['@id']
+          : ''
+      }`"
+      :icon="breadcrumb.icon"
+      :to="breadcrumb.to"
+    />
+  </q-breadcrumbs>
+</template>
+
+<script lang="ts" setup>
+import { Item } from 'src/types/item';
+import { BreadcrumbValue } from 'src/types/breadcrumb';
+
+const props = defineProps<{
+  values: BreadcrumbValue[];
+  item?: Item;
+}>();
+</script>
diff --git a/templates/quasar/components/common/ConfirmDeleteComponent.vue b/templates/quasar/components/common/ConfirmDeleteComponent.vue
new file mode 100644
index 00000000..0d68542a
--- /dev/null
+++ b/templates/quasar/components/common/ConfirmDeleteComponent.vue
@@ -0,0 +1,54 @@
+<template>
+  <q-dialog :model-value="show" persistent>
+    <q-card>
+      <q-card-section class="row items-center">
+        <q-avatar icon="warning" color="primary" text-color="white" />
+
+        <span class="q-ml-sm">
+          {{ $t('Are you sure you want to delete this item?') }}
+        </span>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          label="Cancel"
+          color="primary"
+          v-close-popup
+          @click="emitCancel"
+        />
+
+        <q-btn
+          flat
+          label="Delete"
+          color="primary"
+          v-close-popup
+          @click="emitDelete"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import { toRef } from 'vue';
+
+let props = defineProps<{
+  show: boolean;
+}>();
+
+let show = toRef(props, 'show');
+
+const emit = defineEmits<{
+  (e: 'cancel'): void;
+  (e: 'delete'): void;
+}>();
+
+function emitCancel() {
+  emit('cancel');
+}
+
+function emitDelete() {
+  emit('delete');
+}
+</script>
diff --git a/templates/quasar/components/common/DataFilterComponent.vue b/templates/quasar/components/common/DataFilterComponent.vue
new file mode 100644
index 00000000..0aeed752
--- /dev/null
+++ b/templates/quasar/components/common/DataFilterComponent.vue
@@ -0,0 +1,44 @@
+<template>
+  <q-expansion-item
+    v-model="filtersExpanded"
+    :label="$t('filters')"
+    icon="search"
+  >
+    <q-card>
+      <q-card-section @keydown.enter.prevent="emitFilter">
+        <slot name="filter"></slot>
+      </q-card-section>
+
+      <q-card-section>
+        <q-btn :label="$t('filter')" color="primary" @click="emitFilter" />
+
+        <q-btn
+          :label="$t('reset')"
+          color="primary"
+          flat
+          class="q-ml-sm"
+          @click="emitReset"
+        />
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const filtersExpanded = ref(false);
+
+const emit = defineEmits<{
+  (e: 'filter'): void;
+  (e: 'reset'): void;
+}>();
+
+function emitFilter() {
+  emit('filter');
+}
+
+function emitReset() {
+  emit('reset');
+}
+</script>
diff --git a/templates/quasar/components/common/FormRepeaterComponent.vue b/templates/quasar/components/common/FormRepeaterComponent.vue
new file mode 100644
index 00000000..6e965209
--- /dev/null
+++ b/templates/quasar/components/common/FormRepeaterComponent.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <label for="book_reviews" class="text-body1 form-control-label">
+      <span class="q-mr-sm">
+        {{ label }}
+      </span>
+
+      <q-btn color="secondary" @click="addField">Add</q-btn>
+    </label>
+
+    <div class="q-my-md">
+      <q-input
+        v-for="(field, index) in fields"
+        v-model="fields[index]"
+        :key="index"
+        filled
+        class="q-mb-sm"
+        @update:model-value="(value: string) => updateField(index, value)"
+      >
+        <template #append>
+          <q-icon
+            name="delete"
+            class="cursor-pointer"
+            @click="removeField(index)"
+          />
+        </template>
+      </q-input>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, type Ref } from 'vue';
+
+const props = defineProps<{
+  values?: string[];
+  label: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update', values: string[]): void;
+}>();
+
+let fields: Ref<string[]> = ref([]);
+
+if (props.values) {
+  fields.value.push(...props.values);
+}
+
+function addField() {
+  fields.value.push('');
+}
+
+function updateField(index: number, value: string) {
+  fields.value.splice(index, 1, value.trim());
+
+  emitUpdate();
+}
+
+function removeField(index: number) {
+  fields.value.splice(index, 1);
+
+  emitUpdate();
+}
+
+function emitUpdate() {
+  emit(
+    'update',
+    fields.value.filter((review) => review.length)
+  );
+}
+</script>
diff --git a/templates/quasar/components/common/LoadingComponent.vue b/templates/quasar/components/common/LoadingComponent.vue
new file mode 100644
index 00000000..8d3d38a8
--- /dev/null
+++ b/templates/quasar/components/common/LoadingComponent.vue
@@ -0,0 +1,11 @@
+<template>
+  <q-inner-loading :showing="props.showing">
+    <q-spinner size="50px" color="primary" />
+  </q-inner-loading>
+</template>
+
+<script lang="ts" setup>
+let props = defineProps<{
+  showing: boolean;
+}>();
+</script>
diff --git a/templates/quasar/components/common/ToolbarComponent.vue b/templates/quasar/components/common/ToolbarComponent.vue
new file mode 100644
index 00000000..b46206c0
--- /dev/null
+++ b/templates/quasar/components/common/ToolbarComponent.vue
@@ -0,0 +1,93 @@
+<template>
+  <q-toolbar class="q-my-md">
+    <slot name="left" />
+
+    <q-space />
+
+    <div>
+      <q-btn
+        v-if="actions?.includes('submit')"
+        :label="$t('submit')"
+        color="primary"
+        icon="save"
+        @click="emitSubmit"
+      />
+
+      <q-btn
+        v-if="actions?.includes('reset')"
+        :label="$t('reset')"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        icon="settings_backup_restore"
+        @click="emitReset"
+      />
+
+      <q-btn
+        v-if="actions?.includes('delete')"
+        :label="$t('delete')"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        icon="delete"
+        @click="toggleConfirmDelete"
+      />
+
+      <q-btn
+        v-if="actions?.includes('add')"
+        flat
+        round
+        dense
+        icon="add"
+        @click="emitAdd"
+      />
+    </div>
+
+    <ConfirmDelete
+      v-if="actions?.includes('delete')"
+      :show="confirmDelete"
+      @delete="emitDelete"
+      @cancel="toggleConfirmDelete"
+    />
+  </q-toolbar>
+</template>
+
+<script lang="ts" setup>
+import ConfirmDelete from 'src/components/common/ConfirmDeleteComponent.vue';
+import { ref, toRefs } from 'vue';
+
+const props = defineProps<{
+  actions?: ('submit' | 'reset' | 'delete' | 'add')[];
+}>();
+
+const { actions } = toRefs(props);
+
+const emit = defineEmits<{
+  (e: 'submit'): void;
+  (e: 'reset'): void;
+  (e: 'add'): void;
+  (e: 'delete'): void;
+}>();
+
+function emitSubmit() {
+  emit('submit');
+}
+
+function emitReset() {
+  emit('reset');
+}
+
+function emitAdd() {
+  emit('add');
+}
+
+function emitDelete() {
+  emit('delete');
+}
+
+const confirmDelete = ref(false);
+
+function toggleConfirmDelete() {
+  confirmDelete.value = !confirmDelete.value;
+}
+</script>
diff --git a/templates/quasar/components/foo/Create.vue b/templates/quasar/components/foo/Create.vue
deleted file mode 100644
index d4d26df7..00000000
--- a/templates/quasar/components/foo/Create.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div>
-    <Toolbar :handle-submit="onSendForm" :handle-reset="resetForm">
-      <Breadcrumb :values="$route.meta.breadcrumb" slot="left" />
-    </Toolbar>
-    <{{{titleUcFirst}}}Form
-      ref="createForm"
-      :values="item"
-      :errors="violations"
-      :handle-submit="onSendForm"
-    />
-    <Loading :showing="isLoading" />
-  </div>
-</template>
-
-<script>
-import { create } from '../../utils/vuexer';
-import {{{titleUcFirst}}}Form from './Form';
-import { Breadcrumb, Toolbar, Loading } from '../../common/components';
-import CreateMixin from '../../common/mixins/CreateMixin';
-const servicePrefix = '{{{titleUcFirst}}}';
-const { getters, actions } = create(servicePrefix);
-
-export default {
-  name: '{{{titleUcFirst}}}Create',
-  servicePrefix,
-  mixins: [CreateMixin],
-  components: {
-    {{{titleUcFirst}}}Form,
-    Breadcrumb,
-    Toolbar,
-    Loading,
-  },
-
-  data() {
-    return {
-      item: {
-        {{#each formFields}}
-          {{#compare type "==" "time" }}
-        {{{name}}}: '',
-          {{/compare}}
-          {{#compare type "==" "date" }}
-        {{{name}}}: new Date().toISOString(),,
-          {{/compare}}
-          {{#compare type "==" "dateTime" }}
-        {{{name}}}: new Date().toISOString(),
-          {{/compare}}
-        {{/each}}
-      },
-    };
-  },
-
-  computed: getters,
-  methods: actions,
-};
-</script>
diff --git a/templates/quasar/components/foo/CreateComponent.vue b/templates/quasar/components/foo/CreateComponent.vue
new file mode 100644
index 00000000..1b3a42a4
--- /dev/null
+++ b/templates/quasar/components/foo/CreateComponent.vue
@@ -0,0 +1,42 @@
+<template>
+  <Toolbar>
+    <template #left>
+      <Breadcrumb :values="breadcrumb" />
+    </template>
+  </Toolbar>
+
+  <{{titleUcFirst}}Form :errors="violations" @submit="submitForm" />
+
+  <Loading :showing="isLoading" />
+</template>
+
+<script lang="ts" setup>
+import Toolbar from 'src/components/common/ToolbarComponent.vue';
+import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
+import Loading from 'components/common/LoadingComponent.vue';
+import {{titleUcFirst}}Form from 'components/{{lc}}/FormComponent.vue';
+import { useRouter } from 'vue-router';
+import { use{{titleUcFirst}}CreateStore } from 'stores/{{lc}}/create';
+import { storeToRefs } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { useBreadcrumb } from 'src/composables/breadcrumb';
+import { useWatchErrors } from 'src/composables/errors';
+
+const router = useRouter();
+const breadcrumb = useBreadcrumb();
+
+const {{lc}}CreateStore = use{{titleUcFirst}}CreateStore();
+const { created, isLoading, violations, error } = storeToRefs({{lc}}CreateStore);
+
+async function submitForm(item: {{titleUcFirst}}) {
+  await {{lc}}CreateStore.create(item);
+
+  if (!created?.value) {
+    return;
+  }
+
+  router.push({ name: '{{titleUcFirst}}Update', params: { id: created?.value?.['@id'] } });
+}
+
+useWatchErrors([error]);
+</script>
diff --git a/templates/quasar/components/foo/Filter.vue b/templates/quasar/components/foo/Filter.vue
deleted file mode 100644
index 79caa479..00000000
--- a/templates/quasar/components/foo/Filter.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template>
-  <div>
-    {{#forEach parameters}}
-    {{#ifOdd index}}
-    <div class="row q-col-gutter-x-md">
-    {{/ifOdd}}
-    {{#switch filterType}}
-    {{#case "exists"}}
-      <q-checkbox v-model="item['{{{variable}}}']" :label="$t('{{{capitalize name}}}')" class="col-12 col-md" />
-    {{/case}}
-    {{#default}}
-    {{#compare type "==" "checkbox" }}
-      <q-checkbox v-model="item.{{{name}}}" :label="$t('{{{capitalize name}}}')" class="col-12 col-md" />
-    {{/compare}}
-    {{#compare type "==" "date" }}
-      <q-input
-        filled
-        v-model="item.{{{name}}}"
-        mask="date"
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="event" class="cursor-pointer">
-            <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
-              <q-date v-model="item.{{{name}}}" @input="() => $refs.qDateProxy.hide()" />
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "time" }}
-      <q-input
-        filled
-        v-model="item.{{{name}}}"
-        mask="time"
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="access_time" class="cursor-pointer">
-            <q-popup-proxy transition-show="scale" transition-hide="scale">
-              <q-time v-model="item.{{{name}}}" />
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "dateTime" }}
-      <q-input filled v-model="item.{{{name}}}" :label="$t('{{{capitalize name}}}')" class="col-12 col-md">
-        <template v-slot:prepend>
-          <q-icon name="event" class="cursor-pointer">
-            <q-popup-proxy transition-show="scale" transition-hide="scale">
-              <q-date v-model="item.{{{name}}}" mask="YYYY-MM-DD HH:mm" />
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-
-        <template v-slot:append>
-          <q-icon name="access_time" class="cursor-pointer">
-            <q-popup-proxy transition-show="scale" transition-hide="scale">
-              <q-time v-model="item.{{{name}}}" mask="YYYY-MM-DD HH:mm" format24h />
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "number" }}
-      <q-input
-      v-model.number="item.{{{name}}}"
-      filled
-      type="{{{type}}}"
-      {{#if step}}
-      step="{{{step}}}"
-      {{/if}}
-      :label="$t('{{{capitalize name}}}')"
-      class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-      <q-select
-        v-model="item.{{{name}}}"
-        filled
-        :label="$t('{{{capitalize name}}}')"
-        @filter="{{{name}}}FilterFn"
-        :options="{{{name}}}SelectItems"
-        option-value="@id"
-        option-label="name"
-        class="col-12 col-md"
-        {{#if multiple}}multiple{{/if}}
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">\{{ $t('{{{labels.noresults}}}') }}</q-item-section>
-          </q-item>
-        </template>
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-select>
-    {{else}}
-      <q-input
-        v-model="item.{{{name}}}"
-        filled
-        type="{{{type}}}"
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-input>
-    {{/if}}
-    {{/compare}}
-    {{/default}}
-    {{/switch}}
-    {{#ifEven index}}
-    </div>
-    {{/ifEven}}
-    {{#if isLast}}{{#ifOdd index}}
-      <div class="col-12 col-md"></div>
-    </div>
-    {{/ifOdd}}{{/if}}
-    {{/forEach}}
-  </div>
-</template>
-
-<script>
-{{#if paramsHaveRefs}}
-import { mapActions, mapGetters } from "vuex";
-{{/if}}
-
-export default {
-  props: {
-    values: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    {{#if paramsHaveRefs}}
-    ...mapGetters({
-      {{#each parameters}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-      {{{name}}}SelectItems: '{{{lowercase reference.title}}}/list/selectItems',
-      {{/if}}
-      {{/compare}}
-      {{/each}}
-    }),
-    {{/if}}
-    // eslint-disable-next-line
-    item() {
-      return this.initialValues || this.values;
-    }
-  },
-  methods: {
-    {{#if paramsHaveRefs}}
-    ...mapActions({
-      {{#each parameters}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-      {{{name}}}GetSelectItems: '{{{lowercase reference.title}}}/list/getSelectItems',
-      {{/if}}
-      {{/compare}}
-      {{/each}}
-    }),
-
-    {{#each parameters}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-    {{{name}}}FilterFn(val, update /* , abort */) {
-      return this.{{{name}}}SelectItems !== null
-        ? update()
-        : this.{{{name}}}GetSelectItems({}).then(update);
-    },
-    {{/if}}
-    {{/compare}}
-    {{/each}}
-    {{/if}}
-  }
-};
-</script>
diff --git a/templates/quasar/components/foo/FilterComponent.vue b/templates/quasar/components/foo/FilterComponent.vue
new file mode 100644
index 00000000..caefeaf1
--- /dev/null
+++ b/templates/quasar/components/foo/FilterComponent.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="row q-col-gutter-x-md">
+    {{#each parameters}}
+      <q-input
+        v-model="item.{{name}}"
+        filled
+        :label="$t('{{lc}}.{{name}}')"
+        class="col-12 col-md"
+      >
+        <template #append>
+          <q-icon
+            name="close"
+            @click.prevent.stop="item.{{name}} = ''"
+            class="cursor-pointer"
+          />
+        </template>
+      </q-input>
+    {{/each}}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { toRef } from 'vue';
+
+const props = defineProps<{
+  values: {{titleUcFirst}};
+}>();
+
+const item = toRef(props, 'values');
+</script>
diff --git a/templates/quasar/components/foo/Form.vue b/templates/quasar/components/foo/Form.vue
deleted file mode 100644
index 4c361744..00000000
--- a/templates/quasar/components/foo/Form.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-  <q-form class="q-pa-md q-col-gutter-y-md" @keydown.enter.prevent="handleSubmit">
-    {{#forEach formFields}}
-    {{#ifOdd index}}
-    <div class="row q-gutter-md">
-    {{/ifOdd}}
-    {{#compare type "==" "checkbox" }}
-      <q-checkbox v-model="item.{{{name}}}" :label="$t('{{{capitalize name}}}')" class="col-12 col-md" />
-    {{/compare}}
-    {{#compare type "==" "date" }}
-      <InputDate
-        readonly
-        filled
-        :value="item.{{{name}}}"
-        :set="
-          v => {
-            item.{{{name}}} = v;
-          }
-        "
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-        kind="date"
-        :rules="['date']"
-      />
-    {{/compare}}
-    {{#compare type "==" "time" }}
-      <InputDate
-        readonly
-        filled
-        :value="item.{{{name}}}"
-        :set="
-          v => {
-            item.{{{name}}} = v;
-          }
-        "
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-        kind="time"
-        :rules="['time']"
-      />
-    {{/compare}}
-    {{#compare type "==" "dateTime" }}
-      <InputDate
-        readonly
-        filled
-        :value="item.{{{name}}}"
-        :set="
-          v => {
-            item.{{{name}}} = new Date(v).toISOString();
-          }
-        "
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-        kind="datetime"
-        :rules="['datetime']"
-      />
-    {{/compare}}
-    {{#compare type "==" "number" }}
-      <q-input
-      v-model.number="item.{{{name}}}"
-      filled
-      type="{{{type}}}"
-      {{#if step}}
-      step="{{{step}}}"
-      {{/if}}
-      :label="$t('{{{capitalize name}}}')"
-      lazy-rules
-      :rules="[{{#if required}}val => !!val || $t('{{{../labels.required}}}'), {{/if}}isInvalid('{{{name}}}')]"
-      class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-      <q-select
-        v-model="item.{{{name}}}"
-        filled
-        :label="$t('{{{capitalize name}}}')"
-        lazy-rules
-        :rules="[{{#if required}}val => !!val || $t('{{{../labels.required}}}'), {{/if}}isInvalid('{{{name}}}')]"
-        @filter="{{{name}}}FilterFn"
-        :options="{{{name}}}SelectItems"
-        option-value="@id"
-        option-label="name"
-        class="col-12 col-md"
-        emit-value
-        map-options
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">\{{ $t('{{{../labels.noresults}}}') }}</q-item-section>
-          </q-item>
-        </template>
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-select>
-    {{else}}
-      <q-input
-        v-model="item.{{{name}}}"
-        filled
-        type="{{{type}}}"
-        :label="$t('{{{capitalize name}}}')"
-        lazy-rules
-        :rules="[{{#if required}}val => !!val || $t('{{{../labels.required}}}'), {{/if}}isInvalid('{{{name}}}')]"
-        class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-input>
-    {{/if}}
-    {{/compare}}
-    {{#ifEven index}}
-    </div>
-    {{/ifEven}}
-    {{#if isLast}}{{#ifOdd index}}
-      <div class="col-12 col-md"></div>
-    </div>
-    {{/ifOdd}}{{/if}}
-    {{/forEach}}
-  </q-form>
-</template>
-
-<script>
-import { form } from '../../utils/vuexer';
-{{#if formContainsDate}}
-import InputDate from '../../common/components/InputDate';
-{{/if}}
-
-const { getters, actions, mutations } = form([
-{{#each formFields}}
-  {{#compare type "==" "text" }}
-  {{#if reference}}
-  { name: '{{{name}}}', module: '{{{reference.title}}}'},
-  {{/if}}
-  {{/compare}}
-{{/each}}
-]);
-
-export default {
-  name: '{{{titleUcFirst}}}Form',
-  {{#if formContainsDate}}
-
-  components: {
-    InputDate,
-  },
-  {{/if}}
-
-  props: {
-    values: {
-      type: Object,
-      required: true,
-    },
-
-    errors: {
-      type: Object,
-      default: () => {},
-    },
-
-    initialValues: {
-      type: Object,
-      default: () => {},
-    },
-
-    handleSubmit: {
-      type: Function,
-      required: true
-    }
-  },
-
-  computed: {
-    ...getters,
-
-    // eslint-disable-next-line
-    item() {
-      return this.initialValues || this.values;
-    },
-
-    violations() {
-      return this.errors || {};
-    },
-  },
-
-  methods: {
-    ...actions,
-    ...mutations,
-
-    isInvalid(/* key */) {
-      return true;
-      // return val => {
-      //   if (typeof val == 'number') {
-      //     if (val > 0) {
-      //       return true;
-      //     } else {
-      //       return this.$t('{{{labels.numValidation}}}');
-      //     }
-      //   }
-      //   if (!(val && val.length > 0)) return this.$t('{{{labels.stringValidation}}}');
-      //   return Object.keys(this.violations).length === 0 && !this.violations[key];
-      // };
-    },
-
-    {{#each formFields}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-    {{{name}}}FilterFn(val, update /* , abort */) {
-      const params = {
-        'exists[{{{name}}}]': false,
-      };
-      const template = JSON.stringify(params);
-
-      return this.{{{name}}}SelectItems !== null && this.{{{name}}}SelectItemsTemplate === template
-        ? update()
-        : this.{{{name}}}GetSelectItems({ params }).then(() => {
-            this.{{{name}}}SetSelectItemsTemplate(template);
-            update();
-          });
-    },
-    {{/if}}
-    {{/compare}}
-    {{/each}}
-  },
-};
-</script>
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
new file mode 100644
index 00000000..6c651713
--- /dev/null
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -0,0 +1,100 @@
+<template>
+  <q-form class="q-pa-md q-col-gutter-y-md" @submit="emitSubmit">
+    <div class="row q-gutter-md">
+    {{#each formFields}}
+      {{#if isManyRelations}}
+      <FormRepeater
+        :values="item.{{name}}"
+        :label="$t('{{lc}}.{{name}}')"
+        class="col-12 col-md-8"
+        @update="(values) => (item.{{name}} = values)"
+      />
+      {{else}}
+      <q-input
+        v-model="item.{{name}}"
+        :label="$t('{{lc}}.{{name}}')"
+        :error="Boolean(violations?.{{name}})"
+        :error-message="violations?.{{name}}"
+        name="{{name}}"
+        {{#compare type "==" "dateTime" }}
+        type="date"
+        {{/compare}}
+        {{#compare type "!=" "dateTime" }}
+        type="{{type}}"
+        {{/compare}}
+        bottom-slots
+        filled
+        class="col-12 col-md"
+      >
+        <template #append>
+          <q-icon
+            name="close"
+            class="cursor-pointer"
+            @click.prevent.stop="item.{{name}} = ''"
+          />
+        </template>
+      </q-input>
+      {{/if}}
+    {{/each}}
+    </div>
+
+    <div>
+      <q-btn label="Submit" type="submit" color="primary" />
+      <q-btn
+        label="Reset"
+        type="reset"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        @click="resetForm"
+      />
+    </div>
+  </q-form>
+</template>
+
+<script lang="ts" setup>
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { SubmissionErrors } from 'src/types/error';
+import { Ref, ref, toRef } from 'vue';
+{#if hasManyRelations}}
+import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
+{{/if}}
+import { Item } from 'src/types/item';
+import { formatDateInput } from 'src/utils/dates';
+
+let props = defineProps<{
+  values?: {{titleUcFirst}};
+  errors?: SubmissionErrors;
+}>();
+
+const violations = toRef(props, 'errors');
+
+let item: Ref<{{titleUcFirst}}> = ref({});
+
+if (props.values) {
+  item.value = {
+    ...props.values,
+    {{#compare type "==" "dateTime" }}
+    publicationDate: formatDateInput(props.values.publicationDate),
+    {{/compare}}
+    {{#if isEmbeddeds}}
+    {{name}}: props.values.{{name}}?.map((item: any) => item["@id"] ?? "") ?? [],
+    {{else if embedded}}
+    {{name}}: props.values.{{name}}?.["@id"],
+    {{/if}}
+    {{/each}}
+  };
+}
+
+function resetForm() {
+  item.value = { ...props.values };
+}
+
+let emit = defineEmits<{
+  (e: 'submit', item: {{titleUcFirst}}): void;
+}>();
+
+function emitSubmit() {
+  emit('submit', item.value);
+}
+</script>
diff --git a/templates/quasar/components/foo/List.vue b/templates/quasar/components/foo/List.vue
deleted file mode 100644
index a42e99fd..00000000
--- a/templates/quasar/components/foo/List.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <div>
-    <Toolbar :handle-add="addHandler">
-      <Breadcrumb :values="$route.meta.breadcrumb" slot="left" />
-    </Toolbar>
-    {{#if parameters.length}}
-    <DataFilter
-      :handle-filter="onSendFilter"
-      :handle-reset="resetFilter"
-      :expanded="expandedFilter"
-    ><{{{titleUcFirst}}}FilterForm ref="filterForm" :values="filtration" slot="filter" /></DataFilter>
-    {{/if}}
-    <q-table
-      :data="items"
-      :columns="columns"
-      :pagination.sync="pagination"
-      @request="onRequest"
-      row-key="id"
-      :no-data-label="$t('{{{labels.unavail}}}')"
-      :no-results-label="$t('{{{labels.noresults}}}')"
-      :loading-label="$t('{{{labels.loading}}}')"
-      :rows-per-page-label="$t('{{{labels.recPerPage}}}')"
-      flat
-      :loading="isLoading"
-    >
-      <ActionCell
-        slot="body-cell-action"
-        slot-scope="props"
-        :handle-show="() => showHandler(props.row)"
-        :handle-edit="() => editHandler(props.row)"
-        :handle-delete="() => deleteHandler(props.row)"
-      />
-    </q-table>
-  </div>
-</template>
-
-<script>
-import { list } from '../../utils/vuexer';
-{{#if parameters.length }}
-import {{{titleUcFirst}}}FilterForm from './Filter';
-import { DataFilter } from '../../common/components';
-{{/if}}
-import { ActionCell, Breadcrumb, Toolbar } from '../../common/components';
-import ListMixin from '../../common/mixins/ListMixin';
-const servicePrefix = '{{{titleUcFirst}}}';
-const { getters, actions } = list(servicePrefix);
-
-export default {
-  name: '{{{titleUcFirst}}}List',
-  servicePrefix,
-  mixins: [ListMixin],
-  components: {
-    {{#if parameters.length }}
-    {{{titleUcFirst}}}FilterForm,
-    DataFilter,
-    {{/if}}
-    Breadcrumb,
-    ActionCell,
-    Toolbar,
-  },
-
-  data() {
-    return {
-      columns: [
-        { name: 'action' },
-        { name: 'id', field: '@id', label: this.$t('id') },
-        {{#each fields}}
-          {{#inArray ../dateTypes type}}
-            {{#compare type "==" "time" }}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          format: val => this.formatDateTime(val, 'HH:mm'),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{/compare}}
-            {{#compare type "==" "date" }}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          format: val => this.formatDateTime(val, 'short'),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{/compare}}
-            {{#compare type "==" "dateTime" }}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          format: val => this.formatDateTime(val, 'long'),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{/compare}}
-          {{else}}
-            {{#compare type "==" "number" }}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          format: val => this.$t(val),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{else}}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{/compare}}
-          {{/inArray}}
-        {{/each }}
-      ],
-    };
-  },
-
-  computed: getters,
-  methods: actions,
-};
-</script>
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
new file mode 100644
index 00000000..a3e5cbaf
--- /dev/null
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -0,0 +1,238 @@
+<template>
+  <Toolbar :actions="['add']" @add="goToCreatePage">
+    <template #left>
+      <Breadcrumb :values="breadcrumb" />
+    </template>
+  </Toolbar>
+
+  <q-banner v-if="deleted" class="bg-positive text-white q-ma-md">
+    {{ deleted['@id'] }} deleted.
+  </q-banner>
+  <q-banner v-if="mercureDeleted" class="bg-positive text-white q-ma-md">
+    {{ mercureDeleted['@id'] }} deleted by another user.
+  </q-banner>
+
+  {{#if parameters.length}}
+  <DataFilter @filter="onSendFilter" @reset="resetFilter">
+    <template #filter>
+      <{{titleUcFirst}}Filter :values="filters" />
+    </template>
+  </DataFilter>
+  {{/if}}
+
+  <q-table
+    v-model:pagination="pagination"
+    :rows="items"
+    :columns="columns"
+    :loading="isLoading"
+    :no-data-label="$t('{{{labels.unavail}}}')"
+    :no-results-label="$t('{{{labels.noresults}}}')"
+    :loading-label="$t('{{{labels.loading}}}')"
+    :rows-per-page-label="$t('{{{labels.recPerPage}}}')"
+    row-key="id"
+    flat
+    wrap-cells
+    @request="sendRequest"
+  >
+    <template #body-cell-actions="{ row }">
+      <ActionCell
+        :actions="['show', 'edit', 'delete']"
+        @show="goToShowPage(row)"
+        @edit="gotToEditPage(row)"
+        @delete="deleteItem(row)"
+      />
+    </template>
+
+    {{#each fields}}
+    {{#if isReferences}}
+    <template #body-cell-{{lowercase reference.title}}="{ value }">
+      <td>
+        <template v-if="router.hasRoute('{{reference.title}}Show')">
+          <router-link
+            v-for="{{lowercase reference.title}} in value"
+            :to="{ name: '{{reference.title}}Show', params: { id: {{lowercase reference.title}} } }"
+            :key="{{lowercase reference.title}}"
+          >
+            {{ {{lowercase reference.title}} }}
+
+            <br />
+          </router-link>
+        </template>
+
+        <template v-else>
+          <p v-for="{{lowercase reference.title}} in value" :key="{{lowercase reference.title}}">
+            {{ {{lowercase reference.title}} }}
+          </p>
+        </template>
+      </td>
+    </template>
+    {{else if reference}}
+    <template #body-cell-{{lowercase reference.title}}="{ value }">
+      <td>
+        <router-link
+          v-if="router.hasRoute('{{reference.title}}Show')"
+          :to="{ name: '{{reference.title}}Show', params: { id: value } }"
+        >
+          {{ value }}
+        </router-link>
+
+        <p v-else>
+          {{ value }}
+        </p>
+      </td>
+    </template>
+    {{else if isEmbeddeds}}
+    <template #body-cell-{{lowercase embedded.title}}="{ value }">
+      <td>
+        <template v-if="router.hasRoute('{{embedded.title}}Show')">
+          <router-link
+            v-for="{{lowercase embedded.title}} in value"
+            :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
+            :key="{{lowercase embedded.title}}['@id']"
+          >
+            {{ {{lowercase embedded.title}}['@id'] }}
+
+            <br />
+          </router-link>
+        </template>
+
+        <template v-else>
+          <p v-for="{{lowercase embedded.title}} in value" :key="{{lowercase embedded.title}}['@id']">
+            {{ {{lowercase embedded.title}}['@id'] }}
+          </p>
+        </template>
+      </td>
+    </template>
+    {{else if embedded}}
+    <template #body-cell-{{lowercase embedded.title}}="{ value }">
+      <td>
+        <router-link
+          v-if="router.hasRoute('{{embedded.title}}Show')"
+          :to="{ name: '{{embedded.title}}Show', params: { id: value['@id'] } }"
+        >
+          {{ value['@id'] }}
+        </router-link>
+
+        <p v-else>
+          {{ value['@id'] }}
+        </p>
+      </td>
+    </template>
+    {{/if}}
+    {{/each}}
+  </q-table>
+</template>
+
+<script lang="ts" setup>
+{{#if parameters.length }}
+import DataFilter from 'src/components/common/DataFilterComponent.vue';
+import {{titleUcFirst}}Filter from 'src/components/{{lc}}/FilterComponent.vue';
+{{/if}}
+import Toolbar from 'src/components/common/ToolbarComponent.vue';
+import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
+import ActionCell from 'src/components/common/ActionCellComponent.vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { formatDateTime } from 'src/utils/dates';
+import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
+import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
+import { storeToRefs } from 'pinia';
+import { onBeforeUnmount, ref, watch } from 'vue';
+import { useBreadcrumb } from 'src/composables/breadcrumb';
+import { useWatchErrors } from 'src/composables/errors';
+import { useMercureList } from 'src/composables/mercureList';
+
+const { t } = useI18n();
+const router = useRouter();
+const breadcrumb = useBreadcrumb();
+
+const {{lc}}ListStore = use{{titleUcFirst}}ListStore();
+const { items, totalItems, error, isLoading } = storeToRefs({{lc}}ListStore);
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { deleted, mercureDeleted } = storeToRefs({{lc}}DeleteStore);
+
+async function sendRequest(params = {}) {
+  await {{lc}}ListStore.getItems(params);
+}
+
+useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
+
+const nextPage = ref(1);
+const pagination = {
+  sortBy: undefined,
+  descending: false,
+  page: 1, // page to be displayed
+  rowsPerPage: 3, // maximum displayed rows
+  rowsNumber: 10, // max number of rows
+};
+const filters = ref({});
+const columns = [
+  { name: 'actions', label: t('actions'), field: '' },
+  { name: 'id', field: '@id', label: t('id') },
+  {{#each fields}}
+  {
+    name: '{{name}}',
+    field: '{{name}}',
+    label: t('{{lc}}.{{name}}'),
+    {{#if sortable }}
+    sortable: true,
+    {{/if}}
+    {{#compare type "==" "dateTime" }}
+    format: (value: string) => {
+      return formatDateTime(value);
+    },
+    {{/compare}}
+  }
+  {{/each }}
+];
+
+await sendRequest({ pagination });
+
+watch(items, () => {
+  pagination.page = nextPage.value;
+  pagination.rowsNumber = totalItems.value;
+  nextPage.value = 1;
+});
+
+function onSendFilter() {
+  sendRequest({
+    filters: filters.value,
+    pagination,
+  });
+}
+
+function resetFilter() {
+  filters.value = {};
+}
+
+function goToCreatePage() {
+  router.push({ name: '{{titleUcFirst}}Create' });
+}
+
+function goToShowPage(item: {{titleUcFirst}}) {
+  router.push({
+    name: '{{titleUcFirst}}Show',
+    params: { id: item['@id'] },
+  });
+}
+
+function gotToEditPage(item: {{titleUcFirst}}) {
+  router.push({
+    name: '{{titleUcFirst}}Update',
+    params: { id: item['@id'] },
+  });
+}
+
+async function deleteItem(item: {{titleUcFirst}}) {
+  await {{lc}}DeleteStore.deleteItem(item);
+
+  sendRequest({ pagination });
+}
+
+useWatchErrors([error]);
+
+onBeforeUnmount(() => {
+  {{lc}}DeleteStore.$reset();
+});
+</script>
diff --git a/templates/quasar/components/foo/Show.vue b/templates/quasar/components/foo/Show.vue
deleted file mode 100644
index a8ad2f59..00000000
--- a/templates/quasar/components/foo/Show.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div>
-    <Toolbar :handle-delete="del">
-      <Breadcrumb :values="$route.meta.breadcrumb" :item="item" slot="left" />
-    </Toolbar>
-
-    <div v-if="item" class="table-responsive">
-      <q-markup-table>
-        <thead>
-          <tr>
-            <th>\{{ $t('{{{labels.field}}}') }}</th>
-            <th>\{{ $t('{{{labels.value}}}') }}</th>
-
-            <th>\{{ $t('{{{labels.field}}}') }}</th>
-            <th>\{{ $t('{{{labels.value}}}') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {{#forEach fields}}
-          {{#ifOdd index}}
-          <tr>
-          {{/ifOdd}}
-            <td>\{{ $t('{{{capitalize name}}}') }}</td>
-            <td>{{#switch type}}
-            {{#case "dateTime"}}\{{ formatDateTime(item['{{{name}}}'], 'long') }}{{/case~}}
-            {{#case "date"}}\{{ formatDateTime(item['{{{name}}}'], 'short') }}{{/case~}}
-            {{#case "number"}}\{{ $t(item['{{{name}}}']) }}{{/case~}}
-            {{#default}}
-              {{#if reference}}
-            \{{ item['{{{name}}}'] && item['{{{name}}}'].name }}
-              {{else}}
-            \{{ item['{{{name}}}'] }}
-              {{/if}}
-            {{/default~}}
-            {{/switch}}
-            </td>
-
-          {{#ifEven index}}
-          </tr>
-          {{/ifEven}}
-          {{#if isLast}}{{#ifOdd index}}
-            <td></td>
-          </tr>
-          {{/ifOdd}}{{/if}}
-          {{/forEach }}
-        </tbody>
-      </q-markup-table>
-    </div>
-    <Loading :showing="isLoading" />
-  </div>
-</template>
-
-<script>
-import { show } from '../../utils/vuexer';
-import { Breadcrumb, Toolbar, Loading } from '../../common/components';
-import ShowMixin from '../../common/mixins/ShowMixin';
-const servicePrefix = '{{{titleUcFirst}}}';
-const { getters, actions } = show(servicePrefix);
-
-export default {
-  name: '{{{titleUcFirst}}}Show',
-  servicePrefix,
-  mixins: [ShowMixin],
-  components: {
-    Breadcrumb,
-    Toolbar,
-    Loading,
-  },
-
-  computed: getters,
-  methods: actions,
-};
-</script>
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
new file mode 100644
index 00000000..9f26ddc7
--- /dev/null
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -0,0 +1,155 @@
+<template>
+  <Toolbar :actions="['delete']" @delete="deleteItem">
+    <template #left>
+      <Breadcrumb :values="breadcrumb" />
+    </template>
+  </Toolbar>
+
+  <div v-if="item" class="table-responsive">
+    <q-markup-table>
+      <thead>
+        <tr>
+          <th>\{{ $t('{{labels.field}}') }}</th>
+          <th>\{{ $t('{{labels.value}}') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each fields}}
+        <tr>
+          <td>\{{ $t('{{lc}}.{{name}}') }}</td>
+
+          <td>
+            {{#if isReferences}}
+            <template v-if="router.hasRoute('{{reference.title}}Show')">
+              <router-link
+                v-for="{{lowercase reference.title}} in item.{{reference.name}}"
+                :to="{ name: '{{reference.title}}Show', params: { id: {{lowercase reference.title}} } }"
+                :key="{{lowercase reference.title}}"
+              >
+                \{{ {{lowercase reference.title}} }}
+
+                <br />
+              </router-link>
+            </template>
+
+            <template v-else>
+              <p
+                v-for="{{lowercase reference.title}} in item.{{reference.name}}"
+                :key="{{lowercase reference.title}}"
+              >
+                \{{ {{lowercase reference.title}} }}
+              </p>
+            </template>
+            {{else if reference}}
+            <router-link
+              v-if="router.hasRoute('{{reference.title}}Show')"
+              :to="{ name: '{{reference.title}}Show', params: { id: item.{{lowercase reference.title}} } }"
+            >
+              \{{ item.{{lowercase reference.title}} }}
+            </router-link>
+
+            <p v-else>
+              \{{ item.{{lowercase reference.title}} }}
+            </p>
+            {{else if isEmbeddeds}}
+            <template v-if="router.hasRoute('{{embedded.title}}Show')">
+              <router-link
+                v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
+                :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
+                :key="{{lowercase embedded.title}}['@id']"
+              >
+                \{{ {{lowercase embedded.title}}["@id"] }}
+
+                <br />
+              </router-link>
+            </template>
+
+            <template v-else>
+              <p
+                v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
+                :key="{{lowercase embedded.title}}['@id']"
+              >
+                \{{ {{lowercase embedded.title}}["@id"] }}
+              </p>
+            </template>
+            {{else if embedded}}
+            <router-link
+              v-if="router.hasRoute('{{embedded.title}}Show')"
+              :to="{ name: '{{embedded.title}}Show', params: { id: item.{{lowercase embedded.title}}['@id'] } }"
+            >
+              \{{ item.{{lowercase embedded.title}}["@id"] }}
+            </router-link>
+
+            <p v-else>
+              \{{ item.{{lowercase embedded.title}}["@id"] }}
+            </p>
+            {{else if (compare type "==" "dateTime") }}
+            \{{ formatDateTime(item.{{name}}) }}
+            {{else}}
+            \{{ item.{{name}} }}
+            {{/if}}
+          </td>
+        </tr>
+        {{/each }}
+      </tbody>
+    </q-markup-table>
+  </div>
+
+  <Loading :showing="isLoading" />
+</template>
+
+<script lang="ts" setup>
+import Toolbar from 'src/components/common/ToolbarComponent.vue';
+import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
+import Loading from 'src/components/common/LoadingComponent.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
+import { storeToRefs } from 'pinia';
+import { formatDateTime } from 'src/utils/dates';
+import { onBeforeUnmount } from 'vue';
+import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
+import { useBreadcrumb } from 'src/composables/breadcrumb';
+import { useWatchErrors } from 'src/composables/errors';
+import { useMercureItem } from 'src/composables/mercureItem';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const breadcrumb = useBreadcrumb();
+
+const {{lc}}ShowStore = use{{titleUcFirst}}ShowStore();
+const { retrieved: item, isLoading, error } = storeToRefs({{lc}}ShowStore);
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { deleted, error: deleteError } = storeToRefs({{lc}}DeleteStore);
+
+useMercureItem({
+  store: {{lc}}ShowStore,
+  deleteStore: {{lc}}DeleteStore,
+  redirectRouteName: '{{titleUcFirst}}List',
+});
+
+await {{lc}}ShowStore.retrieve(decodeURIComponent(route.params.id as string));
+
+async function deleteItem() {
+  if (!item?.value) {
+    {{lc}}DeleteStore.setError(t('This item does not exist anymore'));
+    return;
+  }
+
+  await {{lc}}DeleteStore.deleteItem(item.value);
+
+  if (!deleted?.value) {
+    return;
+  }
+
+  router.push({ name: '{{titleUcFirst}}List' });
+}
+
+useWatchErrors([error, deleteError]);
+
+onBeforeUnmount(() => {
+  {{lc}}ShowStore.$reset();
+});
+</script>
diff --git a/templates/quasar/components/foo/Update.vue b/templates/quasar/components/foo/Update.vue
deleted file mode 100644
index 4f04665b..00000000
--- a/templates/quasar/components/foo/Update.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div>
-    <Toolbar :handle-submit="onSendForm" :handle-reset="resetForm" :handle-delete="del">
-      <Breadcrumb :values="$route.meta.breadcrumb" :item="item" slot="left" />
-    </Toolbar>
-    <{{{titleUcFirst}}}Form
-      ref="updateForm"
-      v-if="item"
-      :values="item"
-      :errors="violations"
-      :handle-submit="onSendForm"
-    />
-    <Loading :showing="isLoading || deleteLoading" />
-  </div>
-</template>
-
-<script>
-import { update } from '../../utils/vuexer';
-import {{{titleUcFirst}}}Form from './Form.vue';
-import { Breadcrumb, Toolbar, Loading } from '../../common/components';
-import UpdateMixin from '../../common/mixins/UpdateMixin';
-const servicePrefix = '{{{titleUcFirst}}}';
-const { getters, actions } = update(servicePrefix);
-
-export default {
-  name: '{{{titleUcFirst}}}Update',
-  servicePrefix,
-  mixins: [UpdateMixin],
-  components: {
-    {{{titleUcFirst}}}Form,
-    Breadcrumb,
-    Toolbar,
-    Loading,
-  },
-
-  computed: getters,
-  methods: actions,
-};
-</script>
diff --git a/templates/quasar/components/foo/UpdateComponent.vue b/templates/quasar/components/foo/UpdateComponent.vue
new file mode 100644
index 00000000..05d65a97
--- /dev/null
+++ b/templates/quasar/components/foo/UpdateComponent.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <Toolbar :actions="['delete']" @delete="deleteItem">
+      <template #left>
+        <Breadcrumb :values="breadcrumb" :item="item" />
+      </template>
+    </Toolbar>
+
+    <{{titleUcFirst}}Form
+      v-if="item"
+      :values="item"
+      :errors="violations"
+      @submit="submitForm"
+    />
+
+    <Loading :showing="isLoading || deleteLoading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Toolbar from 'components/common/ToolbarComponent.vue';
+import Breadcrumb from 'components/common/BreadcrumbComponent.vue';
+import Loading from 'components/common/LoadingComponent.vue';
+import {{titleUcFirst}}Form from 'components/{{lc}}/FormComponent.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { use{{titleUcFirst}}UpdateStore } from 'src/stores/{{lc}}/update';
+import { storeToRefs } from 'pinia';
+import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
+import { onBeforeUnmount } from 'vue';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { displaySuccessNotification } from 'src/utils/notifications';
+import { useI18n } from 'vue-i18n';
+import { useBreadcrumb } from 'src/composables/breadcrumb';
+import { useWatchErrors } from 'src/composables/errors';
+import { useMercureItem } from 'src/composables/mercureItem';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const breadcrumb = useBreadcrumb();
+
+const {{lc}}UpdateStore = use{{titleUcFirst}}UpdateStore();
+const {
+  retrieved: item,
+  updated,
+  isLoading,
+  error,
+  violations,
+} = storeToRefs({{lc}}UpdateStore);
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { isLoading: deleteLoading, error: deleteError } =
+  storeToRefs({{lc}}DeleteStore);
+
+useMercureItem({
+  store: {{lc}}UpdateStore,
+  deleteStore: {{lc}}DeleteStore,
+  redirectRouteName: '{{titleUcFirst}}List',
+});
+
+await {{lc}}UpdateStore.retrieve(decodeURIComponent(route.params.id as string));
+
+async function deleteItem() {
+  if (!item?.value) {
+    {{lc}}UpdateStore.setError('No {{lc}} found. Please reload');
+    return;
+  }
+
+  await {{lc}}DeleteStore.deleteItem(item?.value);
+
+  router.push({ name: '{{titleUcFirst}}List' });
+}
+
+async function submitForm(item: {{titleUcFirst}}) {
+  await {{lc}}UpdateStore.update(item);
+
+  if (!updated?.value) {
+    return;
+  }
+
+  displaySuccessNotification(`${item['@id']} ${t('updated')}.`, t('close'));
+}
+
+useWatchErrors([error, deleteError]);
+
+onBeforeUnmount(() => {
+  {{lc}}UpdateStore.$reset();
+  {{lc}}DeleteStore.$reset();
+});
+</script>

From faebb25e9c554f9a99d2f6f9628e227a9c8eb7a7 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 09:59:05 +0100
Subject: [PATCH 02/84] Update store

---
 .../quasar/common/store/create/actions.js     |  36 ------
 .../quasar/common/store/create/getters.js     |   4 -
 .../common/store/create/mutation_types.js     |   5 -
 .../quasar/common/store/create/mutations.js   |  21 ----
 templates/quasar/common/store/create/state.js |   6 -
 .../quasar/common/store/delete/actions.js     |  19 ---
 .../quasar/common/store/delete/getters.js     |   3 -
 .../common/store/delete/mutation_types.js     |   5 -
 .../quasar/common/store/delete/mutations.js   |  17 ---
 templates/quasar/common/store/delete/state.js |   5 -
 templates/quasar/common/store/list/actions.js |  39 ------
 templates/quasar/common/store/list/getters.js |   7 --
 .../common/store/list/mutation_types.js       |  14 ---
 .../quasar/common/store/list/mutations.js     |  33 -----
 templates/quasar/common/store/list/state.js   |   9 --
 .../quasar/common/store/mutation_types.js     |   5 -
 templates/quasar/common/store/show/actions.js |  20 ---
 templates/quasar/common/store/show/getters.js |   3 -
 .../common/store/show/mutation_types.js       |   5 -
 .../quasar/common/store/show/mutations.js     |  17 ---
 templates/quasar/common/store/show/state.js   |   5 -
 .../quasar/common/store/update/actions.js     |  54 ---------
 .../quasar/common/store/update/getters.js     |   5 -
 .../common/store/update/mutation_types.js     |  12 --
 .../quasar/common/store/update/mutations.js   |  25 ----
 templates/quasar/common/store/update/state.js |   7 --
 templates/quasar/stores/foo/create.ts         |  64 ++++++++++
 templates/quasar/stores/foo/delete.ts         |  53 ++++++++
 templates/quasar/stores/foo/list.ts           |  96 +++++++++++++++
 templates/quasar/stores/foo/show.ts           |  62 ++++++++++
 templates/quasar/stores/foo/update.ts         | 114 ++++++++++++++++++
 31 files changed, 389 insertions(+), 381 deletions(-)
 delete mode 100644 templates/quasar/common/store/create/actions.js
 delete mode 100644 templates/quasar/common/store/create/getters.js
 delete mode 100644 templates/quasar/common/store/create/mutation_types.js
 delete mode 100644 templates/quasar/common/store/create/mutations.js
 delete mode 100644 templates/quasar/common/store/create/state.js
 delete mode 100644 templates/quasar/common/store/delete/actions.js
 delete mode 100644 templates/quasar/common/store/delete/getters.js
 delete mode 100644 templates/quasar/common/store/delete/mutation_types.js
 delete mode 100644 templates/quasar/common/store/delete/mutations.js
 delete mode 100644 templates/quasar/common/store/delete/state.js
 delete mode 100644 templates/quasar/common/store/list/actions.js
 delete mode 100644 templates/quasar/common/store/list/getters.js
 delete mode 100644 templates/quasar/common/store/list/mutation_types.js
 delete mode 100644 templates/quasar/common/store/list/mutations.js
 delete mode 100644 templates/quasar/common/store/list/state.js
 delete mode 100644 templates/quasar/common/store/mutation_types.js
 delete mode 100644 templates/quasar/common/store/show/actions.js
 delete mode 100644 templates/quasar/common/store/show/getters.js
 delete mode 100644 templates/quasar/common/store/show/mutation_types.js
 delete mode 100644 templates/quasar/common/store/show/mutations.js
 delete mode 100644 templates/quasar/common/store/show/state.js
 delete mode 100644 templates/quasar/common/store/update/actions.js
 delete mode 100644 templates/quasar/common/store/update/getters.js
 delete mode 100644 templates/quasar/common/store/update/mutation_types.js
 delete mode 100644 templates/quasar/common/store/update/mutations.js
 delete mode 100644 templates/quasar/common/store/update/state.js
 create mode 100644 templates/quasar/stores/foo/create.ts
 create mode 100644 templates/quasar/stores/foo/delete.ts
 create mode 100644 templates/quasar/stores/foo/list.ts
 create mode 100644 templates/quasar/stores/foo/show.ts
 create mode 100644 templates/quasar/stores/foo/update.ts

diff --git a/templates/quasar/common/store/create/actions.js b/templates/quasar/common/store/create/actions.js
deleted file mode 100644
index c5a6543a..00000000
--- a/templates/quasar/common/store/create/actions.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import SubmissionError from '../../../error/SubmissionError';
-import fetch from '../../../utils/fetch';
-
-export const createCommon = ({ commit }, { page, ep, values }, { types }) => {
-  commit(types.SET_ERROR, '');
-  commit(types.TOGGLE_LOADING);
-
-  return fetch(
-    { id: page, ep },
-    { method: 'POST', body: JSON.stringify(values) }
-  )
-    .then(response => {
-      commit(types.TOGGLE_LOADING);
-
-      return response.json();
-    })
-    .then(data => {
-      commit(types.SET_CREATED, data);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-
-      if (e instanceof SubmissionError) {
-        commit(types.SET_VIOLATIONS, e.errors);
-        // eslint-disable-next-line
-        commit(types.SET_ERROR, e.errors._error);
-        return;
-      }
-
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const resetCommon = ({ commit }, { types }) => {
-  commit(types.RESET);
-};
diff --git a/templates/quasar/common/store/create/getters.js b/templates/quasar/common/store/create/getters.js
deleted file mode 100644
index df466e80..00000000
--- a/templates/quasar/common/store/create/getters.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const created = state => state.created;
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
-export const violations = state => state.violations;
diff --git a/templates/quasar/common/store/create/mutation_types.js b/templates/quasar/common/store/create/mutation_types.js
deleted file mode 100644
index 4b80d5b9..00000000
--- a/templates/quasar/common/store/create/mutation_types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = ['RESET', 'SET_CREATED', 'SET_ERROR', 'SET_VIOLATIONS', 'TOGGLE_LOADING'];
-
-export default m => mutationTypes(m, 'CREATE', types);
diff --git a/templates/quasar/common/store/create/mutations.js b/templates/quasar/common/store/create/mutations.js
deleted file mode 100644
index 15c2aaca..00000000
--- a/templates/quasar/common/store/create/mutations.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export default (initState, types) => ({
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.SET_CREATED](state, created) {
-    Object.assign(state, { created });
-  },
-
-  [types.SET_VIOLATIONS](state, violations) {
-    Object.assign(state, { violations });
-  },
-
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-});
diff --git a/templates/quasar/common/store/create/state.js b/templates/quasar/common/store/create/state.js
deleted file mode 100644
index 558b8d1f..00000000
--- a/templates/quasar/common/store/create/state.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default () => ({
-  isLoading: false,
-  error: '',
-  created: null,
-  violations: null,
-});
diff --git a/templates/quasar/common/store/delete/actions.js b/templates/quasar/common/store/delete/actions.js
deleted file mode 100644
index 22eb84d2..00000000
--- a/templates/quasar/common/store/delete/actions.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import fetch from '../../../utils/fetch';
-
-export const delCommon = ({ commit }, { item, ep }, { types }) => {
-  commit(types.TOGGLE_LOADING);
-
-  return fetch({ id: item['@id'], ep }, { method: 'DELETE' })
-    .then(() => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_DELETED, item);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const resetCommon = ({ commit }, { types }) => {
-  commit(types.RESET);
-};
diff --git a/templates/quasar/common/store/delete/getters.js b/templates/quasar/common/store/delete/getters.js
deleted file mode 100644
index 5d0feed2..00000000
--- a/templates/quasar/common/store/delete/getters.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const deleted = state => state.deleted;
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
diff --git a/templates/quasar/common/store/delete/mutation_types.js b/templates/quasar/common/store/delete/mutation_types.js
deleted file mode 100644
index e12dd9e3..00000000
--- a/templates/quasar/common/store/delete/mutation_types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = ['RESET', 'SET_ERROR', 'SET_DELETED', 'TOGGLE_LOADING'];
-
-export default m => mutationTypes(m, 'DELETE', types);
diff --git a/templates/quasar/common/store/delete/mutations.js b/templates/quasar/common/store/delete/mutations.js
deleted file mode 100644
index 1e1fd8fc..00000000
--- a/templates/quasar/common/store/delete/mutations.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default (initState, types) => ({
-  [types.SET_DELETED](state, deleted) {
-    Object.assign(state, { deleted });
-  },
-
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-});
diff --git a/templates/quasar/common/store/delete/state.js b/templates/quasar/common/store/delete/state.js
deleted file mode 100644
index 1499de79..00000000
--- a/templates/quasar/common/store/delete/state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default () => ({
-  isLoading: false,
-  error: '',
-  deleted: null,
-});
diff --git a/templates/quasar/common/store/list/actions.js b/templates/quasar/common/store/list/actions.js
deleted file mode 100644
index 76b03c6f..00000000
--- a/templates/quasar/common/store/list/actions.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import fetch from '../../../utils/fetch';
-
-export const getItemsCommon = (
-  { commit },
-  { page, ep, params },
-  { types, hydraPrefix }
-) => {
-  commit(types.TOGGLE_LOADING);
-  return fetch({ id: page, ep }, { params })
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ITEMS, data[`${hydraPrefix}member`]);
-      commit(types.SET_VIEW, data[`${hydraPrefix}view`]);
-      commit(types.SET_TOTALITEMS, data[`${hydraPrefix}totalItems`]);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const getSelectItemsCommon = (
-  { commit },
-  { page, ep, params },
-  { types, hydraPrefix }
-) => {
-  commit(types.TOGGLE_LOADING);
-  return fetch({ id: page, ep }, { params })
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_SELECT_ITEMS, data[`${hydraPrefix}member`]);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
diff --git a/templates/quasar/common/store/list/getters.js b/templates/quasar/common/store/list/getters.js
deleted file mode 100644
index 5bdb4d7a..00000000
--- a/templates/quasar/common/store/list/getters.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
-export const items = state => state.items;
-export const selectItems = state => state.selectItems;
-export const selectItemsTemplate = state => state.selectItemsTemplate;
-export const view = state => state.view;
-export const totalItems = state => state.totalItems;
diff --git a/templates/quasar/common/store/list/mutation_types.js b/templates/quasar/common/store/list/mutation_types.js
deleted file mode 100644
index a375a54d..00000000
--- a/templates/quasar/common/store/list/mutation_types.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = [
-  'RESET',
-  'SET_ITEMS',
-  'SET_SELECT_ITEMS',
-  'SET_SELECT_ITEMS_TEMPLATE',
-  'SET_ERROR',
-  'SET_VIEW',
-  'TOGGLE_LOADING',
-  'SET_TOTALITEMS',
-];
-
-export default m => mutationTypes(m, 'LIST', types);
diff --git a/templates/quasar/common/store/list/mutations.js b/templates/quasar/common/store/list/mutations.js
deleted file mode 100644
index 24541874..00000000
--- a/templates/quasar/common/store/list/mutations.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export default (initState, types) => ({
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.SET_ITEMS](state, items) {
-    Object.assign(state, { items });
-  },
-
-  [types.SET_SELECT_ITEMS](state, selectItems) {
-    Object.assign(state, { selectItems });
-  },
-
-  [types.SET_SELECT_ITEMS_TEMPLATE](state, selectItemsTemplate) {
-    Object.assign(state, { selectItemsTemplate });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.SET_VIEW](state, view) {
-    Object.assign(state, { view });
-  },
-
-  [types.SET_TOTALITEMS](state, totalItems) {
-    Object.assign(state, { totalItems });
-  },
-});
diff --git a/templates/quasar/common/store/list/state.js b/templates/quasar/common/store/list/state.js
deleted file mode 100644
index 7148e84d..00000000
--- a/templates/quasar/common/store/list/state.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default () => ({
-  error: '',
-  isLoading: false,
-  items: [],
-  view: [],
-  totalItems: 10,
-  selectItems: null,
-  selectItemsTemplate: '',
-});
diff --git a/templates/quasar/common/store/mutation_types.js b/templates/quasar/common/store/mutation_types.js
deleted file mode 100644
index 2f9352df..00000000
--- a/templates/quasar/common/store/mutation_types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const mutationTypes = (m, area, todoTypes) => {
-  let types = {};
-  todoTypes.forEach(item => (types[`${item}`] = `${m}_${area}_${item}`));
-  return types;
-};
diff --git a/templates/quasar/common/store/show/actions.js b/templates/quasar/common/store/show/actions.js
deleted file mode 100644
index f64224a9..00000000
--- a/templates/quasar/common/store/show/actions.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import fetch from '../../../utils/fetch';
-
-export const retrieveCommon = ({ commit }, id, { types }) => {
-  commit(types.TOGGLE_LOADING);
-
-  return fetch(id)
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_RETRIEVED, data);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const resetCommon = ({ commit }, { types }) => {
-  commit(types.RESET);
-};
diff --git a/templates/quasar/common/store/show/getters.js b/templates/quasar/common/store/show/getters.js
deleted file mode 100644
index 5c5ac951..00000000
--- a/templates/quasar/common/store/show/getters.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
-export const retrieved = state => state.retrieved;
diff --git a/templates/quasar/common/store/show/mutation_types.js b/templates/quasar/common/store/show/mutation_types.js
deleted file mode 100644
index a1e5d706..00000000
--- a/templates/quasar/common/store/show/mutation_types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = ['RESET', 'SET_ERROR', 'SET_RETRIEVED', 'TOGGLE_LOADING'];
-
-export default m => mutationTypes(m, 'SHOW', types);
diff --git a/templates/quasar/common/store/show/mutations.js b/templates/quasar/common/store/show/mutations.js
deleted file mode 100644
index 69fcdc94..00000000
--- a/templates/quasar/common/store/show/mutations.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default (initState, types) => ({
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.SET_RETRIEVED](state, retrieved) {
-    Object.assign(state, { retrieved });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-});
diff --git a/templates/quasar/common/store/show/state.js b/templates/quasar/common/store/show/state.js
deleted file mode 100644
index 3560e8fd..00000000
--- a/templates/quasar/common/store/show/state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default () => ({
-  error: '',
-  isLoading: false,
-  retrieved: null,
-});
diff --git a/templates/quasar/common/store/update/actions.js b/templates/quasar/common/store/update/actions.js
deleted file mode 100644
index 25ed1a54..00000000
--- a/templates/quasar/common/store/update/actions.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import SubmissionError from '../../../error/SubmissionError';
-import fetch from '../../../utils/fetch';
-
-export const resetCommon = ({ commit }, { types }) => {
-  commit(types.RESET);
-};
-
-export const retrieveCommon = ({ commit }, dest, { types }) => {
-  commit(types.TOGGLE_LOADING);
-
-  return fetch(dest)
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_RETRIEVED, data);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const updateCommon = ({ commit, state }, { values, ep }, { types }) => {
-  commit(types.SET_ERROR, '');
-  commit(types.TOGGLE_LOADING);
-
-  return fetch(
-    { id: (state.retrieved && state.retrieved['@id']) || values['@id'], ep },
-    {
-      method: 'PUT',
-      headers: new Headers({ 'Content-Type': 'application/ld+json' }),
-      body: JSON.stringify(values),
-    }
-  )
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_UPDATED, data);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-
-      if (e instanceof SubmissionError) {
-        commit(types.SET_VIOLATIONS, e.errors);
-        // eslint-disable-next-line
-        commit(types.SET_ERROR, e.errors._error);
-
-        return;
-      }
-
-      // eslint-disable-next-line
-      commit(types.SET_ERROR, e.message);
-    });
-};
diff --git a/templates/quasar/common/store/update/getters.js b/templates/quasar/common/store/update/getters.js
deleted file mode 100644
index 80690026..00000000
--- a/templates/quasar/common/store/update/getters.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
-export const retrieved = state => state.retrieved;
-export const updated = state => state.updated;
-export const violations = state => state.violations;
diff --git a/templates/quasar/common/store/update/mutation_types.js b/templates/quasar/common/store/update/mutation_types.js
deleted file mode 100644
index ec0244c1..00000000
--- a/templates/quasar/common/store/update/mutation_types.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = [
-  'RESET',
-  'SET_ERROR',
-  'SET_RETRIEVED',
-  'SET_UPDATED',
-  'SET_VIOLATIONS',
-  'TOGGLE_LOADING',
-];
-
-export default m => mutationTypes(m, 'UPDATE', types);
diff --git a/templates/quasar/common/store/update/mutations.js b/templates/quasar/common/store/update/mutations.js
deleted file mode 100644
index 42eab2fe..00000000
--- a/templates/quasar/common/store/update/mutations.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export default (initState, types) => ({
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.SET_RETRIEVED](state, retrieved) {
-    Object.assign(state, { retrieved });
-  },
-
-  [types.SET_UPDATED](state, updated) {
-    Object.assign(state, { error: '', updated, violations: null });
-  },
-
-  [types.SET_VIOLATIONS](state, violations) {
-    Object.assign(state, { violations });
-  },
-});
diff --git a/templates/quasar/common/store/update/state.js b/templates/quasar/common/store/update/state.js
deleted file mode 100644
index 718ce69c..00000000
--- a/templates/quasar/common/store/update/state.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default () => ({
-  error: '',
-  isLoading: false,
-  retrieved: null,
-  updated: null,
-  violations: null,
-});
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
new file mode 100644
index 00000000..cb50bffd
--- /dev/null
+++ b/templates/quasar/stores/foo/create.ts
@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { SubmissionError, type SubmissionErrors } from 'src/types/error';
+import fetch from 'src/utils/fetch';
+
+interface State {
+  created?: {{titleUcFirst}};
+  isLoading: boolean;
+  error?: string;
+  violations?: SubmissionErrors;
+}
+
+export const use{{titleUcFirst}}CreateStore = defineStore('{{lc}}Create', {
+  state: (): State => ({
+    created: undefined,
+    isLoading: false,
+    error: undefined,
+    violations: undefined,
+  }),
+
+  actions: {
+    create(values: {{titleUcFirst}}) {
+      this.setError(undefined);
+      this.setViolations(undefined);
+      this.toggleLoading();
+
+      return fetch('{{lc}}s', { method: 'POST', body: JSON.stringify(values) })
+        .then((response: Response) => {
+          this.toggleLoading();
+
+          return response.json();
+        })
+        .then((data) => {
+          this.setCreated(data);
+        })
+        .catch((e: Error | SubmissionError) => {
+          this.toggleLoading();
+
+          if (e instanceof SubmissionError) {
+            this.setViolations(e.errors);
+            return;
+          }
+
+          this.setError(e.message);
+        });
+    },
+
+    setCreated(created: {{titleUcFirst}}) {
+      this.created = created;
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setError(error: string | undefined) {
+      this.error = error;
+    },
+
+    setViolations(violations: SubmissionErrors | undefined) {
+      this.violations = violations;
+    },
+  },
+});
diff --git a/templates/quasar/stores/foo/delete.ts b/templates/quasar/stores/foo/delete.ts
new file mode 100644
index 00000000..294c88fc
--- /dev/null
+++ b/templates/quasar/stores/foo/delete.ts
@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import fetch from 'src/utils/fetch';
+
+interface State {
+  deleted?: {{titleUcFirst}};
+  mercureDeleted?: {{titleUcFirst}};
+  isLoading: boolean;
+  error?: string;
+}
+
+export const use{{titleUcFirst}}DeleteStore = defineStore('{{lc}}Delete', {
+  state: (): State => ({
+    deleted: undefined,
+    mercureDeleted: undefined,
+    isLoading: false,
+    error: undefined,
+  }),
+
+  actions: {
+    deleteItem(item: {{titleUcFirst}}) {
+      this.toggleLoading();
+
+      return fetch(item['@id'] ?? '', { method: 'DELETE' })
+        .then(() => {
+          this.setError('');
+          this.toggleLoading();
+          this.setDeleted(item);
+          this.setMercureDeleted(undefined);
+        })
+        .catch((e: Error) => {
+          this.toggleLoading();
+          this.setError(e.message);
+        });
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setDeleted(deleted: {{titleUcFirst}}) {
+      this.deleted = deleted;
+    },
+
+    setMercureDeleted(mercureDeleted?: {{titleUcFirst}}) {
+      this.mercureDeleted = mercureDeleted;
+    },
+
+    setError(error: string) {
+      this.error = error;
+    },
+  },
+});
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
new file mode 100644
index 00000000..cb2db9fe
--- /dev/null
+++ b/templates/quasar/stores/foo/list.ts
@@ -0,0 +1,96 @@
+import { defineStore } from 'pinia';
+import fetch from 'src/utils/fetch';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { View } from 'src/types/view';
+import { extractHubURL } from 'src/utils/mercure';
+import type { PagedCollection } from 'src/types/collection';
+
+interface State {
+  items: {{titleUcFirst}}[];
+  totalItems: number;
+  hubUrl?: URL;
+  isLoading: boolean;
+  view?: View;
+  error?: string;
+}
+
+export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
+  state: (): State => ({
+    items: [],
+    totalItems: 0,
+    hubUrl: undefined,
+    isLoading: false,
+    view: undefined,
+    error: undefined,
+  }),
+
+  actions: {
+    getItems(params: any) {
+      this.toggleLoading();
+
+      return fetch('{{lc}}s', { params })
+        .then((response: Response) =>
+          response.json().then((data: PagedCollection<{{titleUcFirst}}>) => ({
+            data,
+            hubUrl: extractHubURL(response),
+          }))
+        )
+        .then(
+          ({ data, hubUrl }: { data: PagedCollection<{{titleUcFirst}}>; hubUrl?: URL }) => {
+            this.toggleLoading();
+            this.setItems(data['hydra:member']);
+            this.setTotalItems(data['hydra:totalItems'] ?? 0);
+            this.setView(data['hydra:view']);
+
+            if (hubUrl) {
+              this.setHubUrl(hubUrl);
+            }
+          }
+        )
+        .catch((e: Error) => {
+          this.toggleLoading();
+          this.setError(e.message);
+        });
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setItems(items: {{titleUcFirst}}[]) {
+      this.items = items;
+    },
+
+    setTotalItems(totalItems: number) {
+      this.totalItems = totalItems;
+    },
+
+    setHubUrl(hubUrl: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    setView(view: View) {
+      this.view = view;
+    },
+
+    setError(error: string) {
+      this.error = error;
+    },
+
+    updateItem(updatedItem: {{titleUcFirst}}) {
+      const item: {{titleUcFirst}} | undefined = this.items.find(
+        (i) => i['@id'] === updatedItem['@id']
+      );
+
+      if (!item) return;
+
+      Object.assign(item, updatedItem);
+    },
+
+    deleteItem(deletedItem: {{titleUcFirst}}) {
+      this.items = this.items.filter((item) => {
+        return item['@id'] !== deletedItem['@id'];
+      });
+    },
+  },
+});
diff --git a/templates/quasar/stores/foo/show.ts b/templates/quasar/stores/foo/show.ts
new file mode 100644
index 00000000..4d3aa762
--- /dev/null
+++ b/templates/quasar/stores/foo/show.ts
@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import fetch from 'src/utils/fetch';
+import { extractHubURL } from 'src/utils/mercure';
+
+interface State {
+  retrieved?: {{titleUcFirst}};
+  hubUrl?: URL;
+  isLoading: boolean;
+  error?: string;
+}
+
+export const use{{titleUcFirst}}ShowStore = defineStore('{{lc}}Show', {
+  state: (): State => ({
+    retrieved: undefined,
+    hubUrl: undefined,
+    isLoading: false,
+    error: undefined,
+  }),
+
+  actions: {
+    retrieve(id: string) {
+      this.toggleLoading();
+
+      return fetch(id)
+        .then((response: Response) =>
+          response.json().then((data: {{titleUcFirst}}) => ({
+            data,
+            hubUrl: extractHubURL(response),
+          }))
+        )
+        .then(({ data, hubUrl }: { data: {{titleUcFirst}}; hubUrl?: URL }) => {
+          this.toggleLoading();
+          this.setRetrieved(data);
+
+          if (hubUrl) {
+            this.setHubUrl(hubUrl);
+          }
+        })
+        .catch((e: Error) => {
+          this.toggleLoading();
+          this.setError(e.message);
+        });
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setRetrieved(retrieved: {{titleUcFirst}}) {
+      this.retrieved = retrieved;
+    },
+
+    setHubUrl(hubUrl: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    setError(error: string) {
+      this.error = error;
+    },
+  },
+});
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
new file mode 100644
index 00000000..bfc7004f
--- /dev/null
+++ b/templates/quasar/stores/foo/update.ts
@@ -0,0 +1,114 @@
+import { defineStore } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { SubmissionError, SubmissionErrors } from 'src/types/error';
+import fetch from 'src/utils/fetch';
+import { extractHubURL } from 'src/utils/mercure';
+
+interface State {
+  retrieved?: {{titleUcFirst}};
+  updated?: {{titleUcFirst}};
+  hubUrl?: URL;
+  isLoading: boolean;
+  error?: string;
+  violations?: SubmissionErrors;
+}
+
+export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
+  state: (): State => ({
+    retrieved: undefined,
+    updated: undefined,
+    hubUrl: undefined,
+    isLoading: false,
+    error: undefined,
+    violations: undefined,
+  }),
+
+  actions: {
+    retrieve(id: string) {
+      this.toggleLoading();
+
+      return fetch(id)
+        .then((response: Response) =>
+          response.json().then((data: {{titleUcFirst}}) => ({
+            data,
+            hubUrl: extractHubURL(response),
+          }))
+        )
+        .then(({ data, hubUrl }: { data: {{titleUcFirst}}; hubUrl?: URL }) => {
+          this.setError('');
+          this.toggleLoading();
+          this.setRetrieved(data);
+
+          if (hubUrl) {
+            this.setHubUrl(hubUrl);
+          }
+        })
+        .catch((e: Error) => {
+          this.toggleLoading();
+          this.setError(e.message);
+        });
+    },
+
+    update(values: {{titleUcFirst}}) {
+      this.setError(undefined);
+      this.toggleLoading();
+
+      if (!this.retrieved) {
+        this.setError('No {{lc}} found. Please reload');
+        return;
+      }
+
+      return fetch(this.retrieved['@id'] ?? values['@id'] ?? '', {
+        method: 'PUT',
+        headers: new Headers({ 'Content-Type': 'application/ld+json' }),
+        body: JSON.stringify(values),
+      })
+        .then((response: Response) => response.json())
+        .then((data: {{titleUcFirst}}) => {
+          this.toggleLoading();
+          this.resetErrors();
+          this.setUpdated(data);
+        })
+        .catch((e: Error) => {
+          this.toggleLoading();
+
+          if (e instanceof SubmissionError) {
+            this.setViolations(e.errors);
+            this.setError(e.errors._error);
+            return;
+          }
+
+          this.setError(e.message);
+        });
+    },
+
+    setRetrieved(retrieved: {{titleUcFirst}}) {
+      this.retrieved = retrieved;
+    },
+
+    setUpdated(updated: {{titleUcFirst}}) {
+      this.updated = updated;
+    },
+
+    setHubUrl(hubUrl: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setError(error?: string) {
+      this.error = error;
+    },
+
+    setViolations(violations?: SubmissionErrors) {
+      this.violations = violations;
+    },
+
+    resetErrors() {
+      this.setError(undefined);
+      this.setViolations(undefined);
+    },
+  },
+});

From 820c82315e51a93efc5a86d4cfbbf76c48836e45 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 09:59:28 +0100
Subject: [PATCH 03/84] Add pages

---
 templates/quasar/pages/foo/CreatePage.vue | 11 +++++++++++
 templates/quasar/pages/foo/ListPage.vue   | 11 +++++++++++
 templates/quasar/pages/foo/ShowPage.vue   | 11 +++++++++++
 templates/quasar/pages/foo/UpdatePage.vue | 11 +++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 templates/quasar/pages/foo/CreatePage.vue
 create mode 100644 templates/quasar/pages/foo/ListPage.vue
 create mode 100644 templates/quasar/pages/foo/ShowPage.vue
 create mode 100644 templates/quasar/pages/foo/UpdatePage.vue

diff --git a/templates/quasar/pages/foo/CreatePage.vue b/templates/quasar/pages/foo/CreatePage.vue
new file mode 100644
index 00000000..e7f7ab94
--- /dev/null
+++ b/templates/quasar/pages/foo/CreatePage.vue
@@ -0,0 +1,11 @@
+<template>
+  <Suspense>
+    <{{titleUcFirst}}Create />
+
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import {{titleUcFirst}}Create from 'components/{{lc}}/CreateComponent.vue';
+</script>
diff --git a/templates/quasar/pages/foo/ListPage.vue b/templates/quasar/pages/foo/ListPage.vue
new file mode 100644
index 00000000..b8d4c87a
--- /dev/null
+++ b/templates/quasar/pages/foo/ListPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <Suspense>
+    <{{titleUcFirst}}List />
+
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import {{titleUcFirst}}List from 'components/{{lc}}/ListComponent.vue';
+</script>
diff --git a/templates/quasar/pages/foo/ShowPage.vue b/templates/quasar/pages/foo/ShowPage.vue
new file mode 100644
index 00000000..dcf12270
--- /dev/null
+++ b/templates/quasar/pages/foo/ShowPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <Suspense>
+    <{{titleUcFirst}}Show />
+
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import {{titleUcFirst}}Show from 'components/{{lc}}/ShowComponent.vue';
+</script>
diff --git a/templates/quasar/pages/foo/UpdatePage.vue b/templates/quasar/pages/foo/UpdatePage.vue
new file mode 100644
index 00000000..98b3ce69
--- /dev/null
+++ b/templates/quasar/pages/foo/UpdatePage.vue
@@ -0,0 +1,11 @@
+<template>
+  <Suspense>
+    <{{titleUcFirst}}Update />
+
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import {{titleUcFirst}}Update from 'components/{{lc}}/UpdateComponent.vue';
+</script>

From cd478d240e1941b7f87b9d3800fe2e4abeb01878 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:01:47 +0100
Subject: [PATCH 04/84] Remove legacy store

---
 .../store/modules/foo/create/actions.js       | 13 ----------
 .../store/modules/foo/create/getters.js       |  1 -
 .../quasar/store/modules/foo/create/index.js  | 13 ----------
 .../modules/foo/create/mutation_types.js      |  2 --
 .../store/modules/foo/create/mutations.js     |  1 -
 .../quasar/store/modules/foo/create/state.js  |  2 --
 .../store/modules/foo/delete/actions.js       | 11 --------
 .../store/modules/foo/delete/getters.js       |  1 -
 .../quasar/store/modules/foo/delete/index.js  | 13 ----------
 .../modules/foo/delete/mutation_types.js      |  2 --
 .../store/modules/foo/delete/mutations.js     |  1 -
 .../quasar/store/modules/foo/delete/state.js  |  2 --
 templates/quasar/store/modules/foo/index.js   | 16 ------------
 .../quasar/store/modules/foo/list/actions.js  | 26 -------------------
 .../quasar/store/modules/foo/list/getters.js  |  1 -
 .../quasar/store/modules/foo/list/index.js    | 13 ----------
 .../store/modules/foo/list/mutation_types.js  |  2 --
 .../store/modules/foo/list/mutations.js       |  1 -
 .../quasar/store/modules/foo/list/state.js    |  2 --
 .../quasar/store/modules/foo/show/actions.js  | 12 ---------
 .../quasar/store/modules/foo/show/getters.js  |  1 -
 .../quasar/store/modules/foo/show/index.js    | 13 ----------
 .../store/modules/foo/show/mutation_types.js  |  2 --
 .../store/modules/foo/show/mutations.js       |  1 -
 .../quasar/store/modules/foo/show/state.js    |  2 --
 .../store/modules/foo/update/actions.js       | 15 -----------
 .../store/modules/foo/update/getters.js       |  1 -
 .../quasar/store/modules/foo/update/index.js  | 13 ----------
 .../modules/foo/update/mutation_types.js      |  2 --
 .../store/modules/foo/update/mutations.js     |  1 -
 .../quasar/store/modules/foo/update/state.js  |  2 --
 31 files changed, 188 deletions(-)
 delete mode 100644 templates/quasar/store/modules/foo/create/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/create/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/create/index.js
 delete mode 100644 templates/quasar/store/modules/foo/create/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/create/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/create/state.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/index.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/state.js
 delete mode 100644 templates/quasar/store/modules/foo/index.js
 delete mode 100644 templates/quasar/store/modules/foo/list/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/list/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/list/index.js
 delete mode 100644 templates/quasar/store/modules/foo/list/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/list/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/list/state.js
 delete mode 100644 templates/quasar/store/modules/foo/show/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/show/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/show/index.js
 delete mode 100644 templates/quasar/store/modules/foo/show/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/show/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/show/state.js
 delete mode 100644 templates/quasar/store/modules/foo/update/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/update/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/update/index.js
 delete mode 100644 templates/quasar/store/modules/foo/update/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/update/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/update/state.js

diff --git a/templates/quasar/store/modules/foo/create/actions.js b/templates/quasar/store/modules/foo/create/actions.js
deleted file mode 100644
index 22b767d6..00000000
--- a/templates/quasar/store/modules/foo/create/actions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createCommon, resetCommon } from '../../../../common/store/create/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-const page = '{{{name}}}';
-
-export default function(types) {
-  const create = (context, values) =>
-    createCommon(context, { page, values, ep: ENTRYPOINT }, { types });
-
-  const reset = context => resetCommon(context, { types });
-
-  return { create, reset };
-}
diff --git a/templates/quasar/store/modules/foo/create/getters.js b/templates/quasar/store/modules/foo/create/getters.js
deleted file mode 100644
index 5580e943..00000000
--- a/templates/quasar/store/modules/foo/create/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/create/getters";
diff --git a/templates/quasar/store/modules/foo/create/index.js b/templates/quasar/store/modules/foo/create/index.js
deleted file mode 100644
index 70c23968..00000000
--- a/templates/quasar/store/modules/foo/create/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from './actions';
-import * as getters from './getters';
-import mutations from './mutations';
-import state from './state';
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/create/mutation_types.js b/templates/quasar/store/modules/foo/create/mutation_types.js
deleted file mode 100644
index 5154b1cd..00000000
--- a/templates/quasar/store/modules/foo/create/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/create/mutation_types';
-export default makeTypes('{{{uc}}}');
diff --git a/templates/quasar/store/modules/foo/create/mutations.js b/templates/quasar/store/modules/foo/create/mutations.js
deleted file mode 100644
index eeffa4c8..00000000
--- a/templates/quasar/store/modules/foo/create/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/create/mutations";
diff --git a/templates/quasar/store/modules/foo/create/state.js b/templates/quasar/store/modules/foo/create/state.js
deleted file mode 100644
index 3830ddc5..00000000
--- a/templates/quasar/store/modules/foo/create/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from '../../../../common/store/create/state';
-export default makeState();
diff --git a/templates/quasar/store/modules/foo/delete/actions.js b/templates/quasar/store/modules/foo/delete/actions.js
deleted file mode 100644
index 616a158c..00000000
--- a/templates/quasar/store/modules/foo/delete/actions.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { delCommon, resetCommon } from '../../../../common/store/delete/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-export default function(types) {
-  const del = (context, item) => delCommon(context, { item, ep: ENTRYPOINT }, { types });
-  const reset = context => {
-    resetCommon(context, { types });
-  };
-
-  return { del, reset };
-}
diff --git a/templates/quasar/store/modules/foo/delete/getters.js b/templates/quasar/store/modules/foo/delete/getters.js
deleted file mode 100644
index 85deab48..00000000
--- a/templates/quasar/store/modules/foo/delete/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/delete/getters";
diff --git a/templates/quasar/store/modules/foo/delete/index.js b/templates/quasar/store/modules/foo/delete/index.js
deleted file mode 100644
index 70c23968..00000000
--- a/templates/quasar/store/modules/foo/delete/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from './actions';
-import * as getters from './getters';
-import mutations from './mutations';
-import state from './state';
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/delete/mutation_types.js b/templates/quasar/store/modules/foo/delete/mutation_types.js
deleted file mode 100644
index 1079fc4c..00000000
--- a/templates/quasar/store/modules/foo/delete/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/delete/mutation_types';
-export default makeTypes("{{{uc}}}");
diff --git a/templates/quasar/store/modules/foo/delete/mutations.js b/templates/quasar/store/modules/foo/delete/mutations.js
deleted file mode 100644
index 6dda4cf5..00000000
--- a/templates/quasar/store/modules/foo/delete/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/delete/mutations";
diff --git a/templates/quasar/store/modules/foo/delete/state.js b/templates/quasar/store/modules/foo/delete/state.js
deleted file mode 100644
index f29a97a8..00000000
--- a/templates/quasar/store/modules/foo/delete/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from '../../../../common/store/delete/state';
-export default makeState();
diff --git a/templates/quasar/store/modules/foo/index.js b/templates/quasar/store/modules/foo/index.js
deleted file mode 100644
index c76b015f..00000000
--- a/templates/quasar/store/modules/foo/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import list from './list';
-import create from './create';
-import update from './update';
-import show from './show';
-import del from './delete';
-
-export default {
-  namespaced: true,
-  modules: {
-    list,
-    create,
-    update,
-    show,
-    del,
-  },
-};
diff --git a/templates/quasar/store/modules/foo/list/actions.js b/templates/quasar/store/modules/foo/list/actions.js
deleted file mode 100644
index fc05ffc0..00000000
--- a/templates/quasar/store/modules/foo/list/actions.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  getItemsCommon,
-  getSelectItemsCommon
-} from '../../../../common/store/list/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-const hydraPrefix = '{{{hydraPrefix}}}';
-const page = '{{{name}}}';
-
-export default function(types) {
-  const getItems = (context, options) =>
-    getItemsCommon(
-      context,
-      { ...{ page, ep: ENTRYPOINT, params: {} }, ...options },
-      { types, hydraPrefix },
-    );
-
-  const getSelectItems = (context, options) =>
-    getSelectItemsCommon(
-      context,
-      { ...{ page, ep: ENTRYPOINT, params: { properties: ['id', 'name'] } }, ...options },
-      { types, hydraPrefix },
-    );
-
-  return { getItems, getSelectItems };
-}
diff --git a/templates/quasar/store/modules/foo/list/getters.js b/templates/quasar/store/modules/foo/list/getters.js
deleted file mode 100644
index 956e50bd..00000000
--- a/templates/quasar/store/modules/foo/list/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/list/getters";
diff --git a/templates/quasar/store/modules/foo/list/index.js b/templates/quasar/store/modules/foo/list/index.js
deleted file mode 100644
index a71c9bae..00000000
--- a/templates/quasar/store/modules/foo/list/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from "./actions";
-import * as getters from "./getters";
-import mutations from "./mutations";
-import state from "./state";
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/list/mutation_types.js b/templates/quasar/store/modules/foo/list/mutation_types.js
deleted file mode 100644
index b57f3002..00000000
--- a/templates/quasar/store/modules/foo/list/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/list/mutation_types';
-export default makeTypes('{{{uc}}}');
diff --git a/templates/quasar/store/modules/foo/list/mutations.js b/templates/quasar/store/modules/foo/list/mutations.js
deleted file mode 100644
index 59c22030..00000000
--- a/templates/quasar/store/modules/foo/list/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/list/mutations";
diff --git a/templates/quasar/store/modules/foo/list/state.js b/templates/quasar/store/modules/foo/list/state.js
deleted file mode 100644
index ff95b484..00000000
--- a/templates/quasar/store/modules/foo/list/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from "../../../../common/store/list/state";
-export default makeState();
diff --git a/templates/quasar/store/modules/foo/show/actions.js b/templates/quasar/store/modules/foo/show/actions.js
deleted file mode 100644
index ec545b0c..00000000
--- a/templates/quasar/store/modules/foo/show/actions.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { retrieveCommon, resetCommon } from '../../../../common/store/show/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-export default function(types) {
-  const retrieve = (context, id) => retrieveCommon(context, { id, ep: ENTRYPOINT }, { types });
-
-  const reset = context => {
-    resetCommon(context, { types });
-  };
-
-  return { retrieve, reset };
-}
diff --git a/templates/quasar/store/modules/foo/show/getters.js b/templates/quasar/store/modules/foo/show/getters.js
deleted file mode 100644
index dc7aea78..00000000
--- a/templates/quasar/store/modules/foo/show/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/show/getters";
diff --git a/templates/quasar/store/modules/foo/show/index.js b/templates/quasar/store/modules/foo/show/index.js
deleted file mode 100644
index 70c23968..00000000
--- a/templates/quasar/store/modules/foo/show/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from './actions';
-import * as getters from './getters';
-import mutations from './mutations';
-import state from './state';
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/show/mutation_types.js b/templates/quasar/store/modules/foo/show/mutation_types.js
deleted file mode 100644
index 1628ae4f..00000000
--- a/templates/quasar/store/modules/foo/show/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/show/mutation_types';
-export default makeTypes('{{{uc}}}');
diff --git a/templates/quasar/store/modules/foo/show/mutations.js b/templates/quasar/store/modules/foo/show/mutations.js
deleted file mode 100644
index 47ab3091..00000000
--- a/templates/quasar/store/modules/foo/show/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/show/mutations";
diff --git a/templates/quasar/store/modules/foo/show/state.js b/templates/quasar/store/modules/foo/show/state.js
deleted file mode 100644
index 2b014b9f..00000000
--- a/templates/quasar/store/modules/foo/show/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from '../../../../common/store/show/state';
-export default makeState();
diff --git a/templates/quasar/store/modules/foo/update/actions.js b/templates/quasar/store/modules/foo/update/actions.js
deleted file mode 100644
index 8edad5ec..00000000
--- a/templates/quasar/store/modules/foo/update/actions.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { resetCommon, retrieveCommon, updateCommon } from '../../../../common/store/update/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-export default function(types) {
-  const reset = context => {
-    resetCommon(context, { types });
-  };
-
-  const retrieve = (context, id) =>
-    retrieveCommon(context, { id, ep: ENTRYPOINT }, { types });
-  const update = (context, values) =>
-    updateCommon(context, { values, ep: ENTRYPOINT }, { types });
-
-  return { reset, retrieve, update };
-}
diff --git a/templates/quasar/store/modules/foo/update/getters.js b/templates/quasar/store/modules/foo/update/getters.js
deleted file mode 100644
index dca50409..00000000
--- a/templates/quasar/store/modules/foo/update/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/update/getters";
diff --git a/templates/quasar/store/modules/foo/update/index.js b/templates/quasar/store/modules/foo/update/index.js
deleted file mode 100644
index a71c9bae..00000000
--- a/templates/quasar/store/modules/foo/update/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from "./actions";
-import * as getters from "./getters";
-import mutations from "./mutations";
-import state from "./state";
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/update/mutation_types.js b/templates/quasar/store/modules/foo/update/mutation_types.js
deleted file mode 100644
index cc885f48..00000000
--- a/templates/quasar/store/modules/foo/update/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/update/mutation_types';
-export default makeTypes('{{{uc}}}');
diff --git a/templates/quasar/store/modules/foo/update/mutations.js b/templates/quasar/store/modules/foo/update/mutations.js
deleted file mode 100644
index eb3de174..00000000
--- a/templates/quasar/store/modules/foo/update/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/update/mutations";
diff --git a/templates/quasar/store/modules/foo/update/state.js b/templates/quasar/store/modules/foo/update/state.js
deleted file mode 100644
index fa8e51fe..00000000
--- a/templates/quasar/store/modules/foo/update/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from '../../../../common/store/update/state';
-export default makeState();

From 6e25be4167deb3c2314406514b7b688a360e1257 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:08:51 +0100
Subject: [PATCH 05/84] Add composables

---
 templates/quasar/composables/breadcrumb.ts  |  9 ++++
 templates/quasar/composables/errors.ts      | 19 +++++++
 templates/quasar/composables/mercureItem.ts | 58 +++++++++++++++++++++
 templates/quasar/composables/mercureList.ts | 48 +++++++++++++++++
 4 files changed, 134 insertions(+)
 create mode 100644 templates/quasar/composables/breadcrumb.ts
 create mode 100644 templates/quasar/composables/errors.ts
 create mode 100644 templates/quasar/composables/mercureItem.ts
 create mode 100644 templates/quasar/composables/mercureList.ts

diff --git a/templates/quasar/composables/breadcrumb.ts b/templates/quasar/composables/breadcrumb.ts
new file mode 100644
index 00000000..1376a70f
--- /dev/null
+++ b/templates/quasar/composables/breadcrumb.ts
@@ -0,0 +1,9 @@
+import { BreadcrumbValue } from 'src/types/breadcrumb';
+import { useRoute } from 'vue-router';
+
+export function useBreadcrumb() {
+  const route = useRoute();
+  const breadcrumb = route.meta.breadcrumb as BreadcrumbValue[];
+
+  return breadcrumb;
+}
diff --git a/templates/quasar/composables/errors.ts b/templates/quasar/composables/errors.ts
new file mode 100644
index 00000000..01224a3c
--- /dev/null
+++ b/templates/quasar/composables/errors.ts
@@ -0,0 +1,19 @@
+import { Ref, watch } from 'vue';
+import { displayErrorNotification } from 'src/utils/notifications';
+import { useI18n } from 'vue-i18n';
+
+export function useWatchErrors(
+  errors: (Ref<string | undefined> | undefined)[]
+) {
+  const { t } = useI18n();
+
+  watch(errors, (newErrors) => {
+    newErrors.forEach((newError) => {
+      if (!newError?.value) {
+        return;
+      }
+
+      displayErrorNotification(newError.value, t('close'));
+    });
+  });
+}
diff --git a/templates/quasar/composables/mercureItem.ts b/templates/quasar/composables/mercureItem.ts
new file mode 100644
index 00000000..55186bfd
--- /dev/null
+++ b/templates/quasar/composables/mercureItem.ts
@@ -0,0 +1,58 @@
+import { useRouter } from 'vue-router';
+import { mercureSubscribe } from 'src/utils/mercure';
+import { onBeforeUnmount } from 'vue';
+import type { StoreGeneric } from 'pinia';
+import type { Item } from 'src/types/item';
+
+export function useMercureItem({
+  store,
+  deleteStore,
+  redirectRouteName,
+}: {
+  store: StoreGeneric;
+  deleteStore: StoreGeneric;
+  redirectRouteName: string;
+}) {
+  const router = useRouter();
+
+  const mercureEl = <T extends Item>(data: T) => {
+    if (Object.keys(data).length === 1) {
+      deleteStore.setMercureDeleted(data);
+      return;
+    }
+
+    store.setRetrieved(data);
+  };
+
+  let mercureSub: EventSource | null = null;
+
+  store.$subscribe((mutation: any, state: any) => {
+    if (!state.hubUrl) {
+      return;
+    }
+
+    if (mercureSub) {
+      mercureSub.close();
+    }
+
+    if (!state.retrieved) {
+      return;
+    }
+
+    mercureSub = mercureSubscribe(
+      state.hubUrl,
+      [state.retrieved['@id'] ?? ''],
+      mercureEl
+    );
+  });
+
+  deleteStore.$subscribe((mutation: any, state: any) => {
+    if (state.mercureDeleted) {
+      router.push({ name: redirectRouteName });
+    }
+  });
+
+  onBeforeUnmount(() => {
+    mercureSub?.close();
+  });
+}
diff --git a/templates/quasar/composables/mercureList.ts b/templates/quasar/composables/mercureList.ts
new file mode 100644
index 00000000..f35821ef
--- /dev/null
+++ b/templates/quasar/composables/mercureList.ts
@@ -0,0 +1,48 @@
+import { mercureSubscribe } from 'src/utils/mercure';
+import { onBeforeUnmount } from 'vue';
+import type { Item } from 'src/types/item';
+import type { StoreGeneric } from 'pinia';
+
+export function useMercureList({
+  store,
+  deleteStore,
+}: {
+  store: StoreGeneric;
+  deleteStore: StoreGeneric;
+}) {
+  const mercureEl = <T extends Item>(data: T) => {
+    if (Object.keys(data).length === 1) {
+      store.deleteItem(data);
+      deleteStore.setMercureDeleted(data);
+      return;
+    }
+
+    store.updateItem(data);
+  };
+
+  let mercureSub: EventSource | null = null;
+
+  store.$subscribe((mutation: any, state: any) => {
+    if (!state.hubUrl) {
+      return;
+    }
+
+    if (mercureSub) {
+      mercureSub.close();
+    }
+
+    if (!state.items?.length) {
+      return;
+    }
+
+    mercureSub = mercureSubscribe(
+      state.hubUrl,
+      state.items.map((i: Item) => i['@id'] ?? ''),
+      mercureEl
+    );
+  });
+
+  onBeforeUnmount(() => {
+    mercureSub?.close();
+  });
+}

From 3e78911b29869e0d340c4ad51aa803148a61e5cd Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:09:06 +0100
Subject: [PATCH 06/84] Update i18n

---
 templates/quasar/boot/i18n.ts        | 15 +++++++++++++++
 templates/quasar/i18n/en-us/index.ts |  8 ++++++++
 templates/quasar/i18n/foo.ts         |  5 +++++
 templates/quasar/i18n/index.js       |  5 -----
 templates/quasar/i18n/index.ts       |  5 +++++
 5 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 templates/quasar/boot/i18n.ts
 create mode 100644 templates/quasar/i18n/en-us/index.ts
 create mode 100644 templates/quasar/i18n/foo.ts
 delete mode 100644 templates/quasar/i18n/index.js
 create mode 100644 templates/quasar/i18n/index.ts

diff --git a/templates/quasar/boot/i18n.ts b/templates/quasar/boot/i18n.ts
new file mode 100644
index 00000000..634e7a99
--- /dev/null
+++ b/templates/quasar/boot/i18n.ts
@@ -0,0 +1,15 @@
+import { boot } from 'quasar/wrappers';
+import { createI18n } from 'vue-i18n';
+import messages from 'src/i18n';
+
+export default boot(({ app }) => {
+  // Create I18n instance
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en-US',
+    messages,
+  });
+
+  // Tell app to use the I18n instance
+  app.use(i18n);
+});
diff --git a/templates/quasar/i18n/en-us/index.ts b/templates/quasar/i18n/en-us/index.ts
new file mode 100644
index 00000000..fdc9fbd2
--- /dev/null
+++ b/templates/quasar/i18n/en-us/index.ts
@@ -0,0 +1,8 @@
+import {{lc}} from './{{lc}}';
+
+export default {
+  {{#each labels}}
+  {{@key}}: {{this}},
+  {{/each }}
+  {{lc}},
+};
diff --git a/templates/quasar/i18n/foo.ts b/templates/quasar/i18n/foo.ts
new file mode 100644
index 00000000..99764cc9
--- /dev/null
+++ b/templates/quasar/i18n/foo.ts
@@ -0,0 +1,5 @@
+export default {
+  {{#each labels}}
+  {{@key}}: {{this}},
+  {{/each }}
+};
diff --git a/templates/quasar/i18n/index.js b/templates/quasar/i18n/index.js
deleted file mode 100644
index 5d50295e..00000000
--- a/templates/quasar/i18n/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  {{#each labels as |label|}}
-  '{{{capitalize label}}}': '{{{capitalize label}}}',
-  {{/each }}
-};
diff --git a/templates/quasar/i18n/index.ts b/templates/quasar/i18n/index.ts
new file mode 100644
index 00000000..552bdd60
--- /dev/null
+++ b/templates/quasar/i18n/index.ts
@@ -0,0 +1,5 @@
+import enUS from './en-us';
+
+export default {
+  'en-US': enUS,
+};

From 4b34778662e49ee91d7f3504f6e2b1742d8df337 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:09:24 +0100
Subject: [PATCH 07/84] Update router

---
 templates/quasar/router/foo.js | 65 ----------------------------------
 templates/quasar/router/foo.ts | 53 +++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 65 deletions(-)
 delete mode 100644 templates/quasar/router/foo.js
 create mode 100644 templates/quasar/router/foo.ts

diff --git a/templates/quasar/router/foo.js b/templates/quasar/router/foo.js
deleted file mode 100644
index 19547cbe..00000000
--- a/templates/quasar/router/foo.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import {{{titleUcFirst}}}List from '../components/{{{lc}}}/List';
-import {{{titleUcFirst}}}Create from '../components/{{{lc}}}/Create';
-import {{{titleUcFirst}}}Update from '../components/{{{lc}}}/Update';
-import {{{titleUcFirst}}}Show from '../components/{{{lc}}}/Show';
-
-const list = {
-  label: '{{{ titleUcFirst }}}List',
-  icon: 'whatshot',
-};
-const create = {
-  label: '{{{ titleUcFirst }}}Create',
-  icon: 'whatshot',
-};
-const update = {
-  label: '{{{ titleUcFirst }}}Update',
-  icon: 'whatshot',
-};
-const show = {
-  label: '{{{ titleUcFirst }}}Show',
-  icon: 'whatshot',
-};
-
-export default [
-  {
-    name: list['label'],
-    path: '/{{{name}}}/',
-    component: {{{ titleUcFirst }}}List,
-    meta: {
-      breadcrumb: [list],
-    },
-  },
-  {
-    name: create['label'],
-    path: '/{{{name}}}/create',
-    component: {{{ titleUcFirst }}}Create,
-    meta: {
-      breadcrumb: [
-        { ...list , to: { name: list['label'] } },
-        create,
-      ],
-    },
-  },
-  {
-    name: update['label'],
-    path: '/{{{name}}}/edit/:id',
-    component: {{{ titleUcFirst }}}Update,
-    meta: {
-      breadcrumb: [
-        { ...list , to: { name: list['label'] } },
-        update,
-      ],
-    },
-  },
-  {
-    name: show['label'],
-    path: '/{{{name}}}/show/:id',
-    component: {{{ titleUcFirst }}}Show,
-    meta: {
-      breadcrumb: [
-        { ...list , to: { name: list['label'] } },
-        show,
-      ],
-    },
-  },
-];
diff --git a/templates/quasar/router/foo.ts b/templates/quasar/router/foo.ts
new file mode 100644
index 00000000..39dee01b
--- /dev/null
+++ b/templates/quasar/router/foo.ts
@@ -0,0 +1,53 @@
+import { BreadcrumbValue } from 'src/types/breadcrumb';
+
+const list: BreadcrumbValue = {
+  label: '{{titleUcFirst}}List',
+  icon: 'whatshot',
+};
+const create: BreadcrumbValue = {
+  label: '{{titleUcFirst}}Create',
+  icon: 'whatshot',
+};
+const update: BreadcrumbValue = {
+  label: '{{titleUcFirst}}Update',
+  icon: 'whatshot',
+};
+const show: BreadcrumbValue = {
+  label: '{{titleUcFirst}}Show',
+  icon: 'whatshot',
+};
+
+export default [
+  {
+    name: list.label,
+    path: '/{{name}}/',
+    component: () => import('pages/{{lc}}/ListPage.vue'),
+    meta: {
+      breadcrumb: [list],
+    },
+  },
+  {
+    name: create.label,
+    path: '/{{name}}/create',
+    component: () => import('pages/{{lc}}/CreatePage.vue'),
+    meta: {
+      breadcrumb: [{ ...list, to: { name: list.label } }, create],
+    },
+  },
+  {
+    name: update.label,
+    path: '/{{name}}/edit/:id',
+    component: () => import('pages/{{lc}}/UpdatePage.vue'),
+    meta: {
+      breadcrumb: [{ ...list, to: { name: list.label } }, update],
+    },
+  },
+  {
+    name: show.label,
+    path: '/{{name}}/show/:id',
+    component: () => import('pages/{{lc}}/ShowPage.vue'),
+    meta: {
+      breadcrumb: [{ ...list, to: { name: list.label } }, show],
+    },
+  },
+];

From 6cb38baaabf6f9a2dbb8367beb533c77c2dc6abb Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:09:44 +0100
Subject: [PATCH 08/84] Add types

---
 templates/quasar/error/SubmissionError.js |  9 ---------
 templates/quasar/types/breadcrumb.ts      |  7 +++++++
 templates/quasar/types/collection.ts      | 11 +++++++++++
 templates/quasar/types/error.ts           | 18 ++++++++++++++++++
 templates/quasar/types/foo.ts             |  7 +++++++
 templates/quasar/types/item.ts            |  3 +++
 templates/quasar/types/view.ts            |  7 +++++++
 7 files changed, 53 insertions(+), 9 deletions(-)
 delete mode 100644 templates/quasar/error/SubmissionError.js
 create mode 100644 templates/quasar/types/breadcrumb.ts
 create mode 100644 templates/quasar/types/collection.ts
 create mode 100644 templates/quasar/types/error.ts
 create mode 100644 templates/quasar/types/foo.ts
 create mode 100644 templates/quasar/types/item.ts
 create mode 100644 templates/quasar/types/view.ts

diff --git a/templates/quasar/error/SubmissionError.js b/templates/quasar/error/SubmissionError.js
deleted file mode 100644
index fbbdfafa..00000000
--- a/templates/quasar/error/SubmissionError.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default class SubmissionError extends Error {
-  constructor(errors) {
-    super('Submit Validation Failed');
-    this.errors = errors;
-    Error.captureStackTrace(this, this.constructor);
-    this.name = this.constructor.name;
-    return this;
-  }
-}
diff --git a/templates/quasar/types/breadcrumb.ts b/templates/quasar/types/breadcrumb.ts
new file mode 100644
index 00000000..07132ad2
--- /dev/null
+++ b/templates/quasar/types/breadcrumb.ts
@@ -0,0 +1,7 @@
+import { RouteLocation } from 'vue-router';
+
+export interface BreadcrumbValue {
+  label: string;
+  icon: string;
+  to?: RouteLocation;
+}
diff --git a/templates/quasar/types/collection.ts b/templates/quasar/types/collection.ts
new file mode 100644
index 00000000..c5a739dd
--- /dev/null
+++ b/templates/quasar/types/collection.ts
@@ -0,0 +1,11 @@
+import type { View } from './view';
+
+export interface PagedCollection<T> {
+  '@context'?: string;
+  '@id'?: string;
+  '@type'?: string;
+  'hydra:member': T[];
+  'hydra:search'?: object;
+  'hydra:totalItems'?: number;
+  'hydra:view': View;
+}
diff --git a/templates/quasar/types/error.ts b/templates/quasar/types/error.ts
new file mode 100644
index 00000000..b82407dd
--- /dev/null
+++ b/templates/quasar/types/error.ts
@@ -0,0 +1,18 @@
+export type TError = SubmissionError | Error;
+
+export interface SubmissionErrors {
+  [key: string]: string;
+}
+
+export class SubmissionError extends Error {
+  private readonly _errors: SubmissionErrors;
+
+  constructor(errors: SubmissionErrors) {
+    super('Submit Validation Failed');
+    this._errors = errors;
+  }
+
+  public get errors(): SubmissionErrors {
+    return this._errors;
+  }
+}
diff --git a/templates/quasar/types/foo.ts b/templates/quasar/types/foo.ts
new file mode 100644
index 00000000..39ee8198
--- /dev/null
+++ b/templates/quasar/types/foo.ts
@@ -0,0 +1,7 @@
+import type { Item } from "./item";
+
+export interface {{titleUcFirst}} extends Item {
+{{#each fields}}
+ {{#if readonly}}readonly{{/if}} {{{name}}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelations}}any{{else}}{{{type}}}{{/if}};
+{{/each}}
+}
diff --git a/templates/quasar/types/item.ts b/templates/quasar/types/item.ts
new file mode 100644
index 00000000..766cc0f1
--- /dev/null
+++ b/templates/quasar/types/item.ts
@@ -0,0 +1,3 @@
+export interface Item {
+  '@id'?: string;
+}
diff --git a/templates/quasar/types/view.ts b/templates/quasar/types/view.ts
new file mode 100644
index 00000000..9dfacb30
--- /dev/null
+++ b/templates/quasar/types/view.ts
@@ -0,0 +1,7 @@
+export interface View {
+  '@id': string;
+  'hydra:first': string;
+  'hydra:last': string;
+  'hydra:next': string;
+  'hydra:previous': string;
+}

From 2aa442e3f6ff5d1417faf235ab7c9cc29386388d Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:10:00 +0100
Subject: [PATCH 09/84] Update utils

---
 templates/quasar/utils/dates.js         |  5 --
 templates/quasar/utils/dates.ts         | 15 +++++
 templates/quasar/utils/fetch.js         | 57 -----------------
 templates/quasar/utils/fetch.ts         | 52 +++++++++++++++
 templates/quasar/utils/mercure.ts       | 33 ++++++++++
 templates/quasar/utils/notifications.ts | 22 +++++++
 templates/quasar/utils/notify.js        | 31 ---------
 templates/quasar/utils/vuexer.js        | 85 -------------------------
 8 files changed, 122 insertions(+), 178 deletions(-)
 delete mode 100644 templates/quasar/utils/dates.js
 create mode 100644 templates/quasar/utils/dates.ts
 delete mode 100644 templates/quasar/utils/fetch.js
 create mode 100644 templates/quasar/utils/fetch.ts
 create mode 100644 templates/quasar/utils/mercure.ts
 create mode 100644 templates/quasar/utils/notifications.ts
 delete mode 100644 templates/quasar/utils/notify.js
 delete mode 100644 templates/quasar/utils/vuexer.js

diff --git a/templates/quasar/utils/dates.js b/templates/quasar/utils/dates.js
deleted file mode 100644
index 5d8b4513..00000000
--- a/templates/quasar/utils/dates.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { date } from 'quasar';
-
-const extractDate = value => date.extractDate(value, 'YYYY-MM-DDTHH:mm:ssZ');
-
-export { extractDate };
diff --git a/templates/quasar/utils/dates.ts b/templates/quasar/utils/dates.ts
new file mode 100644
index 00000000..5e346e2d
--- /dev/null
+++ b/templates/quasar/utils/dates.ts
@@ -0,0 +1,15 @@
+import dayjs from 'dayjs';
+
+export function formatDateTime(date?: string): string | null {
+  if (!date) return null;
+
+  return dayjs(date).format('DD/MM/YYYY');
+}
+
+export function formatDateInput(value?: string): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  return dayjs(value).format('YYYY-MM-DD');
+}
diff --git a/templates/quasar/utils/fetch.js b/templates/quasar/utils/fetch.js
deleted file mode 100644
index 823ac623..00000000
--- a/templates/quasar/utils/fetch.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import SubmissionError from '../error/SubmissionError';
-
-const MIME_TYPE = 'application/ld+json';
-
-// make query string array of values
-const makeParamArray = (key, arr) => arr.map(val => `${key}[]=${val}`).join('&');
-
-export default function({ id, ep }, options = {}) {
-  if (typeof options.headers === 'undefined') Object.assign(options, { headers: new Headers() });
-
-  if (options.headers.get('Accept') === null) options.headers.set('Accept', MIME_TYPE);
-
-  if (
-    options.body !== undefined &&
-    !(options.body instanceof FormData) &&
-    options.headers.get('Content-Type') === null
-  ) {
-    options.headers.set('Content-Type', MIME_TYPE);
-  }
-
-  if (options.params) {
-    var queryString = Object.keys(options.params)
-      .map(key =>
-        Array.isArray(options.params[key])
-          ? makeParamArray(key, options.params[key])
-          : `${key}=${options.params[key]}`,
-      )
-      .join('&');
-    id = `${id}?${queryString}`;
-  }
-
-  // enable CORS for all requests
-  Object.assign(options, {
-    mode: 'cors',
-    // credentials: 'include', // when credentials needed
-  });
-
-  const entryPoint = ep + (ep.endsWith('/') ? '' : '/');
-
-  return fetch(new URL(id, entryPoint), options).then(response => {
-    if (response.ok) return response;
-
-    return response.json().then(json => {
-      const error = json['{{{hydraPrefix}}}description']
-        ? json['{{{hydraPrefix}}}description']
-        : response.statusText;
-      if (!json.violations) throw Error(error);
-
-      const errors = { _error: error };
-      json.violations.map(violation =>
-        Object.assign(errors, { [violation.propertyPath]: violation.message }),
-      );
-
-      throw new SubmissionError(errors);
-    });
-  });
-}
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/fetch.ts
new file mode 100644
index 00000000..561b2407
--- /dev/null
+++ b/templates/quasar/utils/fetch.ts
@@ -0,0 +1,52 @@
+import { SubmissionError, SubmissionErrors } from 'src/types/error';
+import qs from 'qs';
+import { ENTRYPOINT } from 'src/config/entrypoint';
+
+const MIME_TYPE = 'application/ld+json';
+
+export default function (id: string, options: any = {}) {
+  if (typeof options.headers === 'undefined') {
+    Object.assign(options, { headers: new Headers() });
+  }
+
+  if (options.headers.get('Accept') === null) {
+    options.headers.set('Accept', MIME_TYPE);
+  }
+
+  if (
+    options.body !== undefined &&
+    !(options.body instanceof FormData) &&
+    options.headers.get('Content-Type') === null
+  ) {
+    options.headers.set('Content-Type', MIME_TYPE);
+  }
+
+  if (options.params) {
+    const queryString = qs.stringify(options.params);
+    id = `${id}?${queryString}`;
+  }
+
+  // enable CORS for all requests
+  Object.assign(options, {
+    mode: 'cors',
+    // credentials: 'include', // when credentials needed
+  });
+
+  return fetch(new URL(id, ENTRYPOINT), options).then((response: Response) => {
+    if (response.ok) return response;
+
+    return response.json().then((json) => {
+      const error = json['hydra:description'] ?? response.statusText;
+      if (!json.violations) throw Error(error);
+
+      const errors: SubmissionErrors = { _error: error };
+      json.violations.map(
+        (violation: { propertyPath: string; message: string }) => {
+          errors[violation.propertyPath] = violation.message;
+        }
+      );
+
+      throw new SubmissionError(errors);
+    });
+  });
+}
diff --git a/templates/quasar/utils/mercure.ts b/templates/quasar/utils/mercure.ts
new file mode 100644
index 00000000..eb270b1c
--- /dev/null
+++ b/templates/quasar/utils/mercure.ts
@@ -0,0 +1,33 @@
+import { ENTRYPOINT } from '../config/entrypoint';
+import type { Item } from '../types/item';
+
+export const mercureSubscribe = (
+  hubURL: URL,
+  topics: string[],
+  setData: <T extends Item>(data: T) => void
+): EventSource => {
+  const url = new URL(hubURL, ENTRYPOINT);
+
+  topics.forEach((topic) =>
+    url.searchParams.append('topic', new URL(topic, ENTRYPOINT).toString())
+  );
+
+  const eventSource = new EventSource(url.toString());
+
+  eventSource.addEventListener('message', (event) => {
+    setData(JSON.parse(event.data));
+  });
+
+  return eventSource;
+};
+
+export const extractHubURL = (response: Response): URL | undefined => {
+  const linkHeader = response.headers.get('Link');
+  if (!linkHeader) return undefined;
+
+  const matches = linkHeader.match(
+    /<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/
+  );
+
+  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : undefined;
+};
diff --git a/templates/quasar/utils/notifications.ts b/templates/quasar/utils/notifications.ts
new file mode 100644
index 00000000..2efa0483
--- /dev/null
+++ b/templates/quasar/utils/notifications.ts
@@ -0,0 +1,22 @@
+import { Notify } from 'quasar';
+
+export function displayErrorNotification(message: string, closeLabel: string) {
+  Notify.create({
+    message,
+    color: 'red',
+    icon: 'error',
+    closeBtn: closeLabel,
+  });
+}
+
+export function displaySuccessNotification(
+  message: string,
+  closeLabel: string
+) {
+  Notify.create({
+    message,
+    color: 'green',
+    icon: 'tag_faces',
+    closeBtn: closeLabel,
+  });
+}
diff --git a/templates/quasar/utils/notify.js b/templates/quasar/utils/notify.js
deleted file mode 100644
index de4ed26e..00000000
--- a/templates/quasar/utils/notify.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Notify } from 'quasar';
-
-const error = (message, closeLabel) => 
-  Notify.create({
-    message,
-    color: 'red',
-    icon: 'error',
-    closeBtn: closeLabel,
-  });
-
-const success = (message, closeLabel) => 
-  Notify.create({
-    message,
-    color: 'green',
-    icon: 'tag_faces',
-    closeBtn: closeLabel,
-  });
-
-const warning = (message, closeLabel) =>
-  Notify.create({
-    message,
-    color: 'yellow',
-    icon: 'warning',
-    closeBtn: closeLabel,
-  });
-
-export {
-  error,
-  success,
-  warning,
-};
diff --git a/templates/quasar/utils/vuexer.js b/templates/quasar/utils/vuexer.js
deleted file mode 100644
index 3047bc80..00000000
--- a/templates/quasar/utils/vuexer.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { mapActions, mapGetters, mapMutations, createNamespacedHelpers } from 'vuex';
-
-export const create = module => {
-  const lowmod = module.toLowerCase();
-  const { mapGetters, mapActions } = createNamespacedHelpers(`${lowmod}/create`);
-  const getters = mapGetters(['error', 'isLoading', 'created', 'violations']);
-  const actions = mapActions(['create']);
-  return { getters, actions };
-};
-
-export const list = module => {
-  const lowmod = module.toLowerCase();
-  const getters = mapGetters({
-    deletedItem: `${lowmod}/del/deleted`,
-    error: `${lowmod}/list/error`,
-    items: `${lowmod}/list/items`,
-    isLoading: `${lowmod}/list/isLoading`,
-    view: `${lowmod}/list/view`,
-    totalItems: `${lowmod}/list/totalItems`,
-  });
-  const actions = mapActions({
-    getPage: `${lowmod}/list/getItems`,
-    deleteItem: `${lowmod}/del/del`,
-  });
-  return { getters, actions };
-};
-
-export const show = module => {
-  const lowmod = module.toLowerCase();
-  const getters = mapGetters({
-    deleteError: `${lowmod}/del/error`,
-    error: `${lowmod}/show/error`,
-    isLoading: `${lowmod}/show/isLoading`,
-    item: `${lowmod}/show/retrieved`,
-  });
-  const actions = mapActions({
-    del: `${lowmod}/del/del`,
-    reset: `${lowmod}/show/reset`,
-    retrieve: `${lowmod}/show/retrieve`,
-  });
-  return { getters, actions };
-};
-
-export const update = module => {
-  const lowmod = module.toLowerCase();
-  const getters = mapGetters({
-    isLoading: `${lowmod}/update/isLoading`,
-    error: `${lowmod}/update/error`,
-    deleteError: `${lowmod}/del/error`,
-    deleteLoading: `${lowmod}/del/isLoading`,
-    deleted: `${lowmod}/del/deleted`,
-    retrieved: `${lowmod}/update/retrieved`,
-    updated: `${lowmod}/update/updated`,
-    violations: `${lowmod}/update/violations`,
-  });
-  const actions = mapActions({
-    createReset: `${lowmod}/create/reset`,
-    deleteItem: `${lowmod}/del/del`,
-    delReset: `${lowmod}/del/reset`,
-    retrieve: `${lowmod}/update/retrieve`,
-    updateReset: `${lowmod}/update/reset`,
-    update: `${lowmod}/update/update`,
-  });
-  return { getters, actions };
-};
-
-export const form = modules => {
-  let getters = {},
-    actions = {},
-    mutations = {};
-  modules.forEach(({ name, module }) => {
-    const lowmod = module.toLowerCase();
-    getters[`${name}SelectItems`] = `${lowmod}/list/selectItems`;
-    getters[`${name}SelectItemsTemplate`] = `${lowmod}/list/selectItemsTemplate`;
-    actions[`${name}GetSelectItems`] = `${lowmod}/list/getSelectItems`;
-    mutations[
-      `${name}SetSelectItemsTemplate`
-    ] = `${lowmod}/list/${module.toUpperCase()}_LIST_SET_SELECT_ITEMS_TEMPLATE`;
-  });
-  return {
-    getters: mapGetters(getters),
-    actions: mapActions(actions),
-    mutations: mapMutations(mutations),
-  };
-};

From ddc7f8183ea9aff48f09f6393cb1b5cbc02e9ac3 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 12:12:57 +0100
Subject: [PATCH 10/84] Remove useless i18n files

---
 templates/quasar/boot/i18n.ts        | 15 ---------------
 templates/quasar/i18n/en-us/index.ts |  8 --------
 templates/quasar/i18n/index.ts       |  5 -----
 3 files changed, 28 deletions(-)
 delete mode 100644 templates/quasar/boot/i18n.ts
 delete mode 100644 templates/quasar/i18n/en-us/index.ts
 delete mode 100644 templates/quasar/i18n/index.ts

diff --git a/templates/quasar/boot/i18n.ts b/templates/quasar/boot/i18n.ts
deleted file mode 100644
index 634e7a99..00000000
--- a/templates/quasar/boot/i18n.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { boot } from 'quasar/wrappers';
-import { createI18n } from 'vue-i18n';
-import messages from 'src/i18n';
-
-export default boot(({ app }) => {
-  // Create I18n instance
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en-US',
-    messages,
-  });
-
-  // Tell app to use the I18n instance
-  app.use(i18n);
-});
diff --git a/templates/quasar/i18n/en-us/index.ts b/templates/quasar/i18n/en-us/index.ts
deleted file mode 100644
index fdc9fbd2..00000000
--- a/templates/quasar/i18n/en-us/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {{lc}} from './{{lc}}';
-
-export default {
-  {{#each labels}}
-  {{@key}}: {{this}},
-  {{/each }}
-  {{lc}},
-};
diff --git a/templates/quasar/i18n/index.ts b/templates/quasar/i18n/index.ts
deleted file mode 100644
index 552bdd60..00000000
--- a/templates/quasar/i18n/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import enUS from './en-us';
-
-export default {
-  'en-US': enUS,
-};

From c69a2da986fc590b5221030de5905f315434bb2a Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 12:17:10 +0100
Subject: [PATCH 11/84] Update file name

---
 templates/quasar/components/foo/FormComponent.vue | 2 +-
 templates/quasar/components/foo/ListComponent.vue | 2 +-
 templates/quasar/components/foo/ShowComponent.vue | 2 +-
 templates/quasar/utils/{dates.ts => date.ts}      | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename templates/quasar/utils/{dates.ts => date.ts} (100%)

diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index 6c651713..f9867a26 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -60,7 +60,7 @@ import { Ref, ref, toRef } from 'vue';
 import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
 {{/if}}
 import { Item } from 'src/types/item';
-import { formatDateInput } from 'src/utils/dates';
+import { formatDateInput } from 'src/utils/date';
 
 let props = defineProps<{
   values?: {{titleUcFirst}};
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index a3e5cbaf..9ca76505 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -133,7 +133,7 @@ import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
 import ActionCell from 'src/components/common/ActionCellComponent.vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { formatDateTime } from 'src/utils/dates';
+import { formatDateTime } from 'src/utils/date';
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { storeToRefs } from 'pinia';
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index 9f26ddc7..aeb76551 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -105,7 +105,7 @@ import Loading from 'src/components/common/LoadingComponent.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
 import { storeToRefs } from 'pinia';
-import { formatDateTime } from 'src/utils/dates';
+import { formatDateTime } from 'src/utils/date';
 import { onBeforeUnmount } from 'vue';
 import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
diff --git a/templates/quasar/utils/dates.ts b/templates/quasar/utils/date.ts
similarity index 100%
rename from templates/quasar/utils/dates.ts
rename to templates/quasar/utils/date.ts

From 0d3b410d0f6ad649d9935cf60f9ab28ff757bdc6 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 14:57:05 +0100
Subject: [PATCH 12/84] Fix handlebars formatting

---
 .../common/ConfirmDeleteComponent.vue         |  2 +-
 .../common/FormRepeaterComponent.vue          |  2 +-
 .../quasar/components/foo/FormComponent.vue   |  3 ++-
 .../quasar/components/foo/ListComponent.vue   | 20 +++++++++----------
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/templates/quasar/components/common/ConfirmDeleteComponent.vue b/templates/quasar/components/common/ConfirmDeleteComponent.vue
index 0d68542a..7f91323e 100644
--- a/templates/quasar/components/common/ConfirmDeleteComponent.vue
+++ b/templates/quasar/components/common/ConfirmDeleteComponent.vue
@@ -5,7 +5,7 @@
         <q-avatar icon="warning" color="primary" text-color="white" />
 
         <span class="q-ml-sm">
-          {{ $t('Are you sure you want to delete this item?') }}
+          \{{ $t('Are you sure you want to delete this item?') }}
         </span>
       </q-card-section>
 
diff --git a/templates/quasar/components/common/FormRepeaterComponent.vue b/templates/quasar/components/common/FormRepeaterComponent.vue
index 6e965209..1fa3cffb 100644
--- a/templates/quasar/components/common/FormRepeaterComponent.vue
+++ b/templates/quasar/components/common/FormRepeaterComponent.vue
@@ -2,7 +2,7 @@
   <div>
     <label for="book_reviews" class="text-body1 form-control-label">
       <span class="q-mr-sm">
-        {{ label }}
+        \{{ label }}
       </span>
 
       <q-btn color="secondary" @click="addField">Add</q-btn>
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index f9867a26..4c1c7958 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -56,7 +56,7 @@
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
-{#if hasManyRelations}}
+{{#if hasManyRelations}}
 import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
 {{/if}}
 import { Item } from 'src/types/item';
@@ -74,6 +74,7 @@ let item: Ref<{{titleUcFirst}}> = ref({});
 if (props.values) {
   item.value = {
     ...props.values,
+    {{#each formFields}}
     {{#compare type "==" "dateTime" }}
     publicationDate: formatDateInput(props.values.publicationDate),
     {{/compare}}
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 9ca76505..3bace9cf 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -6,10 +6,10 @@
   </Toolbar>
 
   <q-banner v-if="deleted" class="bg-positive text-white q-ma-md">
-    {{ deleted['@id'] }} deleted.
+    \{{ deleted['@id'] }} deleted.
   </q-banner>
   <q-banner v-if="mercureDeleted" class="bg-positive text-white q-ma-md">
-    {{ mercureDeleted['@id'] }} deleted by another user.
+    \{{ mercureDeleted['@id'] }} deleted by another user.
   </q-banner>
 
   {{#if parameters.length}}
@@ -53,7 +53,7 @@
             :to="{ name: '{{reference.title}}Show', params: { id: {{lowercase reference.title}} } }"
             :key="{{lowercase reference.title}}"
           >
-            {{ {{lowercase reference.title}} }}
+            \{{ {{lowercase reference.title}} }}
 
             <br />
           </router-link>
@@ -61,7 +61,7 @@
 
         <template v-else>
           <p v-for="{{lowercase reference.title}} in value" :key="{{lowercase reference.title}}">
-            {{ {{lowercase reference.title}} }}
+            \{{ {{lowercase reference.title}} }}
           </p>
         </template>
       </td>
@@ -73,11 +73,11 @@
           v-if="router.hasRoute('{{reference.title}}Show')"
           :to="{ name: '{{reference.title}}Show', params: { id: value } }"
         >
-          {{ value }}
+          \{{ value }}
         </router-link>
 
         <p v-else>
-          {{ value }}
+          \{{ value }}
         </p>
       </td>
     </template>
@@ -90,7 +90,7 @@
             :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
             :key="{{lowercase embedded.title}}['@id']"
           >
-            {{ {{lowercase embedded.title}}['@id'] }}
+            \{{ {{lowercase embedded.title}}['@id'] }}
 
             <br />
           </router-link>
@@ -98,7 +98,7 @@
 
         <template v-else>
           <p v-for="{{lowercase embedded.title}} in value" :key="{{lowercase embedded.title}}['@id']">
-            {{ {{lowercase embedded.title}}['@id'] }}
+            \{{ {{lowercase embedded.title}}['@id'] }}
           </p>
         </template>
       </td>
@@ -110,11 +110,11 @@
           v-if="router.hasRoute('{{embedded.title}}Show')"
           :to="{ name: '{{embedded.title}}Show', params: { id: value['@id'] } }"
         >
-          {{ value['@id'] }}
+          \{{ value['@id'] }}
         </router-link>
 
         <p v-else>
-          {{ value['@id'] }}
+          \{{ value['@id'] }}
         </p>
       </td>
     </template>

From d675140c07c1e0481aca32a07d65a63dcb684a6f Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 09:48:25 +0100
Subject: [PATCH 13/84] Remove useless file

---
 templates/quasar/utils/mercure.ts | 33 -------------------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 templates/quasar/utils/mercure.ts

diff --git a/templates/quasar/utils/mercure.ts b/templates/quasar/utils/mercure.ts
deleted file mode 100644
index eb270b1c..00000000
--- a/templates/quasar/utils/mercure.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ENTRYPOINT } from '../config/entrypoint';
-import type { Item } from '../types/item';
-
-export const mercureSubscribe = (
-  hubURL: URL,
-  topics: string[],
-  setData: <T extends Item>(data: T) => void
-): EventSource => {
-  const url = new URL(hubURL, ENTRYPOINT);
-
-  topics.forEach((topic) =>
-    url.searchParams.append('topic', new URL(topic, ENTRYPOINT).toString())
-  );
-
-  const eventSource = new EventSource(url.toString());
-
-  eventSource.addEventListener('message', (event) => {
-    setData(JSON.parse(event.data));
-  });
-
-  return eventSource;
-};
-
-export const extractHubURL = (response: Response): URL | undefined => {
-  const linkHeader = response.headers.get('Link');
-  if (!linkHeader) return undefined;
-
-  const matches = linkHeader.match(
-    /<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/
-  );
-
-  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : undefined;
-};

From 923efa0ec81b4a482f0607ea5110096b69f3449e Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 09:49:30 +0100
Subject: [PATCH 14/84] Add a ts mercure file in utils

---
 templates/common/utils/mercure.ts | 33 +++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 templates/common/utils/mercure.ts

diff --git a/templates/common/utils/mercure.ts b/templates/common/utils/mercure.ts
new file mode 100644
index 00000000..250dd1eb
--- /dev/null
+++ b/templates/common/utils/mercure.ts
@@ -0,0 +1,33 @@
+import { ENTRYPOINT } from "../config/entrypoint";
+import type { Item } from "../types/item";
+
+export const mercureSubscribe = (
+  hubURL: URL,
+  topics: string[],
+  setData: <T extends Item>(data: T) => void
+): EventSource => {
+  const url = new URL(hubURL, ENTRYPOINT);
+
+  topics.forEach((topic) =>
+    url.searchParams.append("topic", new URL(topic, ENTRYPOINT).toString())
+  );
+
+  const eventSource = new EventSource(url.toString());
+
+  eventSource.addEventListener("message", (event) => {
+    setData(JSON.parse(event.data));
+  });
+
+  return eventSource;
+};
+
+export const extractHubURL = (response: Response): URL | null => {
+  const linkHeader = response.headers.get("Link");
+  if (!linkHeader) return null;
+
+  const matches = linkHeader.match(
+    /<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/
+  );
+
+  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : null;
+};

From dbd815f69250f7e5a640cbea9347788239abe91a Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 09:52:38 +0100
Subject: [PATCH 15/84] Add main file to i18n

---
 templates/quasar/i18n/foo.ts  | 2 +-
 templates/quasar/i18n/main.ts | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 templates/quasar/i18n/main.ts

diff --git a/templates/quasar/i18n/foo.ts b/templates/quasar/i18n/foo.ts
index 99764cc9..2e380185 100644
--- a/templates/quasar/i18n/foo.ts
+++ b/templates/quasar/i18n/foo.ts
@@ -1,5 +1,5 @@
 export default {
   {{#each labels}}
-  {{@key}}: {{this}},
+  {{this}}: '{{capitalize this}}',
   {{/each }}
 };
diff --git a/templates/quasar/i18n/main.ts b/templates/quasar/i18n/main.ts
new file mode 100644
index 00000000..f2a18d19
--- /dev/null
+++ b/templates/quasar/i18n/main.ts
@@ -0,0 +1,8 @@
+import {{lc}} from './{{lc}}';
+
+export default {
+  {{#each labels}}
+  {{@key}}: '{{this}}',
+  {{/each }}
+  {{lc}},
+};

From c351c315e65290955ff1687662000ba363507377 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 10:02:06 +0100
Subject: [PATCH 16/84] Fix handlebars related bugs

---
 .../quasar/components/foo/FilterComponent.vue | 28 +++++++++----------
 .../quasar/components/foo/FormComponent.vue   |  8 +++---
 .../quasar/components/foo/ListComponent.vue   |  5 ++--
 .../quasar/components/foo/ShowComponent.vue   |  4 +--
 templates/quasar/stores/foo/create.ts         |  2 +-
 templates/quasar/stores/foo/list.ts           |  2 +-
 6 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/templates/quasar/components/foo/FilterComponent.vue b/templates/quasar/components/foo/FilterComponent.vue
index caefeaf1..5f2d63ee 100644
--- a/templates/quasar/components/foo/FilterComponent.vue
+++ b/templates/quasar/components/foo/FilterComponent.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="row q-col-gutter-x-md">
     {{#each parameters}}
-      <q-input
-        v-model="item.{{name}}"
-        filled
-        :label="$t('{{lc}}.{{name}}')"
-        class="col-12 col-md"
-      >
-        <template #append>
-          <q-icon
-            name="close"
-            @click.prevent.stop="item.{{name}} = ''"
-            class="cursor-pointer"
-          />
-        </template>
-      </q-input>
+    <q-input
+      v-model="item.{{name}}"
+      filled
+      :label="$t('{{../lc}}.{{name}}')"
+      class="col-12 col-md"
+    >
+      <template #append>
+        <q-icon
+          name="close"
+          @click.prevent.stop="item.{{name}} = ''"
+          class="cursor-pointer"
+        />
+      </template>
+    </q-input>
     {{/each}}
   </div>
 </template>
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index 4c1c7958..f6d91e8e 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -5,14 +5,14 @@
       {{#if isManyRelations}}
       <FormRepeater
         :values="item.{{name}}"
-        :label="$t('{{lc}}.{{name}}')"
+        :label="$t('{{../lc}}.{{name}}')"
         class="col-12 col-md-8"
         @update="(values) => (item.{{name}} = values)"
       />
       {{else}}
       <q-input
         v-model="item.{{name}}"
-        :label="$t('{{lc}}.{{name}}')"
+        :label="$t('{{../lc}}.{{name}}')"
         :error="Boolean(violations?.{{name}})"
         :error-message="violations?.{{name}}"
         name="{{name}}"
@@ -79,9 +79,9 @@ if (props.values) {
     publicationDate: formatDateInput(props.values.publicationDate),
     {{/compare}}
     {{#if isEmbeddeds}}
-    {{name}}: props.values.{{name}}?.map((item: any) => item["@id"] ?? "") ?? [],
+    {{name}}: props.values.{{name}}?.map((item: Item) => item['@id'] ?? '') ?? [],
     {{else if embedded}}
-    {{name}}: props.values.{{name}}?.["@id"],
+    {{name}}: props.values.{{name}}?.['@id'],
     {{/if}}
     {{/each}}
   };
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 3bace9cf..974dc6ff 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -141,6 +141,7 @@ import { onBeforeUnmount, ref, watch } from 'vue';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureList } from 'src/composables/mercureList';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -174,7 +175,7 @@ const columns = [
   {
     name: '{{name}}',
     field: '{{name}}',
-    label: t('{{lc}}.{{name}}'),
+    label: t('{{../lc}}.{{name}}'),
     {{#if sortable }}
     sortable: true,
     {{/if}}
@@ -183,7 +184,7 @@ const columns = [
       return formatDateTime(value);
     },
     {{/compare}}
-  }
+  },
   {{/each }}
 ];
 
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index aeb76551..d595a809 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -16,7 +16,7 @@
       <tbody>
         {{#each fields}}
         <tr>
-          <td>\{{ $t('{{lc}}.{{name}}') }}</td>
+          <td>\{{ $t('{{../lc}}.{{name}}') }}</td>
 
           <td>
             {{#if isReferences}}
@@ -90,7 +90,7 @@
             {{/if}}
           </td>
         </tr>
-        {{/each }}
+        {{/each}}
       </tbody>
     </q-markup-table>
   </div>
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index cb50bffd..b1ed6410 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -24,7 +24,7 @@ export const use{{titleUcFirst}}CreateStore = defineStore('{{lc}}Create', {
       this.setViolations(undefined);
       this.toggleLoading();
 
-      return fetch('{{lc}}s', { method: 'POST', body: JSON.stringify(values) })
+      return fetch('{{name}}', { method: 'POST', body: JSON.stringify(values) })
         .then((response: Response) => {
           this.toggleLoading();
 
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index cb2db9fe..96740fc4 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -28,7 +28,7 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
     getItems(params: any) {
       this.toggleLoading();
 
-      return fetch('{{lc}}s', { params })
+      return fetch('{{name}}', { params })
         .then((response: Response) =>
           response.json().then((data: PagedCollection<{{titleUcFirst}}>) => ({
             data,

From 6685f1f04a35d00417e795a57497b32cedefe678 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 10:04:34 +0100
Subject: [PATCH 17/84] Replace hydra string by variable

---
 templates/quasar/stores/foo/list.ts  | 6 +++---
 templates/quasar/types/collection.ts | 8 ++++----
 templates/quasar/types/view.ts       | 8 ++++----
 templates/quasar/utils/fetch.ts      | 2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index 96740fc4..e196704e 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -38,9 +38,9 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
         .then(
           ({ data, hubUrl }: { data: PagedCollection<{{titleUcFirst}}>; hubUrl?: URL }) => {
             this.toggleLoading();
-            this.setItems(data['hydra:member']);
-            this.setTotalItems(data['hydra:totalItems'] ?? 0);
-            this.setView(data['hydra:view']);
+            this.setItems(data['{{hydraPrefix}}member']);
+            this.setTotalItems(data['{{hydraPrefix}}totalItems'] ?? 0);
+            this.setView(data['{{hydraPrefix}}view']);
 
             if (hubUrl) {
               this.setHubUrl(hubUrl);
diff --git a/templates/quasar/types/collection.ts b/templates/quasar/types/collection.ts
index c5a739dd..f710e6fd 100644
--- a/templates/quasar/types/collection.ts
+++ b/templates/quasar/types/collection.ts
@@ -4,8 +4,8 @@ export interface PagedCollection<T> {
   '@context'?: string;
   '@id'?: string;
   '@type'?: string;
-  'hydra:member': T[];
-  'hydra:search'?: object;
-  'hydra:totalItems'?: number;
-  'hydra:view': View;
+  '{{hydraPrefix}}member': T[];
+  '{{hydraPrefix}}search'?: object;
+  '{{hydraPrefix}}totalItems'?: number;
+  '{{hydraPrefix}}view': View;
 }
diff --git a/templates/quasar/types/view.ts b/templates/quasar/types/view.ts
index 9dfacb30..19cd75d1 100644
--- a/templates/quasar/types/view.ts
+++ b/templates/quasar/types/view.ts
@@ -1,7 +1,7 @@
 export interface View {
   '@id': string;
-  'hydra:first': string;
-  'hydra:last': string;
-  'hydra:next': string;
-  'hydra:previous': string;
+  '{{hydraPrefix}}first': string;
+  '{{hydraPrefix}}last': string;
+  '{{hydraPrefix}}next': string;
+  '{{hydraPrefix}}previous': string;
 }
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/fetch.ts
index 561b2407..c5d71c4b 100644
--- a/templates/quasar/utils/fetch.ts
+++ b/templates/quasar/utils/fetch.ts
@@ -36,7 +36,7 @@ export default function (id: string, options: any = {}) {
     if (response.ok) return response;
 
     return response.json().then((json) => {
-      const error = json['hydra:description'] ?? response.statusText;
+      const error = json['{{hydraPrefix}}description'] ?? response.statusText;
       if (!json.violations) throw Error(error);
 
       const errors: SubmissionErrors = { _error: error };

From 4344c4a2a3a1e44877759b141bbc24e4b2775fae Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 11:15:15 +0100
Subject: [PATCH 18/84] Fix handlebars related bugs

---
 templates/quasar/components/foo/FormComponent.vue | 6 ++++--
 templates/quasar/components/foo/ListComponent.vue | 7 ++++++-
 templates/quasar/components/foo/ShowComponent.vue | 2 ++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index f6d91e8e..9c46aacb 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -30,7 +30,7 @@
           <q-icon
             name="close"
             class="cursor-pointer"
-            @click.prevent.stop="item.{{name}} = ''"
+            @click.prevent.stop="item.{{name}} = undefined"
           />
         </template>
       </q-input>
@@ -58,9 +58,11 @@ import { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
 {{#if hasManyRelations}}
 import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
-{{/if}}
 import { Item } from 'src/types/item';
+{{/if}}
+{{#if hasDateField}}
 import { formatDateInput } from 'src/utils/date';
+{{/if}}
 
 let props = defineProps<{
   values?: {{titleUcFirst}};
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 974dc6ff..d89a3445 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -133,7 +133,9 @@ import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
 import ActionCell from 'src/components/common/ActionCellComponent.vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+{{#if hasDateField}}
 import { formatDateTime } from 'src/utils/date';
+{{/if}}
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { storeToRefs } from 'pinia';
@@ -167,7 +169,6 @@ const pagination = {
   rowsPerPage: 3, // maximum displayed rows
   rowsNumber: 10, // max number of rows
 };
-const filters = ref({});
 const columns = [
   { name: 'actions', label: t('actions'), field: '' },
   { name: 'id', field: '@id', label: t('id') },
@@ -196,6 +197,9 @@ watch(items, () => {
   nextPage.value = 1;
 });
 
+{{#if parameters.length}}
+const filters = ref({});
+
 function onSendFilter() {
   sendRequest({
     filters: filters.value,
@@ -206,6 +210,7 @@ function onSendFilter() {
 function resetFilter() {
   filters.value = {};
 }
+{{/if}}
 
 function goToCreatePage() {
   router.push({ name: '{{titleUcFirst}}Create' });
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index d595a809..615b6d35 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -105,7 +105,9 @@ import Loading from 'src/components/common/LoadingComponent.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
 import { storeToRefs } from 'pinia';
+{{#if hasDateField}}
 import { formatDateTime } from 'src/utils/date';
+{{/if}}
 import { onBeforeUnmount } from 'vue';
 import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
 import { useBreadcrumb } from 'src/composables/breadcrumb';

From c408d6a2ff7ffea8c736696a7d2dfda3c8dc293c Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 11:15:28 +0100
Subject: [PATCH 19/84] Change i18n file name

---
 templates/quasar/i18n/{main.ts => common.ts} | 3 ---
 1 file changed, 3 deletions(-)
 rename templates/quasar/i18n/{main.ts => common.ts} (64%)

diff --git a/templates/quasar/i18n/main.ts b/templates/quasar/i18n/common.ts
similarity index 64%
rename from templates/quasar/i18n/main.ts
rename to templates/quasar/i18n/common.ts
index f2a18d19..68e60200 100644
--- a/templates/quasar/i18n/main.ts
+++ b/templates/quasar/i18n/common.ts
@@ -1,8 +1,5 @@
-import {{lc}} from './{{lc}}';
-
 export default {
   {{#each labels}}
   {{@key}}: '{{this}}',
   {{/each }}
-  {{lc}},
 };

From 1062188b1f1cbe1ad44d9117d6d3c76f8ee9412a Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 12:55:59 +0100
Subject: [PATCH 20/84] Replace any by real types

---
 templates/common/utils/mercure.ts                |  6 +++---
 .../quasar/components/foo/ListComponent.vue      |  7 ++++---
 templates/quasar/composables/mercureItem.ts      |  4 ++--
 templates/quasar/composables/mercureList.ts      |  2 +-
 templates/quasar/stores/foo/list.ts              |  3 ++-
 templates/quasar/types/list.ts                   | 16 ++++++++++++++++
 6 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 templates/quasar/types/list.ts

diff --git a/templates/common/utils/mercure.ts b/templates/common/utils/mercure.ts
index 250dd1eb..25f45640 100644
--- a/templates/common/utils/mercure.ts
+++ b/templates/common/utils/mercure.ts
@@ -21,13 +21,13 @@ export const mercureSubscribe = (
   return eventSource;
 };
 
-export const extractHubURL = (response: Response): URL | null => {
+export const extractHubURL = (response: Response): URL | undefined => {
   const linkHeader = response.headers.get("Link");
-  if (!linkHeader) return null;
+  if (!linkHeader) return undefined;
 
   const matches = linkHeader.match(
     /<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/
   );
 
-  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : null;
+  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : undefined;
 };
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index d89a3445..8ea9636a 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -139,11 +139,12 @@ import { formatDateTime } from 'src/utils/date';
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { storeToRefs } from 'pinia';
-import { onBeforeUnmount, ref, watch } from 'vue';
+import { onBeforeUnmount, Ref, ref, watch } from 'vue';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureList } from 'src/composables/mercureList';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { Pagination{{#if parameters.length}}, Filters{{/if}} } from 'src/types/list';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -162,7 +163,7 @@ async function sendRequest(params = {}) {
 useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
 
 const nextPage = ref(1);
-const pagination = {
+const pagination: Pagination = {
   sortBy: undefined,
   descending: false,
   page: 1, // page to be displayed
@@ -198,7 +199,7 @@ watch(items, () => {
 });
 
 {{#if parameters.length}}
-const filters = ref({});
+const filters: Ref<Filters> = ref({});
 
 function onSendFilter() {
   sendRequest({
diff --git a/templates/quasar/composables/mercureItem.ts b/templates/quasar/composables/mercureItem.ts
index 55186bfd..d2b427b9 100644
--- a/templates/quasar/composables/mercureItem.ts
+++ b/templates/quasar/composables/mercureItem.ts
@@ -26,7 +26,7 @@ export function useMercureItem({
 
   let mercureSub: EventSource | null = null;
 
-  store.$subscribe((mutation: any, state: any) => {
+  store.$subscribe((mutation, state) => {
     if (!state.hubUrl) {
       return;
     }
@@ -46,7 +46,7 @@ export function useMercureItem({
     );
   });
 
-  deleteStore.$subscribe((mutation: any, state: any) => {
+  deleteStore.$subscribe((mutation, state) => {
     if (state.mercureDeleted) {
       router.push({ name: redirectRouteName });
     }
diff --git a/templates/quasar/composables/mercureList.ts b/templates/quasar/composables/mercureList.ts
index f35821ef..e838cd93 100644
--- a/templates/quasar/composables/mercureList.ts
+++ b/templates/quasar/composables/mercureList.ts
@@ -22,7 +22,7 @@ export function useMercureList({
 
   let mercureSub: EventSource | null = null;
 
-  store.$subscribe((mutation: any, state: any) => {
+  store.$subscribe((mutation, state) => {
     if (!state.hubUrl) {
       return;
     }
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index e196704e..f4d77fcd 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -4,6 +4,7 @@ import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { View } from 'src/types/view';
 import { extractHubURL } from 'src/utils/mercure';
 import type { PagedCollection } from 'src/types/collection';
+import { ListParams } from 'src/types/list';
 
 interface State {
   items: {{titleUcFirst}}[];
@@ -25,7 +26,7 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
   }),
 
   actions: {
-    getItems(params: any) {
+    getItems(params: ListParams) {
       this.toggleLoading();
 
       return fetch('{{name}}', { params })
diff --git a/templates/quasar/types/list.ts b/templates/quasar/types/list.ts
new file mode 100644
index 00000000..eca0b425
--- /dev/null
+++ b/templates/quasar/types/list.ts
@@ -0,0 +1,16 @@
+export interface Pagination {
+  sortBy?: string;
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  rowsNumber: number;
+}
+
+export interface Filters {
+  [key: string]: string;
+}
+
+export interface ListParams {
+  pagination?: Pagination;
+  filters?: Filters;
+}

From 8bca3c300faef18fe6a1cf62c88099ccc4a751ac Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Mon, 21 Nov 2022 19:01:58 +0100
Subject: [PATCH 21/84] Update notification management

---
 .../quasar/components/foo/UpdateComponent.vue |  5 ++--
 templates/quasar/composables/errors.ts        |  7 ++---
 templates/quasar/composables/notifications.ts | 30 +++++++++++++++++++
 templates/quasar/utils/notifications.ts       | 22 --------------
 4 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 templates/quasar/composables/notifications.ts
 delete mode 100644 templates/quasar/utils/notifications.ts

diff --git a/templates/quasar/components/foo/UpdateComponent.vue b/templates/quasar/components/foo/UpdateComponent.vue
index 05d65a97..ff6ff8f8 100644
--- a/templates/quasar/components/foo/UpdateComponent.vue
+++ b/templates/quasar/components/foo/UpdateComponent.vue
@@ -28,7 +28,7 @@ import { storeToRefs } from 'pinia';
 import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
 import { onBeforeUnmount } from 'vue';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { displaySuccessNotification } from 'src/utils/notifications';
+import { useNotifications } from 'src/composables/notifications';
 import { useI18n } from 'vue-i18n';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
@@ -38,6 +38,7 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const breadcrumb = useBreadcrumb();
+const { displaySuccessNotification } = useNotifications();
 
 const {{lc}}UpdateStore = use{{titleUcFirst}}UpdateStore();
 const {
@@ -78,7 +79,7 @@ async function submitForm(item: {{titleUcFirst}}) {
     return;
   }
 
-  displaySuccessNotification(`${item['@id']} ${t('updated')}.`, t('close'));
+  displaySuccessNotification(`${item['@id']} ${t('updated')}.`);
 }
 
 useWatchErrors([error, deleteError]);
diff --git a/templates/quasar/composables/errors.ts b/templates/quasar/composables/errors.ts
index 01224a3c..2ed28288 100644
--- a/templates/quasar/composables/errors.ts
+++ b/templates/quasar/composables/errors.ts
@@ -1,11 +1,10 @@
 import { Ref, watch } from 'vue';
-import { displayErrorNotification } from 'src/utils/notifications';
-import { useI18n } from 'vue-i18n';
+import { useNotifications } from './notifications';
 
 export function useWatchErrors(
   errors: (Ref<string | undefined> | undefined)[]
 ) {
-  const { t } = useI18n();
+  const { displayErrorNotification } = useNotifications();
 
   watch(errors, (newErrors) => {
     newErrors.forEach((newError) => {
@@ -13,7 +12,7 @@ export function useWatchErrors(
         return;
       }
 
-      displayErrorNotification(newError.value, t('close'));
+      displayErrorNotification(newError.value);
     });
   });
 }
diff --git a/templates/quasar/composables/notifications.ts b/templates/quasar/composables/notifications.ts
new file mode 100644
index 00000000..7eb075ff
--- /dev/null
+++ b/templates/quasar/composables/notifications.ts
@@ -0,0 +1,30 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useNotifications() {
+  const $q = useQuasar();
+  const { t } = useI18n();
+
+  const displayErrorNotification = (message: string) => {
+    $q.notify({
+      message,
+      color: 'red',
+      icon: 'error',
+      closeBtn: t('close'),
+    });
+  };
+
+  const displaySuccessNotification = (message: string) => {
+    $q.notify({
+      message,
+      color: 'green',
+      icon: 'tag_faces',
+      closeBtn: t('close'),
+    });
+  };
+
+  return {
+    displayErrorNotification,
+    displaySuccessNotification,
+  };
+}
diff --git a/templates/quasar/utils/notifications.ts b/templates/quasar/utils/notifications.ts
deleted file mode 100644
index 2efa0483..00000000
--- a/templates/quasar/utils/notifications.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Notify } from 'quasar';
-
-export function displayErrorNotification(message: string, closeLabel: string) {
-  Notify.create({
-    message,
-    color: 'red',
-    icon: 'error',
-    closeBtn: closeLabel,
-  });
-}
-
-export function displaySuccessNotification(
-  message: string,
-  closeLabel: string
-) {
-  Notify.create({
-    message,
-    color: 'green',
-    icon: 'tag_faces',
-    closeBtn: closeLabel,
-  });
-}

From 51a0edc61553831bd9b4e7e95d7e55920b4cba48 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Mon, 21 Nov 2022 19:03:17 +0100
Subject: [PATCH 22/84] Fix display bugs

---
 .../quasar/components/common/BreadcrumbComponent.vue |  2 +-
 .../components/common/ConfirmDeleteComponent.vue     |  2 +-
 templates/quasar/components/foo/FormComponent.vue    |  2 +-
 templates/quasar/components/foo/ListComponent.vue    | 12 ++++++------
 templates/quasar/components/foo/ShowComponent.vue    |  4 ++--
 templates/quasar/types/foo.ts                        |  2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/templates/quasar/components/common/BreadcrumbComponent.vue b/templates/quasar/components/common/BreadcrumbComponent.vue
index afa0ca82..b44ea63a 100644
--- a/templates/quasar/components/common/BreadcrumbComponent.vue
+++ b/templates/quasar/components/common/BreadcrumbComponent.vue
@@ -5,7 +5,7 @@
     <q-breadcrumbs-el
       v-for="(breadcrumb, index) in props.values"
       :key="index"
-      :label="`${$t(breadcrumb.label)} ${
+      :label="`${breadcrumb.label} ${
         index === props.values.length - 1 && props.item?.['@id']
           ? props.item['@id']
           : ''
diff --git a/templates/quasar/components/common/ConfirmDeleteComponent.vue b/templates/quasar/components/common/ConfirmDeleteComponent.vue
index 7f91323e..441d81da 100644
--- a/templates/quasar/components/common/ConfirmDeleteComponent.vue
+++ b/templates/quasar/components/common/ConfirmDeleteComponent.vue
@@ -5,7 +5,7 @@
         <q-avatar icon="warning" color="primary" text-color="white" />
 
         <span class="q-ml-sm">
-          \{{ $t('Are you sure you want to delete this item?') }}
+          \{{ $t('confirmDelete') }}
         </span>
       </q-card-section>
 
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index 9c46aacb..c459374c 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -24,7 +24,7 @@
         {{/compare}}
         bottom-slots
         filled
-        class="col-12 col-md"
+        class="col-12 col-md-4"
       >
         <template #append>
           <q-icon
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 8ea9636a..74a54a7f 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -25,10 +25,10 @@
     :rows="items"
     :columns="columns"
     :loading="isLoading"
-    :no-data-label="$t('{{{labels.unavail}}}')"
-    :no-results-label="$t('{{{labels.noresults}}}')"
-    :loading-label="$t('{{{labels.loading}}}')"
-    :rows-per-page-label="$t('{{{labels.recPerPage}}}')"
+    :no-data-label="$t('unavail')"
+    :no-results-label="$t('noresults')"
+    :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recPerPage')"
     row-key="id"
     flat
     wrap-cells
@@ -45,7 +45,7 @@
 
     {{#each fields}}
     {{#if isReferences}}
-    <template #body-cell-{{lowercase reference.title}}="{ value }">
+    <template #body-cell-{{reference.name}}="{ value }">
       <td>
         <template v-if="router.hasRoute('{{reference.title}}Show')">
           <router-link
@@ -82,7 +82,7 @@
       </td>
     </template>
     {{else if isEmbeddeds}}
-    <template #body-cell-{{lowercase embedded.title}}="{ value }">
+    <template #body-cell-{{embedded.name}}="{ value }">
       <td>
         <template v-if="router.hasRoute('{{embedded.title}}Show')">
           <router-link
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index 615b6d35..7d0b4c68 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -9,8 +9,8 @@
     <q-markup-table>
       <thead>
         <tr>
-          <th>\{{ $t('{{labels.field}}') }}</th>
-          <th>\{{ $t('{{labels.value}}') }}</th>
+          <th>\{{ $t('field') }}</th>
+          <th>\{{ $t('value') }}</th>
         </tr>
       </thead>
       <tbody>
diff --git a/templates/quasar/types/foo.ts b/templates/quasar/types/foo.ts
index 39ee8198..bbcda1a8 100644
--- a/templates/quasar/types/foo.ts
+++ b/templates/quasar/types/foo.ts
@@ -2,6 +2,6 @@ import type { Item } from "./item";
 
 export interface {{titleUcFirst}} extends Item {
 {{#each fields}}
- {{#if readonly}}readonly{{/if}} {{{name}}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelations}}any{{else}}{{{type}}}{{/if}};
+ {{#if readonly}}readonly{{/if}} {{name}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelations}}any{{else}}{{type}}{{/if}};
 {{/each}}
 }

From 27dc51367615bc0882af09ebec13fae762c551eb Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Mon, 21 Nov 2022 19:14:27 +0100
Subject: [PATCH 23/84] Update generator from Quasar v1 to v2

---
 src/generators/QuasarGenerator.js | 565 ++++++++++--------------------
 1 file changed, 180 insertions(+), 385 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index be5d44ce..f988f6b7 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -1,7 +1,6 @@
 import chalk from "chalk";
 import handlebars from "handlebars";
 import hbh_comparison from "handlebars-helpers/lib/comparison.js";
-import hbh_array from "handlebars-helpers/lib/array.js";
 import hbh_string from "handlebars-helpers/lib/string.js";
 import BaseGenerator from "./BaseGenerator.js";
 
@@ -9,117 +8,73 @@ export default class extends BaseGenerator {
   constructor(params) {
     super(params);
 
+    this.registerTemplates("common/", [
+      // utils
+      "utils/mercure.ts",
+    ]);
+
     this.registerTemplates(`quasar/`, [
-      // modules
-      "store/modules/foo/index.js",
-      "store/modules/foo/create/actions.js",
-      "store/modules/foo/create/getters.js",
-      "store/modules/foo/create/index.js",
-      "store/modules/foo/create/mutation_types.js",
-      "store/modules/foo/create/mutations.js",
-      "store/modules/foo/create/state.js",
-      "store/modules/foo/delete/actions.js",
-      "store/modules/foo/delete/getters.js",
-      "store/modules/foo/delete/index.js",
-      "store/modules/foo/delete/mutation_types.js",
-      "store/modules/foo/delete/mutations.js",
-      "store/modules/foo/delete/state.js",
-      "store/modules/foo/list/actions.js",
-      "store/modules/foo/list/getters.js",
-      "store/modules/foo/list/index.js",
-      "store/modules/foo/list/mutation_types.js",
-      "store/modules/foo/list/mutations.js",
-      "store/modules/foo/list/state.js",
-      "store/modules/foo/show/actions.js",
-      "store/modules/foo/show/getters.js",
-      "store/modules/foo/show/index.js",
-      "store/modules/foo/show/mutation_types.js",
-      "store/modules/foo/show/mutations.js",
-      "store/modules/foo/show/state.js",
-      "store/modules/foo/update/actions.js",
-      "store/modules/foo/update/getters.js",
-      "store/modules/foo/update/index.js",
-      "store/modules/foo/update/mutation_types.js",
-      "store/modules/foo/update/mutations.js",
-      "store/modules/foo/update/state.js",
-
-      // common for modules
-      "common/store/mutation_types.js",
-      "common/store/create/actions.js",
-      "common/store/create/getters.js",
-      "common/store/create/mutation_types.js",
-      "common/store/create/mutations.js",
-      "common/store/create/state.js",
-      "common/store/delete/actions.js",
-      "common/store/delete/getters.js",
-      "common/store/delete/mutation_types.js",
-      "common/store/delete/mutations.js",
-      "common/store/delete/state.js",
-      "common/store/list/actions.js",
-      "common/store/list/getters.js",
-      "common/store/list/mutation_types.js",
-      "common/store/list/mutations.js",
-      "common/store/list/state.js",
-      "common/store/show/actions.js",
-      "common/store/show/getters.js",
-      "common/store/show/mutation_types.js",
-      "common/store/show/mutations.js",
-      "common/store/show/state.js",
-      "common/store/update/actions.js",
-      "common/store/update/getters.js",
-      "common/store/update/mutation_types.js",
-      "common/store/update/mutations.js",
-      "common/store/update/state.js",
+      // common components
+      "components/common/ActionCellComponent.vue",
+      "components/common/BreadcrumbComponent.vue",
+      "components/common/ConfirmDeleteComponent.vue",
+      "components/common/DataFilterComponent.vue",
+      "components/common/FormRepeaterComponent.vue",
+      "components/common/LoadingComponent.vue",
+      "components/common/ToolbarComponent.vue",
 
       // components
-      "components/foo/Create.vue",
-      "components/foo/Filter.vue",
-      "components/foo/Form.vue",
-      "components/foo/List.vue",
-      "components/foo/Update.vue",
-      "components/foo/Show.vue",
-
-      //common components
-      "common/components/index.js",
-      "common/components/ActionCell.vue",
-      "common/components/Breadcrumb.vue",
-      "common/components/ConfirmDelete.vue",
-      "common/components/DataFilter.vue",
-      "common/components/InputDate.vue",
-      "common/components/Loading.vue",
-      "common/components/Toolbar.vue",
-
-      // components mixins
-      "common/mixins/CreateMixin.js",
-      "common/mixins/ListMixin.js",
-      "common/mixins/ShowMixin.js",
-      "common/mixins/UpdateMixin.js",
-
-      // routes
-      "router/foo.js",
+      "components/foo/CreateComponent.vue",
+      "components/foo/FilterComponent.vue",
+      "components/foo/FormComponent.vue",
+      "components/foo/ListComponent.vue",
+      "components/foo/ShowComponent.vue",
+      "components/foo/UpdateComponent.vue",
+
+      // composables
+      "composables/breadcrumb.ts",
+      "composables/errors.ts",
+      "composables/mercureItem.ts",
+      "composables/mercureList.ts",
+      "composables/notifications.ts",
 
-      // error
-      "error/SubmissionError.js",
+      // i18n
+      "i18n/foo.ts",
+      "i18n/common.ts",
+
+      // pages
+      "pages/foo/CreatePage.vue",
+      "pages/foo/ListPage.vue",
+      "pages/foo/ShowPage.vue",
+      "pages/foo/UpdatePage.vue",
+
+      // router
+      "router/foo.ts",
+
+      // stores
+      "stores/foo/create.ts",
+      "stores/foo/delete.ts",
+      "stores/foo/list.ts",
+      "stores/foo/show.ts",
+      "stores/foo/update.ts",
+
+      // types
+      "types/breadcrumb.ts",
+      "types/collection.ts",
+      "types/error.ts",
+      "types/foo.ts",
+      "types/item.ts",
+      "types/list.ts",
+      "types/view.ts",
 
       // utils
-      "utils/fetch.js",
-      "utils/dates.js",
-      "utils/notify.js",
-      "utils/vuexer.js",
-
-      // i18n
-      "i18n/index.js",
+      "utils/date.ts",
+      "utils/fetch.ts",
     ]);
 
     handlebars.registerHelper("compare", hbh_comparison.compare);
-    handlebars.registerHelper("ifEven", hbh_comparison.ifEven);
-    handlebars.registerHelper("ifOdd", hbh_comparison.ifOdd);
-    handlebars.registerHelper("inArray", hbh_array.inArray);
-    handlebars.registerHelper("forEach", hbh_array.forEach);
     handlebars.registerHelper("lowercase", hbh_string.lowercase);
     handlebars.registerHelper("capitalize", hbh_string.capitalize);
-
-    this.registerSwitchHelper();
   }
 
   help(resource) {
@@ -134,122 +89,38 @@ export default class extends BaseGenerator {
     );
     console.log(
       chalk.green(`
-//Add to quasar.conf
-// 1. in 'framework.components'
-  'QTable',
-  'QTh',
-  'QTr',
-  'QTd',
-  'QBreadcrumbs',
-  'QBreadcrumbsEl',
-  'QSpace',
-  'QInput',
-  'QForm',
-  'QSelect',
-  'QMarkupTable',
-  'QDate',
-  'QTime',
-  'QCheckbox',
-  'QPopupProxy',
-  'QSpinner',
-  'QInnerLoading',
-  'QCard',
-  'QCardSection',
-  'QCardActions',
-  'QExpansionItem',
-  'QDialog',
-  'QAvatar',
-
-// 2. in 'framework.config', customize later
+// Add to quasar.conf
+// 1. in 'framework.config', can be customized later
 notify: {
   position: 'top',
   multiLine: true,
   timeout: 0,
 },
 
-// 3. in 'framework.directives
-  'ClosePopup'
-
-// 4. in 'framework.plugins
+// 2. in 'framework.plugins
   'Notify'
 
-//import routes
-import ${titleLc}Routes from '../router/${titleLc}';
+// Import routes in src/router/routes.ts
+import ${titleLc}Routes from './${titleLc}';
 
-// Add routes to VueRouter
-const router = new VueRouter({
+const routes: RouteRecordRaw[] = [
   // ...
-  routes: [
-      ...${titleLc}Routes,
-  ]
-});
+  ...${titleLc}Routes,
+];
 
-// Add the modules in the store
-import ${titleLc} from '../store/modules/${titleLc}/';
+// import translations in src/i18n/en-US/index.ts
+import common from './common';
+import ${titleLc} from './${titleLc}';
 
-export const store = new Vuex.Store({
+export default {
   // ...
-  modules: {
-    ${titleLc}
-  }
-});
+  ...common,
+  ${titleLc},
+}
 `)
     );
   }
 
-  registerSwitchHelper() {
-    /*
-      https://github.com/wycats/handlebars.js/issues/927#issuecomment-318640459
-
-      {{#switch state}}
-        {{#case "page1" "page2"}}page 1 or 2{{/case}}
-        {{#case "page3"}}page3{{/case}}
-        {{#case "page4"}}page4{{/case}}
-        {{#case "page5"}}
-          {{#switch s}}
-            {{#case "3"}}s = 3{{/case}}
-            {{#case "2"}}s = 2{{/case}}
-            {{#case "1"}}s = 1{{/case}}
-            {{#default}}unknown{{/default}}
-          {{/switch}}
-        {{/case}}
-        {{#default}}page0{{/default}}
-      {{/switch}}
-    */
-    handlebars.__switch_stack__ = [];
-
-    handlebars.registerHelper("switch", function (value, options) {
-      handlebars.__switch_stack__.push({
-        switch_match: false,
-        switch_value: value,
-      });
-      let html = options.fn(this);
-      handlebars.__switch_stack__.pop();
-      return html;
-    });
-    handlebars.registerHelper("case", function (value, options) {
-      var args = Array.from(arguments);
-      options = args.pop();
-      var caseValues = args;
-      var stack =
-        handlebars.__switch_stack__[handlebars.__switch_stack__.length - 1];
-
-      if (stack.switch_match || caseValues.indexOf(stack.switch_value) === -1) {
-        return "";
-      } else {
-        stack.switch_match = true;
-        return options.fn(this);
-      }
-    });
-    handlebars.registerHelper("default", function (options) {
-      var stack =
-        handlebars.__switch_stack__[handlebars.__switch_stack__.length - 1];
-      if (!stack.switch_match) {
-        return options.fn(this);
-      }
-    });
-  }
-
   generate(api, resource, dir) {
     return resource
       .getParameters()
@@ -300,36 +171,20 @@ export const store = new Vuex.Store({
     return result;
   }
 
-  printObject(obj) {
-    var cache = [];
-    console.log(
-      JSON.stringify(obj, function (key, value) {
-        if (typeof value === "object" && value !== null) {
-          if (cache.includes(value)) {
-            // Duplicate reference found, discard key
-            return;
-          }
-          // Store value in our collection
-          cache.push(value);
-        }
-        return value;
-      })
-    );
-    cache = null;
-  }
-
   generateFiles(api, resource, dir, params) {
     const lc = resource.title.toLowerCase();
     const titleUcFirst =
       resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
 
-    const formFields = this.buildFields(resource.writableFields);
-
-    const dateTypes = ["time", "date", "dateTime"];
-    const formContainsDate = formFields.some((e) => dateTypes.includes(e.type));
-
-    const fields = this.buildFields(resource.readableFields);
-    const listContainsDate = fields.some((e) => dateTypes.includes(e.type));
+    const { fields } = this.parseFields(resource);
+    const formFields = this.buildFields(fields);
+    const hasRelations = fields.some(
+      (field) => field.reference || field.embedded
+    );
+    const hasManyRelations = fields.some(
+      (field) => field.isReferences || field.isEmbeddeds
+    );
+    const hasDateField = fields.some((field) => field.type === "dateTime");
 
     const parameters = [];
     params.forEach((p) => {
@@ -361,13 +216,6 @@ export const store = new Vuex.Store({
           }
           return;
         }
-
-        if (!p.name) {
-          p = { ...p, name: p.variable };
-        }
-        if (!p.sortable) {
-          parameters.push(p);
-        }
       } else {
         const param = fields[paramIndex];
         param.multiple = p.multiple;
@@ -375,160 +223,101 @@ export const store = new Vuex.Store({
       }
     });
 
-    const paramsHaveRefs = parameters.some(
-      (e) => e.type === "text" && e.reference
-    );
-
     const labels = this.commonLabelTexts();
 
-    const hashEntry = this.hashCode(api.entrypoint);
-
     const context = {
-      title: resource.title,
       name: resource.name,
       lc,
-      uc: resource.title.toUpperCase(),
       fields,
-      dateTypes,
-      listContainsDate,
-      paramsHaveRefs,
+      hasRelations,
+      hasManyRelations,
+      hasDateField,
       parameters,
       formFields,
-      formContainsDate,
       hydraPrefix: this.hydraPrefix,
       titleUcFirst,
       labels,
-      hashEntry,
     };
 
     // Create directories
     // These directories may already exist
     [
+      `${dir}/components/common`,
+      `${dir}/composables`,
       `${dir}/config`,
-      `${dir}/error`,
-      `${dir}/router`,
+      `${dir}/types`,
       `${dir}/utils`,
-      `${dir}/i18n`,
-      `${dir}/i18n/en-us`,
-
-      `${dir}/common`,
-      `${dir}/common/components`,
-      `${dir}/common/mixins`,
-      `${dir}/common/store`,
-      `${dir}/common/store/create`,
-      `${dir}/common/store/delete`,
-      `${dir}/common/store/list`,
-      `${dir}/common/store/show`,
-      `${dir}/common/store/update`,
     ].forEach((dir) => this.createDir(dir, false));
 
     [
-      `${dir}/store/modules/${lc}`,
-      `${dir}/store/modules/${lc}/create`,
-      `${dir}/store/modules/${lc}/delete`,
-      `${dir}/store/modules/${lc}/list`,
-      `${dir}/store/modules/${lc}/show`,
-      `${dir}/store/modules/${lc}/update`,
-
       `${dir}/components/${lc}`,
+      `${dir}/pages/${lc}`,
+      `${dir}/stores/${lc}`,
     ].forEach((dir) => this.createDir(dir));
 
     [
-      "common/components/index.js",
-      "common/components/ActionCell.vue",
-      "common/components/Breadcrumb.vue",
-      "common/components/ConfirmDelete.vue",
-      "common/components/DataFilter.vue",
-      "common/components/InputDate.vue",
-      "common/components/Loading.vue",
-      "common/components/Toolbar.vue",
-
-      "common/mixins/CreateMixin.js",
-      "common/mixins/ListMixin.js",
-      "common/mixins/ShowMixin.js",
-      "common/mixins/UpdateMixin.js",
-
-      "common/store/mutation_types.js",
-      "common/store/create/actions.js",
-      "common/store/create/getters.js",
-      "common/store/create/mutation_types.js",
-      "common/store/create/mutations.js",
-      "common/store/create/state.js",
-      "common/store/delete/actions.js",
-      "common/store/delete/getters.js",
-      "common/store/delete/mutation_types.js",
-      "common/store/delete/mutations.js",
-      "common/store/delete/state.js",
-      "common/store/list/actions.js",
-      "common/store/list/getters.js",
-      "common/store/list/mutation_types.js",
-      "common/store/list/mutations.js",
-      "common/store/list/state.js",
-      "common/store/show/actions.js",
-      "common/store/show/getters.js",
-      "common/store/show/mutation_types.js",
-      "common/store/show/mutations.js",
-      "common/store/show/state.js",
-      "common/store/update/actions.js",
-      "common/store/update/getters.js",
-      "common/store/update/mutation_types.js",
-      "common/store/update/mutations.js",
-      "common/store/update/state.js",
-
-      "utils/dates.js",
-      "utils/notify.js",
-      "utils/vuexer.js",
+      // common components
+      "components/common/ActionCellComponent.vue",
+      "components/common/BreadcrumbComponent.vue",
+      "components/common/ConfirmDeleteComponent.vue",
+      "components/common/DataFilterComponent.vue",
+      "components/common/FormRepeaterComponent.vue",
+      "components/common/LoadingComponent.vue",
+      "components/common/ToolbarComponent.vue",
+
+      // composables
+      "composables/breadcrumb.ts",
+      "composables/errors.ts",
+      "composables/mercureItem.ts",
+      "composables/mercureList.ts",
+      "composables/notifications.ts",
+
+      // types
+      "types/breadcrumb.ts",
+      "types/collection.ts",
+      "types/error.ts",
+      "types/item.ts",
+      "types/list.ts",
+      "types/view.ts",
+
+      // utils
+      "utils/date.ts",
+      "utils/fetch.ts",
+      "utils/mercure.ts",
     ].forEach((common) =>
       this.createFile(common, `${dir}/${common}`, context, false)
     );
 
     [
-      // modules
-      "store/modules/%s/index.js",
-      "store/modules/%s/create/actions.js",
-      "store/modules/%s/create/getters.js",
-      "store/modules/%s/create/index.js",
-      "store/modules/%s/create/mutation_types.js",
-      "store/modules/%s/create/mutations.js",
-      "store/modules/%s/create/state.js",
-      "store/modules/%s/delete/actions.js",
-      "store/modules/%s/delete/getters.js",
-      "store/modules/%s/delete/index.js",
-      "store/modules/%s/delete/mutation_types.js",
-      "store/modules/%s/delete/mutations.js",
-      "store/modules/%s/delete/state.js",
-      "store/modules/%s/list/actions.js",
-      "store/modules/%s/list/getters.js",
-      "store/modules/%s/list/index.js",
-      "store/modules/%s/list/mutation_types.js",
-      "store/modules/%s/list/mutations.js",
-      "store/modules/%s/list/state.js",
-      "store/modules/%s/show/actions.js",
-      "store/modules/%s/show/getters.js",
-      "store/modules/%s/show/index.js",
-      "store/modules/%s/show/mutation_types.js",
-      "store/modules/%s/show/mutations.js",
-      "store/modules/%s/show/state.js",
-      "store/modules/%s/update/actions.js",
-      "store/modules/%s/update/getters.js",
-      "store/modules/%s/update/index.js",
-      "store/modules/%s/update/mutation_types.js",
-      "store/modules/%s/update/mutations.js",
-      "store/modules/%s/update/state.js",
-
       // components
-      "components/%s/Create.vue",
-      "components/%s/Filter.vue",
-      "components/%s/Form.vue",
-      "components/%s/List.vue",
-      "components/%s/Update.vue",
-      "components/%s/Show.vue",
+      "components/%s/CreateComponent.vue",
+      "components/%s/FilterComponent.vue",
+      "components/%s/FormComponent.vue",
+      "components/%s/ListComponent.vue",
+      "components/%s/ShowComponent.vue",
+      "components/%s/UpdateComponent.vue",
+
+      // pages
+      "pages/%s/CreatePage.vue",
+      "pages/%s/ListPage.vue",
+      "pages/%s/ShowPage.vue",
+      "pages/%s/UpdatePage.vue",
 
       // routes
-      "router/%s.js",
+      "router/%s.ts",
+
+      // stores
+      "stores/%s/create.ts",
+      "stores/%s/delete.ts",
+      "stores/%s/list.ts",
+      "stores/%s/show.ts",
+      "stores/%s/update.ts",
+
+      // types
+      "types/%s.ts",
     ].forEach((pattern) => {
       if (
-        pattern === "components/%s/Filter.vue" &&
+        pattern === "components/%s/FilterComponent.vue" &&
         !context.parameters.length
       ) {
         return;
@@ -536,53 +325,28 @@ export const store = new Vuex.Store({
       this.createFileFromPattern(pattern, dir, lc, context);
     });
 
-    // error
-    this.createFile(
-      "error/SubmissionError.js",
-      `${dir}/error/SubmissionError.js`,
-      context,
-      false
-    );
-
-    this.createEntrypoint(
-      api.entrypoint,
-      `${dir}/config/${hashEntry}_entrypoint.js`
-    );
-
-    this.createFile(
-      "utils/fetch.js",
-      `${dir}/utils/fetch.js`,
-      { hydraPrefix: this.hydraPrefix },
-      false
-    );
+    // entrypoint
+    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.ts`);
 
     this.createFile(
-      "i18n/index.js",
-      `${dir}/i18n/en-us/index.js`,
-      { labels: Object.values(labels) },
+      "i18n/common.ts",
+      `${dir}/i18n/en-US/common.ts`,
+      { labels },
       false
     );
 
     const contextLabels = {
       labels: this.contextLabelTexts(formFields, fields),
     };
+
     this.createFile(
-      "i18n/index.js",
-      `${dir}/i18n/en-us/${lc}.js`,
+      "i18n/foo.ts",
+      `${dir}/i18n/en-US/${lc}.ts`,
       contextLabels,
       false
     );
   }
 
-  hashCode(s) {
-    return Math.abs(
-      Array.from(s).reduce(
-        (s, c) => (Math.imul(31, s) + c.charCodeAt(0)) | 0,
-        0
-      )
-    );
-  }
-
   contextLabelTexts(formFields, fields) {
     let texts = [];
     formFields.forEach((x) => texts.push(x.name)); // forms
@@ -611,8 +375,39 @@ export const store = new Vuex.Store({
       stringValidation: "Please type something",
       required: "Field is required",
       recPerPage: "Records per page:",
+      id: "ID",
+      actions: "Actions",
     };
+  }
+
+  parseFields(resource) {
+    const fields = [
+      ...resource.writableFields,
+      ...resource.readableFields,
+    ].reduce((list, field) => {
+      if (list[field.name]) {
+        return list;
+      }
 
-    // handlebars.registerPartial("myPartial", "{{name}}");
+      const isReferences = Boolean(
+        field.reference && field.maxCardinality !== 1
+      );
+      const isEmbeddeds = Boolean(field.embedded && field.maxCardinality !== 1);
+
+      return {
+        ...list,
+        [field.name]: {
+          ...field,
+          isReferences,
+          isEmbeddeds,
+          isRelations: field.reference || field.embedded,
+          isManyRelations: isEmbeddeds || isReferences,
+        },
+      };
+    }, {});
+
+    const fieldsArray = Object.values(fields);
+
+    return { fields: fieldsArray };
   }
 }

From 6b14a5727604dabeb53d5b7e620b87cc73446f4d Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Mon, 21 Nov 2022 20:10:07 +0100
Subject: [PATCH 24/84] Fix small details

---
 src/generators/QuasarGenerator.js                 | 2 +-
 templates/quasar/components/foo/FormComponent.vue | 2 +-
 templates/quasar/components/foo/ListComponent.vue | 3 +--
 templates/quasar/components/foo/ShowComponent.vue | 8 ++++----
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index f988f6b7..8fa1ed71 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -89,7 +89,7 @@ export default class extends BaseGenerator {
     );
     console.log(
       chalk.green(`
-// Add to quasar.conf
+// Add to quasar.config.js
 // 1. in 'framework.config', can be customized later
 notify: {
   position: 'top',
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index c459374c..2e6d5a81 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -11,7 +11,7 @@
       />
       {{else}}
       <q-input
-        v-model="item.{{name}}"
+        v-model{{#compare type "==" "number" }}.number{{/compare}}="item.{{name}}"
         :label="$t('{{../lc}}.{{name}}')"
         :error="Boolean(violations?.{{name}})"
         :error-message="violations?.{{name}}"
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 74a54a7f..e11f363c 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -42,7 +42,6 @@
         @delete="deleteItem(row)"
       />
     </template>
-
     {{#each fields}}
     {{#if isReferences}}
     <template #body-cell-{{reference.name}}="{ value }">
@@ -139,7 +138,7 @@ import { formatDateTime } from 'src/utils/date';
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { storeToRefs } from 'pinia';
-import { onBeforeUnmount, Ref, ref, watch } from 'vue';
+import { onBeforeUnmount{{#if parameters.length}}, Ref{{/if}}, ref, watch } from 'vue';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureList } from 'src/composables/mercureList';
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index 7d0b4c68..b72fad2b 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -58,7 +58,7 @@
                 :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
                 :key="{{lowercase embedded.title}}['@id']"
               >
-                \{{ {{lowercase embedded.title}}["@id"] }}
+                \{{ {{lowercase embedded.title}}['@id'] }}
 
                 <br />
               </router-link>
@@ -69,7 +69,7 @@
                 v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
                 :key="{{lowercase embedded.title}}['@id']"
               >
-                \{{ {{lowercase embedded.title}}["@id"] }}
+                \{{ {{lowercase embedded.title}}['@id'] }}
               </p>
             </template>
             {{else if embedded}}
@@ -77,11 +77,11 @@
               v-if="router.hasRoute('{{embedded.title}}Show')"
               :to="{ name: '{{embedded.title}}Show', params: { id: item.{{lowercase embedded.title}}['@id'] } }"
             >
-              \{{ item.{{lowercase embedded.title}}["@id"] }}
+              \{{ item.{{lowercase embedded.title}}['@id'] }}
             </router-link>
 
             <p v-else>
-              \{{ item.{{lowercase embedded.title}}["@id"] }}
+              \{{ item.{{lowercase embedded.title}}['@id'] }}
             </p>
             {{else if (compare type "==" "dateTime") }}
             \{{ formatDateTime(item.{{name}}) }}

From aba5961e31d3484edb2ebf84b9aac9d203a86797 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 24 Nov 2022 15:01:15 +0100
Subject: [PATCH 25/84] Update Quasar tests

---
 src/generators/QuasarGenerator.js      |  13 +--
 src/generators/QuasarGenerator.test.js | 108 +++++++++++++------------
 2 files changed, 64 insertions(+), 57 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 8fa1ed71..cf77b384 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -13,7 +13,7 @@ export default class extends BaseGenerator {
       "utils/mercure.ts",
     ]);
 
-    this.registerTemplates(`quasar/`, [
+    this.registerTemplates("quasar/", [
       // common components
       "components/common/ActionCellComponent.vue",
       "components/common/BreadcrumbComponent.vue",
@@ -191,8 +191,8 @@ export default {
       const paramIndex = fields.findIndex((field) => field.name === p.variable);
       if (paramIndex === -1) {
         if (p.variable.startsWith("order[")) {
-          var v = p.variable.slice(6, -1);
-          var found = fields.findIndex((field) => field.name === v);
+          let v = p.variable.slice(6, -1);
+          let found = fields.findIndex((field) => field.name === v);
           if (found !== -1) {
             fields[found].sortable = true;
           }
@@ -200,8 +200,8 @@ export default {
         }
 
         if (p.variable.startsWith("exists[")) {
-          var exists = p.variable.slice(7, -1);
-          var foundExistsFieldIndex = fields.findIndex(
+          let exists = p.variable.slice(7, -1);
+          let foundExistsFieldIndex = fields.findIndex(
             (field) => field.name === exists
           );
           if (foundExistsFieldIndex !== -1) {
@@ -244,7 +244,10 @@ export default {
     [
       `${dir}/components/common`,
       `${dir}/composables`,
+      `${dir}/i18n`,
+      `${dir}/i18n/en-US`,
       `${dir}/config`,
+      `${dir}/router`,
       `${dir}/types`,
       `${dir}/utils`,
     ].forEach((dir) => this.createDir(dir, false));
diff --git a/src/generators/QuasarGenerator.test.js b/src/generators/QuasarGenerator.test.js
index f159fc97..0491eb49 100644
--- a/src/generators/QuasarGenerator.test.js
+++ b/src/generators/QuasarGenerator.test.js
@@ -7,7 +7,7 @@ import QuasarGenerator from "./QuasarGenerator.js";
 
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 
-test("Generate a Quasar app", () => {
+test("Generate a Quasar app", async () => {
   const generator = new QuasarGenerator({
     hydraPrefix: "hydra:",
     templateDirectory: `${dirname}/../../templates`,
@@ -21,6 +21,7 @@ test("Generate a Quasar app", () => {
       reference: null,
       required: true,
       description: "An URL",
+      type: "string",
     }),
   ];
   const resource = new Resource("abc", "http://example.com/foos", {
@@ -37,60 +38,63 @@ test("Generate a Quasar app", () => {
     title: "My API",
     resources: [resource],
   });
-  generator
-    .generate(api, resource, tmpobj.name)
-    .then(() => {
-      expect(fs.existsSync(tmpobj.name + "/components/foo/Create.vue")).toBe(
-        true
-      );
-      expect(fs.existsSync(tmpobj.name + "/components/foo/Form.vue")).toBe(
-        true
-      );
-      expect(fs.existsSync(tmpobj.name + "/components/foo/List.vue")).toBe(
-        true
-      );
-      expect(fs.existsSync(tmpobj.name + "/components/foo/Show.vue")).toBe(
-        true
-      );
-      expect(fs.existsSync(tmpobj.name + "/components/foo/Update.vue")).toBe(
-        true
-      );
 
-      expect(fs.existsSync(tmpobj.name + "/config/entrypoint.js")).toBe(true);
+  await generator.generate(api, resource, tmpobj.name, []);
 
-      expect(fs.existsSync(tmpobj.name + "/error/SubmissionError.js")).toBe(
-        true
-      );
+  // common components
+  [
+    "ActionCell",
+    "Breadcrumb",
+    "ConfirmDelete",
+    "DataFilter",
+    "FormRepeater",
+    "Loading",
+    "Toolbar",
+  ].forEach((name) => {
+    expect(
+      fs.existsSync(`${tmpobj.name}/components/common/${name}Component.vue`)
+    ).toBe(true);
+  });
+
+  // components
+  ["Create", "Form", "List", "Show", "Update"].forEach((name) => {
+    expect(
+      fs.existsSync(`${tmpobj.name}/components/foo/${name}Component.vue`)
+    ).toBe(true);
+  });
+
+  // i18n
+  expect(fs.existsSync(`${tmpobj.name}/i18n/en-US/common.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/i18n/en-US/foo.ts`)).toBe(true);
+
+  // pages
+  ["Create", "List", "Show", "Update"].forEach((name) => {
+    expect(fs.existsSync(`${tmpobj.name}/pages/foo/${name}Page.vue`)).toBe(
+      true
+    );
+  });
+
+  // router
+  expect(fs.existsSync(`${tmpobj.name}/router/foo.ts`)).toBe(true);
+
+  // stores
+  ["create", "delete", "list", "show", "update"].forEach((name) => {
+    expect(fs.existsSync(`${tmpobj.name}/stores/foo/${name}.ts`)).toBe(true);
+  });
+
+  // types
+  ["breadcrumb", "collection", "error", "foo", "item", "list", "view"].forEach(
+    (name) => {
+      expect(fs.existsSync(`${tmpobj.name}/types/${name}.ts`)).toBe(true);
+    }
+  );
 
-      expect(fs.existsSync(tmpobj.name + "/router/foo.js")).toBe(true);
+  // utils
+  expect(fs.existsSync(`${tmpobj.name}/utils/date.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/fetch.ts`)).toBe(true);
 
-      expect(fs.existsSync(tmpobj.name + "/store/modules/foo/index.js")).toBe(
-        true
-      );
+  // config
+  expect(fs.existsSync(`${tmpobj.name}/config/entrypoint.ts`)).toBe(true);
 
-      ["create", "delete", "list", "show", "update"].forEach((action) => {
-        expect(
-          fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/actions.js`)
-        ).toBe(true);
-        expect(
-          fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/getters.js`)
-        ).toBe(true);
-        expect(
-          fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/index.js`)
-        ).toBe(true);
-        expect(
-          fs.existsSync(
-            `${tmpobj.name}/store/modules/foo/${action}/mutation_types.js`
-          )
-        ).toBe(true);
-        expect(
-          fs.existsSync(
-            `${tmpobj.name}/store/modules/foo/${action}/mutations.js`
-          )
-        ).toBe(true);
-      });
-      expect(fs.existsSync(tmpobj.name + "/utils/fetch.js")).toBe(true);
-      tmpobj.removeCallback();
-    })
-    .catch(() => {});
+  tmpobj.removeCallback();
 });

From ffa82ca7513669bb6d3ee7272cf53b0bd941b5ef Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 24 Nov 2022 15:28:00 +0100
Subject: [PATCH 26/84] Fix nuxt test execution

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 10506de8..e278f007 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "test-react-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create react-app --template typescript ./tmp/app/reactapp && yarn --cwd ./tmp/app/reactapp add react-router-dom react-hook-form && cp -R ./tmp/react/* ./tmp/app/reactapp/src && cp ./templates/react/index.tsx ./tmp/app/reactapp/src && start-server-and-test 'BROWSER=none yarn --cwd ./tmp/app/reactapp start' http://127.0.0.1:3000/books/ 'yarn playwright test'",
     "test-next-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create next-app --typescript ./tmp/app/next && yarn --cwd ./tmp/app/next add isomorphic-unfetch formik react-query && cp -R ./tmp/next/* ./tmp/app/next && rm ./tmp/app/next/pages/index.tsx && rm -rf ./tmp/app/next/pages/api && yarn --cwd ./tmp/app/next build && start-server-and-test 'yarn --cwd ./tmp/app/next start' http://127.0.0.1:3000/books/ 'yarn playwright test'",
     "test-vue-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && cd ./tmp/app && npm init -y vue@2 -- --router vue && cd ../.. && yarn --cwd ./tmp/app/vue add vuex@3 vuex-map-fields lodash && cp -R ./tmp/vue/* ./tmp/app/vue/src && cp ./templates/vue/main.js ./tmp/app/vue/src && yarn --cwd ./tmp/app/vue build && start-server-and-test 'yarn --cwd ./tmp/app/vue vite preview --host 127.0.0.1 --port 3000' http://127.0.0.1:3000/books/ 'yarn playwright test'",
-    "test-nuxt-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create nuxt-app --answers \"'{\\\"name\\\":\\\"nuxt\\\",\\\"language\\\":\\\"js\\\",\\\"pm\\\":\\\"yarn\\\",\\\"ui\\\":\\\"vuetify\\\",\\\"template\\\":\\\"html\\\",\\\"features\\\":[],\\\"linter\\\":[],\\\"test\\\":\\\"none\\\",\\\"mode\\\":\\\"spa\\\",\\\"target\\\":\\\"static\\\",\\\"devTools\\\":[],\\\"vcs\\\":\\\"none\\\"}'\" ./tmp/app/nuxt && yarn --cwd ./tmp/app/nuxt add moment lodash vuelidate vuex-map-fields && cp -R ./tmp/nuxt/* ./tmp/app/nuxt && NUXT_TELEMETRY_DISABLED=1 yarn --cwd ./tmp/app/nuxt generate && start-server-and-test 'yarn --cwd ./tmp/app/nuxt start --hostname 127.0.0.1' http://127.0.0.1:3000/books/ 'yarn playwright test'"
+    "test-nuxt-app": "export NODE_OPTIONS=--openssl-legacy-provider && rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create nuxt-app --answers \"'{\\\"name\\\":\\\"nuxt\\\",\\\"language\\\":\\\"js\\\",\\\"pm\\\":\\\"yarn\\\",\\\"ui\\\":\\\"vuetify\\\",\\\"template\\\":\\\"html\\\",\\\"features\\\":[],\\\"linter\\\":[],\\\"test\\\":\\\"none\\\",\\\"mode\\\":\\\"spa\\\",\\\"target\\\":\\\"static\\\",\\\"devTools\\\":[],\\\"vcs\\\":\\\"none\\\"}'\" ./tmp/app/nuxt && yarn --cwd ./tmp/app/nuxt add moment lodash vuelidate vuex-map-fields && cp -R ./tmp/nuxt/* ./tmp/app/nuxt && NUXT_TELEMETRY_DISABLED=1 yarn --cwd ./tmp/app/nuxt generate && start-server-and-test 'yarn --cwd ./tmp/app/nuxt start --hostname 127.0.0.1' http://127.0.0.1:3000/books/ 'yarn playwright test'"
   },
   "lint-staged": {
     "src/**/*.js": "yarn lint --fix"

From dde660a9093221f996f3b92d49a262f4bbcba47b Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 24 Nov 2022 15:39:44 +0100
Subject: [PATCH 27/84] Remove generic help text because it is in the doc

---
 src/generators/QuasarGenerator.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index cf77b384..9b323727 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -89,17 +89,6 @@ export default class extends BaseGenerator {
     );
     console.log(
       chalk.green(`
-// Add to quasar.config.js
-// 1. in 'framework.config', can be customized later
-notify: {
-  position: 'top',
-  multiLine: true,
-  timeout: 0,
-},
-
-// 2. in 'framework.plugins
-  'Notify'
-
 // Import routes in src/router/routes.ts
 import ${titleLc}Routes from './${titleLc}';
 
@@ -109,12 +98,10 @@ const routes: RouteRecordRaw[] = [
 ];
 
 // import translations in src/i18n/en-US/index.ts
-import common from './common';
 import ${titleLc} from './${titleLc}';
 
 export default {
   // ...
-  ...common,
   ${titleLc},
 }
 `)

From 72f488a1fb9ccd021c1300e4d1669311c3f3c80b Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 13 Dec 2022 11:46:59 +0100
Subject: [PATCH 28/84] Minor fixes

---
 package.json                      |  2 +-
 src/generators/QuasarGenerator.js | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index e278f007..10506de8 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "test-react-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create react-app --template typescript ./tmp/app/reactapp && yarn --cwd ./tmp/app/reactapp add react-router-dom react-hook-form && cp -R ./tmp/react/* ./tmp/app/reactapp/src && cp ./templates/react/index.tsx ./tmp/app/reactapp/src && start-server-and-test 'BROWSER=none yarn --cwd ./tmp/app/reactapp start' http://127.0.0.1:3000/books/ 'yarn playwright test'",
     "test-next-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create next-app --typescript ./tmp/app/next && yarn --cwd ./tmp/app/next add isomorphic-unfetch formik react-query && cp -R ./tmp/next/* ./tmp/app/next && rm ./tmp/app/next/pages/index.tsx && rm -rf ./tmp/app/next/pages/api && yarn --cwd ./tmp/app/next build && start-server-and-test 'yarn --cwd ./tmp/app/next start' http://127.0.0.1:3000/books/ 'yarn playwright test'",
     "test-vue-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && cd ./tmp/app && npm init -y vue@2 -- --router vue && cd ../.. && yarn --cwd ./tmp/app/vue add vuex@3 vuex-map-fields lodash && cp -R ./tmp/vue/* ./tmp/app/vue/src && cp ./templates/vue/main.js ./tmp/app/vue/src && yarn --cwd ./tmp/app/vue build && start-server-and-test 'yarn --cwd ./tmp/app/vue vite preview --host 127.0.0.1 --port 3000' http://127.0.0.1:3000/books/ 'yarn playwright test'",
-    "test-nuxt-app": "export NODE_OPTIONS=--openssl-legacy-provider && rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create nuxt-app --answers \"'{\\\"name\\\":\\\"nuxt\\\",\\\"language\\\":\\\"js\\\",\\\"pm\\\":\\\"yarn\\\",\\\"ui\\\":\\\"vuetify\\\",\\\"template\\\":\\\"html\\\",\\\"features\\\":[],\\\"linter\\\":[],\\\"test\\\":\\\"none\\\",\\\"mode\\\":\\\"spa\\\",\\\"target\\\":\\\"static\\\",\\\"devTools\\\":[],\\\"vcs\\\":\\\"none\\\"}'\" ./tmp/app/nuxt && yarn --cwd ./tmp/app/nuxt add moment lodash vuelidate vuex-map-fields && cp -R ./tmp/nuxt/* ./tmp/app/nuxt && NUXT_TELEMETRY_DISABLED=1 yarn --cwd ./tmp/app/nuxt generate && start-server-and-test 'yarn --cwd ./tmp/app/nuxt start --hostname 127.0.0.1' http://127.0.0.1:3000/books/ 'yarn playwright test'"
+    "test-nuxt-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create nuxt-app --answers \"'{\\\"name\\\":\\\"nuxt\\\",\\\"language\\\":\\\"js\\\",\\\"pm\\\":\\\"yarn\\\",\\\"ui\\\":\\\"vuetify\\\",\\\"template\\\":\\\"html\\\",\\\"features\\\":[],\\\"linter\\\":[],\\\"test\\\":\\\"none\\\",\\\"mode\\\":\\\"spa\\\",\\\"target\\\":\\\"static\\\",\\\"devTools\\\":[],\\\"vcs\\\":\\\"none\\\"}'\" ./tmp/app/nuxt && yarn --cwd ./tmp/app/nuxt add moment lodash vuelidate vuex-map-fields && cp -R ./tmp/nuxt/* ./tmp/app/nuxt && NUXT_TELEMETRY_DISABLED=1 yarn --cwd ./tmp/app/nuxt generate && start-server-and-test 'yarn --cwd ./tmp/app/nuxt start --hostname 127.0.0.1' http://127.0.0.1:3000/books/ 'yarn playwright test'"
   },
   "lint-staged": {
     "src/**/*.js": "yarn lint --fix"
diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 9b323727..d1e14e12 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -163,7 +163,7 @@ export default {
     const titleUcFirst =
       resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
 
-    const { fields } = this.parseFields(resource);
+    const fields = this.parseFields(resource);
     const formFields = this.buildFields(fields);
     const hasRelations = fields.some(
       (field) => field.reference || field.embedded
@@ -379,10 +379,8 @@ export default {
         return list;
       }
 
-      const isReferences = Boolean(
-        field.reference && field.maxCardinality !== 1
-      );
-      const isEmbeddeds = Boolean(field.embedded && field.maxCardinality !== 1);
+      const isReferences = field.reference && field.maxCardinality !== 1;
+      const isEmbeddeds = field.embedded && field.maxCardinality !== 1;
 
       return {
         ...list,
@@ -396,8 +394,6 @@ export default {
       };
     }, {});
 
-    const fieldsArray = Object.values(fields);
-
-    return { fields: fieldsArray };
+    return Object.values(fields);
   }
 }

From 61f5104b328e16b972a7473bf5fbc75f61f86d19 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 13 Dec 2022 13:52:39 +0100
Subject: [PATCH 29/84] Update CreateFileFromPattern to allow multiple patterns

---
 src/generators/BaseGenerator.js        | 14 ++++++++++----
 src/generators/NextGenerator.js        |  2 +-
 src/generators/NuxtGenerator.js        |  2 +-
 src/generators/QuasarGenerator.js      |  2 +-
 src/generators/ReactGenerator.js       |  2 +-
 src/generators/ReactNativeGenerator.js |  2 +-
 src/generators/VueBaseGenerator.js     |  2 +-
 src/generators/VueGenerator.js         |  2 +-
 src/generators/VuetifyGenerator.js     |  2 +-
 9 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/generators/BaseGenerator.js b/src/generators/BaseGenerator.js
index c621fc26..f080788b 100644
--- a/src/generators/BaseGenerator.js
+++ b/src/generators/BaseGenerator.js
@@ -2,7 +2,7 @@ import chalk from "chalk";
 import fs from "fs";
 import handlebars from "handlebars";
 import mkdirp from "mkdirp";
-import { sprintf } from "sprintf-js";
+import { vsprintf } from "sprintf-js";
 import prettier from "prettier";
 
 export default class {
@@ -37,10 +37,16 @@ export default class {
     }
   }
 
-  createFileFromPattern(pattern, dir, value, context, templateValue = "foo") {
+  createFileFromPattern(
+    pattern,
+    dir,
+    values,
+    context,
+    templateValues = ["foo", "Foo"]
+  ) {
     this.createFile(
-      sprintf(pattern, templateValue),
-      sprintf(`${dir}/${pattern}`, value),
+      vsprintf(pattern, templateValues),
+      vsprintf(`${dir}/${pattern}`, values),
       context
     );
   }
diff --git a/src/generators/NextGenerator.js b/src/generators/NextGenerator.js
index 2b850259..f2b90a6b 100644
--- a/src/generators/NextGenerator.js
+++ b/src/generators/NextGenerator.js
@@ -93,7 +93,7 @@ export default class NextGenerator extends BaseGenerator {
       "pages/%ss/index.tsx",
       "pages/%ss/create.tsx",
     ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, context.lc, context)
+      this.createFileFromPattern(pattern, dir, [context.lc], context)
     );
 
     // interface pattern should be camel cased
diff --git a/src/generators/NuxtGenerator.js b/src/generators/NuxtGenerator.js
index d8699eef..e2096df1 100644
--- a/src/generators/NuxtGenerator.js
+++ b/src/generators/NuxtGenerator.js
@@ -134,7 +134,7 @@ export default class NuxtGenerator extends BaseVueGenerator {
       // store
       "store/%s.js",
     ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, lc, context)
+      this.createFileFromPattern(pattern, dir, [lc], context)
     );
 
     // components
diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index d1e14e12..9691f644 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -312,7 +312,7 @@ export default {
       ) {
         return;
       }
-      this.createFileFromPattern(pattern, dir, lc, context);
+      this.createFileFromPattern(pattern, dir, [lc], context);
     });
 
     // entrypoint
diff --git a/src/generators/ReactGenerator.js b/src/generators/ReactGenerator.js
index d1431610..54769f0c 100644
--- a/src/generators/ReactGenerator.js
+++ b/src/generators/ReactGenerator.js
@@ -111,7 +111,7 @@ import ${titleLc}Routes from './routes/${titleLc}';
       // routes
       "routes/%s.tsx",
     ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, lc, context)
+      this.createFileFromPattern(pattern, dir, [lc], context)
     );
 
     // interface pattern should be camel cased
diff --git a/src/generators/ReactNativeGenerator.js b/src/generators/ReactNativeGenerator.js
index 89b8e709..1ea84b6d 100644
--- a/src/generators/ReactNativeGenerator.js
+++ b/src/generators/ReactNativeGenerator.js
@@ -133,7 +133,7 @@ combineReducers({ ${titleLc}, /* ... */ }),
       // routes
       "routes/%s.js",
     ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, lc, context)
+      this.createFileFromPattern(pattern, dir, [lc], context)
     );
 
     [
diff --git a/src/generators/VueBaseGenerator.js b/src/generators/VueBaseGenerator.js
index 400cef31..a8ebafcc 100644
--- a/src/generators/VueBaseGenerator.js
+++ b/src/generators/VueBaseGenerator.js
@@ -214,7 +214,7 @@ export default class extends BaseGenerator {
     this.createFileFromPattern(
       "services/%s.js",
       dir,
-      resource.title.toLowerCase(),
+      [resource.title.toLowerCase()],
       { name: resource.name }
     );
 
diff --git a/src/generators/VueGenerator.js b/src/generators/VueGenerator.js
index cf8776be..1d8d5d4d 100644
--- a/src/generators/VueGenerator.js
+++ b/src/generators/VueGenerator.js
@@ -163,7 +163,7 @@ export const store = new Vuex.Store({
       // routes
       "router/%s.js",
     ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, lc, context)
+      this.createFileFromPattern(pattern, dir, [lc], context)
     );
 
     for (const file of ["mixins/ItemWatcher.js", "mixins/ListWatcher.js"]) {
diff --git a/src/generators/VuetifyGenerator.js b/src/generators/VuetifyGenerator.js
index 03a5b2ad..3bb80012 100644
--- a/src/generators/VuetifyGenerator.js
+++ b/src/generators/VuetifyGenerator.js
@@ -106,7 +106,7 @@ export const store = new Vuex.Store({
       "views/%s/Show.vue",
       "views/%s/Update.vue",
     ].forEach((pattern) =>
-      this.createFileFromPattern(pattern, dir, lc, context)
+      this.createFileFromPattern(pattern, dir, [lc], context)
     );
 
     // components

From 58ed5833a3bd965a32219f18f2035fc782d7b56e Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 13 Dec 2022 15:23:15 +0100
Subject: [PATCH 30/84] Update components name

---
 src/generators/QuasarGenerator.js             | 76 +++++++++----------
 src/generators/QuasarGenerator.test.js        | 10 +--
 ...CellComponent.vue => CommonActionCell.vue} |  2 +-
 ...rumbComponent.vue => CommonBreadcrumb.vue} |  0
 ...eComponent.vue => CommonConfirmDelete.vue} |  0
 ...lterComponent.vue => CommonDataFilter.vue} |  0
 ...erComponent.vue => CommonFormRepeater.vue} |  0
 ...LoadingComponent.vue => CommonLoading.vue} |  0
 ...ToolbarComponent.vue => CommonToolbar.vue} |  2 +-
 .../{CreateComponent.vue => FooCreate.vue}    | 10 +--
 .../{FilterComponent.vue => FooFilter.vue}    |  0
 .../foo/{FormComponent.vue => FooForm.vue}    |  4 +-
 .../foo/{ListComponent.vue => FooList.vue}    | 12 +--
 .../foo/{ShowComponent.vue => FooShow.vue}    |  6 +-
 .../{UpdateComponent.vue => FooUpdate.vue}    | 10 +--
 .../foo/{ListPage.vue => PageCreate.vue}      |  4 +-
 .../pages/foo/{ShowPage.vue => PageList.vue}  |  4 +-
 .../foo/{CreatePage.vue => PageShow.vue}      |  4 +-
 .../foo/{UpdatePage.vue => PageUpdate.vue}    |  4 +-
 templates/quasar/router/foo.ts                |  8 +-
 20 files changed, 78 insertions(+), 78 deletions(-)
 rename templates/quasar/components/common/{ActionCellComponent.vue => CommonActionCell.vue} (94%)
 rename templates/quasar/components/common/{BreadcrumbComponent.vue => CommonBreadcrumb.vue} (100%)
 rename templates/quasar/components/common/{ConfirmDeleteComponent.vue => CommonConfirmDelete.vue} (100%)
 rename templates/quasar/components/common/{DataFilterComponent.vue => CommonDataFilter.vue} (100%)
 rename templates/quasar/components/common/{FormRepeaterComponent.vue => CommonFormRepeater.vue} (100%)
 rename templates/quasar/components/common/{LoadingComponent.vue => CommonLoading.vue} (100%)
 rename templates/quasar/components/common/{ToolbarComponent.vue => CommonToolbar.vue} (95%)
 rename templates/quasar/components/foo/{CreateComponent.vue => FooCreate.vue} (74%)
 rename templates/quasar/components/foo/{FilterComponent.vue => FooFilter.vue} (100%)
 rename templates/quasar/components/foo/{FormComponent.vue => FooForm.vue} (94%)
 rename templates/quasar/components/foo/{ListComponent.vue => FooList.vue} (94%)
 rename templates/quasar/components/foo/{ShowComponent.vue => FooShow.vue} (95%)
 rename templates/quasar/components/foo/{UpdateComponent.vue => FooUpdate.vue} (88%)
 rename templates/quasar/pages/foo/{ListPage.vue => PageCreate.vue} (56%)
 rename templates/quasar/pages/foo/{ShowPage.vue => PageList.vue} (56%)
 rename templates/quasar/pages/foo/{CreatePage.vue => PageShow.vue} (55%)
 rename templates/quasar/pages/foo/{UpdatePage.vue => PageUpdate.vue} (55%)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 9691f644..d67f6ffa 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -14,22 +14,22 @@ export default class extends BaseGenerator {
     ]);
 
     this.registerTemplates("quasar/", [
-      // common components
-      "components/common/ActionCellComponent.vue",
-      "components/common/BreadcrumbComponent.vue",
-      "components/common/ConfirmDeleteComponent.vue",
-      "components/common/DataFilterComponent.vue",
-      "components/common/FormRepeaterComponent.vue",
-      "components/common/LoadingComponent.vue",
-      "components/common/ToolbarComponent.vue",
-
       // components
-      "components/foo/CreateComponent.vue",
-      "components/foo/FilterComponent.vue",
-      "components/foo/FormComponent.vue",
-      "components/foo/ListComponent.vue",
-      "components/foo/ShowComponent.vue",
-      "components/foo/UpdateComponent.vue",
+      "components/foo/FooCreate.vue",
+      "components/foo/FooFilter.vue",
+      "components/foo/FooForm.vue",
+      "components/foo/FooList.vue",
+      "components/foo/FooShow.vue",
+      "components/foo/FooUpdate.vue",
+
+      // common components
+      "components/common/CommonActionCell.vue",
+      "components/common/CommonBreadcrumb.vue",
+      "components/common/CommonConfirmDelete.vue",
+      "components/common/CommonDataFilter.vue",
+      "components/common/CommonFormRepeater.vue",
+      "components/common/CommonLoading.vue",
+      "components/common/CommonToolbar.vue",
 
       // composables
       "composables/breadcrumb.ts",
@@ -43,10 +43,10 @@ export default class extends BaseGenerator {
       "i18n/common.ts",
 
       // pages
-      "pages/foo/CreatePage.vue",
-      "pages/foo/ListPage.vue",
-      "pages/foo/ShowPage.vue",
-      "pages/foo/UpdatePage.vue",
+      "pages/foo/PageCreate.vue",
+      "pages/foo/PageList.vue",
+      "pages/foo/PageShow.vue",
+      "pages/foo/PageUpdate.vue",
 
       // router
       "router/foo.ts",
@@ -247,13 +247,13 @@ export default {
 
     [
       // common components
-      "components/common/ActionCellComponent.vue",
-      "components/common/BreadcrumbComponent.vue",
-      "components/common/ConfirmDeleteComponent.vue",
-      "components/common/DataFilterComponent.vue",
-      "components/common/FormRepeaterComponent.vue",
-      "components/common/LoadingComponent.vue",
-      "components/common/ToolbarComponent.vue",
+      "components/common/CommonActionCell.vue",
+      "components/common/CommonBreadcrumb.vue",
+      "components/common/CommonConfirmDelete.vue",
+      "components/common/CommonDataFilter.vue",
+      "components/common/CommonFormRepeater.vue",
+      "components/common/CommonLoading.vue",
+      "components/common/CommonToolbar.vue",
 
       // composables
       "composables/breadcrumb.ts",
@@ -280,18 +280,18 @@ export default {
 
     [
       // components
-      "components/%s/CreateComponent.vue",
-      "components/%s/FilterComponent.vue",
-      "components/%s/FormComponent.vue",
-      "components/%s/ListComponent.vue",
-      "components/%s/ShowComponent.vue",
-      "components/%s/UpdateComponent.vue",
+      "components/%s/%sCreate.vue",
+      "components/%s/%sFilter.vue",
+      "components/%s/%sForm.vue",
+      "components/%s/%sList.vue",
+      "components/%s/%sShow.vue",
+      "components/%s/%sUpdate.vue",
 
       // pages
-      "pages/%s/CreatePage.vue",
-      "pages/%s/ListPage.vue",
-      "pages/%s/ShowPage.vue",
-      "pages/%s/UpdatePage.vue",
+      "pages/%s/PageCreate.vue",
+      "pages/%s/PageList.vue",
+      "pages/%s/PageShow.vue",
+      "pages/%s/PageUpdate.vue",
 
       // routes
       "router/%s.ts",
@@ -307,12 +307,12 @@ export default {
       "types/%s.ts",
     ].forEach((pattern) => {
       if (
-        pattern === "components/%s/FilterComponent.vue" &&
+        pattern === "components/%s/%sFilter.vue" &&
         !context.parameters.length
       ) {
         return;
       }
-      this.createFileFromPattern(pattern, dir, [lc], context);
+      this.createFileFromPattern(pattern, dir, [lc, titleUcFirst], context);
     });
 
     // entrypoint
diff --git a/src/generators/QuasarGenerator.test.js b/src/generators/QuasarGenerator.test.js
index 0491eb49..3701dfe5 100644
--- a/src/generators/QuasarGenerator.test.js
+++ b/src/generators/QuasarGenerator.test.js
@@ -52,15 +52,15 @@ test("Generate a Quasar app", async () => {
     "Toolbar",
   ].forEach((name) => {
     expect(
-      fs.existsSync(`${tmpobj.name}/components/common/${name}Component.vue`)
+      fs.existsSync(`${tmpobj.name}/components/common/Common${name}.vue`)
     ).toBe(true);
   });
 
   // components
   ["Create", "Form", "List", "Show", "Update"].forEach((name) => {
-    expect(
-      fs.existsSync(`${tmpobj.name}/components/foo/${name}Component.vue`)
-    ).toBe(true);
+    expect(fs.existsSync(`${tmpobj.name}/components/foo/Foo${name}.vue`)).toBe(
+      true
+    );
   });
 
   // i18n
@@ -69,7 +69,7 @@ test("Generate a Quasar app", async () => {
 
   // pages
   ["Create", "List", "Show", "Update"].forEach((name) => {
-    expect(fs.existsSync(`${tmpobj.name}/pages/foo/${name}Page.vue`)).toBe(
+    expect(fs.existsSync(`${tmpobj.name}/pages/foo/Page${name}.vue`)).toBe(
       true
     );
   });
diff --git a/templates/quasar/components/common/ActionCellComponent.vue b/templates/quasar/components/common/CommonActionCell.vue
similarity index 94%
rename from templates/quasar/components/common/ActionCellComponent.vue
rename to templates/quasar/components/common/CommonActionCell.vue
index dbda8fe0..84672340 100644
--- a/templates/quasar/components/common/ActionCellComponent.vue
+++ b/templates/quasar/components/common/CommonActionCell.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import ConfirmDelete from 'src/components/common/ConfirmDeleteComponent.vue';
+import ConfirmDelete from 'src/components/common/CommonConfirmDelete.vue';
 import { ref, toRefs } from 'vue';
 
 const props = defineProps<{
diff --git a/templates/quasar/components/common/BreadcrumbComponent.vue b/templates/quasar/components/common/CommonBreadcrumb.vue
similarity index 100%
rename from templates/quasar/components/common/BreadcrumbComponent.vue
rename to templates/quasar/components/common/CommonBreadcrumb.vue
diff --git a/templates/quasar/components/common/ConfirmDeleteComponent.vue b/templates/quasar/components/common/CommonConfirmDelete.vue
similarity index 100%
rename from templates/quasar/components/common/ConfirmDeleteComponent.vue
rename to templates/quasar/components/common/CommonConfirmDelete.vue
diff --git a/templates/quasar/components/common/DataFilterComponent.vue b/templates/quasar/components/common/CommonDataFilter.vue
similarity index 100%
rename from templates/quasar/components/common/DataFilterComponent.vue
rename to templates/quasar/components/common/CommonDataFilter.vue
diff --git a/templates/quasar/components/common/FormRepeaterComponent.vue b/templates/quasar/components/common/CommonFormRepeater.vue
similarity index 100%
rename from templates/quasar/components/common/FormRepeaterComponent.vue
rename to templates/quasar/components/common/CommonFormRepeater.vue
diff --git a/templates/quasar/components/common/LoadingComponent.vue b/templates/quasar/components/common/CommonLoading.vue
similarity index 100%
rename from templates/quasar/components/common/LoadingComponent.vue
rename to templates/quasar/components/common/CommonLoading.vue
diff --git a/templates/quasar/components/common/ToolbarComponent.vue b/templates/quasar/components/common/CommonToolbar.vue
similarity index 95%
rename from templates/quasar/components/common/ToolbarComponent.vue
rename to templates/quasar/components/common/CommonToolbar.vue
index b46206c0..67871c0f 100644
--- a/templates/quasar/components/common/ToolbarComponent.vue
+++ b/templates/quasar/components/common/CommonToolbar.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts" setup>
-import ConfirmDelete from 'src/components/common/ConfirmDeleteComponent.vue';
+import ConfirmDelete from 'src/components/common/CommonConfirmDelete.vue';
 import { ref, toRefs } from 'vue';
 
 const props = defineProps<{
diff --git a/templates/quasar/components/foo/CreateComponent.vue b/templates/quasar/components/foo/FooCreate.vue
similarity index 74%
rename from templates/quasar/components/foo/CreateComponent.vue
rename to templates/quasar/components/foo/FooCreate.vue
index 1b3a42a4..186bf35e 100644
--- a/templates/quasar/components/foo/CreateComponent.vue
+++ b/templates/quasar/components/foo/FooCreate.vue
@@ -5,16 +5,16 @@
     </template>
   </Toolbar>
 
-  <{{titleUcFirst}}Form :errors="violations" @submit="submitForm" />
+  <Form :errors="violations" @submit="submitForm" />
 
   <Loading :showing="isLoading" />
 </template>
 
 <script lang="ts" setup>
-import Toolbar from 'src/components/common/ToolbarComponent.vue';
-import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
-import Loading from 'components/common/LoadingComponent.vue';
-import {{titleUcFirst}}Form from 'components/{{lc}}/FormComponent.vue';
+import Toolbar from 'src/components/common/CommonToolbar.vue';
+import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
+import Loading from 'components/common/CommonLoading.vue';
+import Form from 'components/{{lc}}/{{titleUcFirst}}Form.vue';
 import { useRouter } from 'vue-router';
 import { use{{titleUcFirst}}CreateStore } from 'stores/{{lc}}/create';
 import { storeToRefs } from 'pinia';
diff --git a/templates/quasar/components/foo/FilterComponent.vue b/templates/quasar/components/foo/FooFilter.vue
similarity index 100%
rename from templates/quasar/components/foo/FilterComponent.vue
rename to templates/quasar/components/foo/FooFilter.vue
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FooForm.vue
similarity index 94%
rename from templates/quasar/components/foo/FormComponent.vue
rename to templates/quasar/components/foo/FooForm.vue
index 2e6d5a81..dfe0b5cb 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FooForm.vue
@@ -7,7 +7,7 @@
         :values="item.{{name}}"
         :label="$t('{{../lc}}.{{name}}')"
         class="col-12 col-md-8"
-        @update="(values) => (item.{{name}} = values)"
+        @update="(values: any) => (item.{{name}} = values)"
       />
       {{else}}
       <q-input
@@ -57,7 +57,7 @@ import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
 {{#if hasManyRelations}}
-import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
+import FormRepeater from 'src/components/common/CommonFormRepeater.vue';
 import { Item } from 'src/types/item';
 {{/if}}
 {{#if hasDateField}}
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/FooList.vue
similarity index 94%
rename from templates/quasar/components/foo/ListComponent.vue
rename to templates/quasar/components/foo/FooList.vue
index e11f363c..a296b203 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/FooList.vue
@@ -15,7 +15,7 @@
   {{#if parameters.length}}
   <DataFilter @filter="onSendFilter" @reset="resetFilter">
     <template #filter>
-      <{{titleUcFirst}}Filter :values="filters" />
+      <Filter :values="filters" />
     </template>
   </DataFilter>
   {{/if}}
@@ -124,12 +124,12 @@
 
 <script lang="ts" setup>
 {{#if parameters.length }}
-import DataFilter from 'src/components/common/DataFilterComponent.vue';
-import {{titleUcFirst}}Filter from 'src/components/{{lc}}/FilterComponent.vue';
+import DataFilter from 'src/components/common/CommonDataFilter.vue';
+import Filter from 'src/components/{{lc}}/{{titleUcFirst}}Filter.vue';
 {{/if}}
-import Toolbar from 'src/components/common/ToolbarComponent.vue';
-import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
-import ActionCell from 'src/components/common/ActionCellComponent.vue';
+import Toolbar from 'src/components/common/CommonToolbar.vue';
+import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
+import ActionCell from 'src/components/common/CommonActionCell.vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 {{#if hasDateField}}
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/FooShow.vue
similarity index 95%
rename from templates/quasar/components/foo/ShowComponent.vue
rename to templates/quasar/components/foo/FooShow.vue
index b72fad2b..75e58f1f 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/FooShow.vue
@@ -99,9 +99,9 @@
 </template>
 
 <script lang="ts" setup>
-import Toolbar from 'src/components/common/ToolbarComponent.vue';
-import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
-import Loading from 'src/components/common/LoadingComponent.vue';
+import Toolbar from 'src/components/common/CommonToolbar.vue';
+import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
+import Loading from 'src/components/common/CommonLoading.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
 import { storeToRefs } from 'pinia';
diff --git a/templates/quasar/components/foo/UpdateComponent.vue b/templates/quasar/components/foo/FooUpdate.vue
similarity index 88%
rename from templates/quasar/components/foo/UpdateComponent.vue
rename to templates/quasar/components/foo/FooUpdate.vue
index ff6ff8f8..e946e3a8 100644
--- a/templates/quasar/components/foo/UpdateComponent.vue
+++ b/templates/quasar/components/foo/FooUpdate.vue
@@ -6,7 +6,7 @@
       </template>
     </Toolbar>
 
-    <{{titleUcFirst}}Form
+    <Form
       v-if="item"
       :values="item"
       :errors="violations"
@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts" setup>
-import Toolbar from 'components/common/ToolbarComponent.vue';
-import Breadcrumb from 'components/common/BreadcrumbComponent.vue';
-import Loading from 'components/common/LoadingComponent.vue';
-import {{titleUcFirst}}Form from 'components/{{lc}}/FormComponent.vue';
+import Toolbar from 'components/common/CommonToolbar.vue';
+import Breadcrumb from 'components/common/CommonBreadcrumb.vue';
+import Loading from 'components/common/CommonLoading.vue';
+import Form from 'components/{{lc}}/{{titleUcFirst}}Form.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { use{{titleUcFirst}}UpdateStore } from 'src/stores/{{lc}}/update';
 import { storeToRefs } from 'pinia';
diff --git a/templates/quasar/pages/foo/ListPage.vue b/templates/quasar/pages/foo/PageCreate.vue
similarity index 56%
rename from templates/quasar/pages/foo/ListPage.vue
rename to templates/quasar/pages/foo/PageCreate.vue
index b8d4c87a..373f99ec 100644
--- a/templates/quasar/pages/foo/ListPage.vue
+++ b/templates/quasar/pages/foo/PageCreate.vue
@@ -1,11 +1,11 @@
 <template>
   <Suspense>
-    <{{titleUcFirst}}List />
+    <Create />
 
     <template #fallback>Loading...</template>
   </Suspense>
 </template>
 
 <script setup lang="ts">
-import {{titleUcFirst}}List from 'components/{{lc}}/ListComponent.vue';
+import Create from 'components/{{lc}}/{{titleUcFirst}}Create.vue';
 </script>
diff --git a/templates/quasar/pages/foo/ShowPage.vue b/templates/quasar/pages/foo/PageList.vue
similarity index 56%
rename from templates/quasar/pages/foo/ShowPage.vue
rename to templates/quasar/pages/foo/PageList.vue
index dcf12270..346fe490 100644
--- a/templates/quasar/pages/foo/ShowPage.vue
+++ b/templates/quasar/pages/foo/PageList.vue
@@ -1,11 +1,11 @@
 <template>
   <Suspense>
-    <{{titleUcFirst}}Show />
+    <List />
 
     <template #fallback>Loading...</template>
   </Suspense>
 </template>
 
 <script setup lang="ts">
-import {{titleUcFirst}}Show from 'components/{{lc}}/ShowComponent.vue';
+import List from 'components/{{lc}}/{{titleUcFirst}}List.vue';
 </script>
diff --git a/templates/quasar/pages/foo/CreatePage.vue b/templates/quasar/pages/foo/PageShow.vue
similarity index 55%
rename from templates/quasar/pages/foo/CreatePage.vue
rename to templates/quasar/pages/foo/PageShow.vue
index e7f7ab94..b1346509 100644
--- a/templates/quasar/pages/foo/CreatePage.vue
+++ b/templates/quasar/pages/foo/PageShow.vue
@@ -1,11 +1,11 @@
 <template>
   <Suspense>
-    <{{titleUcFirst}}Create />
+    <Show />
 
     <template #fallback>Loading...</template>
   </Suspense>
 </template>
 
 <script setup lang="ts">
-import {{titleUcFirst}}Create from 'components/{{lc}}/CreateComponent.vue';
+import Show from 'components/{{lc}}/{{titleUcFirst}}Show.vue';
 </script>
diff --git a/templates/quasar/pages/foo/UpdatePage.vue b/templates/quasar/pages/foo/PageUpdate.vue
similarity index 55%
rename from templates/quasar/pages/foo/UpdatePage.vue
rename to templates/quasar/pages/foo/PageUpdate.vue
index 98b3ce69..0ab67aa0 100644
--- a/templates/quasar/pages/foo/UpdatePage.vue
+++ b/templates/quasar/pages/foo/PageUpdate.vue
@@ -1,11 +1,11 @@
 <template>
   <Suspense>
-    <{{titleUcFirst}}Update />
+    <Update />
 
     <template #fallback>Loading...</template>
   </Suspense>
 </template>
 
 <script setup lang="ts">
-import {{titleUcFirst}}Update from 'components/{{lc}}/UpdateComponent.vue';
+import Update from 'components/{{lc}}/{{titleUcFirst}}Update.vue';
 </script>
diff --git a/templates/quasar/router/foo.ts b/templates/quasar/router/foo.ts
index 39dee01b..a7b1b39f 100644
--- a/templates/quasar/router/foo.ts
+++ b/templates/quasar/router/foo.ts
@@ -21,7 +21,7 @@ export default [
   {
     name: list.label,
     path: '/{{name}}/',
-    component: () => import('pages/{{lc}}/ListPage.vue'),
+    component: () => import('pages/{{lc}}/PageList.vue'),
     meta: {
       breadcrumb: [list],
     },
@@ -29,7 +29,7 @@ export default [
   {
     name: create.label,
     path: '/{{name}}/create',
-    component: () => import('pages/{{lc}}/CreatePage.vue'),
+    component: () => import('pages/{{lc}}/PageCreate.vue'),
     meta: {
       breadcrumb: [{ ...list, to: { name: list.label } }, create],
     },
@@ -37,7 +37,7 @@ export default [
   {
     name: update.label,
     path: '/{{name}}/edit/:id',
-    component: () => import('pages/{{lc}}/UpdatePage.vue'),
+    component: () => import('pages/{{lc}}/PageUpdate.vue'),
     meta: {
       breadcrumb: [{ ...list, to: { name: list.label } }, update],
     },
@@ -45,7 +45,7 @@ export default [
   {
     name: show.label,
     path: '/{{name}}/show/:id',
-    component: () => import('pages/{{lc}}/ShowPage.vue'),
+    component: () => import('pages/{{lc}}/PageShow.vue'),
     meta: {
       breadcrumb: [{ ...list, to: { name: list.label } }, show],
     },

From 75b0b82418f9312f609e547f9d0240287e3592f5 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 13 Dec 2022 16:52:12 +0100
Subject: [PATCH 31/84] Replace then by async/await

---
 templates/quasar/stores/foo/create.ts | 37 +++++------
 templates/quasar/stores/foo/delete.ts | 31 ++++++----
 templates/quasar/stores/foo/list.ts   | 46 +++++++-------
 templates/quasar/stores/foo/show.ts   | 39 ++++++------
 templates/quasar/stores/foo/update.ts | 88 ++++++++++++++-------------
 templates/quasar/utils/fetch.ts       | 31 +++++-----
 6 files changed, 141 insertions(+), 131 deletions(-)

diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index b1ed6410..6136b9f9 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -19,30 +19,33 @@ export const use{{titleUcFirst}}CreateStore = defineStore('{{lc}}Create', {
   }),
 
   actions: {
-    create(values: {{titleUcFirst}}) {
+    async create(payload: {{titleUcFirst}}) {
       this.setError(undefined);
       this.setViolations(undefined);
       this.toggleLoading();
 
-      return fetch('{{name}}', { method: 'POST', body: JSON.stringify(values) })
-        .then((response: Response) => {
-          this.toggleLoading();
+      try {
+        const response = await fetch('{{name}}', {
+          method: 'POST',
+          body: JSON.stringify(payload),
+        });
+        const data: {{titleUcFirst}} = await response.json();
 
-          return response.json();
-        })
-        .then((data) => {
-          this.setCreated(data);
-        })
-        .catch((e: Error | SubmissionError) => {
-          this.toggleLoading();
+        this.toggleLoading();
+        this.setCreated(data);
+      } catch (error) {
+        this.toggleLoading();
 
-          if (e instanceof SubmissionError) {
-            this.setViolations(e.errors);
-            return;
-          }
+        if (error instanceof SubmissionError) {
+          this.setViolations(error.errors);
+          this.setError(error.errors._error);
+          return;
+        }
 
-          this.setError(e.message);
-        });
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     setCreated(created: {{titleUcFirst}}) {
diff --git a/templates/quasar/stores/foo/delete.ts b/templates/quasar/stores/foo/delete.ts
index 294c88fc..15bc0265 100644
--- a/templates/quasar/stores/foo/delete.ts
+++ b/templates/quasar/stores/foo/delete.ts
@@ -18,20 +18,27 @@ export const use{{titleUcFirst}}DeleteStore = defineStore('{{lc}}Delete', {
   }),
 
   actions: {
-    deleteItem(item: {{titleUcFirst}}) {
+    async deleteItem(item: {{titleUcFirst}}) {
       this.toggleLoading();
 
-      return fetch(item['@id'] ?? '', { method: 'DELETE' })
-        .then(() => {
-          this.setError('');
-          this.toggleLoading();
-          this.setDeleted(item);
-          this.setMercureDeleted(undefined);
-        })
-        .catch((e: Error) => {
-          this.toggleLoading();
-          this.setError(e.message);
-        });
+      if (!item?.['@id']) {
+        this.setError('No {{lc}} found. Please reload');
+        return;
+      }
+
+      try {
+        await fetch(item['@id'], { method: 'DELETE' });
+
+        this.toggleLoading();
+        this.setDeleted(item);
+        this.setMercureDeleted(undefined);
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     toggleLoading() {
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index f4d77fcd..0d4695a6 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -26,32 +26,30 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
   }),
 
   actions: {
-    getItems(params: ListParams) {
+    async getItems(params: ListParams) {
       this.toggleLoading();
 
-      return fetch('{{name}}', { params })
-        .then((response: Response) =>
-          response.json().then((data: PagedCollection<{{titleUcFirst}}>) => ({
-            data,
-            hubUrl: extractHubURL(response),
-          }))
-        )
-        .then(
-          ({ data, hubUrl }: { data: PagedCollection<{{titleUcFirst}}>; hubUrl?: URL }) => {
-            this.toggleLoading();
-            this.setItems(data['{{hydraPrefix}}member']);
-            this.setTotalItems(data['{{hydraPrefix}}totalItems'] ?? 0);
-            this.setView(data['{{hydraPrefix}}view']);
-
-            if (hubUrl) {
-              this.setHubUrl(hubUrl);
-            }
-          }
-        )
-        .catch((e: Error) => {
-          this.toggleLoading();
-          this.setError(e.message);
-        });
+      try {
+        const response = await fetch('{{name}}', { params });
+        const data: PagedCollection<{{titleUcFirst}}> = await response.json();
+        const hubUrl = extractHubURL(response);
+
+        this.toggleLoading();
+
+        this.setItems(data['{{hydraPrefix}}member']);
+        this.setTotalItems(data['{{hydraPrefix}}totalItems'] ?? 0);
+        this.setView(data['{{hydraPrefix}}view']);
+
+        if (hubUrl) {
+          this.setHubUrl(hubUrl);
+        }
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     toggleLoading() {
diff --git a/templates/quasar/stores/foo/show.ts b/templates/quasar/stores/foo/show.ts
index 4d3aa762..5e6f17f7 100644
--- a/templates/quasar/stores/foo/show.ts
+++ b/templates/quasar/stores/foo/show.ts
@@ -19,28 +19,27 @@ export const use{{titleUcFirst}}ShowStore = defineStore('{{lc}}Show', {
   }),
 
   actions: {
-    retrieve(id: string) {
+    async retrieve(id: string) {
       this.toggleLoading();
 
-      return fetch(id)
-        .then((response: Response) =>
-          response.json().then((data: {{titleUcFirst}}) => ({
-            data,
-            hubUrl: extractHubURL(response),
-          }))
-        )
-        .then(({ data, hubUrl }: { data: {{titleUcFirst}}; hubUrl?: URL }) => {
-          this.toggleLoading();
-          this.setRetrieved(data);
-
-          if (hubUrl) {
-            this.setHubUrl(hubUrl);
-          }
-        })
-        .catch((e: Error) => {
-          this.toggleLoading();
-          this.setError(e.message);
-        });
+      try {
+        const response = await fetch(id);
+        const data: {{titleUcFirst}} = await response.json();
+        const hubUrl = extractHubURL(response);
+
+        this.toggleLoading();
+        this.setRetrieved(data);
+
+        if (hubUrl) {
+          this.setHubUrl(hubUrl);
+        }
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     toggleLoading() {
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
index bfc7004f..062746fd 100644
--- a/templates/quasar/stores/foo/update.ts
+++ b/templates/quasar/stores/foo/update.ts
@@ -24,32 +24,30 @@ export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
   }),
 
   actions: {
-    retrieve(id: string) {
+    async retrieve(id: string) {
       this.toggleLoading();
 
-      return fetch(id)
-        .then((response: Response) =>
-          response.json().then((data: {{titleUcFirst}}) => ({
-            data,
-            hubUrl: extractHubURL(response),
-          }))
-        )
-        .then(({ data, hubUrl }: { data: {{titleUcFirst}}; hubUrl?: URL }) => {
-          this.setError('');
-          this.toggleLoading();
-          this.setRetrieved(data);
-
-          if (hubUrl) {
-            this.setHubUrl(hubUrl);
-          }
-        })
-        .catch((e: Error) => {
-          this.toggleLoading();
-          this.setError(e.message);
-        });
+      try {
+        const response = await fetch(id);
+        const data: {{titleUcFirst}} = await response.json();
+        const hubUrl = extractHubURL(response);
+
+        this.toggleLoading();
+        this.setRetrieved(data);
+
+        if (hubUrl) {
+          this.setHubUrl(hubUrl);
+        }
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
-    update(values: {{titleUcFirst}}) {
+    async update(payload: {{titleUcFirst}}) {
       this.setError(undefined);
       this.toggleLoading();
 
@@ -58,28 +56,32 @@ export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
         return;
       }
 
-      return fetch(this.retrieved['@id'] ?? values['@id'] ?? '', {
-        method: 'PUT',
-        headers: new Headers({ 'Content-Type': 'application/ld+json' }),
-        body: JSON.stringify(values),
-      })
-        .then((response: Response) => response.json())
-        .then((data: {{titleUcFirst}}) => {
-          this.toggleLoading();
-          this.resetErrors();
-          this.setUpdated(data);
-        })
-        .catch((e: Error) => {
-          this.toggleLoading();
-
-          if (e instanceof SubmissionError) {
-            this.setViolations(e.errors);
-            this.setError(e.errors._error);
-            return;
+      try {
+        const response = await fetch(
+          this.retrieved['@id'] ?? payload['@id'] ?? '',
+          {
+            method: 'PUT',
+            headers: new Headers({ 'Content-Type': 'application/ld+json' }),
+            body: JSON.stringify(payload),
           }
-
-          this.setError(e.message);
-        });
+        );
+        const data: {{titleUcFirst}} = await response.json();
+
+        this.toggleLoading();
+        this.setUpdated(data);
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof SubmissionError) {
+          this.setViolations(error.errors);
+          this.setError(error.errors._error);
+          return;
+        }
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     setRetrieved(retrieved: {{titleUcFirst}}) {
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/fetch.ts
index c5d71c4b..48de7463 100644
--- a/templates/quasar/utils/fetch.ts
+++ b/templates/quasar/utils/fetch.ts
@@ -4,7 +4,7 @@ import { ENTRYPOINT } from 'src/config/entrypoint';
 
 const MIME_TYPE = 'application/ld+json';
 
-export default function (id: string, options: any = {}) {
+export default async function (id: string, options: any = {}) {
   if (typeof options.headers === 'undefined') {
     Object.assign(options, { headers: new Headers() });
   }
@@ -32,21 +32,22 @@ export default function (id: string, options: any = {}) {
     // credentials: 'include', // when credentials needed
   });
 
-  return fetch(new URL(id, ENTRYPOINT), options).then((response: Response) => {
-    if (response.ok) return response;
+  const response = await fetch(new URL(id, ENTRYPOINT), options);
 
-    return response.json().then((json) => {
-      const error = json['{{hydraPrefix}}description'] ?? response.statusText;
-      if (!json.violations) throw Error(error);
+  if (!response.ok) {
+    const data = await response.json();
+    const error = data['{{hydraPrefix}}description'] || response.statusText;
+    if (!data.violations) throw Error(error);
 
-      const errors: SubmissionErrors = { _error: error };
-      json.violations.map(
-        (violation: { propertyPath: string; message: string }) => {
-          errors[violation.propertyPath] = violation.message;
-        }
-      );
+    const errors: SubmissionErrors = { _error: error };
+    data.violations.forEach(
+      (violation: { propertyPath: string; message: string }) => {
+        errors[violation.propertyPath] = violation.message;
+      }
+    );
 
-      throw new SubmissionError(errors);
-    });
-  });
+    throw new SubmissionError(errors);
+  }
+
+  return response;
 }

From 541cdc291aea6ff10bd0fc4f08f067b29d3d66f0 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 14 Dec 2022 10:59:26 +0100
Subject: [PATCH 32/84] Migrate some files to common

---
 src/generators/BaseGenerator.js               |  4 ++++
 src/generators/QuasarGenerator.js             | 22 ++++++++++++-------
 .../{quasar => common}/types/collection.ts    |  0
 templates/common/types/error.ts               |  3 +++
 templates/{quasar => common}/types/foo.ts     |  0
 templates/{quasar => common}/types/item.ts    |  0
 templates/{quasar => common}/types/view.ts    |  0
 templates/common/utils/config.ts              |  1 +
 .../{quasar/types => common/utils}/error.ts   |  8 ++-----
 templates/quasar/components/foo/FooForm.vue   |  2 +-
 templates/quasar/stores/foo/create.ts         |  3 ++-
 templates/quasar/stores/foo/update.ts         |  3 ++-
 templates/quasar/utils/fetch.ts               |  5 +++--
 13 files changed, 32 insertions(+), 19 deletions(-)
 rename templates/{quasar => common}/types/collection.ts (100%)
 create mode 100644 templates/common/types/error.ts
 rename templates/{quasar => common}/types/foo.ts (100%)
 rename templates/{quasar => common}/types/item.ts (100%)
 rename templates/{quasar => common}/types/view.ts (100%)
 create mode 100644 templates/common/utils/config.ts
 rename templates/{quasar/types => common/utils}/error.ts (61%)

diff --git a/src/generators/BaseGenerator.js b/src/generators/BaseGenerator.js
index f080788b..faa8f3b4 100644
--- a/src/generators/BaseGenerator.js
+++ b/src/generators/BaseGenerator.js
@@ -81,6 +81,10 @@ export default class {
     this.createFile("entrypoint.js", dest, { entrypoint }, false);
   }
 
+  createConfigFile(dest, context) {
+    this.createFile("utils/config.ts", dest, context, false);
+  }
+
   // eslint-disable-next-line no-unused-vars
   checkDependencies(dir) {}
 
diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index d67f6ffa..9e44db05 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -9,7 +9,16 @@ export default class extends BaseGenerator {
     super(params);
 
     this.registerTemplates("common/", [
+      // types
+      "types/collection.ts",
+      "types/error.ts",
+      "types/foo.ts",
+      "types/item.ts",
+      "types/view.ts",
+
       // utils
+      "utils/config.ts",
+      "utils/error.ts",
       "utils/mercure.ts",
     ]);
 
@@ -60,12 +69,7 @@ export default class extends BaseGenerator {
 
       // types
       "types/breadcrumb.ts",
-      "types/collection.ts",
-      "types/error.ts",
-      "types/foo.ts",
-      "types/item.ts",
       "types/list.ts",
-      "types/view.ts",
 
       // utils
       "utils/date.ts",
@@ -233,7 +237,6 @@ export default {
       `${dir}/composables`,
       `${dir}/i18n`,
       `${dir}/i18n/en-US`,
-      `${dir}/config`,
       `${dir}/router`,
       `${dir}/types`,
       `${dir}/utils`,
@@ -272,6 +275,7 @@ export default {
 
       // utils
       "utils/date.ts",
+      "utils/error.ts",
       "utils/fetch.ts",
       "utils/mercure.ts",
     ].forEach((common) =>
@@ -315,8 +319,10 @@ export default {
       this.createFileFromPattern(pattern, dir, [lc, titleUcFirst], context);
     });
 
-    // entrypoint
-    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.ts`);
+    // config
+    this.createConfigFile(`${dir}/utils/config.ts`, {
+      entrypoint: api.entrypoint,
+    });
 
     this.createFile(
       "i18n/common.ts",
diff --git a/templates/quasar/types/collection.ts b/templates/common/types/collection.ts
similarity index 100%
rename from templates/quasar/types/collection.ts
rename to templates/common/types/collection.ts
diff --git a/templates/common/types/error.ts b/templates/common/types/error.ts
new file mode 100644
index 00000000..59714084
--- /dev/null
+++ b/templates/common/types/error.ts
@@ -0,0 +1,3 @@
+export interface SubmissionErrors {
+  [key: string]: string;
+}
diff --git a/templates/quasar/types/foo.ts b/templates/common/types/foo.ts
similarity index 100%
rename from templates/quasar/types/foo.ts
rename to templates/common/types/foo.ts
diff --git a/templates/quasar/types/item.ts b/templates/common/types/item.ts
similarity index 100%
rename from templates/quasar/types/item.ts
rename to templates/common/types/item.ts
diff --git a/templates/quasar/types/view.ts b/templates/common/types/view.ts
similarity index 100%
rename from templates/quasar/types/view.ts
rename to templates/common/types/view.ts
diff --git a/templates/common/utils/config.ts b/templates/common/utils/config.ts
new file mode 100644
index 00000000..03b5d13c
--- /dev/null
+++ b/templates/common/utils/config.ts
@@ -0,0 +1 @@
+export const ENTRYPOINT = "{{entrypoint}}";
diff --git a/templates/quasar/types/error.ts b/templates/common/utils/error.ts
similarity index 61%
rename from templates/quasar/types/error.ts
rename to templates/common/utils/error.ts
index b82407dd..baa645b8 100644
--- a/templates/quasar/types/error.ts
+++ b/templates/common/utils/error.ts
@@ -1,14 +1,10 @@
-export type TError = SubmissionError | Error;
-
-export interface SubmissionErrors {
-  [key: string]: string;
-}
+import type { SubmissionErrors } from "../types/error";
 
 export class SubmissionError extends Error {
   private readonly _errors: SubmissionErrors;
 
   constructor(errors: SubmissionErrors) {
-    super('Submit Validation Failed');
+    super("Submit Validation Failed");
     this._errors = errors;
   }
 
diff --git a/templates/quasar/components/foo/FooForm.vue b/templates/quasar/components/foo/FooForm.vue
index dfe0b5cb..fd691747 100644
--- a/templates/quasar/components/foo/FooForm.vue
+++ b/templates/quasar/components/foo/FooForm.vue
@@ -54,7 +54,7 @@
 
 <script lang="ts" setup>
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { SubmissionErrors } from 'src/types/error';
+import type { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
 {{#if hasManyRelations}}
 import FormRepeater from 'src/components/common/CommonFormRepeater.vue';
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index 6136b9f9..328650d6 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { SubmissionError, type SubmissionErrors } from 'src/types/error';
+import type { SubmissionErrors } from 'src/types/error';
+import { SubmissionError } from 'src/utils/error';
 import fetch from 'src/utils/fetch';
 
 interface State {
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
index 062746fd..f2dfafae 100644
--- a/templates/quasar/stores/foo/update.ts
+++ b/templates/quasar/stores/foo/update.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { SubmissionError, SubmissionErrors } from 'src/types/error';
+import type { SubmissionErrors } from 'src/types/error';
+import { SubmissionError } from 'src/utils/error';
 import fetch from 'src/utils/fetch';
 import { extractHubURL } from 'src/utils/mercure';
 
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/fetch.ts
index 48de7463..e121206d 100644
--- a/templates/quasar/utils/fetch.ts
+++ b/templates/quasar/utils/fetch.ts
@@ -1,6 +1,7 @@
-import { SubmissionError, SubmissionErrors } from 'src/types/error';
+import type { SubmissionErrors } from 'src/types/error';
+import { SubmissionError } from 'src/utils/error';
 import qs from 'qs';
-import { ENTRYPOINT } from 'src/config/entrypoint';
+import { ENTRYPOINT } from 'src/utils/config';
 
 const MIME_TYPE = 'application/ld+json';
 

From e04499e30c9be015c298cee15fbaa2e5aa743233 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 14 Dec 2022 11:06:36 +0100
Subject: [PATCH 33/84] Fix type error

---
 templates/quasar/components/common/CommonFormRepeater.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/quasar/components/common/CommonFormRepeater.vue b/templates/quasar/components/common/CommonFormRepeater.vue
index 1fa3cffb..48dd213f 100644
--- a/templates/quasar/components/common/CommonFormRepeater.vue
+++ b/templates/quasar/components/common/CommonFormRepeater.vue
@@ -15,7 +15,7 @@
         :key="index"
         filled
         class="q-mb-sm"
-        @update:model-value="(value: string) => updateField(index, value)"
+        @update:model-value="(value) => updateField(index, value as string)"
       >
         <template #append>
           <q-icon

From fee99361bcf3ce7a77706e8331c6efff8a95cfd1 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 14 Dec 2022 11:15:25 +0100
Subject: [PATCH 34/84] Fix import

---
 templates/common/utils/mercure.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/common/utils/mercure.ts b/templates/common/utils/mercure.ts
index 25f45640..be03e7f0 100644
--- a/templates/common/utils/mercure.ts
+++ b/templates/common/utils/mercure.ts
@@ -1,4 +1,4 @@
-import { ENTRYPOINT } from "../config/entrypoint";
+import { ENTRYPOINT } from "../utils/config";
 import type { Item } from "../types/item";
 
 export const mercureSubscribe = (

From f95fc77c6cbca8e2a241a8cd8b34f0c9d30a0d6e Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 15 Dec 2022 15:22:42 +0100
Subject: [PATCH 35/84] Fix pagination

---
 templates/quasar/components/foo/FooList.vue | 110 +++++++++++++++-----
 templates/quasar/stores/foo/list.ts         |   5 +-
 2 files changed, 87 insertions(+), 28 deletions(-)

diff --git a/templates/quasar/components/foo/FooList.vue b/templates/quasar/components/foo/FooList.vue
index a296b203..ae0bd47a 100644
--- a/templates/quasar/components/foo/FooList.vue
+++ b/templates/quasar/components/foo/FooList.vue
@@ -21,9 +21,10 @@
   {{/if}}
 
   <q-table
-    v-model:pagination="pagination"
+    :pagination="pagination"
     :rows="items"
     :columns="columns"
+    :rows-per-page-options="[30]"
     :loading="isLoading"
     :no-data-label="$t('unavail')"
     :no-results-label="$t('noresults')"
@@ -42,6 +43,7 @@
         @delete="deleteItem(row)"
       />
     </template>
+
     {{#each fields}}
     {{#if isReferences}}
     <template #body-cell-{{reference.name}}="{ value }">
@@ -119,6 +121,57 @@
     </template>
     {{/if}}
     {{/each}}
+
+    <template #pagination="{ pagesNumber }">
+      <template v-if="view">
+        <q-btn
+          v-if="pagesNumber > 2"
+          :to="view['hydra:first'] ? view['hydra:first'] : { name: 'BookList' }"
+          :disable="!view['hydra:previous']"
+          icon="first_page"
+          color="grey-8"
+          round
+          dense
+          flat
+        />
+
+        <q-btn
+          :to="
+            !view['hydra:previous'] ||
+            view['hydra:previous'] === view['hydra:first']
+              ? { name: 'BookList' }
+              : view['hydra:previous']
+          "
+          :disable="!view['hydra:previous']"
+          icon="chevron_left"
+          color="grey-8"
+          round
+          dense
+          flat
+        />
+
+        <q-btn
+          :to="view['hydra:next'] ? view['hydra:next'] : '#'"
+          :disable="!view['hydra:next']"
+          icon="chevron_right"
+          color="grey-8"
+          round
+          dense
+          flat
+        />
+
+        <q-btn
+          v-if="pagesNumber > 2"
+          :to="view['hydra:last'] ? view['hydra:last'] : '#'"
+          :disable="!view['hydra:next']"
+          icon="last_page"
+          color="grey-8"
+          round
+          dense
+          flat
+        />
+      </template>
+    </template>
   </q-table>
 </template>
 
@@ -130,7 +183,7 @@ import Filter from 'src/components/{{lc}}/{{titleUcFirst}}Filter.vue';
 import Toolbar from 'src/components/common/CommonToolbar.vue';
 import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
 import ActionCell from 'src/components/common/CommonActionCell.vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 {{#if hasDateField}}
 import { formatDateTime } from 'src/utils/date';
@@ -146,28 +199,26 @@ import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { Pagination{{#if parameters.length}}, Filters{{/if}} } from 'src/types/list';
 
 const { t } = useI18n();
+const route = useRoute();
 const router = useRouter();
 const breadcrumb = useBreadcrumb();
 
 const {{lc}}ListStore = use{{titleUcFirst}}ListStore();
-const { items, totalItems, error, isLoading } = storeToRefs({{lc}}ListStore);
+const { items, totalItems, view, error, isLoading } = storeToRefs({{lc}}ListStore);
 
 const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
 const { deleted, mercureDeleted } = storeToRefs({{lc}}DeleteStore);
 
-async function sendRequest(params = {}) {
-  await {{lc}}ListStore.getItems(params);
-}
-
-useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
-
-const nextPage = ref(1);
+const page = ref('1');
+{{#if parameters.length}}
+const filters: Ref<Filters> = ref({});
+{{/if}}
 const pagination: Pagination = {
   sortBy: undefined,
   descending: false,
-  page: 1, // page to be displayed
-  rowsPerPage: 3, // maximum displayed rows
-  rowsNumber: 10, // max number of rows
+  page: 1,
+  rowsPerPage: 3,
+  rowsNumber: 1,
 };
 const columns = [
   { name: 'actions', label: t('actions'), field: '' },
@@ -189,22 +240,29 @@ const columns = [
   {{/each }}
 ];
 
-await sendRequest({ pagination });
+watch(
+  () => route.query.page,
+  (newPage) => {
+    page.value = newPage as string;
+    sendRequest();
+  },
+  { immediate: true }
+);
 
-watch(items, () => {
-  pagination.page = nextPage.value;
-  pagination.rowsNumber = totalItems.value;
-  nextPage.value = 1;
-});
+async function sendRequest() {
+  await {{lc}}ListStore.getItems(page.value, { {{#if parameters.length}}filters: filters.value{{/if}} });
+}
 
-{{#if parameters.length}}
-const filters: Ref<Filters> = ref({});
+useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
+
+await sendRequest();
+
+pagination.rowsPerPage = items.value.length;
+pagination.rowsNumber = totalItems.value;
 
+{{#if parameters.length}}
 function onSendFilter() {
-  sendRequest({
-    filters: filters.value,
-    pagination,
-  });
+  sendRequest();
 }
 
 function resetFilter() {
@@ -233,7 +291,7 @@ function gotToEditPage(item: {{titleUcFirst}}) {
 async function deleteItem(item: {{titleUcFirst}}) {
   await {{lc}}DeleteStore.deleteItem(item);
 
-  sendRequest({ pagination });
+  sendRequest();
 }
 
 useWatchErrors([error]);
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index 0d4695a6..d3c290c2 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -26,11 +26,12 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
   }),
 
   actions: {
-    async getItems(params: ListParams) {
+    async getItems(page: string, params: ListParams) {
       this.toggleLoading();
 
       try {
-        const response = await fetch('{{name}}', { params });
+        const path = page ? `{{name}}?page=${page}` : '{{name}}';
+        const response = await fetch(path, { params });
         const data: PagedCollection<{{titleUcFirst}}> = await response.json();
         const hubUrl = extractHubURL(response);
 

From fda54413792ed95cfb9510d8076b498c764feda7 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 15 Dec 2022 15:24:54 +0100
Subject: [PATCH 36/84] Fix test

---
 src/generators/QuasarGenerator.test.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/generators/QuasarGenerator.test.js b/src/generators/QuasarGenerator.test.js
index 3701dfe5..365610b8 100644
--- a/src/generators/QuasarGenerator.test.js
+++ b/src/generators/QuasarGenerator.test.js
@@ -90,11 +90,10 @@ test("Generate a Quasar app", async () => {
   );
 
   // utils
+  expect(fs.existsSync(`${tmpobj.name}/utils/config.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/error.ts`)).toBe(true);
   expect(fs.existsSync(`${tmpobj.name}/utils/date.ts`)).toBe(true);
   expect(fs.existsSync(`${tmpobj.name}/utils/fetch.ts`)).toBe(true);
 
-  // config
-  expect(fs.existsSync(`${tmpobj.name}/config/entrypoint.ts`)).toBe(true);
-
   tmpobj.removeCallback();
 });

From 7be06b0a5afcfedde31f519f8e5150cbc3a6129b Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 28 Dec 2022 09:29:55 +0100
Subject: [PATCH 37/84] Rename create & book functions

---
 templates/quasar/components/foo/FooCreate.vue | 4 ++--
 templates/quasar/components/foo/FooUpdate.vue | 9 ++-------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/templates/quasar/components/foo/FooCreate.vue b/templates/quasar/components/foo/FooCreate.vue
index 186bf35e..d1f0a50a 100644
--- a/templates/quasar/components/foo/FooCreate.vue
+++ b/templates/quasar/components/foo/FooCreate.vue
@@ -5,7 +5,7 @@
     </template>
   </Toolbar>
 
-  <Form :errors="violations" @submit="submitForm" />
+  <Form :errors="violations" @submit="create" />
 
   <Loading :showing="isLoading" />
 </template>
@@ -28,7 +28,7 @@ const breadcrumb = useBreadcrumb();
 const {{lc}}CreateStore = use{{titleUcFirst}}CreateStore();
 const { created, isLoading, violations, error } = storeToRefs({{lc}}CreateStore);
 
-async function submitForm(item: {{titleUcFirst}}) {
+async function create(item: {{titleUcFirst}}) {
   await {{lc}}CreateStore.create(item);
 
   if (!created?.value) {
diff --git a/templates/quasar/components/foo/FooUpdate.vue b/templates/quasar/components/foo/FooUpdate.vue
index e946e3a8..1b868506 100644
--- a/templates/quasar/components/foo/FooUpdate.vue
+++ b/templates/quasar/components/foo/FooUpdate.vue
@@ -6,12 +6,7 @@
       </template>
     </Toolbar>
 
-    <Form
-      v-if="item"
-      :values="item"
-      :errors="violations"
-      @submit="submitForm"
-    />
+    <Form v-if="item" :values="item" :errors="violations" @submit="update" />
 
     <Loading :showing="isLoading || deleteLoading" />
   </div>
@@ -72,7 +67,7 @@ async function deleteItem() {
   router.push({ name: '{{titleUcFirst}}List' });
 }
 
-async function submitForm(item: {{titleUcFirst}}) {
+async function update(item: {{titleUcFirst}}) {
   await {{lc}}UpdateStore.update(item);
 
   if (!updated?.value) {

From 3e41d1e6ba755fc9299b16174c6f9332afa27bda Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 28 Dec 2022 09:39:07 +0100
Subject: [PATCH 38/84] Rename fetch to api

---
 src/generators/QuasarGenerator.js           | 4 ++--
 src/generators/QuasarGenerator.test.js      | 4 ++--
 templates/quasar/stores/foo/create.ts       | 4 ++--
 templates/quasar/stores/foo/delete.ts       | 4 ++--
 templates/quasar/stores/foo/list.ts         | 4 ++--
 templates/quasar/stores/foo/show.ts         | 4 ++--
 templates/quasar/stores/foo/update.ts       | 6 +++---
 templates/quasar/utils/{fetch.ts => api.ts} | 0
 8 files changed, 15 insertions(+), 15 deletions(-)
 rename templates/quasar/utils/{fetch.ts => api.ts} (100%)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 9e44db05..a1f42d69 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -72,8 +72,8 @@ export default class extends BaseGenerator {
       "types/list.ts",
 
       // utils
+      "utils/api.ts",
       "utils/date.ts",
-      "utils/fetch.ts",
     ]);
 
     handlebars.registerHelper("compare", hbh_comparison.compare);
@@ -274,9 +274,9 @@ export default {
       "types/view.ts",
 
       // utils
+      "utils/api.ts",
       "utils/date.ts",
       "utils/error.ts",
-      "utils/fetch.ts",
       "utils/mercure.ts",
     ].forEach((common) =>
       this.createFile(common, `${dir}/${common}`, context, false)
diff --git a/src/generators/QuasarGenerator.test.js b/src/generators/QuasarGenerator.test.js
index 365610b8..1dacd513 100644
--- a/src/generators/QuasarGenerator.test.js
+++ b/src/generators/QuasarGenerator.test.js
@@ -90,10 +90,10 @@ test("Generate a Quasar app", async () => {
   );
 
   // utils
+  expect(fs.existsSync(`${tmpobj.name}/utils/api.ts`)).toBe(true);
   expect(fs.existsSync(`${tmpobj.name}/utils/config.ts`)).toBe(true);
-  expect(fs.existsSync(`${tmpobj.name}/utils/error.ts`)).toBe(true);
   expect(fs.existsSync(`${tmpobj.name}/utils/date.ts`)).toBe(true);
-  expect(fs.existsSync(`${tmpobj.name}/utils/fetch.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/error.ts`)).toBe(true);
 
   tmpobj.removeCallback();
 });
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index 328650d6..ae4f15e0 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import type { SubmissionErrors } from 'src/types/error';
 import { SubmissionError } from 'src/utils/error';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 
 interface State {
   created?: {{titleUcFirst}};
@@ -26,7 +26,7 @@ export const use{{titleUcFirst}}CreateStore = defineStore('{{lc}}Create', {
       this.toggleLoading();
 
       try {
-        const response = await fetch('{{name}}', {
+        const response = await api('{{name}}', {
           method: 'POST',
           body: JSON.stringify(payload),
         });
diff --git a/templates/quasar/stores/foo/delete.ts b/templates/quasar/stores/foo/delete.ts
index 15bc0265..d3ac4c33 100644
--- a/templates/quasar/stores/foo/delete.ts
+++ b/templates/quasar/stores/foo/delete.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 
 interface State {
   deleted?: {{titleUcFirst}};
@@ -27,7 +27,7 @@ export const use{{titleUcFirst}}DeleteStore = defineStore('{{lc}}Delete', {
       }
 
       try {
-        await fetch(item['@id'], { method: 'DELETE' });
+        await api(item['@id'], { method: 'DELETE' });
 
         this.toggleLoading();
         this.setDeleted(item);
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index d3c290c2..6e623f03 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { View } from 'src/types/view';
 import { extractHubURL } from 'src/utils/mercure';
@@ -31,7 +31,7 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
 
       try {
         const path = page ? `{{name}}?page=${page}` : '{{name}}';
-        const response = await fetch(path, { params });
+        const response = await api(path, { params });
         const data: PagedCollection<{{titleUcFirst}}> = await response.json();
         const hubUrl = extractHubURL(response);
 
diff --git a/templates/quasar/stores/foo/show.ts b/templates/quasar/stores/foo/show.ts
index 5e6f17f7..e6409ee7 100644
--- a/templates/quasar/stores/foo/show.ts
+++ b/templates/quasar/stores/foo/show.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 import { extractHubURL } from 'src/utils/mercure';
 
 interface State {
@@ -23,7 +23,7 @@ export const use{{titleUcFirst}}ShowStore = defineStore('{{lc}}Show', {
       this.toggleLoading();
 
       try {
-        const response = await fetch(id);
+        const response = await api(id);
         const data: {{titleUcFirst}} = await response.json();
         const hubUrl = extractHubURL(response);
 
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
index f2dfafae..9aa35746 100644
--- a/templates/quasar/stores/foo/update.ts
+++ b/templates/quasar/stores/foo/update.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import type { SubmissionErrors } from 'src/types/error';
 import { SubmissionError } from 'src/utils/error';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 import { extractHubURL } from 'src/utils/mercure';
 
 interface State {
@@ -29,7 +29,7 @@ export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
       this.toggleLoading();
 
       try {
-        const response = await fetch(id);
+        const response = await api(id);
         const data: {{titleUcFirst}} = await response.json();
         const hubUrl = extractHubURL(response);
 
@@ -58,7 +58,7 @@ export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
       }
 
       try {
-        const response = await fetch(
+        const response = await api(
           this.retrieved['@id'] ?? payload['@id'] ?? '',
           {
             method: 'PUT',
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/api.ts
similarity index 100%
rename from templates/quasar/utils/fetch.ts
rename to templates/quasar/utils/api.ts

From a6b2000adfdc9250cc309d2ff108418b3d6f2081 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 28 Dec 2022 09:47:18 +0100
Subject: [PATCH 39/84] Rename relations variables

---
 src/generators/QuasarGenerator.js           | 14 ++++----------
 templates/common/types/foo.ts               |  2 +-
 templates/quasar/components/foo/FooForm.vue |  4 ++--
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index a1f42d69..ab2951b2 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -169,12 +169,7 @@ export default {
 
     const fields = this.parseFields(resource);
     const formFields = this.buildFields(fields);
-    const hasRelations = fields.some(
-      (field) => field.reference || field.embedded
-    );
-    const hasManyRelations = fields.some(
-      (field) => field.isReferences || field.isEmbeddeds
-    );
+    const hasIsRelations = fields.some((field) => field.isRelations);
     const hasDateField = fields.some((field) => field.type === "dateTime");
 
     const parameters = [];
@@ -220,8 +215,7 @@ export default {
       name: resource.name,
       lc,
       fields,
-      hasRelations,
-      hasManyRelations,
+      hasIsRelations,
       hasDateField,
       parameters,
       formFields,
@@ -394,8 +388,8 @@ export default {
           ...field,
           isReferences,
           isEmbeddeds,
-          isRelations: field.reference || field.embedded,
-          isManyRelations: isEmbeddeds || isReferences,
+          isRelation: field.reference || field.embedded,
+          isRelations: isEmbeddeds || isReferences,
         },
       };
     }, {});
diff --git a/templates/common/types/foo.ts b/templates/common/types/foo.ts
index bbcda1a8..220bfc66 100644
--- a/templates/common/types/foo.ts
+++ b/templates/common/types/foo.ts
@@ -2,6 +2,6 @@ import type { Item } from "./item";
 
 export interface {{titleUcFirst}} extends Item {
 {{#each fields}}
- {{#if readonly}}readonly{{/if}} {{name}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelations}}any{{else}}{{type}}{{/if}};
+ {{#if readonly}}readonly{{/if}} {{name}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelation}}any{{else}}{{type}}{{/if}};
 {{/each}}
 }
diff --git a/templates/quasar/components/foo/FooForm.vue b/templates/quasar/components/foo/FooForm.vue
index fd691747..31d327f9 100644
--- a/templates/quasar/components/foo/FooForm.vue
+++ b/templates/quasar/components/foo/FooForm.vue
@@ -2,7 +2,7 @@
   <q-form class="q-pa-md q-col-gutter-y-md" @submit="emitSubmit">
     <div class="row q-gutter-md">
     {{#each formFields}}
-      {{#if isManyRelations}}
+    {{#if isRelations}}
       <FormRepeater
         :values="item.{{name}}"
         :label="$t('{{../lc}}.{{name}}')"
@@ -56,7 +56,7 @@
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import type { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
-{{#if hasManyRelations}}
+{{#if hasIsRelations}}
 import FormRepeater from 'src/components/common/CommonFormRepeater.vue';
 import { Item } from 'src/types/item';
 {{/if}}

From c7942db8c55fdac5c16088cd8c60af9c0c21f349 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 09:58:06 +0100
Subject: [PATCH 40/84] Update quasar components

---
 .../quasar/common/components/ActionCell.vue   |  59 -----
 .../quasar/common/components/Breadcrumb.vue   |  32 ---
 .../common/components/ConfirmDelete.vue       |  35 ---
 .../quasar/common/components/DataFilter.vue   |  43 ----
 .../quasar/common/components/InputDate.vue    | 145 -----------
 .../quasar/common/components/Loading.vue      |  16 --
 .../quasar/common/components/Toolbar.vue      |  91 -------
 templates/quasar/common/components/index.js   |   7 -
 templates/quasar/common/mixins/CreateMixin.js |  39 ---
 templates/quasar/common/mixins/ListMixin.js   | 120 ---------
 templates/quasar/common/mixins/ShowMixin.js   |  61 -----
 templates/quasar/common/mixins/UpdateMixin.js |  83 ------
 .../components/common/ActionCellComponent.vue |  75 ++++++
 .../components/common/BreadcrumbComponent.vue |  27 ++
 .../common/ConfirmDeleteComponent.vue         |  54 ++++
 .../components/common/DataFilterComponent.vue |  44 ++++
 .../common/FormRepeaterComponent.vue          |  72 ++++++
 .../components/common/LoadingComponent.vue    |  11 +
 .../components/common/ToolbarComponent.vue    |  93 +++++++
 templates/quasar/components/foo/Create.vue    |  56 -----
 .../quasar/components/foo/CreateComponent.vue |  42 ++++
 templates/quasar/components/foo/Filter.vue    | 191 --------------
 .../quasar/components/foo/FilterComponent.vue |  31 +++
 templates/quasar/components/foo/Form.vue      | 228 -----------------
 .../quasar/components/foo/FormComponent.vue   | 100 ++++++++
 templates/quasar/components/foo/List.vue      | 132 ----------
 .../quasar/components/foo/ListComponent.vue   | 238 ++++++++++++++++++
 templates/quasar/components/foo/Show.vue      |  73 ------
 .../quasar/components/foo/ShowComponent.vue   | 155 ++++++++++++
 templates/quasar/components/foo/Update.vue    |  39 ---
 .../quasar/components/foo/UpdateComponent.vue |  90 +++++++
 31 files changed, 1032 insertions(+), 1450 deletions(-)
 delete mode 100644 templates/quasar/common/components/ActionCell.vue
 delete mode 100644 templates/quasar/common/components/Breadcrumb.vue
 delete mode 100644 templates/quasar/common/components/ConfirmDelete.vue
 delete mode 100644 templates/quasar/common/components/DataFilter.vue
 delete mode 100644 templates/quasar/common/components/InputDate.vue
 delete mode 100644 templates/quasar/common/components/Loading.vue
 delete mode 100644 templates/quasar/common/components/Toolbar.vue
 delete mode 100644 templates/quasar/common/components/index.js
 delete mode 100644 templates/quasar/common/mixins/CreateMixin.js
 delete mode 100644 templates/quasar/common/mixins/ListMixin.js
 delete mode 100644 templates/quasar/common/mixins/ShowMixin.js
 delete mode 100644 templates/quasar/common/mixins/UpdateMixin.js
 create mode 100644 templates/quasar/components/common/ActionCellComponent.vue
 create mode 100644 templates/quasar/components/common/BreadcrumbComponent.vue
 create mode 100644 templates/quasar/components/common/ConfirmDeleteComponent.vue
 create mode 100644 templates/quasar/components/common/DataFilterComponent.vue
 create mode 100644 templates/quasar/components/common/FormRepeaterComponent.vue
 create mode 100644 templates/quasar/components/common/LoadingComponent.vue
 create mode 100644 templates/quasar/components/common/ToolbarComponent.vue
 delete mode 100644 templates/quasar/components/foo/Create.vue
 create mode 100644 templates/quasar/components/foo/CreateComponent.vue
 delete mode 100644 templates/quasar/components/foo/Filter.vue
 create mode 100644 templates/quasar/components/foo/FilterComponent.vue
 delete mode 100644 templates/quasar/components/foo/Form.vue
 create mode 100644 templates/quasar/components/foo/FormComponent.vue
 delete mode 100644 templates/quasar/components/foo/List.vue
 create mode 100644 templates/quasar/components/foo/ListComponent.vue
 delete mode 100644 templates/quasar/components/foo/Show.vue
 create mode 100644 templates/quasar/components/foo/ShowComponent.vue
 delete mode 100644 templates/quasar/components/foo/Update.vue
 create mode 100644 templates/quasar/components/foo/UpdateComponent.vue

diff --git a/templates/quasar/common/components/ActionCell.vue b/templates/quasar/common/components/ActionCell.vue
deleted file mode 100644
index b65a0e76..00000000
--- a/templates/quasar/common/components/ActionCell.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <q-td slot="body-cell-action" auto-width>
-    <q-btn
-      v-if="handleShow"
-      flat
-      round
-      dense
-      color="secondary"
-      @click="handleShow"
-      icon="format_align_justify"
-    />
-    <q-btn v-if="handleEdit" flat round dense color="secondary" @click="handleEdit" icon="edit" />
-    <q-btn
-      v-if="handleDelete"
-      icon="delete"
-      flat
-      round
-      dense
-      color="secondary"
-      @click="confirmDelete = true"
-    />
-    <ConfirmDelete
-      v-if="handleDelete"
-      :show="confirmDelete"
-      :handle-delete="handleDelete"
-      :handle-cancel="() => (confirmDelete = false)"
-    />
-  </q-td>
-</template>
-
-<script>
-import ConfirmDelete from "./ConfirmDelete";
-
-export default {
-  name: "ActionCell",
-  components: {
-    ConfirmDelete
-  },
-  data() {
-    return {
-      confirmDelete: false
-    };
-  },
-  props: {
-    handleShow: {
-      type: Function,
-      required: false
-    },
-    handleEdit: {
-      type: Function,
-      required: false
-    },
-    handleDelete: {
-      type: Function,
-      required: false
-    }
-  }
-};
-</script>
diff --git a/templates/quasar/common/components/Breadcrumb.vue b/templates/quasar/common/components/Breadcrumb.vue
deleted file mode 100644
index 47a57ebe..00000000
--- a/templates/quasar/common/components/Breadcrumb.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <q-breadcrumbs class="q-mr-sm">
-    <q-breadcrumbs-el icon="home" to="/" />
-    <q-breadcrumbs-el
-      v-for="(breadcrumb, idx) in values"
-      :key="idx"
-      :label="
-        $t(breadcrumb.label) +
-          ' ' +
-          (idx === values.length - 1 && item && item['@id'] ? item['@id'] : '')
-      "
-      :icon="breadcrumb.icon"
-      :to="breadcrumb.to"
-    />
-  </q-breadcrumbs>
-</template>
-
-<script>
-export default {
-  name: 'Breadcrumb',
-  props: {
-    values: {
-      type: Array,
-      required: true,
-    },
-    item: {
-      type: Object,
-      required: false,
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/templates/quasar/common/components/ConfirmDelete.vue b/templates/quasar/common/components/ConfirmDelete.vue
deleted file mode 100644
index d05005d7..00000000
--- a/templates/quasar/common/components/ConfirmDelete.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <q-dialog :value="show" persistent>
-    <q-card>
-      <q-card-section class="row items-center">
-        <q-avatar icon="warning" color="primary" text-color="white" />
-        <span class="q-ml-sm">\{{ $t('{{{labels.confirmDelete}}}') }}</span>
-      </q-card-section>
-
-      <q-card-actions align="right">
-        <q-btn flat label="{{{labels.cancel}}}" color="primary" v-close-popup @click="handleCancel" />
-        <q-btn flat label="{{{labels.delete}}}" color="primary" v-close-popup @click="handleDelete" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script>
-export default {
-  name: 'ConfirmDelete',
-  props: {
-    show: {
-      type: Boolean,
-      required: true,
-    },
-    handleDelete: {
-      type: Function,
-      required: true,
-    },
-    handleCancel: {
-      type: Function,
-      required: false,
-    },
-  },
-};
-</script>
diff --git a/templates/quasar/common/components/DataFilter.vue b/templates/quasar/common/components/DataFilter.vue
deleted file mode 100644
index 066b38d2..00000000
--- a/templates/quasar/common/components/DataFilter.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <q-expansion-item icon="search" :label="$t('{{{labels.filters}}}')" v-model="filtersExpanded">
-    <q-card>
-      <q-card-section @keydown.enter.prevent="handleFilter">
-        <slot name="filter"></slot>
-      </q-card-section>
-      <q-card-section>
-        <q-btn :label="$t('{{{labels.filter}}}')" color="primary" @click="handleFilter" />
-        <q-btn :label="$t('{{{labels.reset}}}')" color="primary" flat class="q-ml-sm" @click="handleReset" />
-      </q-card-section>
-    </q-card>
-  </q-expansion-item>
-</template>
-
-<script>
-export default {
-  name: 'DataFilter',
-  props: {
-    handleReset: {
-      type: Function,
-      required: true,
-    },
-    handleFilter: {
-      type: Function,
-      required: true,
-    },
-    expanded: {
-      type: Boolean,
-      default: false
-    },
-  },
-  data() {
-    return {
-      filtersExpanded: false,
-    };
-  },
-  watch: {
-    expanded(val) {
-      this.filtersExpanded = this.expanded;
-    }
-  }
-};
-</script>
diff --git a/templates/quasar/common/components/InputDate.vue b/templates/quasar/common/components/InputDate.vue
deleted file mode 100644
index 1716f7e2..00000000
--- a/templates/quasar/common/components/InputDate.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<!--
-  https://github.com/controledigital/quasar-solutions/blob/master/components/cInputDate.vue
-  Chamada:
-    <InputDate :value="data" :set="(v) => { data = v }" label="Data" />
--->
-<template>
-  <q-input
-    stack-label
-    lazy-rules
-    bottom-slots
-    v-on="$listeners"
-    v-bind="$attrs"
-    v-model="inputModel"
-    :error="!isValid"
-  >
-    <template v-slot:prepend v-if="kind === 'datetime' || kind === 'date'">
-      <q-icon name="event" class="cursor-pointer">
-        <q-popup-proxy transition-show="scale" transition-hide="scale" ref="qDateProxy">
-          <q-date v-model="calendarModel" :mask="mask" />
-        </q-popup-proxy>
-      </q-icon>
-    </template>
-
-    <template v-slot:append v-if="kind === 'datetime' || kind === 'time'">
-      <q-icon name="access_time" class="cursor-pointer">
-        <q-popup-proxy transition-show="scale" transition-hide="scale" ref="qTimeProxy">
-          <q-time v-model="calendarModel" format24h :mask="mask" />
-        </q-popup-proxy>
-      </q-icon>
-    </template>
-  </q-input>
-</template>
-
-<script>
-import { date } from 'quasar';
-
-const localISOString = (d = new Date()) => {
-  let pad = function(n) {
-      return n < 10 ? '0' + n : n;
-    },
-    tz = d.getTimezoneOffset(), // mins
-    tzs = (tz > 0 ? '-' : '+') + pad(parseInt(Math.abs(tz / 60))) + ':00';
-
-  if (tz % 60 != 0) tzs += pad(Math.abs(tz % 60));
-
-  if (tz === 0)
-    // Zulu time == UTC
-    tzs = 'Z';
-
-  return (
-    d.getFullYear() +
-    '-' +
-    pad(d.getMonth() + 1) +
-    '-' +
-    pad(d.getDate()) +
-    'T' +
-    pad(d.getHours()) +
-    ':' +
-    pad(d.getMinutes()) +
-    ':' +
-    pad(d.getSeconds()) +
-    tzs
-  );
-};
-
-export default {
-  name: 'InputDate',
-  props: { value: String, set: Function, kind: { type: String, default: 'datetime' } },
-  data() {
-    return {
-      isValid: true,
-    };
-  },
-
-  computed: {
-    mask: {
-      get() {
-        switch (this.kind) {
-          case 'date':
-            return 'YYYY/MM/DD';
-          case 'time':
-            return 'HH:mm';
-          case 'datetime':
-          default:
-            return 'YYYY/MM/DD HH:mm';
-        }
-      },
-    },
-    inputModel: {
-      get: function() {
-        switch (this.kind) {
-          case 'date':
-            return this.Model ? this.$d(new Date(this.Model), 'short') : '';
-          case 'time':
-            return this.Model;
-          case 'datetime':
-          default:
-            return this.Model ? this.$d(new Date(this.Model), 'long') : '';
-        }
-      },
-
-      set: function(value) {
-        if (!value) {
-          return;
-        }
-        this.Model = null;
-        this.isValid = true;
-        if (value.length === 10) {
-          let val = value.substr(6, 4) + '/' + value.substr(3, 2) + '/' + value.substr(0, 2);
-          if (new Date(val).toString() === 'Invalid Date') {
-            this.isValid = false;
-          } else {
-            this.isValid = true;
-            console.debug(val);
-            this.Model = val;
-          }
-        }
-      },
-    },
-    calendarModel: {
-      get: function() {
-        return this.Model ? date.formatDate(new Date(this.Model), this.mask) : '';
-      },
-      set: function(val) {
-        let value = val;
-        if (this.kind === 'datetime') {
-          localISOString(new Date(val));
-        }
-        this.$refs.qDateProxy.hide();
-        this.$refs.qTimeProxy.hide();
-        this.Model = value;
-        this.isValid = true;
-      },
-    },
-    Model: {
-      get: function() {
-        return this.value;
-      },
-      set: function(value) {
-        this.set(value);
-      },
-    },
-  },
-};
-</script>
diff --git a/templates/quasar/common/components/Loading.vue b/templates/quasar/common/components/Loading.vue
deleted file mode 100644
index 7c416bc4..00000000
--- a/templates/quasar/common/components/Loading.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <q-inner-loading :showing="showing">
-    <q-spinner size="50px" color="primary" />
-  </q-inner-loading>
-</template>
-
-<script>
-export default {
-  props: {
-    showing: {
-      type: Boolean,
-      required: true,
-    },
-  },
-};
-</script>
diff --git a/templates/quasar/common/components/Toolbar.vue b/templates/quasar/common/components/Toolbar.vue
deleted file mode 100644
index a552ad2c..00000000
--- a/templates/quasar/common/components/Toolbar.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <q-toolbar class="q-my-md">
-    <slot name="left"></slot>
-    <q-space />
-    <div>
-      <q-btn
-        v-if="handleSubmit"
-        :label="$t('{{{labels.submit}}}')"
-        color="primary"
-        @click="submitItem"
-        icon="save"
-      />
-      <q-btn
-        v-if="handleReset"
-        :label="$t('{{{labels.reset}}}')"
-        color="primary"
-        flat
-        class="q-ml-sm"
-        @click="resetItem"
-        icon="settings_backup_restore"
-      />
-      <q-btn
-        v-if="handleDelete"
-        :label="$t('{{{labels.delete}}}')"
-        color="primary"
-        flat
-        class="q-ml-sm"
-        @click="confirmDelete = true"
-        icon="delete"
-      />
-      <q-btn v-if="handleAdd" flat round dense icon="add" @click="addItem" />
-    </div>
-    <ConfirmDelete
-      v-if="handleDelete"
-      :show="confirmDelete"
-      :handle-delete="handleDelete"
-      :handle-cancel="() => (confirmDelete = false)"
-    />
-  </q-toolbar>
-</template>
-
-<script>
-import ConfirmDelete from "./ConfirmDelete";
-
-export default {
-  name: "Toolbar",
-  components: {
-    ConfirmDelete
-  },
-  data() {
-    return {
-      confirmDelete: false
-    };
-  },
-  props: {
-    handleSubmit: {
-      type: Function,
-      required: false
-    },
-    handleReset: {
-      type: Function,
-      required: false
-    },
-    handleDelete: {
-      type: Function,
-      required: false
-    },
-    handleAdd: {
-      type: Function,
-      required: false
-    }
-  },
-  methods: {
-    addItem() {
-      if (this.handleAdd) {
-        this.handleAdd();
-      }
-    },
-    submitItem() {
-      if (this.handleSubmit) {
-        this.handleSubmit();
-      }
-    },
-    resetItem() {
-      if (this.handleReset) {
-        this.handleReset();
-      }
-    }
-  }
-};
-</script>
diff --git a/templates/quasar/common/components/index.js b/templates/quasar/common/components/index.js
deleted file mode 100644
index d93a4ccb..00000000
--- a/templates/quasar/common/components/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as ActionCell } from './ActionCell';
-export { default as Breadcrumb } from './Breadcrumb';
-export { default as ConfirmDelete } from './ConfirmDelete';
-export { default as DataFilter } from './DataFilter';
-export { default as InputDate } from './InputDate';
-export { default as Loading } from './Loading';
-export { default as Toolbar } from './Toolbar';
diff --git a/templates/quasar/common/mixins/CreateMixin.js b/templates/quasar/common/mixins/CreateMixin.js
deleted file mode 100644
index 648530e8..00000000
--- a/templates/quasar/common/mixins/CreateMixin.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { error } from '../../utils/notify';
-
-export default {
-  watch: {
-    created(created) {
-      this.onCreated(created);
-    },
-
-    error(message) {
-      this.onError(message);
-    },
-  },
-
-  methods: {
-    onCreated(item) {
-      item &&
-        this.$router.push({
-          name: `${this.$options.servicePrefix}Update`,
-          params: { id: item['@id'] },
-        });
-    },
-
-    onError(message) {
-      message && error(message, this.$t('{{{labels.close}}}'));
-    },
-
-    onSendForm() {
-      this.$refs.createForm.$children[0].validate().then(success => {
-        if (success) {
-          this.create(this.item);
-        }
-      });
-    },
-
-    resetForm() {
-      this.item = {};
-    },
-  },
-};
diff --git a/templates/quasar/common/mixins/ListMixin.js b/templates/quasar/common/mixins/ListMixin.js
deleted file mode 100644
index a24a5faf..00000000
--- a/templates/quasar/common/mixins/ListMixin.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import { error, success } from '../../utils/notify';
-import { extractDate } from '../../utils/dates';
-
-export default {
-  created() {
-    this.onCreated();
-  },
-
-  data() {
-    return {
-      pagination: {
-        sortBy: null,
-        descending: false,
-        page: 1, // page to be displayed
-        rowsPerPage: 3, // maximum displayed rows
-        rowsNumber: 10, // max number of rows
-      },
-      nextPage: null,
-      filters: {},
-      filtration: {},
-      expandedFilter: false,
-    };
-  },
-
-  watch: {
-    error(message) {
-      this.onListError(message);
-    },
-
-    items() {
-      this.pagination.page = this.nextPage;
-      this.pagination.rowsNumber = this.totalItems;
-      this.nextPage = null;
-    },
-
-    deletedItem(val) {
-      this.onDeletedItem(val);
-    },
-  },
-
-  methods: {
-    onCreated() {
-      this.onRequest({
-        pagination: this.pagination
-      });
-    },
-
-    onListError(message) {
-      message && error(message, this.$t('{{{labels.close}}}'));
-    },
-
-    onDeletedItem(val) {
-      success(`${val['@id']} ${this.$t('{{{labels.deleted}}}')}.`, this.$t('{{{labels.close}}}'));
-    },
-
-    onRequest(props, init) {
-      const {
-        pagination: { page, rowsPerPage: itemsPerPage, sortBy, descending },
-      } = props;
-      this.nextPage = page;
-      let params = {
-        ...this.filtration,
-      };
-      if (itemsPerPage > 0) {
-        params = { ...params, itemsPerPage, page };
-      }
-      if (sortBy) {
-        params[`order[${sortBy}]`] = descending ? 'DESC' : 'ASC';
-      }
-      this.getPage({ params }).then(() => {
-        this.pagination.sortBy = sortBy;
-        this.pagination.descending = descending;
-        this.pagination.rowsPerPage = itemsPerPage;
-        if (!init) {
-          this.filters = { ...this.filtration };
-        }
-      });
-    },
-
-    formatDateTime(val, format) {
-      return val ? this.$d(extractDate(val), format) : '';
-    },
-
-    onSendFilter() {
-      this.onRequest({
-        pagination: this.pagination,
-      });
-    },
-
-    resetFilter() {
-      this.filters = {};
-    },
-
-    addHandler() {
-      this.$router.push({ name: `${this.$options.servicePrefix}Create` });
-    },
-
-    showHandler(item) {
-      this.$router.push({
-        name: `${this.$options.servicePrefix}Show`,
-        params: { id: item['@id'] }
-      });
-    },
-
-    editHandler(item) {
-      this.$router.push({
-        name: `${this.$options.servicePrefix}Update`,
-        params: { id: item['@id'] }
-      });
-    },
-
-    deleteHandler(item) {
-      this.deleteItem(item).then(() =>
-        this.onRequest({
-          pagination: this.pagination,
-        }),
-      );
-    },
-  },
-};
diff --git a/templates/quasar/common/mixins/ShowMixin.js b/templates/quasar/common/mixins/ShowMixin.js
deleted file mode 100644
index b3cf94b8..00000000
--- a/templates/quasar/common/mixins/ShowMixin.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { extractDate } from '../../utils/dates';
-
-export default {
-  created() {
-    this.onCreated();
-  },
-
-  beforeDestroy() {
-    this.onBeforeDestroy();
-  },
-
-  watch: {
-    error(message) {
-      this.onShowError(message);
-    },
-
-    deleteError(message) {
-      this.onDeletedError(message);
-    },
-  },
-
-  methods: {
-    onCreated() {
-      this.retrieve(decodeURIComponent(this.$route.params.id));
-    },
-
-    onBeforeDestroy() {
-      this.reset();
-    },
-
-    onShowError(message) {
-      message &&
-        this.$q.notify({
-          message,
-          color: 'red',
-          icon: 'error',
-          closeBtn: this.$t('{{{labels.close}}}'),
-        });
-    },
-
-    onDeletedError(message) {
-      message &&
-        this.$q.notify({
-          message,
-          color: 'red',
-          icon: 'error',
-          closeBtn: this.$t('{{{labels.close}}}'),
-        });
-    },
-
-    formatDateTime(val, format) {
-      return val ? this.$d(extractDate(val), format) : '';
-    },
-
-    deleteItem() {
-      this.deleteItem(this.item).then(() =>
-        this.$router.push({ name: `${this.$options.servicePrefix}List` })
-      );
-    },
-  },
-};
diff --git a/templates/quasar/common/mixins/UpdateMixin.js b/templates/quasar/common/mixins/UpdateMixin.js
deleted file mode 100644
index 948d50e0..00000000
--- a/templates/quasar/common/mixins/UpdateMixin.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { error, success } from '../../utils/notify';
-
-export default {
-  data() {
-    return {
-      item: {},
-    };
-  },
-
-  created() {
-    this.onCreated();
-  },
-
-  beforeDestroy() {
-    this.onBeforeDestroy();
-  },
-
-  watch: {
-    error(message) {
-      this.onUpdateError(message);
-    },
-
-    deleteError(message) {
-      this.onDeleteError(message);
-    },
-
-    updated(val) {
-      this.onUpdated(val);
-    },
-
-    retrieved(val) {
-      this.item = { ...val };
-    },
-  },
-
-  methods: {
-    del() {
-      this.deleteItem(this.retrieved).then(() =>
-        this.$router
-          .push({ name: `${this.$options.servicePrefix}List` })
-          .catch(() => {})
-      );
-    },
-
-    reset() {
-      this.updateReset();
-      this.delReset();
-      this.createReset();
-    },
-
-    onSendForm() {
-      this.$refs.updateForm.$children[0].validate().then(success => {
-        if (success) {
-          this.update(this.item);
-        }
-      });
-    },
-
-    resetForm() {
-      this.item = { ...this.retrieved };
-    },
-
-    onCreated() {
-      this.retrieve(decodeURIComponent(this.$route.params.id));
-    },
-
-    onBeforeDestroy() {
-      this.reset();
-    },
-
-    onUpdated(val) {
-      success(`${val['@id']} ${this.$t('{{{labels.updated}}}')}.`, this.$t('{{{labels.close}}}'));
-    },
-
-    onUpdateError(message) {
-      message && error(message, this.$t('{{{labels.close}}}'));
-    },
-
-    onDeleteError(message) {
-      message && error(message, this.$t('{{{labels.close}}}'));
-    },
-  },
-};
diff --git a/templates/quasar/components/common/ActionCellComponent.vue b/templates/quasar/components/common/ActionCellComponent.vue
new file mode 100644
index 00000000..dbda8fe0
--- /dev/null
+++ b/templates/quasar/components/common/ActionCellComponent.vue
@@ -0,0 +1,75 @@
+<template>
+  <q-td auto-width>
+    <q-btn
+      v-if="actions.includes('show')"
+      flat
+      round
+      dense
+      color="secondary"
+      icon="format_align_justify"
+      @click="emitShow"
+    />
+
+    <q-btn
+      v-if="actions.includes('edit')"
+      flat
+      round
+      dense
+      color="secondary"
+      icon="edit"
+      @click="emitEdit"
+    />
+
+    <q-btn
+      v-if="actions.includes('delete')"
+      icon="delete"
+      flat
+      round
+      dense
+      color="secondary"
+      @click="toggleConfirmDelete"
+    />
+
+    <ConfirmDelete
+      v-if="actions.includes('delete')"
+      :show="confirmDelete"
+      @delete="emitDelete"
+      @cancel="toggleConfirmDelete"
+    />
+  </q-td>
+</template>
+
+<script lang="ts" setup>
+import ConfirmDelete from 'src/components/common/ConfirmDeleteComponent.vue';
+import { ref, toRefs } from 'vue';
+
+const props = defineProps<{
+  actions: ('show' | 'edit' | 'delete')[];
+}>();
+
+const { actions } = toRefs(props);
+
+const emit = defineEmits<{
+  (e: 'show'): void;
+  (e: 'edit'): void;
+  (e: 'delete'): void;
+}>();
+
+function emitShow() {
+  emit('show');
+}
+
+function emitEdit() {
+  emit('edit');
+}
+
+function emitDelete() {
+  emit('delete');
+}
+
+const confirmDelete = ref(false);
+
+function toggleConfirmDelete() {
+  confirmDelete.value = !confirmDelete.value;
+}
+</script>
diff --git a/templates/quasar/components/common/BreadcrumbComponent.vue b/templates/quasar/components/common/BreadcrumbComponent.vue
new file mode 100644
index 00000000..afa0ca82
--- /dev/null
+++ b/templates/quasar/components/common/BreadcrumbComponent.vue
@@ -0,0 +1,27 @@
+<template>
+  <q-breadcrumbs class="q-mr-sm">
+    <q-breadcrumbs-el icon="home" to="/" />
+
+    <q-breadcrumbs-el
+      v-for="(breadcrumb, index) in props.values"
+      :key="index"
+      :label="`${$t(breadcrumb.label)} ${
+        index === props.values.length - 1 && props.item?.['@id']
+          ? props.item['@id']
+          : ''
+      }`"
+      :icon="breadcrumb.icon"
+      :to="breadcrumb.to"
+    />
+  </q-breadcrumbs>
+</template>
+
+<script lang="ts" setup>
+import { Item } from 'src/types/item';
+import { BreadcrumbValue } from 'src/types/breadcrumb';
+
+const props = defineProps<{
+  values: BreadcrumbValue[];
+  item?: Item;
+}>();
+</script>
diff --git a/templates/quasar/components/common/ConfirmDeleteComponent.vue b/templates/quasar/components/common/ConfirmDeleteComponent.vue
new file mode 100644
index 00000000..0d68542a
--- /dev/null
+++ b/templates/quasar/components/common/ConfirmDeleteComponent.vue
@@ -0,0 +1,54 @@
+<template>
+  <q-dialog :model-value="show" persistent>
+    <q-card>
+      <q-card-section class="row items-center">
+        <q-avatar icon="warning" color="primary" text-color="white" />
+
+        <span class="q-ml-sm">
+          {{ $t('Are you sure you want to delete this item?') }}
+        </span>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+          flat
+          label="Cancel"
+          color="primary"
+          v-close-popup
+          @click="emitCancel"
+        />
+
+        <q-btn
+          flat
+          label="Delete"
+          color="primary"
+          v-close-popup
+          @click="emitDelete"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script lang="ts" setup>
+import { toRef } from 'vue';
+
+let props = defineProps<{
+  show: boolean;
+}>();
+
+let show = toRef(props, 'show');
+
+const emit = defineEmits<{
+  (e: 'cancel'): void;
+  (e: 'delete'): void;
+}>();
+
+function emitCancel() {
+  emit('cancel');
+}
+
+function emitDelete() {
+  emit('delete');
+}
+</script>
diff --git a/templates/quasar/components/common/DataFilterComponent.vue b/templates/quasar/components/common/DataFilterComponent.vue
new file mode 100644
index 00000000..0aeed752
--- /dev/null
+++ b/templates/quasar/components/common/DataFilterComponent.vue
@@ -0,0 +1,44 @@
+<template>
+  <q-expansion-item
+    v-model="filtersExpanded"
+    :label="$t('filters')"
+    icon="search"
+  >
+    <q-card>
+      <q-card-section @keydown.enter.prevent="emitFilter">
+        <slot name="filter"></slot>
+      </q-card-section>
+
+      <q-card-section>
+        <q-btn :label="$t('filter')" color="primary" @click="emitFilter" />
+
+        <q-btn
+          :label="$t('reset')"
+          color="primary"
+          flat
+          class="q-ml-sm"
+          @click="emitReset"
+        />
+      </q-card-section>
+    </q-card>
+  </q-expansion-item>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const filtersExpanded = ref(false);
+
+const emit = defineEmits<{
+  (e: 'filter'): void;
+  (e: 'reset'): void;
+}>();
+
+function emitFilter() {
+  emit('filter');
+}
+
+function emitReset() {
+  emit('reset');
+}
+</script>
diff --git a/templates/quasar/components/common/FormRepeaterComponent.vue b/templates/quasar/components/common/FormRepeaterComponent.vue
new file mode 100644
index 00000000..6e965209
--- /dev/null
+++ b/templates/quasar/components/common/FormRepeaterComponent.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <label for="book_reviews" class="text-body1 form-control-label">
+      <span class="q-mr-sm">
+        {{ label }}
+      </span>
+
+      <q-btn color="secondary" @click="addField">Add</q-btn>
+    </label>
+
+    <div class="q-my-md">
+      <q-input
+        v-for="(field, index) in fields"
+        v-model="fields[index]"
+        :key="index"
+        filled
+        class="q-mb-sm"
+        @update:model-value="(value: string) => updateField(index, value)"
+      >
+        <template #append>
+          <q-icon
+            name="delete"
+            class="cursor-pointer"
+            @click="removeField(index)"
+          />
+        </template>
+      </q-input>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, type Ref } from 'vue';
+
+const props = defineProps<{
+  values?: string[];
+  label: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update', values: string[]): void;
+}>();
+
+let fields: Ref<string[]> = ref([]);
+
+if (props.values) {
+  fields.value.push(...props.values);
+}
+
+function addField() {
+  fields.value.push('');
+}
+
+function updateField(index: number, value: string) {
+  fields.value.splice(index, 1, value.trim());
+
+  emitUpdate();
+}
+
+function removeField(index: number) {
+  fields.value.splice(index, 1);
+
+  emitUpdate();
+}
+
+function emitUpdate() {
+  emit(
+    'update',
+    fields.value.filter((review) => review.length)
+  );
+}
+</script>
diff --git a/templates/quasar/components/common/LoadingComponent.vue b/templates/quasar/components/common/LoadingComponent.vue
new file mode 100644
index 00000000..8d3d38a8
--- /dev/null
+++ b/templates/quasar/components/common/LoadingComponent.vue
@@ -0,0 +1,11 @@
+<template>
+  <q-inner-loading :showing="props.showing">
+    <q-spinner size="50px" color="primary" />
+  </q-inner-loading>
+</template>
+
+<script lang="ts" setup>
+let props = defineProps<{
+  showing: boolean;
+}>();
+</script>
diff --git a/templates/quasar/components/common/ToolbarComponent.vue b/templates/quasar/components/common/ToolbarComponent.vue
new file mode 100644
index 00000000..b46206c0
--- /dev/null
+++ b/templates/quasar/components/common/ToolbarComponent.vue
@@ -0,0 +1,93 @@
+<template>
+  <q-toolbar class="q-my-md">
+    <slot name="left" />
+
+    <q-space />
+
+    <div>
+      <q-btn
+        v-if="actions?.includes('submit')"
+        :label="$t('submit')"
+        color="primary"
+        icon="save"
+        @click="emitSubmit"
+      />
+
+      <q-btn
+        v-if="actions?.includes('reset')"
+        :label="$t('reset')"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        icon="settings_backup_restore"
+        @click="emitReset"
+      />
+
+      <q-btn
+        v-if="actions?.includes('delete')"
+        :label="$t('delete')"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        icon="delete"
+        @click="toggleConfirmDelete"
+      />
+
+      <q-btn
+        v-if="actions?.includes('add')"
+        flat
+        round
+        dense
+        icon="add"
+        @click="emitAdd"
+      />
+    </div>
+
+    <ConfirmDelete
+      v-if="actions?.includes('delete')"
+      :show="confirmDelete"
+      @delete="emitDelete"
+      @cancel="toggleConfirmDelete"
+    />
+  </q-toolbar>
+</template>
+
+<script lang="ts" setup>
+import ConfirmDelete from 'src/components/common/ConfirmDeleteComponent.vue';
+import { ref, toRefs } from 'vue';
+
+const props = defineProps<{
+  actions?: ('submit' | 'reset' | 'delete' | 'add')[];
+}>();
+
+const { actions } = toRefs(props);
+
+const emit = defineEmits<{
+  (e: 'submit'): void;
+  (e: 'reset'): void;
+  (e: 'add'): void;
+  (e: 'delete'): void;
+}>();
+
+function emitSubmit() {
+  emit('submit');
+}
+
+function emitReset() {
+  emit('reset');
+}
+
+function emitAdd() {
+  emit('add');
+}
+
+function emitDelete() {
+  emit('delete');
+}
+
+const confirmDelete = ref(false);
+
+function toggleConfirmDelete() {
+  confirmDelete.value = !confirmDelete.value;
+}
+</script>
diff --git a/templates/quasar/components/foo/Create.vue b/templates/quasar/components/foo/Create.vue
deleted file mode 100644
index d4d26df7..00000000
--- a/templates/quasar/components/foo/Create.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div>
-    <Toolbar :handle-submit="onSendForm" :handle-reset="resetForm">
-      <Breadcrumb :values="$route.meta.breadcrumb" slot="left" />
-    </Toolbar>
-    <{{{titleUcFirst}}}Form
-      ref="createForm"
-      :values="item"
-      :errors="violations"
-      :handle-submit="onSendForm"
-    />
-    <Loading :showing="isLoading" />
-  </div>
-</template>
-
-<script>
-import { create } from '../../utils/vuexer';
-import {{{titleUcFirst}}}Form from './Form';
-import { Breadcrumb, Toolbar, Loading } from '../../common/components';
-import CreateMixin from '../../common/mixins/CreateMixin';
-const servicePrefix = '{{{titleUcFirst}}}';
-const { getters, actions } = create(servicePrefix);
-
-export default {
-  name: '{{{titleUcFirst}}}Create',
-  servicePrefix,
-  mixins: [CreateMixin],
-  components: {
-    {{{titleUcFirst}}}Form,
-    Breadcrumb,
-    Toolbar,
-    Loading,
-  },
-
-  data() {
-    return {
-      item: {
-        {{#each formFields}}
-          {{#compare type "==" "time" }}
-        {{{name}}}: '',
-          {{/compare}}
-          {{#compare type "==" "date" }}
-        {{{name}}}: new Date().toISOString(),,
-          {{/compare}}
-          {{#compare type "==" "dateTime" }}
-        {{{name}}}: new Date().toISOString(),
-          {{/compare}}
-        {{/each}}
-      },
-    };
-  },
-
-  computed: getters,
-  methods: actions,
-};
-</script>
diff --git a/templates/quasar/components/foo/CreateComponent.vue b/templates/quasar/components/foo/CreateComponent.vue
new file mode 100644
index 00000000..1b3a42a4
--- /dev/null
+++ b/templates/quasar/components/foo/CreateComponent.vue
@@ -0,0 +1,42 @@
+<template>
+  <Toolbar>
+    <template #left>
+      <Breadcrumb :values="breadcrumb" />
+    </template>
+  </Toolbar>
+
+  <{{titleUcFirst}}Form :errors="violations" @submit="submitForm" />
+
+  <Loading :showing="isLoading" />
+</template>
+
+<script lang="ts" setup>
+import Toolbar from 'src/components/common/ToolbarComponent.vue';
+import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
+import Loading from 'components/common/LoadingComponent.vue';
+import {{titleUcFirst}}Form from 'components/{{lc}}/FormComponent.vue';
+import { useRouter } from 'vue-router';
+import { use{{titleUcFirst}}CreateStore } from 'stores/{{lc}}/create';
+import { storeToRefs } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { useBreadcrumb } from 'src/composables/breadcrumb';
+import { useWatchErrors } from 'src/composables/errors';
+
+const router = useRouter();
+const breadcrumb = useBreadcrumb();
+
+const {{lc}}CreateStore = use{{titleUcFirst}}CreateStore();
+const { created, isLoading, violations, error } = storeToRefs({{lc}}CreateStore);
+
+async function submitForm(item: {{titleUcFirst}}) {
+  await {{lc}}CreateStore.create(item);
+
+  if (!created?.value) {
+    return;
+  }
+
+  router.push({ name: '{{titleUcFirst}}Update', params: { id: created?.value?.['@id'] } });
+}
+
+useWatchErrors([error]);
+</script>
diff --git a/templates/quasar/components/foo/Filter.vue b/templates/quasar/components/foo/Filter.vue
deleted file mode 100644
index 79caa479..00000000
--- a/templates/quasar/components/foo/Filter.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template>
-  <div>
-    {{#forEach parameters}}
-    {{#ifOdd index}}
-    <div class="row q-col-gutter-x-md">
-    {{/ifOdd}}
-    {{#switch filterType}}
-    {{#case "exists"}}
-      <q-checkbox v-model="item['{{{variable}}}']" :label="$t('{{{capitalize name}}}')" class="col-12 col-md" />
-    {{/case}}
-    {{#default}}
-    {{#compare type "==" "checkbox" }}
-      <q-checkbox v-model="item.{{{name}}}" :label="$t('{{{capitalize name}}}')" class="col-12 col-md" />
-    {{/compare}}
-    {{#compare type "==" "date" }}
-      <q-input
-        filled
-        v-model="item.{{{name}}}"
-        mask="date"
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="event" class="cursor-pointer">
-            <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
-              <q-date v-model="item.{{{name}}}" @input="() => $refs.qDateProxy.hide()" />
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "time" }}
-      <q-input
-        filled
-        v-model="item.{{{name}}}"
-        mask="time"
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="access_time" class="cursor-pointer">
-            <q-popup-proxy transition-show="scale" transition-hide="scale">
-              <q-time v-model="item.{{{name}}}" />
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "dateTime" }}
-      <q-input filled v-model="item.{{{name}}}" :label="$t('{{{capitalize name}}}')" class="col-12 col-md">
-        <template v-slot:prepend>
-          <q-icon name="event" class="cursor-pointer">
-            <q-popup-proxy transition-show="scale" transition-hide="scale">
-              <q-date v-model="item.{{{name}}}" mask="YYYY-MM-DD HH:mm" />
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-
-        <template v-slot:append>
-          <q-icon name="access_time" class="cursor-pointer">
-            <q-popup-proxy transition-show="scale" transition-hide="scale">
-              <q-time v-model="item.{{{name}}}" mask="YYYY-MM-DD HH:mm" format24h />
-            </q-popup-proxy>
-          </q-icon>
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "number" }}
-      <q-input
-      v-model.number="item.{{{name}}}"
-      filled
-      type="{{{type}}}"
-      {{#if step}}
-      step="{{{step}}}"
-      {{/if}}
-      :label="$t('{{{capitalize name}}}')"
-      class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-      <q-select
-        v-model="item.{{{name}}}"
-        filled
-        :label="$t('{{{capitalize name}}}')"
-        @filter="{{{name}}}FilterFn"
-        :options="{{{name}}}SelectItems"
-        option-value="@id"
-        option-label="name"
-        class="col-12 col-md"
-        {{#if multiple}}multiple{{/if}}
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">\{{ $t('{{{labels.noresults}}}') }}</q-item-section>
-          </q-item>
-        </template>
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-select>
-    {{else}}
-      <q-input
-        v-model="item.{{{name}}}"
-        filled
-        type="{{{type}}}"
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-input>
-    {{/if}}
-    {{/compare}}
-    {{/default}}
-    {{/switch}}
-    {{#ifEven index}}
-    </div>
-    {{/ifEven}}
-    {{#if isLast}}{{#ifOdd index}}
-      <div class="col-12 col-md"></div>
-    </div>
-    {{/ifOdd}}{{/if}}
-    {{/forEach}}
-  </div>
-</template>
-
-<script>
-{{#if paramsHaveRefs}}
-import { mapActions, mapGetters } from "vuex";
-{{/if}}
-
-export default {
-  props: {
-    values: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    {{#if paramsHaveRefs}}
-    ...mapGetters({
-      {{#each parameters}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-      {{{name}}}SelectItems: '{{{lowercase reference.title}}}/list/selectItems',
-      {{/if}}
-      {{/compare}}
-      {{/each}}
-    }),
-    {{/if}}
-    // eslint-disable-next-line
-    item() {
-      return this.initialValues || this.values;
-    }
-  },
-  methods: {
-    {{#if paramsHaveRefs}}
-    ...mapActions({
-      {{#each parameters}}
-      {{#compare type "==" "text" }}
-      {{#if reference}}
-      {{{name}}}GetSelectItems: '{{{lowercase reference.title}}}/list/getSelectItems',
-      {{/if}}
-      {{/compare}}
-      {{/each}}
-    }),
-
-    {{#each parameters}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-    {{{name}}}FilterFn(val, update /* , abort */) {
-      return this.{{{name}}}SelectItems !== null
-        ? update()
-        : this.{{{name}}}GetSelectItems({}).then(update);
-    },
-    {{/if}}
-    {{/compare}}
-    {{/each}}
-    {{/if}}
-  }
-};
-</script>
diff --git a/templates/quasar/components/foo/FilterComponent.vue b/templates/quasar/components/foo/FilterComponent.vue
new file mode 100644
index 00000000..caefeaf1
--- /dev/null
+++ b/templates/quasar/components/foo/FilterComponent.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="row q-col-gutter-x-md">
+    {{#each parameters}}
+      <q-input
+        v-model="item.{{name}}"
+        filled
+        :label="$t('{{lc}}.{{name}}')"
+        class="col-12 col-md"
+      >
+        <template #append>
+          <q-icon
+            name="close"
+            @click.prevent.stop="item.{{name}} = ''"
+            class="cursor-pointer"
+          />
+        </template>
+      </q-input>
+    {{/each}}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { toRef } from 'vue';
+
+const props = defineProps<{
+  values: {{titleUcFirst}};
+}>();
+
+const item = toRef(props, 'values');
+</script>
diff --git a/templates/quasar/components/foo/Form.vue b/templates/quasar/components/foo/Form.vue
deleted file mode 100644
index 4c361744..00000000
--- a/templates/quasar/components/foo/Form.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-  <q-form class="q-pa-md q-col-gutter-y-md" @keydown.enter.prevent="handleSubmit">
-    {{#forEach formFields}}
-    {{#ifOdd index}}
-    <div class="row q-gutter-md">
-    {{/ifOdd}}
-    {{#compare type "==" "checkbox" }}
-      <q-checkbox v-model="item.{{{name}}}" :label="$t('{{{capitalize name}}}')" class="col-12 col-md" />
-    {{/compare}}
-    {{#compare type "==" "date" }}
-      <InputDate
-        readonly
-        filled
-        :value="item.{{{name}}}"
-        :set="
-          v => {
-            item.{{{name}}} = v;
-          }
-        "
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-        kind="date"
-        :rules="['date']"
-      />
-    {{/compare}}
-    {{#compare type "==" "time" }}
-      <InputDate
-        readonly
-        filled
-        :value="item.{{{name}}}"
-        :set="
-          v => {
-            item.{{{name}}} = v;
-          }
-        "
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-        kind="time"
-        :rules="['time']"
-      />
-    {{/compare}}
-    {{#compare type "==" "dateTime" }}
-      <InputDate
-        readonly
-        filled
-        :value="item.{{{name}}}"
-        :set="
-          v => {
-            item.{{{name}}} = new Date(v).toISOString();
-          }
-        "
-        :label="$t('{{{capitalize name}}}')"
-        class="col-12 col-md"
-        kind="datetime"
-        :rules="['datetime']"
-      />
-    {{/compare}}
-    {{#compare type "==" "number" }}
-      <q-input
-      v-model.number="item.{{{name}}}"
-      filled
-      type="{{{type}}}"
-      {{#if step}}
-      step="{{{step}}}"
-      {{/if}}
-      :label="$t('{{{capitalize name}}}')"
-      lazy-rules
-      :rules="[{{#if required}}val => !!val || $t('{{{../labels.required}}}'), {{/if}}isInvalid('{{{name}}}')]"
-      class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-input>
-    {{/compare}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-      <q-select
-        v-model="item.{{{name}}}"
-        filled
-        :label="$t('{{{capitalize name}}}')"
-        lazy-rules
-        :rules="[{{#if required}}val => !!val || $t('{{{../labels.required}}}'), {{/if}}isInvalid('{{{name}}}')]"
-        @filter="{{{name}}}FilterFn"
-        :options="{{{name}}}SelectItems"
-        option-value="@id"
-        option-label="name"
-        class="col-12 col-md"
-        emit-value
-        map-options
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">\{{ $t('{{{../labels.noresults}}}') }}</q-item-section>
-          </q-item>
-        </template>
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-select>
-    {{else}}
-      <q-input
-        v-model="item.{{{name}}}"
-        filled
-        type="{{{type}}}"
-        :label="$t('{{{capitalize name}}}')"
-        lazy-rules
-        :rules="[{{#if required}}val => !!val || $t('{{{../labels.required}}}'), {{/if}}isInvalid('{{{name}}}')]"
-        class="col-12 col-md"
-      >
-        <template v-slot:append>
-          <q-icon name="close" @click.prevent.stop="item.{{{name}}} = ''" class="cursor-pointer" />
-        </template>
-      </q-input>
-    {{/if}}
-    {{/compare}}
-    {{#ifEven index}}
-    </div>
-    {{/ifEven}}
-    {{#if isLast}}{{#ifOdd index}}
-      <div class="col-12 col-md"></div>
-    </div>
-    {{/ifOdd}}{{/if}}
-    {{/forEach}}
-  </q-form>
-</template>
-
-<script>
-import { form } from '../../utils/vuexer';
-{{#if formContainsDate}}
-import InputDate from '../../common/components/InputDate';
-{{/if}}
-
-const { getters, actions, mutations } = form([
-{{#each formFields}}
-  {{#compare type "==" "text" }}
-  {{#if reference}}
-  { name: '{{{name}}}', module: '{{{reference.title}}}'},
-  {{/if}}
-  {{/compare}}
-{{/each}}
-]);
-
-export default {
-  name: '{{{titleUcFirst}}}Form',
-  {{#if formContainsDate}}
-
-  components: {
-    InputDate,
-  },
-  {{/if}}
-
-  props: {
-    values: {
-      type: Object,
-      required: true,
-    },
-
-    errors: {
-      type: Object,
-      default: () => {},
-    },
-
-    initialValues: {
-      type: Object,
-      default: () => {},
-    },
-
-    handleSubmit: {
-      type: Function,
-      required: true
-    }
-  },
-
-  computed: {
-    ...getters,
-
-    // eslint-disable-next-line
-    item() {
-      return this.initialValues || this.values;
-    },
-
-    violations() {
-      return this.errors || {};
-    },
-  },
-
-  methods: {
-    ...actions,
-    ...mutations,
-
-    isInvalid(/* key */) {
-      return true;
-      // return val => {
-      //   if (typeof val == 'number') {
-      //     if (val > 0) {
-      //       return true;
-      //     } else {
-      //       return this.$t('{{{labels.numValidation}}}');
-      //     }
-      //   }
-      //   if (!(val && val.length > 0)) return this.$t('{{{labels.stringValidation}}}');
-      //   return Object.keys(this.violations).length === 0 && !this.violations[key];
-      // };
-    },
-
-    {{#each formFields}}
-    {{#compare type "==" "text" }}
-    {{#if reference}}
-    {{{name}}}FilterFn(val, update /* , abort */) {
-      const params = {
-        'exists[{{{name}}}]': false,
-      };
-      const template = JSON.stringify(params);
-
-      return this.{{{name}}}SelectItems !== null && this.{{{name}}}SelectItemsTemplate === template
-        ? update()
-        : this.{{{name}}}GetSelectItems({ params }).then(() => {
-            this.{{{name}}}SetSelectItemsTemplate(template);
-            update();
-          });
-    },
-    {{/if}}
-    {{/compare}}
-    {{/each}}
-  },
-};
-</script>
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
new file mode 100644
index 00000000..6c651713
--- /dev/null
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -0,0 +1,100 @@
+<template>
+  <q-form class="q-pa-md q-col-gutter-y-md" @submit="emitSubmit">
+    <div class="row q-gutter-md">
+    {{#each formFields}}
+      {{#if isManyRelations}}
+      <FormRepeater
+        :values="item.{{name}}"
+        :label="$t('{{lc}}.{{name}}')"
+        class="col-12 col-md-8"
+        @update="(values) => (item.{{name}} = values)"
+      />
+      {{else}}
+      <q-input
+        v-model="item.{{name}}"
+        :label="$t('{{lc}}.{{name}}')"
+        :error="Boolean(violations?.{{name}})"
+        :error-message="violations?.{{name}}"
+        name="{{name}}"
+        {{#compare type "==" "dateTime" }}
+        type="date"
+        {{/compare}}
+        {{#compare type "!=" "dateTime" }}
+        type="{{type}}"
+        {{/compare}}
+        bottom-slots
+        filled
+        class="col-12 col-md"
+      >
+        <template #append>
+          <q-icon
+            name="close"
+            class="cursor-pointer"
+            @click.prevent.stop="item.{{name}} = ''"
+          />
+        </template>
+      </q-input>
+      {{/if}}
+    {{/each}}
+    </div>
+
+    <div>
+      <q-btn label="Submit" type="submit" color="primary" />
+      <q-btn
+        label="Reset"
+        type="reset"
+        color="primary"
+        flat
+        class="q-ml-sm"
+        @click="resetForm"
+      />
+    </div>
+  </q-form>
+</template>
+
+<script lang="ts" setup>
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { SubmissionErrors } from 'src/types/error';
+import { Ref, ref, toRef } from 'vue';
+{#if hasManyRelations}}
+import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
+{{/if}}
+import { Item } from 'src/types/item';
+import { formatDateInput } from 'src/utils/dates';
+
+let props = defineProps<{
+  values?: {{titleUcFirst}};
+  errors?: SubmissionErrors;
+}>();
+
+const violations = toRef(props, 'errors');
+
+let item: Ref<{{titleUcFirst}}> = ref({});
+
+if (props.values) {
+  item.value = {
+    ...props.values,
+    {{#compare type "==" "dateTime" }}
+    publicationDate: formatDateInput(props.values.publicationDate),
+    {{/compare}}
+    {{#if isEmbeddeds}}
+    {{name}}: props.values.{{name}}?.map((item: any) => item["@id"] ?? "") ?? [],
+    {{else if embedded}}
+    {{name}}: props.values.{{name}}?.["@id"],
+    {{/if}}
+    {{/each}}
+  };
+}
+
+function resetForm() {
+  item.value = { ...props.values };
+}
+
+let emit = defineEmits<{
+  (e: 'submit', item: {{titleUcFirst}}): void;
+}>();
+
+function emitSubmit() {
+  emit('submit', item.value);
+}
+</script>
diff --git a/templates/quasar/components/foo/List.vue b/templates/quasar/components/foo/List.vue
deleted file mode 100644
index a42e99fd..00000000
--- a/templates/quasar/components/foo/List.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <div>
-    <Toolbar :handle-add="addHandler">
-      <Breadcrumb :values="$route.meta.breadcrumb" slot="left" />
-    </Toolbar>
-    {{#if parameters.length}}
-    <DataFilter
-      :handle-filter="onSendFilter"
-      :handle-reset="resetFilter"
-      :expanded="expandedFilter"
-    ><{{{titleUcFirst}}}FilterForm ref="filterForm" :values="filtration" slot="filter" /></DataFilter>
-    {{/if}}
-    <q-table
-      :data="items"
-      :columns="columns"
-      :pagination.sync="pagination"
-      @request="onRequest"
-      row-key="id"
-      :no-data-label="$t('{{{labels.unavail}}}')"
-      :no-results-label="$t('{{{labels.noresults}}}')"
-      :loading-label="$t('{{{labels.loading}}}')"
-      :rows-per-page-label="$t('{{{labels.recPerPage}}}')"
-      flat
-      :loading="isLoading"
-    >
-      <ActionCell
-        slot="body-cell-action"
-        slot-scope="props"
-        :handle-show="() => showHandler(props.row)"
-        :handle-edit="() => editHandler(props.row)"
-        :handle-delete="() => deleteHandler(props.row)"
-      />
-    </q-table>
-  </div>
-</template>
-
-<script>
-import { list } from '../../utils/vuexer';
-{{#if parameters.length }}
-import {{{titleUcFirst}}}FilterForm from './Filter';
-import { DataFilter } from '../../common/components';
-{{/if}}
-import { ActionCell, Breadcrumb, Toolbar } from '../../common/components';
-import ListMixin from '../../common/mixins/ListMixin';
-const servicePrefix = '{{{titleUcFirst}}}';
-const { getters, actions } = list(servicePrefix);
-
-export default {
-  name: '{{{titleUcFirst}}}List',
-  servicePrefix,
-  mixins: [ListMixin],
-  components: {
-    {{#if parameters.length }}
-    {{{titleUcFirst}}}FilterForm,
-    DataFilter,
-    {{/if}}
-    Breadcrumb,
-    ActionCell,
-    Toolbar,
-  },
-
-  data() {
-    return {
-      columns: [
-        { name: 'action' },
-        { name: 'id', field: '@id', label: this.$t('id') },
-        {{#each fields}}
-          {{#inArray ../dateTypes type}}
-            {{#compare type "==" "time" }}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          format: val => this.formatDateTime(val, 'HH:mm'),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{/compare}}
-            {{#compare type "==" "date" }}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          format: val => this.formatDateTime(val, 'short'),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{/compare}}
-            {{#compare type "==" "dateTime" }}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          format: val => this.formatDateTime(val, 'long'),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{/compare}}
-          {{else}}
-            {{#compare type "==" "number" }}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          format: val => this.$t(val),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{else}}
-        {
-          name: '{{name}}',
-          field: '{{name}}',
-          label: this.$t('{{capitalize name}}'),
-          {{#if sortable }}
-          sortable: true,
-          {{/if~}}
-        },
-            {{/compare}}
-          {{/inArray}}
-        {{/each }}
-      ],
-    };
-  },
-
-  computed: getters,
-  methods: actions,
-};
-</script>
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
new file mode 100644
index 00000000..a3e5cbaf
--- /dev/null
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -0,0 +1,238 @@
+<template>
+  <Toolbar :actions="['add']" @add="goToCreatePage">
+    <template #left>
+      <Breadcrumb :values="breadcrumb" />
+    </template>
+  </Toolbar>
+
+  <q-banner v-if="deleted" class="bg-positive text-white q-ma-md">
+    {{ deleted['@id'] }} deleted.
+  </q-banner>
+  <q-banner v-if="mercureDeleted" class="bg-positive text-white q-ma-md">
+    {{ mercureDeleted['@id'] }} deleted by another user.
+  </q-banner>
+
+  {{#if parameters.length}}
+  <DataFilter @filter="onSendFilter" @reset="resetFilter">
+    <template #filter>
+      <{{titleUcFirst}}Filter :values="filters" />
+    </template>
+  </DataFilter>
+  {{/if}}
+
+  <q-table
+    v-model:pagination="pagination"
+    :rows="items"
+    :columns="columns"
+    :loading="isLoading"
+    :no-data-label="$t('{{{labels.unavail}}}')"
+    :no-results-label="$t('{{{labels.noresults}}}')"
+    :loading-label="$t('{{{labels.loading}}}')"
+    :rows-per-page-label="$t('{{{labels.recPerPage}}}')"
+    row-key="id"
+    flat
+    wrap-cells
+    @request="sendRequest"
+  >
+    <template #body-cell-actions="{ row }">
+      <ActionCell
+        :actions="['show', 'edit', 'delete']"
+        @show="goToShowPage(row)"
+        @edit="gotToEditPage(row)"
+        @delete="deleteItem(row)"
+      />
+    </template>
+
+    {{#each fields}}
+    {{#if isReferences}}
+    <template #body-cell-{{lowercase reference.title}}="{ value }">
+      <td>
+        <template v-if="router.hasRoute('{{reference.title}}Show')">
+          <router-link
+            v-for="{{lowercase reference.title}} in value"
+            :to="{ name: '{{reference.title}}Show', params: { id: {{lowercase reference.title}} } }"
+            :key="{{lowercase reference.title}}"
+          >
+            {{ {{lowercase reference.title}} }}
+
+            <br />
+          </router-link>
+        </template>
+
+        <template v-else>
+          <p v-for="{{lowercase reference.title}} in value" :key="{{lowercase reference.title}}">
+            {{ {{lowercase reference.title}} }}
+          </p>
+        </template>
+      </td>
+    </template>
+    {{else if reference}}
+    <template #body-cell-{{lowercase reference.title}}="{ value }">
+      <td>
+        <router-link
+          v-if="router.hasRoute('{{reference.title}}Show')"
+          :to="{ name: '{{reference.title}}Show', params: { id: value } }"
+        >
+          {{ value }}
+        </router-link>
+
+        <p v-else>
+          {{ value }}
+        </p>
+      </td>
+    </template>
+    {{else if isEmbeddeds}}
+    <template #body-cell-{{lowercase embedded.title}}="{ value }">
+      <td>
+        <template v-if="router.hasRoute('{{embedded.title}}Show')">
+          <router-link
+            v-for="{{lowercase embedded.title}} in value"
+            :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
+            :key="{{lowercase embedded.title}}['@id']"
+          >
+            {{ {{lowercase embedded.title}}['@id'] }}
+
+            <br />
+          </router-link>
+        </template>
+
+        <template v-else>
+          <p v-for="{{lowercase embedded.title}} in value" :key="{{lowercase embedded.title}}['@id']">
+            {{ {{lowercase embedded.title}}['@id'] }}
+          </p>
+        </template>
+      </td>
+    </template>
+    {{else if embedded}}
+    <template #body-cell-{{lowercase embedded.title}}="{ value }">
+      <td>
+        <router-link
+          v-if="router.hasRoute('{{embedded.title}}Show')"
+          :to="{ name: '{{embedded.title}}Show', params: { id: value['@id'] } }"
+        >
+          {{ value['@id'] }}
+        </router-link>
+
+        <p v-else>
+          {{ value['@id'] }}
+        </p>
+      </td>
+    </template>
+    {{/if}}
+    {{/each}}
+  </q-table>
+</template>
+
+<script lang="ts" setup>
+{{#if parameters.length }}
+import DataFilter from 'src/components/common/DataFilterComponent.vue';
+import {{titleUcFirst}}Filter from 'src/components/{{lc}}/FilterComponent.vue';
+{{/if}}
+import Toolbar from 'src/components/common/ToolbarComponent.vue';
+import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
+import ActionCell from 'src/components/common/ActionCellComponent.vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { formatDateTime } from 'src/utils/dates';
+import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
+import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
+import { storeToRefs } from 'pinia';
+import { onBeforeUnmount, ref, watch } from 'vue';
+import { useBreadcrumb } from 'src/composables/breadcrumb';
+import { useWatchErrors } from 'src/composables/errors';
+import { useMercureList } from 'src/composables/mercureList';
+
+const { t } = useI18n();
+const router = useRouter();
+const breadcrumb = useBreadcrumb();
+
+const {{lc}}ListStore = use{{titleUcFirst}}ListStore();
+const { items, totalItems, error, isLoading } = storeToRefs({{lc}}ListStore);
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { deleted, mercureDeleted } = storeToRefs({{lc}}DeleteStore);
+
+async function sendRequest(params = {}) {
+  await {{lc}}ListStore.getItems(params);
+}
+
+useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
+
+const nextPage = ref(1);
+const pagination = {
+  sortBy: undefined,
+  descending: false,
+  page: 1, // page to be displayed
+  rowsPerPage: 3, // maximum displayed rows
+  rowsNumber: 10, // max number of rows
+};
+const filters = ref({});
+const columns = [
+  { name: 'actions', label: t('actions'), field: '' },
+  { name: 'id', field: '@id', label: t('id') },
+  {{#each fields}}
+  {
+    name: '{{name}}',
+    field: '{{name}}',
+    label: t('{{lc}}.{{name}}'),
+    {{#if sortable }}
+    sortable: true,
+    {{/if}}
+    {{#compare type "==" "dateTime" }}
+    format: (value: string) => {
+      return formatDateTime(value);
+    },
+    {{/compare}}
+  }
+  {{/each }}
+];
+
+await sendRequest({ pagination });
+
+watch(items, () => {
+  pagination.page = nextPage.value;
+  pagination.rowsNumber = totalItems.value;
+  nextPage.value = 1;
+});
+
+function onSendFilter() {
+  sendRequest({
+    filters: filters.value,
+    pagination,
+  });
+}
+
+function resetFilter() {
+  filters.value = {};
+}
+
+function goToCreatePage() {
+  router.push({ name: '{{titleUcFirst}}Create' });
+}
+
+function goToShowPage(item: {{titleUcFirst}}) {
+  router.push({
+    name: '{{titleUcFirst}}Show',
+    params: { id: item['@id'] },
+  });
+}
+
+function gotToEditPage(item: {{titleUcFirst}}) {
+  router.push({
+    name: '{{titleUcFirst}}Update',
+    params: { id: item['@id'] },
+  });
+}
+
+async function deleteItem(item: {{titleUcFirst}}) {
+  await {{lc}}DeleteStore.deleteItem(item);
+
+  sendRequest({ pagination });
+}
+
+useWatchErrors([error]);
+
+onBeforeUnmount(() => {
+  {{lc}}DeleteStore.$reset();
+});
+</script>
diff --git a/templates/quasar/components/foo/Show.vue b/templates/quasar/components/foo/Show.vue
deleted file mode 100644
index a8ad2f59..00000000
--- a/templates/quasar/components/foo/Show.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div>
-    <Toolbar :handle-delete="del">
-      <Breadcrumb :values="$route.meta.breadcrumb" :item="item" slot="left" />
-    </Toolbar>
-
-    <div v-if="item" class="table-responsive">
-      <q-markup-table>
-        <thead>
-          <tr>
-            <th>\{{ $t('{{{labels.field}}}') }}</th>
-            <th>\{{ $t('{{{labels.value}}}') }}</th>
-
-            <th>\{{ $t('{{{labels.field}}}') }}</th>
-            <th>\{{ $t('{{{labels.value}}}') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {{#forEach fields}}
-          {{#ifOdd index}}
-          <tr>
-          {{/ifOdd}}
-            <td>\{{ $t('{{{capitalize name}}}') }}</td>
-            <td>{{#switch type}}
-            {{#case "dateTime"}}\{{ formatDateTime(item['{{{name}}}'], 'long') }}{{/case~}}
-            {{#case "date"}}\{{ formatDateTime(item['{{{name}}}'], 'short') }}{{/case~}}
-            {{#case "number"}}\{{ $t(item['{{{name}}}']) }}{{/case~}}
-            {{#default}}
-              {{#if reference}}
-            \{{ item['{{{name}}}'] && item['{{{name}}}'].name }}
-              {{else}}
-            \{{ item['{{{name}}}'] }}
-              {{/if}}
-            {{/default~}}
-            {{/switch}}
-            </td>
-
-          {{#ifEven index}}
-          </tr>
-          {{/ifEven}}
-          {{#if isLast}}{{#ifOdd index}}
-            <td></td>
-          </tr>
-          {{/ifOdd}}{{/if}}
-          {{/forEach }}
-        </tbody>
-      </q-markup-table>
-    </div>
-    <Loading :showing="isLoading" />
-  </div>
-</template>
-
-<script>
-import { show } from '../../utils/vuexer';
-import { Breadcrumb, Toolbar, Loading } from '../../common/components';
-import ShowMixin from '../../common/mixins/ShowMixin';
-const servicePrefix = '{{{titleUcFirst}}}';
-const { getters, actions } = show(servicePrefix);
-
-export default {
-  name: '{{{titleUcFirst}}}Show',
-  servicePrefix,
-  mixins: [ShowMixin],
-  components: {
-    Breadcrumb,
-    Toolbar,
-    Loading,
-  },
-
-  computed: getters,
-  methods: actions,
-};
-</script>
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
new file mode 100644
index 00000000..9f26ddc7
--- /dev/null
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -0,0 +1,155 @@
+<template>
+  <Toolbar :actions="['delete']" @delete="deleteItem">
+    <template #left>
+      <Breadcrumb :values="breadcrumb" />
+    </template>
+  </Toolbar>
+
+  <div v-if="item" class="table-responsive">
+    <q-markup-table>
+      <thead>
+        <tr>
+          <th>\{{ $t('{{labels.field}}') }}</th>
+          <th>\{{ $t('{{labels.value}}') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#each fields}}
+        <tr>
+          <td>\{{ $t('{{lc}}.{{name}}') }}</td>
+
+          <td>
+            {{#if isReferences}}
+            <template v-if="router.hasRoute('{{reference.title}}Show')">
+              <router-link
+                v-for="{{lowercase reference.title}} in item.{{reference.name}}"
+                :to="{ name: '{{reference.title}}Show', params: { id: {{lowercase reference.title}} } }"
+                :key="{{lowercase reference.title}}"
+              >
+                \{{ {{lowercase reference.title}} }}
+
+                <br />
+              </router-link>
+            </template>
+
+            <template v-else>
+              <p
+                v-for="{{lowercase reference.title}} in item.{{reference.name}}"
+                :key="{{lowercase reference.title}}"
+              >
+                \{{ {{lowercase reference.title}} }}
+              </p>
+            </template>
+            {{else if reference}}
+            <router-link
+              v-if="router.hasRoute('{{reference.title}}Show')"
+              :to="{ name: '{{reference.title}}Show', params: { id: item.{{lowercase reference.title}} } }"
+            >
+              \{{ item.{{lowercase reference.title}} }}
+            </router-link>
+
+            <p v-else>
+              \{{ item.{{lowercase reference.title}} }}
+            </p>
+            {{else if isEmbeddeds}}
+            <template v-if="router.hasRoute('{{embedded.title}}Show')">
+              <router-link
+                v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
+                :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
+                :key="{{lowercase embedded.title}}['@id']"
+              >
+                \{{ {{lowercase embedded.title}}["@id"] }}
+
+                <br />
+              </router-link>
+            </template>
+
+            <template v-else>
+              <p
+                v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
+                :key="{{lowercase embedded.title}}['@id']"
+              >
+                \{{ {{lowercase embedded.title}}["@id"] }}
+              </p>
+            </template>
+            {{else if embedded}}
+            <router-link
+              v-if="router.hasRoute('{{embedded.title}}Show')"
+              :to="{ name: '{{embedded.title}}Show', params: { id: item.{{lowercase embedded.title}}['@id'] } }"
+            >
+              \{{ item.{{lowercase embedded.title}}["@id"] }}
+            </router-link>
+
+            <p v-else>
+              \{{ item.{{lowercase embedded.title}}["@id"] }}
+            </p>
+            {{else if (compare type "==" "dateTime") }}
+            \{{ formatDateTime(item.{{name}}) }}
+            {{else}}
+            \{{ item.{{name}} }}
+            {{/if}}
+          </td>
+        </tr>
+        {{/each }}
+      </tbody>
+    </q-markup-table>
+  </div>
+
+  <Loading :showing="isLoading" />
+</template>
+
+<script lang="ts" setup>
+import Toolbar from 'src/components/common/ToolbarComponent.vue';
+import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
+import Loading from 'src/components/common/LoadingComponent.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
+import { storeToRefs } from 'pinia';
+import { formatDateTime } from 'src/utils/dates';
+import { onBeforeUnmount } from 'vue';
+import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
+import { useBreadcrumb } from 'src/composables/breadcrumb';
+import { useWatchErrors } from 'src/composables/errors';
+import { useMercureItem } from 'src/composables/mercureItem';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const breadcrumb = useBreadcrumb();
+
+const {{lc}}ShowStore = use{{titleUcFirst}}ShowStore();
+const { retrieved: item, isLoading, error } = storeToRefs({{lc}}ShowStore);
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { deleted, error: deleteError } = storeToRefs({{lc}}DeleteStore);
+
+useMercureItem({
+  store: {{lc}}ShowStore,
+  deleteStore: {{lc}}DeleteStore,
+  redirectRouteName: '{{titleUcFirst}}List',
+});
+
+await {{lc}}ShowStore.retrieve(decodeURIComponent(route.params.id as string));
+
+async function deleteItem() {
+  if (!item?.value) {
+    {{lc}}DeleteStore.setError(t('This item does not exist anymore'));
+    return;
+  }
+
+  await {{lc}}DeleteStore.deleteItem(item.value);
+
+  if (!deleted?.value) {
+    return;
+  }
+
+  router.push({ name: '{{titleUcFirst}}List' });
+}
+
+useWatchErrors([error, deleteError]);
+
+onBeforeUnmount(() => {
+  {{lc}}ShowStore.$reset();
+});
+</script>
diff --git a/templates/quasar/components/foo/Update.vue b/templates/quasar/components/foo/Update.vue
deleted file mode 100644
index 4f04665b..00000000
--- a/templates/quasar/components/foo/Update.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div>
-    <Toolbar :handle-submit="onSendForm" :handle-reset="resetForm" :handle-delete="del">
-      <Breadcrumb :values="$route.meta.breadcrumb" :item="item" slot="left" />
-    </Toolbar>
-    <{{{titleUcFirst}}}Form
-      ref="updateForm"
-      v-if="item"
-      :values="item"
-      :errors="violations"
-      :handle-submit="onSendForm"
-    />
-    <Loading :showing="isLoading || deleteLoading" />
-  </div>
-</template>
-
-<script>
-import { update } from '../../utils/vuexer';
-import {{{titleUcFirst}}}Form from './Form.vue';
-import { Breadcrumb, Toolbar, Loading } from '../../common/components';
-import UpdateMixin from '../../common/mixins/UpdateMixin';
-const servicePrefix = '{{{titleUcFirst}}}';
-const { getters, actions } = update(servicePrefix);
-
-export default {
-  name: '{{{titleUcFirst}}}Update',
-  servicePrefix,
-  mixins: [UpdateMixin],
-  components: {
-    {{{titleUcFirst}}}Form,
-    Breadcrumb,
-    Toolbar,
-    Loading,
-  },
-
-  computed: getters,
-  methods: actions,
-};
-</script>
diff --git a/templates/quasar/components/foo/UpdateComponent.vue b/templates/quasar/components/foo/UpdateComponent.vue
new file mode 100644
index 00000000..05d65a97
--- /dev/null
+++ b/templates/quasar/components/foo/UpdateComponent.vue
@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <Toolbar :actions="['delete']" @delete="deleteItem">
+      <template #left>
+        <Breadcrumb :values="breadcrumb" :item="item" />
+      </template>
+    </Toolbar>
+
+    <{{titleUcFirst}}Form
+      v-if="item"
+      :values="item"
+      :errors="violations"
+      @submit="submitForm"
+    />
+
+    <Loading :showing="isLoading || deleteLoading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Toolbar from 'components/common/ToolbarComponent.vue';
+import Breadcrumb from 'components/common/BreadcrumbComponent.vue';
+import Loading from 'components/common/LoadingComponent.vue';
+import {{titleUcFirst}}Form from 'components/{{lc}}/FormComponent.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { use{{titleUcFirst}}UpdateStore } from 'src/stores/{{lc}}/update';
+import { storeToRefs } from 'pinia';
+import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
+import { onBeforeUnmount } from 'vue';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { displaySuccessNotification } from 'src/utils/notifications';
+import { useI18n } from 'vue-i18n';
+import { useBreadcrumb } from 'src/composables/breadcrumb';
+import { useWatchErrors } from 'src/composables/errors';
+import { useMercureItem } from 'src/composables/mercureItem';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const breadcrumb = useBreadcrumb();
+
+const {{lc}}UpdateStore = use{{titleUcFirst}}UpdateStore();
+const {
+  retrieved: item,
+  updated,
+  isLoading,
+  error,
+  violations,
+} = storeToRefs({{lc}}UpdateStore);
+
+const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
+const { isLoading: deleteLoading, error: deleteError } =
+  storeToRefs({{lc}}DeleteStore);
+
+useMercureItem({
+  store: {{lc}}UpdateStore,
+  deleteStore: {{lc}}DeleteStore,
+  redirectRouteName: '{{titleUcFirst}}List',
+});
+
+await {{lc}}UpdateStore.retrieve(decodeURIComponent(route.params.id as string));
+
+async function deleteItem() {
+  if (!item?.value) {
+    {{lc}}UpdateStore.setError('No {{lc}} found. Please reload');
+    return;
+  }
+
+  await {{lc}}DeleteStore.deleteItem(item?.value);
+
+  router.push({ name: '{{titleUcFirst}}List' });
+}
+
+async function submitForm(item: {{titleUcFirst}}) {
+  await {{lc}}UpdateStore.update(item);
+
+  if (!updated?.value) {
+    return;
+  }
+
+  displaySuccessNotification(`${item['@id']} ${t('updated')}.`, t('close'));
+}
+
+useWatchErrors([error, deleteError]);
+
+onBeforeUnmount(() => {
+  {{lc}}UpdateStore.$reset();
+  {{lc}}DeleteStore.$reset();
+});
+</script>

From d4bcdf4684d793e10f899f001d711b3534cf13fa Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 09:59:05 +0100
Subject: [PATCH 41/84] Update store

---
 .../quasar/common/store/create/actions.js     |  36 ------
 .../quasar/common/store/create/getters.js     |   4 -
 .../common/store/create/mutation_types.js     |   5 -
 .../quasar/common/store/create/mutations.js   |  21 ----
 templates/quasar/common/store/create/state.js |   6 -
 .../quasar/common/store/delete/actions.js     |  19 ---
 .../quasar/common/store/delete/getters.js     |   3 -
 .../common/store/delete/mutation_types.js     |   5 -
 .../quasar/common/store/delete/mutations.js   |  17 ---
 templates/quasar/common/store/delete/state.js |   5 -
 templates/quasar/common/store/list/actions.js |  39 ------
 templates/quasar/common/store/list/getters.js |   7 --
 .../common/store/list/mutation_types.js       |  14 ---
 .../quasar/common/store/list/mutations.js     |  33 -----
 templates/quasar/common/store/list/state.js   |   9 --
 .../quasar/common/store/mutation_types.js     |   5 -
 templates/quasar/common/store/show/actions.js |  20 ---
 templates/quasar/common/store/show/getters.js |   3 -
 .../common/store/show/mutation_types.js       |   5 -
 .../quasar/common/store/show/mutations.js     |  17 ---
 templates/quasar/common/store/show/state.js   |   5 -
 .../quasar/common/store/update/actions.js     |  54 ---------
 .../quasar/common/store/update/getters.js     |   5 -
 .../common/store/update/mutation_types.js     |  12 --
 .../quasar/common/store/update/mutations.js   |  25 ----
 templates/quasar/common/store/update/state.js |   7 --
 templates/quasar/stores/foo/create.ts         |  64 ++++++++++
 templates/quasar/stores/foo/delete.ts         |  53 ++++++++
 templates/quasar/stores/foo/list.ts           |  96 +++++++++++++++
 templates/quasar/stores/foo/show.ts           |  62 ++++++++++
 templates/quasar/stores/foo/update.ts         | 114 ++++++++++++++++++
 31 files changed, 389 insertions(+), 381 deletions(-)
 delete mode 100644 templates/quasar/common/store/create/actions.js
 delete mode 100644 templates/quasar/common/store/create/getters.js
 delete mode 100644 templates/quasar/common/store/create/mutation_types.js
 delete mode 100644 templates/quasar/common/store/create/mutations.js
 delete mode 100644 templates/quasar/common/store/create/state.js
 delete mode 100644 templates/quasar/common/store/delete/actions.js
 delete mode 100644 templates/quasar/common/store/delete/getters.js
 delete mode 100644 templates/quasar/common/store/delete/mutation_types.js
 delete mode 100644 templates/quasar/common/store/delete/mutations.js
 delete mode 100644 templates/quasar/common/store/delete/state.js
 delete mode 100644 templates/quasar/common/store/list/actions.js
 delete mode 100644 templates/quasar/common/store/list/getters.js
 delete mode 100644 templates/quasar/common/store/list/mutation_types.js
 delete mode 100644 templates/quasar/common/store/list/mutations.js
 delete mode 100644 templates/quasar/common/store/list/state.js
 delete mode 100644 templates/quasar/common/store/mutation_types.js
 delete mode 100644 templates/quasar/common/store/show/actions.js
 delete mode 100644 templates/quasar/common/store/show/getters.js
 delete mode 100644 templates/quasar/common/store/show/mutation_types.js
 delete mode 100644 templates/quasar/common/store/show/mutations.js
 delete mode 100644 templates/quasar/common/store/show/state.js
 delete mode 100644 templates/quasar/common/store/update/actions.js
 delete mode 100644 templates/quasar/common/store/update/getters.js
 delete mode 100644 templates/quasar/common/store/update/mutation_types.js
 delete mode 100644 templates/quasar/common/store/update/mutations.js
 delete mode 100644 templates/quasar/common/store/update/state.js
 create mode 100644 templates/quasar/stores/foo/create.ts
 create mode 100644 templates/quasar/stores/foo/delete.ts
 create mode 100644 templates/quasar/stores/foo/list.ts
 create mode 100644 templates/quasar/stores/foo/show.ts
 create mode 100644 templates/quasar/stores/foo/update.ts

diff --git a/templates/quasar/common/store/create/actions.js b/templates/quasar/common/store/create/actions.js
deleted file mode 100644
index c5a6543a..00000000
--- a/templates/quasar/common/store/create/actions.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import SubmissionError from '../../../error/SubmissionError';
-import fetch from '../../../utils/fetch';
-
-export const createCommon = ({ commit }, { page, ep, values }, { types }) => {
-  commit(types.SET_ERROR, '');
-  commit(types.TOGGLE_LOADING);
-
-  return fetch(
-    { id: page, ep },
-    { method: 'POST', body: JSON.stringify(values) }
-  )
-    .then(response => {
-      commit(types.TOGGLE_LOADING);
-
-      return response.json();
-    })
-    .then(data => {
-      commit(types.SET_CREATED, data);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-
-      if (e instanceof SubmissionError) {
-        commit(types.SET_VIOLATIONS, e.errors);
-        // eslint-disable-next-line
-        commit(types.SET_ERROR, e.errors._error);
-        return;
-      }
-
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const resetCommon = ({ commit }, { types }) => {
-  commit(types.RESET);
-};
diff --git a/templates/quasar/common/store/create/getters.js b/templates/quasar/common/store/create/getters.js
deleted file mode 100644
index df466e80..00000000
--- a/templates/quasar/common/store/create/getters.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const created = state => state.created;
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
-export const violations = state => state.violations;
diff --git a/templates/quasar/common/store/create/mutation_types.js b/templates/quasar/common/store/create/mutation_types.js
deleted file mode 100644
index 4b80d5b9..00000000
--- a/templates/quasar/common/store/create/mutation_types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = ['RESET', 'SET_CREATED', 'SET_ERROR', 'SET_VIOLATIONS', 'TOGGLE_LOADING'];
-
-export default m => mutationTypes(m, 'CREATE', types);
diff --git a/templates/quasar/common/store/create/mutations.js b/templates/quasar/common/store/create/mutations.js
deleted file mode 100644
index 15c2aaca..00000000
--- a/templates/quasar/common/store/create/mutations.js
+++ /dev/null
@@ -1,21 +0,0 @@
-export default (initState, types) => ({
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.SET_CREATED](state, created) {
-    Object.assign(state, { created });
-  },
-
-  [types.SET_VIOLATIONS](state, violations) {
-    Object.assign(state, { violations });
-  },
-
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-});
diff --git a/templates/quasar/common/store/create/state.js b/templates/quasar/common/store/create/state.js
deleted file mode 100644
index 558b8d1f..00000000
--- a/templates/quasar/common/store/create/state.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default () => ({
-  isLoading: false,
-  error: '',
-  created: null,
-  violations: null,
-});
diff --git a/templates/quasar/common/store/delete/actions.js b/templates/quasar/common/store/delete/actions.js
deleted file mode 100644
index 22eb84d2..00000000
--- a/templates/quasar/common/store/delete/actions.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import fetch from '../../../utils/fetch';
-
-export const delCommon = ({ commit }, { item, ep }, { types }) => {
-  commit(types.TOGGLE_LOADING);
-
-  return fetch({ id: item['@id'], ep }, { method: 'DELETE' })
-    .then(() => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_DELETED, item);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const resetCommon = ({ commit }, { types }) => {
-  commit(types.RESET);
-};
diff --git a/templates/quasar/common/store/delete/getters.js b/templates/quasar/common/store/delete/getters.js
deleted file mode 100644
index 5d0feed2..00000000
--- a/templates/quasar/common/store/delete/getters.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const deleted = state => state.deleted;
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
diff --git a/templates/quasar/common/store/delete/mutation_types.js b/templates/quasar/common/store/delete/mutation_types.js
deleted file mode 100644
index e12dd9e3..00000000
--- a/templates/quasar/common/store/delete/mutation_types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = ['RESET', 'SET_ERROR', 'SET_DELETED', 'TOGGLE_LOADING'];
-
-export default m => mutationTypes(m, 'DELETE', types);
diff --git a/templates/quasar/common/store/delete/mutations.js b/templates/quasar/common/store/delete/mutations.js
deleted file mode 100644
index 1e1fd8fc..00000000
--- a/templates/quasar/common/store/delete/mutations.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default (initState, types) => ({
-  [types.SET_DELETED](state, deleted) {
-    Object.assign(state, { deleted });
-  },
-
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-});
diff --git a/templates/quasar/common/store/delete/state.js b/templates/quasar/common/store/delete/state.js
deleted file mode 100644
index 1499de79..00000000
--- a/templates/quasar/common/store/delete/state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default () => ({
-  isLoading: false,
-  error: '',
-  deleted: null,
-});
diff --git a/templates/quasar/common/store/list/actions.js b/templates/quasar/common/store/list/actions.js
deleted file mode 100644
index 76b03c6f..00000000
--- a/templates/quasar/common/store/list/actions.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import fetch from '../../../utils/fetch';
-
-export const getItemsCommon = (
-  { commit },
-  { page, ep, params },
-  { types, hydraPrefix }
-) => {
-  commit(types.TOGGLE_LOADING);
-  return fetch({ id: page, ep }, { params })
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ITEMS, data[`${hydraPrefix}member`]);
-      commit(types.SET_VIEW, data[`${hydraPrefix}view`]);
-      commit(types.SET_TOTALITEMS, data[`${hydraPrefix}totalItems`]);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const getSelectItemsCommon = (
-  { commit },
-  { page, ep, params },
-  { types, hydraPrefix }
-) => {
-  commit(types.TOGGLE_LOADING);
-  return fetch({ id: page, ep }, { params })
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_SELECT_ITEMS, data[`${hydraPrefix}member`]);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
diff --git a/templates/quasar/common/store/list/getters.js b/templates/quasar/common/store/list/getters.js
deleted file mode 100644
index 5bdb4d7a..00000000
--- a/templates/quasar/common/store/list/getters.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
-export const items = state => state.items;
-export const selectItems = state => state.selectItems;
-export const selectItemsTemplate = state => state.selectItemsTemplate;
-export const view = state => state.view;
-export const totalItems = state => state.totalItems;
diff --git a/templates/quasar/common/store/list/mutation_types.js b/templates/quasar/common/store/list/mutation_types.js
deleted file mode 100644
index a375a54d..00000000
--- a/templates/quasar/common/store/list/mutation_types.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = [
-  'RESET',
-  'SET_ITEMS',
-  'SET_SELECT_ITEMS',
-  'SET_SELECT_ITEMS_TEMPLATE',
-  'SET_ERROR',
-  'SET_VIEW',
-  'TOGGLE_LOADING',
-  'SET_TOTALITEMS',
-];
-
-export default m => mutationTypes(m, 'LIST', types);
diff --git a/templates/quasar/common/store/list/mutations.js b/templates/quasar/common/store/list/mutations.js
deleted file mode 100644
index 24541874..00000000
--- a/templates/quasar/common/store/list/mutations.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export default (initState, types) => ({
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.SET_ITEMS](state, items) {
-    Object.assign(state, { items });
-  },
-
-  [types.SET_SELECT_ITEMS](state, selectItems) {
-    Object.assign(state, { selectItems });
-  },
-
-  [types.SET_SELECT_ITEMS_TEMPLATE](state, selectItemsTemplate) {
-    Object.assign(state, { selectItemsTemplate });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.SET_VIEW](state, view) {
-    Object.assign(state, { view });
-  },
-
-  [types.SET_TOTALITEMS](state, totalItems) {
-    Object.assign(state, { totalItems });
-  },
-});
diff --git a/templates/quasar/common/store/list/state.js b/templates/quasar/common/store/list/state.js
deleted file mode 100644
index 7148e84d..00000000
--- a/templates/quasar/common/store/list/state.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default () => ({
-  error: '',
-  isLoading: false,
-  items: [],
-  view: [],
-  totalItems: 10,
-  selectItems: null,
-  selectItemsTemplate: '',
-});
diff --git a/templates/quasar/common/store/mutation_types.js b/templates/quasar/common/store/mutation_types.js
deleted file mode 100644
index 2f9352df..00000000
--- a/templates/quasar/common/store/mutation_types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const mutationTypes = (m, area, todoTypes) => {
-  let types = {};
-  todoTypes.forEach(item => (types[`${item}`] = `${m}_${area}_${item}`));
-  return types;
-};
diff --git a/templates/quasar/common/store/show/actions.js b/templates/quasar/common/store/show/actions.js
deleted file mode 100644
index f64224a9..00000000
--- a/templates/quasar/common/store/show/actions.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import fetch from '../../../utils/fetch';
-
-export const retrieveCommon = ({ commit }, id, { types }) => {
-  commit(types.TOGGLE_LOADING);
-
-  return fetch(id)
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_RETRIEVED, data);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const resetCommon = ({ commit }, { types }) => {
-  commit(types.RESET);
-};
diff --git a/templates/quasar/common/store/show/getters.js b/templates/quasar/common/store/show/getters.js
deleted file mode 100644
index 5c5ac951..00000000
--- a/templates/quasar/common/store/show/getters.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
-export const retrieved = state => state.retrieved;
diff --git a/templates/quasar/common/store/show/mutation_types.js b/templates/quasar/common/store/show/mutation_types.js
deleted file mode 100644
index a1e5d706..00000000
--- a/templates/quasar/common/store/show/mutation_types.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = ['RESET', 'SET_ERROR', 'SET_RETRIEVED', 'TOGGLE_LOADING'];
-
-export default m => mutationTypes(m, 'SHOW', types);
diff --git a/templates/quasar/common/store/show/mutations.js b/templates/quasar/common/store/show/mutations.js
deleted file mode 100644
index 69fcdc94..00000000
--- a/templates/quasar/common/store/show/mutations.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default (initState, types) => ({
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.SET_RETRIEVED](state, retrieved) {
-    Object.assign(state, { retrieved });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-});
diff --git a/templates/quasar/common/store/show/state.js b/templates/quasar/common/store/show/state.js
deleted file mode 100644
index 3560e8fd..00000000
--- a/templates/quasar/common/store/show/state.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default () => ({
-  error: '',
-  isLoading: false,
-  retrieved: null,
-});
diff --git a/templates/quasar/common/store/update/actions.js b/templates/quasar/common/store/update/actions.js
deleted file mode 100644
index 25ed1a54..00000000
--- a/templates/quasar/common/store/update/actions.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import SubmissionError from '../../../error/SubmissionError';
-import fetch from '../../../utils/fetch';
-
-export const resetCommon = ({ commit }, { types }) => {
-  commit(types.RESET);
-};
-
-export const retrieveCommon = ({ commit }, dest, { types }) => {
-  commit(types.TOGGLE_LOADING);
-
-  return fetch(dest)
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_RETRIEVED, data);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_ERROR, e.message);
-    });
-};
-
-export const updateCommon = ({ commit, state }, { values, ep }, { types }) => {
-  commit(types.SET_ERROR, '');
-  commit(types.TOGGLE_LOADING);
-
-  return fetch(
-    { id: (state.retrieved && state.retrieved['@id']) || values['@id'], ep },
-    {
-      method: 'PUT',
-      headers: new Headers({ 'Content-Type': 'application/ld+json' }),
-      body: JSON.stringify(values),
-    }
-  )
-    .then(response => response.json())
-    .then(data => {
-      commit(types.TOGGLE_LOADING);
-      commit(types.SET_UPDATED, data);
-    })
-    .catch(e => {
-      commit(types.TOGGLE_LOADING);
-
-      if (e instanceof SubmissionError) {
-        commit(types.SET_VIOLATIONS, e.errors);
-        // eslint-disable-next-line
-        commit(types.SET_ERROR, e.errors._error);
-
-        return;
-      }
-
-      // eslint-disable-next-line
-      commit(types.SET_ERROR, e.message);
-    });
-};
diff --git a/templates/quasar/common/store/update/getters.js b/templates/quasar/common/store/update/getters.js
deleted file mode 100644
index 80690026..00000000
--- a/templates/quasar/common/store/update/getters.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const error = state => state.error;
-export const isLoading = state => state.isLoading;
-export const retrieved = state => state.retrieved;
-export const updated = state => state.updated;
-export const violations = state => state.violations;
diff --git a/templates/quasar/common/store/update/mutation_types.js b/templates/quasar/common/store/update/mutation_types.js
deleted file mode 100644
index ec0244c1..00000000
--- a/templates/quasar/common/store/update/mutation_types.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { mutationTypes } from '../mutation_types';
-
-const types = [
-  'RESET',
-  'SET_ERROR',
-  'SET_RETRIEVED',
-  'SET_UPDATED',
-  'SET_VIOLATIONS',
-  'TOGGLE_LOADING',
-];
-
-export default m => mutationTypes(m, 'UPDATE', types);
diff --git a/templates/quasar/common/store/update/mutations.js b/templates/quasar/common/store/update/mutations.js
deleted file mode 100644
index 42eab2fe..00000000
--- a/templates/quasar/common/store/update/mutations.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export default (initState, types) => ({
-  [types.RESET](state) {
-    Object.assign(state, initState);
-  },
-
-  [types.SET_ERROR](state, error) {
-    Object.assign(state, { error });
-  },
-
-  [types.TOGGLE_LOADING](state) {
-    Object.assign(state, { isLoading: !state.isLoading });
-  },
-
-  [types.SET_RETRIEVED](state, retrieved) {
-    Object.assign(state, { retrieved });
-  },
-
-  [types.SET_UPDATED](state, updated) {
-    Object.assign(state, { error: '', updated, violations: null });
-  },
-
-  [types.SET_VIOLATIONS](state, violations) {
-    Object.assign(state, { violations });
-  },
-});
diff --git a/templates/quasar/common/store/update/state.js b/templates/quasar/common/store/update/state.js
deleted file mode 100644
index 718ce69c..00000000
--- a/templates/quasar/common/store/update/state.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default () => ({
-  error: '',
-  isLoading: false,
-  retrieved: null,
-  updated: null,
-  violations: null,
-});
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
new file mode 100644
index 00000000..cb50bffd
--- /dev/null
+++ b/templates/quasar/stores/foo/create.ts
@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { SubmissionError, type SubmissionErrors } from 'src/types/error';
+import fetch from 'src/utils/fetch';
+
+interface State {
+  created?: {{titleUcFirst}};
+  isLoading: boolean;
+  error?: string;
+  violations?: SubmissionErrors;
+}
+
+export const use{{titleUcFirst}}CreateStore = defineStore('{{lc}}Create', {
+  state: (): State => ({
+    created: undefined,
+    isLoading: false,
+    error: undefined,
+    violations: undefined,
+  }),
+
+  actions: {
+    create(values: {{titleUcFirst}}) {
+      this.setError(undefined);
+      this.setViolations(undefined);
+      this.toggleLoading();
+
+      return fetch('{{lc}}s', { method: 'POST', body: JSON.stringify(values) })
+        .then((response: Response) => {
+          this.toggleLoading();
+
+          return response.json();
+        })
+        .then((data) => {
+          this.setCreated(data);
+        })
+        .catch((e: Error | SubmissionError) => {
+          this.toggleLoading();
+
+          if (e instanceof SubmissionError) {
+            this.setViolations(e.errors);
+            return;
+          }
+
+          this.setError(e.message);
+        });
+    },
+
+    setCreated(created: {{titleUcFirst}}) {
+      this.created = created;
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setError(error: string | undefined) {
+      this.error = error;
+    },
+
+    setViolations(violations: SubmissionErrors | undefined) {
+      this.violations = violations;
+    },
+  },
+});
diff --git a/templates/quasar/stores/foo/delete.ts b/templates/quasar/stores/foo/delete.ts
new file mode 100644
index 00000000..294c88fc
--- /dev/null
+++ b/templates/quasar/stores/foo/delete.ts
@@ -0,0 +1,53 @@
+import { defineStore } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import fetch from 'src/utils/fetch';
+
+interface State {
+  deleted?: {{titleUcFirst}};
+  mercureDeleted?: {{titleUcFirst}};
+  isLoading: boolean;
+  error?: string;
+}
+
+export const use{{titleUcFirst}}DeleteStore = defineStore('{{lc}}Delete', {
+  state: (): State => ({
+    deleted: undefined,
+    mercureDeleted: undefined,
+    isLoading: false,
+    error: undefined,
+  }),
+
+  actions: {
+    deleteItem(item: {{titleUcFirst}}) {
+      this.toggleLoading();
+
+      return fetch(item['@id'] ?? '', { method: 'DELETE' })
+        .then(() => {
+          this.setError('');
+          this.toggleLoading();
+          this.setDeleted(item);
+          this.setMercureDeleted(undefined);
+        })
+        .catch((e: Error) => {
+          this.toggleLoading();
+          this.setError(e.message);
+        });
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setDeleted(deleted: {{titleUcFirst}}) {
+      this.deleted = deleted;
+    },
+
+    setMercureDeleted(mercureDeleted?: {{titleUcFirst}}) {
+      this.mercureDeleted = mercureDeleted;
+    },
+
+    setError(error: string) {
+      this.error = error;
+    },
+  },
+});
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
new file mode 100644
index 00000000..cb2db9fe
--- /dev/null
+++ b/templates/quasar/stores/foo/list.ts
@@ -0,0 +1,96 @@
+import { defineStore } from 'pinia';
+import fetch from 'src/utils/fetch';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { View } from 'src/types/view';
+import { extractHubURL } from 'src/utils/mercure';
+import type { PagedCollection } from 'src/types/collection';
+
+interface State {
+  items: {{titleUcFirst}}[];
+  totalItems: number;
+  hubUrl?: URL;
+  isLoading: boolean;
+  view?: View;
+  error?: string;
+}
+
+export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
+  state: (): State => ({
+    items: [],
+    totalItems: 0,
+    hubUrl: undefined,
+    isLoading: false,
+    view: undefined,
+    error: undefined,
+  }),
+
+  actions: {
+    getItems(params: any) {
+      this.toggleLoading();
+
+      return fetch('{{lc}}s', { params })
+        .then((response: Response) =>
+          response.json().then((data: PagedCollection<{{titleUcFirst}}>) => ({
+            data,
+            hubUrl: extractHubURL(response),
+          }))
+        )
+        .then(
+          ({ data, hubUrl }: { data: PagedCollection<{{titleUcFirst}}>; hubUrl?: URL }) => {
+            this.toggleLoading();
+            this.setItems(data['hydra:member']);
+            this.setTotalItems(data['hydra:totalItems'] ?? 0);
+            this.setView(data['hydra:view']);
+
+            if (hubUrl) {
+              this.setHubUrl(hubUrl);
+            }
+          }
+        )
+        .catch((e: Error) => {
+          this.toggleLoading();
+          this.setError(e.message);
+        });
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setItems(items: {{titleUcFirst}}[]) {
+      this.items = items;
+    },
+
+    setTotalItems(totalItems: number) {
+      this.totalItems = totalItems;
+    },
+
+    setHubUrl(hubUrl: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    setView(view: View) {
+      this.view = view;
+    },
+
+    setError(error: string) {
+      this.error = error;
+    },
+
+    updateItem(updatedItem: {{titleUcFirst}}) {
+      const item: {{titleUcFirst}} | undefined = this.items.find(
+        (i) => i['@id'] === updatedItem['@id']
+      );
+
+      if (!item) return;
+
+      Object.assign(item, updatedItem);
+    },
+
+    deleteItem(deletedItem: {{titleUcFirst}}) {
+      this.items = this.items.filter((item) => {
+        return item['@id'] !== deletedItem['@id'];
+      });
+    },
+  },
+});
diff --git a/templates/quasar/stores/foo/show.ts b/templates/quasar/stores/foo/show.ts
new file mode 100644
index 00000000..4d3aa762
--- /dev/null
+++ b/templates/quasar/stores/foo/show.ts
@@ -0,0 +1,62 @@
+import { defineStore } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import fetch from 'src/utils/fetch';
+import { extractHubURL } from 'src/utils/mercure';
+
+interface State {
+  retrieved?: {{titleUcFirst}};
+  hubUrl?: URL;
+  isLoading: boolean;
+  error?: string;
+}
+
+export const use{{titleUcFirst}}ShowStore = defineStore('{{lc}}Show', {
+  state: (): State => ({
+    retrieved: undefined,
+    hubUrl: undefined,
+    isLoading: false,
+    error: undefined,
+  }),
+
+  actions: {
+    retrieve(id: string) {
+      this.toggleLoading();
+
+      return fetch(id)
+        .then((response: Response) =>
+          response.json().then((data: {{titleUcFirst}}) => ({
+            data,
+            hubUrl: extractHubURL(response),
+          }))
+        )
+        .then(({ data, hubUrl }: { data: {{titleUcFirst}}; hubUrl?: URL }) => {
+          this.toggleLoading();
+          this.setRetrieved(data);
+
+          if (hubUrl) {
+            this.setHubUrl(hubUrl);
+          }
+        })
+        .catch((e: Error) => {
+          this.toggleLoading();
+          this.setError(e.message);
+        });
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setRetrieved(retrieved: {{titleUcFirst}}) {
+      this.retrieved = retrieved;
+    },
+
+    setHubUrl(hubUrl: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    setError(error: string) {
+      this.error = error;
+    },
+  },
+});
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
new file mode 100644
index 00000000..bfc7004f
--- /dev/null
+++ b/templates/quasar/stores/foo/update.ts
@@ -0,0 +1,114 @@
+import { defineStore } from 'pinia';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { SubmissionError, SubmissionErrors } from 'src/types/error';
+import fetch from 'src/utils/fetch';
+import { extractHubURL } from 'src/utils/mercure';
+
+interface State {
+  retrieved?: {{titleUcFirst}};
+  updated?: {{titleUcFirst}};
+  hubUrl?: URL;
+  isLoading: boolean;
+  error?: string;
+  violations?: SubmissionErrors;
+}
+
+export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
+  state: (): State => ({
+    retrieved: undefined,
+    updated: undefined,
+    hubUrl: undefined,
+    isLoading: false,
+    error: undefined,
+    violations: undefined,
+  }),
+
+  actions: {
+    retrieve(id: string) {
+      this.toggleLoading();
+
+      return fetch(id)
+        .then((response: Response) =>
+          response.json().then((data: {{titleUcFirst}}) => ({
+            data,
+            hubUrl: extractHubURL(response),
+          }))
+        )
+        .then(({ data, hubUrl }: { data: {{titleUcFirst}}; hubUrl?: URL }) => {
+          this.setError('');
+          this.toggleLoading();
+          this.setRetrieved(data);
+
+          if (hubUrl) {
+            this.setHubUrl(hubUrl);
+          }
+        })
+        .catch((e: Error) => {
+          this.toggleLoading();
+          this.setError(e.message);
+        });
+    },
+
+    update(values: {{titleUcFirst}}) {
+      this.setError(undefined);
+      this.toggleLoading();
+
+      if (!this.retrieved) {
+        this.setError('No {{lc}} found. Please reload');
+        return;
+      }
+
+      return fetch(this.retrieved['@id'] ?? values['@id'] ?? '', {
+        method: 'PUT',
+        headers: new Headers({ 'Content-Type': 'application/ld+json' }),
+        body: JSON.stringify(values),
+      })
+        .then((response: Response) => response.json())
+        .then((data: {{titleUcFirst}}) => {
+          this.toggleLoading();
+          this.resetErrors();
+          this.setUpdated(data);
+        })
+        .catch((e: Error) => {
+          this.toggleLoading();
+
+          if (e instanceof SubmissionError) {
+            this.setViolations(e.errors);
+            this.setError(e.errors._error);
+            return;
+          }
+
+          this.setError(e.message);
+        });
+    },
+
+    setRetrieved(retrieved: {{titleUcFirst}}) {
+      this.retrieved = retrieved;
+    },
+
+    setUpdated(updated: {{titleUcFirst}}) {
+      this.updated = updated;
+    },
+
+    setHubUrl(hubUrl: URL) {
+      this.hubUrl = hubUrl;
+    },
+
+    toggleLoading() {
+      this.isLoading = !this.isLoading;
+    },
+
+    setError(error?: string) {
+      this.error = error;
+    },
+
+    setViolations(violations?: SubmissionErrors) {
+      this.violations = violations;
+    },
+
+    resetErrors() {
+      this.setError(undefined);
+      this.setViolations(undefined);
+    },
+  },
+});

From 81287970aa4eb987e90f050ccf5815507c9a6f08 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 09:59:28 +0100
Subject: [PATCH 42/84] Add pages

---
 templates/quasar/pages/foo/CreatePage.vue | 11 +++++++++++
 templates/quasar/pages/foo/ListPage.vue   | 11 +++++++++++
 templates/quasar/pages/foo/ShowPage.vue   | 11 +++++++++++
 templates/quasar/pages/foo/UpdatePage.vue | 11 +++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 templates/quasar/pages/foo/CreatePage.vue
 create mode 100644 templates/quasar/pages/foo/ListPage.vue
 create mode 100644 templates/quasar/pages/foo/ShowPage.vue
 create mode 100644 templates/quasar/pages/foo/UpdatePage.vue

diff --git a/templates/quasar/pages/foo/CreatePage.vue b/templates/quasar/pages/foo/CreatePage.vue
new file mode 100644
index 00000000..e7f7ab94
--- /dev/null
+++ b/templates/quasar/pages/foo/CreatePage.vue
@@ -0,0 +1,11 @@
+<template>
+  <Suspense>
+    <{{titleUcFirst}}Create />
+
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import {{titleUcFirst}}Create from 'components/{{lc}}/CreateComponent.vue';
+</script>
diff --git a/templates/quasar/pages/foo/ListPage.vue b/templates/quasar/pages/foo/ListPage.vue
new file mode 100644
index 00000000..b8d4c87a
--- /dev/null
+++ b/templates/quasar/pages/foo/ListPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <Suspense>
+    <{{titleUcFirst}}List />
+
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import {{titleUcFirst}}List from 'components/{{lc}}/ListComponent.vue';
+</script>
diff --git a/templates/quasar/pages/foo/ShowPage.vue b/templates/quasar/pages/foo/ShowPage.vue
new file mode 100644
index 00000000..dcf12270
--- /dev/null
+++ b/templates/quasar/pages/foo/ShowPage.vue
@@ -0,0 +1,11 @@
+<template>
+  <Suspense>
+    <{{titleUcFirst}}Show />
+
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import {{titleUcFirst}}Show from 'components/{{lc}}/ShowComponent.vue';
+</script>
diff --git a/templates/quasar/pages/foo/UpdatePage.vue b/templates/quasar/pages/foo/UpdatePage.vue
new file mode 100644
index 00000000..98b3ce69
--- /dev/null
+++ b/templates/quasar/pages/foo/UpdatePage.vue
@@ -0,0 +1,11 @@
+<template>
+  <Suspense>
+    <{{titleUcFirst}}Update />
+
+    <template #fallback>Loading...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import {{titleUcFirst}}Update from 'components/{{lc}}/UpdateComponent.vue';
+</script>

From ec99bea020efe17e4087c743846fdda959905da1 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:01:47 +0100
Subject: [PATCH 43/84] Remove legacy store

---
 .../store/modules/foo/create/actions.js       | 13 ----------
 .../store/modules/foo/create/getters.js       |  1 -
 .../quasar/store/modules/foo/create/index.js  | 13 ----------
 .../modules/foo/create/mutation_types.js      |  2 --
 .../store/modules/foo/create/mutations.js     |  1 -
 .../quasar/store/modules/foo/create/state.js  |  2 --
 .../store/modules/foo/delete/actions.js       | 11 --------
 .../store/modules/foo/delete/getters.js       |  1 -
 .../quasar/store/modules/foo/delete/index.js  | 13 ----------
 .../modules/foo/delete/mutation_types.js      |  2 --
 .../store/modules/foo/delete/mutations.js     |  1 -
 .../quasar/store/modules/foo/delete/state.js  |  2 --
 templates/quasar/store/modules/foo/index.js   | 16 ------------
 .../quasar/store/modules/foo/list/actions.js  | 26 -------------------
 .../quasar/store/modules/foo/list/getters.js  |  1 -
 .../quasar/store/modules/foo/list/index.js    | 13 ----------
 .../store/modules/foo/list/mutation_types.js  |  2 --
 .../store/modules/foo/list/mutations.js       |  1 -
 .../quasar/store/modules/foo/list/state.js    |  2 --
 .../quasar/store/modules/foo/show/actions.js  | 12 ---------
 .../quasar/store/modules/foo/show/getters.js  |  1 -
 .../quasar/store/modules/foo/show/index.js    | 13 ----------
 .../store/modules/foo/show/mutation_types.js  |  2 --
 .../store/modules/foo/show/mutations.js       |  1 -
 .../quasar/store/modules/foo/show/state.js    |  2 --
 .../store/modules/foo/update/actions.js       | 15 -----------
 .../store/modules/foo/update/getters.js       |  1 -
 .../quasar/store/modules/foo/update/index.js  | 13 ----------
 .../modules/foo/update/mutation_types.js      |  2 --
 .../store/modules/foo/update/mutations.js     |  1 -
 .../quasar/store/modules/foo/update/state.js  |  2 --
 31 files changed, 188 deletions(-)
 delete mode 100644 templates/quasar/store/modules/foo/create/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/create/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/create/index.js
 delete mode 100644 templates/quasar/store/modules/foo/create/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/create/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/create/state.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/index.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/delete/state.js
 delete mode 100644 templates/quasar/store/modules/foo/index.js
 delete mode 100644 templates/quasar/store/modules/foo/list/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/list/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/list/index.js
 delete mode 100644 templates/quasar/store/modules/foo/list/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/list/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/list/state.js
 delete mode 100644 templates/quasar/store/modules/foo/show/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/show/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/show/index.js
 delete mode 100644 templates/quasar/store/modules/foo/show/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/show/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/show/state.js
 delete mode 100644 templates/quasar/store/modules/foo/update/actions.js
 delete mode 100644 templates/quasar/store/modules/foo/update/getters.js
 delete mode 100644 templates/quasar/store/modules/foo/update/index.js
 delete mode 100644 templates/quasar/store/modules/foo/update/mutation_types.js
 delete mode 100644 templates/quasar/store/modules/foo/update/mutations.js
 delete mode 100644 templates/quasar/store/modules/foo/update/state.js

diff --git a/templates/quasar/store/modules/foo/create/actions.js b/templates/quasar/store/modules/foo/create/actions.js
deleted file mode 100644
index 22b767d6..00000000
--- a/templates/quasar/store/modules/foo/create/actions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createCommon, resetCommon } from '../../../../common/store/create/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-const page = '{{{name}}}';
-
-export default function(types) {
-  const create = (context, values) =>
-    createCommon(context, { page, values, ep: ENTRYPOINT }, { types });
-
-  const reset = context => resetCommon(context, { types });
-
-  return { create, reset };
-}
diff --git a/templates/quasar/store/modules/foo/create/getters.js b/templates/quasar/store/modules/foo/create/getters.js
deleted file mode 100644
index 5580e943..00000000
--- a/templates/quasar/store/modules/foo/create/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/create/getters";
diff --git a/templates/quasar/store/modules/foo/create/index.js b/templates/quasar/store/modules/foo/create/index.js
deleted file mode 100644
index 70c23968..00000000
--- a/templates/quasar/store/modules/foo/create/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from './actions';
-import * as getters from './getters';
-import mutations from './mutations';
-import state from './state';
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/create/mutation_types.js b/templates/quasar/store/modules/foo/create/mutation_types.js
deleted file mode 100644
index 5154b1cd..00000000
--- a/templates/quasar/store/modules/foo/create/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/create/mutation_types';
-export default makeTypes('{{{uc}}}');
diff --git a/templates/quasar/store/modules/foo/create/mutations.js b/templates/quasar/store/modules/foo/create/mutations.js
deleted file mode 100644
index eeffa4c8..00000000
--- a/templates/quasar/store/modules/foo/create/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/create/mutations";
diff --git a/templates/quasar/store/modules/foo/create/state.js b/templates/quasar/store/modules/foo/create/state.js
deleted file mode 100644
index 3830ddc5..00000000
--- a/templates/quasar/store/modules/foo/create/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from '../../../../common/store/create/state';
-export default makeState();
diff --git a/templates/quasar/store/modules/foo/delete/actions.js b/templates/quasar/store/modules/foo/delete/actions.js
deleted file mode 100644
index 616a158c..00000000
--- a/templates/quasar/store/modules/foo/delete/actions.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { delCommon, resetCommon } from '../../../../common/store/delete/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-export default function(types) {
-  const del = (context, item) => delCommon(context, { item, ep: ENTRYPOINT }, { types });
-  const reset = context => {
-    resetCommon(context, { types });
-  };
-
-  return { del, reset };
-}
diff --git a/templates/quasar/store/modules/foo/delete/getters.js b/templates/quasar/store/modules/foo/delete/getters.js
deleted file mode 100644
index 85deab48..00000000
--- a/templates/quasar/store/modules/foo/delete/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/delete/getters";
diff --git a/templates/quasar/store/modules/foo/delete/index.js b/templates/quasar/store/modules/foo/delete/index.js
deleted file mode 100644
index 70c23968..00000000
--- a/templates/quasar/store/modules/foo/delete/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from './actions';
-import * as getters from './getters';
-import mutations from './mutations';
-import state from './state';
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/delete/mutation_types.js b/templates/quasar/store/modules/foo/delete/mutation_types.js
deleted file mode 100644
index 1079fc4c..00000000
--- a/templates/quasar/store/modules/foo/delete/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/delete/mutation_types';
-export default makeTypes("{{{uc}}}");
diff --git a/templates/quasar/store/modules/foo/delete/mutations.js b/templates/quasar/store/modules/foo/delete/mutations.js
deleted file mode 100644
index 6dda4cf5..00000000
--- a/templates/quasar/store/modules/foo/delete/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/delete/mutations";
diff --git a/templates/quasar/store/modules/foo/delete/state.js b/templates/quasar/store/modules/foo/delete/state.js
deleted file mode 100644
index f29a97a8..00000000
--- a/templates/quasar/store/modules/foo/delete/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from '../../../../common/store/delete/state';
-export default makeState();
diff --git a/templates/quasar/store/modules/foo/index.js b/templates/quasar/store/modules/foo/index.js
deleted file mode 100644
index c76b015f..00000000
--- a/templates/quasar/store/modules/foo/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import list from './list';
-import create from './create';
-import update from './update';
-import show from './show';
-import del from './delete';
-
-export default {
-  namespaced: true,
-  modules: {
-    list,
-    create,
-    update,
-    show,
-    del,
-  },
-};
diff --git a/templates/quasar/store/modules/foo/list/actions.js b/templates/quasar/store/modules/foo/list/actions.js
deleted file mode 100644
index fc05ffc0..00000000
--- a/templates/quasar/store/modules/foo/list/actions.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import {
-  getItemsCommon,
-  getSelectItemsCommon
-} from '../../../../common/store/list/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-const hydraPrefix = '{{{hydraPrefix}}}';
-const page = '{{{name}}}';
-
-export default function(types) {
-  const getItems = (context, options) =>
-    getItemsCommon(
-      context,
-      { ...{ page, ep: ENTRYPOINT, params: {} }, ...options },
-      { types, hydraPrefix },
-    );
-
-  const getSelectItems = (context, options) =>
-    getSelectItemsCommon(
-      context,
-      { ...{ page, ep: ENTRYPOINT, params: { properties: ['id', 'name'] } }, ...options },
-      { types, hydraPrefix },
-    );
-
-  return { getItems, getSelectItems };
-}
diff --git a/templates/quasar/store/modules/foo/list/getters.js b/templates/quasar/store/modules/foo/list/getters.js
deleted file mode 100644
index 956e50bd..00000000
--- a/templates/quasar/store/modules/foo/list/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/list/getters";
diff --git a/templates/quasar/store/modules/foo/list/index.js b/templates/quasar/store/modules/foo/list/index.js
deleted file mode 100644
index a71c9bae..00000000
--- a/templates/quasar/store/modules/foo/list/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from "./actions";
-import * as getters from "./getters";
-import mutations from "./mutations";
-import state from "./state";
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/list/mutation_types.js b/templates/quasar/store/modules/foo/list/mutation_types.js
deleted file mode 100644
index b57f3002..00000000
--- a/templates/quasar/store/modules/foo/list/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/list/mutation_types';
-export default makeTypes('{{{uc}}}');
diff --git a/templates/quasar/store/modules/foo/list/mutations.js b/templates/quasar/store/modules/foo/list/mutations.js
deleted file mode 100644
index 59c22030..00000000
--- a/templates/quasar/store/modules/foo/list/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/list/mutations";
diff --git a/templates/quasar/store/modules/foo/list/state.js b/templates/quasar/store/modules/foo/list/state.js
deleted file mode 100644
index ff95b484..00000000
--- a/templates/quasar/store/modules/foo/list/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from "../../../../common/store/list/state";
-export default makeState();
diff --git a/templates/quasar/store/modules/foo/show/actions.js b/templates/quasar/store/modules/foo/show/actions.js
deleted file mode 100644
index ec545b0c..00000000
--- a/templates/quasar/store/modules/foo/show/actions.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { retrieveCommon, resetCommon } from '../../../../common/store/show/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-export default function(types) {
-  const retrieve = (context, id) => retrieveCommon(context, { id, ep: ENTRYPOINT }, { types });
-
-  const reset = context => {
-    resetCommon(context, { types });
-  };
-
-  return { retrieve, reset };
-}
diff --git a/templates/quasar/store/modules/foo/show/getters.js b/templates/quasar/store/modules/foo/show/getters.js
deleted file mode 100644
index dc7aea78..00000000
--- a/templates/quasar/store/modules/foo/show/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/show/getters";
diff --git a/templates/quasar/store/modules/foo/show/index.js b/templates/quasar/store/modules/foo/show/index.js
deleted file mode 100644
index 70c23968..00000000
--- a/templates/quasar/store/modules/foo/show/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from './actions';
-import * as getters from './getters';
-import mutations from './mutations';
-import state from './state';
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/show/mutation_types.js b/templates/quasar/store/modules/foo/show/mutation_types.js
deleted file mode 100644
index 1628ae4f..00000000
--- a/templates/quasar/store/modules/foo/show/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/show/mutation_types';
-export default makeTypes('{{{uc}}}');
diff --git a/templates/quasar/store/modules/foo/show/mutations.js b/templates/quasar/store/modules/foo/show/mutations.js
deleted file mode 100644
index 47ab3091..00000000
--- a/templates/quasar/store/modules/foo/show/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/show/mutations";
diff --git a/templates/quasar/store/modules/foo/show/state.js b/templates/quasar/store/modules/foo/show/state.js
deleted file mode 100644
index 2b014b9f..00000000
--- a/templates/quasar/store/modules/foo/show/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from '../../../../common/store/show/state';
-export default makeState();
diff --git a/templates/quasar/store/modules/foo/update/actions.js b/templates/quasar/store/modules/foo/update/actions.js
deleted file mode 100644
index 8edad5ec..00000000
--- a/templates/quasar/store/modules/foo/update/actions.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { resetCommon, retrieveCommon, updateCommon } from '../../../../common/store/update/actions';
-import { ENTRYPOINT } from "../../../../config/{{{hashEntry}}}_entrypoint";
-
-export default function(types) {
-  const reset = context => {
-    resetCommon(context, { types });
-  };
-
-  const retrieve = (context, id) =>
-    retrieveCommon(context, { id, ep: ENTRYPOINT }, { types });
-  const update = (context, values) =>
-    updateCommon(context, { values, ep: ENTRYPOINT }, { types });
-
-  return { reset, retrieve, update };
-}
diff --git a/templates/quasar/store/modules/foo/update/getters.js b/templates/quasar/store/modules/foo/update/getters.js
deleted file mode 100644
index dca50409..00000000
--- a/templates/quasar/store/modules/foo/update/getters.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "../../../../common/store/update/getters";
diff --git a/templates/quasar/store/modules/foo/update/index.js b/templates/quasar/store/modules/foo/update/index.js
deleted file mode 100644
index a71c9bae..00000000
--- a/templates/quasar/store/modules/foo/update/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import actions from "./actions";
-import * as getters from "./getters";
-import mutations from "./mutations";
-import state from "./state";
-import types from "./mutation_types";
-
-export default {
-  namespaced: true,
-  state,
-  actions: actions(types),
-  getters,
-  mutations: mutations(state, types)
-};
diff --git a/templates/quasar/store/modules/foo/update/mutation_types.js b/templates/quasar/store/modules/foo/update/mutation_types.js
deleted file mode 100644
index cc885f48..00000000
--- a/templates/quasar/store/modules/foo/update/mutation_types.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeTypes from '../../../../common/store/update/mutation_types';
-export default makeTypes('{{{uc}}}');
diff --git a/templates/quasar/store/modules/foo/update/mutations.js b/templates/quasar/store/modules/foo/update/mutations.js
deleted file mode 100644
index eb3de174..00000000
--- a/templates/quasar/store/modules/foo/update/mutations.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "../../../../common/store/update/mutations";
diff --git a/templates/quasar/store/modules/foo/update/state.js b/templates/quasar/store/modules/foo/update/state.js
deleted file mode 100644
index fa8e51fe..00000000
--- a/templates/quasar/store/modules/foo/update/state.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import makeState from '../../../../common/store/update/state';
-export default makeState();

From b0ed686ed8828c7c05a8368731b2bb44fc94d212 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:08:51 +0100
Subject: [PATCH 44/84] Add composables

---
 templates/quasar/composables/breadcrumb.ts  |  9 ++++
 templates/quasar/composables/errors.ts      | 19 +++++++
 templates/quasar/composables/mercureItem.ts | 58 +++++++++++++++++++++
 templates/quasar/composables/mercureList.ts | 48 +++++++++++++++++
 4 files changed, 134 insertions(+)
 create mode 100644 templates/quasar/composables/breadcrumb.ts
 create mode 100644 templates/quasar/composables/errors.ts
 create mode 100644 templates/quasar/composables/mercureItem.ts
 create mode 100644 templates/quasar/composables/mercureList.ts

diff --git a/templates/quasar/composables/breadcrumb.ts b/templates/quasar/composables/breadcrumb.ts
new file mode 100644
index 00000000..1376a70f
--- /dev/null
+++ b/templates/quasar/composables/breadcrumb.ts
@@ -0,0 +1,9 @@
+import { BreadcrumbValue } from 'src/types/breadcrumb';
+import { useRoute } from 'vue-router';
+
+export function useBreadcrumb() {
+  const route = useRoute();
+  const breadcrumb = route.meta.breadcrumb as BreadcrumbValue[];
+
+  return breadcrumb;
+}
diff --git a/templates/quasar/composables/errors.ts b/templates/quasar/composables/errors.ts
new file mode 100644
index 00000000..01224a3c
--- /dev/null
+++ b/templates/quasar/composables/errors.ts
@@ -0,0 +1,19 @@
+import { Ref, watch } from 'vue';
+import { displayErrorNotification } from 'src/utils/notifications';
+import { useI18n } from 'vue-i18n';
+
+export function useWatchErrors(
+  errors: (Ref<string | undefined> | undefined)[]
+) {
+  const { t } = useI18n();
+
+  watch(errors, (newErrors) => {
+    newErrors.forEach((newError) => {
+      if (!newError?.value) {
+        return;
+      }
+
+      displayErrorNotification(newError.value, t('close'));
+    });
+  });
+}
diff --git a/templates/quasar/composables/mercureItem.ts b/templates/quasar/composables/mercureItem.ts
new file mode 100644
index 00000000..55186bfd
--- /dev/null
+++ b/templates/quasar/composables/mercureItem.ts
@@ -0,0 +1,58 @@
+import { useRouter } from 'vue-router';
+import { mercureSubscribe } from 'src/utils/mercure';
+import { onBeforeUnmount } from 'vue';
+import type { StoreGeneric } from 'pinia';
+import type { Item } from 'src/types/item';
+
+export function useMercureItem({
+  store,
+  deleteStore,
+  redirectRouteName,
+}: {
+  store: StoreGeneric;
+  deleteStore: StoreGeneric;
+  redirectRouteName: string;
+}) {
+  const router = useRouter();
+
+  const mercureEl = <T extends Item>(data: T) => {
+    if (Object.keys(data).length === 1) {
+      deleteStore.setMercureDeleted(data);
+      return;
+    }
+
+    store.setRetrieved(data);
+  };
+
+  let mercureSub: EventSource | null = null;
+
+  store.$subscribe((mutation: any, state: any) => {
+    if (!state.hubUrl) {
+      return;
+    }
+
+    if (mercureSub) {
+      mercureSub.close();
+    }
+
+    if (!state.retrieved) {
+      return;
+    }
+
+    mercureSub = mercureSubscribe(
+      state.hubUrl,
+      [state.retrieved['@id'] ?? ''],
+      mercureEl
+    );
+  });
+
+  deleteStore.$subscribe((mutation: any, state: any) => {
+    if (state.mercureDeleted) {
+      router.push({ name: redirectRouteName });
+    }
+  });
+
+  onBeforeUnmount(() => {
+    mercureSub?.close();
+  });
+}
diff --git a/templates/quasar/composables/mercureList.ts b/templates/quasar/composables/mercureList.ts
new file mode 100644
index 00000000..f35821ef
--- /dev/null
+++ b/templates/quasar/composables/mercureList.ts
@@ -0,0 +1,48 @@
+import { mercureSubscribe } from 'src/utils/mercure';
+import { onBeforeUnmount } from 'vue';
+import type { Item } from 'src/types/item';
+import type { StoreGeneric } from 'pinia';
+
+export function useMercureList({
+  store,
+  deleteStore,
+}: {
+  store: StoreGeneric;
+  deleteStore: StoreGeneric;
+}) {
+  const mercureEl = <T extends Item>(data: T) => {
+    if (Object.keys(data).length === 1) {
+      store.deleteItem(data);
+      deleteStore.setMercureDeleted(data);
+      return;
+    }
+
+    store.updateItem(data);
+  };
+
+  let mercureSub: EventSource | null = null;
+
+  store.$subscribe((mutation: any, state: any) => {
+    if (!state.hubUrl) {
+      return;
+    }
+
+    if (mercureSub) {
+      mercureSub.close();
+    }
+
+    if (!state.items?.length) {
+      return;
+    }
+
+    mercureSub = mercureSubscribe(
+      state.hubUrl,
+      state.items.map((i: Item) => i['@id'] ?? ''),
+      mercureEl
+    );
+  });
+
+  onBeforeUnmount(() => {
+    mercureSub?.close();
+  });
+}

From d6f9dc602326a4b3aa7710eec7e89f871b008277 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:09:06 +0100
Subject: [PATCH 45/84] Update i18n

---
 templates/quasar/boot/i18n.ts        | 15 +++++++++++++++
 templates/quasar/i18n/en-us/index.ts |  8 ++++++++
 templates/quasar/i18n/foo.ts         |  5 +++++
 templates/quasar/i18n/index.js       |  5 -----
 templates/quasar/i18n/index.ts       |  5 +++++
 5 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 templates/quasar/boot/i18n.ts
 create mode 100644 templates/quasar/i18n/en-us/index.ts
 create mode 100644 templates/quasar/i18n/foo.ts
 delete mode 100644 templates/quasar/i18n/index.js
 create mode 100644 templates/quasar/i18n/index.ts

diff --git a/templates/quasar/boot/i18n.ts b/templates/quasar/boot/i18n.ts
new file mode 100644
index 00000000..634e7a99
--- /dev/null
+++ b/templates/quasar/boot/i18n.ts
@@ -0,0 +1,15 @@
+import { boot } from 'quasar/wrappers';
+import { createI18n } from 'vue-i18n';
+import messages from 'src/i18n';
+
+export default boot(({ app }) => {
+  // Create I18n instance
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en-US',
+    messages,
+  });
+
+  // Tell app to use the I18n instance
+  app.use(i18n);
+});
diff --git a/templates/quasar/i18n/en-us/index.ts b/templates/quasar/i18n/en-us/index.ts
new file mode 100644
index 00000000..fdc9fbd2
--- /dev/null
+++ b/templates/quasar/i18n/en-us/index.ts
@@ -0,0 +1,8 @@
+import {{lc}} from './{{lc}}';
+
+export default {
+  {{#each labels}}
+  {{@key}}: {{this}},
+  {{/each }}
+  {{lc}},
+};
diff --git a/templates/quasar/i18n/foo.ts b/templates/quasar/i18n/foo.ts
new file mode 100644
index 00000000..99764cc9
--- /dev/null
+++ b/templates/quasar/i18n/foo.ts
@@ -0,0 +1,5 @@
+export default {
+  {{#each labels}}
+  {{@key}}: {{this}},
+  {{/each }}
+};
diff --git a/templates/quasar/i18n/index.js b/templates/quasar/i18n/index.js
deleted file mode 100644
index 5d50295e..00000000
--- a/templates/quasar/i18n/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  {{#each labels as |label|}}
-  '{{{capitalize label}}}': '{{{capitalize label}}}',
-  {{/each }}
-};
diff --git a/templates/quasar/i18n/index.ts b/templates/quasar/i18n/index.ts
new file mode 100644
index 00000000..552bdd60
--- /dev/null
+++ b/templates/quasar/i18n/index.ts
@@ -0,0 +1,5 @@
+import enUS from './en-us';
+
+export default {
+  'en-US': enUS,
+};

From 72d17958a577827fee470df2f6c335deeab806e2 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:09:24 +0100
Subject: [PATCH 46/84] Update router

---
 templates/quasar/router/foo.js | 65 ----------------------------------
 templates/quasar/router/foo.ts | 53 +++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 65 deletions(-)
 delete mode 100644 templates/quasar/router/foo.js
 create mode 100644 templates/quasar/router/foo.ts

diff --git a/templates/quasar/router/foo.js b/templates/quasar/router/foo.js
deleted file mode 100644
index 19547cbe..00000000
--- a/templates/quasar/router/foo.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import {{{titleUcFirst}}}List from '../components/{{{lc}}}/List';
-import {{{titleUcFirst}}}Create from '../components/{{{lc}}}/Create';
-import {{{titleUcFirst}}}Update from '../components/{{{lc}}}/Update';
-import {{{titleUcFirst}}}Show from '../components/{{{lc}}}/Show';
-
-const list = {
-  label: '{{{ titleUcFirst }}}List',
-  icon: 'whatshot',
-};
-const create = {
-  label: '{{{ titleUcFirst }}}Create',
-  icon: 'whatshot',
-};
-const update = {
-  label: '{{{ titleUcFirst }}}Update',
-  icon: 'whatshot',
-};
-const show = {
-  label: '{{{ titleUcFirst }}}Show',
-  icon: 'whatshot',
-};
-
-export default [
-  {
-    name: list['label'],
-    path: '/{{{name}}}/',
-    component: {{{ titleUcFirst }}}List,
-    meta: {
-      breadcrumb: [list],
-    },
-  },
-  {
-    name: create['label'],
-    path: '/{{{name}}}/create',
-    component: {{{ titleUcFirst }}}Create,
-    meta: {
-      breadcrumb: [
-        { ...list , to: { name: list['label'] } },
-        create,
-      ],
-    },
-  },
-  {
-    name: update['label'],
-    path: '/{{{name}}}/edit/:id',
-    component: {{{ titleUcFirst }}}Update,
-    meta: {
-      breadcrumb: [
-        { ...list , to: { name: list['label'] } },
-        update,
-      ],
-    },
-  },
-  {
-    name: show['label'],
-    path: '/{{{name}}}/show/:id',
-    component: {{{ titleUcFirst }}}Show,
-    meta: {
-      breadcrumb: [
-        { ...list , to: { name: list['label'] } },
-        show,
-      ],
-    },
-  },
-];
diff --git a/templates/quasar/router/foo.ts b/templates/quasar/router/foo.ts
new file mode 100644
index 00000000..39dee01b
--- /dev/null
+++ b/templates/quasar/router/foo.ts
@@ -0,0 +1,53 @@
+import { BreadcrumbValue } from 'src/types/breadcrumb';
+
+const list: BreadcrumbValue = {
+  label: '{{titleUcFirst}}List',
+  icon: 'whatshot',
+};
+const create: BreadcrumbValue = {
+  label: '{{titleUcFirst}}Create',
+  icon: 'whatshot',
+};
+const update: BreadcrumbValue = {
+  label: '{{titleUcFirst}}Update',
+  icon: 'whatshot',
+};
+const show: BreadcrumbValue = {
+  label: '{{titleUcFirst}}Show',
+  icon: 'whatshot',
+};
+
+export default [
+  {
+    name: list.label,
+    path: '/{{name}}/',
+    component: () => import('pages/{{lc}}/ListPage.vue'),
+    meta: {
+      breadcrumb: [list],
+    },
+  },
+  {
+    name: create.label,
+    path: '/{{name}}/create',
+    component: () => import('pages/{{lc}}/CreatePage.vue'),
+    meta: {
+      breadcrumb: [{ ...list, to: { name: list.label } }, create],
+    },
+  },
+  {
+    name: update.label,
+    path: '/{{name}}/edit/:id',
+    component: () => import('pages/{{lc}}/UpdatePage.vue'),
+    meta: {
+      breadcrumb: [{ ...list, to: { name: list.label } }, update],
+    },
+  },
+  {
+    name: show.label,
+    path: '/{{name}}/show/:id',
+    component: () => import('pages/{{lc}}/ShowPage.vue'),
+    meta: {
+      breadcrumb: [{ ...list, to: { name: list.label } }, show],
+    },
+  },
+];

From 0b3b0147c73a9054c99e902ac557779428bda1df Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:09:44 +0100
Subject: [PATCH 47/84] Add types

---
 templates/quasar/error/SubmissionError.js |  9 ---------
 templates/quasar/types/breadcrumb.ts      |  7 +++++++
 templates/quasar/types/collection.ts      | 11 +++++++++++
 templates/quasar/types/error.ts           | 18 ++++++++++++++++++
 templates/quasar/types/foo.ts             |  7 +++++++
 templates/quasar/types/item.ts            |  3 +++
 templates/quasar/types/view.ts            |  7 +++++++
 7 files changed, 53 insertions(+), 9 deletions(-)
 delete mode 100644 templates/quasar/error/SubmissionError.js
 create mode 100644 templates/quasar/types/breadcrumb.ts
 create mode 100644 templates/quasar/types/collection.ts
 create mode 100644 templates/quasar/types/error.ts
 create mode 100644 templates/quasar/types/foo.ts
 create mode 100644 templates/quasar/types/item.ts
 create mode 100644 templates/quasar/types/view.ts

diff --git a/templates/quasar/error/SubmissionError.js b/templates/quasar/error/SubmissionError.js
deleted file mode 100644
index fbbdfafa..00000000
--- a/templates/quasar/error/SubmissionError.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default class SubmissionError extends Error {
-  constructor(errors) {
-    super('Submit Validation Failed');
-    this.errors = errors;
-    Error.captureStackTrace(this, this.constructor);
-    this.name = this.constructor.name;
-    return this;
-  }
-}
diff --git a/templates/quasar/types/breadcrumb.ts b/templates/quasar/types/breadcrumb.ts
new file mode 100644
index 00000000..07132ad2
--- /dev/null
+++ b/templates/quasar/types/breadcrumb.ts
@@ -0,0 +1,7 @@
+import { RouteLocation } from 'vue-router';
+
+export interface BreadcrumbValue {
+  label: string;
+  icon: string;
+  to?: RouteLocation;
+}
diff --git a/templates/quasar/types/collection.ts b/templates/quasar/types/collection.ts
new file mode 100644
index 00000000..c5a739dd
--- /dev/null
+++ b/templates/quasar/types/collection.ts
@@ -0,0 +1,11 @@
+import type { View } from './view';
+
+export interface PagedCollection<T> {
+  '@context'?: string;
+  '@id'?: string;
+  '@type'?: string;
+  'hydra:member': T[];
+  'hydra:search'?: object;
+  'hydra:totalItems'?: number;
+  'hydra:view': View;
+}
diff --git a/templates/quasar/types/error.ts b/templates/quasar/types/error.ts
new file mode 100644
index 00000000..b82407dd
--- /dev/null
+++ b/templates/quasar/types/error.ts
@@ -0,0 +1,18 @@
+export type TError = SubmissionError | Error;
+
+export interface SubmissionErrors {
+  [key: string]: string;
+}
+
+export class SubmissionError extends Error {
+  private readonly _errors: SubmissionErrors;
+
+  constructor(errors: SubmissionErrors) {
+    super('Submit Validation Failed');
+    this._errors = errors;
+  }
+
+  public get errors(): SubmissionErrors {
+    return this._errors;
+  }
+}
diff --git a/templates/quasar/types/foo.ts b/templates/quasar/types/foo.ts
new file mode 100644
index 00000000..39ee8198
--- /dev/null
+++ b/templates/quasar/types/foo.ts
@@ -0,0 +1,7 @@
+import type { Item } from "./item";
+
+export interface {{titleUcFirst}} extends Item {
+{{#each fields}}
+ {{#if readonly}}readonly{{/if}} {{{name}}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelations}}any{{else}}{{{type}}}{{/if}};
+{{/each}}
+}
diff --git a/templates/quasar/types/item.ts b/templates/quasar/types/item.ts
new file mode 100644
index 00000000..766cc0f1
--- /dev/null
+++ b/templates/quasar/types/item.ts
@@ -0,0 +1,3 @@
+export interface Item {
+  '@id'?: string;
+}
diff --git a/templates/quasar/types/view.ts b/templates/quasar/types/view.ts
new file mode 100644
index 00000000..9dfacb30
--- /dev/null
+++ b/templates/quasar/types/view.ts
@@ -0,0 +1,7 @@
+export interface View {
+  '@id': string;
+  'hydra:first': string;
+  'hydra:last': string;
+  'hydra:next': string;
+  'hydra:previous': string;
+}

From c58485123b36a29fd6c6a1bf3dfd3d38e0016c6f Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 10:10:00 +0100
Subject: [PATCH 48/84] Update utils

---
 templates/quasar/utils/dates.js         |  5 --
 templates/quasar/utils/dates.ts         | 15 +++++
 templates/quasar/utils/fetch.js         | 57 -----------------
 templates/quasar/utils/fetch.ts         | 52 +++++++++++++++
 templates/quasar/utils/mercure.ts       | 33 ++++++++++
 templates/quasar/utils/notifications.ts | 22 +++++++
 templates/quasar/utils/notify.js        | 31 ---------
 templates/quasar/utils/vuexer.js        | 85 -------------------------
 8 files changed, 122 insertions(+), 178 deletions(-)
 delete mode 100644 templates/quasar/utils/dates.js
 create mode 100644 templates/quasar/utils/dates.ts
 delete mode 100644 templates/quasar/utils/fetch.js
 create mode 100644 templates/quasar/utils/fetch.ts
 create mode 100644 templates/quasar/utils/mercure.ts
 create mode 100644 templates/quasar/utils/notifications.ts
 delete mode 100644 templates/quasar/utils/notify.js
 delete mode 100644 templates/quasar/utils/vuexer.js

diff --git a/templates/quasar/utils/dates.js b/templates/quasar/utils/dates.js
deleted file mode 100644
index 5d8b4513..00000000
--- a/templates/quasar/utils/dates.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { date } from 'quasar';
-
-const extractDate = value => date.extractDate(value, 'YYYY-MM-DDTHH:mm:ssZ');
-
-export { extractDate };
diff --git a/templates/quasar/utils/dates.ts b/templates/quasar/utils/dates.ts
new file mode 100644
index 00000000..5e346e2d
--- /dev/null
+++ b/templates/quasar/utils/dates.ts
@@ -0,0 +1,15 @@
+import dayjs from 'dayjs';
+
+export function formatDateTime(date?: string): string | null {
+  if (!date) return null;
+
+  return dayjs(date).format('DD/MM/YYYY');
+}
+
+export function formatDateInput(value?: string): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  return dayjs(value).format('YYYY-MM-DD');
+}
diff --git a/templates/quasar/utils/fetch.js b/templates/quasar/utils/fetch.js
deleted file mode 100644
index 823ac623..00000000
--- a/templates/quasar/utils/fetch.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import SubmissionError from '../error/SubmissionError';
-
-const MIME_TYPE = 'application/ld+json';
-
-// make query string array of values
-const makeParamArray = (key, arr) => arr.map(val => `${key}[]=${val}`).join('&');
-
-export default function({ id, ep }, options = {}) {
-  if (typeof options.headers === 'undefined') Object.assign(options, { headers: new Headers() });
-
-  if (options.headers.get('Accept') === null) options.headers.set('Accept', MIME_TYPE);
-
-  if (
-    options.body !== undefined &&
-    !(options.body instanceof FormData) &&
-    options.headers.get('Content-Type') === null
-  ) {
-    options.headers.set('Content-Type', MIME_TYPE);
-  }
-
-  if (options.params) {
-    var queryString = Object.keys(options.params)
-      .map(key =>
-        Array.isArray(options.params[key])
-          ? makeParamArray(key, options.params[key])
-          : `${key}=${options.params[key]}`,
-      )
-      .join('&');
-    id = `${id}?${queryString}`;
-  }
-
-  // enable CORS for all requests
-  Object.assign(options, {
-    mode: 'cors',
-    // credentials: 'include', // when credentials needed
-  });
-
-  const entryPoint = ep + (ep.endsWith('/') ? '' : '/');
-
-  return fetch(new URL(id, entryPoint), options).then(response => {
-    if (response.ok) return response;
-
-    return response.json().then(json => {
-      const error = json['{{{hydraPrefix}}}description']
-        ? json['{{{hydraPrefix}}}description']
-        : response.statusText;
-      if (!json.violations) throw Error(error);
-
-      const errors = { _error: error };
-      json.violations.map(violation =>
-        Object.assign(errors, { [violation.propertyPath]: violation.message }),
-      );
-
-      throw new SubmissionError(errors);
-    });
-  });
-}
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/fetch.ts
new file mode 100644
index 00000000..561b2407
--- /dev/null
+++ b/templates/quasar/utils/fetch.ts
@@ -0,0 +1,52 @@
+import { SubmissionError, SubmissionErrors } from 'src/types/error';
+import qs from 'qs';
+import { ENTRYPOINT } from 'src/config/entrypoint';
+
+const MIME_TYPE = 'application/ld+json';
+
+export default function (id: string, options: any = {}) {
+  if (typeof options.headers === 'undefined') {
+    Object.assign(options, { headers: new Headers() });
+  }
+
+  if (options.headers.get('Accept') === null) {
+    options.headers.set('Accept', MIME_TYPE);
+  }
+
+  if (
+    options.body !== undefined &&
+    !(options.body instanceof FormData) &&
+    options.headers.get('Content-Type') === null
+  ) {
+    options.headers.set('Content-Type', MIME_TYPE);
+  }
+
+  if (options.params) {
+    const queryString = qs.stringify(options.params);
+    id = `${id}?${queryString}`;
+  }
+
+  // enable CORS for all requests
+  Object.assign(options, {
+    mode: 'cors',
+    // credentials: 'include', // when credentials needed
+  });
+
+  return fetch(new URL(id, ENTRYPOINT), options).then((response: Response) => {
+    if (response.ok) return response;
+
+    return response.json().then((json) => {
+      const error = json['hydra:description'] ?? response.statusText;
+      if (!json.violations) throw Error(error);
+
+      const errors: SubmissionErrors = { _error: error };
+      json.violations.map(
+        (violation: { propertyPath: string; message: string }) => {
+          errors[violation.propertyPath] = violation.message;
+        }
+      );
+
+      throw new SubmissionError(errors);
+    });
+  });
+}
diff --git a/templates/quasar/utils/mercure.ts b/templates/quasar/utils/mercure.ts
new file mode 100644
index 00000000..eb270b1c
--- /dev/null
+++ b/templates/quasar/utils/mercure.ts
@@ -0,0 +1,33 @@
+import { ENTRYPOINT } from '../config/entrypoint';
+import type { Item } from '../types/item';
+
+export const mercureSubscribe = (
+  hubURL: URL,
+  topics: string[],
+  setData: <T extends Item>(data: T) => void
+): EventSource => {
+  const url = new URL(hubURL, ENTRYPOINT);
+
+  topics.forEach((topic) =>
+    url.searchParams.append('topic', new URL(topic, ENTRYPOINT).toString())
+  );
+
+  const eventSource = new EventSource(url.toString());
+
+  eventSource.addEventListener('message', (event) => {
+    setData(JSON.parse(event.data));
+  });
+
+  return eventSource;
+};
+
+export const extractHubURL = (response: Response): URL | undefined => {
+  const linkHeader = response.headers.get('Link');
+  if (!linkHeader) return undefined;
+
+  const matches = linkHeader.match(
+    /<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/
+  );
+
+  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : undefined;
+};
diff --git a/templates/quasar/utils/notifications.ts b/templates/quasar/utils/notifications.ts
new file mode 100644
index 00000000..2efa0483
--- /dev/null
+++ b/templates/quasar/utils/notifications.ts
@@ -0,0 +1,22 @@
+import { Notify } from 'quasar';
+
+export function displayErrorNotification(message: string, closeLabel: string) {
+  Notify.create({
+    message,
+    color: 'red',
+    icon: 'error',
+    closeBtn: closeLabel,
+  });
+}
+
+export function displaySuccessNotification(
+  message: string,
+  closeLabel: string
+) {
+  Notify.create({
+    message,
+    color: 'green',
+    icon: 'tag_faces',
+    closeBtn: closeLabel,
+  });
+}
diff --git a/templates/quasar/utils/notify.js b/templates/quasar/utils/notify.js
deleted file mode 100644
index de4ed26e..00000000
--- a/templates/quasar/utils/notify.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Notify } from 'quasar';
-
-const error = (message, closeLabel) => 
-  Notify.create({
-    message,
-    color: 'red',
-    icon: 'error',
-    closeBtn: closeLabel,
-  });
-
-const success = (message, closeLabel) => 
-  Notify.create({
-    message,
-    color: 'green',
-    icon: 'tag_faces',
-    closeBtn: closeLabel,
-  });
-
-const warning = (message, closeLabel) =>
-  Notify.create({
-    message,
-    color: 'yellow',
-    icon: 'warning',
-    closeBtn: closeLabel,
-  });
-
-export {
-  error,
-  success,
-  warning,
-};
diff --git a/templates/quasar/utils/vuexer.js b/templates/quasar/utils/vuexer.js
deleted file mode 100644
index 3047bc80..00000000
--- a/templates/quasar/utils/vuexer.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { mapActions, mapGetters, mapMutations, createNamespacedHelpers } from 'vuex';
-
-export const create = module => {
-  const lowmod = module.toLowerCase();
-  const { mapGetters, mapActions } = createNamespacedHelpers(`${lowmod}/create`);
-  const getters = mapGetters(['error', 'isLoading', 'created', 'violations']);
-  const actions = mapActions(['create']);
-  return { getters, actions };
-};
-
-export const list = module => {
-  const lowmod = module.toLowerCase();
-  const getters = mapGetters({
-    deletedItem: `${lowmod}/del/deleted`,
-    error: `${lowmod}/list/error`,
-    items: `${lowmod}/list/items`,
-    isLoading: `${lowmod}/list/isLoading`,
-    view: `${lowmod}/list/view`,
-    totalItems: `${lowmod}/list/totalItems`,
-  });
-  const actions = mapActions({
-    getPage: `${lowmod}/list/getItems`,
-    deleteItem: `${lowmod}/del/del`,
-  });
-  return { getters, actions };
-};
-
-export const show = module => {
-  const lowmod = module.toLowerCase();
-  const getters = mapGetters({
-    deleteError: `${lowmod}/del/error`,
-    error: `${lowmod}/show/error`,
-    isLoading: `${lowmod}/show/isLoading`,
-    item: `${lowmod}/show/retrieved`,
-  });
-  const actions = mapActions({
-    del: `${lowmod}/del/del`,
-    reset: `${lowmod}/show/reset`,
-    retrieve: `${lowmod}/show/retrieve`,
-  });
-  return { getters, actions };
-};
-
-export const update = module => {
-  const lowmod = module.toLowerCase();
-  const getters = mapGetters({
-    isLoading: `${lowmod}/update/isLoading`,
-    error: `${lowmod}/update/error`,
-    deleteError: `${lowmod}/del/error`,
-    deleteLoading: `${lowmod}/del/isLoading`,
-    deleted: `${lowmod}/del/deleted`,
-    retrieved: `${lowmod}/update/retrieved`,
-    updated: `${lowmod}/update/updated`,
-    violations: `${lowmod}/update/violations`,
-  });
-  const actions = mapActions({
-    createReset: `${lowmod}/create/reset`,
-    deleteItem: `${lowmod}/del/del`,
-    delReset: `${lowmod}/del/reset`,
-    retrieve: `${lowmod}/update/retrieve`,
-    updateReset: `${lowmod}/update/reset`,
-    update: `${lowmod}/update/update`,
-  });
-  return { getters, actions };
-};
-
-export const form = modules => {
-  let getters = {},
-    actions = {},
-    mutations = {};
-  modules.forEach(({ name, module }) => {
-    const lowmod = module.toLowerCase();
-    getters[`${name}SelectItems`] = `${lowmod}/list/selectItems`;
-    getters[`${name}SelectItemsTemplate`] = `${lowmod}/list/selectItemsTemplate`;
-    actions[`${name}GetSelectItems`] = `${lowmod}/list/getSelectItems`;
-    mutations[
-      `${name}SetSelectItemsTemplate`
-    ] = `${lowmod}/list/${module.toUpperCase()}_LIST_SET_SELECT_ITEMS_TEMPLATE`;
-  });
-  return {
-    getters: mapGetters(getters),
-    actions: mapActions(actions),
-    mutations: mapMutations(mutations),
-  };
-};

From 04b0ee1d7dc0351500db785acb7a821ccf2ea3eb Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 12:12:57 +0100
Subject: [PATCH 49/84] Remove useless i18n files

---
 templates/quasar/boot/i18n.ts        | 15 ---------------
 templates/quasar/i18n/en-us/index.ts |  8 --------
 templates/quasar/i18n/index.ts       |  5 -----
 3 files changed, 28 deletions(-)
 delete mode 100644 templates/quasar/boot/i18n.ts
 delete mode 100644 templates/quasar/i18n/en-us/index.ts
 delete mode 100644 templates/quasar/i18n/index.ts

diff --git a/templates/quasar/boot/i18n.ts b/templates/quasar/boot/i18n.ts
deleted file mode 100644
index 634e7a99..00000000
--- a/templates/quasar/boot/i18n.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { boot } from 'quasar/wrappers';
-import { createI18n } from 'vue-i18n';
-import messages from 'src/i18n';
-
-export default boot(({ app }) => {
-  // Create I18n instance
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en-US',
-    messages,
-  });
-
-  // Tell app to use the I18n instance
-  app.use(i18n);
-});
diff --git a/templates/quasar/i18n/en-us/index.ts b/templates/quasar/i18n/en-us/index.ts
deleted file mode 100644
index fdc9fbd2..00000000
--- a/templates/quasar/i18n/en-us/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {{lc}} from './{{lc}}';
-
-export default {
-  {{#each labels}}
-  {{@key}}: {{this}},
-  {{/each }}
-  {{lc}},
-};
diff --git a/templates/quasar/i18n/index.ts b/templates/quasar/i18n/index.ts
deleted file mode 100644
index 552bdd60..00000000
--- a/templates/quasar/i18n/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import enUS from './en-us';
-
-export default {
-  'en-US': enUS,
-};

From b4fd27e5b9f25a02f6cf2ea169084a665d7698b9 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 12:17:10 +0100
Subject: [PATCH 50/84] Update file name

---
 templates/quasar/components/foo/FormComponent.vue | 2 +-
 templates/quasar/components/foo/ListComponent.vue | 2 +-
 templates/quasar/components/foo/ShowComponent.vue | 2 +-
 templates/quasar/utils/{dates.ts => date.ts}      | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename templates/quasar/utils/{dates.ts => date.ts} (100%)

diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index 6c651713..f9867a26 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -60,7 +60,7 @@ import { Ref, ref, toRef } from 'vue';
 import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
 {{/if}}
 import { Item } from 'src/types/item';
-import { formatDateInput } from 'src/utils/dates';
+import { formatDateInput } from 'src/utils/date';
 
 let props = defineProps<{
   values?: {{titleUcFirst}};
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index a3e5cbaf..9ca76505 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -133,7 +133,7 @@ import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
 import ActionCell from 'src/components/common/ActionCellComponent.vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { formatDateTime } from 'src/utils/dates';
+import { formatDateTime } from 'src/utils/date';
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { storeToRefs } from 'pinia';
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index 9f26ddc7..aeb76551 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -105,7 +105,7 @@ import Loading from 'src/components/common/LoadingComponent.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
 import { storeToRefs } from 'pinia';
-import { formatDateTime } from 'src/utils/dates';
+import { formatDateTime } from 'src/utils/date';
 import { onBeforeUnmount } from 'vue';
 import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
diff --git a/templates/quasar/utils/dates.ts b/templates/quasar/utils/date.ts
similarity index 100%
rename from templates/quasar/utils/dates.ts
rename to templates/quasar/utils/date.ts

From caacfd259c060557d16bb3f3fab6fb3bb3085c00 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 17 Nov 2022 14:57:05 +0100
Subject: [PATCH 51/84] Fix handlebars formatting

---
 .../common/ConfirmDeleteComponent.vue         |  2 +-
 .../common/FormRepeaterComponent.vue          |  2 +-
 .../quasar/components/foo/FormComponent.vue   |  3 ++-
 .../quasar/components/foo/ListComponent.vue   | 20 +++++++++----------
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/templates/quasar/components/common/ConfirmDeleteComponent.vue b/templates/quasar/components/common/ConfirmDeleteComponent.vue
index 0d68542a..7f91323e 100644
--- a/templates/quasar/components/common/ConfirmDeleteComponent.vue
+++ b/templates/quasar/components/common/ConfirmDeleteComponent.vue
@@ -5,7 +5,7 @@
         <q-avatar icon="warning" color="primary" text-color="white" />
 
         <span class="q-ml-sm">
-          {{ $t('Are you sure you want to delete this item?') }}
+          \{{ $t('Are you sure you want to delete this item?') }}
         </span>
       </q-card-section>
 
diff --git a/templates/quasar/components/common/FormRepeaterComponent.vue b/templates/quasar/components/common/FormRepeaterComponent.vue
index 6e965209..1fa3cffb 100644
--- a/templates/quasar/components/common/FormRepeaterComponent.vue
+++ b/templates/quasar/components/common/FormRepeaterComponent.vue
@@ -2,7 +2,7 @@
   <div>
     <label for="book_reviews" class="text-body1 form-control-label">
       <span class="q-mr-sm">
-        {{ label }}
+        \{{ label }}
       </span>
 
       <q-btn color="secondary" @click="addField">Add</q-btn>
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index f9867a26..4c1c7958 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -56,7 +56,7 @@
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
-{#if hasManyRelations}}
+{{#if hasManyRelations}}
 import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
 {{/if}}
 import { Item } from 'src/types/item';
@@ -74,6 +74,7 @@ let item: Ref<{{titleUcFirst}}> = ref({});
 if (props.values) {
   item.value = {
     ...props.values,
+    {{#each formFields}}
     {{#compare type "==" "dateTime" }}
     publicationDate: formatDateInput(props.values.publicationDate),
     {{/compare}}
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 9ca76505..3bace9cf 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -6,10 +6,10 @@
   </Toolbar>
 
   <q-banner v-if="deleted" class="bg-positive text-white q-ma-md">
-    {{ deleted['@id'] }} deleted.
+    \{{ deleted['@id'] }} deleted.
   </q-banner>
   <q-banner v-if="mercureDeleted" class="bg-positive text-white q-ma-md">
-    {{ mercureDeleted['@id'] }} deleted by another user.
+    \{{ mercureDeleted['@id'] }} deleted by another user.
   </q-banner>
 
   {{#if parameters.length}}
@@ -53,7 +53,7 @@
             :to="{ name: '{{reference.title}}Show', params: { id: {{lowercase reference.title}} } }"
             :key="{{lowercase reference.title}}"
           >
-            {{ {{lowercase reference.title}} }}
+            \{{ {{lowercase reference.title}} }}
 
             <br />
           </router-link>
@@ -61,7 +61,7 @@
 
         <template v-else>
           <p v-for="{{lowercase reference.title}} in value" :key="{{lowercase reference.title}}">
-            {{ {{lowercase reference.title}} }}
+            \{{ {{lowercase reference.title}} }}
           </p>
         </template>
       </td>
@@ -73,11 +73,11 @@
           v-if="router.hasRoute('{{reference.title}}Show')"
           :to="{ name: '{{reference.title}}Show', params: { id: value } }"
         >
-          {{ value }}
+          \{{ value }}
         </router-link>
 
         <p v-else>
-          {{ value }}
+          \{{ value }}
         </p>
       </td>
     </template>
@@ -90,7 +90,7 @@
             :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
             :key="{{lowercase embedded.title}}['@id']"
           >
-            {{ {{lowercase embedded.title}}['@id'] }}
+            \{{ {{lowercase embedded.title}}['@id'] }}
 
             <br />
           </router-link>
@@ -98,7 +98,7 @@
 
         <template v-else>
           <p v-for="{{lowercase embedded.title}} in value" :key="{{lowercase embedded.title}}['@id']">
-            {{ {{lowercase embedded.title}}['@id'] }}
+            \{{ {{lowercase embedded.title}}['@id'] }}
           </p>
         </template>
       </td>
@@ -110,11 +110,11 @@
           v-if="router.hasRoute('{{embedded.title}}Show')"
           :to="{ name: '{{embedded.title}}Show', params: { id: value['@id'] } }"
         >
-          {{ value['@id'] }}
+          \{{ value['@id'] }}
         </router-link>
 
         <p v-else>
-          {{ value['@id'] }}
+          \{{ value['@id'] }}
         </p>
       </td>
     </template>

From be651d8144d689a6fee68c13b22eae00ef33cea1 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 09:48:25 +0100
Subject: [PATCH 52/84] Remove useless file

---
 templates/quasar/utils/mercure.ts | 33 -------------------------------
 1 file changed, 33 deletions(-)
 delete mode 100644 templates/quasar/utils/mercure.ts

diff --git a/templates/quasar/utils/mercure.ts b/templates/quasar/utils/mercure.ts
deleted file mode 100644
index eb270b1c..00000000
--- a/templates/quasar/utils/mercure.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ENTRYPOINT } from '../config/entrypoint';
-import type { Item } from '../types/item';
-
-export const mercureSubscribe = (
-  hubURL: URL,
-  topics: string[],
-  setData: <T extends Item>(data: T) => void
-): EventSource => {
-  const url = new URL(hubURL, ENTRYPOINT);
-
-  topics.forEach((topic) =>
-    url.searchParams.append('topic', new URL(topic, ENTRYPOINT).toString())
-  );
-
-  const eventSource = new EventSource(url.toString());
-
-  eventSource.addEventListener('message', (event) => {
-    setData(JSON.parse(event.data));
-  });
-
-  return eventSource;
-};
-
-export const extractHubURL = (response: Response): URL | undefined => {
-  const linkHeader = response.headers.get('Link');
-  if (!linkHeader) return undefined;
-
-  const matches = linkHeader.match(
-    /<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/
-  );
-
-  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : undefined;
-};

From c23832ef68a762df29d2dd3191a518fccd2112d7 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 09:52:38 +0100
Subject: [PATCH 53/84] Add main file to i18n

---
 templates/quasar/i18n/foo.ts  | 2 +-
 templates/quasar/i18n/main.ts | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 templates/quasar/i18n/main.ts

diff --git a/templates/quasar/i18n/foo.ts b/templates/quasar/i18n/foo.ts
index 99764cc9..2e380185 100644
--- a/templates/quasar/i18n/foo.ts
+++ b/templates/quasar/i18n/foo.ts
@@ -1,5 +1,5 @@
 export default {
   {{#each labels}}
-  {{@key}}: {{this}},
+  {{this}}: '{{capitalize this}}',
   {{/each }}
 };
diff --git a/templates/quasar/i18n/main.ts b/templates/quasar/i18n/main.ts
new file mode 100644
index 00000000..f2a18d19
--- /dev/null
+++ b/templates/quasar/i18n/main.ts
@@ -0,0 +1,8 @@
+import {{lc}} from './{{lc}}';
+
+export default {
+  {{#each labels}}
+  {{@key}}: '{{this}}',
+  {{/each }}
+  {{lc}},
+};

From 2e46900a868f04b5fd1aee0f80e6da75aabcb9b9 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 10:02:06 +0100
Subject: [PATCH 54/84] Fix handlebars related bugs

---
 .../quasar/components/foo/FilterComponent.vue | 28 +++++++++----------
 .../quasar/components/foo/FormComponent.vue   |  8 +++---
 .../quasar/components/foo/ListComponent.vue   |  5 ++--
 .../quasar/components/foo/ShowComponent.vue   |  4 +--
 templates/quasar/stores/foo/create.ts         |  2 +-
 templates/quasar/stores/foo/list.ts           |  2 +-
 6 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/templates/quasar/components/foo/FilterComponent.vue b/templates/quasar/components/foo/FilterComponent.vue
index caefeaf1..5f2d63ee 100644
--- a/templates/quasar/components/foo/FilterComponent.vue
+++ b/templates/quasar/components/foo/FilterComponent.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="row q-col-gutter-x-md">
     {{#each parameters}}
-      <q-input
-        v-model="item.{{name}}"
-        filled
-        :label="$t('{{lc}}.{{name}}')"
-        class="col-12 col-md"
-      >
-        <template #append>
-          <q-icon
-            name="close"
-            @click.prevent.stop="item.{{name}} = ''"
-            class="cursor-pointer"
-          />
-        </template>
-      </q-input>
+    <q-input
+      v-model="item.{{name}}"
+      filled
+      :label="$t('{{../lc}}.{{name}}')"
+      class="col-12 col-md"
+    >
+      <template #append>
+        <q-icon
+          name="close"
+          @click.prevent.stop="item.{{name}} = ''"
+          class="cursor-pointer"
+        />
+      </template>
+    </q-input>
     {{/each}}
   </div>
 </template>
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index 4c1c7958..f6d91e8e 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -5,14 +5,14 @@
       {{#if isManyRelations}}
       <FormRepeater
         :values="item.{{name}}"
-        :label="$t('{{lc}}.{{name}}')"
+        :label="$t('{{../lc}}.{{name}}')"
         class="col-12 col-md-8"
         @update="(values) => (item.{{name}} = values)"
       />
       {{else}}
       <q-input
         v-model="item.{{name}}"
-        :label="$t('{{lc}}.{{name}}')"
+        :label="$t('{{../lc}}.{{name}}')"
         :error="Boolean(violations?.{{name}})"
         :error-message="violations?.{{name}}"
         name="{{name}}"
@@ -79,9 +79,9 @@ if (props.values) {
     publicationDate: formatDateInput(props.values.publicationDate),
     {{/compare}}
     {{#if isEmbeddeds}}
-    {{name}}: props.values.{{name}}?.map((item: any) => item["@id"] ?? "") ?? [],
+    {{name}}: props.values.{{name}}?.map((item: Item) => item['@id'] ?? '') ?? [],
     {{else if embedded}}
-    {{name}}: props.values.{{name}}?.["@id"],
+    {{name}}: props.values.{{name}}?.['@id'],
     {{/if}}
     {{/each}}
   };
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 3bace9cf..974dc6ff 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -141,6 +141,7 @@ import { onBeforeUnmount, ref, watch } from 'vue';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureList } from 'src/composables/mercureList';
+import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -174,7 +175,7 @@ const columns = [
   {
     name: '{{name}}',
     field: '{{name}}',
-    label: t('{{lc}}.{{name}}'),
+    label: t('{{../lc}}.{{name}}'),
     {{#if sortable }}
     sortable: true,
     {{/if}}
@@ -183,7 +184,7 @@ const columns = [
       return formatDateTime(value);
     },
     {{/compare}}
-  }
+  },
   {{/each }}
 ];
 
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index aeb76551..d595a809 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -16,7 +16,7 @@
       <tbody>
         {{#each fields}}
         <tr>
-          <td>\{{ $t('{{lc}}.{{name}}') }}</td>
+          <td>\{{ $t('{{../lc}}.{{name}}') }}</td>
 
           <td>
             {{#if isReferences}}
@@ -90,7 +90,7 @@
             {{/if}}
           </td>
         </tr>
-        {{/each }}
+        {{/each}}
       </tbody>
     </q-markup-table>
   </div>
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index cb50bffd..b1ed6410 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -24,7 +24,7 @@ export const use{{titleUcFirst}}CreateStore = defineStore('{{lc}}Create', {
       this.setViolations(undefined);
       this.toggleLoading();
 
-      return fetch('{{lc}}s', { method: 'POST', body: JSON.stringify(values) })
+      return fetch('{{name}}', { method: 'POST', body: JSON.stringify(values) })
         .then((response: Response) => {
           this.toggleLoading();
 
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index cb2db9fe..96740fc4 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -28,7 +28,7 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
     getItems(params: any) {
       this.toggleLoading();
 
-      return fetch('{{lc}}s', { params })
+      return fetch('{{name}}', { params })
         .then((response: Response) =>
           response.json().then((data: PagedCollection<{{titleUcFirst}}>) => ({
             data,

From e3a078c282bbdadaaed84ebdc3afd0a20872334d Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 10:04:34 +0100
Subject: [PATCH 55/84] Replace hydra string by variable

---
 templates/quasar/stores/foo/list.ts  | 6 +++---
 templates/quasar/types/collection.ts | 8 ++++----
 templates/quasar/types/view.ts       | 8 ++++----
 templates/quasar/utils/fetch.ts      | 2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index 96740fc4..e196704e 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -38,9 +38,9 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
         .then(
           ({ data, hubUrl }: { data: PagedCollection<{{titleUcFirst}}>; hubUrl?: URL }) => {
             this.toggleLoading();
-            this.setItems(data['hydra:member']);
-            this.setTotalItems(data['hydra:totalItems'] ?? 0);
-            this.setView(data['hydra:view']);
+            this.setItems(data['{{hydraPrefix}}member']);
+            this.setTotalItems(data['{{hydraPrefix}}totalItems'] ?? 0);
+            this.setView(data['{{hydraPrefix}}view']);
 
             if (hubUrl) {
               this.setHubUrl(hubUrl);
diff --git a/templates/quasar/types/collection.ts b/templates/quasar/types/collection.ts
index c5a739dd..f710e6fd 100644
--- a/templates/quasar/types/collection.ts
+++ b/templates/quasar/types/collection.ts
@@ -4,8 +4,8 @@ export interface PagedCollection<T> {
   '@context'?: string;
   '@id'?: string;
   '@type'?: string;
-  'hydra:member': T[];
-  'hydra:search'?: object;
-  'hydra:totalItems'?: number;
-  'hydra:view': View;
+  '{{hydraPrefix}}member': T[];
+  '{{hydraPrefix}}search'?: object;
+  '{{hydraPrefix}}totalItems'?: number;
+  '{{hydraPrefix}}view': View;
 }
diff --git a/templates/quasar/types/view.ts b/templates/quasar/types/view.ts
index 9dfacb30..19cd75d1 100644
--- a/templates/quasar/types/view.ts
+++ b/templates/quasar/types/view.ts
@@ -1,7 +1,7 @@
 export interface View {
   '@id': string;
-  'hydra:first': string;
-  'hydra:last': string;
-  'hydra:next': string;
-  'hydra:previous': string;
+  '{{hydraPrefix}}first': string;
+  '{{hydraPrefix}}last': string;
+  '{{hydraPrefix}}next': string;
+  '{{hydraPrefix}}previous': string;
 }
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/fetch.ts
index 561b2407..c5d71c4b 100644
--- a/templates/quasar/utils/fetch.ts
+++ b/templates/quasar/utils/fetch.ts
@@ -36,7 +36,7 @@ export default function (id: string, options: any = {}) {
     if (response.ok) return response;
 
     return response.json().then((json) => {
-      const error = json['hydra:description'] ?? response.statusText;
+      const error = json['{{hydraPrefix}}description'] ?? response.statusText;
       if (!json.violations) throw Error(error);
 
       const errors: SubmissionErrors = { _error: error };

From 46478d348ae36bda14ecb9c37af2aeb854217b8a Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 11:15:15 +0100
Subject: [PATCH 56/84] Fix handlebars related bugs

---
 templates/quasar/components/foo/FormComponent.vue | 6 ++++--
 templates/quasar/components/foo/ListComponent.vue | 7 ++++++-
 templates/quasar/components/foo/ShowComponent.vue | 2 ++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index f6d91e8e..9c46aacb 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -30,7 +30,7 @@
           <q-icon
             name="close"
             class="cursor-pointer"
-            @click.prevent.stop="item.{{name}} = ''"
+            @click.prevent.stop="item.{{name}} = undefined"
           />
         </template>
       </q-input>
@@ -58,9 +58,11 @@ import { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
 {{#if hasManyRelations}}
 import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
-{{/if}}
 import { Item } from 'src/types/item';
+{{/if}}
+{{#if hasDateField}}
 import { formatDateInput } from 'src/utils/date';
+{{/if}}
 
 let props = defineProps<{
   values?: {{titleUcFirst}};
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 974dc6ff..d89a3445 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -133,7 +133,9 @@ import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
 import ActionCell from 'src/components/common/ActionCellComponent.vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+{{#if hasDateField}}
 import { formatDateTime } from 'src/utils/date';
+{{/if}}
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { storeToRefs } from 'pinia';
@@ -167,7 +169,6 @@ const pagination = {
   rowsPerPage: 3, // maximum displayed rows
   rowsNumber: 10, // max number of rows
 };
-const filters = ref({});
 const columns = [
   { name: 'actions', label: t('actions'), field: '' },
   { name: 'id', field: '@id', label: t('id') },
@@ -196,6 +197,9 @@ watch(items, () => {
   nextPage.value = 1;
 });
 
+{{#if parameters.length}}
+const filters = ref({});
+
 function onSendFilter() {
   sendRequest({
     filters: filters.value,
@@ -206,6 +210,7 @@ function onSendFilter() {
 function resetFilter() {
   filters.value = {};
 }
+{{/if}}
 
 function goToCreatePage() {
   router.push({ name: '{{titleUcFirst}}Create' });
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index d595a809..615b6d35 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -105,7 +105,9 @@ import Loading from 'src/components/common/LoadingComponent.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
 import { storeToRefs } from 'pinia';
+{{#if hasDateField}}
 import { formatDateTime } from 'src/utils/date';
+{{/if}}
 import { onBeforeUnmount } from 'vue';
 import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
 import { useBreadcrumb } from 'src/composables/breadcrumb';

From ab7414599d8b65f9f30c403f14f8b2223f72b6a7 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 11:15:28 +0100
Subject: [PATCH 57/84] Change i18n file name

---
 templates/quasar/i18n/{main.ts => common.ts} | 3 ---
 1 file changed, 3 deletions(-)
 rename templates/quasar/i18n/{main.ts => common.ts} (64%)

diff --git a/templates/quasar/i18n/main.ts b/templates/quasar/i18n/common.ts
similarity index 64%
rename from templates/quasar/i18n/main.ts
rename to templates/quasar/i18n/common.ts
index f2a18d19..68e60200 100644
--- a/templates/quasar/i18n/main.ts
+++ b/templates/quasar/i18n/common.ts
@@ -1,8 +1,5 @@
-import {{lc}} from './{{lc}}';
-
 export default {
   {{#each labels}}
   {{@key}}: '{{this}}',
   {{/each }}
-  {{lc}},
 };

From d6ec96ee46f2aeefb375927c5fc74c45c09b3bbc Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Fri, 18 Nov 2022 12:55:59 +0100
Subject: [PATCH 58/84] Replace any by real types

---
 templates/common/utils/mercure.ts                |  6 +++---
 .../quasar/components/foo/ListComponent.vue      |  7 ++++---
 templates/quasar/composables/mercureItem.ts      |  4 ++--
 templates/quasar/composables/mercureList.ts      |  2 +-
 templates/quasar/stores/foo/list.ts              |  3 ++-
 templates/quasar/types/list.ts                   | 16 ++++++++++++++++
 6 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 templates/quasar/types/list.ts

diff --git a/templates/common/utils/mercure.ts b/templates/common/utils/mercure.ts
index f9e9263f..c3c70110 100644
--- a/templates/common/utils/mercure.ts
+++ b/templates/common/utils/mercure.ts
@@ -21,13 +21,13 @@ export const mercureSubscribe = (
   return eventSource;
 };
 
-export const extractHubURL = (response: Response): URL | null => {
+export const extractHubURL = (response: Response): URL | undefined => {
   const linkHeader = response.headers.get("Link");
-  if (!linkHeader) return null;
+  if (!linkHeader) return undefined;
 
   const matches = linkHeader.match(
     /<([^>]+)>;\s+rel=(?:mercure|"[^"]*mercure[^"]*")/
   );
 
-  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : null;
+  return matches && matches[1] ? new URL(matches[1], ENTRYPOINT) : undefined;
 };
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index d89a3445..8ea9636a 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -139,11 +139,12 @@ import { formatDateTime } from 'src/utils/date';
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { storeToRefs } from 'pinia';
-import { onBeforeUnmount, ref, watch } from 'vue';
+import { onBeforeUnmount, Ref, ref, watch } from 'vue';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureList } from 'src/composables/mercureList';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { Pagination{{#if parameters.length}}, Filters{{/if}} } from 'src/types/list';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -162,7 +163,7 @@ async function sendRequest(params = {}) {
 useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
 
 const nextPage = ref(1);
-const pagination = {
+const pagination: Pagination = {
   sortBy: undefined,
   descending: false,
   page: 1, // page to be displayed
@@ -198,7 +199,7 @@ watch(items, () => {
 });
 
 {{#if parameters.length}}
-const filters = ref({});
+const filters: Ref<Filters> = ref({});
 
 function onSendFilter() {
   sendRequest({
diff --git a/templates/quasar/composables/mercureItem.ts b/templates/quasar/composables/mercureItem.ts
index 55186bfd..d2b427b9 100644
--- a/templates/quasar/composables/mercureItem.ts
+++ b/templates/quasar/composables/mercureItem.ts
@@ -26,7 +26,7 @@ export function useMercureItem({
 
   let mercureSub: EventSource | null = null;
 
-  store.$subscribe((mutation: any, state: any) => {
+  store.$subscribe((mutation, state) => {
     if (!state.hubUrl) {
       return;
     }
@@ -46,7 +46,7 @@ export function useMercureItem({
     );
   });
 
-  deleteStore.$subscribe((mutation: any, state: any) => {
+  deleteStore.$subscribe((mutation, state) => {
     if (state.mercureDeleted) {
       router.push({ name: redirectRouteName });
     }
diff --git a/templates/quasar/composables/mercureList.ts b/templates/quasar/composables/mercureList.ts
index f35821ef..e838cd93 100644
--- a/templates/quasar/composables/mercureList.ts
+++ b/templates/quasar/composables/mercureList.ts
@@ -22,7 +22,7 @@ export function useMercureList({
 
   let mercureSub: EventSource | null = null;
 
-  store.$subscribe((mutation: any, state: any) => {
+  store.$subscribe((mutation, state) => {
     if (!state.hubUrl) {
       return;
     }
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index e196704e..f4d77fcd 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -4,6 +4,7 @@ import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { View } from 'src/types/view';
 import { extractHubURL } from 'src/utils/mercure';
 import type { PagedCollection } from 'src/types/collection';
+import { ListParams } from 'src/types/list';
 
 interface State {
   items: {{titleUcFirst}}[];
@@ -25,7 +26,7 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
   }),
 
   actions: {
-    getItems(params: any) {
+    getItems(params: ListParams) {
       this.toggleLoading();
 
       return fetch('{{name}}', { params })
diff --git a/templates/quasar/types/list.ts b/templates/quasar/types/list.ts
new file mode 100644
index 00000000..eca0b425
--- /dev/null
+++ b/templates/quasar/types/list.ts
@@ -0,0 +1,16 @@
+export interface Pagination {
+  sortBy?: string;
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  rowsNumber: number;
+}
+
+export interface Filters {
+  [key: string]: string;
+}
+
+export interface ListParams {
+  pagination?: Pagination;
+  filters?: Filters;
+}

From 891b04531017db3e6ba7807402dccb86b4bae0a8 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Mon, 21 Nov 2022 19:01:58 +0100
Subject: [PATCH 59/84] Update notification management

---
 .../quasar/components/foo/UpdateComponent.vue |  5 ++--
 templates/quasar/composables/errors.ts        |  7 ++---
 templates/quasar/composables/notifications.ts | 30 +++++++++++++++++++
 templates/quasar/utils/notifications.ts       | 22 --------------
 4 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 templates/quasar/composables/notifications.ts
 delete mode 100644 templates/quasar/utils/notifications.ts

diff --git a/templates/quasar/components/foo/UpdateComponent.vue b/templates/quasar/components/foo/UpdateComponent.vue
index 05d65a97..ff6ff8f8 100644
--- a/templates/quasar/components/foo/UpdateComponent.vue
+++ b/templates/quasar/components/foo/UpdateComponent.vue
@@ -28,7 +28,7 @@ import { storeToRefs } from 'pinia';
 import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
 import { onBeforeUnmount } from 'vue';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { displaySuccessNotification } from 'src/utils/notifications';
+import { useNotifications } from 'src/composables/notifications';
 import { useI18n } from 'vue-i18n';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
@@ -38,6 +38,7 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const breadcrumb = useBreadcrumb();
+const { displaySuccessNotification } = useNotifications();
 
 const {{lc}}UpdateStore = use{{titleUcFirst}}UpdateStore();
 const {
@@ -78,7 +79,7 @@ async function submitForm(item: {{titleUcFirst}}) {
     return;
   }
 
-  displaySuccessNotification(`${item['@id']} ${t('updated')}.`, t('close'));
+  displaySuccessNotification(`${item['@id']} ${t('updated')}.`);
 }
 
 useWatchErrors([error, deleteError]);
diff --git a/templates/quasar/composables/errors.ts b/templates/quasar/composables/errors.ts
index 01224a3c..2ed28288 100644
--- a/templates/quasar/composables/errors.ts
+++ b/templates/quasar/composables/errors.ts
@@ -1,11 +1,10 @@
 import { Ref, watch } from 'vue';
-import { displayErrorNotification } from 'src/utils/notifications';
-import { useI18n } from 'vue-i18n';
+import { useNotifications } from './notifications';
 
 export function useWatchErrors(
   errors: (Ref<string | undefined> | undefined)[]
 ) {
-  const { t } = useI18n();
+  const { displayErrorNotification } = useNotifications();
 
   watch(errors, (newErrors) => {
     newErrors.forEach((newError) => {
@@ -13,7 +12,7 @@ export function useWatchErrors(
         return;
       }
 
-      displayErrorNotification(newError.value, t('close'));
+      displayErrorNotification(newError.value);
     });
   });
 }
diff --git a/templates/quasar/composables/notifications.ts b/templates/quasar/composables/notifications.ts
new file mode 100644
index 00000000..7eb075ff
--- /dev/null
+++ b/templates/quasar/composables/notifications.ts
@@ -0,0 +1,30 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useNotifications() {
+  const $q = useQuasar();
+  const { t } = useI18n();
+
+  const displayErrorNotification = (message: string) => {
+    $q.notify({
+      message,
+      color: 'red',
+      icon: 'error',
+      closeBtn: t('close'),
+    });
+  };
+
+  const displaySuccessNotification = (message: string) => {
+    $q.notify({
+      message,
+      color: 'green',
+      icon: 'tag_faces',
+      closeBtn: t('close'),
+    });
+  };
+
+  return {
+    displayErrorNotification,
+    displaySuccessNotification,
+  };
+}
diff --git a/templates/quasar/utils/notifications.ts b/templates/quasar/utils/notifications.ts
deleted file mode 100644
index 2efa0483..00000000
--- a/templates/quasar/utils/notifications.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Notify } from 'quasar';
-
-export function displayErrorNotification(message: string, closeLabel: string) {
-  Notify.create({
-    message,
-    color: 'red',
-    icon: 'error',
-    closeBtn: closeLabel,
-  });
-}
-
-export function displaySuccessNotification(
-  message: string,
-  closeLabel: string
-) {
-  Notify.create({
-    message,
-    color: 'green',
-    icon: 'tag_faces',
-    closeBtn: closeLabel,
-  });
-}

From 202ae64dd872c2ade560b3d538b0232e9528c678 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Mon, 21 Nov 2022 19:03:17 +0100
Subject: [PATCH 60/84] Fix display bugs

---
 .../quasar/components/common/BreadcrumbComponent.vue |  2 +-
 .../components/common/ConfirmDeleteComponent.vue     |  2 +-
 templates/quasar/components/foo/FormComponent.vue    |  2 +-
 templates/quasar/components/foo/ListComponent.vue    | 12 ++++++------
 templates/quasar/components/foo/ShowComponent.vue    |  4 ++--
 templates/quasar/types/foo.ts                        |  2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/templates/quasar/components/common/BreadcrumbComponent.vue b/templates/quasar/components/common/BreadcrumbComponent.vue
index afa0ca82..b44ea63a 100644
--- a/templates/quasar/components/common/BreadcrumbComponent.vue
+++ b/templates/quasar/components/common/BreadcrumbComponent.vue
@@ -5,7 +5,7 @@
     <q-breadcrumbs-el
       v-for="(breadcrumb, index) in props.values"
       :key="index"
-      :label="`${$t(breadcrumb.label)} ${
+      :label="`${breadcrumb.label} ${
         index === props.values.length - 1 && props.item?.['@id']
           ? props.item['@id']
           : ''
diff --git a/templates/quasar/components/common/ConfirmDeleteComponent.vue b/templates/quasar/components/common/ConfirmDeleteComponent.vue
index 7f91323e..441d81da 100644
--- a/templates/quasar/components/common/ConfirmDeleteComponent.vue
+++ b/templates/quasar/components/common/ConfirmDeleteComponent.vue
@@ -5,7 +5,7 @@
         <q-avatar icon="warning" color="primary" text-color="white" />
 
         <span class="q-ml-sm">
-          \{{ $t('Are you sure you want to delete this item?') }}
+          \{{ $t('confirmDelete') }}
         </span>
       </q-card-section>
 
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index 9c46aacb..c459374c 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -24,7 +24,7 @@
         {{/compare}}
         bottom-slots
         filled
-        class="col-12 col-md"
+        class="col-12 col-md-4"
       >
         <template #append>
           <q-icon
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 8ea9636a..74a54a7f 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -25,10 +25,10 @@
     :rows="items"
     :columns="columns"
     :loading="isLoading"
-    :no-data-label="$t('{{{labels.unavail}}}')"
-    :no-results-label="$t('{{{labels.noresults}}}')"
-    :loading-label="$t('{{{labels.loading}}}')"
-    :rows-per-page-label="$t('{{{labels.recPerPage}}}')"
+    :no-data-label="$t('unavail')"
+    :no-results-label="$t('noresults')"
+    :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recPerPage')"
     row-key="id"
     flat
     wrap-cells
@@ -45,7 +45,7 @@
 
     {{#each fields}}
     {{#if isReferences}}
-    <template #body-cell-{{lowercase reference.title}}="{ value }">
+    <template #body-cell-{{reference.name}}="{ value }">
       <td>
         <template v-if="router.hasRoute('{{reference.title}}Show')">
           <router-link
@@ -82,7 +82,7 @@
       </td>
     </template>
     {{else if isEmbeddeds}}
-    <template #body-cell-{{lowercase embedded.title}}="{ value }">
+    <template #body-cell-{{embedded.name}}="{ value }">
       <td>
         <template v-if="router.hasRoute('{{embedded.title}}Show')">
           <router-link
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index 615b6d35..7d0b4c68 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -9,8 +9,8 @@
     <q-markup-table>
       <thead>
         <tr>
-          <th>\{{ $t('{{labels.field}}') }}</th>
-          <th>\{{ $t('{{labels.value}}') }}</th>
+          <th>\{{ $t('field') }}</th>
+          <th>\{{ $t('value') }}</th>
         </tr>
       </thead>
       <tbody>
diff --git a/templates/quasar/types/foo.ts b/templates/quasar/types/foo.ts
index 39ee8198..bbcda1a8 100644
--- a/templates/quasar/types/foo.ts
+++ b/templates/quasar/types/foo.ts
@@ -2,6 +2,6 @@ import type { Item } from "./item";
 
 export interface {{titleUcFirst}} extends Item {
 {{#each fields}}
- {{#if readonly}}readonly{{/if}} {{{name}}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelations}}any{{else}}{{{type}}}{{/if}};
+ {{#if readonly}}readonly{{/if}} {{name}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelations}}any{{else}}{{type}}{{/if}};
 {{/each}}
 }

From 28ce38d3349316877600281a1bd4855bebcb1bc0 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Mon, 21 Nov 2022 19:14:27 +0100
Subject: [PATCH 61/84] Update generator from Quasar v1 to v2

---
 src/generators/QuasarGenerator.js | 565 ++++++++++--------------------
 1 file changed, 180 insertions(+), 385 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 17de8425..f7d4c896 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -1,7 +1,6 @@
 import chalk from "chalk";
 import handlebars from "handlebars";
 import hbh_comparison from "handlebars-helpers/lib/comparison.js";
-import hbh_array from "handlebars-helpers/lib/array.js";
 import hbh_string from "handlebars-helpers/lib/string.js";
 import BaseGenerator from "./BaseGenerator.js";
 
@@ -9,117 +8,73 @@ export default class extends BaseGenerator {
   constructor(params) {
     super(params);
 
+    this.registerTemplates("common/", [
+      // utils
+      "utils/mercure.ts",
+    ]);
+
     this.registerTemplates(`quasar/`, [
-      // modules
-      "store/modules/foo/index.js",
-      "store/modules/foo/create/actions.js",
-      "store/modules/foo/create/getters.js",
-      "store/modules/foo/create/index.js",
-      "store/modules/foo/create/mutation_types.js",
-      "store/modules/foo/create/mutations.js",
-      "store/modules/foo/create/state.js",
-      "store/modules/foo/delete/actions.js",
-      "store/modules/foo/delete/getters.js",
-      "store/modules/foo/delete/index.js",
-      "store/modules/foo/delete/mutation_types.js",
-      "store/modules/foo/delete/mutations.js",
-      "store/modules/foo/delete/state.js",
-      "store/modules/foo/list/actions.js",
-      "store/modules/foo/list/getters.js",
-      "store/modules/foo/list/index.js",
-      "store/modules/foo/list/mutation_types.js",
-      "store/modules/foo/list/mutations.js",
-      "store/modules/foo/list/state.js",
-      "store/modules/foo/show/actions.js",
-      "store/modules/foo/show/getters.js",
-      "store/modules/foo/show/index.js",
-      "store/modules/foo/show/mutation_types.js",
-      "store/modules/foo/show/mutations.js",
-      "store/modules/foo/show/state.js",
-      "store/modules/foo/update/actions.js",
-      "store/modules/foo/update/getters.js",
-      "store/modules/foo/update/index.js",
-      "store/modules/foo/update/mutation_types.js",
-      "store/modules/foo/update/mutations.js",
-      "store/modules/foo/update/state.js",
-
-      // common for modules
-      "common/store/mutation_types.js",
-      "common/store/create/actions.js",
-      "common/store/create/getters.js",
-      "common/store/create/mutation_types.js",
-      "common/store/create/mutations.js",
-      "common/store/create/state.js",
-      "common/store/delete/actions.js",
-      "common/store/delete/getters.js",
-      "common/store/delete/mutation_types.js",
-      "common/store/delete/mutations.js",
-      "common/store/delete/state.js",
-      "common/store/list/actions.js",
-      "common/store/list/getters.js",
-      "common/store/list/mutation_types.js",
-      "common/store/list/mutations.js",
-      "common/store/list/state.js",
-      "common/store/show/actions.js",
-      "common/store/show/getters.js",
-      "common/store/show/mutation_types.js",
-      "common/store/show/mutations.js",
-      "common/store/show/state.js",
-      "common/store/update/actions.js",
-      "common/store/update/getters.js",
-      "common/store/update/mutation_types.js",
-      "common/store/update/mutations.js",
-      "common/store/update/state.js",
+      // common components
+      "components/common/ActionCellComponent.vue",
+      "components/common/BreadcrumbComponent.vue",
+      "components/common/ConfirmDeleteComponent.vue",
+      "components/common/DataFilterComponent.vue",
+      "components/common/FormRepeaterComponent.vue",
+      "components/common/LoadingComponent.vue",
+      "components/common/ToolbarComponent.vue",
 
       // components
-      "components/foo/Create.vue",
-      "components/foo/Filter.vue",
-      "components/foo/Form.vue",
-      "components/foo/List.vue",
-      "components/foo/Update.vue",
-      "components/foo/Show.vue",
-
-      //common components
-      "common/components/index.js",
-      "common/components/ActionCell.vue",
-      "common/components/Breadcrumb.vue",
-      "common/components/ConfirmDelete.vue",
-      "common/components/DataFilter.vue",
-      "common/components/InputDate.vue",
-      "common/components/Loading.vue",
-      "common/components/Toolbar.vue",
-
-      // components mixins
-      "common/mixins/CreateMixin.js",
-      "common/mixins/ListMixin.js",
-      "common/mixins/ShowMixin.js",
-      "common/mixins/UpdateMixin.js",
-
-      // routes
-      "router/foo.js",
+      "components/foo/CreateComponent.vue",
+      "components/foo/FilterComponent.vue",
+      "components/foo/FormComponent.vue",
+      "components/foo/ListComponent.vue",
+      "components/foo/ShowComponent.vue",
+      "components/foo/UpdateComponent.vue",
+
+      // composables
+      "composables/breadcrumb.ts",
+      "composables/errors.ts",
+      "composables/mercureItem.ts",
+      "composables/mercureList.ts",
+      "composables/notifications.ts",
 
-      // error
-      "error/SubmissionError.js",
+      // i18n
+      "i18n/foo.ts",
+      "i18n/common.ts",
+
+      // pages
+      "pages/foo/CreatePage.vue",
+      "pages/foo/ListPage.vue",
+      "pages/foo/ShowPage.vue",
+      "pages/foo/UpdatePage.vue",
+
+      // router
+      "router/foo.ts",
+
+      // stores
+      "stores/foo/create.ts",
+      "stores/foo/delete.ts",
+      "stores/foo/list.ts",
+      "stores/foo/show.ts",
+      "stores/foo/update.ts",
+
+      // types
+      "types/breadcrumb.ts",
+      "types/collection.ts",
+      "types/error.ts",
+      "types/foo.ts",
+      "types/item.ts",
+      "types/list.ts",
+      "types/view.ts",
 
       // utils
-      "utils/fetch.js",
-      "utils/dates.js",
-      "utils/notify.js",
-      "utils/vuexer.js",
-
-      // i18n
-      "i18n/index.js",
+      "utils/date.ts",
+      "utils/fetch.ts",
     ]);
 
     handlebars.registerHelper("compare", hbh_comparison.compare);
-    handlebars.registerHelper("ifEven", hbh_comparison.ifEven);
-    handlebars.registerHelper("ifOdd", hbh_comparison.ifOdd);
-    handlebars.registerHelper("inArray", hbh_array.inArray);
-    handlebars.registerHelper("forEach", hbh_array.forEach);
     handlebars.registerHelper("lowercase", hbh_string.lowercase);
     handlebars.registerHelper("capitalize", hbh_string.capitalize);
-
-    this.registerSwitchHelper();
   }
 
   help(resource) {
@@ -134,122 +89,38 @@ export default class extends BaseGenerator {
     );
     console.log(
       chalk.green(`
-//Add to quasar.conf
-// 1. in 'framework.components'
-  'QTable',
-  'QTh',
-  'QTr',
-  'QTd',
-  'QBreadcrumbs',
-  'QBreadcrumbsEl',
-  'QSpace',
-  'QInput',
-  'QForm',
-  'QSelect',
-  'QMarkupTable',
-  'QDate',
-  'QTime',
-  'QCheckbox',
-  'QPopupProxy',
-  'QSpinner',
-  'QInnerLoading',
-  'QCard',
-  'QCardSection',
-  'QCardActions',
-  'QExpansionItem',
-  'QDialog',
-  'QAvatar',
-
-// 2. in 'framework.config', customize later
+// Add to quasar.conf
+// 1. in 'framework.config', can be customized later
 notify: {
   position: 'top',
   multiLine: true,
   timeout: 0,
 },
 
-// 3. in 'framework.directives
-  'ClosePopup'
-
-// 4. in 'framework.plugins
+// 2. in 'framework.plugins
   'Notify'
 
-//import routes
-import ${titleLc}Routes from '../router/${titleLc}';
+// Import routes in src/router/routes.ts
+import ${titleLc}Routes from './${titleLc}';
 
-// Add routes to VueRouter
-const router = new VueRouter({
+const routes: RouteRecordRaw[] = [
   // ...
-  routes: [
-      ...${titleLc}Routes,
-  ]
-});
+  ...${titleLc}Routes,
+];
 
-// Add the modules in the store
-import ${titleLc} from '../store/modules/${titleLc}/';
+// import translations in src/i18n/en-US/index.ts
+import common from './common';
+import ${titleLc} from './${titleLc}';
 
-export const store = new Vuex.Store({
+export default {
   // ...
-  modules: {
-    ${titleLc}
-  }
-});
+  ...common,
+  ${titleLc},
+}
 `)
     );
   }
 
-  registerSwitchHelper() {
-    /*
-      https://github.com/wycats/handlebars.js/issues/927#issuecomment-318640459
-
-      {{#switch state}}
-        {{#case "page1" "page2"}}page 1 or 2{{/case}}
-        {{#case "page3"}}page3{{/case}}
-        {{#case "page4"}}page4{{/case}}
-        {{#case "page5"}}
-          {{#switch s}}
-            {{#case "3"}}s = 3{{/case}}
-            {{#case "2"}}s = 2{{/case}}
-            {{#case "1"}}s = 1{{/case}}
-            {{#default}}unknown{{/default}}
-          {{/switch}}
-        {{/case}}
-        {{#default}}page0{{/default}}
-      {{/switch}}
-    */
-    handlebars.__switch_stack__ = [];
-
-    handlebars.registerHelper("switch", function (value, options) {
-      handlebars.__switch_stack__.push({
-        switch_match: false,
-        switch_value: value,
-      });
-      let html = options.fn(this);
-      handlebars.__switch_stack__.pop();
-      return html;
-    });
-    handlebars.registerHelper("case", function (value, options) {
-      var args = Array.from(arguments);
-      options = args.pop();
-      var caseValues = args;
-      var stack =
-        handlebars.__switch_stack__[handlebars.__switch_stack__.length - 1];
-
-      if (stack.switch_match || caseValues.indexOf(stack.switch_value) === -1) {
-        return "";
-      } else {
-        stack.switch_match = true;
-        return options.fn(this);
-      }
-    });
-    handlebars.registerHelper("default", function (options) {
-      var stack =
-        handlebars.__switch_stack__[handlebars.__switch_stack__.length - 1];
-      if (!stack.switch_match) {
-        return options.fn(this);
-      }
-    });
-  }
-
   generate(api, resource, dir) {
     return resource
       .getParameters()
@@ -300,36 +171,20 @@ export const store = new Vuex.Store({
     return result;
   }
 
-  printObject(obj) {
-    var cache = [];
-    console.log(
-      JSON.stringify(obj, function (key, value) {
-        if (typeof value === "object" && value !== null) {
-          if (cache.includes(value)) {
-            // Duplicate reference found, discard key
-            return;
-          }
-          // Store value in our collection
-          cache.push(value);
-        }
-        return value;
-      })
-    );
-    cache = null;
-  }
-
   generateFiles(api, resource, dir, params) {
     const lc = resource.title.toLowerCase();
     const titleUcFirst =
       resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
 
-    const formFields = this.buildFields(resource.writableFields);
-
-    const dateTypes = ["time", "date", "dateTime"];
-    const formContainsDate = formFields.some((e) => dateTypes.includes(e.type));
-
-    const fields = this.buildFields(resource.readableFields);
-    const listContainsDate = fields.some((e) => dateTypes.includes(e.type));
+    const { fields } = this.parseFields(resource);
+    const formFields = this.buildFields(fields);
+    const hasRelations = fields.some(
+      (field) => field.reference || field.embedded
+    );
+    const hasManyRelations = fields.some(
+      (field) => field.isReferences || field.isEmbeddeds
+    );
+    const hasDateField = fields.some((field) => field.type === "dateTime");
 
     const parameters = [];
     params.forEach((p) => {
@@ -361,13 +216,6 @@ export const store = new Vuex.Store({
           }
           return;
         }
-
-        if (!p.name) {
-          p = { ...p, name: p.variable };
-        }
-        if (!p.sortable) {
-          parameters.push(p);
-        }
       } else {
         const param = fields[paramIndex];
         param.multiple = p.multiple;
@@ -375,160 +223,101 @@ export const store = new Vuex.Store({
       }
     });
 
-    const paramsHaveRefs = parameters.some(
-      (e) => e.type === "text" && e.reference
-    );
-
     const labels = this.commonLabelTexts();
 
-    const hashEntry = this.hashCode(api.entrypoint);
-
     const context = {
-      title: resource.title,
       name: resource.name,
       lc,
-      uc: resource.title.toUpperCase(),
       fields,
-      dateTypes,
-      listContainsDate,
-      paramsHaveRefs,
+      hasRelations,
+      hasManyRelations,
+      hasDateField,
       parameters,
       formFields,
-      formContainsDate,
       hydraPrefix: this.hydraPrefix,
       titleUcFirst,
       labels,
-      hashEntry,
     };
 
     // Create directories
     // These directories may already exist
     [
+      `${dir}/components/common`,
+      `${dir}/composables`,
       `${dir}/config`,
-      `${dir}/error`,
-      `${dir}/router`,
+      `${dir}/types`,
       `${dir}/utils`,
-      `${dir}/i18n`,
-      `${dir}/i18n/en-us`,
-
-      `${dir}/common`,
-      `${dir}/common/components`,
-      `${dir}/common/mixins`,
-      `${dir}/common/store`,
-      `${dir}/common/store/create`,
-      `${dir}/common/store/delete`,
-      `${dir}/common/store/list`,
-      `${dir}/common/store/show`,
-      `${dir}/common/store/update`,
     ].forEach((dir) => this.createDir(dir, false));
 
     [
-      `${dir}/store/modules/${lc}`,
-      `${dir}/store/modules/${lc}/create`,
-      `${dir}/store/modules/${lc}/delete`,
-      `${dir}/store/modules/${lc}/list`,
-      `${dir}/store/modules/${lc}/show`,
-      `${dir}/store/modules/${lc}/update`,
-
       `${dir}/components/${lc}`,
+      `${dir}/pages/${lc}`,
+      `${dir}/stores/${lc}`,
     ].forEach((dir) => this.createDir(dir));
 
     [
-      "common/components/index.js",
-      "common/components/ActionCell.vue",
-      "common/components/Breadcrumb.vue",
-      "common/components/ConfirmDelete.vue",
-      "common/components/DataFilter.vue",
-      "common/components/InputDate.vue",
-      "common/components/Loading.vue",
-      "common/components/Toolbar.vue",
-
-      "common/mixins/CreateMixin.js",
-      "common/mixins/ListMixin.js",
-      "common/mixins/ShowMixin.js",
-      "common/mixins/UpdateMixin.js",
-
-      "common/store/mutation_types.js",
-      "common/store/create/actions.js",
-      "common/store/create/getters.js",
-      "common/store/create/mutation_types.js",
-      "common/store/create/mutations.js",
-      "common/store/create/state.js",
-      "common/store/delete/actions.js",
-      "common/store/delete/getters.js",
-      "common/store/delete/mutation_types.js",
-      "common/store/delete/mutations.js",
-      "common/store/delete/state.js",
-      "common/store/list/actions.js",
-      "common/store/list/getters.js",
-      "common/store/list/mutation_types.js",
-      "common/store/list/mutations.js",
-      "common/store/list/state.js",
-      "common/store/show/actions.js",
-      "common/store/show/getters.js",
-      "common/store/show/mutation_types.js",
-      "common/store/show/mutations.js",
-      "common/store/show/state.js",
-      "common/store/update/actions.js",
-      "common/store/update/getters.js",
-      "common/store/update/mutation_types.js",
-      "common/store/update/mutations.js",
-      "common/store/update/state.js",
-
-      "utils/dates.js",
-      "utils/notify.js",
-      "utils/vuexer.js",
+      // common components
+      "components/common/ActionCellComponent.vue",
+      "components/common/BreadcrumbComponent.vue",
+      "components/common/ConfirmDeleteComponent.vue",
+      "components/common/DataFilterComponent.vue",
+      "components/common/FormRepeaterComponent.vue",
+      "components/common/LoadingComponent.vue",
+      "components/common/ToolbarComponent.vue",
+
+      // composables
+      "composables/breadcrumb.ts",
+      "composables/errors.ts",
+      "composables/mercureItem.ts",
+      "composables/mercureList.ts",
+      "composables/notifications.ts",
+
+      // types
+      "types/breadcrumb.ts",
+      "types/collection.ts",
+      "types/error.ts",
+      "types/item.ts",
+      "types/list.ts",
+      "types/view.ts",
+
+      // utils
+      "utils/date.ts",
+      "utils/fetch.ts",
+      "utils/mercure.ts",
     ].forEach((common) =>
       this.createFile(common, `${dir}/${common}`, context, false)
     );
 
     [
-      // modules
-      "store/modules/%s/index.js",
-      "store/modules/%s/create/actions.js",
-      "store/modules/%s/create/getters.js",
-      "store/modules/%s/create/index.js",
-      "store/modules/%s/create/mutation_types.js",
-      "store/modules/%s/create/mutations.js",
-      "store/modules/%s/create/state.js",
-      "store/modules/%s/delete/actions.js",
-      "store/modules/%s/delete/getters.js",
-      "store/modules/%s/delete/index.js",
-      "store/modules/%s/delete/mutation_types.js",
-      "store/modules/%s/delete/mutations.js",
-      "store/modules/%s/delete/state.js",
-      "store/modules/%s/list/actions.js",
-      "store/modules/%s/list/getters.js",
-      "store/modules/%s/list/index.js",
-      "store/modules/%s/list/mutation_types.js",
-      "store/modules/%s/list/mutations.js",
-      "store/modules/%s/list/state.js",
-      "store/modules/%s/show/actions.js",
-      "store/modules/%s/show/getters.js",
-      "store/modules/%s/show/index.js",
-      "store/modules/%s/show/mutation_types.js",
-      "store/modules/%s/show/mutations.js",
-      "store/modules/%s/show/state.js",
-      "store/modules/%s/update/actions.js",
-      "store/modules/%s/update/getters.js",
-      "store/modules/%s/update/index.js",
-      "store/modules/%s/update/mutation_types.js",
-      "store/modules/%s/update/mutations.js",
-      "store/modules/%s/update/state.js",
-
       // components
-      "components/%s/Create.vue",
-      "components/%s/Filter.vue",
-      "components/%s/Form.vue",
-      "components/%s/List.vue",
-      "components/%s/Update.vue",
-      "components/%s/Show.vue",
+      "components/%s/CreateComponent.vue",
+      "components/%s/FilterComponent.vue",
+      "components/%s/FormComponent.vue",
+      "components/%s/ListComponent.vue",
+      "components/%s/ShowComponent.vue",
+      "components/%s/UpdateComponent.vue",
+
+      // pages
+      "pages/%s/CreatePage.vue",
+      "pages/%s/ListPage.vue",
+      "pages/%s/ShowPage.vue",
+      "pages/%s/UpdatePage.vue",
 
       // routes
-      "router/%s.js",
+      "router/%s.ts",
+
+      // stores
+      "stores/%s/create.ts",
+      "stores/%s/delete.ts",
+      "stores/%s/list.ts",
+      "stores/%s/show.ts",
+      "stores/%s/update.ts",
+
+      // types
+      "types/%s.ts",
     ].forEach((pattern) => {
       if (
-        pattern === "components/%s/Filter.vue" &&
+        pattern === "components/%s/FilterComponent.vue" &&
         !context.parameters.length
       ) {
         return;
@@ -536,53 +325,28 @@ export const store = new Vuex.Store({
       this.createFileFromPattern(pattern, dir, [lc], context);
     });
 
-    // error
-    this.createFile(
-      "error/SubmissionError.js",
-      `${dir}/error/SubmissionError.js`,
-      context,
-      false
-    );
-
-    this.createEntrypoint(
-      api.entrypoint,
-      `${dir}/config/${hashEntry}_entrypoint.js`
-    );
-
-    this.createFile(
-      "utils/fetch.js",
-      `${dir}/utils/fetch.js`,
-      { hydraPrefix: this.hydraPrefix },
-      false
-    );
+    // entrypoint
+    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.ts`);
 
     this.createFile(
-      "i18n/index.js",
-      `${dir}/i18n/en-us/index.js`,
-      { labels: Object.values(labels) },
+      "i18n/common.ts",
+      `${dir}/i18n/en-US/common.ts`,
+      { labels },
       false
     );
 
     const contextLabels = {
       labels: this.contextLabelTexts(formFields, fields),
     };
+
     this.createFile(
-      "i18n/index.js",
-      `${dir}/i18n/en-us/${lc}.js`,
+      "i18n/foo.ts",
+      `${dir}/i18n/en-US/${lc}.ts`,
       contextLabels,
       false
     );
   }
 
-  hashCode(s) {
-    return Math.abs(
-      Array.from(s).reduce(
-        (s, c) => (Math.imul(31, s) + c.charCodeAt(0)) | 0,
-        0
-      )
-    );
-  }
-
   contextLabelTexts(formFields, fields) {
     let texts = [];
     formFields.forEach((x) => texts.push(x.name)); // forms
@@ -611,8 +375,39 @@ export const store = new Vuex.Store({
       stringValidation: "Please type something",
       required: "Field is required",
       recPerPage: "Records per page:",
+      id: "ID",
+      actions: "Actions",
     };
+  }
+
+  parseFields(resource) {
+    const fields = [
+      ...resource.writableFields,
+      ...resource.readableFields,
+    ].reduce((list, field) => {
+      if (list[field.name]) {
+        return list;
+      }
 
-    // handlebars.registerPartial("myPartial", "{{name}}");
+      const isReferences = Boolean(
+        field.reference && field.maxCardinality !== 1
+      );
+      const isEmbeddeds = Boolean(field.embedded && field.maxCardinality !== 1);
+
+      return {
+        ...list,
+        [field.name]: {
+          ...field,
+          isReferences,
+          isEmbeddeds,
+          isRelations: field.reference || field.embedded,
+          isManyRelations: isEmbeddeds || isReferences,
+        },
+      };
+    }, {});
+
+    const fieldsArray = Object.values(fields);
+
+    return { fields: fieldsArray };
   }
 }

From fa52946ddf9f1b14a7c6d04015336421d4da1543 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Mon, 21 Nov 2022 20:10:07 +0100
Subject: [PATCH 62/84] Fix small details

---
 src/generators/QuasarGenerator.js                 | 2 +-
 templates/quasar/components/foo/FormComponent.vue | 2 +-
 templates/quasar/components/foo/ListComponent.vue | 3 +--
 templates/quasar/components/foo/ShowComponent.vue | 8 ++++----
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index f7d4c896..1f987517 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -89,7 +89,7 @@ export default class extends BaseGenerator {
     );
     console.log(
       chalk.green(`
-// Add to quasar.conf
+// Add to quasar.config.js
 // 1. in 'framework.config', can be customized later
 notify: {
   position: 'top',
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FormComponent.vue
index c459374c..2e6d5a81 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FormComponent.vue
@@ -11,7 +11,7 @@
       />
       {{else}}
       <q-input
-        v-model="item.{{name}}"
+        v-model{{#compare type "==" "number" }}.number{{/compare}}="item.{{name}}"
         :label="$t('{{../lc}}.{{name}}')"
         :error="Boolean(violations?.{{name}})"
         :error-message="violations?.{{name}}"
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/ListComponent.vue
index 74a54a7f..e11f363c 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/ListComponent.vue
@@ -42,7 +42,6 @@
         @delete="deleteItem(row)"
       />
     </template>
-
     {{#each fields}}
     {{#if isReferences}}
     <template #body-cell-{{reference.name}}="{ value }">
@@ -139,7 +138,7 @@ import { formatDateTime } from 'src/utils/date';
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { storeToRefs } from 'pinia';
-import { onBeforeUnmount, Ref, ref, watch } from 'vue';
+import { onBeforeUnmount{{#if parameters.length}}, Ref{{/if}}, ref, watch } from 'vue';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureList } from 'src/composables/mercureList';
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/ShowComponent.vue
index 7d0b4c68..b72fad2b 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/ShowComponent.vue
@@ -58,7 +58,7 @@
                 :to="{ name: '{{embedded.title}}Show', params: { id: {{lowercase embedded.title}}['@id'] } }"
                 :key="{{lowercase embedded.title}}['@id']"
               >
-                \{{ {{lowercase embedded.title}}["@id"] }}
+                \{{ {{lowercase embedded.title}}['@id'] }}
 
                 <br />
               </router-link>
@@ -69,7 +69,7 @@
                 v-for="{{lowercase embedded.title}} in item.{{embedded.name}}"
                 :key="{{lowercase embedded.title}}['@id']"
               >
-                \{{ {{lowercase embedded.title}}["@id"] }}
+                \{{ {{lowercase embedded.title}}['@id'] }}
               </p>
             </template>
             {{else if embedded}}
@@ -77,11 +77,11 @@
               v-if="router.hasRoute('{{embedded.title}}Show')"
               :to="{ name: '{{embedded.title}}Show', params: { id: item.{{lowercase embedded.title}}['@id'] } }"
             >
-              \{{ item.{{lowercase embedded.title}}["@id"] }}
+              \{{ item.{{lowercase embedded.title}}['@id'] }}
             </router-link>
 
             <p v-else>
-              \{{ item.{{lowercase embedded.title}}["@id"] }}
+              \{{ item.{{lowercase embedded.title}}['@id'] }}
             </p>
             {{else if (compare type "==" "dateTime") }}
             \{{ formatDateTime(item.{{name}}) }}

From 3ea9f8acf6ad50bdf5188d054137acf1ae13fd15 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 24 Nov 2022 15:01:15 +0100
Subject: [PATCH 63/84] Update Quasar tests

---
 src/generators/QuasarGenerator.js      |  13 +--
 src/generators/QuasarGenerator.test.js | 108 +++++++++++++------------
 2 files changed, 64 insertions(+), 57 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 1f987517..de713876 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -13,7 +13,7 @@ export default class extends BaseGenerator {
       "utils/mercure.ts",
     ]);
 
-    this.registerTemplates(`quasar/`, [
+    this.registerTemplates("quasar/", [
       // common components
       "components/common/ActionCellComponent.vue",
       "components/common/BreadcrumbComponent.vue",
@@ -191,8 +191,8 @@ export default {
       const paramIndex = fields.findIndex((field) => field.name === p.variable);
       if (paramIndex === -1) {
         if (p.variable.startsWith("order[")) {
-          var v = p.variable.slice(6, -1);
-          var found = fields.findIndex((field) => field.name === v);
+          let v = p.variable.slice(6, -1);
+          let found = fields.findIndex((field) => field.name === v);
           if (found !== -1) {
             fields[found].sortable = true;
           }
@@ -200,8 +200,8 @@ export default {
         }
 
         if (p.variable.startsWith("exists[")) {
-          var exists = p.variable.slice(7, -1);
-          var foundExistsFieldIndex = fields.findIndex(
+          let exists = p.variable.slice(7, -1);
+          let foundExistsFieldIndex = fields.findIndex(
             (field) => field.name === exists
           );
           if (foundExistsFieldIndex !== -1) {
@@ -244,7 +244,10 @@ export default {
     [
       `${dir}/components/common`,
       `${dir}/composables`,
+      `${dir}/i18n`,
+      `${dir}/i18n/en-US`,
       `${dir}/config`,
+      `${dir}/router`,
       `${dir}/types`,
       `${dir}/utils`,
     ].forEach((dir) => this.createDir(dir, false));
diff --git a/src/generators/QuasarGenerator.test.js b/src/generators/QuasarGenerator.test.js
index f159fc97..0491eb49 100644
--- a/src/generators/QuasarGenerator.test.js
+++ b/src/generators/QuasarGenerator.test.js
@@ -7,7 +7,7 @@ import QuasarGenerator from "./QuasarGenerator.js";
 
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 
-test("Generate a Quasar app", () => {
+test("Generate a Quasar app", async () => {
   const generator = new QuasarGenerator({
     hydraPrefix: "hydra:",
     templateDirectory: `${dirname}/../../templates`,
@@ -21,6 +21,7 @@ test("Generate a Quasar app", () => {
       reference: null,
       required: true,
       description: "An URL",
+      type: "string",
     }),
   ];
   const resource = new Resource("abc", "http://example.com/foos", {
@@ -37,60 +38,63 @@ test("Generate a Quasar app", () => {
     title: "My API",
     resources: [resource],
   });
-  generator
-    .generate(api, resource, tmpobj.name)
-    .then(() => {
-      expect(fs.existsSync(tmpobj.name + "/components/foo/Create.vue")).toBe(
-        true
-      );
-      expect(fs.existsSync(tmpobj.name + "/components/foo/Form.vue")).toBe(
-        true
-      );
-      expect(fs.existsSync(tmpobj.name + "/components/foo/List.vue")).toBe(
-        true
-      );
-      expect(fs.existsSync(tmpobj.name + "/components/foo/Show.vue")).toBe(
-        true
-      );
-      expect(fs.existsSync(tmpobj.name + "/components/foo/Update.vue")).toBe(
-        true
-      );
 
-      expect(fs.existsSync(tmpobj.name + "/config/entrypoint.js")).toBe(true);
+  await generator.generate(api, resource, tmpobj.name, []);
 
-      expect(fs.existsSync(tmpobj.name + "/error/SubmissionError.js")).toBe(
-        true
-      );
+  // common components
+  [
+    "ActionCell",
+    "Breadcrumb",
+    "ConfirmDelete",
+    "DataFilter",
+    "FormRepeater",
+    "Loading",
+    "Toolbar",
+  ].forEach((name) => {
+    expect(
+      fs.existsSync(`${tmpobj.name}/components/common/${name}Component.vue`)
+    ).toBe(true);
+  });
+
+  // components
+  ["Create", "Form", "List", "Show", "Update"].forEach((name) => {
+    expect(
+      fs.existsSync(`${tmpobj.name}/components/foo/${name}Component.vue`)
+    ).toBe(true);
+  });
+
+  // i18n
+  expect(fs.existsSync(`${tmpobj.name}/i18n/en-US/common.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/i18n/en-US/foo.ts`)).toBe(true);
+
+  // pages
+  ["Create", "List", "Show", "Update"].forEach((name) => {
+    expect(fs.existsSync(`${tmpobj.name}/pages/foo/${name}Page.vue`)).toBe(
+      true
+    );
+  });
+
+  // router
+  expect(fs.existsSync(`${tmpobj.name}/router/foo.ts`)).toBe(true);
+
+  // stores
+  ["create", "delete", "list", "show", "update"].forEach((name) => {
+    expect(fs.existsSync(`${tmpobj.name}/stores/foo/${name}.ts`)).toBe(true);
+  });
+
+  // types
+  ["breadcrumb", "collection", "error", "foo", "item", "list", "view"].forEach(
+    (name) => {
+      expect(fs.existsSync(`${tmpobj.name}/types/${name}.ts`)).toBe(true);
+    }
+  );
 
-      expect(fs.existsSync(tmpobj.name + "/router/foo.js")).toBe(true);
+  // utils
+  expect(fs.existsSync(`${tmpobj.name}/utils/date.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/fetch.ts`)).toBe(true);
 
-      expect(fs.existsSync(tmpobj.name + "/store/modules/foo/index.js")).toBe(
-        true
-      );
+  // config
+  expect(fs.existsSync(`${tmpobj.name}/config/entrypoint.ts`)).toBe(true);
 
-      ["create", "delete", "list", "show", "update"].forEach((action) => {
-        expect(
-          fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/actions.js`)
-        ).toBe(true);
-        expect(
-          fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/getters.js`)
-        ).toBe(true);
-        expect(
-          fs.existsSync(`${tmpobj.name}/store/modules/foo/${action}/index.js`)
-        ).toBe(true);
-        expect(
-          fs.existsSync(
-            `${tmpobj.name}/store/modules/foo/${action}/mutation_types.js`
-          )
-        ).toBe(true);
-        expect(
-          fs.existsSync(
-            `${tmpobj.name}/store/modules/foo/${action}/mutations.js`
-          )
-        ).toBe(true);
-      });
-      expect(fs.existsSync(tmpobj.name + "/utils/fetch.js")).toBe(true);
-      tmpobj.removeCallback();
-    })
-    .catch(() => {});
+  tmpobj.removeCallback();
 });

From f678a12d34c036ca5a64ec70cb70fe7b9973c6c5 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 24 Nov 2022 15:39:44 +0100
Subject: [PATCH 64/84] Remove generic help text because it is in the doc

---
 src/generators/QuasarGenerator.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index de713876..4430cb73 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -89,17 +89,6 @@ export default class extends BaseGenerator {
     );
     console.log(
       chalk.green(`
-// Add to quasar.config.js
-// 1. in 'framework.config', can be customized later
-notify: {
-  position: 'top',
-  multiLine: true,
-  timeout: 0,
-},
-
-// 2. in 'framework.plugins
-  'Notify'
-
 // Import routes in src/router/routes.ts
 import ${titleLc}Routes from './${titleLc}';
 
@@ -109,12 +98,10 @@ const routes: RouteRecordRaw[] = [
 ];
 
 // import translations in src/i18n/en-US/index.ts
-import common from './common';
 import ${titleLc} from './${titleLc}';
 
 export default {
   // ...
-  ...common,
   ${titleLc},
 }
 `)

From 9222554203d0a21a1d20caff5a2a7b82406288ae Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 13 Dec 2022 11:46:59 +0100
Subject: [PATCH 65/84] Minor fixes

---
 src/generators/QuasarGenerator.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 4430cb73..9691f644 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -163,7 +163,7 @@ export default {
     const titleUcFirst =
       resource.title.charAt(0).toUpperCase() + resource.title.slice(1);
 
-    const { fields } = this.parseFields(resource);
+    const fields = this.parseFields(resource);
     const formFields = this.buildFields(fields);
     const hasRelations = fields.some(
       (field) => field.reference || field.embedded
@@ -379,10 +379,8 @@ export default {
         return list;
       }
 
-      const isReferences = Boolean(
-        field.reference && field.maxCardinality !== 1
-      );
-      const isEmbeddeds = Boolean(field.embedded && field.maxCardinality !== 1);
+      const isReferences = field.reference && field.maxCardinality !== 1;
+      const isEmbeddeds = field.embedded && field.maxCardinality !== 1;
 
       return {
         ...list,
@@ -396,8 +394,6 @@ export default {
       };
     }, {});
 
-    const fieldsArray = Object.values(fields);
-
-    return { fields: fieldsArray };
+    return Object.values(fields);
   }
 }

From 7b2ada311af999e9b7cca49d09a0fbb16c012828 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 13 Dec 2022 15:23:15 +0100
Subject: [PATCH 66/84] Update components name

---
 src/generators/QuasarGenerator.js             | 76 +++++++++----------
 src/generators/QuasarGenerator.test.js        | 10 +--
 ...CellComponent.vue => CommonActionCell.vue} |  2 +-
 ...rumbComponent.vue => CommonBreadcrumb.vue} |  0
 ...eComponent.vue => CommonConfirmDelete.vue} |  0
 ...lterComponent.vue => CommonDataFilter.vue} |  0
 ...erComponent.vue => CommonFormRepeater.vue} |  0
 ...LoadingComponent.vue => CommonLoading.vue} |  0
 ...ToolbarComponent.vue => CommonToolbar.vue} |  2 +-
 .../{CreateComponent.vue => FooCreate.vue}    | 10 +--
 .../{FilterComponent.vue => FooFilter.vue}    |  0
 .../foo/{FormComponent.vue => FooForm.vue}    |  4 +-
 .../foo/{ListComponent.vue => FooList.vue}    | 12 +--
 .../foo/{ShowComponent.vue => FooShow.vue}    |  6 +-
 .../{UpdateComponent.vue => FooUpdate.vue}    | 10 +--
 .../foo/{ListPage.vue => PageCreate.vue}      |  4 +-
 .../pages/foo/{ShowPage.vue => PageList.vue}  |  4 +-
 .../foo/{CreatePage.vue => PageShow.vue}      |  4 +-
 .../foo/{UpdatePage.vue => PageUpdate.vue}    |  4 +-
 templates/quasar/router/foo.ts                |  8 +-
 20 files changed, 78 insertions(+), 78 deletions(-)
 rename templates/quasar/components/common/{ActionCellComponent.vue => CommonActionCell.vue} (94%)
 rename templates/quasar/components/common/{BreadcrumbComponent.vue => CommonBreadcrumb.vue} (100%)
 rename templates/quasar/components/common/{ConfirmDeleteComponent.vue => CommonConfirmDelete.vue} (100%)
 rename templates/quasar/components/common/{DataFilterComponent.vue => CommonDataFilter.vue} (100%)
 rename templates/quasar/components/common/{FormRepeaterComponent.vue => CommonFormRepeater.vue} (100%)
 rename templates/quasar/components/common/{LoadingComponent.vue => CommonLoading.vue} (100%)
 rename templates/quasar/components/common/{ToolbarComponent.vue => CommonToolbar.vue} (95%)
 rename templates/quasar/components/foo/{CreateComponent.vue => FooCreate.vue} (74%)
 rename templates/quasar/components/foo/{FilterComponent.vue => FooFilter.vue} (100%)
 rename templates/quasar/components/foo/{FormComponent.vue => FooForm.vue} (94%)
 rename templates/quasar/components/foo/{ListComponent.vue => FooList.vue} (94%)
 rename templates/quasar/components/foo/{ShowComponent.vue => FooShow.vue} (95%)
 rename templates/quasar/components/foo/{UpdateComponent.vue => FooUpdate.vue} (88%)
 rename templates/quasar/pages/foo/{ListPage.vue => PageCreate.vue} (56%)
 rename templates/quasar/pages/foo/{ShowPage.vue => PageList.vue} (56%)
 rename templates/quasar/pages/foo/{CreatePage.vue => PageShow.vue} (55%)
 rename templates/quasar/pages/foo/{UpdatePage.vue => PageUpdate.vue} (55%)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 9691f644..d67f6ffa 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -14,22 +14,22 @@ export default class extends BaseGenerator {
     ]);
 
     this.registerTemplates("quasar/", [
-      // common components
-      "components/common/ActionCellComponent.vue",
-      "components/common/BreadcrumbComponent.vue",
-      "components/common/ConfirmDeleteComponent.vue",
-      "components/common/DataFilterComponent.vue",
-      "components/common/FormRepeaterComponent.vue",
-      "components/common/LoadingComponent.vue",
-      "components/common/ToolbarComponent.vue",
-
       // components
-      "components/foo/CreateComponent.vue",
-      "components/foo/FilterComponent.vue",
-      "components/foo/FormComponent.vue",
-      "components/foo/ListComponent.vue",
-      "components/foo/ShowComponent.vue",
-      "components/foo/UpdateComponent.vue",
+      "components/foo/FooCreate.vue",
+      "components/foo/FooFilter.vue",
+      "components/foo/FooForm.vue",
+      "components/foo/FooList.vue",
+      "components/foo/FooShow.vue",
+      "components/foo/FooUpdate.vue",
+
+      // common components
+      "components/common/CommonActionCell.vue",
+      "components/common/CommonBreadcrumb.vue",
+      "components/common/CommonConfirmDelete.vue",
+      "components/common/CommonDataFilter.vue",
+      "components/common/CommonFormRepeater.vue",
+      "components/common/CommonLoading.vue",
+      "components/common/CommonToolbar.vue",
 
       // composables
       "composables/breadcrumb.ts",
@@ -43,10 +43,10 @@ export default class extends BaseGenerator {
       "i18n/common.ts",
 
       // pages
-      "pages/foo/CreatePage.vue",
-      "pages/foo/ListPage.vue",
-      "pages/foo/ShowPage.vue",
-      "pages/foo/UpdatePage.vue",
+      "pages/foo/PageCreate.vue",
+      "pages/foo/PageList.vue",
+      "pages/foo/PageShow.vue",
+      "pages/foo/PageUpdate.vue",
 
       // router
       "router/foo.ts",
@@ -247,13 +247,13 @@ export default {
 
     [
       // common components
-      "components/common/ActionCellComponent.vue",
-      "components/common/BreadcrumbComponent.vue",
-      "components/common/ConfirmDeleteComponent.vue",
-      "components/common/DataFilterComponent.vue",
-      "components/common/FormRepeaterComponent.vue",
-      "components/common/LoadingComponent.vue",
-      "components/common/ToolbarComponent.vue",
+      "components/common/CommonActionCell.vue",
+      "components/common/CommonBreadcrumb.vue",
+      "components/common/CommonConfirmDelete.vue",
+      "components/common/CommonDataFilter.vue",
+      "components/common/CommonFormRepeater.vue",
+      "components/common/CommonLoading.vue",
+      "components/common/CommonToolbar.vue",
 
       // composables
       "composables/breadcrumb.ts",
@@ -280,18 +280,18 @@ export default {
 
     [
       // components
-      "components/%s/CreateComponent.vue",
-      "components/%s/FilterComponent.vue",
-      "components/%s/FormComponent.vue",
-      "components/%s/ListComponent.vue",
-      "components/%s/ShowComponent.vue",
-      "components/%s/UpdateComponent.vue",
+      "components/%s/%sCreate.vue",
+      "components/%s/%sFilter.vue",
+      "components/%s/%sForm.vue",
+      "components/%s/%sList.vue",
+      "components/%s/%sShow.vue",
+      "components/%s/%sUpdate.vue",
 
       // pages
-      "pages/%s/CreatePage.vue",
-      "pages/%s/ListPage.vue",
-      "pages/%s/ShowPage.vue",
-      "pages/%s/UpdatePage.vue",
+      "pages/%s/PageCreate.vue",
+      "pages/%s/PageList.vue",
+      "pages/%s/PageShow.vue",
+      "pages/%s/PageUpdate.vue",
 
       // routes
       "router/%s.ts",
@@ -307,12 +307,12 @@ export default {
       "types/%s.ts",
     ].forEach((pattern) => {
       if (
-        pattern === "components/%s/FilterComponent.vue" &&
+        pattern === "components/%s/%sFilter.vue" &&
         !context.parameters.length
       ) {
         return;
       }
-      this.createFileFromPattern(pattern, dir, [lc], context);
+      this.createFileFromPattern(pattern, dir, [lc, titleUcFirst], context);
     });
 
     // entrypoint
diff --git a/src/generators/QuasarGenerator.test.js b/src/generators/QuasarGenerator.test.js
index 0491eb49..3701dfe5 100644
--- a/src/generators/QuasarGenerator.test.js
+++ b/src/generators/QuasarGenerator.test.js
@@ -52,15 +52,15 @@ test("Generate a Quasar app", async () => {
     "Toolbar",
   ].forEach((name) => {
     expect(
-      fs.existsSync(`${tmpobj.name}/components/common/${name}Component.vue`)
+      fs.existsSync(`${tmpobj.name}/components/common/Common${name}.vue`)
     ).toBe(true);
   });
 
   // components
   ["Create", "Form", "List", "Show", "Update"].forEach((name) => {
-    expect(
-      fs.existsSync(`${tmpobj.name}/components/foo/${name}Component.vue`)
-    ).toBe(true);
+    expect(fs.existsSync(`${tmpobj.name}/components/foo/Foo${name}.vue`)).toBe(
+      true
+    );
   });
 
   // i18n
@@ -69,7 +69,7 @@ test("Generate a Quasar app", async () => {
 
   // pages
   ["Create", "List", "Show", "Update"].forEach((name) => {
-    expect(fs.existsSync(`${tmpobj.name}/pages/foo/${name}Page.vue`)).toBe(
+    expect(fs.existsSync(`${tmpobj.name}/pages/foo/Page${name}.vue`)).toBe(
       true
     );
   });
diff --git a/templates/quasar/components/common/ActionCellComponent.vue b/templates/quasar/components/common/CommonActionCell.vue
similarity index 94%
rename from templates/quasar/components/common/ActionCellComponent.vue
rename to templates/quasar/components/common/CommonActionCell.vue
index dbda8fe0..84672340 100644
--- a/templates/quasar/components/common/ActionCellComponent.vue
+++ b/templates/quasar/components/common/CommonActionCell.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import ConfirmDelete from 'src/components/common/ConfirmDeleteComponent.vue';
+import ConfirmDelete from 'src/components/common/CommonConfirmDelete.vue';
 import { ref, toRefs } from 'vue';
 
 const props = defineProps<{
diff --git a/templates/quasar/components/common/BreadcrumbComponent.vue b/templates/quasar/components/common/CommonBreadcrumb.vue
similarity index 100%
rename from templates/quasar/components/common/BreadcrumbComponent.vue
rename to templates/quasar/components/common/CommonBreadcrumb.vue
diff --git a/templates/quasar/components/common/ConfirmDeleteComponent.vue b/templates/quasar/components/common/CommonConfirmDelete.vue
similarity index 100%
rename from templates/quasar/components/common/ConfirmDeleteComponent.vue
rename to templates/quasar/components/common/CommonConfirmDelete.vue
diff --git a/templates/quasar/components/common/DataFilterComponent.vue b/templates/quasar/components/common/CommonDataFilter.vue
similarity index 100%
rename from templates/quasar/components/common/DataFilterComponent.vue
rename to templates/quasar/components/common/CommonDataFilter.vue
diff --git a/templates/quasar/components/common/FormRepeaterComponent.vue b/templates/quasar/components/common/CommonFormRepeater.vue
similarity index 100%
rename from templates/quasar/components/common/FormRepeaterComponent.vue
rename to templates/quasar/components/common/CommonFormRepeater.vue
diff --git a/templates/quasar/components/common/LoadingComponent.vue b/templates/quasar/components/common/CommonLoading.vue
similarity index 100%
rename from templates/quasar/components/common/LoadingComponent.vue
rename to templates/quasar/components/common/CommonLoading.vue
diff --git a/templates/quasar/components/common/ToolbarComponent.vue b/templates/quasar/components/common/CommonToolbar.vue
similarity index 95%
rename from templates/quasar/components/common/ToolbarComponent.vue
rename to templates/quasar/components/common/CommonToolbar.vue
index b46206c0..67871c0f 100644
--- a/templates/quasar/components/common/ToolbarComponent.vue
+++ b/templates/quasar/components/common/CommonToolbar.vue
@@ -53,7 +53,7 @@
 </template>
 
 <script lang="ts" setup>
-import ConfirmDelete from 'src/components/common/ConfirmDeleteComponent.vue';
+import ConfirmDelete from 'src/components/common/CommonConfirmDelete.vue';
 import { ref, toRefs } from 'vue';
 
 const props = defineProps<{
diff --git a/templates/quasar/components/foo/CreateComponent.vue b/templates/quasar/components/foo/FooCreate.vue
similarity index 74%
rename from templates/quasar/components/foo/CreateComponent.vue
rename to templates/quasar/components/foo/FooCreate.vue
index 1b3a42a4..186bf35e 100644
--- a/templates/quasar/components/foo/CreateComponent.vue
+++ b/templates/quasar/components/foo/FooCreate.vue
@@ -5,16 +5,16 @@
     </template>
   </Toolbar>
 
-  <{{titleUcFirst}}Form :errors="violations" @submit="submitForm" />
+  <Form :errors="violations" @submit="submitForm" />
 
   <Loading :showing="isLoading" />
 </template>
 
 <script lang="ts" setup>
-import Toolbar from 'src/components/common/ToolbarComponent.vue';
-import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
-import Loading from 'components/common/LoadingComponent.vue';
-import {{titleUcFirst}}Form from 'components/{{lc}}/FormComponent.vue';
+import Toolbar from 'src/components/common/CommonToolbar.vue';
+import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
+import Loading from 'components/common/CommonLoading.vue';
+import Form from 'components/{{lc}}/{{titleUcFirst}}Form.vue';
 import { useRouter } from 'vue-router';
 import { use{{titleUcFirst}}CreateStore } from 'stores/{{lc}}/create';
 import { storeToRefs } from 'pinia';
diff --git a/templates/quasar/components/foo/FilterComponent.vue b/templates/quasar/components/foo/FooFilter.vue
similarity index 100%
rename from templates/quasar/components/foo/FilterComponent.vue
rename to templates/quasar/components/foo/FooFilter.vue
diff --git a/templates/quasar/components/foo/FormComponent.vue b/templates/quasar/components/foo/FooForm.vue
similarity index 94%
rename from templates/quasar/components/foo/FormComponent.vue
rename to templates/quasar/components/foo/FooForm.vue
index 2e6d5a81..dfe0b5cb 100644
--- a/templates/quasar/components/foo/FormComponent.vue
+++ b/templates/quasar/components/foo/FooForm.vue
@@ -7,7 +7,7 @@
         :values="item.{{name}}"
         :label="$t('{{../lc}}.{{name}}')"
         class="col-12 col-md-8"
-        @update="(values) => (item.{{name}} = values)"
+        @update="(values: any) => (item.{{name}} = values)"
       />
       {{else}}
       <q-input
@@ -57,7 +57,7 @@ import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
 {{#if hasManyRelations}}
-import FormRepeater from 'src/components/common/FormRepeaterComponent.vue';
+import FormRepeater from 'src/components/common/CommonFormRepeater.vue';
 import { Item } from 'src/types/item';
 {{/if}}
 {{#if hasDateField}}
diff --git a/templates/quasar/components/foo/ListComponent.vue b/templates/quasar/components/foo/FooList.vue
similarity index 94%
rename from templates/quasar/components/foo/ListComponent.vue
rename to templates/quasar/components/foo/FooList.vue
index e11f363c..a296b203 100644
--- a/templates/quasar/components/foo/ListComponent.vue
+++ b/templates/quasar/components/foo/FooList.vue
@@ -15,7 +15,7 @@
   {{#if parameters.length}}
   <DataFilter @filter="onSendFilter" @reset="resetFilter">
     <template #filter>
-      <{{titleUcFirst}}Filter :values="filters" />
+      <Filter :values="filters" />
     </template>
   </DataFilter>
   {{/if}}
@@ -124,12 +124,12 @@
 
 <script lang="ts" setup>
 {{#if parameters.length }}
-import DataFilter from 'src/components/common/DataFilterComponent.vue';
-import {{titleUcFirst}}Filter from 'src/components/{{lc}}/FilterComponent.vue';
+import DataFilter from 'src/components/common/CommonDataFilter.vue';
+import Filter from 'src/components/{{lc}}/{{titleUcFirst}}Filter.vue';
 {{/if}}
-import Toolbar from 'src/components/common/ToolbarComponent.vue';
-import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
-import ActionCell from 'src/components/common/ActionCellComponent.vue';
+import Toolbar from 'src/components/common/CommonToolbar.vue';
+import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
+import ActionCell from 'src/components/common/CommonActionCell.vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 {{#if hasDateField}}
diff --git a/templates/quasar/components/foo/ShowComponent.vue b/templates/quasar/components/foo/FooShow.vue
similarity index 95%
rename from templates/quasar/components/foo/ShowComponent.vue
rename to templates/quasar/components/foo/FooShow.vue
index b72fad2b..75e58f1f 100644
--- a/templates/quasar/components/foo/ShowComponent.vue
+++ b/templates/quasar/components/foo/FooShow.vue
@@ -99,9 +99,9 @@
 </template>
 
 <script lang="ts" setup>
-import Toolbar from 'src/components/common/ToolbarComponent.vue';
-import Breadcrumb from 'src/components/common/BreadcrumbComponent.vue';
-import Loading from 'src/components/common/LoadingComponent.vue';
+import Toolbar from 'src/components/common/CommonToolbar.vue';
+import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
+import Loading from 'src/components/common/CommonLoading.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
 import { storeToRefs } from 'pinia';
diff --git a/templates/quasar/components/foo/UpdateComponent.vue b/templates/quasar/components/foo/FooUpdate.vue
similarity index 88%
rename from templates/quasar/components/foo/UpdateComponent.vue
rename to templates/quasar/components/foo/FooUpdate.vue
index ff6ff8f8..e946e3a8 100644
--- a/templates/quasar/components/foo/UpdateComponent.vue
+++ b/templates/quasar/components/foo/FooUpdate.vue
@@ -6,7 +6,7 @@
       </template>
     </Toolbar>
 
-    <{{titleUcFirst}}Form
+    <Form
       v-if="item"
       :values="item"
       :errors="violations"
@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts" setup>
-import Toolbar from 'components/common/ToolbarComponent.vue';
-import Breadcrumb from 'components/common/BreadcrumbComponent.vue';
-import Loading from 'components/common/LoadingComponent.vue';
-import {{titleUcFirst}}Form from 'components/{{lc}}/FormComponent.vue';
+import Toolbar from 'components/common/CommonToolbar.vue';
+import Breadcrumb from 'components/common/CommonBreadcrumb.vue';
+import Loading from 'components/common/CommonLoading.vue';
+import Form from 'components/{{lc}}/{{titleUcFirst}}Form.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { use{{titleUcFirst}}UpdateStore } from 'src/stores/{{lc}}/update';
 import { storeToRefs } from 'pinia';
diff --git a/templates/quasar/pages/foo/ListPage.vue b/templates/quasar/pages/foo/PageCreate.vue
similarity index 56%
rename from templates/quasar/pages/foo/ListPage.vue
rename to templates/quasar/pages/foo/PageCreate.vue
index b8d4c87a..373f99ec 100644
--- a/templates/quasar/pages/foo/ListPage.vue
+++ b/templates/quasar/pages/foo/PageCreate.vue
@@ -1,11 +1,11 @@
 <template>
   <Suspense>
-    <{{titleUcFirst}}List />
+    <Create />
 
     <template #fallback>Loading...</template>
   </Suspense>
 </template>
 
 <script setup lang="ts">
-import {{titleUcFirst}}List from 'components/{{lc}}/ListComponent.vue';
+import Create from 'components/{{lc}}/{{titleUcFirst}}Create.vue';
 </script>
diff --git a/templates/quasar/pages/foo/ShowPage.vue b/templates/quasar/pages/foo/PageList.vue
similarity index 56%
rename from templates/quasar/pages/foo/ShowPage.vue
rename to templates/quasar/pages/foo/PageList.vue
index dcf12270..346fe490 100644
--- a/templates/quasar/pages/foo/ShowPage.vue
+++ b/templates/quasar/pages/foo/PageList.vue
@@ -1,11 +1,11 @@
 <template>
   <Suspense>
-    <{{titleUcFirst}}Show />
+    <List />
 
     <template #fallback>Loading...</template>
   </Suspense>
 </template>
 
 <script setup lang="ts">
-import {{titleUcFirst}}Show from 'components/{{lc}}/ShowComponent.vue';
+import List from 'components/{{lc}}/{{titleUcFirst}}List.vue';
 </script>
diff --git a/templates/quasar/pages/foo/CreatePage.vue b/templates/quasar/pages/foo/PageShow.vue
similarity index 55%
rename from templates/quasar/pages/foo/CreatePage.vue
rename to templates/quasar/pages/foo/PageShow.vue
index e7f7ab94..b1346509 100644
--- a/templates/quasar/pages/foo/CreatePage.vue
+++ b/templates/quasar/pages/foo/PageShow.vue
@@ -1,11 +1,11 @@
 <template>
   <Suspense>
-    <{{titleUcFirst}}Create />
+    <Show />
 
     <template #fallback>Loading...</template>
   </Suspense>
 </template>
 
 <script setup lang="ts">
-import {{titleUcFirst}}Create from 'components/{{lc}}/CreateComponent.vue';
+import Show from 'components/{{lc}}/{{titleUcFirst}}Show.vue';
 </script>
diff --git a/templates/quasar/pages/foo/UpdatePage.vue b/templates/quasar/pages/foo/PageUpdate.vue
similarity index 55%
rename from templates/quasar/pages/foo/UpdatePage.vue
rename to templates/quasar/pages/foo/PageUpdate.vue
index 98b3ce69..0ab67aa0 100644
--- a/templates/quasar/pages/foo/UpdatePage.vue
+++ b/templates/quasar/pages/foo/PageUpdate.vue
@@ -1,11 +1,11 @@
 <template>
   <Suspense>
-    <{{titleUcFirst}}Update />
+    <Update />
 
     <template #fallback>Loading...</template>
   </Suspense>
 </template>
 
 <script setup lang="ts">
-import {{titleUcFirst}}Update from 'components/{{lc}}/UpdateComponent.vue';
+import Update from 'components/{{lc}}/{{titleUcFirst}}Update.vue';
 </script>
diff --git a/templates/quasar/router/foo.ts b/templates/quasar/router/foo.ts
index 39dee01b..a7b1b39f 100644
--- a/templates/quasar/router/foo.ts
+++ b/templates/quasar/router/foo.ts
@@ -21,7 +21,7 @@ export default [
   {
     name: list.label,
     path: '/{{name}}/',
-    component: () => import('pages/{{lc}}/ListPage.vue'),
+    component: () => import('pages/{{lc}}/PageList.vue'),
     meta: {
       breadcrumb: [list],
     },
@@ -29,7 +29,7 @@ export default [
   {
     name: create.label,
     path: '/{{name}}/create',
-    component: () => import('pages/{{lc}}/CreatePage.vue'),
+    component: () => import('pages/{{lc}}/PageCreate.vue'),
     meta: {
       breadcrumb: [{ ...list, to: { name: list.label } }, create],
     },
@@ -37,7 +37,7 @@ export default [
   {
     name: update.label,
     path: '/{{name}}/edit/:id',
-    component: () => import('pages/{{lc}}/UpdatePage.vue'),
+    component: () => import('pages/{{lc}}/PageUpdate.vue'),
     meta: {
       breadcrumb: [{ ...list, to: { name: list.label } }, update],
     },
@@ -45,7 +45,7 @@ export default [
   {
     name: show.label,
     path: '/{{name}}/show/:id',
-    component: () => import('pages/{{lc}}/ShowPage.vue'),
+    component: () => import('pages/{{lc}}/PageShow.vue'),
     meta: {
       breadcrumb: [{ ...list, to: { name: list.label } }, show],
     },

From ee5980c2bd0152829044d7d96255295591cf6752 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 13 Dec 2022 16:52:12 +0100
Subject: [PATCH 67/84] Replace then by async/await

---
 templates/quasar/stores/foo/create.ts | 37 +++++------
 templates/quasar/stores/foo/delete.ts | 31 ++++++----
 templates/quasar/stores/foo/list.ts   | 46 +++++++-------
 templates/quasar/stores/foo/show.ts   | 39 ++++++------
 templates/quasar/stores/foo/update.ts | 88 ++++++++++++++-------------
 templates/quasar/utils/fetch.ts       | 31 +++++-----
 6 files changed, 141 insertions(+), 131 deletions(-)

diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index b1ed6410..6136b9f9 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -19,30 +19,33 @@ export const use{{titleUcFirst}}CreateStore = defineStore('{{lc}}Create', {
   }),
 
   actions: {
-    create(values: {{titleUcFirst}}) {
+    async create(payload: {{titleUcFirst}}) {
       this.setError(undefined);
       this.setViolations(undefined);
       this.toggleLoading();
 
-      return fetch('{{name}}', { method: 'POST', body: JSON.stringify(values) })
-        .then((response: Response) => {
-          this.toggleLoading();
+      try {
+        const response = await fetch('{{name}}', {
+          method: 'POST',
+          body: JSON.stringify(payload),
+        });
+        const data: {{titleUcFirst}} = await response.json();
 
-          return response.json();
-        })
-        .then((data) => {
-          this.setCreated(data);
-        })
-        .catch((e: Error | SubmissionError) => {
-          this.toggleLoading();
+        this.toggleLoading();
+        this.setCreated(data);
+      } catch (error) {
+        this.toggleLoading();
 
-          if (e instanceof SubmissionError) {
-            this.setViolations(e.errors);
-            return;
-          }
+        if (error instanceof SubmissionError) {
+          this.setViolations(error.errors);
+          this.setError(error.errors._error);
+          return;
+        }
 
-          this.setError(e.message);
-        });
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     setCreated(created: {{titleUcFirst}}) {
diff --git a/templates/quasar/stores/foo/delete.ts b/templates/quasar/stores/foo/delete.ts
index 294c88fc..15bc0265 100644
--- a/templates/quasar/stores/foo/delete.ts
+++ b/templates/quasar/stores/foo/delete.ts
@@ -18,20 +18,27 @@ export const use{{titleUcFirst}}DeleteStore = defineStore('{{lc}}Delete', {
   }),
 
   actions: {
-    deleteItem(item: {{titleUcFirst}}) {
+    async deleteItem(item: {{titleUcFirst}}) {
       this.toggleLoading();
 
-      return fetch(item['@id'] ?? '', { method: 'DELETE' })
-        .then(() => {
-          this.setError('');
-          this.toggleLoading();
-          this.setDeleted(item);
-          this.setMercureDeleted(undefined);
-        })
-        .catch((e: Error) => {
-          this.toggleLoading();
-          this.setError(e.message);
-        });
+      if (!item?.['@id']) {
+        this.setError('No {{lc}} found. Please reload');
+        return;
+      }
+
+      try {
+        await fetch(item['@id'], { method: 'DELETE' });
+
+        this.toggleLoading();
+        this.setDeleted(item);
+        this.setMercureDeleted(undefined);
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     toggleLoading() {
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index f4d77fcd..0d4695a6 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -26,32 +26,30 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
   }),
 
   actions: {
-    getItems(params: ListParams) {
+    async getItems(params: ListParams) {
       this.toggleLoading();
 
-      return fetch('{{name}}', { params })
-        .then((response: Response) =>
-          response.json().then((data: PagedCollection<{{titleUcFirst}}>) => ({
-            data,
-            hubUrl: extractHubURL(response),
-          }))
-        )
-        .then(
-          ({ data, hubUrl }: { data: PagedCollection<{{titleUcFirst}}>; hubUrl?: URL }) => {
-            this.toggleLoading();
-            this.setItems(data['{{hydraPrefix}}member']);
-            this.setTotalItems(data['{{hydraPrefix}}totalItems'] ?? 0);
-            this.setView(data['{{hydraPrefix}}view']);
-
-            if (hubUrl) {
-              this.setHubUrl(hubUrl);
-            }
-          }
-        )
-        .catch((e: Error) => {
-          this.toggleLoading();
-          this.setError(e.message);
-        });
+      try {
+        const response = await fetch('{{name}}', { params });
+        const data: PagedCollection<{{titleUcFirst}}> = await response.json();
+        const hubUrl = extractHubURL(response);
+
+        this.toggleLoading();
+
+        this.setItems(data['{{hydraPrefix}}member']);
+        this.setTotalItems(data['{{hydraPrefix}}totalItems'] ?? 0);
+        this.setView(data['{{hydraPrefix}}view']);
+
+        if (hubUrl) {
+          this.setHubUrl(hubUrl);
+        }
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     toggleLoading() {
diff --git a/templates/quasar/stores/foo/show.ts b/templates/quasar/stores/foo/show.ts
index 4d3aa762..5e6f17f7 100644
--- a/templates/quasar/stores/foo/show.ts
+++ b/templates/quasar/stores/foo/show.ts
@@ -19,28 +19,27 @@ export const use{{titleUcFirst}}ShowStore = defineStore('{{lc}}Show', {
   }),
 
   actions: {
-    retrieve(id: string) {
+    async retrieve(id: string) {
       this.toggleLoading();
 
-      return fetch(id)
-        .then((response: Response) =>
-          response.json().then((data: {{titleUcFirst}}) => ({
-            data,
-            hubUrl: extractHubURL(response),
-          }))
-        )
-        .then(({ data, hubUrl }: { data: {{titleUcFirst}}; hubUrl?: URL }) => {
-          this.toggleLoading();
-          this.setRetrieved(data);
-
-          if (hubUrl) {
-            this.setHubUrl(hubUrl);
-          }
-        })
-        .catch((e: Error) => {
-          this.toggleLoading();
-          this.setError(e.message);
-        });
+      try {
+        const response = await fetch(id);
+        const data: {{titleUcFirst}} = await response.json();
+        const hubUrl = extractHubURL(response);
+
+        this.toggleLoading();
+        this.setRetrieved(data);
+
+        if (hubUrl) {
+          this.setHubUrl(hubUrl);
+        }
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     toggleLoading() {
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
index bfc7004f..062746fd 100644
--- a/templates/quasar/stores/foo/update.ts
+++ b/templates/quasar/stores/foo/update.ts
@@ -24,32 +24,30 @@ export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
   }),
 
   actions: {
-    retrieve(id: string) {
+    async retrieve(id: string) {
       this.toggleLoading();
 
-      return fetch(id)
-        .then((response: Response) =>
-          response.json().then((data: {{titleUcFirst}}) => ({
-            data,
-            hubUrl: extractHubURL(response),
-          }))
-        )
-        .then(({ data, hubUrl }: { data: {{titleUcFirst}}; hubUrl?: URL }) => {
-          this.setError('');
-          this.toggleLoading();
-          this.setRetrieved(data);
-
-          if (hubUrl) {
-            this.setHubUrl(hubUrl);
-          }
-        })
-        .catch((e: Error) => {
-          this.toggleLoading();
-          this.setError(e.message);
-        });
+      try {
+        const response = await fetch(id);
+        const data: {{titleUcFirst}} = await response.json();
+        const hubUrl = extractHubURL(response);
+
+        this.toggleLoading();
+        this.setRetrieved(data);
+
+        if (hubUrl) {
+          this.setHubUrl(hubUrl);
+        }
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
-    update(values: {{titleUcFirst}}) {
+    async update(payload: {{titleUcFirst}}) {
       this.setError(undefined);
       this.toggleLoading();
 
@@ -58,28 +56,32 @@ export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
         return;
       }
 
-      return fetch(this.retrieved['@id'] ?? values['@id'] ?? '', {
-        method: 'PUT',
-        headers: new Headers({ 'Content-Type': 'application/ld+json' }),
-        body: JSON.stringify(values),
-      })
-        .then((response: Response) => response.json())
-        .then((data: {{titleUcFirst}}) => {
-          this.toggleLoading();
-          this.resetErrors();
-          this.setUpdated(data);
-        })
-        .catch((e: Error) => {
-          this.toggleLoading();
-
-          if (e instanceof SubmissionError) {
-            this.setViolations(e.errors);
-            this.setError(e.errors._error);
-            return;
+      try {
+        const response = await fetch(
+          this.retrieved['@id'] ?? payload['@id'] ?? '',
+          {
+            method: 'PUT',
+            headers: new Headers({ 'Content-Type': 'application/ld+json' }),
+            body: JSON.stringify(payload),
           }
-
-          this.setError(e.message);
-        });
+        );
+        const data: {{titleUcFirst}} = await response.json();
+
+        this.toggleLoading();
+        this.setUpdated(data);
+      } catch (error) {
+        this.toggleLoading();
+
+        if (error instanceof SubmissionError) {
+          this.setViolations(error.errors);
+          this.setError(error.errors._error);
+          return;
+        }
+
+        if (error instanceof Error) {
+          this.setError(error.message);
+        }
+      }
     },
 
     setRetrieved(retrieved: {{titleUcFirst}}) {
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/fetch.ts
index c5d71c4b..48de7463 100644
--- a/templates/quasar/utils/fetch.ts
+++ b/templates/quasar/utils/fetch.ts
@@ -4,7 +4,7 @@ import { ENTRYPOINT } from 'src/config/entrypoint';
 
 const MIME_TYPE = 'application/ld+json';
 
-export default function (id: string, options: any = {}) {
+export default async function (id: string, options: any = {}) {
   if (typeof options.headers === 'undefined') {
     Object.assign(options, { headers: new Headers() });
   }
@@ -32,21 +32,22 @@ export default function (id: string, options: any = {}) {
     // credentials: 'include', // when credentials needed
   });
 
-  return fetch(new URL(id, ENTRYPOINT), options).then((response: Response) => {
-    if (response.ok) return response;
+  const response = await fetch(new URL(id, ENTRYPOINT), options);
 
-    return response.json().then((json) => {
-      const error = json['{{hydraPrefix}}description'] ?? response.statusText;
-      if (!json.violations) throw Error(error);
+  if (!response.ok) {
+    const data = await response.json();
+    const error = data['{{hydraPrefix}}description'] || response.statusText;
+    if (!data.violations) throw Error(error);
 
-      const errors: SubmissionErrors = { _error: error };
-      json.violations.map(
-        (violation: { propertyPath: string; message: string }) => {
-          errors[violation.propertyPath] = violation.message;
-        }
-      );
+    const errors: SubmissionErrors = { _error: error };
+    data.violations.forEach(
+      (violation: { propertyPath: string; message: string }) => {
+        errors[violation.propertyPath] = violation.message;
+      }
+    );
 
-      throw new SubmissionError(errors);
-    });
-  });
+    throw new SubmissionError(errors);
+  }
+
+  return response;
 }

From a1ae26a5c3b431e6136f2685fe21c7f83fe192f4 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 14 Dec 2022 10:59:26 +0100
Subject: [PATCH 68/84] Migrate some files to common

---
 src/generators/QuasarGenerator.js           | 22 +++++++++++++--------
 templates/quasar/components/foo/FooForm.vue |  2 +-
 templates/quasar/stores/foo/create.ts       |  3 ++-
 templates/quasar/stores/foo/update.ts       |  3 ++-
 templates/quasar/types/collection.ts        | 11 -----------
 templates/quasar/types/error.ts             | 18 -----------------
 templates/quasar/types/foo.ts               |  7 -------
 templates/quasar/types/item.ts              |  3 ---
 templates/quasar/types/view.ts              |  7 -------
 templates/quasar/utils/fetch.ts             |  5 +++--
 10 files changed, 22 insertions(+), 59 deletions(-)
 delete mode 100644 templates/quasar/types/collection.ts
 delete mode 100644 templates/quasar/types/error.ts
 delete mode 100644 templates/quasar/types/foo.ts
 delete mode 100644 templates/quasar/types/item.ts
 delete mode 100644 templates/quasar/types/view.ts

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index d67f6ffa..9e44db05 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -9,7 +9,16 @@ export default class extends BaseGenerator {
     super(params);
 
     this.registerTemplates("common/", [
+      // types
+      "types/collection.ts",
+      "types/error.ts",
+      "types/foo.ts",
+      "types/item.ts",
+      "types/view.ts",
+
       // utils
+      "utils/config.ts",
+      "utils/error.ts",
       "utils/mercure.ts",
     ]);
 
@@ -60,12 +69,7 @@ export default class extends BaseGenerator {
 
       // types
       "types/breadcrumb.ts",
-      "types/collection.ts",
-      "types/error.ts",
-      "types/foo.ts",
-      "types/item.ts",
       "types/list.ts",
-      "types/view.ts",
 
       // utils
       "utils/date.ts",
@@ -233,7 +237,6 @@ export default {
       `${dir}/composables`,
       `${dir}/i18n`,
       `${dir}/i18n/en-US`,
-      `${dir}/config`,
       `${dir}/router`,
       `${dir}/types`,
       `${dir}/utils`,
@@ -272,6 +275,7 @@ export default {
 
       // utils
       "utils/date.ts",
+      "utils/error.ts",
       "utils/fetch.ts",
       "utils/mercure.ts",
     ].forEach((common) =>
@@ -315,8 +319,10 @@ export default {
       this.createFileFromPattern(pattern, dir, [lc, titleUcFirst], context);
     });
 
-    // entrypoint
-    this.createEntrypoint(api.entrypoint, `${dir}/config/entrypoint.ts`);
+    // config
+    this.createConfigFile(`${dir}/utils/config.ts`, {
+      entrypoint: api.entrypoint,
+    });
 
     this.createFile(
       "i18n/common.ts",
diff --git a/templates/quasar/components/foo/FooForm.vue b/templates/quasar/components/foo/FooForm.vue
index dfe0b5cb..fd691747 100644
--- a/templates/quasar/components/foo/FooForm.vue
+++ b/templates/quasar/components/foo/FooForm.vue
@@ -54,7 +54,7 @@
 
 <script lang="ts" setup>
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { SubmissionErrors } from 'src/types/error';
+import type { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
 {{#if hasManyRelations}}
 import FormRepeater from 'src/components/common/CommonFormRepeater.vue';
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index 6136b9f9..328650d6 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { SubmissionError, type SubmissionErrors } from 'src/types/error';
+import type { SubmissionErrors } from 'src/types/error';
+import { SubmissionError } from 'src/utils/error';
 import fetch from 'src/utils/fetch';
 
 interface State {
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
index 062746fd..f2dfafae 100644
--- a/templates/quasar/stores/foo/update.ts
+++ b/templates/quasar/stores/foo/update.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { SubmissionError, SubmissionErrors } from 'src/types/error';
+import type { SubmissionErrors } from 'src/types/error';
+import { SubmissionError } from 'src/utils/error';
 import fetch from 'src/utils/fetch';
 import { extractHubURL } from 'src/utils/mercure';
 
diff --git a/templates/quasar/types/collection.ts b/templates/quasar/types/collection.ts
deleted file mode 100644
index f710e6fd..00000000
--- a/templates/quasar/types/collection.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { View } from './view';
-
-export interface PagedCollection<T> {
-  '@context'?: string;
-  '@id'?: string;
-  '@type'?: string;
-  '{{hydraPrefix}}member': T[];
-  '{{hydraPrefix}}search'?: object;
-  '{{hydraPrefix}}totalItems'?: number;
-  '{{hydraPrefix}}view': View;
-}
diff --git a/templates/quasar/types/error.ts b/templates/quasar/types/error.ts
deleted file mode 100644
index b82407dd..00000000
--- a/templates/quasar/types/error.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export type TError = SubmissionError | Error;
-
-export interface SubmissionErrors {
-  [key: string]: string;
-}
-
-export class SubmissionError extends Error {
-  private readonly _errors: SubmissionErrors;
-
-  constructor(errors: SubmissionErrors) {
-    super('Submit Validation Failed');
-    this._errors = errors;
-  }
-
-  public get errors(): SubmissionErrors {
-    return this._errors;
-  }
-}
diff --git a/templates/quasar/types/foo.ts b/templates/quasar/types/foo.ts
deleted file mode 100644
index bbcda1a8..00000000
--- a/templates/quasar/types/foo.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { Item } from "./item";
-
-export interface {{titleUcFirst}} extends Item {
-{{#each fields}}
- {{#if readonly}}readonly{{/if}} {{name}}?: {{#if (compare type "==" "dateTime")}}string{{else if (compare type "==" "integer")}}number{{else if isRelations}}any{{else}}{{type}}{{/if}};
-{{/each}}
-}
diff --git a/templates/quasar/types/item.ts b/templates/quasar/types/item.ts
deleted file mode 100644
index 766cc0f1..00000000
--- a/templates/quasar/types/item.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface Item {
-  '@id'?: string;
-}
diff --git a/templates/quasar/types/view.ts b/templates/quasar/types/view.ts
deleted file mode 100644
index 19cd75d1..00000000
--- a/templates/quasar/types/view.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface View {
-  '@id': string;
-  '{{hydraPrefix}}first': string;
-  '{{hydraPrefix}}last': string;
-  '{{hydraPrefix}}next': string;
-  '{{hydraPrefix}}previous': string;
-}
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/fetch.ts
index 48de7463..e121206d 100644
--- a/templates/quasar/utils/fetch.ts
+++ b/templates/quasar/utils/fetch.ts
@@ -1,6 +1,7 @@
-import { SubmissionError, SubmissionErrors } from 'src/types/error';
+import type { SubmissionErrors } from 'src/types/error';
+import { SubmissionError } from 'src/utils/error';
 import qs from 'qs';
-import { ENTRYPOINT } from 'src/config/entrypoint';
+import { ENTRYPOINT } from 'src/utils/config';
 
 const MIME_TYPE = 'application/ld+json';
 

From 2463ebde7e0b25216c39ae97d4d0b5c61d26458b Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 14 Dec 2022 11:06:36 +0100
Subject: [PATCH 69/84] Fix type error

---
 templates/quasar/components/common/CommonFormRepeater.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/quasar/components/common/CommonFormRepeater.vue b/templates/quasar/components/common/CommonFormRepeater.vue
index 1fa3cffb..48dd213f 100644
--- a/templates/quasar/components/common/CommonFormRepeater.vue
+++ b/templates/quasar/components/common/CommonFormRepeater.vue
@@ -15,7 +15,7 @@
         :key="index"
         filled
         class="q-mb-sm"
-        @update:model-value="(value: string) => updateField(index, value)"
+        @update:model-value="(value) => updateField(index, value as string)"
       >
         <template #append>
           <q-icon

From c90f9f2a216c1aecd8156736d4e8aa2e758b5f31 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 15 Dec 2022 15:22:42 +0100
Subject: [PATCH 70/84] Fix pagination

---
 templates/quasar/components/foo/FooList.vue | 110 +++++++++++++++-----
 templates/quasar/stores/foo/list.ts         |   5 +-
 2 files changed, 87 insertions(+), 28 deletions(-)

diff --git a/templates/quasar/components/foo/FooList.vue b/templates/quasar/components/foo/FooList.vue
index a296b203..ae0bd47a 100644
--- a/templates/quasar/components/foo/FooList.vue
+++ b/templates/quasar/components/foo/FooList.vue
@@ -21,9 +21,10 @@
   {{/if}}
 
   <q-table
-    v-model:pagination="pagination"
+    :pagination="pagination"
     :rows="items"
     :columns="columns"
+    :rows-per-page-options="[30]"
     :loading="isLoading"
     :no-data-label="$t('unavail')"
     :no-results-label="$t('noresults')"
@@ -42,6 +43,7 @@
         @delete="deleteItem(row)"
       />
     </template>
+
     {{#each fields}}
     {{#if isReferences}}
     <template #body-cell-{{reference.name}}="{ value }">
@@ -119,6 +121,57 @@
     </template>
     {{/if}}
     {{/each}}
+
+    <template #pagination="{ pagesNumber }">
+      <template v-if="view">
+        <q-btn
+          v-if="pagesNumber > 2"
+          :to="view['hydra:first'] ? view['hydra:first'] : { name: 'BookList' }"
+          :disable="!view['hydra:previous']"
+          icon="first_page"
+          color="grey-8"
+          round
+          dense
+          flat
+        />
+
+        <q-btn
+          :to="
+            !view['hydra:previous'] ||
+            view['hydra:previous'] === view['hydra:first']
+              ? { name: 'BookList' }
+              : view['hydra:previous']
+          "
+          :disable="!view['hydra:previous']"
+          icon="chevron_left"
+          color="grey-8"
+          round
+          dense
+          flat
+        />
+
+        <q-btn
+          :to="view['hydra:next'] ? view['hydra:next'] : '#'"
+          :disable="!view['hydra:next']"
+          icon="chevron_right"
+          color="grey-8"
+          round
+          dense
+          flat
+        />
+
+        <q-btn
+          v-if="pagesNumber > 2"
+          :to="view['hydra:last'] ? view['hydra:last'] : '#'"
+          :disable="!view['hydra:next']"
+          icon="last_page"
+          color="grey-8"
+          round
+          dense
+          flat
+        />
+      </template>
+    </template>
   </q-table>
 </template>
 
@@ -130,7 +183,7 @@ import Filter from 'src/components/{{lc}}/{{titleUcFirst}}Filter.vue';
 import Toolbar from 'src/components/common/CommonToolbar.vue';
 import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
 import ActionCell from 'src/components/common/CommonActionCell.vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 {{#if hasDateField}}
 import { formatDateTime } from 'src/utils/date';
@@ -146,28 +199,26 @@ import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { Pagination{{#if parameters.length}}, Filters{{/if}} } from 'src/types/list';
 
 const { t } = useI18n();
+const route = useRoute();
 const router = useRouter();
 const breadcrumb = useBreadcrumb();
 
 const {{lc}}ListStore = use{{titleUcFirst}}ListStore();
-const { items, totalItems, error, isLoading } = storeToRefs({{lc}}ListStore);
+const { items, totalItems, view, error, isLoading } = storeToRefs({{lc}}ListStore);
 
 const {{lc}}DeleteStore = use{{titleUcFirst}}DeleteStore();
 const { deleted, mercureDeleted } = storeToRefs({{lc}}DeleteStore);
 
-async function sendRequest(params = {}) {
-  await {{lc}}ListStore.getItems(params);
-}
-
-useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
-
-const nextPage = ref(1);
+const page = ref('1');
+{{#if parameters.length}}
+const filters: Ref<Filters> = ref({});
+{{/if}}
 const pagination: Pagination = {
   sortBy: undefined,
   descending: false,
-  page: 1, // page to be displayed
-  rowsPerPage: 3, // maximum displayed rows
-  rowsNumber: 10, // max number of rows
+  page: 1,
+  rowsPerPage: 3,
+  rowsNumber: 1,
 };
 const columns = [
   { name: 'actions', label: t('actions'), field: '' },
@@ -189,22 +240,29 @@ const columns = [
   {{/each }}
 ];
 
-await sendRequest({ pagination });
+watch(
+  () => route.query.page,
+  (newPage) => {
+    page.value = newPage as string;
+    sendRequest();
+  },
+  { immediate: true }
+);
 
-watch(items, () => {
-  pagination.page = nextPage.value;
-  pagination.rowsNumber = totalItems.value;
-  nextPage.value = 1;
-});
+async function sendRequest() {
+  await {{lc}}ListStore.getItems(page.value, { {{#if parameters.length}}filters: filters.value{{/if}} });
+}
 
-{{#if parameters.length}}
-const filters: Ref<Filters> = ref({});
+useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
+
+await sendRequest();
+
+pagination.rowsPerPage = items.value.length;
+pagination.rowsNumber = totalItems.value;
 
+{{#if parameters.length}}
 function onSendFilter() {
-  sendRequest({
-    filters: filters.value,
-    pagination,
-  });
+  sendRequest();
 }
 
 function resetFilter() {
@@ -233,7 +291,7 @@ function gotToEditPage(item: {{titleUcFirst}}) {
 async function deleteItem(item: {{titleUcFirst}}) {
   await {{lc}}DeleteStore.deleteItem(item);
 
-  sendRequest({ pagination });
+  sendRequest();
 }
 
 useWatchErrors([error]);
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index 0d4695a6..d3c290c2 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -26,11 +26,12 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
   }),
 
   actions: {
-    async getItems(params: ListParams) {
+    async getItems(page: string, params: ListParams) {
       this.toggleLoading();
 
       try {
-        const response = await fetch('{{name}}', { params });
+        const path = page ? `{{name}}?page=${page}` : '{{name}}';
+        const response = await fetch(path, { params });
         const data: PagedCollection<{{titleUcFirst}}> = await response.json();
         const hubUrl = extractHubURL(response);
 

From 538a275bb8d456741602bd57615ce41a3b86ff38 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Thu, 15 Dec 2022 15:24:54 +0100
Subject: [PATCH 71/84] Fix test

---
 src/generators/QuasarGenerator.test.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/generators/QuasarGenerator.test.js b/src/generators/QuasarGenerator.test.js
index 3701dfe5..365610b8 100644
--- a/src/generators/QuasarGenerator.test.js
+++ b/src/generators/QuasarGenerator.test.js
@@ -90,11 +90,10 @@ test("Generate a Quasar app", async () => {
   );
 
   // utils
+  expect(fs.existsSync(`${tmpobj.name}/utils/config.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/error.ts`)).toBe(true);
   expect(fs.existsSync(`${tmpobj.name}/utils/date.ts`)).toBe(true);
   expect(fs.existsSync(`${tmpobj.name}/utils/fetch.ts`)).toBe(true);
 
-  // config
-  expect(fs.existsSync(`${tmpobj.name}/config/entrypoint.ts`)).toBe(true);
-
   tmpobj.removeCallback();
 });

From 0acb44d8178830cb41d72d8eaecfa2a311a344ba Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 28 Dec 2022 09:29:55 +0100
Subject: [PATCH 72/84] Rename create & book functions

---
 templates/quasar/components/foo/FooCreate.vue | 4 ++--
 templates/quasar/components/foo/FooUpdate.vue | 9 ++-------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/templates/quasar/components/foo/FooCreate.vue b/templates/quasar/components/foo/FooCreate.vue
index 186bf35e..d1f0a50a 100644
--- a/templates/quasar/components/foo/FooCreate.vue
+++ b/templates/quasar/components/foo/FooCreate.vue
@@ -5,7 +5,7 @@
     </template>
   </Toolbar>
 
-  <Form :errors="violations" @submit="submitForm" />
+  <Form :errors="violations" @submit="create" />
 
   <Loading :showing="isLoading" />
 </template>
@@ -28,7 +28,7 @@ const breadcrumb = useBreadcrumb();
 const {{lc}}CreateStore = use{{titleUcFirst}}CreateStore();
 const { created, isLoading, violations, error } = storeToRefs({{lc}}CreateStore);
 
-async function submitForm(item: {{titleUcFirst}}) {
+async function create(item: {{titleUcFirst}}) {
   await {{lc}}CreateStore.create(item);
 
   if (!created?.value) {
diff --git a/templates/quasar/components/foo/FooUpdate.vue b/templates/quasar/components/foo/FooUpdate.vue
index e946e3a8..1b868506 100644
--- a/templates/quasar/components/foo/FooUpdate.vue
+++ b/templates/quasar/components/foo/FooUpdate.vue
@@ -6,12 +6,7 @@
       </template>
     </Toolbar>
 
-    <Form
-      v-if="item"
-      :values="item"
-      :errors="violations"
-      @submit="submitForm"
-    />
+    <Form v-if="item" :values="item" :errors="violations" @submit="update" />
 
     <Loading :showing="isLoading || deleteLoading" />
   </div>
@@ -72,7 +67,7 @@ async function deleteItem() {
   router.push({ name: '{{titleUcFirst}}List' });
 }
 
-async function submitForm(item: {{titleUcFirst}}) {
+async function update(item: {{titleUcFirst}}) {
   await {{lc}}UpdateStore.update(item);
 
   if (!updated?.value) {

From 1a32c9e8f12be9575ba458df2b41a6d744a9753c Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 28 Dec 2022 09:39:07 +0100
Subject: [PATCH 73/84] Rename fetch to api

---
 src/generators/QuasarGenerator.js           | 4 ++--
 src/generators/QuasarGenerator.test.js      | 4 ++--
 templates/quasar/stores/foo/create.ts       | 4 ++--
 templates/quasar/stores/foo/delete.ts       | 4 ++--
 templates/quasar/stores/foo/list.ts         | 4 ++--
 templates/quasar/stores/foo/show.ts         | 4 ++--
 templates/quasar/stores/foo/update.ts       | 6 +++---
 templates/quasar/utils/{fetch.ts => api.ts} | 0
 8 files changed, 15 insertions(+), 15 deletions(-)
 rename templates/quasar/utils/{fetch.ts => api.ts} (100%)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 9e44db05..a1f42d69 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -72,8 +72,8 @@ export default class extends BaseGenerator {
       "types/list.ts",
 
       // utils
+      "utils/api.ts",
       "utils/date.ts",
-      "utils/fetch.ts",
     ]);
 
     handlebars.registerHelper("compare", hbh_comparison.compare);
@@ -274,9 +274,9 @@ export default {
       "types/view.ts",
 
       // utils
+      "utils/api.ts",
       "utils/date.ts",
       "utils/error.ts",
-      "utils/fetch.ts",
       "utils/mercure.ts",
     ].forEach((common) =>
       this.createFile(common, `${dir}/${common}`, context, false)
diff --git a/src/generators/QuasarGenerator.test.js b/src/generators/QuasarGenerator.test.js
index 365610b8..1dacd513 100644
--- a/src/generators/QuasarGenerator.test.js
+++ b/src/generators/QuasarGenerator.test.js
@@ -90,10 +90,10 @@ test("Generate a Quasar app", async () => {
   );
 
   // utils
+  expect(fs.existsSync(`${tmpobj.name}/utils/api.ts`)).toBe(true);
   expect(fs.existsSync(`${tmpobj.name}/utils/config.ts`)).toBe(true);
-  expect(fs.existsSync(`${tmpobj.name}/utils/error.ts`)).toBe(true);
   expect(fs.existsSync(`${tmpobj.name}/utils/date.ts`)).toBe(true);
-  expect(fs.existsSync(`${tmpobj.name}/utils/fetch.ts`)).toBe(true);
+  expect(fs.existsSync(`${tmpobj.name}/utils/error.ts`)).toBe(true);
 
   tmpobj.removeCallback();
 });
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index 328650d6..ae4f15e0 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import type { SubmissionErrors } from 'src/types/error';
 import { SubmissionError } from 'src/utils/error';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 
 interface State {
   created?: {{titleUcFirst}};
@@ -26,7 +26,7 @@ export const use{{titleUcFirst}}CreateStore = defineStore('{{lc}}Create', {
       this.toggleLoading();
 
       try {
-        const response = await fetch('{{name}}', {
+        const response = await api('{{name}}', {
           method: 'POST',
           body: JSON.stringify(payload),
         });
diff --git a/templates/quasar/stores/foo/delete.ts b/templates/quasar/stores/foo/delete.ts
index 15bc0265..d3ac4c33 100644
--- a/templates/quasar/stores/foo/delete.ts
+++ b/templates/quasar/stores/foo/delete.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 
 interface State {
   deleted?: {{titleUcFirst}};
@@ -27,7 +27,7 @@ export const use{{titleUcFirst}}DeleteStore = defineStore('{{lc}}Delete', {
       }
 
       try {
-        await fetch(item['@id'], { method: 'DELETE' });
+        await api(item['@id'], { method: 'DELETE' });
 
         this.toggleLoading();
         this.setDeleted(item);
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index d3c290c2..6e623f03 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { View } from 'src/types/view';
 import { extractHubURL } from 'src/utils/mercure';
@@ -31,7 +31,7 @@ export const use{{titleUcFirst}}ListStore = defineStore('{{lc}}List', {
 
       try {
         const path = page ? `{{name}}?page=${page}` : '{{name}}';
-        const response = await fetch(path, { params });
+        const response = await api(path, { params });
         const data: PagedCollection<{{titleUcFirst}}> = await response.json();
         const hubUrl = extractHubURL(response);
 
diff --git a/templates/quasar/stores/foo/show.ts b/templates/quasar/stores/foo/show.ts
index 5e6f17f7..e6409ee7 100644
--- a/templates/quasar/stores/foo/show.ts
+++ b/templates/quasar/stores/foo/show.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 import { extractHubURL } from 'src/utils/mercure';
 
 interface State {
@@ -23,7 +23,7 @@ export const use{{titleUcFirst}}ShowStore = defineStore('{{lc}}Show', {
       this.toggleLoading();
 
       try {
-        const response = await fetch(id);
+        const response = await api(id);
         const data: {{titleUcFirst}} = await response.json();
         const hubUrl = extractHubURL(response);
 
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
index f2dfafae..9aa35746 100644
--- a/templates/quasar/stores/foo/update.ts
+++ b/templates/quasar/stores/foo/update.ts
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import type { SubmissionErrors } from 'src/types/error';
 import { SubmissionError } from 'src/utils/error';
-import fetch from 'src/utils/fetch';
+import api from 'src/utils/api';
 import { extractHubURL } from 'src/utils/mercure';
 
 interface State {
@@ -29,7 +29,7 @@ export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
       this.toggleLoading();
 
       try {
-        const response = await fetch(id);
+        const response = await api(id);
         const data: {{titleUcFirst}} = await response.json();
         const hubUrl = extractHubURL(response);
 
@@ -58,7 +58,7 @@ export const use{{titleUcFirst}}UpdateStore = defineStore('{{lc}}Update', {
       }
 
       try {
-        const response = await fetch(
+        const response = await api(
           this.retrieved['@id'] ?? payload['@id'] ?? '',
           {
             method: 'PUT',
diff --git a/templates/quasar/utils/fetch.ts b/templates/quasar/utils/api.ts
similarity index 100%
rename from templates/quasar/utils/fetch.ts
rename to templates/quasar/utils/api.ts

From a8465162287d1d807d384ae7c535c535e1c4cf7e Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 28 Dec 2022 09:47:18 +0100
Subject: [PATCH 74/84] Rename relations variables

---
 src/generators/QuasarGenerator.js           | 14 ++++----------
 templates/quasar/components/foo/FooForm.vue |  4 ++--
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index a1f42d69..ab2951b2 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -169,12 +169,7 @@ export default {
 
     const fields = this.parseFields(resource);
     const formFields = this.buildFields(fields);
-    const hasRelations = fields.some(
-      (field) => field.reference || field.embedded
-    );
-    const hasManyRelations = fields.some(
-      (field) => field.isReferences || field.isEmbeddeds
-    );
+    const hasIsRelations = fields.some((field) => field.isRelations);
     const hasDateField = fields.some((field) => field.type === "dateTime");
 
     const parameters = [];
@@ -220,8 +215,7 @@ export default {
       name: resource.name,
       lc,
       fields,
-      hasRelations,
-      hasManyRelations,
+      hasIsRelations,
       hasDateField,
       parameters,
       formFields,
@@ -394,8 +388,8 @@ export default {
           ...field,
           isReferences,
           isEmbeddeds,
-          isRelations: field.reference || field.embedded,
-          isManyRelations: isEmbeddeds || isReferences,
+          isRelation: field.reference || field.embedded,
+          isRelations: isEmbeddeds || isReferences,
         },
       };
     }, {});
diff --git a/templates/quasar/components/foo/FooForm.vue b/templates/quasar/components/foo/FooForm.vue
index fd691747..31d327f9 100644
--- a/templates/quasar/components/foo/FooForm.vue
+++ b/templates/quasar/components/foo/FooForm.vue
@@ -2,7 +2,7 @@
   <q-form class="q-pa-md q-col-gutter-y-md" @submit="emitSubmit">
     <div class="row q-gutter-md">
     {{#each formFields}}
-      {{#if isManyRelations}}
+    {{#if isRelations}}
       <FormRepeater
         :values="item.{{name}}"
         :label="$t('{{../lc}}.{{name}}')"
@@ -56,7 +56,7 @@
 import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import type { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
-{{#if hasManyRelations}}
+{{#if hasIsRelations}}
 import FormRepeater from 'src/components/common/CommonFormRepeater.vue';
 import { Item } from 'src/types/item';
 {{/if}}

From faa477d63ccf9731ceedf5d160521c20e3e3eea5 Mon Sep 17 00:00:00 2001
From: Alan Poulain <contact@alanpoulain.eu>
Date: Tue, 3 Jan 2023 11:41:57 +0100
Subject: [PATCH 75/84] Move nuxt and react to testapp.sh

---
 package.json |  4 ++--
 testapp.sh   | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 542619de..7bc79262 100644
--- a/package.json
+++ b/package.json
@@ -64,10 +64,10 @@
     "test-gen-openapi3": "rm -rf ./tmp && yarn build && ENTRYPOINT=https://demo.api-platform.com/docs.json FORMAT=openapi3 ./testgen.sh",
     "test-gen-custom": "rm -rf ./tmp && yarn build && babel src/generators/ReactGenerator.js src/generators/BaseGenerator.js -d ./tmp/gens && cp -r ./templates/react ./templates/react-common ./templates/entrypoint.js ./tmp/gens && ./lib/index.js https://demo.api-platform.com ./tmp/react-custom -g \"$(pwd)/tmp/gens/ReactGenerator.js\" -t ./tmp/gens",
     "test-gen-env": "rm -rf ./tmp && yarn build && API_PLATFORM_CREATE_CLIENT_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CREATE_CLIENT_OUTPUT=./tmp ./lib/index.js",
-    "test-react-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create react-app --template typescript ./tmp/app/reactapp && yarn --cwd ./tmp/app/reactapp add react-router-dom react-hook-form && cp -R ./tmp/react/* ./tmp/app/reactapp/src && cp ./templates/react/index.tsx ./tmp/app/reactapp/src && start-server-and-test 'BROWSER=none yarn --cwd ./tmp/app/reactapp start' http://127.0.0.1:3000/books/ 'yarn playwright test'",
+    "test-react-app": "./testapp.sh react",
     "test-next-app": "./testapp.sh next",
     "test-vue-app": "./testapp.sh vue",
-    "test-nuxt-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create nuxt-app --answers \"'{\\\"name\\\":\\\"nuxt\\\",\\\"language\\\":\\\"js\\\",\\\"pm\\\":\\\"yarn\\\",\\\"ui\\\":\\\"vuetify\\\",\\\"template\\\":\\\"html\\\",\\\"features\\\":[],\\\"linter\\\":[],\\\"test\\\":\\\"none\\\",\\\"mode\\\":\\\"spa\\\",\\\"target\\\":\\\"static\\\",\\\"devTools\\\":[],\\\"vcs\\\":\\\"none\\\"}'\" ./tmp/app/nuxt && yarn --cwd ./tmp/app/nuxt add moment lodash vuelidate vuex-map-fields && cp -R ./tmp/nuxt/* ./tmp/app/nuxt && NUXT_TELEMETRY_DISABLED=1 yarn --cwd ./tmp/app/nuxt generate && start-server-and-test 'yarn --cwd ./tmp/app/nuxt start --hostname 127.0.0.1' http://127.0.0.1:3000/books/ 'yarn playwright test'"
+    "test-nuxt-app": "./testapp.sh nuxt"
   },
   "lint-staged": {
     "src/**/*.js": "yarn lint --fix"
diff --git a/testapp.sh b/testapp.sh
index 67d8642c..8730c731 100755
--- a/testapp.sh
+++ b/testapp.sh
@@ -24,6 +24,24 @@ if [ "$1" = "next" ]; then
   start-server-and-test 'yarn --cwd ./tmp/app/next start' http://127.0.0.1:3000/books/ 'yarn playwright test'
 fi
 
+if [ "$1" = "react" ]; then
+  yarn create react-app --template typescript ./tmp/app/reactapp
+  yarn --cwd ./tmp/app/reactapp add react-router-dom react-hook-form
+
+  cp -R ./tmp/react/* ./tmp/app/reactapp/src
+  cp ./templates/react/index.tsx ./tmp/app/reactapp/src
+  start-server-and-test 'BROWSER=none yarn --cwd ./tmp/app/reactapp start' http://127.0.0.1:3000/books/ 'yarn playwright test'
+fi
+
+if [ "$1" = "nuxt" ]; then
+  yarn create nuxt-app --answers "'{\"name\":\"nuxt\",\"language\":\"js\",\"pm\":\"yarn\",\"ui\":\"vuetify\",\"template\":\"html\",\"features\":[],\"linter\":[],\"test\":\"none\",\"mode\":\"spa\",\"target\":\"static\",\"devTools\":[],\"vcs\":\"none\"}'" ./tmp/app/nuxt
+  yarn --cwd ./tmp/app/nuxt add moment lodash vuelidate vuex-map-fields
+
+  cp -R ./tmp/nuxt/* ./tmp/app/nuxt
+  NUXT_TELEMETRY_DISABLED=1 yarn --cwd ./tmp/app/nuxt generate
+  start-server-and-test 'yarn --cwd ./tmp/app/nuxt start --hostname 127.0.0.1' http://127.0.0.1:3000/books/ 'yarn playwright test'
+fi
+
 if [ "$1" = "vue" ]; then
   cd ./tmp/app
   npm init vue@3 -- --typescript --router --pinia --eslint-with-prettier vue

From 76e96664609a3f436c0713382a48a0b9aa24d0ce Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 3 Jan 2023 16:49:03 +0100
Subject: [PATCH 76/84] Fix request with filters

---
 templates/quasar/components/foo/FooList.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/templates/quasar/components/foo/FooList.vue b/templates/quasar/components/foo/FooList.vue
index ae0bd47a..394e3178 100644
--- a/templates/quasar/components/foo/FooList.vue
+++ b/templates/quasar/components/foo/FooList.vue
@@ -250,7 +250,7 @@ watch(
 );
 
 async function sendRequest() {
-  await {{lc}}ListStore.getItems(page.value, { {{#if parameters.length}}filters: filters.value{{/if}} });
+  await {{lc}}ListStore.getItems(page.value, { {{#if parameters.length}}...filters.value{{/if}} });
 }
 
 useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });
@@ -267,6 +267,8 @@ function onSendFilter() {
 
 function resetFilter() {
   filters.value = {};
+
+  sendRequest();
 }
 {{/if}}
 

From 6c8bb8c47083edde76fd78c78995e29850882e4b Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Tue, 3 Jan 2023 16:55:36 +0100
Subject: [PATCH 77/84] Move composables to vue-common

---
 src/generators/QuasarGenerator.js                |  8 ++++++--
 .../composables/mercureItem.ts                   | 16 ++++++++--------
 .../composables/mercureList.ts                   | 12 ++++++------
 3 files changed, 20 insertions(+), 16 deletions(-)
 rename templates/{quasar => vue-common}/composables/mercureItem.ts (69%)
 rename templates/{quasar => vue-common}/composables/mercureList.ts (70%)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index ab2951b2..2c039ff5 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -22,6 +22,12 @@ export default class extends BaseGenerator {
       "utils/mercure.ts",
     ]);
 
+    this.registerTemplates("vue-common/", [
+      // composables
+      "composables/mercureItem.ts",
+      "composables/mercureList.ts",
+    ]);
+
     this.registerTemplates("quasar/", [
       // components
       "components/foo/FooCreate.vue",
@@ -43,8 +49,6 @@ export default class extends BaseGenerator {
       // composables
       "composables/breadcrumb.ts",
       "composables/errors.ts",
-      "composables/mercureItem.ts",
-      "composables/mercureList.ts",
       "composables/notifications.ts",
 
       // i18n
diff --git a/templates/quasar/composables/mercureItem.ts b/templates/vue-common/composables/mercureItem.ts
similarity index 69%
rename from templates/quasar/composables/mercureItem.ts
rename to templates/vue-common/composables/mercureItem.ts
index d2b427b9..546a941b 100644
--- a/templates/quasar/composables/mercureItem.ts
+++ b/templates/vue-common/composables/mercureItem.ts
@@ -1,8 +1,8 @@
-import { useRouter } from 'vue-router';
-import { mercureSubscribe } from 'src/utils/mercure';
-import { onBeforeUnmount } from 'vue';
-import type { StoreGeneric } from 'pinia';
-import type { Item } from 'src/types/item';
+import { onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+import type { StoreGeneric } from "pinia";
+import { mercureSubscribe } from "../utils/mercure";
+import type { Item } from "../types/item";
 
 export function useMercureItem({
   store,
@@ -26,7 +26,7 @@ export function useMercureItem({
 
   let mercureSub: EventSource | null = null;
 
-  store.$subscribe((mutation, state) => {
+  store.$subscribe((mutation: any, state: any) => {
     if (!state.hubUrl) {
       return;
     }
@@ -41,12 +41,12 @@ export function useMercureItem({
 
     mercureSub = mercureSubscribe(
       state.hubUrl,
-      [state.retrieved['@id'] ?? ''],
+      [state.retrieved["@id"] ?? ""],
       mercureEl
     );
   });
 
-  deleteStore.$subscribe((mutation, state) => {
+  deleteStore.$subscribe((mutation: any, state: any) => {
     if (state.mercureDeleted) {
       router.push({ name: redirectRouteName });
     }
diff --git a/templates/quasar/composables/mercureList.ts b/templates/vue-common/composables/mercureList.ts
similarity index 70%
rename from templates/quasar/composables/mercureList.ts
rename to templates/vue-common/composables/mercureList.ts
index e838cd93..fd9b515a 100644
--- a/templates/quasar/composables/mercureList.ts
+++ b/templates/vue-common/composables/mercureList.ts
@@ -1,7 +1,7 @@
-import { mercureSubscribe } from 'src/utils/mercure';
-import { onBeforeUnmount } from 'vue';
-import type { Item } from 'src/types/item';
-import type { StoreGeneric } from 'pinia';
+import { onBeforeUnmount } from "vue";
+import type { StoreGeneric } from "pinia";
+import { mercureSubscribe } from "../utils/mercure";
+import type { Item } from "../types/item";
 
 export function useMercureList({
   store,
@@ -22,7 +22,7 @@ export function useMercureList({
 
   let mercureSub: EventSource | null = null;
 
-  store.$subscribe((mutation, state) => {
+  store.$subscribe((mutation: any, state: any) => {
     if (!state.hubUrl) {
       return;
     }
@@ -37,7 +37,7 @@ export function useMercureList({
 
     mercureSub = mercureSubscribe(
       state.hubUrl,
-      state.items.map((i: Item) => i['@id'] ?? ''),
+      state.items.map((i: any) => i["@id"] ?? ""),
       mercureEl
     );
   });

From fbfad1a761f972d2bd96ff77cd245c4aa9be70da Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 4 Jan 2023 09:27:33 +0100
Subject: [PATCH 78/84] Register composables from vue-common in VueGenerator

---
 src/generators/VueGenerator.js           | 10 ++--
 templates/vue/composables/mercureItem.ts | 58 ------------------------
 templates/vue/composables/mercureList.ts | 48 --------------------
 3 files changed, 6 insertions(+), 110 deletions(-)
 delete mode 100644 templates/vue/composables/mercureItem.ts
 delete mode 100644 templates/vue/composables/mercureList.ts

diff --git a/src/generators/VueGenerator.js b/src/generators/VueGenerator.js
index f0baa169..c794b2db 100644
--- a/src/generators/VueGenerator.js
+++ b/src/generators/VueGenerator.js
@@ -22,6 +22,12 @@ export default class extends BaseGenerator {
       "utils/mercure.ts",
     ]);
 
+    this.registerTemplates("vue-common/", [
+      // composables
+      "composables/mercureItem.ts",
+      "composables/mercureList.ts",
+    ]);
+
     this.registerTemplates(`vue/`, [
       // components
       "components/foo/FooCreate.vue",
@@ -33,10 +39,6 @@ export default class extends BaseGenerator {
       // common components
       "components/common/FormRepeater.vue",
 
-      // composables
-      "composables/mercureItem.ts",
-      "composables/mercureList.ts",
-
       // routes
       "router/foo.ts",
 
diff --git a/templates/vue/composables/mercureItem.ts b/templates/vue/composables/mercureItem.ts
deleted file mode 100644
index 68191d9f..00000000
--- a/templates/vue/composables/mercureItem.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { onBeforeUnmount } from "vue";
-import { useRouter } from "vue-router";
-import { mercureSubscribe } from "@/utils/mercure";
-import type { StoreGeneric } from "pinia";
-import type { Item } from "@/types/item";
-
-export function useMercureItem({
-  store,
-  deleteStore,
-  redirectRouteName,
-}: {
-  store: StoreGeneric;
-  deleteStore: StoreGeneric;
-  redirectRouteName: string;
-}) {
-  const router = useRouter();
-
-  const mercureEl = <T extends Item>(data: T) => {
-    if (Object.keys(data).length === 1) {
-      deleteStore.setMercureDeleted(data);
-      return;
-    }
-
-    store.setRetrieved(data);
-  };
-
-  let mercureSub: EventSource | null = null;
-
-  store.$subscribe((mutation: any, state: any) => {
-    if (!state.hubUrl) {
-      return;
-    }
-
-    if (mercureSub) {
-      mercureSub.close();
-    }
-
-    if (!state.retrieved) {
-      return;
-    }
-
-    mercureSub = mercureSubscribe(
-      state.hubUrl,
-      [state.retrieved["@id"] ?? ""],
-      mercureEl
-    );
-  });
-
-  deleteStore.$subscribe((mutation: any, state: any) => {
-    if (state.mercureDeleted) {
-      router.push({ name: redirectRouteName });
-    }
-  });
-
-  onBeforeUnmount(() => {
-    mercureSub?.close();
-  });
-}
diff --git a/templates/vue/composables/mercureList.ts b/templates/vue/composables/mercureList.ts
deleted file mode 100644
index 83e106d5..00000000
--- a/templates/vue/composables/mercureList.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { onBeforeUnmount } from "vue";
-import { mercureSubscribe } from "@/utils/mercure";
-import type { StoreGeneric } from "pinia";
-import type { Item } from "@/types/item";
-
-export function useMercureList({
-  store,
-  deleteStore,
-}: {
-  store: StoreGeneric;
-  deleteStore: StoreGeneric;
-}) {
-  const mercureEl = <T extends Item>(data: T) => {
-    if (Object.keys(data).length === 1) {
-      store.deleteItem(data);
-      deleteStore.setMercureDeleted(data);
-      return;
-    }
-
-    store.updateItem(data);
-  };
-
-  let mercureSub: EventSource | null = null;
-
-  store.$subscribe((mutation: any, state: any) => {
-    if (!state.hubUrl) {
-      return;
-    }
-
-    if (mercureSub) {
-      mercureSub.close();
-    }
-
-    if (!state.items?.length) {
-      return;
-    }
-
-    mercureSub = mercureSubscribe(
-      state.hubUrl,
-      state.items.map((i: any) => i["@id"] ?? ""),
-      mercureEl
-    );
-  });
-
-  onBeforeUnmount(() => {
-    mercureSub?.close();
-  });
-}

From 6be9a3fd41c8328e77733429e7f4cf5683810031 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 4 Jan 2023 11:06:56 +0100
Subject: [PATCH 79/84] Change action name & fix typo

---
 .../quasar/components/common/CommonActionCell.vue  | 14 +++++++-------
 templates/quasar/components/foo/FooList.vue        |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/templates/quasar/components/common/CommonActionCell.vue b/templates/quasar/components/common/CommonActionCell.vue
index 84672340..5f00f111 100644
--- a/templates/quasar/components/common/CommonActionCell.vue
+++ b/templates/quasar/components/common/CommonActionCell.vue
@@ -11,13 +11,13 @@
     />
 
     <q-btn
-      v-if="actions.includes('edit')"
+      v-if="actions.includes('update')"
       flat
       round
       dense
       color="secondary"
-      icon="edit"
-      @click="emitEdit"
+      icon="update"
+      @click="emitUpdate"
     />
 
     <q-btn
@@ -44,14 +44,14 @@ import ConfirmDelete from 'src/components/common/CommonConfirmDelete.vue';
 import { ref, toRefs } from 'vue';
 
 const props = defineProps<{
-  actions: ('show' | 'edit' | 'delete')[];
+  actions: ('show' | 'update' | 'delete')[];
 }>();
 
 const { actions } = toRefs(props);
 
 const emit = defineEmits<{
   (e: 'show'): void;
-  (e: 'edit'): void;
+  (e: 'update'): void;
   (e: 'delete'): void;
 }>();
 
@@ -59,8 +59,8 @@ function emitShow() {
   emit('show');
 }
 
-function emitEdit() {
-  emit('edit');
+function emitUpdate() {
+  emit('update');
 }
 
 function emitDelete() {
diff --git a/templates/quasar/components/foo/FooList.vue b/templates/quasar/components/foo/FooList.vue
index 394e3178..d60e0a9f 100644
--- a/templates/quasar/components/foo/FooList.vue
+++ b/templates/quasar/components/foo/FooList.vue
@@ -37,9 +37,9 @@
   >
     <template #body-cell-actions="{ row }">
       <ActionCell
-        :actions="['show', 'edit', 'delete']"
+        :actions="['show', 'update', 'delete']"
         @show="goToShowPage(row)"
-        @edit="gotToEditPage(row)"
+        @update="goToUpdatePage(row)"
         @delete="deleteItem(row)"
       />
     </template>
@@ -283,7 +283,7 @@ function goToShowPage(item: {{titleUcFirst}}) {
   });
 }
 
-function gotToEditPage(item: {{titleUcFirst}}) {
+function goToUpdatePage(item: {{titleUcFirst}}) {
   router.push({
     name: '{{titleUcFirst}}Update',
     params: { id: item['@id'] },

From 29c56d91cdc5e2ff26073affee0bae7ee594ee1a Mon Sep 17 00:00:00 2001
From: Alan Poulain <contact@alanpoulain.eu>
Date: Wed, 4 Jan 2023 15:31:57 +0100
Subject: [PATCH 80/84] minor fixes

---
 .../components/common/CommonActionCell.vue    |  2 +-
 .../components/common/CommonBreadcrumb.vue    |  4 +-
 .../components/common/CommonFormRepeater.vue  |  4 +-
 .../components/common/CommonToolbar.vue       |  2 +-
 templates/quasar/components/foo/FooCreate.vue | 10 ++---
 templates/quasar/components/foo/FooFilter.vue |  2 +-
 templates/quasar/components/foo/FooForm.vue   | 16 +++----
 templates/quasar/components/foo/FooList.vue   | 42 +++++++++----------
 templates/quasar/components/foo/FooShow.vue   | 14 +++----
 templates/quasar/components/foo/FooUpdate.vue | 14 +++----
 templates/quasar/composables/breadcrumb.ts    |  2 +-
 templates/quasar/router/foo.ts                |  2 +-
 templates/quasar/stores/foo/create.ts         |  4 +-
 templates/quasar/stores/foo/delete.ts         |  2 +-
 templates/quasar/stores/foo/list.ts           |  6 +--
 templates/quasar/stores/foo/show.ts           |  2 +-
 templates/quasar/stores/foo/update.ts         |  4 +-
 templates/quasar/utils/api.ts                 |  2 +-
 18 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/templates/quasar/components/common/CommonActionCell.vue b/templates/quasar/components/common/CommonActionCell.vue
index 5f00f111..e558a3e3 100644
--- a/templates/quasar/components/common/CommonActionCell.vue
+++ b/templates/quasar/components/common/CommonActionCell.vue
@@ -40,8 +40,8 @@
 </template>
 
 <script lang="ts" setup>
-import ConfirmDelete from 'src/components/common/CommonConfirmDelete.vue';
 import { ref, toRefs } from 'vue';
+import ConfirmDelete from 'components/common/CommonConfirmDelete.vue';
 
 const props = defineProps<{
   actions: ('show' | 'update' | 'delete')[];
diff --git a/templates/quasar/components/common/CommonBreadcrumb.vue b/templates/quasar/components/common/CommonBreadcrumb.vue
index b44ea63a..e3ca889e 100644
--- a/templates/quasar/components/common/CommonBreadcrumb.vue
+++ b/templates/quasar/components/common/CommonBreadcrumb.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts" setup>
-import { Item } from 'src/types/item';
-import { BreadcrumbValue } from 'src/types/breadcrumb';
+import type { BreadcrumbValue } from 'src/types/breadcrumb';
+import type { Item } from 'src/types/item';
 
 const props = defineProps<{
   values: BreadcrumbValue[];
diff --git a/templates/quasar/components/common/CommonFormRepeater.vue b/templates/quasar/components/common/CommonFormRepeater.vue
index 48dd213f..ab6f6db4 100644
--- a/templates/quasar/components/common/CommonFormRepeater.vue
+++ b/templates/quasar/components/common/CommonFormRepeater.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <label for="book_reviews" class="text-body1 form-control-label">
+    <div class="text-body1">
       <span class="q-mr-sm">
         \{{ label }}
       </span>
 
       <q-btn color="secondary" @click="addField">Add</q-btn>
-    </label>
+    </div>
 
     <div class="q-my-md">
       <q-input
diff --git a/templates/quasar/components/common/CommonToolbar.vue b/templates/quasar/components/common/CommonToolbar.vue
index 67871c0f..a4f5d033 100644
--- a/templates/quasar/components/common/CommonToolbar.vue
+++ b/templates/quasar/components/common/CommonToolbar.vue
@@ -53,8 +53,8 @@
 </template>
 
 <script lang="ts" setup>
-import ConfirmDelete from 'src/components/common/CommonConfirmDelete.vue';
 import { ref, toRefs } from 'vue';
+import ConfirmDelete from 'components/common/CommonConfirmDelete.vue';
 
 const props = defineProps<{
   actions?: ('submit' | 'reset' | 'delete' | 'add')[];
diff --git a/templates/quasar/components/foo/FooCreate.vue b/templates/quasar/components/foo/FooCreate.vue
index d1f0a50a..e782e53a 100644
--- a/templates/quasar/components/foo/FooCreate.vue
+++ b/templates/quasar/components/foo/FooCreate.vue
@@ -11,16 +11,16 @@
 </template>
 
 <script lang="ts" setup>
-import Toolbar from 'src/components/common/CommonToolbar.vue';
-import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import Toolbar from 'components/common/CommonToolbar.vue';
+import Breadcrumb from 'components/common/CommonBreadcrumb.vue';
 import Loading from 'components/common/CommonLoading.vue';
 import Form from 'components/{{lc}}/{{titleUcFirst}}Form.vue';
-import { useRouter } from 'vue-router';
 import { use{{titleUcFirst}}CreateStore } from 'stores/{{lc}}/create';
-import { storeToRefs } from 'pinia';
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
 
 const router = useRouter();
 const breadcrumb = useBreadcrumb();
diff --git a/templates/quasar/components/foo/FooFilter.vue b/templates/quasar/components/foo/FooFilter.vue
index 5f2d63ee..8ad251c1 100644
--- a/templates/quasar/components/foo/FooFilter.vue
+++ b/templates/quasar/components/foo/FooFilter.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script lang="ts" setup>
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import { toRef } from 'vue';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
 
 const props = defineProps<{
   values: {{titleUcFirst}};
diff --git a/templates/quasar/components/foo/FooForm.vue b/templates/quasar/components/foo/FooForm.vue
index 31d327f9..b2d98f79 100644
--- a/templates/quasar/components/foo/FooForm.vue
+++ b/templates/quasar/components/foo/FooForm.vue
@@ -9,7 +9,7 @@
         class="col-12 col-md-8"
         @update="(values: any) => (item.{{name}} = values)"
       />
-      {{else}}
+    {{else}}
       <q-input
         v-model{{#compare type "==" "number" }}.number{{/compare}}="item.{{name}}"
         :label="$t('{{../lc}}.{{name}}')"
@@ -34,7 +34,7 @@
           />
         </template>
       </q-input>
-      {{/if}}
+    {{/if}}
     {{/each}}
     </div>
 
@@ -53,16 +53,16 @@
 </template>
 
 <script lang="ts" setup>
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import type { SubmissionErrors } from 'src/types/error';
 import { Ref, ref, toRef } from 'vue';
-{{#if hasIsRelations}}
-import FormRepeater from 'src/components/common/CommonFormRepeater.vue';
-import { Item } from 'src/types/item';
-{{/if}}
 {{#if hasDateField}}
 import { formatDateInput } from 'src/utils/date';
 {{/if}}
+{{#if hasIsRelations}}
+import FormRepeater from 'components/common/CommonFormRepeater.vue';
+import type { Item } from 'src/types/item';
+{{/if}}
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import type { SubmissionErrors } from 'src/types/error';
 
 let props = defineProps<{
   values?: {{titleUcFirst}};
diff --git a/templates/quasar/components/foo/FooList.vue b/templates/quasar/components/foo/FooList.vue
index d60e0a9f..7942090f 100644
--- a/templates/quasar/components/foo/FooList.vue
+++ b/templates/quasar/components/foo/FooList.vue
@@ -126,8 +126,8 @@
       <template v-if="view">
         <q-btn
           v-if="pagesNumber > 2"
-          :to="view['hydra:first'] ? view['hydra:first'] : { name: 'BookList' }"
-          :disable="!view['hydra:previous']"
+          :to="view['{{hydraPrefix}}first'] ? view['{{hydraPrefix}}first'] : { name: 'BookList' }"
+          :disable="!view['{{hydraPrefix}}previous']"
           icon="first_page"
           color="grey-8"
           round
@@ -137,12 +137,12 @@
 
         <q-btn
           :to="
-            !view['hydra:previous'] ||
-            view['hydra:previous'] === view['hydra:first']
+            !view['{{hydraPrefix}}previous'] ||
+            view['{{hydraPrefix}}previous'] === view['{{hydraPrefix}}first']
               ? { name: 'BookList' }
-              : view['hydra:previous']
+              : view['{{hydraPrefix}}previous']
           "
-          :disable="!view['hydra:previous']"
+          :disable="!view['{{hydraPrefix}}previous']"
           icon="chevron_left"
           color="grey-8"
           round
@@ -151,8 +151,8 @@
         />
 
         <q-btn
-          :to="view['hydra:next'] ? view['hydra:next'] : '#'"
-          :disable="!view['hydra:next']"
+          :to="view['{{hydraPrefix}}next'] ? view['{{hydraPrefix}}next'] : '#'"
+          :disable="!view['{{hydraPrefix}}next']"
           icon="chevron_right"
           color="grey-8"
           round
@@ -162,8 +162,8 @@
 
         <q-btn
           v-if="pagesNumber > 2"
-          :to="view['hydra:last'] ? view['hydra:last'] : '#'"
-          :disable="!view['hydra:next']"
+          :to="view['{{hydraPrefix}}last'] ? view['{{hydraPrefix}}last'] : '#'"
+          :disable="!view['{{hydraPrefix}}next']"
           icon="last_page"
           color="grey-8"
           round
@@ -176,27 +176,27 @@
 </template>
 
 <script lang="ts" setup>
-{{#if parameters.length }}
-import DataFilter from 'src/components/common/CommonDataFilter.vue';
-import Filter from 'src/components/{{lc}}/{{titleUcFirst}}Filter.vue';
-{{/if}}
-import Toolbar from 'src/components/common/CommonToolbar.vue';
-import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
-import ActionCell from 'src/components/common/CommonActionCell.vue';
+import { onBeforeUnmount{{#if parameters.length}}, Ref{{/if}}, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+{{#if parameters.length }}
+import DataFilter from 'components/common/CommonDataFilter.vue';
+import Filter from 'components/{{lc}}/{{titleUcFirst}}Filter.vue';
+{{/if}}
+import Toolbar from 'components/common/CommonToolbar.vue';
+import Breadcrumb from 'components/common/CommonBreadcrumb.vue';
+import ActionCell from 'components/common/CommonActionCell.vue';
 {{#if hasDateField}}
 import { formatDateTime } from 'src/utils/date';
 {{/if}}
 import { use{{titleUcFirst}}ListStore } from 'stores/{{lc}}/list';
 import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
-import { storeToRefs } from 'pinia';
-import { onBeforeUnmount{{#if parameters.length}}, Ref{{/if}}, ref, watch } from 'vue';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureList } from 'src/composables/mercureList';
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { Pagination{{#if parameters.length}}, Filters{{/if}} } from 'src/types/list';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import type { Pagination{{#if parameters.length}}, Filters{{/if}} } from 'src/types/list';
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/templates/quasar/components/foo/FooShow.vue b/templates/quasar/components/foo/FooShow.vue
index 75e58f1f..ed13cd21 100644
--- a/templates/quasar/components/foo/FooShow.vue
+++ b/templates/quasar/components/foo/FooShow.vue
@@ -99,21 +99,21 @@
 </template>
 
 <script lang="ts" setup>
-import Toolbar from 'src/components/common/CommonToolbar.vue';
-import Breadcrumb from 'src/components/common/CommonBreadcrumb.vue';
-import Loading from 'src/components/common/CommonLoading.vue';
+import { onBeforeUnmount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { use{{titleUcFirst}}ShowStore } from 'src/stores/{{lc}}/show';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import Toolbar from 'components/common/CommonToolbar.vue';
+import Breadcrumb from 'components/common/CommonBreadcrumb.vue';
+import Loading from 'components/common/CommonLoading.vue';
+import { use{{titleUcFirst}}ShowStore } from 'stores/{{lc}}/show';
 {{#if hasDateField}}
 import { formatDateTime } from 'src/utils/date';
 {{/if}}
-import { onBeforeUnmount } from 'vue';
-import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
+import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureItem } from 'src/composables/mercureItem';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/templates/quasar/components/foo/FooUpdate.vue b/templates/quasar/components/foo/FooUpdate.vue
index 1b868506..5c6b9f4a 100644
--- a/templates/quasar/components/foo/FooUpdate.vue
+++ b/templates/quasar/components/foo/FooUpdate.vue
@@ -13,21 +13,21 @@
 </template>
 
 <script lang="ts" setup>
+import { onBeforeUnmount } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 import Toolbar from 'components/common/CommonToolbar.vue';
 import Breadcrumb from 'components/common/CommonBreadcrumb.vue';
 import Loading from 'components/common/CommonLoading.vue';
 import Form from 'components/{{lc}}/{{titleUcFirst}}Form.vue';
-import { useRoute, useRouter } from 'vue-router';
-import { use{{titleUcFirst}}UpdateStore } from 'src/stores/{{lc}}/update';
-import { storeToRefs } from 'pinia';
-import { use{{titleUcFirst}}DeleteStore } from 'src/stores/{{lc}}/delete';
-import { onBeforeUnmount } from 'vue';
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import { use{{titleUcFirst}}UpdateStore } from 'stores/{{lc}}/update';
+import { use{{titleUcFirst}}DeleteStore } from 'stores/{{lc}}/delete';
 import { useNotifications } from 'src/composables/notifications';
-import { useI18n } from 'vue-i18n';
 import { useBreadcrumb } from 'src/composables/breadcrumb';
 import { useWatchErrors } from 'src/composables/errors';
 import { useMercureItem } from 'src/composables/mercureItem';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/templates/quasar/composables/breadcrumb.ts b/templates/quasar/composables/breadcrumb.ts
index 1376a70f..ea776382 100644
--- a/templates/quasar/composables/breadcrumb.ts
+++ b/templates/quasar/composables/breadcrumb.ts
@@ -1,5 +1,5 @@
-import { BreadcrumbValue } from 'src/types/breadcrumb';
 import { useRoute } from 'vue-router';
+import type { BreadcrumbValue } from 'src/types/breadcrumb';
 
 export function useBreadcrumb() {
   const route = useRoute();
diff --git a/templates/quasar/router/foo.ts b/templates/quasar/router/foo.ts
index a7b1b39f..76d3eab2 100644
--- a/templates/quasar/router/foo.ts
+++ b/templates/quasar/router/foo.ts
@@ -1,4 +1,4 @@
-import { BreadcrumbValue } from 'src/types/breadcrumb';
+import type { BreadcrumbValue } from 'types/breadcrumb';
 
 const list: BreadcrumbValue = {
   label: '{{titleUcFirst}}List',
diff --git a/templates/quasar/stores/foo/create.ts b/templates/quasar/stores/foo/create.ts
index ae4f15e0..1a003999 100644
--- a/templates/quasar/stores/foo/create.ts
+++ b/templates/quasar/stores/foo/create.ts
@@ -1,8 +1,8 @@
 import { defineStore } from 'pinia';
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import type { SubmissionErrors } from 'src/types/error';
 import { SubmissionError } from 'src/utils/error';
 import api from 'src/utils/api';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import type { SubmissionErrors } from 'src/types/error';
 
 interface State {
   created?: {{titleUcFirst}};
diff --git a/templates/quasar/stores/foo/delete.ts b/templates/quasar/stores/foo/delete.ts
index d3ac4c33..8fd3aab8 100644
--- a/templates/quasar/stores/foo/delete.ts
+++ b/templates/quasar/stores/foo/delete.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import api from 'src/utils/api';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
 
 interface State {
   deleted?: {{titleUcFirst}};
diff --git a/templates/quasar/stores/foo/list.ts b/templates/quasar/stores/foo/list.ts
index 6e623f03..a77f077b 100644
--- a/templates/quasar/stores/foo/list.ts
+++ b/templates/quasar/stores/foo/list.ts
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia';
 import api from 'src/utils/api';
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import { View } from 'src/types/view';
 import { extractHubURL } from 'src/utils/mercure';
 import type { PagedCollection } from 'src/types/collection';
-import { ListParams } from 'src/types/list';
+import type { ListParams } from 'src/types/list';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import type { View } from 'src/types/view';
 
 interface State {
   items: {{titleUcFirst}}[];
diff --git a/templates/quasar/stores/foo/show.ts b/templates/quasar/stores/foo/show.ts
index e6409ee7..5a74c30e 100644
--- a/templates/quasar/stores/foo/show.ts
+++ b/templates/quasar/stores/foo/show.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
 import api from 'src/utils/api';
 import { extractHubURL } from 'src/utils/mercure';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
 
 interface State {
   retrieved?: {{titleUcFirst}};
diff --git a/templates/quasar/stores/foo/update.ts b/templates/quasar/stores/foo/update.ts
index 9aa35746..13655651 100644
--- a/templates/quasar/stores/foo/update.ts
+++ b/templates/quasar/stores/foo/update.ts
@@ -1,9 +1,9 @@
 import { defineStore } from 'pinia';
-import { {{titleUcFirst}} } from 'src/types/{{lc}}';
-import type { SubmissionErrors } from 'src/types/error';
 import { SubmissionError } from 'src/utils/error';
 import api from 'src/utils/api';
 import { extractHubURL } from 'src/utils/mercure';
+import type { {{titleUcFirst}} } from 'src/types/{{lc}}';
+import type { SubmissionErrors } from 'src/types/error';
 
 interface State {
   retrieved?: {{titleUcFirst}};
diff --git a/templates/quasar/utils/api.ts b/templates/quasar/utils/api.ts
index e121206d..745423ac 100644
--- a/templates/quasar/utils/api.ts
+++ b/templates/quasar/utils/api.ts
@@ -1,6 +1,6 @@
+import qs from 'qs';
 import type { SubmissionErrors } from 'src/types/error';
 import { SubmissionError } from 'src/utils/error';
-import qs from 'qs';
 import { ENTRYPOINT } from 'src/utils/config';
 
 const MIME_TYPE = 'application/ld+json';

From 993df27162345f60045a3859d8301a12520bb9a4 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 4 Jan 2023 16:44:50 +0100
Subject: [PATCH 81/84] Rollback icon name

---
 templates/quasar/components/common/CommonActionCell.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/quasar/components/common/CommonActionCell.vue b/templates/quasar/components/common/CommonActionCell.vue
index e558a3e3..a2c6b593 100644
--- a/templates/quasar/components/common/CommonActionCell.vue
+++ b/templates/quasar/components/common/CommonActionCell.vue
@@ -16,7 +16,7 @@
       round
       dense
       color="secondary"
-      icon="update"
+      icon="edit"
       @click="emitUpdate"
     />
 

From a712b41f27afb88c5942dd3a0f3dd07e3c371b6d Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 4 Jan 2023 16:51:54 +0100
Subject: [PATCH 82/84] Move api.ts & date.ts to common

---
 src/generators/QuasarGenerator.js          | 6 ++----
 src/generators/VueGenerator.js             | 6 ++----
 templates/{quasar => common}/utils/api.ts  | 6 +++---
 templates/{quasar => common}/utils/date.ts | 0
 4 files changed, 7 insertions(+), 11 deletions(-)
 rename templates/{quasar => common}/utils/api.ts (89%)
 rename templates/{quasar => common}/utils/date.ts (100%)

diff --git a/src/generators/QuasarGenerator.js b/src/generators/QuasarGenerator.js
index 2c039ff5..756876bc 100644
--- a/src/generators/QuasarGenerator.js
+++ b/src/generators/QuasarGenerator.js
@@ -17,7 +17,9 @@ export default class extends BaseGenerator {
       "types/view.ts",
 
       // utils
+      "utils/api.ts",
       "utils/config.ts",
+      "utils/date.ts",
       "utils/error.ts",
       "utils/mercure.ts",
     ]);
@@ -74,10 +76,6 @@ export default class extends BaseGenerator {
       // types
       "types/breadcrumb.ts",
       "types/list.ts",
-
-      // utils
-      "utils/api.ts",
-      "utils/date.ts",
     ]);
 
     handlebars.registerHelper("compare", hbh_comparison.compare);
diff --git a/src/generators/VueGenerator.js b/src/generators/VueGenerator.js
index c794b2db..b99d66bd 100644
--- a/src/generators/VueGenerator.js
+++ b/src/generators/VueGenerator.js
@@ -17,7 +17,9 @@ export default class extends BaseGenerator {
       "types/view.ts",
 
       // utils
+      "utils/api.ts",
       "utils/config.ts",
+      "utils/date.ts",
       "utils/error.ts",
       "utils/mercure.ts",
     ]);
@@ -52,10 +54,6 @@ export default class extends BaseGenerator {
       // types
       "types/stores.ts",
 
-      // utils
-      "utils/api.ts",
-      "utils/date.ts",
-
       // views
       "views/foo/ViewCreate.vue",
       "views/foo/ViewList.vue",
diff --git a/templates/quasar/utils/api.ts b/templates/common/utils/api.ts
similarity index 89%
rename from templates/quasar/utils/api.ts
rename to templates/common/utils/api.ts
index 745423ac..83723914 100644
--- a/templates/quasar/utils/api.ts
+++ b/templates/common/utils/api.ts
@@ -1,7 +1,7 @@
 import qs from 'qs';
-import type { SubmissionErrors } from 'src/types/error';
-import { SubmissionError } from 'src/utils/error';
-import { ENTRYPOINT } from 'src/utils/config';
+import type { SubmissionErrors } from '../types/error';
+import { SubmissionError } from './error';
+import { ENTRYPOINT } from './config';
 
 const MIME_TYPE = 'application/ld+json';
 
diff --git a/templates/quasar/utils/date.ts b/templates/common/utils/date.ts
similarity index 100%
rename from templates/quasar/utils/date.ts
rename to templates/common/utils/date.ts

From 8aa31a0d76543ffd1389f0e359f622991ab8ae4d Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 4 Jan 2023 17:16:58 +0100
Subject: [PATCH 83/84] Fix vue e2e test

---
 testapp.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/testapp.sh b/testapp.sh
index 8730c731..62c52119 100755
--- a/testapp.sh
+++ b/testapp.sh
@@ -47,7 +47,7 @@ if [ "$1" = "vue" ]; then
   npm init vue@3 -- --typescript --router --pinia --eslint-with-prettier vue
   cd ../..
   yarn --cwd ./tmp/app/vue install
-  yarn --cwd ./tmp/app/vue add lodash @types/lodash dayjs
+  yarn --cwd ./tmp/app/vue add qs @types/qs dayjs
 
   # Tailwind
   yarn --cwd ./tmp/app/vue add tailwindcss postcss autoprefixer

From 70e53a485b030a2796c09a3110a92ee04e9742d5 Mon Sep 17 00:00:00 2001
From: Valentin Crochemore <valentin.crochemore@gmail.com>
Date: Wed, 4 Jan 2023 17:17:06 +0100
Subject: [PATCH 84/84] Remove useless files

---
 templates/vue/utils/api.ts  | 61 -------------------------------------
 templates/vue/utils/date.ts | 15 ---------
 2 files changed, 76 deletions(-)
 delete mode 100644 templates/vue/utils/api.ts
 delete mode 100644 templates/vue/utils/date.ts

diff --git a/templates/vue/utils/api.ts b/templates/vue/utils/api.ts
deleted file mode 100644
index c1098d64..00000000
--- a/templates/vue/utils/api.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { isArray, isObject, isUndefined, forEach } from "lodash";
-import { ENTRYPOINT } from "@/utils/config";
-import { SubmissionError } from "@/utils/error";
-import type { SubmissionErrors } from "@/types/error";
-
-const MIME_TYPE = "application/ld+json";
-
-const transformRelationToIri = (payload: any) => {
-  forEach(payload, (value, property) => {
-    if ((isObject(value) as any) && !isUndefined(value["@id"])) {
-      payload[property] = value["@id"];
-    }
-
-    if (isArray(value)) payload[property] = transformRelationToIri(value);
-  });
-
-  return payload;
-};
-
-export default async function (id: string, options: any = {}) {
-  if (options.headers !== "undefined") {
-    options.headers = new Headers();
-  }
-
-  if (options.headers.get("Accept") === null) {
-    options.headers.set("Accept", MIME_TYPE);
-    options.headers.set("Content-Type", MIME_TYPE);
-  }
-
-  if (
-    options.body !== "undefined" &&
-    !(options.body instanceof FormData) &&
-    options.headers.get("Content-Type" === null)
-  ) {
-    options.headers.set("Content-Type", MIME_TYPE);
-  }
-
-  const payload: any = options.body && JSON.parse(options.body);
-  if ((isObject(payload) as any) && payload["@id"]) {
-    options.body = JSON.stringify(transformRelationToIri(payload));
-  }
-
-  const response = await fetch(new URL(id, ENTRYPOINT), options);
-
-  if (!response.ok) {
-    const data = await response.json();
-    const error = data["{{hydraPrefix}}description"] || response.statusText;
-    if (!data.violations) throw Error(error);
-
-    const errors: SubmissionErrors = { _error: error };
-    data.violations.forEach(
-      (violation: { propertyPath: string; message: string }) => {
-        errors[violation.propertyPath] = violation.message;
-      }
-    );
-
-    throw new SubmissionError(errors);
-  }
-
-  return response;
-}
diff --git a/templates/vue/utils/date.ts b/templates/vue/utils/date.ts
deleted file mode 100644
index 36589faa..00000000
--- a/templates/vue/utils/date.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import dayjs from "dayjs";
-
-const formatDateTime = (date?: string): string | null => {
-  if (!date) return null;
-
-  return dayjs(date).format("DD/MM/YYYY");
-};
-
-const formatDateInput = (date?: string): string | undefined => {
-  if (!date) return undefined;
-
-  return dayjs(date).format("YYYY-MM-DD");
-};
-
-export { formatDateTime, formatDateInput };