@tager/admin-files 0.0.2 → 0.0.6

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { request, useResourceDelete, convertRequestErrorToMap, i18n } from '@tager/admin-services';
+import { request, isAbsoluteUrl, useResourceDelete, convertRequestErrorToMap, i18n } from '@tager/admin-services';
 import { defineComponent, onMounted, ref } from '@vue/composition-api';
-import { useTranslation, useDataTable, FormFooter } from '@tager/admin-ui';
+import { useCopyToClipboard, useTranslation, useDataTable, FormFooter } from '@tager/admin-ui';
 import { compile } from 'path-to-regexp';
 
 const EN = {
@@ -41,6 +41,176 @@ const RU = {
     add: 'Добавить',
 };
 
+/**
+ * filesize
+ *
+ * @copyright 2021 Jason Mulligan <jason.mulligan@avoidwork.com>
+ * @license BSD-3-Clause
+ * @version 7.0.0
+ */
+const b = /^(b|B)$/,
+	symbol = {
+		iec: {
+			bits: ["b", "Kib", "Mib", "Gib", "Tib", "Pib", "Eib", "Zib", "Yib"],
+			bytes: ["B", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]
+		},
+		jedec: {
+			bits: ["b", "Kb", "Mb", "Gb", "Tb", "Pb", "Eb", "Zb", "Yb"],
+			bytes: ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
+		}
+	},
+	fullform = {
+		iec: ["", "kibi", "mebi", "gibi", "tebi", "pebi", "exbi", "zebi", "yobi"],
+		jedec: ["", "kilo", "mega", "giga", "tera", "peta", "exa", "zetta", "yotta"]
+	},
+	roundingFuncs = {
+		floor: Math.floor,
+		ceil: Math.ceil
+	};
+
+/**
+ * filesize
+ *
+ * @method filesize
+ * @param  {Mixed}   arg        String, Int or Float to transform
+ * @param  {Object}  descriptor [Optional] Flags
+ * @return {String}             Readable file size String
+ */
+function filesize (arg, descriptor = {}) {
+	let result = [],
+		val = 0,
+		e, base, bits, ceil, full, fullforms, locale, localeOptions, neg, num, output, pad, round, u, unix, separator, spacer, standard, symbols, roundingFunc, precision;
+
+	if (isNaN(arg)) {
+		throw new TypeError("Invalid number");
+	}
+
+	bits = descriptor.bits === true;
+	unix = descriptor.unix === true;
+	pad = descriptor.pad === true;
+	base = descriptor.base || 2;
+	round = descriptor.round !== void 0 ? descriptor.round : unix ? 1 : 2;
+	locale = descriptor.locale !== void 0 ? descriptor.locale : "";
+	localeOptions = descriptor.localeOptions || {};
+	separator = descriptor.separator !== void 0 ? descriptor.separator : "";
+	spacer = descriptor.spacer !== void 0 ? descriptor.spacer : unix ? "" : " ";
+	symbols = descriptor.symbols || {};
+	standard = base === 2 ? descriptor.standard || "jedec" : "jedec";
+	output = descriptor.output || "string";
+	full = descriptor.fullform === true;
+	fullforms = descriptor.fullforms instanceof Array ? descriptor.fullforms : [];
+	e = descriptor.exponent !== void 0 ? descriptor.exponent : -1;
+	roundingFunc = roundingFuncs[descriptor.roundingMethod] || Math.round;
+	num = Number(arg);
+	neg = num < 0;
+	ceil = base > 2 ? 1000 : 1024;
+	precision = isNaN(descriptor.precision) === false ? parseInt(descriptor.precision, 10) : 0;
+
+	// Flipping a negative number to determine the size
+	if (neg) {
+		num = -num;
+	}
+
+	// Determining the exponent
+	if (e === -1 || isNaN(e)) {
+		e = Math.floor(Math.log(num) / Math.log(ceil));
+
+		if (e < 0) {
+			e = 0;
+		}
+	}
+
+	// Exceeding supported length, time to reduce & multiply
+	if (e > 8) {
+		if (precision > 0) {
+			precision += 8 - e;
+		}
+
+		e = 8;
+	}
+
+	if (output === "exponent") {
+		return e;
+	}
+
+	// Zero is now a special case because bytes divide by 1
+	if (num === 0) {
+		result[0] = 0;
+		u = result[1] = unix ? "" : symbol[standard][bits ? "bits" : "bytes"][e];
+	} else {
+		val = num / (base === 2 ? Math.pow(2, e * 10) : Math.pow(1000, e));
+
+		if (bits) {
+			val = val * 8;
+
+			if (val >= ceil && e < 8) {
+				val = val / ceil;
+				e++;
+			}
+		}
+
+		const p = Math.pow(10, e > 0 ? round : 0);
+		result[0] = roundingFunc(val * p) / p;
+
+		if (result[0] === ceil && e < 8 && descriptor.exponent === void 0) {
+			result[0] = 1;
+			e++;
+		}
+
+		u = result[1] = base === 10 && e === 1 ? bits ? "kb" : "kB" : symbol[standard][bits ? "bits" : "bytes"][e];
+
+		if (unix) {
+			result[1] = standard === "jedec" ? result[1].charAt(0) : e > 0 ? result[1].replace(/B$/, "") : result[1];
+
+			if (b.test(result[1])) {
+				result[0] = Math.floor(result[0]);
+				result[1] = "";
+			}
+		}
+	}
+
+	// Decorating a 'diff'
+	if (neg) {
+		result[0] = -result[0];
+	}
+
+	// Setting optional precision
+	if (precision > 0) {
+		result[0] = result[0].toPrecision(precision);
+	}
+
+	// Applying custom symbol
+	result[1] = symbols[result[1]] || result[1];
+
+	if (locale === true) {
+		result[0] = result[0].toLocaleString();
+	} else if (locale.length > 0) {
+		result[0] = result[0].toLocaleString(locale, localeOptions);
+	} else if (separator.length > 0) {
+		result[0] = result[0].toString().replace(".", separator);
+	}
+
+	if (pad && Number.isInteger(result[0]) === false && round > 0) {
+		const x = separator || ".",
+			tmp = result[0].toString().split(x),
+			s = tmp[1] || "",
+			l = s.length,
+			n = round - l;
+
+		result[0] = `${tmp[0]}${x}${s.padEnd(l + n, "0")}`;
+	}
+
+	if (full) {
+		result[1] = fullforms[e] ? fullforms[e] : fullform[standard][e] + (bits ? "bit" : "byte") + (result[0] === 1 ? "" : "s");
+	}
+
+	// Returning Array, Object, or String (default)
+	return output === "array" ? result : output === "object" ? {value: result[0], symbol: result[1], exponent: e, unit: u} : result.join(spacer);
+}
+
+// Partial application for functional programming
+filesize.partial = opt => arg => filesize(arg, opt);
+
 function getFilesList(params) {
     return request.get({ path: '/admin/userfiles', params });
 }
@@ -50,8 +220,8 @@ function getFilesCount() {
 function deleteFile(fileId) {
     return request.delete({ path: `/admin/userfiles/${fileId}` });
 }
-function addFile(params) {
-    return request.post({ path: '/admin/userfiles', params });
+function addFile(payload) {
+    return request.post({ path: '/admin/userfiles', body: payload });
 }
 
 const FILES_ROUTE_PATHS = {
@@ -66,79 +236,32 @@ function getFilesFormUrl(params) {
     return compile(FILES_ROUTE_PATHS.FILES_FORM)(params);
 }
 
-var script$1 = defineComponent({
-    name: 'FilesList',
-    setup(props, context) {
-        const { t } = useTranslation(context);
-        const { fetchEntityList: fetchFilesList, isLoading: isFilesListLoading, rowData: filesList, errorMessage, searchQuery, handleChange, pageSize, pageCount, pageNumber, } = useDataTable({
-            fetchEntityList: (params) => getFilesList({
-                query: params.searchQuery,
-                pageNumber: params.pageNumber,
-                pageSize: params.pageSize,
-            }),
-            initialValue: [],
-            context,
-            resourceName: 'Files list',
-            pageSize: 100,
-        });
-        onMounted(() => {
-            fetchFilesList();
-        });
-        const { handleResourceDelete, isDeleting } = useResourceDelete({
-            deleteResource: deleteFile,
-            resourceName: 'File',
-            onSuccess: fetchFilesList,
-            context,
-        });
-        const columnDefs = [
-            {
-                id: 1,
-                name: 'ID',
-                field: 'id',
-                style: { width: '50px', textAlign: 'center' },
-                headStyle: { width: '50px', textAlign: 'center' },
-            },
-            {
-                id: 2,
-                name: t('files:fileName'),
-                field: 'name',
-            },
-            {
-                id: 3,
-                name: t('files:fileType'),
-                field: 'type',
-            },
-            {
-                id: 4,
-                name: t('files:fileSize'),
-                field: 'size',
-            },
-            {
-                id: 5,
-                name: 'URL',
-                field: 'url',
-            },
-            {
-                id: 6,
-                name: t('files:delete'),
-                field: 'delete',
-                style: { textAlign: 'center' },
-                headStyle: { textAlign: 'center' },
-            },
-        ];
+/**
+ * Example:
+ * input: "https://ozitag.com/search?query=some_text"
+ * output: "/search?query=some_text"
+ */
+function cutUrlOrigin(url) {
+    if (!isAbsoluteUrl(url))
+        return url;
+    const urlObject = new URL(url);
+    return urlObject.href.slice(urlObject.origin.length);
+}
+
+var script$2 = defineComponent({
+    name: 'UrlCell',
+    props: {
+        url: {
+            type: String,
+            default: '',
+        },
+    },
+    setup() {
+        const [isCopied, handleCopy] = useCopyToClipboard(500);
         return {
-            columnDefs,
-            getFilesFormUrl,
-            rowData: filesList,
-            isRowDataLoading: isFilesListLoading,
-            errorMessage: errorMessage,
-            searchQuery,
-            handleChange,
-            pageSize,
-            pageCount,
-            pageNumber,
-            handleResourceDelete,
-            isDeleting,
+            isCopied,
+            handleCopy,
+            cutUrlOrigin,
         };
     },
 });
@@ -218,6 +341,222 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla
     return script;
 }
 
+const isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return (id, style) => addStyle(id, style);
+}
+let HEAD;
+const styles = {};
+function addStyle(id, css) {
+    const group = isOldIE ? css.media || 'default' : id;
+    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        let code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                style.element.setAttribute('media', css.media);
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            const index = style.ids.size - 1;
+            const textNode = document.createTextNode(code);
+            const nodes = style.element.childNodes;
+            if (nodes[index])
+                style.element.removeChild(nodes[index]);
+            if (nodes.length)
+                style.element.insertBefore(textNode, nodes[index]);
+            else
+                style.element.appendChild(textNode);
+        }
+    }
+}
+
+/* script */
+const __vue_script__$2 = script$2;
+
+/* template */
+var __vue_render__$2 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    { staticClass: "url-cell" },
+    [
+      _c(
+        "a",
+        { staticClass: "url-text", attrs: { href: _vm.url, target: "_blank" } },
+        [_vm._v(_vm._s(_vm.cutUrlOrigin(_vm.url)))]
+      ),
+      _vm._v(" "),
+      _c(
+        "base-button",
+        {
+          staticClass: "copy-button",
+          attrs: { variant: "icon" },
+          on: {
+            click: function ($event) {
+              return _vm.handleCopy(_vm.url)
+            },
+          },
+        },
+        [
+          !_vm.isCopied
+            ? _c("svg-icon", {
+                staticClass: "icon-size",
+                attrs: { name: "contentCopy" },
+              })
+            : _c("svg-icon", {
+                staticClass: "icon-size icon-color-green",
+                attrs: { name: "done" },
+              }),
+        ],
+        1
+      ),
+    ],
+    1
+  )
+};
+var __vue_staticRenderFns__$2 = [];
+__vue_render__$2._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$2 = function (inject) {
+    if (!inject) return
+    inject("data-v-1551a39a_0", { source: ".url-cell[data-v-1551a39a] {\n  display: flex;\n  align-items: center;\n}\n.url-cell .url-text[data-v-1551a39a] {\n  color: #007bff;\n}\n.url-cell .url-text[data-v-1551a39a]:hover {\n  color: #0056b3;\n  text-decoration: underline;\n}\n.url-cell .copy-button[data-v-1551a39a] {\n  margin-left: 5px;\n}\n.url-cell .copy-button .icon-size[data-v-1551a39a] {\n  width: 14px;\n  height: 14px;\n}\n.url-cell .copy-button .icon-color-green[data-v-1551a39a] {\n  color: #22863a;\n}\n\n/*# sourceMappingURL=UrlCell.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-files/tager-admin-files/src/views/FilesList/components/UrlCell/UrlCell.vue","UrlCell.vue"],"names":[],"mappings":"AAyCA;EACA,aAAA;EACA,mBAAA;ACxCA;AD0CA;EACA,cAAA;ACxCA;AD0CA;EACA,cAAA;EACA,0BAAA;ACxCA;AD4CA;EACA,gBAAA;AC1CA;AD4CA;EACA,WAAA;EACA,YAAA;AC1CA;AD6CA;EACA,cAAA;AC3CA;;AAEA,sCAAsC","file":"UrlCell.vue","sourcesContent":["<template>\n  <div class=\"url-cell\">\n    <a :href=\"url\" target=\"_blank\" class=\"url-text\">{{ cutUrlOrigin(url) }}</a>\n    <base-button variant=\"icon\" class=\"copy-button\" @click=\"handleCopy(url)\">\n      <svg-icon v-if=\"!isCopied\" name=\"contentCopy\" class=\"icon-size\" />\n      <svg-icon v-else name=\"done\" class=\"icon-size icon-color-green\" />\n    </base-button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from '@vue/composition-api';\n\nimport { cutUrlOrigin } from '@tager/admin-ui/src/utils/common';\nimport { useCopyToClipboard } from '@tager/admin-ui';\n\ninterface Props {\n  url: string;\n}\n\nexport default defineComponent<Props>({\n  name: 'UrlCell',\n  props: {\n    url: {\n      type: String,\n      default: '',\n    },\n  },\n  setup() {\n    const [isCopied, handleCopy] = useCopyToClipboard(500);\n\n    return {\n      isCopied,\n      handleCopy,\n      cutUrlOrigin,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.url-cell {\n  display: flex;\n  align-items: center;\n\n  .url-text {\n    color: #007bff;\n\n    &:hover {\n      color: #0056b3;\n      text-decoration: underline;\n    }\n  }\n\n  .copy-button {\n    margin-left: 5px;\n\n    .icon-size {\n      width: 14px;\n      height: 14px;\n    }\n\n    .icon-color-green {\n      color: #22863a;\n    }\n  }\n}\n</style>\n",".url-cell {\n  display: flex;\n  align-items: center;\n}\n.url-cell .url-text {\n  color: #007bff;\n}\n.url-cell .url-text:hover {\n  color: #0056b3;\n  text-decoration: underline;\n}\n.url-cell .copy-button {\n  margin-left: 5px;\n}\n.url-cell .copy-button .icon-size {\n  width: 14px;\n  height: 14px;\n}\n.url-cell .copy-button .icon-color-green {\n  color: #22863a;\n}\n\n/*# sourceMappingURL=UrlCell.vue.map */"]}, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__$2 = "data-v-1551a39a";
+  /* module identifier */
+  const __vue_module_identifier__$2 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$2 = false;
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
+    false,
+    createInjector,
+    undefined,
+    undefined
+  );
+
+var script$1 = defineComponent({
+    name: 'FilesList',
+    components: {
+        UrlCell: __vue_component__$2,
+    },
+    setup(props, context) {
+        const { t } = useTranslation(context);
+        const { fetchEntityList: fetchFilesList, isLoading: isFilesListLoading, rowData: filesList, errorMessage, searchQuery, handleChange, pageSize, pageCount, pageNumber, } = useDataTable({
+            fetchEntityList: (params) => getFilesList({
+                query: params.searchQuery,
+                pageNumber: params.pageNumber,
+                pageSize: params.pageSize,
+            }),
+            initialValue: [],
+            context,
+            resourceName: 'Files list',
+            pageSize: 100,
+        });
+        onMounted(() => {
+            fetchFilesList();
+        });
+        const { handleResourceDelete, isDeleting } = useResourceDelete({
+            deleteResource: deleteFile,
+            resourceName: 'File',
+            onSuccess: fetchFilesList,
+            context,
+        });
+        const columnDefs = [
+            {
+                id: 1,
+                name: 'ID',
+                field: 'id',
+                style: { width: '50px', textAlign: 'center' },
+                headStyle: { width: '50px', textAlign: 'center' },
+            },
+            {
+                id: 2,
+                name: t('files:fileName'),
+                field: 'name',
+            },
+            {
+                id: 3,
+                name: t('files:fileType'),
+                field: 'type',
+            },
+            {
+                id: 4,
+                name: t('files:fileSize'),
+                field: 'size',
+                format: ({ row }) => filesize(row.size),
+                style: { whiteSpace: 'nowrap' },
+                headStyle: { whiteSpace: 'nowrap' },
+            },
+            {
+                id: 5,
+                name: 'URL',
+                field: 'url'
+            },
+            {
+                id: 6,
+                name: t('files:delete'),
+                field: 'delete',
+                style: { textAlign: 'center' },
+                headStyle: { textAlign: 'center' },
+            },
+        ];
+        return {
+            columnDefs,
+            getFilesFormUrl,
+            rowData: filesList,
+            isRowDataLoading: isFilesListLoading,
+            errorMessage: errorMessage,
+            searchQuery,
+            handleChange,
+            pageSize,
+            pageCount,
+            pageNumber,
+            handleResourceDelete,
+            isDeleting,
+        };
+    },
+});
+
 /* script */
 const __vue_script__$1 = script$1;
 
@@ -256,6 +595,13 @@ var __vue_render__$1 = function () {
         },
         on: { change: _vm.handleChange },
         scopedSlots: _vm._u([
+          {
+            key: "cell(url)",
+            fn: function (ref) {
+              var row = ref.row;
+              return [_c("UrlCell", { attrs: { url: row.url } })]
+            },
+          },
           {
             key: "cell(delete)",
             fn: function (ref) {
@@ -376,59 +722,6 @@ var script = defineComponent({
     },
 });
 
-const isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return (id, style) => addStyle(id, style);
-}
-let HEAD;
-const styles = {};
-function addStyle(id, css) {
-    const group = isOldIE ? css.media || 'default' : id;
-    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        let code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                style.element.setAttribute('media', css.media);
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            const index = style.ids.size - 1;
-            const textNode = document.createTextNode(code);
-            const nodes = style.element.childNodes;
-            if (nodes[index])
-                style.element.removeChild(nodes[index]);
-            if (nodes.length)
-                style.element.insertBefore(textNode, nodes[index]);
-            else
-                style.element.appendChild(textNode);
-        }
-    }
-}
-
 /* script */
 const __vue_script__ = script;
 
@@ -501,11 +794,11 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-70cd8b05_0", { source: "\n\n/*# sourceMappingURL=FilesForm.vue.map */", map: {"version":3,"sources":["FilesForm.vue"],"names":[],"mappings":";;AAEA,wCAAwC","file":"FilesForm.vue"}, media: undefined });
+    inject("data-v-5f7d9380_0", { source: "\n\n/*# sourceMappingURL=FilesForm.vue.map */", map: {"version":3,"sources":["FilesForm.vue"],"names":[],"mappings":";;AAEA,wCAAwC","file":"FilesForm.vue"}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-70cd8b05";
+  const __vue_scope_id__ = "data-v-5f7d9380";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */