@tager/admin-files 0.0.3 → 0.0.7

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { request, useResourceDelete, convertRequestErrorToMap, i18n } from '@tager/admin-services';
 import { defineComponent, onMounted, ref } from '@vue/composition-api';
-import { useTranslation, useDataTable, FormFooter } from '@tager/admin-ui';
+import { useTranslation, useDataTable, cutUrlOrigin, 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 });
 }
@@ -68,6 +238,7 @@ function getFilesFormUrl(params) {
 
 var script$1 = defineComponent({
     name: 'FilesList',
+    components: {},
     setup(props, context) {
         const { t } = useTranslation(context);
         const { fetchEntityList: fetchFilesList, isLoading: isFilesListLoading, rowData: filesList, errorMessage, searchQuery, handleChange, pageSize, pageCount, pageNumber, } = useDataTable({
@@ -112,11 +283,19 @@ var script$1 = defineComponent({
                 id: 4,
                 name: t('files:fileSize'),
                 field: 'size',
+                format: ({ row }) => filesize(row.size),
+                style: { whiteSpace: 'nowrap' },
+                headStyle: { whiteSpace: 'nowrap' },
             },
             {
                 id: 5,
                 name: 'URL',
+                type: 'link',
                 field: 'url',
+                format: ({ row }) => ({
+                    url: row.url,
+                    text: cutUrlOrigin(row.url)
+                }),
             },
             {
                 id: 6,
@@ -501,11 +680,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 */

package/dist/index.umd.js

@@ -42,6 +42,176 @@
       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 adminServices.request.get({ path: '/admin/userfiles', params });
   }
@@ -69,6 +239,7 @@
 
   var script$1 = compositionApi.defineComponent({
       name: 'FilesList',
+      components: {},
       setup(props, context) {
           const { t } = adminUi.useTranslation(context);
           const { fetchEntityList: fetchFilesList, isLoading: isFilesListLoading, rowData: filesList, errorMessage, searchQuery, handleChange, pageSize, pageCount, pageNumber, } = adminUi.useDataTable({
@@ -113,11 +284,19 @@
                   id: 4,
                   name: t('files:fileSize'),
                   field: 'size',
+                  format: ({ row }) => filesize(row.size),
+                  style: { whiteSpace: 'nowrap' },
+                  headStyle: { whiteSpace: 'nowrap' },
               },
               {
                   id: 5,
                   name: 'URL',
+                  type: 'link',
                   field: 'url',
+                  format: ({ row }) => ({
+                      url: row.url,
+                      text: adminUi.cutUrlOrigin(row.url)
+                  }),
               },
               {
                   id: 6,
@@ -502,11 +681,11 @@
     /* 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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-files",
-  "version": "0.0.3",
+  "version": "0.0.7",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -19,6 +19,7 @@
     "yalc:clean": "yalc remove --all"
   },
   "dependencies": {
+    "filesize": "^7.0.0",
     "lodash.kebabcase": "^4.1.1",
     "path-to-regexp": "^6.1.0"
   },
@@ -27,7 +28,7 @@
     "@rollup/plugin-node-resolve": "^8.1.0",
     "@tager/admin-layout": "^0.5.1",
     "@tager/admin-services": "^0.2.23",
-    "@tager/admin-ui": "^0.8.58",
+    "@tager/admin-ui": "^0.8.78",
     "@types/lodash.kebabcase": "^4.1.6",
     "@types/node": "12.x",
     "@typescript-eslint/eslint-plugin": "^2.26.0",

package/src/views/FilesList/FilesList.vue

@@ -1,7 +1,7 @@
 <template>
   <page
-    :title="$t('files:filesList')"
-    :header-buttons="[
+      :title="$t('files:filesList')"
+      :header-buttons="[
       {
         text: $t('files:createFile'),
         href: getFilesFormUrl({ fileId: 'create' }),
@@ -9,27 +9,27 @@
     ]"
   >
     <data-table
-      :column-defs="columnDefs"
-      :row-data="rowData"
-      :loading="isRowDataLoading"
-      :error-message="errorMessage"
-      :search-query="searchQuery"
-      :pagination="{
+        :column-defs="columnDefs"
+        :row-data="rowData"
+        :loading="isRowDataLoading"
+        :error-message="errorMessage"
+        :search-query="searchQuery"
+        :pagination="{
         pageSize,
         pageCount,
         pageNumber,
         disabled: isRowDataLoading,
       }"
-      @change="handleChange"
+        @change="handleChange"
     >
       <template v-slot:cell(delete)="{ row }">
         <base-button
-          variant="icon"
-          :title="$t('files:delete')"
-          :disabled="isDeleting(row.id)"
-          @click="handleResourceDelete(row.id)"
+            variant="icon"
+            :title="$t('files:delete')"
+            :disabled="isDeleting(row.id)"
+            @click="handleResourceDelete(row.id)"
         >
-          <svg-icon name="delete" />
+          <svg-icon name="delete"/>
         </base-button>
       </template>
     </data-table>
@@ -37,23 +37,25 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from '@vue/composition-api';
+import {defineComponent, onMounted} from '@vue/composition-api';
+import filesize from 'filesize';
 
 import {
-  ColumnDefinition,
+  ColumnDefinition, cutUrlOrigin,
   useDataTable,
   useTranslation,
 } from '@tager/admin-ui';
-import { useResourceDelete } from '@tager/admin-services';
+import {useResourceDelete} from '@tager/admin-services';
 
-import { deleteFile, getFilesList } from '../../services/requests';
-import { FileModel } from '../../typings/model';
-import { getFilesFormUrl } from '../../utils/paths';
+import {deleteFile, getFilesList} from '../../services/requests';
+import {FileModel} from '../../typings/model';
+import {getFilesFormUrl} from '../../utils/paths';
 
 export default defineComponent({
   name: 'FilesList',
+  components: {},
   setup(props, context) {
-    const { t } = useTranslation(context);
+    const {t} = useTranslation(context);
 
     const {
       fetchEntityList: fetchFilesList,
@@ -67,11 +69,11 @@ export default defineComponent({
       pageNumber,
     } = useDataTable<FileModel>({
       fetchEntityList: (params) =>
-        getFilesList({
-          query: params.searchQuery,
-          pageNumber: params.pageNumber,
-          pageSize: params.pageSize,
-        }),
+          getFilesList({
+            query: params.searchQuery,
+            pageNumber: params.pageNumber,
+            pageSize: params.pageSize,
+          }),
       initialValue: [],
       context,
       resourceName: 'Files list',
@@ -82,7 +84,7 @@ export default defineComponent({
       fetchFilesList();
     });
 
-    const { handleResourceDelete, isDeleting } = useResourceDelete({
+    const {handleResourceDelete, isDeleting} = useResourceDelete({
       deleteResource: deleteFile,
       resourceName: 'File',
       onSuccess: fetchFilesList,
@@ -94,8 +96,8 @@ export default defineComponent({
         id: 1,
         name: 'ID',
         field: 'id',
-        style: { width: '50px', textAlign: 'center' },
-        headStyle: { width: '50px', textAlign: 'center' },
+        style: {width: '50px', textAlign: 'center'},
+        headStyle: {width: '50px', textAlign: 'center'},
       },
       {
         id: 2,
@@ -111,18 +113,26 @@ export default defineComponent({
         id: 4,
         name: t('files:fileSize'),
         field: 'size',
+        format: ({row}) => filesize(row.size),
+        style: {whiteSpace: 'nowrap'},
+        headStyle: {whiteSpace: 'nowrap'},
       },
       {
         id: 5,
         name: 'URL',
+        type: 'link',
         field: 'url',
+        format: ({row}) => ({
+          url: row.url,
+          text: cutUrlOrigin(row.url)
+        }),
       },
       {
         id: 6,
         name: t('files:delete'),
         field: 'delete',
-        style: { textAlign: 'center' },
-        headStyle: { textAlign: 'center' },
+        style: {textAlign: 'center'},
+        headStyle: {textAlign: 'center'},
       },
     ];