From bca19663d94215c0cc847a36ab0431834b4d74a4 Mon Sep 17 00:00:00 2001
From: Krystian <krystian.habrych@escolasoft.com>
Date: Mon, 2 Dec 2024 15:33:20 +0100
Subject: [PATCH] manufacturers

---
 package.json                                  |   2 +-
 src/components/modules/manufacturers/Form.vue | 134 ++++++++++++
 .../products/view/ProductBasicDetails.vue     |  38 +++-
 src/consts/featureFlags.ts                    |   2 +
 src/consts/menuItems.ts                       |  10 +
 src/locales/en.json                           |   3 +-
 src/locales/pl.json                           |   3 +-
 src/router.ts                                 |  19 ++
 src/store/index.ts                            |   2 +
 src/store/manufacturers.ts                    |  19 ++
 src/views/manufacturers/index.vue             | 154 ++++++++++++++
 src/views/manufacturers/view.vue              | 200 ++++++++++++++++++
 yarn.lock                                     |   8 +-
 13 files changed, 584 insertions(+), 10 deletions(-)
 create mode 100644 src/components/modules/manufacturers/Form.vue
 create mode 100644 src/store/manufacturers.ts
 create mode 100644 src/views/manufacturers/index.vue
 create mode 100644 src/views/manufacturers/view.vue

diff --git a/package.json b/package.json
index d55f42a5..fc4bdceb 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@heseya/store-core": "7.1.0-beta.2",
+    "@heseya/store-core": "7.1.0-beta.3",
     "@sentry/tracing": "^7.6.0",
     "@sentry/vue": "^7.6.0",
     "ant-design-vue": "^1.7.8",
