@ozdao/martyrs 0.2.486 → 0.2.487

package/dist/martyrs/src/modules/music/components/{pages → forms}/ArtistForm.vue.cjs

@@ -2,36 +2,37 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const vueRouter = require("vue-router");
-const Field = require("../../../../components/Field/Field.vue.cjs");
+const Field = require("../../../../components/Field/Field.vue2.cjs");
+const Block = require("../../../../components/Block/Block.vue.cjs");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Checkbox = require("../../../../components/Checkbox/Checkbox.vue.cjs");
 const Select = require("../../../../components/Select/Select.vue.cjs");
 const UploadImage = require("../../../../components/UploadImage/UploadImage.vue.cjs");
-const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
+;/* empty css                                         */
+const BlockMultiselect = require("../../../globals/views/components/blocks/BlockMultiselect.vue.cjs");
+const IconCross = require("../../../icons/navigation/IconCross.vue.cjs");
 const artists = require("../../store/artists.cjs");
+const genres = require("../../store/genres.cjs");
 const globals = require("../../../globals/views/store/globals.cjs");
 const auth = require("../../../auth/views/store/auth.cjs");
 const _hoisted_1 = { class: "pd-medium" };
 const _hoisted_2 = { class: "h2 mn-b-medium" };
 const _hoisted_3 = { class: "bg-light pd-medium radius-medium" };
 const _hoisted_4 = { class: "cols-2 mobile:cols-1 gap-medium" };
-const _hoisted_5 = {
-  key: 1,
-  class: "t-transp p-small mn-b-medium"
-};
-const _hoisted_6 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_7 = { class: "cols-2 mobile:cols-1 gap-medium" };
-const _hoisted_8 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_9 = {
+const _hoisted_5 = { class: "bg-light pd-medium radius-medium" };
+const _hoisted_6 = { class: "cols-2 mobile:cols-1 gap-thin" };
+const _hoisted_7 = { class: "flex-nowrap flex-v-center flex gap-thin" };
+const _hoisted_8 = { class: "t-medium" };
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "flex-nowrap flex-v-center flex" };
+const _hoisted_11 = { class: "w-100" };
+const _hoisted_12 = { class: "t-medium" };
+const _hoisted_13 = {
   key: 0,
-  class: "flex-center flex"
-};
-const _hoisted_10 = {
-  key: 1,
-  class: "flex flex-wrap gap-small mn-b-medium"
+  class: "t-small t-transp"
 };
-const _hoisted_11 = { class: "bg-light pd-medium radius-medium" };
-const _hoisted_12 = { class: "flex flex-justify-between" };
+const _hoisted_14 = { class: "bg-light pd-medium radius-medium" };
+const _hoisted_15 = { class: "flex flex-justify-between" };
 const _sfc_main = {
   __name: "ArtistForm",
   props: {
@@ -64,44 +65,32 @@ const _sfc_main = {
         instagram: ""
       },
       url: "",
-      genre: []
+      genres: []
     });
     const validation = vue.reactive({
       name: false,
       bio: false
     });
+    const urlManuallySet = vue.ref(false);
+    const generateSlug = (text) => {
+      if (!text) return "";
+      return text.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim("-");
+    };
+    vue.watch(() => artist.name, (newName) => {
+      if (!urlManuallySet.value && !props.editMode) {
+        artist.url = generateSlug(newName);
+      }
+    });
+    vue.watch(() => artist.url, (newUrl, oldUrl) => {
+      if (newUrl !== generateSlug(artist.name)) {
+        urlManuallySet.value = true;
+      }
+    });
     const statusOptions = [
       "draft",
       "published",
       "archived"
     ];
