@tager/admin-blog 0.3.23 → 0.3.29

package/dist/index.umd.js

@@ -37,7 +37,7 @@
       actions: 'Actions',
       updatePost: 'Update post',
       title: 'Title',
-      URLAlias: 'URL alias',
+      link: 'Link',
       excerpt: 'Excerpt',
       body: 'Body',
       defaultCategory: 'Default Category',
@@ -68,6 +68,15 @@
       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 @@
       edit: 'Редактировать',
       remove: 'Удалить',
       postsByCategory: 'Посты по категориям',
-      name: 'Имя',
+      name: 'Название',
       image: 'Изображение',
       language: 'Язык',
       languages: 'Языки',
@@ -103,7 +112,7 @@
       actions: 'Действия',
       updatePost: 'Обновить пост',
       title: 'Заголовок',
-      URLAlias: 'URL',
+      link: 'Ссылка',
       excerpt: 'Краткое описание',
       defaultCategory: 'Категория по-умолчанию',
       body: 'Содержание',
@@ -134,6 +143,15 @@
       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 @@
   module.exports = isEqual;
   });
 
-  /** Blog Posts */
-  function getBlogPostList(params) {
-      return adminServices.request.get({ path: '/admin/blog/posts', params });
-  }
-  function getBlogPostCount() {
-      return adminServices.request.get({ path: '/admin/blog/posts/count' });
-  }
-  function getBlogPost(postId) {
-      return adminServices.request.get({ path: `/admin/blog/posts/${postId}` });
-  }
-  function createBlogPost(payload) {
-      return adminServices.request.post({ path: '/admin/blog/posts', body: payload });
-  }
-  function updateBlogPost(postId, payload) {
-      return adminServices.request.put({ path: `/admin/blog/posts/${postId}`, body: payload });
-  }
-  function deleteBlogPost(postId) {
-      return adminServices.request.delete({ path: `/admin/blog/posts/${postId}` });
-  }
-  /** Blog Categories */
-  function getBlogCategoryList(params) {
-      return adminServices.request.get({ path: '/admin/blog/categories', params });
-  }
-  function getBlogCategory(categoryId) {
-      return adminServices.request.get({ path: `/admin/blog/categories/${categoryId}` });
-  }
-  function createBlogCategory(payload) {
-      return adminServices.request.post({ path: '/admin/blog/categories', body: payload });
-  }
-  function updateBlogCategory(categoryId, payload) {
-      return adminServices.request.put({
-          path: `/admin/blog/categories/${categoryId}`,
-          body: payload,
-      });
-  }
-  function deleteBlogCategory(categoryId) {
-      return adminServices.request.delete({
-          path: `/admin/blog/categories/${categoryId}`,
-      });
-  }
-  function moveBlogCategory(categoryId, direction) {
-      return adminServices.request.post({
-          path: `/admin/blog/categories/move/${categoryId}/${direction}`,
-      });
-  }
-  function getBlogModuleConfig() {
-      return adminServices.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 pathToRegexp.compile(BLOG_ROUTE_PATHS.POST_FORM)({ postId: params.postId });
-  }
-  function getBlogCategoryListUrl() {
-      return BLOG_ROUTE_PATHS.CATEGORY_LIST;
-  }
-  function getBlogCategoryFormUrl(params) {
-      return pathToRegexp.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] = adminServices.useResource({
-          fetchResource: getBlogModuleConfig,
-          initialValue: null,
-          context: params.context,
-          resourceName: 'Module configuration',
-      });
-      compositionApi.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] = adminServices.useResource({
-          fetchResource: () => getBlogPostList({ pageNumber: 1, pageSize: 99999 }),
-          initialValue: [],
-          context: params.context,
-          resourceName: 'Blog post list',
-      });
-      compositionApi.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] = adminServices.useResource({
-          fetchResource: getBlogCategoryList,
-          initialValue: [],
-          context: params.context,
-          resourceName: 'Blog category list',
-      });
-      compositionApi.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(adminServices.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 adminServices.request.get({ path: '/admin/self' });
+  }
+  /** Blog Posts */
+  function getPosts(params) {
+      return adminServices.request.get({ path: '/admin/blog/posts', params });
+  }
+  function getPostsCount() {
+      return adminServices.request.get({ path: '/admin/blog/posts/count' });
+  }
+  function getPost(postId) {
+      return adminServices.request.get({ path: `/admin/blog/posts/${postId}` });
+  }
+  function clonePost(postId) {
+      return adminServices.request.post({ path: `/admin/blog/posts/${postId}/clone` });
+  }
+  function createBlogPost(payload) {
+      return adminServices.request.post({ path: '/admin/blog/posts', body: payload });
+  }
+  function updateBlogPost(postId, payload) {
+      return adminServices.request.put({ path: `/admin/blog/posts/${postId}`, body: payload });
+  }
+  function deleteBlogPost(postId) {
+      return adminServices.request.delete({ path: `/admin/blog/posts/${postId}` });
+  }
+  /** Blog Categories */
+  function getCategories(params) {
+      return adminServices.request.get({ path: '/admin/blog/categories', params });
+  }
+  function getCategory(categoryId) {
+      return adminServices.request.get({ path: `/admin/blog/categories/${categoryId}` });
+  }
+  function createCategory(payload) {
+      return adminServices.request.post({ path: '/admin/blog/categories', body: payload });
+  }
+  function updateCategory(categoryId, payload) {
+      return adminServices.request.put({
+          path: `/admin/blog/categories/${categoryId}`,
+          body: payload,
+      });
+  }
+  function deleteCategory(categoryId) {
+      return adminServices.request.delete({
+          path: `/admin/blog/categories/${categoryId}`,
+      });
+  }
+  function moveCategory(categoryId, direction) {
+      return adminServices.request.post({
+          path: `/admin/blog/categories/move/${categoryId}/${direction}`,
+      });
+  }
+  function getModuleConfig() {
+      return adminServices.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 pathToRegexp.compile(BLOG_ROUTE_PATHS.POST_FORM)({ postId: params.postId });
+  }
+  function getBlogCategoryListUrl() {
+      return BLOG_ROUTE_PATHS.CATEGORY_LIST;
+  }
+  function getBlogCategoryFormUrl(params) {
+      return pathToRegexp.compile(BLOG_ROUTE_PATHS.CATEGORY_FORM)({
+          categoryId: params.categoryId,
+      });
+  }
+
+  function useFetchPosts(params) {
+      const [fetchPosts, resource] = adminServices.useResource({
+          fetchResource: () => getPosts({ pageNumber: 1, pageSize: 99999 }),
+          initialValue: [],
+          context: params.context,
+          resourceName: 'Blog posts',
+      });
+      compositionApi.onMounted(() => {
+          fetchPosts();
+      });
+      return resource;
+  }
+
+  function useFetchCategory({ context, categoryId, isCreation, }) {
+      const [fetchCategory, resource] = adminServices.useResource({
+          fetchResource: () => getCategory(categoryId.value),
+          initialValue: null,
+          context,
+          resourceName: 'Blog category',
+      });
+      compositionApi.onMounted(() => {
+          if (isCreation.value) {
+              return;
+          }
+          fetchCategory();
+      });
+      compositionApi.watch(categoryId, () => {
+          if (isCreation.value) {
+              return;
+          }
+          fetchCategory();
+      });
+      return resource;
+  }
+
+  function useFetchCategories({ context, }) {
+      const [fetchCategories, resource] = adminServices.useResource({
+          fetchResource: getCategories,
+          initialValue: [],
+          context,
+          resourceName: 'Blog categories',
+      });
+      compositionApi.onMounted(() => {
+          fetchCategories();
+      });
+      return resource;
+  }
+
+  function useFetchModuleConfig({ context, }) {
+      const [fetchModuleConfig, resource] = adminServices.useResource({
+          fetchResource: getModuleConfig,
+          initialValue: null,
+          context: context,
+          resourceName: 'Module configuration',
+      });
+      compositionApi.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: adminServices.FETCH_STATUSES.IDLE,
+      },
+      mutations: {
+          [USER_MUTATION_TYPES.PROFILE_REQUEST_STARTED](state) {
+              if (state.status === adminServices.FETCH_STATUSES.IDLE) {
+                  state.status = adminServices.FETCH_STATUSES.LOADING;
+              }
+          },
+          [USER_MUTATION_TYPES.PROFILE_REQUEST_FULFILLED](state, user) {
+              if (state.status === adminServices.FETCH_STATUSES.LOADING) {
+                  state.status = adminServices.FETCH_STATUSES.SUCCESS;
+                  state.profile = user;
+              }
+          },
+          [USER_MUTATION_TYPES.PROFILE_REQUEST_REJECTED](state) {
+              if (state.status === adminServices.FETCH_STATUSES.LOADING) {
+                  state.status = adminServices.FETCH_STATUSES.FAILURE;
+                  state.profile = null;
+              }
+          },
+      },
+      actions: {
+          [USER_ACTION_TYPES.FETCH_USER_PROFILE](store) {
+              if (store.state.status !== adminServices.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 compositionApi.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(adminServices.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 = compositionApi.computed(() => categoryList.value.map(({ id, name }) => ({
+      const categoryOptionList = compositionApi.computed(() => categoryList.value.map(({ id, name, depth }) => ({
           value: String(id),
-          label: name,
+          label: getNameWithDepth(name, depth),
       })));
       const initialCategoryFilter = compositionApi.computed(() => {
           const queryValue = adminUi.getFilterParamAsStringArray(context.root.$route.query, FilterTypes.CATEGORY);
@@ -2302,9 +2965,9 @@
               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 @@
   }
 
   var script = compositionApi.defineComponent({
-      name: 'BlogPostList',
+      name: 'Posts',
       setup(props, context) {
+          const { t } = adminUi.useTranslation(context);
+          const canViewAdministrators = useUserPermission(context, Scope.AdministratorsView);
           const categoryId = compositionApi.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 = compositionApi.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 = compositionApi.computed(() => {
               var _a;
               return categoryId.value
@@ -2350,20 +3015,19 @@
               languageList,
           });
           const isLangSpecific = compositionApi.computed(() => languageOptionList.value.length > 1);
-          /** Fetch Post list */
+          /** Fetch Post list **/
           const { fetchEntityList: fetchPostList, isLoading: isPostLoading, rowData: postList, errorMessage, searchQuery, handleChange, pageNumber, pageCount, pageSize, } = adminUi.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,
           });
           compositionApi.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 _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 } = adminServices.useResourceDelete({
+          const isRowDataLoading = compositionApi.computed(() => isCategoryListLoading.value ||
+              isPostLoading.value ||
+              isModuleConfigLoading.value);
+          const { isDeleting, handleResourceDelete } = adminServices.useResourceDelete({
               deleteResource: deleteBlogPost,
               resourceName: 'Post',
               onSuccess: fetchPostList,
               context,
           });
-          const isRowDataLoading = compositionApi.computed(() => isCategoryListLoading.value ||
-              isPostLoading.value ||
-              isModuleConfigLoading.value);
-          const columnDefs = compositionApi.computed(() => getPostTableColumnDefs(moduleConfig.value, context.root.$t));
+          const { isCloning, handleResourceClone } = adminServices.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 = compositionApi.computed(() => getPostTableColumnDefs(moduleConfig.value, context.root.$t, canViewAdministrators.value));
           return {
               columnDefs,
               rowData: displayedPostList,
@@ -2408,6 +3083,11 @@
               toDateFilter,
               tags,
               tagRemovalHandler,
+              // Permissions
+              canViewAdministrators,
+              // Clone
+              handleResourceClone,
+              isBusy,
           };
       },
   });
@@ -2552,11 +3232,13 @@
       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 @@
                             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 @@
                           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 @@
     /* 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 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 = compositionApi.defineComponent({
@@ -2867,8 +3570,8 @@
           const postId = compositionApi.computed(() => context.root.$route.params.postId);
           const isCreation = compositionApi.computed(() => postId.value === 'create');
           const urlAliasChanged = compositionApi.ref(false);
-          /** Fetch module config */
-          const { data: moduleConfig, loading: isModuleConfigLoading, } = useModuleConfig({ context });
+          /** Fetch module config **/
+          const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
           const languageList = compositionApi.computed(() => { var _a, _b; return (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []; });
           const languageOptionList = compositionApi.computed(() => languageList.value.map(({ id, name }) => ({
               value: id,
@@ -2876,10 +3579,10 @@
           })));
           const isLangSpecific = compositionApi.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 }] = adminServices.useResource({
-              fetchResource: () => getBlogPost(postId.value),
+              fetchResource: () => getPost(postId.value),
               initialValue: null,
               context,
               resourceName: 'Post',
@@ -2895,7 +3598,7 @@
               fetchPost();
           });
           /** Fetch post list */
-          const { data: postList, loading: isPostListLoading } = useBlogPostList({
+          const { data: postList, loading: isPostListLoading } = useFetchPosts({
               context,
           });
           const postOptionList = compositionApi.computed(() => postList.value
@@ -2904,10 +3607,10 @@
               value: post.id,
               label: post.title,
           })));
-          /** Form State */
+          /** Form State **/
+          const isSubmitting = compositionApi.ref(false);
           const values = compositionApi.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 = compositionApi.ref({});
-          const isSubmitting = compositionApi.ref(false);
           compositionApi.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 @@
               }
               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 @@
               handleTitleChange,
               handleAliasChange,
               urlAliasTemplate,
+              handleCategoriesChange,
           };
       },
   });
@@ -3190,7 +3917,7 @@
                           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 @@
                         _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 @@
           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: `${adminServices.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(adminServices.notEmpty);
   }
@@ -3571,18 +4299,19 @@
   var script$2 = compositionApi.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 = compositionApi.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 = compositionApi.computed(() => languageOptionList.value.length > 1);
           /** Fetch category list */
           const { fetchEntityList: fetchCategoryList, isLoading: isCategoryListLoading, rowData: categoryList, errorMessage, searchQuery, handleChange, pageNumber, pageCount, pageSize, } = adminUi.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,
           });
           compositionApi.watch(filterParams, () => {
@@ -3596,16 +4325,16 @@
                   fetchCategoryList();
               }
           });
-          const { handleResourceDelete: handleCategoryDelete, isDeleting, } = adminServices.useResourceDelete({
-              deleteResource: deleteBlogCategory,
+          const { isDeleting, handleResourceDelete: handleCategoryDelete, } = adminServices.useResourceDelete({
+              deleteResource: deleteCategory,
               resourceName: 'Post',
               onSuccess: fetchCategoryList,
               context,
           });
           const isCategoryMoving = compositionApi.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 @@
           /** Misc */
           const isRowDataLoading = compositionApi.computed(() => isCategoryListLoading.value || isModuleConfigLoading.value);
           const displayedCategoryList = compositionApi.computed(() => convertCategoryList(categoryList.value, languageList.value));
-          const columnDefs = compositionApi.computed(() => getCategoryTableColumnDefs(moduleConfig.value, context.root.$t));
+          const columnDefs = compositionApi.computed(() => getCategoryTableColumnDefs(moduleConfig.value, context.root.$t, canViewAdministrators.value));
           return {
               columnDefs,
               rowData: displayedCategoryList,
@@ -3630,7 +4359,7 @@
               isDeleting,
               getBlogCategoryFormUrl,
               getLinkToPostsByCategory,
-              moveCategory,
+              startMoveCategory,
               isCategoryMoving,
               searchQuery,
               handleChange,
@@ -3641,6 +4370,8 @@
               languageOptionList,
               tags,
               tagRemovalHandler,
+              // Permissions
+              canViewAdministrators,
           };
       },
   });
@@ -3657,11 +4388,13 @@
       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 @@
                               },
                               on: {
                                 click: function ($event) {
-                                  return _vm.moveCategory(row.id, "up")
+                                  return _vm.startMoveCategory(row.id, "up")
                                 },
                               },
                             },
@@ -3805,7 +4538,7 @@
                               },
                               on: {
                                 click: function ($event) {
-                                  return _vm.moveCategory(row.id, "down")
+                                  return _vm.startMoveCategory(row.id, "down")
                                 },
                               },
                             },
@@ -3879,92 +4612,87 @@
     );
 
   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: adminServices.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 = compositionApi.defineComponent({
-      name: 'BlogCategoryForm',
+      name: 'CategoryForm',
       components: { FormFooter: adminUi.FormFooter },
       setup(props, context) {
+          const { t } = adminUi.useTranslation(context);
           const categoryId = compositionApi.computed(() => context.root.$route.params.categoryId);
           const isCreation = compositionApi.computed(() => categoryId.value === 'create');
           /** Fetch module config */
-          const { data: moduleConfig, loading: isModuleConfigLoading, } = useModuleConfig({ context });
+          const { data: moduleConfig, loading: isModuleConfigLoading, } = useFetchModuleConfig({ context });
           const languageList = compositionApi.computed(() => { var _a, _b; return (_b = (_a = moduleConfig.value) === null || _a === void 0 ? void 0 : _a.languages) !== null && _b !== void 0 ? _b : []; });
           const languageOptionList = compositionApi.computed(() => languageList.value.map(({ id, name }) => ({ value: id, label: name })));
           const isLangSpecific = compositionApi.computed(() => languageOptionList.value.length > 0);
+          const imageScenario = compositionApi.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 },] = adminServices.useResource({
-              fetchResource: () => getBlogCategory(categoryId.value),
-              initialValue: null,
+          const { data: category, loading: isCategoryLoading } = useFetchCategory({
               context,
-              resourceName: 'Category',
-          });
-          compositionApi.onMounted(() => {
-              if (isCreation.value)
-                  return;
-              fetchCategory();
-          });
-          compositionApi.watch(categoryId, () => {
-              if (isCreation.value)
-                  return;
-              fetchCategory();
+              categoryId,
+              isCreation,
           });
           /** Form State */
+          const isSubmitting = compositionApi.ref(false);
           const values = compositionApi.ref(convertCategoryToFormValues(category.value, languageOptionList.value));
           const errors = compositionApi.ref({});
-          const isSubmitting = compositionApi.ref(false);
           compositionApi.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 @@
                   isSubmitting.value = false;
               });
           }
+          /** Category Options */
+          const categoryOptionList = compositionApi.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 = compositionApi.computed(() => isCategoryLoading.value || isModuleConfigLoading.value);
+          const isContentLoading = compositionApi.computed(() => isCategoryLoading.value ||
+              isModuleConfigLoading.value ||
+              isCategoriesLoading.value);
           const categoryPagePath = compositionApi.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 `${adminServices.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 = compositionApi.computed(() => [
+              { id: 'common', label: t('blog:tabs.common') },
+              { id: 'seo', label: t('blog:tabs.seo') },
+          ]);
+          const selectedTabId = compositionApi.ref(tabList.value[0].id);
           return {
               isCreation,
               isContentLoading: isContentLoading,
@@ -4019,6 +4766,13 @@
               submitForm,
               isSubmitting,
               moduleConfig,
+              categoryOptionList,
+              // SEO
+              imageScenario,
+              handleSeoFieldGroupChange,
+              // Tabs
+              tabList,
+              selectedTabId,
           };
       },
   });