diff --git a/src/components/modules/manufacturers/Form.vue b/src/components/modules/manufacturers/Form.vue
new file mode 100644
index 00000000..2bad1980
--- /dev/null
+++ b/src/components/modules/manufacturers/Form.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="manufacturers">
+    <div class="manufacturers__fields">
+      <validated-input
+        v-model="form.name"
+        :disabled="disabled"
+        rules="required"
+        name="name"
+        :label="$t('name')"
+      />
+      <validated-input
+        v-model="form.email"
+        :disabled="disabled"
+        rules="required|email"
+        name="email"
+        :label="$t('email')"
+      />
+      <validated-input
+        v-model="form.first_name"
+        :disabled="disabled"
+        name="first_name"
+        :label="$t('firstName')"
+      />
+      <validated-input
+        v-model="form.last_name"
+        :disabled="disabled"
+        name="last_name"
+        :label="$t('lastName')"
+      />
+    </div>
+    <hr />
+    <div>
+      <h2 class="manufacturers__title">{{ $t('relatedProducts') }}</h2>
+      <autocomplete-input
+        key="product_ids"
+        v-model="form.product_ids"
+        :label="`${$t('products')}`"
+        model-url="products"
+        prop-mode="id"
+        :disabled="disabled"
+        :rules="{ required: form.product_ids && form.product_ids.length === 0 }"
+        class="sale-configurator__autocomplete"
+      >
+        <template #option="product">
+          {{ product.name }}&nbsp;<small>(/{{ product.slug }})</small>
+        </template>
+      </autocomplete-input>
+    </div>
+    <hr />
+    <h2 class="manufacturers__title">{{ $t('manufactureAddress') }}</h2>
+    <div class="manufacturers__address-fields">
+      <address-form v-model="form.address" />
+    </div>
+  </div>
+</template>
+<i18n lang="json">
+{
+  "pl": {
+    "name": "Nazwa",
+    "email": "Email",
+    "lastName": "Nazwisko",
+    "firstName": "Imię",
+    "products": "Produkty",
+    "manufactureAddress": "Adres Producenta",
+    "relatedProducts": "Produkty powiązane"
+  },
+  "en": {
+    "name": "Name",
+    "email": "Email",
+    "lastName": "Last Name",
+    "firstName": "First Name",
+    "products": "Products",
+    "manufactureAddress": "Manufacture address",
+    "relatedProducts": "Related products"
+  }
+}
+</i18n>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { ManufacturerDto } from '@heseya/store-core'
+import AutocompleteInput from '@/components/AutocompleteInput.vue'
+import AddressForm from '@/components/modules/orders/AddressForm.vue'
+
+export type ManufacturerForm = ManufacturerDto & { id?: string }
+
+export default defineComponent({
+  components: {
+    AutocompleteInput,
+    AddressForm,
+  },
+  props: {
+    value: {
+      type: Object as PropType<ManufacturerForm>,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    form: {
+      get(): ManufacturerDto {
+        console.log('form', this.value)
+        return this.value
+      },
+      set(v: ManufacturerDto) {
+        this.$emit('input', v)
+      },
+    },
+  },
+  methods: {},
+})
+</script>
+<style lang="scss" scoped>
+.manufacturers {
+  &__fields {
+    display: grid;
+    gap: 6px;
+    grid-template-areas:
+      'name email'
+      'first_name last_name';
+  }
+  &__address-fields {
+    display: grid;
+    gap: 6px;
+  }
+  &__title {
+    margin-right: 12px;
+    font-size: 1.1em;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/components/modules/products/view/ProductBasicDetails.vue b/src/components/modules/products/view/ProductBasicDetails.vue
index 55195130..06d0c698 100644
--- a/src/components/modules/products/view/ProductBasicDetails.vue
+++ b/src/components/modules/products/view/ProductBasicDetails.vue
@@ -31,6 +31,27 @@
       :label="$t('form.shortDescription').toString()"
       :disabled="disabled"
     />
+    <AppTextarea
+      v-if="!loading"
+      v-model="form.safety_information"
+      :label="$t('form.safetyInformation').toString()"
+      :disabled="disabled"
+    />
+    <autocomplete-input
+      key="product_ids"
+      v-model="form.manufacturer_id"
+      :label="`${$t('form.manufacturer')}`"
+      model-url="manufacturers"
+      prop-mode="id"
+      mode="single"
+      :disabled="disabled"
+      :rules="{ required: form.manufacturer_id }"
+      class="sale-configurator__autocomplete"
+    >
+      <template #option="manufacturer">
+        {{ manufacturer.name }}&nbsp;<small>({{ manufacturer.email }})</small>
+      </template>
+    </autocomplete-input>
   </div>
 </template>
 
@@ -39,13 +60,17 @@
   "pl": {
     "form": {
       "vatRate": "Stawka VAT (%)",
-      "shortDescription": "Krótki opis"
+      "shortDescription": "Krótki opis",
+      "safetyInformation": "informacje dotyczące bezpieczeństwa",
+      "manufacturer": "Producent"
     }
   },
   "en": {
     "form": {
       "vatRate": "VAT rate (%)",
-      "shortDescription": "Short description"
+      "shortDescription": "Short description",
+      "safetyInformation": "Safety information",
+      "manufacturer": "Manufacturer"
     }
   }
 }
@@ -60,11 +85,18 @@ import ProductSetSelect from '../ProductSetSelect.vue'
 import Textarea from '@/components/form/Textarea.vue'
 import TagsSelect from '@/components/TagsSelect.vue'
 import CurrencyPriceForm from '@/components/CurrencyPriceForm.vue'
+import AutocompleteInput from '@/components/AutocompleteInput.vue'
 
 import { generateSlug } from '@/utils/generateSlug'
 
 export default defineComponent({
-  components: { ProductSetSelect, AppTextarea: Textarea, TagsSelect, CurrencyPriceForm },
+  components: {
+    ProductSetSelect,
+    AppTextarea: Textarea,
+    TagsSelect,
+    CurrencyPriceForm,
+    AutocompleteInput,
+  },
   props: {
     value: {
       type: Object as PropType<ProductComponentForm>,
diff --git a/src/consts/featureFlags.ts b/src/consts/featureFlags.ts
index a36b6068..8cdb5e82 100644
--- a/src/consts/featureFlags.ts
+++ b/src/consts/featureFlags.ts
@@ -21,6 +21,8 @@ export const FEATURE_FLAGS = {
    * If true, product images on every list will be shown as object-fit: contain, otherwise they will be shown as object-fit: cover
    */
   ProductContain: 'dashboard_products_contain',
+
+  manufacturers: 'Manufacturers_enabled',
 }
 
 export const SETTINGS_KEYS = {
diff --git a/src/consts/menuItems.ts b/src/consts/menuItems.ts
index 3cb30cd1..0cb7f52e 100644
--- a/src/consts/menuItems.ts
+++ b/src/consts/menuItems.ts
@@ -75,6 +75,16 @@ export const MENU_ITEMS: MenuItem[] = [
     can: PERMISSIONS_TREE.Pages.Show,
     section: SettingsSection.Shop,
   },
+  {
+    id: nextId(),
+    type: MenuItemType.Link,
+    to: '/manufacturers',
+    iconClass: 'bx bxs-bot',
+    label: 'models.manufacturers',
+    can: PERMISSIONS_TREE.Webhooks.Show,
+    hidden: () => accessor.config.env[FEATURE_FLAGS.manufacturers] !== '1',
+    section: SettingsSection.Shop,
+  },
   {
     id: nextId(),
     type: MenuItemType.Link,
diff --git a/src/locales/en.json b/src/locales/en.json
index 443a774c..65250d2d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -77,7 +77,8 @@
     "attributes": "Attributes",
     "media": "Media",
     "currencies": "Currencies",
-    "salesChannels": "Sales channels"
+    "salesChannels": "Sales channels",
+    "manufacturers": "Manufacturers"
   },
   "attributeTypes": {
     "single-option": "Text single choice",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 6271c9b9..4a0e23ed 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -77,7 +77,8 @@
     "attributes": "Atrybuty",
     "media": "Media",
     "currencies": "Waluty",
-    "salesChannels": "Kanały sprzedaży"
+    "salesChannels": "Kanały sprzedaży",
+    "manufacturers": "Producenci"
   },
   "attributeTypes": {
     "single-option": "Tekstowy jednokrotnego wyboru",
diff --git a/src/router.ts b/src/router.ts
index 684965a7..c950cb4c 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -209,6 +209,25 @@ const router = new VueRouter({
         permissions: [Permissions.Pages.ShowDetails],
       },
     },
+    {
+      path: '/manufacturers',
+      name: 'Manufacturers',
+      component: () => import('./views/manufacturers/index.vue'),
+      meta: {
+        requiresAuth: true,
+        permissions: [Permissions.Manufacturers.Show],
+      },
+    },
+    {
+      path: '/manufacturers/:id',
+      name: 'ManufacturersView',
+      component: () => import('./views/manufacturers/view.vue'),
+      meta: {
+        returnUrl: '/manufacturers',
+        requiresAuth: true,
+        permissions: [Permissions.Manufacturers.ShowDetails],
+      },
+    },
     {
       path: '/settings/banners',
       name: 'Banners',
diff --git a/src/store/index.ts b/src/store/index.ts
index 0e31c45e..e7adf168 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -35,6 +35,7 @@ import { menuItems } from './menuItems'
 import { providers } from './providers'
 import { salesChannels } from './salesChannels'
 import { redirects } from './redirects'
+import { manufacturers } from './manufacturers'
 
 Vue.use(Vuex)
 
@@ -96,6 +97,7 @@ const storeModules = {
   salesChannels,
   menuItems,
   redirects,
+  manufacturers,
 }
 
 const storePattern = {
diff --git a/src/store/manufacturers.ts b/src/store/manufacturers.ts
new file mode 100644
index 00000000..6759ba33
--- /dev/null
+++ b/src/store/manufacturers.ts
@@ -0,0 +1,19 @@
+import { Manufacturer, ManufacturerDto } from '@heseya/store-core'
+import { GLOBAL_QUERY_PARAMS, createVuexCRUD } from './generator'
+
+export const manufacturers = createVuexCRUD<Manufacturer, ManufacturerDto, ManufacturerDto>()(
+  'manufacturers',
+  {
+    state: {},
+    getters: {},
+    mutations: {},
+    actions: {},
+  },
+  {
+    get: { lang_fallback: 'any' },
+    getOne: GLOBAL_QUERY_PARAMS,
+    add: GLOBAL_QUERY_PARAMS,
+    edit: GLOBAL_QUERY_PARAMS,
+    update: GLOBAL_QUERY_PARAMS,
+  },
+)
diff --git a/src/views/manufacturers/index.vue b/src/views/manufacturers/index.vue
new file mode 100644
index 00000000..c825586a
--- /dev/null
+++ b/src/views/manufacturers/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <PaginatedList
+      :title="$t('title').toString()"
+      store-key="manufacturers"
+      :table="tableConfig"
+      :filters="filters"
+      @clear-filters="clearFilters"
+    >
+      <template #nav>
+        <icon-button v-can="$p.Manufacturers.Add" to="/manufacturers/create">
+          <template #icon>
+            <i class="bx bx-plus"></i>
+          </template>
+          {{ $t('add') }}
+        </icon-button>
+      </template>
+
+      <template #filters>
+        <div>
+          <app-input
+            v-model="filters.search"
+            class="span-2"
+            type="search"
+            :label="$t('common.search')"
+            allow-clear
+            @input="debouncedSearch"
+          />
+        </div>
+      </template>
+
+      <template #default="{ item: manufacture }">
+        <cms-table-row
+          :key="manufacture.id"
+          :item="manufacture"
+          :headers="tableConfig.headers"
+          :to="`/manufacturers/${manufacture.id}`"
+        >
+          <template #name>
+            <b>{{ manufacture.name }}</b>
+          </template>
+          <template #first_name>
+            <small>{{ manufacture.first_name }}</small>
+          </template>
+          <template #last_name>
+            <p>{{ manufacture.last_name }}</p>
+          </template>
+          <template #email>
+            <p>{{ manufacture.email }}</p>
+          </template>
+          <template #address>
+            <p>
+              {{ manufacture.address.address }}, {{ manufacture.address.zip }}
+              {{ manufacture.address.city }}, {{ manufacture.address.country }}
+            </p>
+          </template>
+        </cms-table-row>
+      </template>
+    </PaginatedList>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "pl": {
+    "title": "Producenci",
+    "add": "Dodaj producenta",
+    "table": {
+      "firstName": "Imię",
+      "lastName": "Nazwisko",
+      "email": "Email",
+      "address": "Adres",
+      "active": "Aktywny"
+    }
+  },
+  "en": {
+    "title": "Manufacturers",
+    "add": "Add manufacture",
+    "table": {
+      "firstName": "First name",
+      "lastName": "Last name",
+      "email": "Email",
+      "address": "Address",
+      "active": "Active"
+    }
+  }
+}
+</i18n>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { debounce } from 'lodash'
+import { Manufacturer } from '@heseya/store-core'
+
+import PaginatedList from '@/components/PaginatedList.vue'
+import CmsTableRow from '@/components/cms/CmsTableRow.vue'
+
+import { TableConfig } from '@/interfaces/CmsTable'
+
+export default defineComponent({
+  metaInfo(this: any) {
+    return { title: this.$t('title') as string }
+  },
+
+  components: {
+    PaginatedList,
+    CmsTableRow,
+  },
+
+  data: () => ({
+    filters: {
+      search: '',
+    },
+  }),
+
+  computed: {
+    tableConfig(): TableConfig<Manufacturer> {
+      return {
+        headers: [
+          { key: 'name', label: this.$t('common.form.name') as string },
+          { key: 'first_name', label: this.$t('table.firstName') as string },
+          { key: 'last_name', label: this.$t('table.lastName') as string },
+          { key: 'email', label: this.$t('table.email') as string },
+          { key: 'address', label: this.$t('table.address') as string },
+        ],
+      }
+    },
+  },
+
+  created() {
+    this.filters.search = (this.$route.query.search as string) || ''
+  },
+
+  methods: {
+    makeSearch() {
+      if (this.filters.search !== this.$route.query.search) {
+        this.$router.push({
+          path: '/manufacturers',
+          query: { page: undefined, search: this.filters.search || undefined },
+        })
+      }
+    },
+    debouncedSearch: debounce(function (this: any) {
+      this.$nextTick(() => {
+        this.makeSearch()
+      })
+    }, 300),
+    clearFilters() {
+      this.filters.search = ''
+      this.makeSearch()
+    },
+  },
+})
+</script>
diff --git a/src/views/manufacturers/view.vue b/src/views/manufacturers/view.vue
new file mode 100644
index 00000000..d14e401e
--- /dev/null
+++ b/src/views/manufacturers/view.vue
@@ -0,0 +1,200 @@
+<template>
+  <div class="manufacture-view narrower-page">
+    <top-nav
+      :title="
+        !isNew
+          ? `${manufacturer.name ? `${manufacturer.name} - ` : ''} ${manufacturer.email}`
+          : $t('newTitle').toString()
+      "
+    >
+      <pop-confirm
+        v-if="!isNew"
+        v-can="$p.Manufacturers.Remove"
+        :title="$t('deleteText').toString()"
+        :ok-text="$t('common.delete').toString()"
+        :cancel-text="$t('common.cancel').toString()"
+        @confirm="deleteManufacture"
+      >
+        <icon-button type="danger">
+          <template #icon>
+            <i class="bx bx-trash"></i>
+          </template>
+          {{ $t('common.delete') }}
+        </icon-button>
+      </pop-confirm>
+    </top-nav>
+
+    <div class="coupon-view__form">
+      <validation-observer v-slot="{ handleSubmit }">
+        <card>
+          <ManufacturesForm v-model="form" :disabled="!canModify" />
+
+          <hr />
+          <app-button v-if="canModify" @click="handleSubmit(save)">
+            {{ $t('common.save') }}
+          </app-button>
+        </card>
+      </validation-observer>
+    </div>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "en": {
+    "newTitle": "New manufacture",
+    "deleteText": "Are you sure, you want to delete this manufacture?",
+    "alerts": {
+      "deleted": "Manufacture has been deleted",
+      "created": "Manufacture has been created",
+      "updated": "Manufacture has been updated"
+    },
+    "formCode": "Code"
+  },
+  "pl": {
+    "newTitle": "Nowy Producent",
+    "deleteText": "Jesteś pewien, że chcesz usunąć tego producenta?",
+    "alerts": {
+      "deleted": "Producent został usunięty",
+      "created": "Producent został utworzony",
+      "updated": "Producent został zaktualizowany"
+    },
+    "formCode": "Kod"
+  }
+}
+</i18n>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { cloneDeep } from 'lodash'
+import { ValidationObserver } from 'vee-validate'
+import { Manufacturer, ManufacturerDto } from '@heseya/store-core'
+
+import TopNav from '@/components/layout/TopNav.vue'
+import Card from '@/components/layout/Card.vue'
+import ManufacturesForm, { ManufacturerForm } from '@/components/modules/manufacturers/Form.vue'
+import PopConfirm from '@/components/layout/PopConfirm.vue'
+
+import { UUID } from '@/interfaces/UUID'
+
+import { formatApiNotificationError } from '@/utils/errors'
+
+const EMPTY_MANUFACTURE_FORM: ManufacturerDto = {
+  name: '',
+  first_name: '',
+  last_name: '',
+  email: '',
+  address: {
+    address: '',
+    city: '',
+    country: '',
+    country_name: '',
+    name: '',
+    phone: '',
+    vat: '',
+    zip: '',
+  },
+  product_ids: [],
+}
+
+export default defineComponent({
+  components: {
+    ValidationObserver,
+    TopNav,
+    Card,
+    PopConfirm,
+    ManufacturesForm,
+  },
+  metaInfo(this: any): any {
+    return {
+      title: (!this.isNew && this.manufacture?.name) || (this.$t('newTitle') as string),
+    }
+  },
+  data: () => ({
+    form: cloneDeep(EMPTY_MANUFACTURE_FORM) as ManufacturerForm,
+  }),
+  computed: {
+    id(): UUID {
+      return this.$route.params.id
+    },
+    isNew(): boolean {
+      return this.id === 'create'
+    },
+    manufacturer(): Manufacturer {
+      return this.$accessor.manufacturers.getSelected || ({} as any)
+    },
+    error(): any {
+      return this.$accessor.manufacturers.getError
+    },
+    isLoading(): boolean {
+      return this.$accessor.manufacturers.isLoading
+    },
+    canModify(): boolean {
+      return this.$can(this.isNew ? this.$p.Manufacturers.Add : this.$p.Manufacturers.Edit)
+    },
+  },
+  watch: {
+    manufacturer(manufacturer: Manufacturer) {
+      if (!this.isNew) {
+        this.form = cloneDeep({
+          ...EMPTY_MANUFACTURE_FORM,
+          ...manufacturer,
+        }) as ManufacturerDto
+      }
+    },
+    error(error) {
+      if (error) {
+        this.$toast.error(formatApiNotificationError(error))
+      }
+    },
+  },
+  async created() {
+    if (!this.isNew) {
+      this.$accessor.startLoading()
+      await this.$accessor.manufacturers.get(this.id)
+      this.$accessor.stopLoading()
+    }
+  },
+
+  methods: {
+    async save() {
+      this.$accessor.startLoading()
+      const dto = this.form
+      if (this.isNew) {
+        const manufacture = await this.$accessor.manufacturers.add(dto)
+        if (manufacture && manufacture.id) {
+          this.$toast.success(this.$t('alerts.created') as string)
+          this.$router.push(`/manufacturers/${manufacture.id}`)
+        }
+      } else {
+        const success = await this.$accessor.manufacturers.update({
+          id: this.id,
+          item: dto,
+        })
+        if (success) {
+          this.$toast.success(this.$t('alerts.updated') as string)
+        }
+      }
+      this.$accessor.stopLoading()
+    },
+
+    async deleteManufacture() {
+      this.$accessor.startLoading()
+      const success = await this.$accessor.manufacturers.remove(this.id)
+      if (success) {
+        this.$toast.success(this.$t('alerts.deleted') as string)
+        this.$router.push('/manufacturers')
+      }
+      this.$accessor.stopLoading()
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.manufacture-view {
+  &__code {
+    display: flex;
+  }
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 173f8907..7defb5f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1224,10 +1224,10 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@heseya/store-core@7.1.0-beta.2":
-  version "7.1.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@heseya/store-core/-/store-core-7.1.0-beta.2.tgz#fe75d681f5f3c7d5fa4b5037d2122117b738f8fb"
-  integrity sha512-a7lmTvOWPh1g7+Bq3Fv3szlJ6RaycR9co89Sh0Ydevg8NydCN9haLTlEltkKhPvkFlHdNa8DbsuqZfa19IqaEw==
+"@heseya/store-core@7.1.0-beta.3":
+  version "7.1.0-beta.3"
+  resolved "https://registry.yarnpkg.com/@heseya/store-core/-/store-core-7.1.0-beta.3.tgz#25aa447242ee5b8cc91cbe97a80ac09f130671e3"
+  integrity sha512-J7loGuyVig0aFmFy2M6s65pwmsHAJUVdPThRxNS31izFHBcZySkWFROeWTUzr7qn2bTFMAK4GdRrd7WJEyEzUg==
   dependencies:
     flat "^5.0.2"
     form-data "^4.0.0"