@tager/admin-files 0.0.2 → 0.0.6

package/dist/views/FilesList/FilesList.vue.d.ts

@@ -1,7 +1,8 @@
 import { ColumnDefinition } from '@tager/admin-ui';
 import { FileModel } from '../../typings/model';
 import { getFilesFormUrl } from '../../utils/paths';
-declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+import UrlCell from './components/UrlCell';
+declare const _default: import("vue").ComponentOptions<UrlCell, import("@vue/composition-api").ShallowUnwrapRef<{
     columnDefs: ColumnDefinition<FileModel>[];
     getFilesFormUrl: typeof getFilesFormUrl;
     rowData: import("@vue/composition-api").Ref<FileModel[]>;
@@ -16,7 +17,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     isDeleting: (entityId: string | number) => boolean;
 }> & import("@vue/composition-api").Data, {}, {}, unknown, {
     [x: string]: any;
-}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+}> & import("vue").VueConstructor<UrlCell> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     [x: string]: any;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     columnDefs: ColumnDefinition<FileModel>[];

package/dist/views/FilesList/components/UrlCell/UrlCell.vue.d.ts

@@ -0,0 +1,169 @@
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data> & import("@vue/composition-api").Data, {}, {}, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, ({
+    [x: number]: string;
+} & {
+    length?: number | undefined;
+    toString?: string | undefined;
+    toLocaleString?: string | undefined;
+    pop?: string | undefined;
+    push?: number | undefined;
+    concat?: string[] | undefined;
+    join?: string | undefined;
+    reverse?: string[] | undefined;
+    shift?: string | undefined;
+    slice?: string[] | undefined;
+    sort?: string[] | undefined;
+    splice?: {
+        (start: number, deleteCount?: number | undefined): string[];
+        (start: number, deleteCount: number, ...items: string[]): string[];
+    } | undefined;
+    unshift?: number | undefined;
+    indexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
+    lastIndexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
+    every?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
+    some?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
+    forEach?: ((callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any) => void) | undefined;
+    map?: (<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | undefined;
+    filter?: {
+        <S extends string>(callbackfn: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
+        (callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
+    } | undefined;
+    reduce?: {
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        <U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
+    } | undefined;
+    reduceRight?: {
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        <U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
+    } | undefined;
+    find?: {
+        <S_1 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_1, thisArg?: any): S_1 | undefined;
+        (predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
+    } | undefined;
+    findIndex?: ((predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any) => number) | undefined;
+    fill?: ((value: string, start?: number | undefined, end?: number | undefined) => string[]) | undefined;
+    copyWithin?: ((target: number, start: number, end?: number | undefined) => string[]) | undefined;
+    entries?: IterableIterator<[number, string]> | undefined;
+    keys?: IterableIterator<number> | undefined;
+    values?: IterableIterator<string> | undefined;
+    includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined;
+    flatMap?: (<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[]) | undefined;
+    flat?: unknown[] | undefined;
+}) | ({} & {
+    [x: string]: any;
+    [x: number]: any;
+})> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<({
+    [x: number]: string;
+} & {
+    length?: number | undefined;
+    toString?: string | undefined;
+    toLocaleString?: string | undefined;
+    pop?: string | undefined;
+    push?: number | undefined;
+    concat?: string[] | undefined;
+    join?: string | undefined;
+    reverse?: string[] | undefined;
+    shift?: string | undefined;
+    slice?: string[] | undefined;
+    sort?: string[] | undefined;
+    splice?: {
+        (start: number, deleteCount?: number | undefined): string[];
+        (start: number, deleteCount: number, ...items: string[]): string[];
+    } | undefined;
+    unshift?: number | undefined;
+    indexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
+    lastIndexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
+    every?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
+    some?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
+    forEach?: ((callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any) => void) | undefined;
+    map?: (<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | undefined;
+    filter?: {
+        <S extends string>(callbackfn: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
+        (callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
+    } | undefined;
+    reduce?: {
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        <U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
+    } | undefined;
+    reduceRight?: {
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        <U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
+    } | undefined;
+    find?: {
+        <S_1 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_1, thisArg?: any): S_1 | undefined;
+        (predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
+    } | undefined;
+    findIndex?: ((predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any) => number) | undefined;
+    fill?: ((value: string, start?: number | undefined, end?: number | undefined) => string[]) | undefined;
+    copyWithin?: ((target: number, start: number, end?: number | undefined) => string[]) | undefined;
+    entries?: IterableIterator<[number, string]> | undefined;
+    keys?: IterableIterator<number> | undefined;
+    values?: IterableIterator<string> | undefined;
+    includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined;
+    flatMap?: (<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[]) | undefined;
+    flat?: unknown[] | undefined;
+}) | ({} & {
+    [x: string]: any;
+    [x: number]: any;
+}), import("@vue/composition-api").ShallowUnwrapRef<import("@vue/composition-api").Data>, import("@vue/composition-api").Data, {}, {}, ({
+    [x: number]: string;
+} & {
+    length?: number | undefined;
+    toString?: string | undefined;
+    toLocaleString?: string | undefined;
+    pop?: string | undefined;
+    push?: number | undefined;
+    concat?: string[] | undefined;
+    join?: string | undefined;
+    reverse?: string[] | undefined;
+    shift?: string | undefined;
+    slice?: string[] | undefined;
+    sort?: string[] | undefined;
+    splice?: {
+        (start: number, deleteCount?: number | undefined): string[];
+        (start: number, deleteCount: number, ...items: string[]): string[];
+    } | undefined;
+    unshift?: number | undefined;
+    indexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
+    lastIndexOf?: ((searchElement: string, fromIndex?: number | undefined) => number) | undefined;
+    every?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
+    some?: ((callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any) => boolean) | undefined;
+    forEach?: ((callbackfn: (value: string, index: number, array: string[]) => void, thisArg?: any) => void) | undefined;
+    map?: (<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | undefined;
+    filter?: {
+        <S extends string>(callbackfn: (value: string, index: number, array: string[]) => value is S, thisArg?: any): S[];
+        (callbackfn: (value: string, index: number, array: string[]) => unknown, thisArg?: any): string[];
+    } | undefined;
+    reduce?: {
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        <U_1>(callbackfn: (previousValue: U_1, currentValue: string, currentIndex: number, array: string[]) => U_1, initialValue: U_1): U_1;
+    } | undefined;
+    reduceRight?: {
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string): string;
+        (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: string[]) => string, initialValue: string): string;
+        <U_2>(callbackfn: (previousValue: U_2, currentValue: string, currentIndex: number, array: string[]) => U_2, initialValue: U_2): U_2;
+    } | undefined;
+    find?: {
+        <S_1 extends string>(predicate: (this: void, value: string, index: number, obj: string[]) => value is S_1, thisArg?: any): S_1 | undefined;
+        (predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any): string | undefined;
+    } | undefined;
+    findIndex?: ((predicate: (value: string, index: number, obj: string[]) => unknown, thisArg?: any) => number) | undefined;
+    fill?: ((value: string, start?: number | undefined, end?: number | undefined) => string[]) | undefined;
+    copyWithin?: ((target: number, start: number, end?: number | undefined) => string[]) | undefined;
+    entries?: IterableIterator<[number, string]> | undefined;
+    keys?: IterableIterator<number> | undefined;
+    values?: IterableIterator<string> | undefined;
+    includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | undefined;
+    flatMap?: (<U_3, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U_3 | readonly U_3[], thisArg?: This | undefined) => U_3[]) | undefined;
+    flat?: unknown[] | undefined;
+}) | ({} & {
+    [x: string]: any;
+    [x: number]: any;
+}), {
+    [x: number]: string;
+} | {}, true>);
+export default _default;

package/dist/views/FilesList/components/UrlCell/index.d.ts

@@ -0,0 +1 @@
+export { default } from './UrlCell.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-files",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "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/services/requests.ts

@@ -20,6 +20,6 @@ export function deleteFile(
   return request.delete({ path: `/admin/userfiles/${fileId}` });
 }
 
-export function addFile(params: { file: string }) {
-  return request.post({ path: '/admin/userfiles', params });
+export function addFile(payload: { file: string }) {
+  return request.post({ path: '/admin/userfiles', body: payload });
 }

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,31 @@
     ]"
   >
     <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(url)="{ row }">
+        <UrlCell :url="row.url"/>
+      </template>
+
       <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 +41,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from '@vue/composition-api';
+import {defineComponent, onMounted} from '@vue/composition-api';
+import filesize from 'filesize';
 
 import {
   ColumnDefinition,
   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';
+
+import UrlCell from './components/UrlCell';
 
 export default defineComponent({
   name: 'FilesList',
+  components: {
+    UrlCell,
+  },
   setup(props, context) {
-    const { t } = useTranslation(context);
+    const {t} = useTranslation(context);
 
     const {
       fetchEntityList: fetchFilesList,
@@ -67,11 +77,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 +92,7 @@ export default defineComponent({
       fetchFilesList();
     });
 
-    const { handleResourceDelete, isDeleting } = useResourceDelete({
+    const {handleResourceDelete, isDeleting} = useResourceDelete({
       deleteResource: deleteFile,
       resourceName: 'File',
       onSuccess: fetchFilesList,
@@ -94,8 +104,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 +121,21 @@ 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',
-        field: 'url',
+        field: 'url'
       },
       {
         id: 6,
         name: t('files:delete'),
         field: 'delete',
-        style: { textAlign: 'center' },
-        headStyle: { textAlign: 'center' },
+        style: {textAlign: 'center'},
+        headStyle: {textAlign: 'center'},
       },
     ];
 

package/src/views/FilesList/components/UrlCell/UrlCell.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="url-cell">
+    <a :href="url" target="_blank" class="url-text">{{ cutUrlOrigin(url) }}</a>
+    <base-button variant="icon" class="copy-button" @click="handleCopy(url)">
+      <svg-icon v-if="!isCopied" name="contentCopy" class="icon-size" />
+      <svg-icon v-else name="done" class="icon-size icon-color-green" />
+    </base-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+
+import { cutUrlOrigin } from '@tager/admin-ui/src/utils/common';
+import { useCopyToClipboard } from '@tager/admin-ui';
+
+interface Props {
+  url: string;
+}
+
+export default defineComponent<Props>({
+  name: 'UrlCell',
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+  setup() {
+    const [isCopied, handleCopy] = useCopyToClipboard(500);
+
+    return {
+      isCopied,
+      handleCopy,
+      cutUrlOrigin,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.url-cell {
+  display: flex;
+  align-items: center;
+
+  .url-text {
+    color: #007bff;
+
+    &:hover {
+      color: #0056b3;
+      text-decoration: underline;
+    }
+  }
+
+  .copy-button {
+    margin-left: 5px;
+
+    .icon-size {
+      width: 14px;
+      height: 14px;
+    }
+
+    .icon-color-green {
+      color: #22863a;
+    }
+  }
+}
+</style>

package/src/views/FilesList/components/UrlCell/index.ts

@@ -0,0 +1 @@
+export { default } from './UrlCell.vue';