@@ -4055,123 +4809,182 @@
                   },
                 },
                 [
-                  _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
               ),
             ]
           },
@@ -4304,24 +5117,26 @@
   exports.BLOG_POST_FORM_ROUTE = BLOG_POST_FORM_ROUTE;
   exports.BLOG_POST_LIST_ROUTE = BLOG_POST_LIST_ROUTE;
   exports.BLOG_ROUTE_PATHS = BLOG_ROUTE_PATHS;
-  exports.createBlogCategory = createBlogCategory;
+  exports.clonePost = clonePost;
   exports.createBlogPost = createBlogPost;
-  exports.deleteBlogCategory = deleteBlogCategory;
+  exports.createCategory = createCategory;
   exports.deleteBlogPost = deleteBlogPost;
-  exports.getBlogCategory = getBlogCategory;
+  exports.deleteCategory = deleteCategory;
   exports.getBlogCategoryFormUrl = getBlogCategoryFormUrl;
-  exports.getBlogCategoryList = getBlogCategoryList;
   exports.getBlogCategoryListUrl = getBlogCategoryListUrl;
   exports.getBlogMenuItem = getBlogMenuItem;
-  exports.getBlogModuleConfig = getBlogModuleConfig;
-  exports.getBlogPost = getBlogPost;
-  exports.getBlogPostCount = getBlogPostCount;
   exports.getBlogPostFormUrl = getBlogPostFormUrl;
-  exports.getBlogPostList = getBlogPostList;
   exports.getBlogPostListUrl = getBlogPostListUrl;
-  exports.moveBlogCategory = moveBlogCategory;
-  exports.updateBlogCategory = updateBlogCategory;
+  exports.getCategories = getCategories;
+  exports.getCategory = getCategory;
+  exports.getModuleConfig = getModuleConfig;
+  exports.getPost = getPost;
+  exports.getPosts = getPosts;
+  exports.getPostsCount = getPostsCount;
+  exports.getUserProfile = getUserProfile;
+  exports.moveCategory = moveCategory;
   exports.updateBlogPost = updateBlogPost;
+  exports.updateCategory = updateCategory;
 
   Object.defineProperty(exports, '__esModule', { value: true });