-    const availableGenres = vue.ref([]);
-    const selectedGenres = vue.reactive({});
-    const isLoadingGenres = vue.ref(false);
-    const genreIds = vue.computed(() => {
-      return Object.keys(selectedGenres).filter((id) => selectedGenres[id]);
-    });
-    const fetchGenres = async () => {
-      isLoadingGenres.value = true;
-      try {
-      } catch (error) {
-        console.error("Error fetching genres:", error);
-        globals.actions.setError({
-          message: "Failed to load genres"
-        });
-      } finally {
-        isLoadingGenres.value = false;
-      }
-    };
-    const initializeSelectedGenres = (genreIds2) => {
-      if (!genreIds2 || !Array.isArray(genreIds2)) return;
-      for (const key in selectedGenres) {
-        delete selectedGenres[key];
-      }
-      genreIds2.forEach((id) => {
-        selectedGenres[id] = true;
-      });
-    };
     const fetchArtist = async () => {
       var _a, _b, _c, _d;
       if (!props.url) return;
@@ -123,7 +112,7 @@ const _sfc_main = {
           isVerified: fetchedArtist.isVerified || false,
           status: fetchedArtist.status || "draft",
           url: fetchedArtist.url || "",
-          genre: fetchedArtist.genre || [],
+          genres: fetchedArtist.genres || [],
           _id: fetchedArtist._id,
           socials: {
             telegram: ((_a = fetchedArtist.socials) == null ? void 0 : _a.telegram) || "",
@@ -132,7 +121,6 @@ const _sfc_main = {
             instagram: ((_d = fetchedArtist.socials) == null ? void 0 : _d.instagram) || ""
           }
         });
-        initializeSelectedGenres(fetchedArtist.genre);
       } catch (error) {
         console.error("Error fetching artist:", error);
         globals.actions.setError({
@@ -167,7 +155,7 @@ const _sfc_main = {
       try {
         const formData = {
           ...artist,
-          genre: genreIds.value
+          genres: artist.genres.map((genre) => genre._id || genre)
         };
         if (!props.editMode) {
           formData.owner = {
@@ -187,7 +175,7 @@ const _sfc_main = {
         }
         setTimeout(() => {
           router.push({
-            name: "artist-detail",
+            name: "artist",
             params: { url: result.url }
           });
         }, 1e3);
@@ -205,9 +193,9 @@ const _sfc_main = {
       });
     };
     vue.onMounted(async () => {
-      await fetchGenres();
       if (props.editMode) {
         await fetchArtist();
+        urlManuallySet.value = true;
       }
     });
     return (_ctx, _cache) => {
@@ -218,25 +206,25 @@ const _sfc_main = {
           class: "cols-1 gap-medium"
         }, [
           vue.createElementVNode("div", _hoisted_3, [
-            _cache[16] || (_cache[16] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Basic Information", -1)),
+            _cache[17] || (_cache[17] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Basic Information", -1)),
             vue.createElementVNode("div", _hoisted_4, [
               vue.createElementVNode("div", null, [
-                _cache[14] || (_cache[14] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Artist Photo", -1)),
+                _cache[15] || (_cache[15] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Artist Photo", -1)),
                 vue.createVNode(UploadImage.default, {
                   photo: artist.photoUrl,
                   "onUpdate:photo": _cache[0] || (_cache[0] = ($event) => artist.photoUrl = $event),
                   uploadPath: "artists/photos",
-                  class: "w-100 h-15r mn-b-small",
+                  class: "w-100 h-15r radius-small o-hidden mn-b-small",
                   onError: handleUploadError
                 }, null, 8, ["photo"])
               ]),
               vue.createElementVNode("div", null, [
-                _cache[15] || (_cache[15] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Cover Image", -1)),
+                _cache[16] || (_cache[16] = vue.createElementVNode("p", { class: "p-semi mn-b-small" }, "Cover Image", -1)),
                 vue.createVNode(UploadImage.default, {
                   photo: artist.coverUrl,
                   "onUpdate:photo": _cache[1] || (_cache[1] = ($event) => artist.coverUrl = $event),
                   uploadPath: "artists/covers",
-                  class: "w-100 h-15r mn-b-small",
+                  class: "w-100 h-15r radius-small o-hidden mn-b-small",
                   onError: handleUploadError
                 }, null, 8, ["photo"])
               ])
@@ -244,118 +232,164 @@ const _sfc_main = {
             vue.createVNode(Field.default, {
               field: artist.name,
               "onUpdate:field": _cache[2] || (_cache[2] = ($event) => artist.name = $event),
-              label: "Artist Name",
+              label: "Name",
               placeholder: "Enter artist name",
-              class: "mn-b-medium",
+              class: "bg-white radius-small pd-small mn-b-thin",
               validation: validation.name
             }, null, 8, ["field", "validation"]),
+            vue.createVNode(Field.default, {
+              field: artist.url,
+              "onUpdate:field": _cache[3] || (_cache[3] = ($event) => artist.url = $event),
+              label: "URL",
+              placeholder: "Leave blank for auto-generation based on the artist name",
+              class: "bg-white radius-small pd-small mn-b-small"
+            }, null, 8, ["field"]),
             vue.createVNode(Field.default, {
               field: artist.bio,
-              "onUpdate:field": _cache[3] || (_cache[3] = ($event) => artist.bio = $event),
+              "onUpdate:field": _cache[4] || (_cache[4] = ($event) => artist.bio = $event),
               label: "Biography",
               type: "textarea",
               placeholder: "Enter artist biography",
-              class: "mn-b-medium",
+              class: "bg-white radius-small pd-small mn-b-thin",
               validation: validation.bio
             }, null, 8, ["field", "validation"]),
             vue.createVNode(Field.default, {
               field: artist.location,
-              "onUpdate:field": _cache[4] || (_cache[4] = ($event) => artist.location = $event),
+              "onUpdate:field": _cache[5] || (_cache[5] = ($event) => artist.location = $event),
               label: "Location",
               placeholder: "e.g., Los Angeles, CA",
-              class: "mn-b-medium"
+              class: "bg-white radius-small pd-small mn-b-thin"
             }, null, 8, ["field"]),
             vue.createVNode(Field.default, {
               field: artist.website,
-              "onUpdate:field": _cache[5] || (_cache[5] = ($event) => artist.website = $event),
+              "onUpdate:field": _cache[6] || (_cache[6] = ($event) => artist.website = $event),
               label: "Website",
               placeholder: "https://example.com",
-              class: "mn-b-medium"
-            }, null, 8, ["field"]),
-            !artist.url && !__props.editMode ? (vue.openBlock(), vue.createBlock(Field.default, {
-              key: 0,
-              field: artist.url,
-              "onUpdate:field": _cache[6] || (_cache[6] = ($event) => artist.url = $event),
-              label: "Custom URL",
-              placeholder: "custom-artist-url",
-              class: "mn-b-small"
-            }, null, 8, ["field"])) : vue.createCommentVNode("", true),
-            !artist.url && !__props.editMode ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_5, " Leave blank for auto-generation based on the artist name ")) : vue.createCommentVNode("", true)
+              class: "bg-white radius-small pd-small mn-b-thin"
+            }, null, 8, ["field"])
           ]),
-          vue.createElementVNode("div", _hoisted_6, [
-            _cache[17] || (_cache[17] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Social Media", -1)),
-            vue.createElementVNode("div", _hoisted_7, [
+          vue.createElementVNode("div", _hoisted_5, [
+            _cache[18] || (_cache[18] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Social Media", -1)),
+            vue.createElementVNode("div", _hoisted_6, [
               vue.createVNode(Field.default, {
                 field: artist.socials.telegram,
                 "onUpdate:field": _cache[7] || (_cache[7] = ($event) => artist.socials.telegram = $event),
                 label: "Telegram",
                 placeholder: "@username",
-                class: "mn-b-medium"
+                class: "bg-white radius-small pd-small"
               }, null, 8, ["field"]),
               vue.createVNode(Field.default, {
                 field: artist.socials.twitter,
                 "onUpdate:field": _cache[8] || (_cache[8] = ($event) => artist.socials.twitter = $event),
                 label: "Twitter",
                 placeholder: "@username",
-                class: "mn-b-medium"
+                class: "bg-white radius-small pd-small"
               }, null, 8, ["field"]),
               vue.createVNode(Field.default, {
                 field: artist.socials.facebook,
                 "onUpdate:field": _cache[9] || (_cache[9] = ($event) => artist.socials.facebook = $event),
                 label: "Facebook",
                 placeholder: "username or page-name",
-                class: "mn-b-medium"
+                class: "bg-white radius-small pd-small"
               }, null, 8, ["field"]),
               vue.createVNode(Field.default, {
                 field: artist.socials.instagram,
                 "onUpdate:field": _cache[10] || (_cache[10] = ($event) => artist.socials.instagram = $event),
                 label: "Instagram",
                 placeholder: "@username",
-                class: "mn-b-medium"
+                class: "bg-white radius-small pd-small"
               }, null, 8, ["field"])
             ])
           ]),
-          vue.createElementVNode("div", _hoisted_8, [
-            _cache[18] || (_cache[18] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Genres", -1)),
-            _cache[19] || (_cache[19] = vue.createElementVNode("p", { class: "t-transp mn-b-medium" }, " Select genres that best describe this artist ", -1)),
-            isLoadingGenres.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, [
-              vue.createVNode(Loader.default, { class: "mn-b-medium" })
-            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(availableGenres.value, (genre) => {
-                return vue.openBlock(), vue.createBlock(Checkbox.default, {
-                  key: genre._id,
-                  active: selectedGenres[genre._id],
-                  "onUpdate:active": ($event) => selectedGenres[genre._id] = $event,
-                  label: genre.name,
-                  class: "pd-small bg-white radius-medium"
-                }, null, 8, ["active", "onUpdate:active", "label"]);
-              }), 128))
-            ]))
-          ]),
-          vue.createElementVNode("div", _hoisted_11, [
-            _cache[20] || (_cache[20] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Publishing Status", -1)),
+          vue.createVNode(Block.default, { title: "Genres" }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(BlockMultiselect.default, {
+                modelValue: artist.genres,
+                "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => artist.genres = $event),
+                placeholder: "Search genres...",
+                multiple: true,
+                transform: (item) => ({ _id: item._id, name: item.name }),
+                store: {
+                  read: (options) => genres.actions.fetchGenres(options),
+                  state: genres.state
+                },
+                options: {
+                  rootOnly: false,
+                  excludeChildren: false,
+                  limit: 50
+                },
+                skeleton: {
+                  hide: false,
+                  horizontal: true,
+                  class: "radius-small",
+                  structure: [{
+                    block: "text",
+                    size: "large"
+                  }]
+                },
+                states: {
+                  empty: {
+                    title: "No genres found",
+                    description: "Try different search terms or create a new genre",
+                    class: "radius-small"
+                  }
+                },
+                key: "_id",
+                label: (item) => item.name,
+                classSearch: "bg-white radius-small",
+                classSelected: "bg-white pd-small radius-small",
+                classDropdown: "bg-white pd-small radius-medium bs-small",
+                classItem: "pd-small radius-small hover-bg-light cursor-pointer",
+                classFeed: "h-max-30r gap-thin flex-column flex o-scroll"
+              }, {
+                selected: vue.withCtx(({ item, clear }) => [
+                  vue.createElementVNode("div", _hoisted_7, [
+                    vue.createElementVNode("span", _hoisted_8, vue.toDisplayString((item == null ? void 0 : item.name) || item), 1),
+                    vue.createElementVNode("button", {
+                      onClick: vue.withModifiers(clear, ["stop"]),
+                      class: "i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+                    }, [
+                      vue.createVNode(IconCross.default, { class: "i-micro fill-white" })
+                    ], 8, _hoisted_9)
+                  ])
+                ]),
+                item: vue.withCtx(({ item }) => [
+                  vue.createElementVNode("div", _hoisted_10, [
+                    vue.createElementVNode("div", _hoisted_11, [
+                      vue.createElementVNode("p", _hoisted_12, vue.toDisplayString(item.name), 1),
+                      item.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_13, vue.toDisplayString(item.description), 1)) : vue.createCommentVNode("", true)
+                    ])
+                  ])
+                ]),
+                _: 1
+              }, 8, ["modelValue", "transform", "store", "label"])
+            ]),
+            _: 1
+          }),
+          vue.createElementVNode("div", _hoisted_14, [
+            _cache[19] || (_cache[19] = vue.createElementVNode("h3", { class: "h3 mn-b-medium" }, "Publishing Status", -1)),
             vue.createVNode(Select.default, {
               select: artist.status,
-              "onUpdate:select": _cache[11] || (_cache[11] = ($event) => artist.status = $event),
+              "onUpdate:select": _cache[12] || (_cache[12] = ($event) => artist.status = $event),
               options: statusOptions,
               label: "Status",
-              class: "mn-b-medium w-m-20r"
+              class: "bg-white radius-small pd-small mn-b-thin"
             }, null, 8, ["select"]),
             vue.createVNode(Checkbox.default, {
               active: artist.isVerified,
-              "onUpdate:active": _cache[12] || (_cache[12] = ($event) => artist.isVerified = $event),
+              "onUpdate:active": _cache[13] || (_cache[13] = ($event) => artist.isVerified = $event),
               label: "Verified Artist",
-              class: "mn-b-medium"
+              class: "bg-white radius-small pd-small mn-b-thin"
             }, null, 8, ["active"])
           ]),
-          vue.createElementVNode("div", _hoisted_12, [
+          vue.createElementVNode("div", _hoisted_15, [
             vue.createVNode(Button.default, {
-              onClick: _cache[13] || (_cache[13] = ($event) => _ctx.$router.go(-1)),
+              onClick: _cache[14] || (_cache[14] = ($event) => _ctx.$router.go(-1)),
               class: "bg-grey-nano t-black",
               showSucces: false,
               showLoader: false
             }, {
-              default: vue.withCtx(() => _cache[21] || (_cache[21] = [
+              default: vue.withCtx(() => _cache[20] || (_cache[20] = [
                 vue.createTextVNode(" Cancel ")
               ])),
               _: 1

package/dist/martyrs/src/modules/music/components/forms/ArtistForm.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArtistForm.vue.cjs","sources":["../../../../../../../src/modules/music/components/forms/ArtistForm.vue"],"sourcesContent":["<template>\n  <div class=\"pd-medium\">\n    <h2 class=\"h2 mn-b-medium\">{{ editMode ? 'Edit Artist' : 'Create Artist' }}</h2>\n    \n    <form @submit.prevent=\"submitForm\" class=\"cols-1 gap-medium\">\n      <!-- Basic Info Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Basic Information</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-medium\">\n          <!-- Artist Photo -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Artist Photo</p>\n            <UploadImage\n              v-model:photo=\"artist.photoUrl\"\n              uploadPath=\"artists/photos\"\n              class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n          \n          <!-- Artist Cover -->\n          <div>\n            <p class=\"p-semi mn-b-small\">Cover Image</p>\n            <UploadImage\n              v-model:photo=\"artist.coverUrl\"\n              uploadPath=\"artists/covers\"\n              class=\"w-100 h-15r radius-small o-hidden mn-b-small\"\n              @error=\"handleUploadError\"\n            />\n          </div>\n        </div>\n        \n        <!-- Name -->\n        <Field\n          v-model:field=\"artist.name\"\n          label=\"Name\"\n          placeholder=\"Enter artist name\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.name\"\n        />\n          <!-- URL -->\n        <Field\n          v-model:field=\"artist.url\"\n          label=\"URL\"\n          placeholder=\"Leave blank for auto-generation based on the artist name\"\n          class=\"bg-white radius-small pd-small  mn-b-small\"\n        />\n        \n        <!-- Bio -->\n        <Field\n          v-model:field=\"artist.bio\"\n          label=\"Biography\"\n          type=\"textarea\"\n          placeholder=\"Enter artist biography\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n          :validation=\"validation.bio\"\n        />\n        \n        <!-- Location -->\n        <Field\n          v-model:field=\"artist.location\"\n          label=\"Location\"\n          placeholder=\"e.g., Los Angeles, CA\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <!-- Website -->\n        <Field\n          v-model:field=\"artist.website\"\n          label=\"Website\"\n          placeholder=\"https://example.com\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n      \n      </div>\n      \n      <!-- Social Media Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Social Media</h3>\n        \n        <div class=\"cols-2 mobile:cols-1 gap-thin\">\n          <!-- Telegram -->\n          <Field\n            v-model:field=\"artist.socials.telegram\"\n            label=\"Telegram\"\n            placeholder=\"@username\"\n            class=\"bg-white radius-small pd-small\"\n          />\n          \n          <!-- Twitter -->\n          <Field\n            v-model:field=\"artist.socials.twitter\"\n            label=\"Twitter\"\n            placeholder=\"@username\"\n            class=\"bg-white radius-small pd-small\"\n          />\n          \n          <!-- Facebook -->\n          <Field\n            v-model:field=\"artist.socials.facebook\"\n            label=\"Facebook\"\n            placeholder=\"username or page-name\"\n            class=\"bg-white radius-small pd-small\"\n          />\n          \n          <!-- Instagram -->\n          <Field\n            v-model:field=\"artist.socials.instagram\"\n            label=\"Instagram\"\n            placeholder=\"@username\"\n            class=\"bg-white radius-small pd-small\"\n          />\n        </div>\n      </div>\n      \n      <!-- Genres Section (assuming genres are available) -->\n       <Block title=\"Genres\">\n        <BlockMultiselect\n          v-model=\"artist.genres\"\n          placeholder=\"Search genres...\"\n          :multiple=\"true\"\n          :transform=\"(item) => ({ _id: item._id, name: item.name })\"\n          :store=\"{\n            read: (options) => genresStore.actions.fetchGenres(options),\n            state: genresStore.state\n          }\"\n          :options=\"{\n            rootOnly: false,\n            excludeChildren: false,\n            limit: 50\n          }\"\n          :skeleton=\"{\n            hide: false,\n            horizontal: true,\n            class: 'radius-small',\n            structure: [{ \n              block: 'text', size: 'large'\n            }]\n          }\"\n          :states=\"{\n            empty: {\n              title: 'No genres found',\n              description: 'Try different search terms or create a new genre',\n              class: 'radius-small'\n            }\n          }\"\n          key=\"_id\"\n          :label=\"item => item.name\"\n          classSearch=\"bg-white radius-small\"\n          classSelected=\"bg-white pd-small radius-small\"\n          classDropdown=\"bg-white pd-small radius-medium bs-small\"\n          classItem=\"pd-small radius-small hover-bg-light cursor-pointer\"\n          classFeed=\"h-max-30r gap-thin flex-column flex o-scroll\"\n        >\n          <!-- Слот для выбранных жанров -->\n          <template #selected=\"{ item, clear }\">\n            <div class=\"flex-nowrap flex-v-center flex gap-thin\">\n              <span class=\"t-medium\">{{ item?.name || item }}</span>\n              <button \n                @click.stop=\"clear\"\n                class=\"i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1\"\n              >\n                <IconCross class=\"i-micro fill-white\" />\n              </button>\n            </div>\n          </template>\n          \n          <!-- Слот для элементов в списке -->\n          <template #item=\"{ item }\">\n            <div class=\"flex-nowrap flex-v-center flex\">\n              <div class=\"w-100\">\n                <p class=\"t-medium\">{{ item.name }}</p>\n                <p v-if=\"item.description\" class=\"t-small t-transp\">{{ item.description }}</p>\n              </div>\n            </div>\n          </template>\n        </BlockMultiselect>\n      </Block>\n      \n      <!-- Status Section -->\n      <div class=\"bg-light pd-medium radius-medium\">\n        <h3 class=\"h3 mn-b-medium\">Publishing Status</h3>\n        \n        <Select\n          v-model:select=\"artist.status\"\n          :options=\"statusOptions\"\n          label=\"Status\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n        \n        <Checkbox\n          v-model:active=\"artist.isVerified\"\n          label=\"Verified Artist\"\n          class=\"bg-white radius-small pd-small mn-b-thin\"\n        />\n      </div>\n      \n      <!-- Submit Button -->\n      <div class=\"flex flex-justify-between\">\n        <Button\n          @click=\"$router.go(-1)\"\n          class=\"bg-grey-nano t-black\"\n          :showSucces=\"false\"\n          :showLoader=\"false\"\n        >\n          Cancel\n        </Button>\n        \n        <Button\n          :submit=\"submitForm\"\n          class=\"bg-main t-black\"\n          :text=\"{\n            success: editMode ? 'Updated!' : 'Created!'\n          }\"\n        >\n          {{ editMode ? 'Update Artist' : 'Create Artist' }}\n        </Button>\n      </div>\n    </form>\n  </div>\n</template>\n\n<script setup>\nimport { ref, reactive, onMounted, computed, watch } from 'vue';\nimport { useRouter, useRoute } from 'vue-router';\n\n// Import Martyrs components\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Block from '@martyrs/src/components/Block/Block.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue';\nimport Select from '@martyrs/src/components/Select/Select.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\n\n\nimport BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';\nimport IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';\n\n// Import store\nimport * as artistsStore from '../../store/artists';\nimport * as genresStore from '../../store/genres';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\nimport * as auth from '@martyrs/src/modules/auth/views/store/auth.js';\n\n// Props\nconst props = defineProps({\n  editMode: {\n    type: Boolean,\n    default: false\n  },\n  url: {\n    type: String,\n    default: ''\n  }\n});\n\n// Router and route\nconst router = useRouter();\nconst route = useRoute();\n\n// State\nconst artist = reactive({\n  name: '',\n  bio: '',\n  photoUrl: '',\n  coverUrl: '',\n  website: '',\n  location: '',\n  isVerified: false,\n  status: 'draft',\n  socials: {\n    telegram: '',\n    twitter: '',\n    facebook: '',\n    instagram: ''\n  },\n  url: '',\n  genres: []\n});\n\nconst validation = reactive({\n  name: false,\n  bio: false\n});\n\n// Track if URL was manually entered\nconst urlManuallySet = ref(false);\n\n// Function to generate URL-friendly slug from text\nconst generateSlug = (text) => {\n  if (!text) return '';\n  return text\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '') // Remove special characters\n    .replace(/\\s+/g, '-') // Replace spaces with hyphens\n    .replace(/-+/g, '-') // Replace multiple hyphens with single\n    .trim('-'); // Remove leading/trailing hyphens\n};\n\n// Watch for changes in artist name to auto-generate URL\nwatch(() => artist.name, (newName) => {\n  // Only auto-generate if URL hasn't been manually set and we're not in edit mode\n  if (!urlManuallySet.value && !props.editMode) {\n    artist.url = generateSlug(newName);\n  }\n});\n\n// Watch for manual changes to URL field\nwatch(() => artist.url, (newUrl, oldUrl) => {\n  // If user manually changes URL, mark as manually set\n  if (newUrl !== generateSlug(artist.name)) {\n    urlManuallySet.value = true;\n  }\n});\n\n// Status options\nconst statusOptions = [\n  'draft',\n  'published',\n  'archived'\n];\n\n\nconst fetchArtist = async () => {\n  if (!props.url) return;\n  \n  try {\n    const fetchedArtist = await artistsStore.actions.fetchArtistByUrl(props.url);\n    \n    if (!fetchedArtist) {\n      globals.actions.setError({\n        message: 'Artist not found'\n      });\n      return;\n    }\n    \n    // Update local artist data\n    Object.assign(artist, {\n      name: fetchedArtist.name || '',\n      bio: fetchedArtist.bio || '',\n      photoUrl: fetchedArtist.photoUrl || '',\n      coverUrl: fetchedArtist.coverUrl || '',\n      website: fetchedArtist.website || '',\n      location: fetchedArtist.location || '',\n      isVerified: fetchedArtist.isVerified || false,\n      status: fetchedArtist.status || 'draft',\n      url: fetchedArtist.url || '',\n      genres: fetchedArtist.genres || [],\n      _id: fetchedArtist._id,\n      socials: {\n        telegram: fetchedArtist.socials?.telegram || '',\n        twitter: fetchedArtist.socials?.twitter || '',\n        facebook: fetchedArtist.socials?.facebook || '',\n        instagram: fetchedArtist.socials?.instagram || ''\n      }\n    });\n    \n  } catch (error) {\n    console.error('Error fetching artist:', error);\n    globals.actions.setError({\n      message: 'Failed to load artist details'\n    });\n  }\n};\n\nconst validateForm = () => {\n  let isValid = true;\n  \n  // Validate name\n  if (!artist.name.trim()) {\n    validation.name = {\n      message: 'Artist name is required'\n    };\n    isValid = false;\n  } else {\n    validation.name = false;\n  }\n  \n  // Validate bio\n  if (artist.bio && artist.bio.length > 2000) {\n    validation.bio = {\n      message: 'Biography is too long (max 2000 characters)'\n    };\n    isValid = false;\n  } else {\n    validation.bio = false;\n  }\n  \n  return isValid;\n};\n\nconst submitForm = async () => {\n  if (!validateForm()) {\n    return;\n  }\n  \n  try {\n    // Prepare data for submission\n    const formData = {\n      ...artist,\n      genres: artist.genres.map(genre => genre._id || genre)\n    };\n    \n    // Add ownership data if creating new artist\n    if (!props.editMode) {\n      formData.owner = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n      formData.creator = {\n        type: 'user',\n        target: auth.state.user._id\n      };\n    }\n    \n    let result;\n    if (props.editMode) {\n      result = await artistsStore.actions.updateArtist(formData);\n    } else {\n      result = await artistsStore.actions.createArtist(formData);\n    }\n    \n    // Navigate to artist detail page\n    setTimeout(() => {\n      router.push({\n        name: 'artist',\n        params: { url: result.url }\n      });\n    }, 1000);\n    \n  } catch (error) {\n    console.error('Error saving artist:', error);\n    globals.actions.setError({\n      message: 'Failed to save artist'\n    });\n  }\n};\n\nconst handleUploadError = (error) => {\n  console.error('Upload error:', error);\n  globals.actions.setError({\n    message: 'Error uploading image'\n  });\n};\n\n// Lifecycle hooks\nonMounted(async () => {\n  if (props.editMode) {\n    await fetchArtist();\n    // Mark URL as manually set in edit mode to prevent auto-generation\n    urlManuallySet.value = true;\n  }\n});\n</script>"],"names":["useRouter","useRoute","reactive","ref","watch","artistsStore.actions","globals.actions","auth.state","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwPA,UAAM,QAAQ;AAYd,UAAM,SAASA,UAAAA,UAAW;AACZC,cAAQ,SAAA;AAGtB,UAAM,SAASC,IAAAA,SAAS;AAAA,MACtB,MAAM;AAAA,MACN,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAW;AAAA,MACZ;AAAA,MACD,KAAK;AAAA,MACL,QAAQ,CAAA;AAAA,IACV,CAAC;AAED,UAAM,aAAaA,IAAAA,SAAS;AAAA,MAC1B,MAAM;AAAA,MACN,KAAK;AAAA,IACP,CAAC;AAGD,UAAM,iBAAiBC,IAAG,IAAC,KAAK;AAGhC,UAAM,eAAe,CAAC,SAAS;AAC7B,UAAI,CAAC,KAAM,QAAO;AAClB,aAAO,KACJ,YAAW,EACX,QAAQ,iBAAiB,EAAE,EAC3B,QAAQ,QAAQ,GAAG,EACnB,QAAQ,OAAO,GAAG,EAClB,KAAK,GAAG;AAAA,IACb;AAGAC,QAAK,MAAC,MAAM,OAAO,MAAM,CAAC,YAAY;AAEpC,UAAI,CAAC,eAAe,SAAS,CAAC,MAAM,UAAU;AAC5C,eAAO,MAAM,aAAa,OAAO;AAAA,MACrC;AAAA,IACA,CAAC;AAGDA,QAAK,MAAC,MAAM,OAAO,KAAK,CAAC,QAAQ,WAAW;AAE1C,UAAI,WAAW,aAAa,OAAO,IAAI,GAAG;AACxC,uBAAe,QAAQ;AAAA,MAC3B;AAAA,IACA,CAAC;AAGD,UAAM,gBAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAGA,UAAM,cAAc,YAAY;;AAC9B,UAAI,CAAC,MAAM,IAAK;AAEhB,UAAI;AACF,cAAM,gBAAgB,MAAMC,QAAAA,QAAqB,iBAAiB,MAAM,GAAG;AAE3E,YAAI,CAAC,eAAe;AAClBC,kBAAAA,QAAgB,SAAS;AAAA,YACvB,SAAS;AAAA,UACjB,CAAO;AACD;AAAA,QACN;AAGI,eAAO,OAAO,QAAQ;AAAA,UACpB,MAAM,cAAc,QAAQ;AAAA,UAC5B,KAAK,cAAc,OAAO;AAAA,UAC1B,UAAU,cAAc,YAAY;AAAA,UACpC,UAAU,cAAc,YAAY;AAAA,UACpC,SAAS,cAAc,WAAW;AAAA,UAClC,UAAU,cAAc,YAAY;AAAA,UACpC,YAAY,cAAc,cAAc;AAAA,UACxC,QAAQ,cAAc,UAAU;AAAA,UAChC,KAAK,cAAc,OAAO;AAAA,UAC1B,QAAQ,cAAc,UAAU,CAAE;AAAA,UAClC,KAAK,cAAc;AAAA,UACnB,SAAS;AAAA,YACP,YAAU,mBAAc,YAAd,mBAAuB,aAAY;AAAA,YAC7C,WAAS,mBAAc,YAAd,mBAAuB,YAAW;AAAA,YAC3C,YAAU,mBAAc,YAAd,mBAAuB,aAAY;AAAA,YAC7C,aAAW,mBAAc,YAAd,mBAAuB,cAAa;AAAA,UACvD;AAAA,QACA,CAAK;AAAA,MAEF,SAAQ,OAAO;AACd,gBAAQ,MAAM,0BAA0B,KAAK;AAC7CA,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACL;AAAA,IACA;AAEA,UAAM,eAAe,MAAM;AACzB,UAAI,UAAU;AAGd,UAAI,CAAC,OAAO,KAAK,QAAQ;AACvB,mBAAW,OAAO;AAAA,UAChB,SAAS;AAAA,QACV;AACD,kBAAU;AAAA,MACd,OAAS;AACL,mBAAW,OAAO;AAAA,MACtB;AAGE,UAAI,OAAO,OAAO,OAAO,IAAI,SAAS,KAAM;AAC1C,mBAAW,MAAM;AAAA,UACf,SAAS;AAAA,QACV;AACD,kBAAU;AAAA,MACd,OAAS;AACL,mBAAW,MAAM;AAAA,MACrB;AAEE,aAAO;AAAA,IACT;AAEA,UAAM,aAAa,YAAY;AAC7B,UAAI,CAAC,aAAY,GAAI;AACnB;AAAA,MACJ;AAEE,UAAI;AAEF,cAAM,WAAW;AAAA,UACf,GAAG;AAAA,UACH,QAAQ,OAAO,OAAO,IAAI,WAAS,MAAM,OAAO,KAAK;AAAA,QACtD;AAGD,YAAI,CAAC,MAAM,UAAU;AACnB,mBAAS,QAAQ;AAAA,YACf,MAAM;AAAA,YACN,QAAQC,KAAU,MAAC,KAAK;AAAA,UACzB;AACD,mBAAS,UAAU;AAAA,YACjB,MAAM;AAAA,YACN,QAAQA,KAAU,MAAC,KAAK;AAAA,UACzB;AAAA,QACP;AAEI,YAAI;AACJ,YAAI,MAAM,UAAU;AAClB,mBAAS,MAAMF,QAAAA,QAAqB,aAAa,QAAQ;AAAA,QAC/D,OAAW;AACL,mBAAS,MAAMA,QAAAA,QAAqB,aAAa,QAAQ;AAAA,QAC/D;AAGI,mBAAW,MAAM;AACf,iBAAO,KAAK;AAAA,YACV,MAAM;AAAA,YACN,QAAQ,EAAE,KAAK,OAAO,IAAG;AAAA,UACjC,CAAO;AAAA,QACF,GAAE,GAAI;AAAA,MAER,SAAQ,OAAO;AACd,gBAAQ,MAAM,wBAAwB,KAAK;AAC3CC,gBAAAA,QAAgB,SAAS;AAAA,UACvB,SAAS;AAAA,QACf,CAAK;AAAA,MACL;AAAA,IACA;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,cAAQ,MAAM,iBAAiB,KAAK;AACpCA,cAAAA,QAAgB,SAAS;AAAA,QACvB,SAAS;AAAA,MACb,CAAG;AAAA,IACH;AAGAE,QAAAA,UAAU,YAAY;AACpB,UAAI,MAAM,UAAU;AAClB,cAAM,YAAa;AAEnB,uBAAe,QAAQ;AAAA,MAC3B;AAAA,IACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}