@tager/admin-blog 0.3.23 → 0.3.29

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { request, useResource, notEmpty, isNotNullish, useResourceDelete, createId, convertRequestErrorToMap, urlTranslit, i18n } from '@tager/admin-services';
-import { onMounted, computed, ref, watch, defineComponent } from '@vue/composition-api';
-import { getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, useDataTable, ShortCodeConstructor, FormFooter, createTabErrorFinder } from '@tager/admin-ui';
+import { request, useResource, FETCH_STATUSES, notEmpty, isNotNullish, useResourceDelete, useResourceClone, createId, convertRequestErrorToMap, urlTranslit, getWebsiteOrigin, i18n } from '@tager/admin-services';
+import { onMounted, watch, computed, ref, defineComponent } from '@vue/composition-api';
+import { getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, useTranslation, useDataTable, ShortCodeConstructor, FormFooter, createTabErrorFinder } from '@tager/admin-ui';
 import { compile } from 'path-to-regexp';
 import { universalFieldUtils, DynamicField } from '@tager/admin-dynamic-field';
 
@@ -37,7 +37,7 @@ const EN = {
     actions: 'Actions',
     updatePost: 'Update post',
     title: 'Title',
-    URLAlias: 'URL alias',
+    link: 'Link',
     excerpt: 'Excerpt',
     body: 'Body',
     defaultCategory: 'Default Category',
@@ -68,6 +68,15 @@ const EN = {
     blogCategoryWasSuccessfullyUpdated: 'Blog category was successfully updated',
     blogCategoryCreationWasFailed: 'Blog category creation was failed',
     blogCategoryUpdateWasFailed: 'Blog category update was failed',
+    clone: 'Clone',
+    cloneConfirm: 'Are you sure you want to clone the page?',
+    cloneSuccess: 'Page have copied successfully',
+    cloneFailure: 'Page copy failure',
+    tabs: {
+        common: 'Common',
+        seo: 'SEO',
+    },
+    parentCategory: 'Parent category',
 };
 
 const RU = {
@@ -89,7 +98,7 @@ const RU = {
     edit: 'Редактировать',
     remove: 'Удалить',
     postsByCategory: 'Посты по категориям',
-    name: 'Имя',
+    name: 'Название',
     image: 'Изображение',
     language: 'Язык',
     languages: 'Языки',
@@ -103,7 +112,7 @@ const RU = {
     actions: 'Действия',
     updatePost: 'Обновить пост',
     title: 'Заголовок',
-    URLAlias: 'URL',
+    link: 'Ссылка',
     excerpt: 'Краткое описание',
     defaultCategory: 'Категория по-умолчанию',
     body: 'Содержание',
@@ -134,6 +143,15 @@ const RU = {
     blogCategoryWasSuccessfullyUpdated: 'Категория блога успешно обновлена',
     blogCategoryCreationWasFailed: 'Не удалось создать категорию блога',
     blogCategoryUpdateWasFailed: 'Не удалось обновить категорию блога',
+    clone: 'Клонировать',
+    cloneConfirm: 'Вы уверены, что хотите создать копию страницы?',
+    cloneSuccess: 'Копия страницы успешно создана',
+    cloneFailure: 'Ошибка копирования страницы',
+    tabs: {
+        common: 'Общие',
+        seo: 'SEO',
+    },
+    parentCategory: 'Родительская категория',
 };
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -2003,203 +2021,848 @@ function stubFalse() {
 module.exports = isEqual;
 });
 
-/** Blog Posts */
-function getBlogPostList(params) {
-    return request.get({ path: '/admin/blog/posts', params });
-}
-function getBlogPostCount() {
-    return request.get({ path: '/admin/blog/posts/count' });
-}
-function getBlogPost(postId) {
-    return request.get({ path: `/admin/blog/posts/${postId}` });
-}
-function createBlogPost(payload) {
-    return request.post({ path: '/admin/blog/posts', body: payload });
-}
-function updateBlogPost(postId, payload) {
-    return request.put({ path: `/admin/blog/posts/${postId}`, body: payload });
-}
-function deleteBlogPost(postId) {
-    return request.delete({ path: `/admin/blog/posts/${postId}` });
-}
-/** Blog Categories */
-function getBlogCategoryList(params) {
-    return request.get({ path: '/admin/blog/categories', params });
-}
-function getBlogCategory(categoryId) {
-    return request.get({ path: `/admin/blog/categories/${categoryId}` });
-}
-function createBlogCategory(payload) {
-    return request.post({ path: '/admin/blog/categories', body: payload });
-}
-function updateBlogCategory(categoryId, payload) {
-    return request.put({
-        path: `/admin/blog/categories/${categoryId}`,
-        body: payload,
-    });
-}
-function deleteBlogCategory(categoryId) {
-    return request.delete({
-        path: `/admin/blog/categories/${categoryId}`,
-    });
-}
-function moveBlogCategory(categoryId, direction) {
-    return request.post({
-        path: `/admin/blog/categories/move/${categoryId}/${direction}`,
-    });
-}
-function getBlogModuleConfig() {
-    return request.get({
-        path: `/admin/blog/module-info`,
-    });
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as references for various `Number` constants. */
+var INFINITY = 1 / 0,
+    MAX_SAFE_INTEGER = 9007199254740991;
+
+/** `Object#toString` result references. */
+var argsTag = '[object Arguments]',
+    funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]',
+    symbolTag = '[object Symbol]';
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+/**
+ * A faster alternative to `Function#apply`, this function invokes `func`
+ * with the `this` binding of `thisArg` and the arguments of `args`.
+ *
+ * @private
+ * @param {Function} func The function to invoke.
+ * @param {*} thisArg The `this` binding of `func`.
+ * @param {Array} args The arguments to invoke `func` with.
+ * @returns {*} Returns the result of `func`.
+ */
+function apply(func, thisArg, args) {
+  switch (args.length) {
+    case 0: return func.call(thisArg);
+    case 1: return func.call(thisArg, args[0]);
+    case 2: return func.call(thisArg, args[0], args[1]);
+    case 3: return func.call(thisArg, args[0], args[1], args[2]);
+  }
+  return func.apply(thisArg, args);
 }
 
-const BLOG_ROUTE_PATHS = {
-    POST_LIST: '/blog/posts',
-    POST_FORM: '/blog/posts/:postId',
-    CATEGORY_LIST: '/blog/categories',
-    CATEGORY_FORM: '/blog/categories/:categoryId',
-};
-function getBlogPostListUrl() {
-    return BLOG_ROUTE_PATHS.POST_LIST;
-}
-function getBlogPostFormUrl(params) {
-    return compile(BLOG_ROUTE_PATHS.POST_FORM)({ postId: params.postId });
-}
-function getBlogCategoryListUrl() {
-    return BLOG_ROUTE_PATHS.CATEGORY_LIST;
-}
-function getBlogCategoryFormUrl(params) {
-    return compile(BLOG_ROUTE_PATHS.CATEGORY_FORM)({
-        categoryId: params.categoryId,
-    });
+/**
+ * A specialized version of `_.map` for arrays without support for iteratee
+ * shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ */
+function arrayMap(array, iteratee) {
+  var index = -1,
+      length = array ? array.length : 0,
+      result = Array(length);
+
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
+  }
+  return result;
 }
 
-function useModuleConfig(params) {
-    const [fetchModuleConfig, resource] = useResource({
-        fetchResource: getBlogModuleConfig,
-        initialValue: null,
-        context: params.context,
-        resourceName: 'Module configuration',
-    });
-    onMounted(() => {
-        fetchModuleConfig();
-    });
-    return resource;
+/**
+ * Appends the elements of `values` to `array`.
+ *
+ * @private
+ * @param {Array} array The array to modify.
+ * @param {Array} values The values to append.
+ * @returns {Array} Returns `array`.
+ */
+function arrayPush(array, values) {
+  var index = -1,
+      length = values.length,
+      offset = array.length;
+
+  while (++index < length) {
+    array[offset + index] = values[index];
+  }
+  return array;
 }
 
-function useBlogPostList(params) {
-    const [fetchBlogPostList, resource] = useResource({
-        fetchResource: () => getBlogPostList({ pageNumber: 1, pageSize: 99999 }),
-        initialValue: [],
-        context: params.context,
-        resourceName: 'Blog post list',
-    });
-    onMounted(() => {
-        fetchBlogPostList();
-    });
-    return resource;
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/** Built-in value references. */
+var Symbol = root.Symbol,
+    propertyIsEnumerable = objectProto.propertyIsEnumerable,
+    spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max;
+
+/**
+ * The base implementation of `_.flatten` with support for restricting flattening.
+ *
+ * @private
+ * @param {Array} array The array to flatten.
+ * @param {number} depth The maximum recursion depth.
+ * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
+ * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.
+ * @param {Array} [result=[]] The initial result value.
+ * @returns {Array} Returns the new flattened array.
+ */
+function baseFlatten(array, depth, predicate, isStrict, result) {
+  var index = -1,
+      length = array.length;
+
+  predicate || (predicate = isFlattenable);
+  result || (result = []);
+
+  while (++index < length) {
+    var value = array[index];
+    if (depth > 0 && predicate(value)) {
+      if (depth > 1) {
+        // Recursively flatten arrays (susceptible to call stack limits).
+        baseFlatten(value, depth - 1, predicate, isStrict, result);
+      } else {
+        arrayPush(result, value);
+      }
+    } else if (!isStrict) {
+      result[result.length] = value;
+    }
+  }
+  return result;
 }
 
-function useBlogCategoryList(params) {
-    const [fetchBlogCategoryList, resource] = useResource({
-        fetchResource: getBlogCategoryList,
-        initialValue: [],
-        context: params.context,
-        resourceName: 'Blog category list',
-    });
-    onMounted(() => {
-        fetchBlogCategoryList();
-    });
-    return resource;
+/**
+ * The base implementation of `_.pick` without support for individual
+ * property identifiers.
+ *
+ * @private
+ * @param {Object} object The source object.
+ * @param {string[]} props The property identifiers to pick.
+ * @returns {Object} Returns the new object.
+ */
+function basePick(object, props) {
+  object = Object(object);
+  return basePickBy(object, props, function(value, key) {
+    return key in object;
+  });
 }
 
-function convertPostList(postList, selectedCategory, languages) {
-    return postList
-        .filter((post) => selectedCategory
-        ? post.categories.some(({ id }) => id === selectedCategory.id)
-        : true)
-        .map((post) => {
-        if (languages.length > 0) {
-            const foundLanguage = languages.find(({ id }) => id === post.language);
-            return Object.assign(Object.assign({}, post), { language: foundLanguage ? foundLanguage.name : post.language });
-        }
-        return post;
-    });
-}
-function getPostTableColumnDefs(moduleConfig, t) {
-    const isLangSpecific = moduleConfig
-        ? moduleConfig.languages.length > 0
-        : false;
-    const COLUMN_DEFS = [
-        {
-            id: 1,
-            name: 'ID',
-            field: 'id',
-            style: { width: '50px', textAlign: 'center' },
-            headStyle: { width: '50px', textAlign: 'center' },
-        },
-        {
-            id: 2,
-            name: t('blog:name'),
-            field: 'name',
-            type: 'name',
-            format: ({ row }) => ({
-                adminLink: {
-                    text: row.title,
-                    url: getBlogPostFormUrl({ postId: row.id }),
-                },
-                websiteLink: {
-                    text: row.url,
-                    url: [
-                        process.env.VUE_APP_WEBSITE_URL || window.location.origin,
-                        row.url,
-                    ].join(''),
-                },
-            }),
-        },
-        {
-            id: 3,
-            name: t('blog:image'),
-            field: 'image',
-            type: 'image',
-            style: { width: '250px' },
-            headStyle: { width: '250px' },
-        },
-        isLangSpecific
-            ? { id: 4, name: t('blog:language'), field: 'language' }
-            : null,
-        { id: 5, name: t('blog:date'), field: 'date', type: 'date' },
-        {
-            id: 6,
-            name: t('blog:categories'),
-            field: 'categories',
-            format: ({ row }) => row.categories.map((category) => category.name).join(', '),
-        },
-        {
-            id: 7,
-            name: t('blog:actions'),
-            field: 'actions',
-            style: { whiteSpace: 'nowrap', width: '120px' },
-            headStyle: { whiteSpace: 'nowrap', width: '120px' },
-        },
-    ];
-    return COLUMN_DEFS.filter(notEmpty);
+/**
+ * The base implementation of  `_.pickBy` without support for iteratee shorthands.
+ *
+ * @private
+ * @param {Object} object The source object.
+ * @param {string[]} props The property identifiers to pick from.
+ * @param {Function} predicate The function invoked per property.
+ * @returns {Object} Returns the new object.
+ */
+function basePickBy(object, props, predicate) {
+  var index = -1,
+      length = props.length,
+      result = {};
+
+  while (++index < length) {
+    var key = props[index],
+        value = object[key];
+
+    if (predicate(value, key)) {
+      result[key] = value;
+    }
+  }
+  return result;
 }
 
-var FilterTypes;
-(function (FilterTypes) {
-    FilterTypes["CATEGORY"] = "category";
-    FilterTypes["LANGUAGE"] = "language";
-    FilterTypes["FROM_DATE"] = "from-date";
-    FilterTypes["TO_DATE"] = "to-date";
-})(FilterTypes || (FilterTypes = {}));
+/**
+ * The base implementation of `_.rest` which doesn't validate or coerce arguments.
+ *
+ * @private
+ * @param {Function} func The function to apply a rest parameter to.
+ * @param {number} [start=func.length-1] The start position of the rest parameter.
+ * @returns {Function} Returns the new function.
+ */
+function baseRest(func, start) {
+  start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
+  return function() {
+    var args = arguments,
+        index = -1,
+        length = nativeMax(args.length - start, 0),
+        array = Array(length);
+
+    while (++index < length) {
+      array[index] = args[start + index];
+    }
+    index = -1;
+    var otherArgs = Array(start + 1);
+    while (++index < start) {
+      otherArgs[index] = args[index];
+    }
+    otherArgs[start] = array;
+    return apply(func, this, otherArgs);
+  };
+}
+
+/**
+ * Checks if `value` is a flattenable `arguments` object or array.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.
+ */
+function isFlattenable(value) {
+  return isArray(value) || isArguments(value) ||
+    !!(spreadableSymbol && value && value[spreadableSymbol]);
+}
+
+/**
+ * Converts `value` to a string key if it's not a string or symbol.
+ *
+ * @private
+ * @param {*} value The value to inspect.
+ * @returns {string|symbol} Returns the key.
+ */
+function toKey(value) {
+  if (typeof value == 'string' || isSymbol(value)) {
+    return value;
+  }
+  var result = (value + '');
+  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+}
+
+/**
+ * Checks if `value` is likely an `arguments` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArguments(function() { return arguments; }());
+ * // => true
+ *
+ * _.isArguments([1, 2, 3]);
+ * // => false
+ */
+function isArguments(value) {
+  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
+  return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
+    (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
+}
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+var isArray = Array.isArray;
+
+/**
+ * Checks if `value` is array-like. A value is considered array-like if it's
+ * not a function and has a `value.length` that's an integer greater than or
+ * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+ * @example
+ *
+ * _.isArrayLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLike(document.body.children);
+ * // => true
+ *
+ * _.isArrayLike('abc');
+ * // => true
+ *
+ * _.isArrayLike(_.noop);
+ * // => false
+ */
+function isArrayLike(value) {
+  return value != null && isLength(value.length) && !isFunction(value);
+}
+
+/**
+ * This method is like `_.isArrayLike` except that it also checks if `value`
+ * is an object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array-like object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArrayLikeObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLikeObject(document.body.children);
+ * // => true
+ *
+ * _.isArrayLikeObject('abc');
+ * // => false
+ *
+ * _.isArrayLikeObject(_.noop);
+ * // => false
+ */
+function isArrayLikeObject(value) {
+  return isObjectLike(value) && isArrayLike(value);
+}
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 8-9 which returns 'object' for typed array and other constructors.
+  var tag = isObject(value) ? objectToString.call(value) : '';
+  return tag == funcTag || tag == genTag;
+}
+
+/**
+ * Checks if `value` is a valid array-like length.
+ *
+ * **Note:** This method is loosely based on
+ * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
+ * @example
+ *
+ * _.isLength(3);
+ * // => true
+ *
+ * _.isLength(Number.MIN_VALUE);
+ * // => false
+ *
+ * _.isLength(Infinity);
+ * // => false
+ *
+ * _.isLength('3');
+ * // => false
+ */
+function isLength(value) {
+  return typeof value == 'number' &&
+    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return !!value && (type == 'object' || type == 'function');
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && objectToString.call(value) == symbolTag);
+}
+
+/**
+ * Creates an object composed of the picked `object` properties.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Object
+ * @param {Object} object The source object.
+ * @param {...(string|string[])} [props] The property identifiers to pick.
+ * @returns {Object} Returns the new object.
+ * @example
+ *
+ * var object = { 'a': 1, 'b': '2', 'c': 3 };
+ *
+ * _.pick(object, ['a', 'c']);
+ * // => { 'a': 1, 'c': 3 }
+ */
+var pick = baseRest(function(object, props) {
+  return object == null ? {} : basePick(object, arrayMap(baseFlatten(props, 1), toKey));
+});
+
+var lodash_pick = pick;
+
+function getUserProfile() {
+    return request.get({ path: '/admin/self' });
+}
+/** Blog Posts */
+function getPosts(params) {
+    return request.get({ path: '/admin/blog/posts', params });
+}
+function getPostsCount() {
+    return request.get({ path: '/admin/blog/posts/count' });
+}
+function getPost(postId) {
+    return request.get({ path: `/admin/blog/posts/${postId}` });
+}
+function clonePost(postId) {
+    return request.post({ path: `/admin/blog/posts/${postId}/clone` });
+}
+function createBlogPost(payload) {
+    return request.post({ path: '/admin/blog/posts', body: payload });
+}
+function updateBlogPost(postId, payload) {
+    return request.put({ path: `/admin/blog/posts/${postId}`, body: payload });
+}
+function deleteBlogPost(postId) {
+    return request.delete({ path: `/admin/blog/posts/${postId}` });
+}
+/** Blog Categories */
+function getCategories(params) {
+    return request.get({ path: '/admin/blog/categories', params });
+}
+function getCategory(categoryId) {
+    return request.get({ path: `/admin/blog/categories/${categoryId}` });
+}
+function createCategory(payload) {
+    return request.post({ path: '/admin/blog/categories', body: payload });
+}
+function updateCategory(categoryId, payload) {
+    return request.put({
+        path: `/admin/blog/categories/${categoryId}`,
+        body: payload,
+    });
+}
+function deleteCategory(categoryId) {
+    return request.delete({
+        path: `/admin/blog/categories/${categoryId}`,
+    });
+}
+function moveCategory(categoryId, direction) {
+    return request.post({
+        path: `/admin/blog/categories/move/${categoryId}/${direction}`,
+    });
+}
+function getModuleConfig() {
+    return request.get({
+        path: `/admin/blog/module-info`,
+    });
+}
+
+const BLOG_ROUTE_PATHS = {
+    POST_LIST: '/blog/posts',
+    POST_FORM: '/blog/posts/:postId',
+    CATEGORY_LIST: '/blog/categories',
+    CATEGORY_FORM: '/blog/categories/:categoryId',
+};
+function getBlogPostListUrl() {
+    return BLOG_ROUTE_PATHS.POST_LIST;
+}
+function getBlogPostFormUrl(params) {
+    return compile(BLOG_ROUTE_PATHS.POST_FORM)({ postId: params.postId });
+}
+function getBlogCategoryListUrl() {
+    return BLOG_ROUTE_PATHS.CATEGORY_LIST;
+}
+function getBlogCategoryFormUrl(params) {
+    return compile(BLOG_ROUTE_PATHS.CATEGORY_FORM)({
+        categoryId: params.categoryId,
+    });
+}
+
+function useFetchPosts(params) {
+    const [fetchPosts, resource] = useResource({
+        fetchResource: () => getPosts({ pageNumber: 1, pageSize: 99999 }),
+        initialValue: [],
+        context: params.context,
+        resourceName: 'Blog posts',
+    });
+    onMounted(() => {
+        fetchPosts();
+    });
+    return resource;
+}
+
+function useFetchCategory({ context, categoryId, isCreation, }) {
+    const [fetchCategory, resource] = useResource({
+        fetchResource: () => getCategory(categoryId.value),
+        initialValue: null,
+        context,
+        resourceName: 'Blog category',
+    });
+    onMounted(() => {
+        if (isCreation.value) {
+            return;
+        }
+        fetchCategory();
+    });
+    watch(categoryId, () => {
+        if (isCreation.value) {
+            return;
+        }
+        fetchCategory();
+    });
+    return resource;
+}
+
+function useFetchCategories({ context, }) {
+    const [fetchCategories, resource] = useResource({
+        fetchResource: getCategories,
+        initialValue: [],
+        context,
+        resourceName: 'Blog categories',
+    });
+    onMounted(() => {
+        fetchCategories();
+    });
+    return resource;
+}
+
+function useFetchModuleConfig({ context, }) {
+    const [fetchModuleConfig, resource] = useResource({
+        fetchResource: getModuleConfig,
+        initialValue: null,
+        context: context,
+        resourceName: 'Module configuration',
+    });
+    onMounted(() => {
+        fetchModuleConfig();
+    });
+    return resource;
+}
+
+function useStore(context) {
+    return context.root.$store;
+}
+
+const Scope = {
+    All: '*',
+    OrdersCreate: 'orders.create',
+    OrdersView: 'orders.view',
+    OrdersDelete: 'orders.delete',
+    RbacViewRoles: 'rbac.view-roles',
+    RbacEditRoles: 'rbac.edit-roles',
+    AdministratorsView: 'administrators.view',
+    AdministratorsEdit: 'administrators.edit',
+    AdministratorsDelete: 'administrators.delete',
+};
+
+const USER_MODULE_NAMESPACE = 'user';
+const USER_MUTATION_TYPES = {
+    PROFILE_REQUEST_STARTED: 'profileRequestStarted',
+    PROFILE_REQUEST_FULFILLED: 'profileRequestFulfilled',
+    PROFILE_REQUEST_REJECTED: 'profileRequestRejected',
+};
+const USER_ACTION_TYPES = {
+    FETCH_USER_PROFILE: 'fetchUserProfile',
+};
+const userGetters = {
+    userProfile(state) {
+        return state.profile;
+    },
+    userScopes(state) {
+        const roles = state.profile ? state.profile.roles : [];
+        const scopes = [];
+        roles.forEach((role) => {
+            scopes.push(...role.scopes);
+        });
+        return scopes;
+    },
+    userHasPermission: (state, getters) => (scope) => {
+        const scopes = getters.userScopes;
+        if (scopes.includes(Scope.All))
+            return true;
+        return scopes.includes(scope);
+    },
+};
+const userModule = {
+    namespaced: true,
+    state: {
+        profile: null,
+        status: FETCH_STATUSES.IDLE,
+    },
+    mutations: {
+        [USER_MUTATION_TYPES.PROFILE_REQUEST_STARTED](state) {
+            if (state.status === FETCH_STATUSES.IDLE) {
+                state.status = FETCH_STATUSES.LOADING;
+            }
+        },
+        [USER_MUTATION_TYPES.PROFILE_REQUEST_FULFILLED](state, user) {
+            if (state.status === FETCH_STATUSES.LOADING) {
+                state.status = FETCH_STATUSES.SUCCESS;
+                state.profile = user;
+            }
+        },
+        [USER_MUTATION_TYPES.PROFILE_REQUEST_REJECTED](state) {
+            if (state.status === FETCH_STATUSES.LOADING) {
+                state.status = FETCH_STATUSES.FAILURE;
+                state.profile = null;
+            }
+        },
+    },
+    actions: {
+        [USER_ACTION_TYPES.FETCH_USER_PROFILE](store) {
+            if (store.state.status !== FETCH_STATUSES.IDLE)
+                return;
+            store.commit(USER_MUTATION_TYPES.PROFILE_REQUEST_STARTED);
+            getUserProfile()
+                .then((response) => {
+                store.commit(USER_MUTATION_TYPES.PROFILE_REQUEST_FULFILLED, response.data);
+            })
+                .catch((error) => {
+                console.error(error);
+                store.commit(USER_MUTATION_TYPES.PROFILE_REQUEST_REJECTED);
+            });
+        },
+    },
+    getters: userGetters,
+};
+
+function namespace(namespace, name) {
+    return `${namespace}/${name}`;
+}
+function userNamespace(name) {
+    return namespace(USER_MODULE_NAMESPACE, name);
+}
+function generateNumberArray(length) {
+    return Array.from({ length }, (_, index) => index);
+}
+function getNameWithDepth(name, depth) {
+    return (generateNumberArray(depth)
+        .map(() => '—')
+        .join(' ') +
+        ' ' +
+        name);
+}
+
+function useUserPermission(context, scope) {
+    const store = useStore(context);
+    return computed(() => {
+        return store.getters[userNamespace('userHasPermission')](scope);
+    });
+}
+
+function convertPostList(postList, selectedCategory, languages) {
+    return postList
+        .filter((post) => selectedCategory
+        ? post.categories.some(({ id }) => id === selectedCategory.id)
+        : true)
+        .map((post) => {
+        if (languages.length > 0) {
+            const foundLanguage = languages.find(({ id }) => id === post.language);
+            return Object.assign(Object.assign({}, post), { language: foundLanguage ? foundLanguage.name : post.language });
+        }
+        return post;
+    });
+}
+function getPostTableColumnDefs(moduleConfig, t, canViewAdministrators) {
+    const isLangSpecific = moduleConfig
+        ? moduleConfig.languages.length > 0
+        : false;
+    const COLUMN_DEFS = [
+        {
+            id: 1,
+            name: 'ID',
+            field: 'id',
+            style: { width: '50px', textAlign: 'center' },
+            headStyle: { width: '50px', textAlign: 'center' },
+        },
+        {
+            id: 2,
+            name: t('blog:name'),
+            field: 'name',
+            type: 'name',
+            format: ({ row }) => ({
+                adminLink: {
+                    text: row.title,
+                    url: getBlogPostFormUrl({ postId: row.id }),
+                },
+                websiteLink: {
+                    text: row.url,
+                    url: [
+                        process.env.VUE_APP_WEBSITE_URL || window.location.origin,
+                        row.url,
+                    ].join(''),
+                },
+            }),
+        },
+        {
+            id: 3,
+            name: t('blog:image'),
+            field: 'image',
+            type: 'image',
+            style: { width: '250px' },
+            headStyle: { width: '250px' },
+        },
+        isLangSpecific
+            ? { id: 4, name: t('blog:language'), field: 'language' }
+            : null,
+        { id: 5, name: t('blog:date'), field: 'date', type: 'date' },
+        {
+            id: 6,
+            name: t('blog:categories'),
+            field: 'categories',
+            format: ({ row }) => row.categories.map((category) => category.name).join(', '),
+        },
+        canViewAdministrators
+            ? {
+                id: 7,
+                name: t('blog:actions'),
+                field: 'actions',
+                style: { whiteSpace: 'nowrap', width: '120px' },
+                headStyle: { whiteSpace: 'nowrap', width: '120px' },
+            }
+            : null,
+    ];
+    return COLUMN_DEFS.filter(notEmpty);
+}
+
+var FilterTypes;
+(function (FilterTypes) {
+    FilterTypes["CATEGORY"] = "category";
+    FilterTypes["LANGUAGE"] = "language";
+    FilterTypes["FROM_DATE"] = "from-date";
+    FilterTypes["TO_DATE"] = "to-date";
+})(FilterTypes || (FilterTypes = {}));
 const dateFormat = (date) => date.split('-').reverse().join('.');
 function useAdvancedSearch({ context, categoryList, languageList, }) {
     /** Category **/
-    const categoryOptionList = computed(() => categoryList.value.map(({ id, name }) => ({
+    const categoryOptionList = computed(() => categoryList.value.map(({ id, name, depth }) => ({
         value: String(id),
-        label: name,
+        label: getNameWithDepth(name, depth),
     })));
     const initialCategoryFilter = computed(() => {
         const queryValue = getFilterParamAsStringArray(context.root.$route.query, FilterTypes.CATEGORY);
@@ -2302,9 +2965,9 @@ function useAdvancedSearch({ context, categoryList, languageList, }) {
             return categoryOptionList.value;
         }
         const selectedList = categoryList.value.filter(({ language }) => languageFilter.value.some(({ value }) => value === language));
-        return selectedList.map(({ id, name }) => ({
+        return selectedList.map(({ id, name, depth }) => ({
             value: String(id),
-            label: name,
+            label: getNameWithDepth(name, depth),
         }));
     });
     return {
@@ -2321,18 +2984,20 @@ function useAdvancedSearch({ context, categoryList, languageList, }) {
 }
 
 var script = defineComponent({
-    name: 'BlogPostList',
+    name: 'Posts',
     setup(props, context) {
+        const { t } = useTranslation(context);
+        const canViewAdministrators = useUserPermission(context, Scope.AdministratorsView);
         const categoryId = computed(() => {
             var _a;
             return Array.isArray(context.root.$route.query.category)
                 ? (_a = context.root.$route.query.category[0]) !== null && _a !== void 0 ? _a : '' : context.root.$route.query.category;
         });
-        /** Fetch module config */
-        const { data: moduleConfig, loading: isModuleConfigLoading, } = useModuleConfig({ context });
+        /** Fetch module config **/
+        const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
         const languageList = computed(() => { var _a, _b; return (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []; });
-        /** Fetch category list */
-        const { data: categoryList, loading: isCategoryListLoading, } = useBlogCategoryList({ context });
+        /** Fetch category list **/
+        const { data: categoryList, loading: isCategoryListLoading, } = useFetchCategories({ context });
         const selectedCategory = computed(() => {
             var _a;
             return categoryId.value
@@ -2350,20 +3015,19 @@ var script = defineComponent({
             languageList,
         });
         const isLangSpecific = computed(() => languageOptionList.value.length > 1);
-        /** Fetch Post list */
+        /** Fetch Post list **/
         const { fetchEntityList: fetchPostList, isLoading: isPostLoading, rowData: postList, errorMessage, searchQuery, handleChange, pageNumber, pageCount, pageSize, } = useDataTable({
-            fetchEntityList: (params) => getBlogPostList(Object.assign({ query: params.searchQuery, pageNumber: params.pageNumber, pageSize: params.pageSize }, filterParams.value)),
+            fetchEntityList: (params) => getPosts(Object.assign({ query: params.searchQuery, pageNumber: params.pageNumber, pageSize: params.pageSize }, filterParams.value)),
             initialValue: [],
             context,
             resourceName: 'Blog post list',
             pageSize: 100,
         });
         watch(filterParams, () => {
-            var _a;
             if (isModuleConfigLoading.value || isCategoryListLoading.value) {
                 return;
             }
-            const newQuery = Object.assign(Object.assign({}, filterParams.value), { query: ((_a = context.root.$route.query.query) !== null && _a !== void 0 ? _a : '') });
+            const newQuery = Object.assign(Object.assign({}, lodash_pick(context.root.$route.query, ['query', 'pageNumber'])), filterParams.value);
             if (!lodash_isequal(context.root.$route.query, newQuery)) {
                 context.root.$router.replace({ query: newQuery });
                 fetchPostList();
@@ -2373,16 +3037,27 @@ var script = defineComponent({
             var _a, _b;
             return convertPostList(postList.value, selectedCategory.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []);
         });
-        const { handleResourceDelete, isDeleting } = useResourceDelete({
+        const isRowDataLoading = computed(() => isCategoryListLoading.value ||
+            isPostLoading.value ||
+            isModuleConfigLoading.value);
+        const { isDeleting, handleResourceDelete } = useResourceDelete({
             deleteResource: deleteBlogPost,
             resourceName: 'Post',
             onSuccess: fetchPostList,
             context,
         });
-        const isRowDataLoading = computed(() => isCategoryListLoading.value ||
-            isPostLoading.value ||
-            isModuleConfigLoading.value);
-        const columnDefs = computed(() => getPostTableColumnDefs(moduleConfig.value, context.root.$t));
+        const { isCloning, handleResourceClone } = useResourceClone({
+            cloneResource: clonePost,
+            confirmMessage: t('blog:cloneConfirm'),
+            successMessage: t('blog:cloneSuccess'),
+            failureMessage: t('blog:cloneFailure'),
+            onSuccessRedirectTo: (data) => `/posts/${data.id}`,
+            context,
+        });
+        function isBusy(postId) {
+            return isDeleting(postId) || isCloning(postId) || isRowDataLoading.value;
+        }
+        const columnDefs = computed(() => getPostTableColumnDefs(moduleConfig.value, context.root.$t, canViewAdministrators.value));
         return {
             columnDefs,
             rowData: displayedPostList,
@@ -2408,6 +3083,11 @@ var script = defineComponent({
             toDateFilter,
             tags,
             tagRemovalHandler,
+            // Permissions
+            canViewAdministrators,
+            // Clone
+            handleResourceClone,
+            isBusy,
         };
     },
 });
@@ -2552,11 +3232,13 @@ var __vue_render__ = function () {
     attrs: {
       title: _vm.pageTitle,
       "header-buttons": [
-        {
-          text: _vm.$t("blog:newPost"),
-          href: _vm.getBlogPostFormUrl({ postId: "create" }),
-        },
-      ],
+        _vm.canViewAdministrators
+          ? {
+              text: _vm.$t("blog:newPost"),
+              href: _vm.getBlogPostFormUrl({ postId: "create" }),
+            }
+          : null,
+      ].filter(Boolean),
     },
     scopedSlots: _vm._u([
       {
@@ -2699,7 +3381,7 @@ var __vue_render__ = function () {
                           attrs: {
                             variant: "icon",
                             title: _vm.$t("blog:edit"),
-                            disabled: _vm.isDeleting(row.id),
+                            disabled: _vm.isBusy(row.id),
                             href: _vm.getBlogPostFormUrl({ postId: row.id }),
                           },
                         },
@@ -2707,13 +3389,31 @@ var __vue_render__ = function () {
                         1
                       ),
                       _vm._v(" "),
+                      _c(
+                        "base-button",
+                        {
+                          attrs: {
+                            variant: "icon",
+                            title: _vm.$t("blog:clone"),
+                            disabled: _vm.isBusy(row.id),
+                          },
+                          on: {
+                            click: function ($event) {
+                              return _vm.handleResourceClone(row.id)
+                            },
+                          },
+                        },
+                        [_c("svg-icon", { attrs: { name: "contentCopy" } })],
+                        1
+                      ),
+                      _vm._v(" "),
                       _c(
                         "base-button",
                         {
                           attrs: {
                             variant: "icon",
                             title: _vm.$t("blog:remove"),
-                            disabled: _vm.isDeleting(row.id),
+                            disabled: _vm.isBusy(row.id),
                           },
                           on: {
                             click: function ($event) {
@@ -2742,11 +3442,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-e7aab2dc_0", { source: ".filters[data-v-e7aab2dc] {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters[data-v-e7aab2dc]:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter[data-v-e7aab2dc] {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n.date-label[data-v-e7aab2dc] {\n  margin-bottom: 0.5rem;\n}\n.date-content[data-v-e7aab2dc] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n/*# sourceMappingURL=PostList.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-blog/tager-admin-blog/src/views/Posts/PostList/PostList.vue","PostList.vue"],"names":[],"mappings":"AAmRA;EACA,aAAA;EACA,eAAA;AClRA;ADoRA;EACA,gBAAA;AClRA;ADqRA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;ACnRA;ADuRA;EACA,qBAAA;ACpRA;ADuRA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACpRA;;AAEA,uCAAuC","file":"PostList.vue","sourcesContent":["<template>\n  <page\n    :title=\"pageTitle\"\n    :header-buttons=\"[\n      {\n        text: $t('blog:newPost'),\n        href: getBlogPostFormUrl({ postId: 'create' }),\n      },\n    ]\"\n  >\n    <template v-slot:content>\n      <data-table\n        :column-defs=\"columnDefs\"\n        :row-data=\"rowData\"\n        :loading=\"isRowDataLoading\"\n        :error-message=\"errorMessage\"\n        :search-query=\"searchQuery\"\n        :pagination=\"{\n          pageNumber,\n          pageCount,\n          pageSize,\n          disabled: isRowDataLoading,\n        }\"\n        data-table=\"blog-post\"\n        @change=\"handleChange\"\n      >\n        <template v-slot:filters>\n          <advanced-search :tags=\"tags\" @click:tag=\"tagRemovalHandler\">\n            <div class=\"filters\">\n              <form-field-multi-select\n                v-model=\"categoryFilter\"\n                :options=\"categoryOptionList\"\n                name=\"categoryFilter\"\n                :searchable=\"true\"\n                :label=\"$t('blog:category')\"\n                class=\"filter\"\n              />\n\n              <form-field-multi-select\n                v-if=\"isLangSpecific\"\n                v-model=\"languageFilter\"\n                :options=\"languageOptionList\"\n                name=\"languageFilter\"\n                :searchable=\"true\"\n                :label=\"$t('blog:language')\"\n                class=\"filter\"\n              />\n\n              <div class=\"filter\">\n                <div class=\"date-label\">\n                  {{ $t('blog:dateOfPublication') }}\n                </div>\n\n                <div class=\"date-content\">\n                  <form-field\n                    v-model=\"fromDateFilter\"\n                    :label=\"$t('blog:From')\"\n                    name=\"fromDateFilter\"\n                    type=\"date\"\n                    :max=\"toDateFilter\"\n                  />\n\n                  <form-field\n                    v-model=\"toDateFilter\"\n                    :label=\"$t('blog:To')\"\n                    name=\"toDateFilter\"\n                    type=\"date\"\n                    :min=\"fromDateFilter\"\n                  />\n                </div>\n              </div>\n            </div>\n          </advanced-search>\n        </template>\n\n        <template v-slot:cell(actions)=\"{ row }\">\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('blog:edit')\"\n            :disabled=\"isDeleting(row.id)\"\n            :href=\"getBlogPostFormUrl({ postId: row.id })\"\n          >\n            <svg-icon name=\"edit\"></svg-icon>\n          </base-button>\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('blog:remove')\"\n            :disabled=\"isDeleting(row.id)\"\n            @click=\"handleResourceDelete(row.id)\"\n          >\n            <svg-icon name=\"delete\"></svg-icon>\n          </base-button>\n        </template>\n      </data-table>\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, watch } from '@vue/composition-api';\nimport isEqual from 'lodash.isequal';\n\nimport { ColumnDefinition, useDataTable } from '@tager/admin-ui';\nimport { Nullable, useResourceDelete } from '@tager/admin-services';\n\nimport { Category, Language, PostShort } from '../../../typings/model';\nimport { deleteBlogPost, getBlogPostList } from '../../../services/requests';\nimport { getBlogPostFormUrl } from '../../../constants/paths';\nimport { useModuleConfig, useBlogCategoryList } from '../../../hooks';\n\nimport { convertPostList, getPostTableColumnDefs } from './PostList.helpers';\nimport { useAdvancedSearch } from './hooks';\n\nexport default defineComponent({\n  name: 'BlogPostList',\n  setup(props, context) {\n    const categoryId = computed<string>(() => {\n      return Array.isArray(context.root.$route.query.category)\n        ? context.root.$route.query.category[0] ?? ''\n        : context.root.$route.query.category;\n    });\n\n    /** Fetch module config */\n    const {\n      data: moduleConfig,\n      loading: isModuleConfigLoading,\n    } = useModuleConfig({ context });\n\n    const languageList = computed<Language[]>(\n      () => moduleConfig.value?.languages ?? []\n    );\n\n    /** Fetch category list */\n    const {\n      data: categoryList,\n      loading: isCategoryListLoading,\n    } = useBlogCategoryList({ context });\n\n    const selectedCategory = computed<Nullable<Category>>(() =>\n      categoryId.value\n        ? categoryList.value.find(\n            ({ id }) => String(id) === String(categoryId.value)\n          ) ?? null\n        : null\n    );\n\n    const pageTitle = computed<string>(() => {\n      return selectedCategory.value\n        ? `${context.root.$t('blog:postsByCategory')} \"${\n            selectedCategory.value.name\n          }\"`\n        : context.root.$t('blog:posts');\n    });\n\n    /** Advanced search **/\n\n    const {\n      categoryFilter,\n      categoryOptionList,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      filterParams,\n      tags,\n      tagRemovalHandler,\n    } = useAdvancedSearch({\n      context,\n      categoryList,\n      languageList,\n    });\n\n    const isLangSpecific = computed<boolean>(\n      () => languageOptionList.value.length > 1\n    );\n\n    /** Fetch Post list */\n    const {\n      fetchEntityList: fetchPostList,\n      isLoading: isPostLoading,\n      rowData: postList,\n      errorMessage,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize,\n    } = useDataTable<PostShort>({\n      fetchEntityList: (params) =>\n        getBlogPostList({\n          query: params.searchQuery,\n          pageNumber: params.pageNumber,\n          pageSize: params.pageSize,\n          ...filterParams.value,\n        }),\n      initialValue: [],\n      context,\n      resourceName: 'Blog post list',\n      pageSize: 100,\n    });\n\n    watch(filterParams, () => {\n      if (isModuleConfigLoading.value || isCategoryListLoading.value) {\n        return;\n      }\n\n      const newQuery = {\n        ...filterParams.value,\n        query: (context.root.$route.query.query ?? '') as string,\n      };\n\n      if (!isEqual(context.root.$route.query, newQuery)) {\n        context.root.$router.replace({ query: newQuery });\n        fetchPostList();\n      }\n    });\n\n    const displayedPostList = computed<PostShort[]>(() =>\n      convertPostList(\n        postList.value,\n        selectedCategory.value,\n        moduleConfig.value?.languages ?? []\n      )\n    );\n\n    const { handleResourceDelete, isDeleting } = useResourceDelete({\n      deleteResource: deleteBlogPost,\n      resourceName: 'Post',\n      onSuccess: fetchPostList,\n      context,\n    });\n\n    const isRowDataLoading = computed<boolean>(\n      () =>\n        isCategoryListLoading.value ||\n        isPostLoading.value ||\n        isModuleConfigLoading.value\n    );\n\n    const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>\n      getPostTableColumnDefs(moduleConfig.value, context.root.$t)\n    );\n\n    return {\n      columnDefs,\n      rowData: displayedPostList,\n      handleResourceDelete,\n      isDeleting,\n      categoryList,\n      isRowDataLoading,\n      errorMessage,\n      getBlogPostFormUrl,\n      pageTitle,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize,\n\n      // Advanced search\n      categoryFilter,\n      categoryOptionList,\n      isLangSpecific,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      tags,\n      tagRemovalHandler,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"scss\">\n.filters {\n  display: flex;\n  margin: 0 -10px;\n\n  &:not(:first-child) {\n    margin-top: 10px;\n  }\n\n  .filter {\n    padding: 10px 10px 0;\n    width: 50%;\n    margin: 0;\n  }\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n</style>\n",".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n/*# sourceMappingURL=PostList.vue.map */"]}, media: undefined });
+    inject("data-v-7862c502_0", { source: ".filters[data-v-7862c502] {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters[data-v-7862c502]:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter[data-v-7862c502] {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n.date-label[data-v-7862c502] {\n  margin-bottom: 0.5rem;\n}\n.date-content[data-v-7862c502] {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n/*# sourceMappingURL=PostList.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-blog/tager-admin-blog/src/views/Posts/PostList/PostList.vue","PostList.vue"],"names":[],"mappings":"AAiVA;EACA,aAAA;EACA,eAAA;AChVA;ADkVA;EACA,gBAAA;AChVA;ADmVA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;ACjVA;ADqVA;EACA,qBAAA;AClVA;ADqVA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;AClVA;;AAEA,uCAAuC","file":"PostList.vue","sourcesContent":["<template>\n  <page\n    :title=\"pageTitle\"\n    :header-buttons=\"\n      [\n        canViewAdministrators\n          ? {\n              text: $t('blog:newPost'),\n              href: getBlogPostFormUrl({ postId: 'create' }),\n            }\n          : null,\n      ].filter(Boolean)\n    \"\n  >\n    <template v-slot:content>\n      <data-table\n        :column-defs=\"columnDefs\"\n        :row-data=\"rowData\"\n        :loading=\"isRowDataLoading\"\n        :error-message=\"errorMessage\"\n        :search-query=\"searchQuery\"\n        :pagination=\"{\n          pageNumber,\n          pageCount,\n          pageSize,\n          disabled: isRowDataLoading,\n        }\"\n        data-table=\"blog-post\"\n        @change=\"handleChange\"\n      >\n        <template v-slot:filters>\n          <advanced-search :tags=\"tags\" @click:tag=\"tagRemovalHandler\">\n            <div class=\"filters\">\n              <form-field-multi-select\n                v-model=\"categoryFilter\"\n                :options=\"categoryOptionList\"\n                name=\"categoryFilter\"\n                :searchable=\"true\"\n                :label=\"$t('blog:category')\"\n                class=\"filter\"\n              />\n\n              <form-field-multi-select\n                v-if=\"isLangSpecific\"\n                v-model=\"languageFilter\"\n                :options=\"languageOptionList\"\n                name=\"languageFilter\"\n                :searchable=\"true\"\n                :label=\"$t('blog:language')\"\n                class=\"filter\"\n              />\n\n              <div class=\"filter\">\n                <div class=\"date-label\">\n                  {{ $t('blog:dateOfPublication') }}\n                </div>\n\n                <div class=\"date-content\">\n                  <form-field\n                    v-model=\"fromDateFilter\"\n                    :label=\"$t('blog:From')\"\n                    name=\"fromDateFilter\"\n                    type=\"date\"\n                    :max=\"toDateFilter\"\n                  />\n\n                  <form-field\n                    v-model=\"toDateFilter\"\n                    :label=\"$t('blog:To')\"\n                    name=\"toDateFilter\"\n                    type=\"date\"\n                    :min=\"fromDateFilter\"\n                  />\n                </div>\n              </div>\n            </div>\n          </advanced-search>\n        </template>\n\n        <template v-slot:cell(actions)=\"{ row }\">\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('blog:edit')\"\n            :disabled=\"isBusy(row.id)\"\n            :href=\"getBlogPostFormUrl({ postId: row.id })\"\n          >\n            <svg-icon name=\"edit\" />\n          </base-button>\n\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('blog:clone')\"\n            :disabled=\"isBusy(row.id)\"\n            @click=\"handleResourceClone(row.id)\"\n          >\n            <svg-icon name=\"contentCopy\" />\n          </base-button>\n\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('blog:remove')\"\n            :disabled=\"isBusy(row.id)\"\n            @click=\"handleResourceDelete(row.id)\"\n          >\n            <svg-icon name=\"delete\" />\n          </base-button>\n        </template>\n      </data-table>\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, watch } from '@vue/composition-api';\nimport isEqual from 'lodash.isequal';\nimport pick from 'lodash.pick';\n\nimport {\n  ColumnDefinition,\n  useDataTable,\n  useTranslation,\n} from '@tager/admin-ui';\nimport {\n  Nullable,\n  useResourceClone,\n  useResourceDelete,\n} from '@tager/admin-services';\n\nimport { Category, Language, PostFull, PostShort } from '@/typings/model';\nimport { clonePost, deleteBlogPost, getPosts } from '@/services/requests';\nimport { getBlogPostFormUrl } from '@/constants/paths';\nimport {\n  useFetchModuleConfig,\n  useFetchCategories,\n  useUserPermission,\n} from '@/hooks';\nimport { Scope } from '@/constants/scopes';\n\nimport { convertPostList, getPostTableColumnDefs } from './PostList.helpers';\nimport { useAdvancedSearch } from './hooks';\n\nexport default defineComponent({\n  name: 'Posts',\n  setup(props, context) {\n    const { t } = useTranslation(context);\n\n    const canViewAdministrators = useUserPermission(\n      context,\n      Scope.AdministratorsView\n    );\n\n    const categoryId = computed<string>(() => {\n      return Array.isArray(context.root.$route.query.category)\n        ? context.root.$route.query.category[0] ?? ''\n        : context.root.$route.query.category;\n    });\n\n    /** Fetch module config **/\n\n    const {\n      data: moduleConfig,\n      loading: isModuleConfigLoading,\n    } = useFetchModuleConfig({ context });\n\n    const languageList = computed<Language[]>(\n      () => moduleConfig.value?.languages ?? []\n    );\n\n    /** Fetch category list **/\n\n    const {\n      data: categoryList,\n      loading: isCategoryListLoading,\n    } = useFetchCategories({ context });\n\n    const selectedCategory = computed<Nullable<Category>>(() =>\n      categoryId.value\n        ? categoryList.value.find(\n            ({ id }) => String(id) === String(categoryId.value)\n          ) ?? null\n        : null\n    );\n\n    const pageTitle = computed<string>(() => {\n      return selectedCategory.value\n        ? `${context.root.$t('blog:postsByCategory')} \"${\n            selectedCategory.value.name\n          }\"`\n        : context.root.$t('blog:posts');\n    });\n\n    /** Advanced search **/\n\n    const {\n      categoryFilter,\n      categoryOptionList,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      filterParams,\n      tags,\n      tagRemovalHandler,\n    } = useAdvancedSearch({\n      context,\n      categoryList,\n      languageList,\n    });\n\n    const isLangSpecific = computed<boolean>(\n      () => languageOptionList.value.length > 1\n    );\n\n    /** Fetch Post list **/\n\n    const {\n      fetchEntityList: fetchPostList,\n      isLoading: isPostLoading,\n      rowData: postList,\n      errorMessage,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize,\n    } = useDataTable<PostShort>({\n      fetchEntityList: (params) =>\n        getPosts({\n          query: params.searchQuery,\n          pageNumber: params.pageNumber,\n          pageSize: params.pageSize,\n          ...filterParams.value,\n        }),\n      initialValue: [],\n      context,\n      resourceName: 'Blog post list',\n      pageSize: 100,\n    });\n\n    watch(filterParams, () => {\n      if (isModuleConfigLoading.value || isCategoryListLoading.value) {\n        return;\n      }\n\n      const newQuery = {\n        ...pick(context.root.$route.query, ['query', 'pageNumber']),\n        ...filterParams.value,\n      };\n\n      if (!isEqual(context.root.$route.query, newQuery)) {\n        context.root.$router.replace({ query: newQuery });\n        fetchPostList();\n      }\n    });\n\n    const displayedPostList = computed<PostShort[]>(() =>\n      convertPostList(\n        postList.value,\n        selectedCategory.value,\n        moduleConfig.value?.languages ?? []\n      )\n    );\n\n    const isRowDataLoading = computed<boolean>(\n      () =>\n        isCategoryListLoading.value ||\n        isPostLoading.value ||\n        isModuleConfigLoading.value\n    );\n\n    const { isDeleting, handleResourceDelete } = useResourceDelete({\n      deleteResource: deleteBlogPost,\n      resourceName: 'Post',\n      onSuccess: fetchPostList,\n      context,\n    });\n\n    const { isCloning, handleResourceClone } = useResourceClone({\n      cloneResource: clonePost,\n      confirmMessage: t('blog:cloneConfirm'),\n      successMessage: t('blog:cloneSuccess'),\n      failureMessage: t('blog:cloneFailure'),\n      onSuccessRedirectTo: (data: PostFull) => `/posts/${data.id}`,\n      context,\n    });\n\n    function isBusy(postId: number): boolean {\n      return isDeleting(postId) || isCloning(postId) || isRowDataLoading.value;\n    }\n\n    const columnDefs = computed<ColumnDefinition<PostShort>[]>(() =>\n      getPostTableColumnDefs(\n        moduleConfig.value,\n        context.root.$t,\n        canViewAdministrators.value\n      )\n    );\n\n    return {\n      columnDefs,\n      rowData: displayedPostList,\n      handleResourceDelete,\n      isDeleting,\n      categoryList,\n      isRowDataLoading,\n      errorMessage,\n      getBlogPostFormUrl,\n      pageTitle,\n      searchQuery,\n      handleChange,\n      pageNumber,\n      pageCount,\n      pageSize,\n\n      // Advanced search\n      categoryFilter,\n      categoryOptionList,\n      isLangSpecific,\n      languageFilter,\n      languageOptionList,\n      fromDateFilter,\n      toDateFilter,\n      tags,\n      tagRemovalHandler,\n\n      // Permissions\n      canViewAdministrators,\n\n      // Clone\n      handleResourceClone,\n      isBusy,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"scss\">\n.filters {\n  display: flex;\n  margin: 0 -10px;\n\n  &:not(:first-child) {\n    margin-top: 10px;\n  }\n\n  .filter {\n    padding: 10px 10px 0;\n    width: 50%;\n    margin: 0;\n  }\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n</style>\n",".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n.date-label {\n  margin-bottom: 0.5rem;\n}\n\n.date-content {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n/*# sourceMappingURL=PostList.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-e7aab2dc";
+  const __vue_scope_id__ = "data-v-7862c502";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
@@ -2856,7 +3556,10 @@ function convertFormValuesToUpdatePayload(values) {
 function convertCategoryListToOptions(categoryList, languageId) {
     return categoryList
         .filter(({ language }) => (languageId ? language === languageId : true))
-        .map(({ id, name }) => ({ value: id, label: name }));
+        .map(({ id, name, depth }) => ({
+        value: id,
+        label: getNameWithDepth(name, depth),
+    }));
 }
 
 var script$1 = defineComponent({
@@ -2867,8 +3570,8 @@ var script$1 = defineComponent({
         const postId = computed(() => context.root.$route.params.postId);
         const isCreation = computed(() => postId.value === 'create');
         const urlAliasChanged = ref(false);
-        /** Fetch module config */
-        const { data: moduleConfig, loading: isModuleConfigLoading, } = useModuleConfig({ context });
+        /** Fetch module config **/
+        const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
         const languageList = computed(() => { var _a, _b; return (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []; });
         const languageOptionList = computed(() => languageList.value.map(({ id, name }) => ({
             value: id,
@@ -2876,10 +3579,10 @@ var script$1 = defineComponent({
         })));
         const isLangSpecific = computed(() => languageOptionList.value.length > 0);
         /** Fetch category list */
-        const { data: categoryList, loading: isCategoryListLoading, } = useBlogCategoryList({ context });
+        const { data: categoryList, loading: isCategoryListLoading, } = useFetchCategories({ context });
         /** Fetch Post */
         const [fetchPost, { data: post, loading: isPostLoading }] = useResource({
-            fetchResource: () => getBlogPost(postId.value),
+            fetchResource: () => getPost(postId.value),
             initialValue: null,
             context,
             resourceName: 'Post',
@@ -2895,7 +3598,7 @@ var script$1 = defineComponent({
             fetchPost();
         });
         /** Fetch post list */
-        const { data: postList, loading: isPostListLoading } = useBlogPostList({
+        const { data: postList, loading: isPostListLoading } = useFetchPosts({
             context,
         });
         const postOptionList = computed(() => postList.value
@@ -2904,10 +3607,10 @@ var script$1 = defineComponent({
             value: post.id,
             label: post.title,
         })));
-        /** Form State */
+        /** Form State **/
+        const isSubmitting = ref(false);
         const values = ref(convertPostToFormValues(post.value, languageOptionList.value, postOptionList.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []));
         const errors = ref({});
-        const isSubmitting = ref(false);
         watch([post, languageOptionList, postOptionList, moduleConfig], () => {
             var _a, _b;
             values.value = convertPostToFormValues(post.value, languageOptionList.value, postOptionList.value, (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []);
@@ -3073,6 +3776,29 @@ var script$1 = defineComponent({
             }
             return result;
         });
+        const handleCategoriesChange = (selectedOptions) => {
+            const newSelectedOptions = [];
+            selectedOptions.forEach((selectedOption) => {
+                const findTreeSelectedCategory = (categoryId) => {
+                    const foundSelectedCategory = categoryList.value.find(({ id }) => id === categoryId);
+                    if (!foundSelectedCategory) {
+                        return;
+                    }
+                    const newSelectedOption = {
+                        value: foundSelectedCategory.id,
+                        label: foundSelectedCategory.name,
+                    };
+                    if (!newSelectedOptions.some(({ value }) => value === newSelectedOption.value)) {
+                        newSelectedOptions.push(newSelectedOption);
+                    }
+                    if (foundSelectedCategory.parent) {
+                        findTreeSelectedCategory(foundSelectedCategory.parent.id);
+                    }
+                };
+                findTreeSelectedCategory(selectedOption.value);
+            });
+            values.value.categories = newSelectedOptions;
+        };
         return {
             isCreation,
             postId,
@@ -3096,6 +3822,7 @@ var script$1 = defineComponent({
             handleTitleChange,
             handleAliasChange,
             urlAliasTemplate,
+            handleCategoriesChange,
         };
     },
 });
@@ -3190,7 +3917,7 @@ var __vue_render__$1 = function () {
                         attrs: {
                           id: "urlAlias",
                           name: "urlAlias",
-                          label: _vm.$t("blog:URLAlias"),
+                          label: _vm.$t("blog:link"),
                           "url-template": _vm.urlAliasTemplate,
                           error: _vm.errors.urlAlias,
                         },
@@ -3340,18 +4067,13 @@ var __vue_render__$1 = function () {
                       _vm._v(" "),
                       _c("form-field-multi-select", {
                         attrs: {
+                          "selected-options": _vm.values.categories,
                           name: "categories",
                           label: _vm.$t("blog:categories"),
                           options: _vm.categoryOptionList,
                           error: _vm.errors.categories,
                         },
-                        model: {
-                          value: _vm.values.categories,
-                          callback: function ($$v) {
-                            _vm.$set(_vm.values, "categories", $$v);
-                          },
-                          expression: "values.categories",
-                        },
+                        on: { change: _vm.handleCategoriesChange },
                       }),
                       _vm._v(" "),
                       _c("form-field-multi-select", {
@@ -3472,52 +4194,58 @@ function convertCategoryList(categoryList, languages) {
         return category;
     });
 }
-function getCategoryTableColumnDefs(moduleConfig, t) {
+function getCategoryTableColumnDefs(moduleConfig, t, canViewAdministrators) {
     const isLangSpecific = moduleConfig
         ? moduleConfig.languages.length > 0
         : false;
     const COLUMN_DEFS = [
         {
-            id: 2,
+            id: 1,
             name: t('blog:name'),
             field: 'name',
             type: 'name',
-            format: ({ row }) => {
-                return {
-                    adminLink: {
-                        url: getBlogCategoryFormUrl({ categoryId: row.id }),
-                        text: row.name,
-                    },
-                    websiteLink: {
-                        url: [
-                            process.env.VUE_APP_WEBSITE_URL || window.location.origin,
-                            row.url,
-                        ].join(''),
-                        text: row.url,
-                    },
-                    paramList: row.isDefault
-                        ? [{ name: t('blog:defaultCategory'), value: t('blog:yes') }]
-                        : [],
-                };
+            format: ({ row }) => ({
+                adminLink: {
+                    url: getBlogCategoryFormUrl({ categoryId: row.id }),
+                    text: getNameWithDepth(row.name, row.depth),
+                },
+                paramList: row.isDefault
+                    ? [{ name: t('blog:defaultCategory'), value: t('blog:yes') }]
+                    : [],
+            }),
+        },
+        {
+            id: 2,
+            name: t('blog:link'),
+            field: 'path',
+            type: 'link',
+            format: ({ row }) => ({
+                url: `${getWebsiteOrigin()}${row.url}`,
+                text: row.url,
+            }),
+            options: {
+                shouldOpenNewTab: true,
             },
         },
         isLangSpecific
-            ? { id: 4, name: t('blog:language'), field: 'language' }
+            ? { id: 3, name: t('blog:language'), field: 'language' }
             : null,
         {
-            id: 3,
+            id: 4,
             name: t('blog:posts'),
             field: 'linkToPosts',
             style: { whiteSpace: 'nowrap', width: '130px' },
         },
-        {
-            id: 4,
-            name: t('blog:actions'),
-            field: 'actions',
-            style: { whiteSpace: 'nowrap', width: '205px' },
-            headStyle: { whiteSpace: 'nowrap', width: '205px' },
-            class: 'actions-cell',
-        },
+        canViewAdministrators
+            ? {
+                id: 5,
+                name: t('blog:actions'),
+                field: 'actions',
+                style: { whiteSpace: 'nowrap', width: '170px' },
+                headStyle: { whiteSpace: 'nowrap', width: '170px' },
+                class: 'actions-cell',
+            }
+            : null,
     ];
     return COLUMN_DEFS.filter(notEmpty);
 }
@@ -3571,18 +4299,19 @@ function useAdvancedSearch$1({ context, languageList }) {
 var script$2 = defineComponent({
     name: 'BlogCategoryList',
     setup(props, context) {
-        /** Fetch module config */
-        const { data: moduleConfig, loading: isModuleConfigLoading, } = useModuleConfig({ context });
+        const canViewAdministrators = useUserPermission(context, Scope.AdministratorsView);
+        /** Fetch module config **/
+        const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
         const languageList = computed(() => { var _a, _b; return (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []; });
         /** Advanced search **/
         const { languageFilter, languageOptionList, filterParams, tags, tagRemovalHandler, } = useAdvancedSearch$1({ context, languageList });
         const isLangSpecific = computed(() => languageOptionList.value.length > 1);
         /** Fetch category list */
         const { fetchEntityList: fetchCategoryList, isLoading: isCategoryListLoading, rowData: categoryList, errorMessage, searchQuery, handleChange, pageNumber, pageCount, pageSize, } = useDataTable({
-            fetchEntityList: (params) => getBlogCategoryList(Object.assign({ query: params.searchQuery, pageNumber: params.pageNumber, pageSize: params.pageSize }, filterParams.value)),
+            fetchEntityList: (params) => getCategories(Object.assign({ query: params.searchQuery, pageNumber: params.pageNumber, pageSize: params.pageSize }, filterParams.value)),
             initialValue: [],
             context,
-            resourceName: 'Blog category list',
+            resourceName: 'Blog categories',
             pageSize: 100,
         });
         watch(filterParams, () => {
@@ -3596,16 +4325,16 @@ var script$2 = defineComponent({
                 fetchCategoryList();
             }
         });
-        const { handleResourceDelete: handleCategoryDelete, isDeleting, } = useResourceDelete({
-            deleteResource: deleteBlogCategory,
+        const { isDeleting, handleResourceDelete: handleCategoryDelete, } = useResourceDelete({
+            deleteResource: deleteCategory,
             resourceName: 'Post',
             onSuccess: fetchCategoryList,
             context,
         });
         const isCategoryMoving = ref(false);
-        function moveCategory(categoryId, direction) {
+        function startMoveCategory(categoryId, direction) {
             isCategoryMoving.value = true;
-            moveBlogCategory(categoryId, direction)
+            moveCategory(categoryId, direction)
                 .then((response) => {
                 if (response.success) {
                     return fetchCategoryList();
@@ -3619,7 +4348,7 @@ var script$2 = defineComponent({
         /** Misc */
         const isRowDataLoading = computed(() => isCategoryListLoading.value || isModuleConfigLoading.value);
         const displayedCategoryList = computed(() => convertCategoryList(categoryList.value, languageList.value));
-        const columnDefs = computed(() => getCategoryTableColumnDefs(moduleConfig.value, context.root.$t));
+        const columnDefs = computed(() => getCategoryTableColumnDefs(moduleConfig.value, context.root.$t, canViewAdministrators.value));
         return {
             columnDefs,
             rowData: displayedCategoryList,
@@ -3630,7 +4359,7 @@ var script$2 = defineComponent({
             isDeleting,
             getBlogCategoryFormUrl,
             getLinkToPostsByCategory,
-            moveCategory,
+            startMoveCategory,
             isCategoryMoving,
             searchQuery,
             handleChange,
@@ -3641,6 +4370,8 @@ var script$2 = defineComponent({
             languageOptionList,
             tags,
             tagRemovalHandler,
+            // Permissions
+            canViewAdministrators,
         };
     },
 });
@@ -3657,11 +4388,13 @@ var __vue_render__$2 = function () {
     attrs: {
       title: _vm.$t("blog:blogCategories"),
       "header-buttons": [
-        {
-          text: _vm.$t("blog:newCategory"),
-          href: _vm.getBlogCategoryFormUrl({ categoryId: "create" }),
-        },
-      ],
+        _vm.canViewAdministrators
+          ? {
+              text: _vm.$t("blog:newCategory"),
+              href: _vm.getBlogCategoryFormUrl({ categoryId: "create" }),
+            }
+          : null,
+      ].filter(Boolean),
     },
     scopedSlots: _vm._u([
       {
@@ -3785,7 +4518,7 @@ var __vue_render__$2 = function () {
                             },
                             on: {
                               click: function ($event) {
-                                return _vm.moveCategory(row.id, "up")
+                                return _vm.startMoveCategory(row.id, "up")
                               },
                             },
                           },
@@ -3805,7 +4538,7 @@ var __vue_render__$2 = function () {
                             },
                             on: {
                               click: function ($event) {
-                                return _vm.moveCategory(row.id, "down")
+                                return _vm.startMoveCategory(row.id, "down")
                               },
                             },
                           },
@@ -3879,92 +4612,87 @@ __vue_render__$2._withStripped = true;
   );
 
 function convertCategoryToFormValues(category, languageOptionList) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const currentLangOption = languageOptionList.find(({ value }) => value === (category === null || category === void 0 ? void 0 : category.language));
     if (!category) {
         return {
+            language: currentLangOption !== null && currentLangOption !== void 0 ? currentLangOption : null,
             name: '',
-            isDefault: false,
+            parent: null,
+            urlAlias: '',
             pageTitle: '',
             pageDescription: '',
+            pageKeywords: '',
+            openGraphTitle: '',
+            openGraphDescription: '',
             openGraphImage: null,
-            urlAlias: '',
-            language: currentLangOption !== null && currentLangOption !== void 0 ? currentLangOption : null,
         };
     }
     return {
+        language: currentLangOption !== null && currentLangOption !== void 0 ? currentLangOption : null,
         name: category.name,
-        isDefault: category.isDefault,
+        parent: category.parent
+            ? { value: category.parent.id, label: category.parent.name }
+            : null,
+        urlAlias: category.urlAlias,
         pageTitle: (_a = category.pageTitle) !== null && _a !== void 0 ? _a : '',
         pageDescription: (_b = category.pageDescription) !== null && _b !== void 0 ? _b : '',
+        pageKeywords: (_c = category.pageKeywords) !== null && _c !== void 0 ? _c : '',
+        openGraphTitle: (_d = category.openGraphTitle) !== null && _d !== void 0 ? _d : '',
+        openGraphDescription: (_e = category.openGraphDescription) !== null && _e !== void 0 ? _e : '',
         openGraphImage: category.openGraphImage
             ? { id: createId(), file: category.openGraphImage }
             : null,
-        urlAlias: category.urlAlias,
-        language: currentLangOption !== null && currentLangOption !== void 0 ? currentLangOption : null,
     };
 }
-function convertCategoryFormValuesToCreationPayload(values) {
-    var _a, _b, _c, _d;
+function convertCategoryFormValuesToPayload(values) {
+    var _a, _b, _c, _d, _e, _f;
     return {
+        language: (_b = (_a = values.language) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null,
         name: values.name,
-        isDefault: values.isDefault,
+        parent: (_d = (_c = values.parent) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : null,
+        urlAlias: values.urlAlias,
+        isDefault: false,
         pageTitle: values.pageTitle,
         pageDescription: values.pageDescription,
-        openGraphImage: (_b = (_a = values.openGraphImage) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null,
-        language: (_d = (_c = values.language) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : null,
+        openGraphImage: (_f = (_e = values.openGraphImage) === null || _e === void 0 ? void 0 : _e.file.id) !== null && _f !== void 0 ? _f : null,
     };
-}
-function convertCategoryFormValuesToUpdatePayload(values) {
-    return Object.assign(Object.assign({}, convertCategoryFormValuesToCreationPayload(values)), { urlAlias: values.urlAlias });
 }
 
 var script$3 = defineComponent({
-    name: 'BlogCategoryForm',
+    name: 'CategoryForm',
     components: { FormFooter },
     setup(props, context) {
+        const { t } = useTranslation(context);
         const categoryId = computed(() => context.root.$route.params.categoryId);
         const isCreation = computed(() => categoryId.value === 'create');
         /** Fetch module config */
-        const { data: moduleConfig, loading: isModuleConfigLoading, } = useModuleConfig({ context });
+        const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
         const languageList = computed(() => { var _a, _b; return (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []; });
         const languageOptionList = computed(() => languageList.value.map(({ id, name }) => ({ value: id, label: name })));
         const isLangSpecific = computed(() => languageOptionList.value.length > 0);
+        const imageScenario = computed(() => { var _a, _b, _c; return (_c = (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.fileScenarios) === null || _b === void 0 ? void 0 : _b.openGraph) !== null && _c !== void 0 ? _c : null; });
+        /** Fetch Categories */
+        const { data: categories, loading: isCategoriesLoading, } = useFetchCategories({ context });
         /** Fetch Category */
-        const [fetchCategory, { data: category, loading: isCategoryLoading },] = useResource({
-            fetchResource: () => getBlogCategory(categoryId.value),
-            initialValue: null,
+        const { data: category, loading: isCategoryLoading } = useFetchCategory({
             context,
-            resourceName: 'Category',
-        });
-        onMounted(() => {
-            if (isCreation.value)
-                return;
-            fetchCategory();
-        });
-        watch(categoryId, () => {
-            if (isCreation.value)
-                return;
-            fetchCategory();
+            categoryId,
+            isCreation,
         });
         /** Form State */
+        const isSubmitting = ref(false);
         const values = ref(convertCategoryToFormValues(category.value, languageOptionList.value));
         const errors = ref({});
-        const isSubmitting = ref(false);
         watch(category, () => {
             values.value = convertCategoryToFormValues(category.value, languageOptionList.value);
         });
         function submitForm(event) {
-            var _a, _b;
             isSubmitting.value = true;
-            const creationBody = convertCategoryFormValuesToCreationPayload(values.value);
-            const updateBody = convertCategoryFormValuesToUpdatePayload(values.value);
-            if (!isCreation.value) {
-                updateBody.language = ((_a = category.value) === null || _a === void 0 ? void 0 : _a.language) ? (_b = category.value) === null || _b === void 0 ? void 0 : _b.language : null;
-            }
+            const body = convertCategoryFormValuesToPayload(values.value);
             const requestPromise = isCreation.value
-                ? createBlogCategory(creationBody)
-                : updateBlogCategory(categoryId.value, updateBody);
+                ? createCategory(body)
+                : updateCategory(categoryId.value, body);
             requestPromise
                 .then(({ data }) => {
                 errors.value = {};
@@ -4000,13 +4728,32 @@ var script$3 = defineComponent({
                 isSubmitting.value = false;
             });
         }
+        /** Category Options */
+        const categoryOptionList = computed(() => {
+            var _a, _b;
+            return convertCategoryListToOptions(categories.value, (_b = (_a = values.value.language) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null);
+        });
         /** Misc */
-        const isContentLoading = computed(() => isCategoryLoading.value || isModuleConfigLoading.value);
+        const isContentLoading = computed(() => isCategoryLoading.value ||
+            isModuleConfigLoading.value ||
+            isCategoriesLoading.value);
         const categoryPagePath = computed(() => {
             var _a, _b;
-            const origin = process.env.VUE_APP_WEBSITE_URL || window.location.origin;
-            return origin + ((_b = (_a = category.value) === null || _a === void 0 ? void 0 : _a.urlTemplate) !== null && _b !== void 0 ? _b : '');
+            return `${getWebsiteOrigin()}${(_b = (_a = category.value) === null || _a === void 0 ? void 0 : _a.urlTemplate) !== null && _b !== void 0 ? _b : ''}`;
         });
+        /** SEO **/
+        function handleSeoFieldGroupChange({ title, description, keywords, image, }) {
+            values.value.pageTitle = title;
+            values.value.pageDescription = description;
+            values.value.pageKeywords = keywords;
+            values.value.openGraphImage = image;
+        }
+        /** Tabs */
+        const tabList = computed(() => [
+            { id: 'common', label: t('blog:tabs.common') },
+            { id: 'seo', label: t('blog:tabs.seo') },
+        ]);
+        const selectedTabId = ref(tabList.value[0].id);
         return {
             isCreation,
             isContentLoading: isContentLoading,
@@ -4019,6 +4766,13 @@ var script$3 = defineComponent({
             submitForm,
             isSubmitting,
             moduleConfig,
+            categoryOptionList,
+            // SEO
+            imageScenario,
+            handleSeoFieldGroupChange,
+            // Tabs
+            tabList,
+            selectedTabId,
         };
     },
 });
@@ -4055,123 +4809,182 @@ var __vue_render__$3 = function () {
                 },
               },
               [
-                _vm.isCreation && _vm.isLangSpecific
-                  ? _c("form-field-select", {
-                      attrs: {
-                        name: "language",
-                        label: _vm.$t("blog:language"),
-                        options: _vm.languageOptionList,
-                        error: _vm.errors.language,
-                      },
-                      model: {
-                        value: _vm.values.language,
-                        callback: function ($$v) {
-                          _vm.$set(_vm.values, "language", $$v);
+                _vm.isCreation
+                  ? [
+                      _vm.isLangSpecific
+                        ? _c("form-field-select", {
+                            attrs: {
+                              name: "language",
+                              label: _vm.$t("blog:language"),
+                              options: _vm.languageOptionList,
+                              error: _vm.errors.language,
+                            },
+                            model: {
+                              value: _vm.values.language,
+                              callback: function ($$v) {
+                                _vm.$set(_vm.values, "language", $$v);
+                              },
+                              expression: "values.language",
+                            },
+                          })
+                        : _vm._e(),
+                      _vm._v(" "),
+                      _c("form-field", {
+                        attrs: {
+                          name: "name",
+                          label: _vm.$t("blog:name"),
+                          error: _vm.errors.name,
                         },
-                        expression: "values.language",
-                      },
-                    })
-                  : _vm._e(),
-                _vm._v(" "),
-                _c("form-field", {
-                  attrs: {
-                    name: "name",
-                    label: _vm.$t("blog:name"),
-                    error: _vm.errors.name,
-                  },
-                  model: {
-                    value: _vm.values.name,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "name", $$v);
-                    },
-                    expression: "values.name",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field-checkbox", {
-                  attrs: {
-                    name: "isDefault",
-                    label: _vm.$t("blog:defaultCategory"),
-                    error: _vm.errors.isDefault,
-                  },
-                  model: {
-                    value: _vm.values.isDefault,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "isDefault", $$v);
-                    },
-                    expression: "values.isDefault",
-                  },
-                }),
-                _vm._v(" "),
-                !_vm.isCreation
-                  ? _c("form-field-url-alias-input", {
-                      attrs: {
-                        id: "urlAlias",
-                        name: "urlAlias",
-                        label: _vm.$t("blog:URLAlias"),
-                        "url-template": _vm.pagePath,
-                        error: _vm.errors.urlAlias,
-                      },
-                      model: {
-                        value: _vm.values.urlAlias,
-                        callback: function ($$v) {
-                          _vm.$set(_vm.values, "urlAlias", $$v);
+                        model: {
+                          value: _vm.values.name,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "name", $$v);
+                          },
+                          expression: "values.name",
                         },
-                        expression: "values.urlAlias",
-                      },
-                    })
-                  : _vm._e(),
-                _vm._v(" "),
-                _c("form-field", {
-                  attrs: {
-                    name: "pageTitle",
-                    label: _vm.$t("blog:pageTitle"),
-                    error: _vm.errors.pageTitle,
-                  },
-                  model: {
-                    value: _vm.values.pageTitle,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "pageTitle", $$v);
-                    },
-                    expression: "values.pageTitle",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field", {
-                  attrs: {
-                    name: "pageDescription",
-                    label: _vm.$t("blog:pageDescription"),
-                    type: "textarea",
-                    error: _vm.errors.pageDescription,
-                  },
-                  model: {
-                    value: _vm.values.pageDescription,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "pageDescription", $$v);
-                    },
-                    expression: "values.pageDescription",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field-file-input", {
-                  attrs: {
-                    label: _vm.$t("blog:openGraphImage"),
-                    name: "openGraphImage",
-                    "file-type": "image",
-                    "image-scenario": _vm.moduleConfig
-                      ? _vm.moduleConfig.fileScenarios.openGraph
-                      : null,
-                  },
-                  model: {
-                    value: _vm.values.openGraphImage,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "openGraphImage", $$v);
-                    },
-                    expression: "values.openGraphImage",
-                  },
-                }),
+                      }),
+                      _vm._v(" "),
+                      _c("form-field-select", {
+                        attrs: {
+                          name: "parentCategory",
+                          label: _vm.$t("blog:parentCategory"),
+                          options: _vm.categoryOptionList,
+                          error: _vm.errors.parent,
+                        },
+                        model: {
+                          value: _vm.values.parent,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "parent", $$v);
+                          },
+                          expression: "values.parent",
+                        },
+                      }),
+                      _vm._v(" "),
+                      _c("form-field-url-alias-input", {
+                        attrs: {
+                          id: "urlAlias",
+                          name: "urlAlias",
+                          label: _vm.$t("blog:link"),
+                          "url-template": _vm.pagePath,
+                          error: _vm.errors.urlAlias,
+                        },
+                        model: {
+                          value: _vm.values.urlAlias,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "urlAlias", $$v);
+                          },
+                          expression: "values.urlAlias",
+                        },
+                      }),
+                    ]
+                  : [
+                      _c("tab-list", {
+                        attrs: {
+                          "tab-list": _vm.tabList,
+                          "selected-tab-id": _vm.selectedTabId,
+                        },
+                        on: {
+                          "tab:update": function ($event) {
+                            _vm.selectedTabId = $event.tabId;
+                          },
+                        },
+                      }),
+                      _vm._v(" "),
+                      _vm.selectedTabId === "common"
+                        ? [
+                            _vm.isLangSpecific
+                              ? _c("form-field-select", {
+                                  attrs: {
+                                    name: "language",
+                                    label: _vm.$t("blog:language"),
+                                    options: _vm.languageOptionList,
+                                    error: _vm.errors.language,
+                                  },
+                                  model: {
+                                    value: _vm.values.language,
+                                    callback: function ($$v) {
+                                      _vm.$set(_vm.values, "language", $$v);
+                                    },
+                                    expression: "values.language",
+                                  },
+                                })
+                              : _vm._e(),
+                            _vm._v(" "),
+                            _c("form-field", {
+                              attrs: {
+                                name: "name",
+                                label: _vm.$t("blog:name"),
+                                error: _vm.errors.name,
+                              },
+                              model: {
+                                value: _vm.values.name,
+                                callback: function ($$v) {
+                                  _vm.$set(_vm.values, "name", $$v);
+                                },
+                                expression: "values.name",
+                              },
+                            }),
+                            _vm._v(" "),
+                            _c("form-field-select", {
+                              attrs: {
+                                name: "parentCategory",
+                                label: _vm.$t("blog:parentCategory"),
+                                options: _vm.categoryOptionList,
+                                error: _vm.errors.parent,
+                              },
+                              model: {
+                                value: _vm.values.parent,
+                                callback: function ($$v) {
+                                  _vm.$set(_vm.values, "parent", $$v);
+                                },
+                                expression: "values.parent",
+                              },
+                            }),
+                            _vm._v(" "),
+                            _c("form-field-url-alias-input", {
+                              attrs: {
+                                id: "urlAlias",
+                                name: "urlAlias",
+                                label: _vm.$t("blog:link"),
+                                "url-template": _vm.pagePath,
+                                error: _vm.errors.urlAlias,
+                              },
+                              model: {
+                                value: _vm.values.urlAlias,
+                                callback: function ($$v) {
+                                  _vm.$set(_vm.values, "urlAlias", $$v);
+                                },
+                                expression: "values.urlAlias",
+                              },
+                            }),
+                          ]
+                        : _vm._e(),
+                      _vm._v(" "),
+                      _vm.selectedTabId === "seo"
+                        ? [
+                            _c("seo-field-group", {
+                              attrs: {
+                                title: _vm.values.pageTitle,
+                                "title-error-message": _vm.errors.pageTitle,
+                                description: _vm.values.pageDescription,
+                                "description-error-message":
+                                  _vm.errors.pageDescription,
+                                "should-display-keywords": false,
+                                keywords: _vm.values.pageKeywords,
+                                "keywords-error-message":
+                                  _vm.errors.pageKeywords,
+                                image: _vm.values.openGraphImage,
+                                "image-scenario": _vm.imageScenario,
+                                "image-error-message":
+                                  _vm.errors.openGraphImage,
+                              },
+                              on: { change: _vm.handleSeoFieldGroupChange },
+                            }),
+                          ]
+                        : _vm._e(),
+                    ],
               ],
-              1
+              2
             ),
           ]
         },
@@ -4299,4 +5112,4 @@ function getBlogMenuItem(params) {
 i18n.addTranslations('en', 'blog', EN);
 i18n.addTranslations('ru', 'blog', RU);
 
-export { BLOG_CATEGORY_FORM_ROUTE, BLOG_CATEGORY_LIST_ROUTE, BLOG_POST_FORM_ROUTE, BLOG_POST_LIST_ROUTE, BLOG_ROUTE_PATHS, createBlogCategory, createBlogPost, deleteBlogCategory, deleteBlogPost, getBlogCategory, getBlogCategoryFormUrl, getBlogCategoryList, getBlogCategoryListUrl, getBlogMenuItem, getBlogModuleConfig, getBlogPost, getBlogPostCount, getBlogPostFormUrl, getBlogPostList, getBlogPostListUrl, moveBlogCategory, updateBlogCategory, updateBlogPost };
+export { BLOG_CATEGORY_FORM_ROUTE, BLOG_CATEGORY_LIST_ROUTE, BLOG_POST_FORM_ROUTE, BLOG_POST_LIST_ROUTE, BLOG_ROUTE_PATHS, clonePost, createBlogPost, createCategory, deleteBlogPost, deleteCategory, getBlogCategoryFormUrl, getBlogCategoryListUrl, getBlogMenuItem, getBlogPostFormUrl, getBlogPostListUrl, getCategories, getCategory, getModuleConfig, getPost, getPosts, getPostsCount, getUserProfile, moveCategory, updateBlogPost, updateCategory };