From 4cdfd1b575f2b65564500894f4a068f1e30eba7d Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 28 Sep 2022 13:25:02 +0200 Subject: [PATCH] feat: 1.0.0 appwrite support (#36) * style: remove padding and x label * feat: add new colors, play with opacity * feat: moved options inside the componenet * chore: bump css to 0.0.0-40 * disabled animations * add bar chart * feat: use charts in dashboard * fix typings * fix typing * fix: some thigs * refactor: chart components * fix: remove function from charts * fix: charts loading condition * feat: 1.0.0 support * fix: charts and project list Co-authored-by: Torsten Dittmann --- package-lock.json | 14 +- package.json | 2 +- src/lib/charts/bar.svelte | 18 + src/lib/charts/base.json | 115 ++++++ src/lib/charts/base.svelte | 90 +++++ src/lib/charts/config.ts | 24 ++ src/lib/charts/dark.json | 169 +++++++++ src/lib/charts/echartDark.json | 354 ------------------ src/lib/charts/echartLight.json | 348 ----------------- src/lib/charts/echarts.svelte | 123 ------ src/lib/charts/index.ts | 3 +- src/lib/charts/light.json | 151 ++++++++ src/lib/charts/line.svelte | 15 + src/lib/helpers/date.ts | 8 +- src/lib/helpers/sizeConvertion.ts | 52 +++ src/lib/stores/organization.ts | 24 +- src/lib/stores/user.ts | 2 +- .../console/account/activity/+page.svelte | 5 +- .../account/organizations/+page.svelte | 2 +- src/routes/console/account/store.ts | 8 +- .../+layout.svelte | 3 +- .../organization-[organization]/+page.svelte | 33 +- .../_createMember.svelte | 3 +- .../members/+page.svelte | 9 +- .../authentication/+page.svelte | 4 +- .../project-[project]/authentication/store.ts | 26 +- .../authentication/teams/+page.svelte | 4 +- .../teams/[team]/activity/+page.svelte | 6 +- .../teams/[team]/members/+page.svelte | 19 +- .../authentication/teams/[team]/store.ts | 14 +- .../authentication/usage/+page.svelte | 60 +-- .../user/[user]/activity/+page.svelte | 6 +- .../user/[user]/memberships/+page.svelte | 4 +- .../user/[user]/sessions/+page.svelte | 2 +- .../project-[project]/databases/+page.svelte | 4 +- .../database/[database]/+page.svelte | 4 +- .../database/[database]/_create.svelte | 5 +- .../collection/[collection]/+page.svelte | 3 +- .../[collection]/createDocument.svelte | 6 +- .../document/[document]/+page.svelte | 24 +- .../document/[document]/_document.svelte | 3 +- .../[collection]/settings/+page.svelte | 92 ++--- .../collection/[collection]/store.ts | 14 +- .../[collection]/wizard/step2.svelte | 11 +- .../collection/[collection]/wizard/store.ts | 6 +- .../databases/database/[database]/store.ts | 9 +- .../project-[project]/databases/store.ts | 6 +- .../project-[project]/functions/+page.svelte | 3 +- .../functions/_create.svelte | 2 +- .../function/[function]/+page.svelte | 7 +- .../project-[project]/overview/+layout.svelte | 43 ++- .../keys/[key]/+page@project-[project].svelte | 5 +- .../project-[project]/storage/+page.svelte | 4 +- .../project-[project]/storage/_create.svelte | 6 +- .../storage/bucket/[bucket]/+page.svelte | 10 +- .../storage/bucket/[bucket]/_create.svelte | 58 ++- .../bucket/[bucket]/file/[file]/+page.svelte | 37 +- .../bucket/[bucket]/settings/+page.svelte | 89 ++--- .../storage/bucket/[bucket]/store.ts | 19 +- .../project-[project]/storage/store.ts | 6 +- 60 files changed, 965 insertions(+), 1231 deletions(-) create mode 100644 src/lib/charts/bar.svelte create mode 100644 src/lib/charts/base.json create mode 100644 src/lib/charts/base.svelte create mode 100644 src/lib/charts/config.ts create mode 100644 src/lib/charts/dark.json delete mode 100644 src/lib/charts/echartDark.json delete mode 100644 src/lib/charts/echartLight.json delete mode 100644 src/lib/charts/echarts.svelte create mode 100644 src/lib/charts/light.json create mode 100644 src/lib/charts/line.svelte diff --git a/package-lock.json b/package-lock.json index 3e76041ff..b05e71318 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "@appwrite/console", "version": "0.0.1", "dependencies": { - "@aw-labs/appwrite-console": "^5.0.5", + "@aw-labs/appwrite-console": "^6.0.0", "@aw-labs/icons": "0.0.0-55", "@aw-labs/ui": "0.0.0-55", "echarts": "^5.3.3", @@ -68,9 +68,9 @@ } }, "node_modules/@aw-labs/appwrite-console": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-5.0.5.tgz", - "integrity": "sha512-xNyLAr/1KP7JagAwe6zbYRBWp7RgHEwptmCTVeJ/ASxVb0Rz6ItND8nG72dCg9D+lRVI5Qkk6Ks7Xmcj7TZpfg==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-6.0.0.tgz", + "integrity": "sha512-g4sCMGiIptDUyKhJSfiKsG/gzqMIt3MQCdqod6bNWMunbXUqN7DeA0BT4MuTeVGdQuoOKuSmgHeExatlu0Dh9Q==", "dependencies": { "cross-fetch": "3.1.5", "isomorphic-form-data": "2.0.0" @@ -8192,9 +8192,9 @@ } }, "@aw-labs/appwrite-console": { - "version": "5.0.5", - "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-5.0.5.tgz", - "integrity": "sha512-xNyLAr/1KP7JagAwe6zbYRBWp7RgHEwptmCTVeJ/ASxVb0Rz6ItND8nG72dCg9D+lRVI5Qkk6Ks7Xmcj7TZpfg==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-6.0.0.tgz", + "integrity": "sha512-g4sCMGiIptDUyKhJSfiKsG/gzqMIt3MQCdqod6bNWMunbXUqN7DeA0BT4MuTeVGdQuoOKuSmgHeExatlu0Dh9Q==", "requires": { "cross-fetch": "3.1.5", "isomorphic-form-data": "2.0.0" diff --git a/package.json b/package.json index 69131f47e..2409815ef 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "e2e": "playwright test tests/e2e" }, "dependencies": { - "@aw-labs/appwrite-console": "^5.0.5", + "@aw-labs/appwrite-console": "^6.0.0", "@aw-labs/icons": "0.0.0-55", "@aw-labs/ui": "0.0.0-55", "echarts": "^5.3.3", diff --git a/src/lib/charts/bar.svelte b/src/lib/charts/bar.svelte new file mode 100644 index 000000000..71377d401 --- /dev/null +++ b/src/lib/charts/bar.svelte @@ -0,0 +1,18 @@ + + + { + s.type = 'bar'; + s.stack = 'total'; + s.barMaxWidth = 6; + s.itemStyle = { + borderRadius: [10, 10, 0, 0] + }; + + return s; + })} /> diff --git a/src/lib/charts/base.json b/src/lib/charts/base.json new file mode 100644 index 000000000..dc424ad86 --- /dev/null +++ b/src/lib/charts/base.json @@ -0,0 +1,115 @@ +{ + "color": ["#ff80b7", "#a1c4ff", "#cbb1fc", "#94dbd1", "#fdc584", "#f02e65", "#ffa1a1"], + "backgroundColor": "rgba(255,255,255,0)", + "textStyle": {}, + "line": { + "itemStyle": { + "borderWidth": 1 + }, + "lineStyle": { + "width": 2 + }, + "symbolSize": 4, + "symbol": "emptyCircle", + "smooth": true + }, + "bar": { + "itemStyle": { + "barBorderColor": "#ccc" + } + }, + "categoryAxis": { + "axisLine": { + "show": true + }, + "axisTick": { + "show": true + }, + "axisLabel": { + "show": true + }, + "splitLine": { + "show": false + }, + "splitArea": { + "show": false + } + }, + "valueAxis": { + "axisLine": { + "show": false + }, + "axisTick": { + "show": false + }, + "axisLabel": { + "show": true + }, + "splitLine": { + "show": true + }, + "splitArea": { + "show": false + } + }, + "logAxis": { + "axisLine": { + "show": true + }, + "axisTick": { + "show": true + }, + "axisLabel": { + "show": true + }, + "splitLine": { + "show": true + }, + "splitArea": { + "show": false + } + }, + "timeAxis": { + "axisLine": { + "show": true + }, + "axisTick": { + "show": true + }, + "axisLabel": { + "show": true + }, + "splitLine": { + "show": true + }, + "splitArea": { + "show": false + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "width": 1 + }, + "crossStyle": { + "width": 1 + } + } + }, + "timeline": { + "lineStyle": { + "width": 1 + }, + "itemStyle": { + "borderWidth": 1 + }, + "controlStyle": { + "borderWidth": 0.5 + }, + "emphasis": { + "controlStyle": { + "borderWidth": 0.5 + } + } + } +} diff --git a/src/lib/charts/base.svelte b/src/lib/charts/base.svelte new file mode 100644 index 000000000..54d8e2907 --- /dev/null +++ b/src/lib/charts/base.svelte @@ -0,0 +1,90 @@ + + + + +
+ + diff --git a/src/lib/charts/config.ts b/src/lib/charts/config.ts new file mode 100644 index 000000000..0e3ff1b27 --- /dev/null +++ b/src/lib/charts/config.ts @@ -0,0 +1,24 @@ +import type { EChartsOption } from 'echarts'; + +export const defaultConfig: EChartsOption = { + animation: false, + tooltip: { + trigger: 'axis' + }, + grid: { + containLabel: true, + left: 0, + right: 0, + bottom: 15, + top: 15 + }, + xAxis: { + type: 'time', + show: false + }, + yAxis: { + type: 'value', + splitNumber: 3, + minInterval: 1 + } +}; diff --git a/src/lib/charts/dark.json b/src/lib/charts/dark.json new file mode 100644 index 000000000..0dc125052 --- /dev/null +++ b/src/lib/charts/dark.json @@ -0,0 +1,169 @@ +{ + "color": ["#f02e65", "#a1c4ff", "#cbb1fc", "#94dbd1", "#fdc584", "#f02e65", "#ffa1a1"], + "backgroundColor": "rgba(0,0,0,0)", + "title": { + "textStyle": { + "color": "#eeeeee" + }, + "subtextStyle": { + "color": "#aaaaaa" + } + }, + "bar": { + "itemStyle": { + "barBorderColor": "#444444" + } + }, + "categoryAxis": { + "axisLine": { + "lineStyle": { + "color": "#333333" + } + }, + "axisTick": { + "lineStyle": { + "color": "#333333" + } + }, + "axisLabel": { + "color": "#444444" + }, + "splitLine": { + "lineStyle": { + "color": ["#444444"] + } + }, + "splitArea": { + "areaStyle": { + "color": ["#eeeeee"] + } + } + }, + "valueAxis": { + "axisTick": { + "lineStyle": { + "color": "#333333" + } + }, + "axisLabel": { + "color": "#666666" + }, + "splitLine": { + "lineStyle": { + "color": ["#333333"] + } + }, + "splitArea": { + "show": false + } + }, + "logAxis": { + "axisLine": { + "lineStyle": { + "color": "#333333" + } + }, + "axisTick": { + "lineStyle": { + "color": "#333333" + } + }, + "axisLabel": { + "color": "#666666" + }, + "splitLine": { + "lineStyle": { + "color": ["#333333"] + } + } + }, + "timeAxis": { + "axisLine": { + "lineStyle": { + "color": "#333333" + } + }, + "axisTick": { + "lineStyle": { + "color": "#333333" + } + }, + "axisLabel": { + "color": "#666666" + }, + "splitLine": { + "lineStyle": { + "color": ["#333333"] + } + } + }, + "toolbox": { + "iconStyle": { + "borderColor": "#999999" + }, + "emphasis": { + "iconStyle": { + "borderColor": "#444444" + } + } + }, + "legend": { + "textStyle": { + "color": "#eeeeee" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#444444" + }, + "crossStyle": { + "color": "#444444" + } + } + }, + "timeline": { + "lineStyle": { + "color": "#444444" + }, + "itemStyle": { + "color": "#dd6b66" + }, + "controlStyle": { + "color": "#444444", + "borderColor": "#444444" + }, + "checkpointStyle": { + "color": "#e43c59", + "borderColor": "#c23531" + }, + "label": { + "color": "#eeeeee" + }, + "emphasis": { + "itemStyle": { + "color": "#a9334c" + }, + "controlStyle": { + "color": "#444444", + "borderColor": "#444444" + }, + "label": { + "color": "#eeeeee" + } + } + }, + "visualMap": { + "color": ["#bf444c", "#d88273", "#f6efa6"] + }, + "markPoint": { + "label": { + "color": "#444444" + }, + "emphasis": { + "label": { + "color": "#444444" + } + } + } +} diff --git a/src/lib/charts/echartDark.json b/src/lib/charts/echartDark.json deleted file mode 100644 index a0c9bd8f3..000000000 --- a/src/lib/charts/echartDark.json +++ /dev/null @@ -1,354 +0,0 @@ -{ - "color": ["#00a7c3", "#F02E65", "#00BC5D", "#F38500", "#FF453A"], - "backgroundColor": "rgba(0,0,0,0)", - "textStyle": {}, - "title": { - "textStyle": { - "color": "#eeeeee" - }, - "subtextStyle": { - "color": "#aaaaaa" - } - }, - "line": { - "itemStyle": { - "borderWidth": 1 - }, - "lineStyle": { - "width": 2 - }, - "symbolSize": 4, - "symbol": "circle", - "smooth": true - }, - "radar": { - "itemStyle": { - "borderWidth": 1 - }, - "lineStyle": { - "width": 2 - }, - "symbolSize": 4, - "symbol": "circle", - "smooth": true - }, - "bar": { - "itemStyle": { - "barBorderWidth": "0", - "barBorderColor": "#444444" - } - }, - "pie": { - "itemStyle": { - "borderWidth": "0", - "borderColor": "#444444" - } - }, - "scatter": { - "itemStyle": { - "borderWidth": "0", - "borderColor": "#444444" - } - }, - "boxplot": { - "itemStyle": { - "borderWidth": "0", - "borderColor": "#444444" - } - }, - "parallel": { - "itemStyle": { - "borderWidth": "0", - "borderColor": "#444444" - } - }, - "sankey": { - "itemStyle": { - "borderWidth": "0", - "borderColor": "#444444" - } - }, - "funnel": { - "itemStyle": { - "borderWidth": "0", - "borderColor": "#444444" - } - }, - "gauge": { - "itemStyle": { - "borderWidth": "0", - "borderColor": "#444444" - } - }, - "candlestick": { - "itemStyle": { - "color": "#fd1050", - "color0": "#0cf49b", - "borderColor": "#fd1050", - "borderColor0": "#0cf49b", - "borderWidth": 1 - } - }, - "graph": { - "itemStyle": { - "borderWidth": "0", - "borderColor": "#444444" - }, - "lineStyle": { - "width": 1, - "color": "#aaaaaa" - }, - "symbolSize": 4, - "symbol": "circle", - "smooth": true, - "color": ["#dd6b66", "#759aa0", "#e69d87", "#f38500", "#ff453a"], - "label": { - "color": "#444444" - } - }, - "map": { - "itemStyle": { - "areaColor": "#eee", - "borderColor": "#444", - "borderWidth": 0.5 - }, - "label": { - "color": "#000" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(255,215,0,0.8)", - "borderColor": "#444", - "borderWidth": 1 - }, - "label": { - "color": "rgb(100,0,0)" - } - } - }, - "geo": { - "itemStyle": { - "areaColor": "#eee", - "borderColor": "#444", - "borderWidth": 0.5 - }, - "label": { - "color": "#000" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(255,215,0,0.8)", - "borderColor": "#444", - "borderWidth": 1 - }, - "label": { - "color": "rgb(100,0,0)" - } - } - }, - "categoryAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#333333" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333333" - } - }, - "axisLabel": { - "show": true, - "color": "#444444" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": ["#444444"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["#eeeeee"] - } - } - }, - "valueAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#333333" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333333" - } - }, - "axisLabel": { - "show": true, - "color": "#666666" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": ["#333333"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["#666666"] - } - } - }, - "logAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#333333" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333333" - } - }, - "axisLabel": { - "show": true, - "color": "#666666" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": ["#333333"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["#666666"] - } - } - }, - "timeAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#333333" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#333333" - } - }, - "axisLabel": { - "show": true, - "color": "#666666" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": ["#333333"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["#666666"] - } - } - }, - "toolbox": { - "iconStyle": { - "borderColor": "#999999" - }, - "emphasis": { - "iconStyle": { - "borderColor": "#444444" - } - } - }, - "legend": { - "textStyle": { - "color": "#eeeeee" - } - }, - "tooltip": { - "axisPointer": { - "lineStyle": { - "color": "#444444", - "width": "1" - }, - "crossStyle": { - "color": "#444444", - "width": "1" - } - } - }, - "timeline": { - "lineStyle": { - "color": "#444444", - "width": 1 - }, - "itemStyle": { - "color": "#dd6b66", - "borderWidth": 1 - }, - "controlStyle": { - "color": "#444444", - "borderColor": "#444444", - "borderWidth": 0.5 - }, - "checkpointStyle": { - "color": "#e43c59", - "borderColor": "#c23531" - }, - "label": { - "color": "#eeeeee" - }, - "emphasis": { - "itemStyle": { - "color": "#a9334c" - }, - "controlStyle": { - "color": "#444444", - "borderColor": "#444444", - "borderWidth": 0.5 - }, - "label": { - "color": "#eeeeee" - } - } - }, - "visualMap": { - "color": ["#bf444c", "#d88273", "#f6efa6"] - }, - "dataZoom": { - "backgroundColor": "rgba(47,69,84,0)", - "dataBackgroundColor": "rgba(255,255,255,0.3)", - "fillerColor": "rgba(167,183,204,0.4)", - "handleColor": "#a7b7cc", - "handleSize": "100%", - "textStyle": { - "color": "#eeeeee" - } - }, - "markPoint": { - "label": { - "color": "#444444" - }, - "emphasis": { - "label": { - "color": "#444444" - } - } - } -} diff --git a/src/lib/charts/echartLight.json b/src/lib/charts/echartLight.json deleted file mode 100644 index e334832c4..000000000 --- a/src/lib/charts/echartLight.json +++ /dev/null @@ -1,348 +0,0 @@ -{ - "color": ["#00a7c3", "#F02E65", "#00BC5D", "#F38500", "#FF453A"], - "backgroundColor": "rgba(255,255,255,0)", - "textStyle": {}, - "title": { - "textStyle": { - "color": "#373b4d" - }, - "subtextStyle": { - "color": "#616b7c" - } - }, - "line": { - "itemStyle": { - "borderWidth": 1 - }, - "lineStyle": { - "width": 2 - }, - "symbolSize": 4, - "symbol": "emptyCircle", - "smooth": false - }, - "radar": { - "itemStyle": { - "borderWidth": 1 - }, - "lineStyle": { - "width": 2 - }, - "symbolSize": 4, - "symbol": "emptyCircle", - "smooth": false - }, - "bar": { - "itemStyle": { - "barBorderWidth": 0, - "barBorderColor": "#ccc" - } - }, - "pie": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "scatter": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "boxplot": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "parallel": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "sankey": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "funnel": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "gauge": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - } - }, - "candlestick": { - "itemStyle": { - "color": "#eb5454", - "color0": "#47b262", - "borderColor": "#eb5454", - "borderColor0": "#47b262", - "borderWidth": 1 - } - }, - "graph": { - "itemStyle": { - "borderWidth": 0, - "borderColor": "#ccc" - }, - "lineStyle": { - "width": 1, - "color": "#aaa" - }, - "symbolSize": 4, - "symbol": "emptyCircle", - "smooth": false, - "color": ["#007187", "#da1a5b", "#fac858", "#ee6666", "#73c0de"], - "label": { - "color": "#eee" - } - }, - "map": { - "itemStyle": { - "areaColor": "#eee", - "borderColor": "#444", - "borderWidth": 0.5 - }, - "label": { - "color": "#000" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(255,215,0,0.8)", - "borderColor": "#444", - "borderWidth": 1 - }, - "label": { - "color": "rgb(100,0,0)" - } - } - }, - "geo": { - "itemStyle": { - "areaColor": "#eee", - "borderColor": "#444", - "borderWidth": 0.5 - }, - "label": { - "color": "#000" - }, - "emphasis": { - "itemStyle": { - "areaColor": "rgba(255,215,0,0.8)", - "borderColor": "#444", - "borderWidth": 1 - }, - "label": { - "color": "rgb(100,0,0)" - } - } - }, - "categoryAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#6E7079" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#6E7079" - } - }, - "axisLabel": { - "show": true, - "color": "#6E7079" - }, - "splitLine": { - "show": false, - "lineStyle": { - "color": ["#E0E6F1"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"] - } - } - }, - "valueAxis": { - "axisLine": { - "show": false, - "lineStyle": { - "color": "#6E7079" - } - }, - "axisTick": { - "show": false, - "lineStyle": { - "color": "#6E7079" - } - }, - "axisLabel": { - "show": true, - "color": "#6E7079" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": ["#E0E6F1"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"] - } - } - }, - "logAxis": { - "axisLine": { - "show": false, - "lineStyle": { - "color": "#6E7079" - } - }, - "axisTick": { - "show": false, - "lineStyle": { - "color": "#6E7079" - } - }, - "axisLabel": { - "show": true, - "color": "#6E7079" - }, - "splitLine": { - "show": true, - "lineStyle": { - "color": ["#E0E6F1"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"] - } - } - }, - "timeAxis": { - "axisLine": { - "show": true, - "lineStyle": { - "color": "#6E7079" - } - }, - "axisTick": { - "show": true, - "lineStyle": { - "color": "#6E7079" - } - }, - "axisLabel": { - "show": true, - "color": "#6E7079" - }, - "splitLine": { - "show": false, - "lineStyle": { - "color": ["#E0E6F1"] - } - }, - "splitArea": { - "show": false, - "areaStyle": { - "color": ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"] - } - } - }, - "toolbox": { - "iconStyle": { - "borderColor": "#999" - }, - "emphasis": { - "iconStyle": { - "borderColor": "#666" - } - } - }, - "legend": { - "textStyle": { - "color": "#333" - } - }, - "tooltip": { - "axisPointer": { - "lineStyle": { - "color": "#ccc", - "width": 1 - }, - "crossStyle": { - "color": "#ccc", - "width": 1 - } - } - }, - "timeline": { - "lineStyle": { - "color": "#DAE1F5", - "width": 2 - }, - "itemStyle": { - "color": "#A4B1D7", - "borderWidth": 1 - }, - "controlStyle": { - "color": "#A4B1D7", - "borderColor": "#A4B1D7", - "borderWidth": 1 - }, - "checkpointStyle": { - "color": "#316bf3", - "borderColor": "fff" - }, - "label": { - "color": "#A4B1D7" - }, - "emphasis": { - "itemStyle": { - "color": "#FFF" - }, - "controlStyle": { - "color": "#A4B1D7", - "borderColor": "#A4B1D7", - "borderWidth": 1 - }, - "label": { - "color": "#A4B1D7" - } - } - }, - "visualMap": { - "color": ["#bf444c", "#d88273", "#f6efa6"] - }, - "dataZoom": { - "handleSize": "undefined%", - "textStyle": {} - }, - "markPoint": { - "label": { - "color": "#eee" - }, - "emphasis": { - "label": { - "color": "#eee" - } - } - } -} diff --git a/src/lib/charts/echarts.svelte b/src/lib/charts/echarts.svelte deleted file mode 100644 index c8a68bdc2..000000000 --- a/src/lib/charts/echarts.svelte +++ /dev/null @@ -1,123 +0,0 @@ - - -
- - diff --git a/src/lib/charts/index.ts b/src/lib/charts/index.ts index 50fb2499f..c73108a13 100644 --- a/src/lib/charts/index.ts +++ b/src/lib/charts/index.ts @@ -1 +1,2 @@ -export { default as Chart } from './echarts.svelte'; +export { default as BarChart } from './bar.svelte'; +export { default as LineChart } from './line.svelte'; diff --git a/src/lib/charts/light.json b/src/lib/charts/light.json new file mode 100644 index 000000000..5461fff77 --- /dev/null +++ b/src/lib/charts/light.json @@ -0,0 +1,151 @@ +{ + "color": ["#ff80b7", "#a1c4ff", "#cbb1fc", "#94dbd1", "#fdc584", "#f02e65", "#ffa1a1"], + "backgroundColor": "rgba(255,255,255,0)", + "title": { + "textStyle": { + "color": "#373b4d" + }, + "subtextStyle": { + "color": "#616b7c" + } + }, + "bar": { + "itemStyle": { + "barBorderColor": "#ccc" + } + }, + "categoryAxis": { + "axisLine": { + "lineStyle": { + "color": "#6E7079" + } + }, + "axisTick": { + "lineStyle": { + "color": "#6E7079" + } + }, + "axisLabel": { + "color": "#6E7079" + } + }, + "valueAxis": { + "axisLabel": { + "color": "#6E7079" + }, + "splitLine": { + "lineStyle": { + "color": ["#E0E6F1"] + } + } + }, + "logAxis": { + "axisLine": { + "lineStyle": { + "color": "#6E7079" + } + }, + "axisTick": { + "lineStyle": { + "color": "#6E7079" + } + }, + "axisLabel": { + "color": "#6E7079" + }, + "splitLine": { + "lineStyle": { + "color": ["#E0E6F1"] + } + } + }, + "timeAxis": { + "axisLine": { + "lineStyle": { + "color": "#6E7079" + } + }, + "axisTick": { + "lineStyle": { + "color": "#6E7079" + } + }, + "axisLabel": { + "color": "#6E7079" + }, + "splitLine": { + "lineStyle": { + "color": ["#E0E6F1"] + } + } + }, + "toolbox": { + "iconStyle": { + "borderColor": "#999" + }, + "emphasis": { + "iconStyle": { + "borderColor": "#666" + } + } + }, + "legend": { + "textStyle": { + "color": "#333" + } + }, + "tooltip": { + "axisPointer": { + "lineStyle": { + "color": "#ccc" + }, + "crossStyle": { + "color": "#ccc" + } + } + }, + "timeline": { + "lineStyle": { + "color": "#DAE1F5" + }, + "itemStyle": { + "color": "#A4B1D7" + }, + "controlStyle": { + "color": "#A4B1D7", + "borderColor": "#A4B1D7" + }, + "checkpointStyle": { + "color": "#316bf3", + "borderColor": "#fff" + }, + "label": { + "color": "#A4B1D7" + }, + "emphasis": { + "itemStyle": { + "color": "#FFF" + }, + "controlStyle": { + "color": "#A4B1D7", + "borderColor": "#A4B1D7" + }, + "label": { + "color": "#A4B1D7" + } + } + }, + "visualMap": { + "color": ["#bf444c", "#d88273", "#f6efa6"] + }, + "markPoint": { + "label": { + "color": "#eee" + }, + "emphasis": { + "label": { + "color": "#eee" + } + } + } +} diff --git a/src/lib/charts/line.svelte b/src/lib/charts/line.svelte new file mode 100644 index 000000000..4cebee6f9 --- /dev/null +++ b/src/lib/charts/line.svelte @@ -0,0 +1,15 @@ + + + { + s.type = 'line'; + s.stack = 'total'; + s.showSymbol = false; + + return s; + })} /> diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts index 6e52a83c7..85891a77e 100644 --- a/src/lib/helpers/date.ts +++ b/src/lib/helpers/date.ts @@ -1,5 +1,5 @@ -export const toLocaleDate = (timestamp: number) => { - const date = new Date(timestamp * 1000); +export const toLocaleDate = (datetime: string) => { + const date = new Date(datetime); const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', @@ -9,8 +9,8 @@ export const toLocaleDate = (timestamp: number) => { return date.toLocaleDateString('en', options); }; -export const toLocaleDateTime = (timestamp: number) => { - const date = new Date(timestamp * 1000); +export const toLocaleDateTime = (datetime: string) => { + const date = new Date(datetime); const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', diff --git a/src/lib/helpers/sizeConvertion.ts b/src/lib/helpers/sizeConvertion.ts index c64f1579a..2f4a54f9a 100644 --- a/src/lib/helpers/sizeConvertion.ts +++ b/src/lib/helpers/sizeConvertion.ts @@ -19,3 +19,55 @@ export function bytesToSize(value: number, unit: string) { const index = sizes.indexOf(unit); return value / Math.pow(1024, index); } + +export function humanFileSize(value: number): { + value: string; + unit: string; +} { + const length = value.toString().length; + const unit = + length < 7 + ? 'kilobyte' + : length < 11 + ? 'megabyte' + : length < 15 + ? 'gigabyte' + : length < 19 + ? 'terabyte' + : 'petabyte'; + + const formatter = Intl.NumberFormat('en', { + style: 'unit', + maximumSignificantDigits: 3, + maximumFractionDigits: 2, + unit + }); + + while (value > 1000) { + value /= 1000; + } + + const parts: { + integer: string; + unit: string; + fraction?: string; + decimal?: string; + } = formatter.formatToParts(value).reduce( + (prev, curr) => { + prev[curr.type] = curr.value; + + return prev; + }, + { + integer: '', + unit: '', + decimal: '', + fraction: '' + } + ); + + return { + value: `${parts.integer}${parts.decimal}${parts.fraction}`, + unit: parts.unit + }; +} diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts index fa0cee9a7..66cdabbae 100644 --- a/src/lib/stores/organization.ts +++ b/src/lib/stores/organization.ts @@ -40,19 +40,12 @@ export const organization = cachedStore< export const projectList = cachedStore< Models.ProjectList, { - load: (search: string, limit: number, offset: number) => Promise; + load: (queries: string[], search?: string) => Promise; } >('projectList', function ({ set }) { return { - load: async (search, limit, offset) => { - const response = await sdkForConsole.projects.list( - search, - limit, - offset, - undefined, - undefined, - 'ASC' - ); + load: async (queries, search) => { + const response = await sdkForConsole.projects.list(queries, search); set(response); } }; @@ -61,17 +54,12 @@ export const projectList = cachedStore< export const memberList = cachedStore< Models.MembershipList, { - load: (teamId: string, search: string, limit: number, offset: number) => Promise; + load: (teamId: string, queries?: string[], search?: string) => Promise; } >('memberList', function ({ set }) { return { - load: async (teamId, search, limit, offset) => { - const response = await sdkForConsole.teams.getMemberships( - teamId, - search, - limit, - offset - ); + load: async (teamId, queries, search) => { + const response = await sdkForConsole.teams.listMemberships(teamId, queries, search); set(response); } }; diff --git a/src/lib/stores/user.ts b/src/lib/stores/user.ts index 12a84121b..9167be122 100644 --- a/src/lib/stores/user.ts +++ b/src/lib/stores/user.ts @@ -3,7 +3,7 @@ import { writable } from 'svelte/store'; import { sdkForConsole } from './sdk'; function createUserStore() { - const { subscribe, set } = writable>>(); + const { subscribe, set } = writable>>(); return { subscribe, diff --git a/src/routes/console/account/activity/+page.svelte b/src/routes/console/account/activity/+page.svelte index 54173f68f..4cbf8c259 100644 --- a/src/routes/console/account/activity/+page.svelte +++ b/src/routes/console/account/activity/+page.svelte @@ -16,14 +16,15 @@ import { pageLimit } from '$lib/stores/layout'; import { onMount } from 'svelte'; import { accountActivity } from '../store'; + import { Query } from '@aw-labs/appwrite-console'; let offset = 0; onMount(async () => { - await accountActivity.load($pageLimit, offset); + await accountActivity.load([Query.offset(offset), Query.limit($pageLimit)]); }); - $: accountActivity.load($pageLimit, offset); + $: accountActivity.load([Query.offset(offset), Query.limit($pageLimit)]); const getBrowser = (clientCode: string) => { return sdkForConsole.avatars.getBrowser(clientCode, 40, 40); diff --git a/src/routes/console/account/organizations/+page.svelte b/src/routes/console/account/organizations/+page.svelte index 61ce8f694..f436132b2 100644 --- a/src/routes/console/account/organizations/+page.svelte +++ b/src/routes/console/account/organizations/+page.svelte @@ -17,7 +17,7 @@ }; const getMemberships = async (teamId: string) => { - const memberships = await sdkForConsole.teams.getMemberships(teamId); + const memberships = await sdkForConsole.teams.listMemberships(teamId); return memberships.memberships.map((team) => { return { name: team.userName, diff --git a/src/routes/console/account/store.ts b/src/routes/console/account/store.ts index 798a4cd5d..42eafb6ba 100644 --- a/src/routes/console/account/store.ts +++ b/src/routes/console/account/store.ts @@ -10,7 +10,7 @@ export const accountSession = cachedStore< >('accountSession', function ({ set }) { return { load: async () => { - const response = await sdkForConsole.account.getSessions(); + const response = await sdkForConsole.account.listSessions(); set(response); } }; @@ -18,12 +18,12 @@ export const accountSession = cachedStore< export const accountActivity = cachedStore< Models.LogList, { - load: (limit: number, offset: number) => Promise; + load: (queries: string[]) => Promise; } >('accountActivity', function ({ set }) { return { - load: async (limit, offset) => { - const response = await sdkForConsole.account.getLogs(limit, offset); + load: async (queries) => { + const response = await sdkForConsole.account.listLogs(queries); set(response); } }; diff --git a/src/routes/console/organization-[organization]/+layout.svelte b/src/routes/console/organization-[organization]/+layout.svelte index 0233e147b..ba490c381 100644 --- a/src/routes/console/organization-[organization]/+layout.svelte +++ b/src/routes/console/organization-[organization]/+layout.svelte @@ -12,6 +12,7 @@ import CreateMember from './_createMember.svelte'; import Create from '../_createOrganization.svelte'; import { page } from '$app/stores'; + import { Query } from '@aw-labs/appwrite-console'; $: organizationId = $page.params.organization; $: path = `console/organization-${organizationId}`; @@ -22,7 +23,7 @@ async function handle(event = null) { if ($organization?.$id !== organizationId) { await organization.load(organizationId); - await memberList.load(organizationId, '', 12, 0); + await memberList.load(organizationId, [Query.limit(12)]); } updateLayout({ navigate: event, diff --git a/src/routes/console/organization-[organization]/+page.svelte b/src/routes/console/organization-[organization]/+page.svelte index 8e8921b34..1c4f8322f 100644 --- a/src/routes/console/organization-[organization]/+page.svelte +++ b/src/routes/console/organization-[organization]/+page.svelte @@ -1,25 +1,31 @@ @@ -71,17 +77,18 @@
- {#if projects?.length} + {#if $projectList.total}
    3 ? '22rem' : '25rem' };`}> - {#each projects as project, index} + {#each $projectList.projects as project, index} {#if index >= offset && index < limit + offset} - {project?.platforms?.length ? project?.platforms?.length : 'No'} apps + + {project?.platforms?.length ? project?.platforms?.length : 'No'} apps + {project.name} diff --git a/src/routes/console/organization-[organization]/_createMember.svelte b/src/routes/console/organization-[organization]/_createMember.svelte index b3b2f67c5..0f7d23580 100644 --- a/src/routes/console/organization-[organization]/_createMember.svelte +++ b/src/routes/console/organization-[organization]/_createMember.svelte @@ -8,6 +8,7 @@ import { createEventDispatcher } from 'svelte'; import { organization, memberList } from '$lib/stores/organization'; import { pageLimit } from '$lib/stores/layout'; + import { Query } from '@aw-labs/appwrite-console'; export let showCreate = false; @@ -30,7 +31,7 @@ type: 'success', message: `Invite has been sent to ${email}` }); - memberList.load($organization.$id, '', $pageLimit, 0); + memberList.load($organization.$id, [Query.limit($pageLimit)], ''); dispatch('created', team); } catch ({ message }) { error = message; diff --git a/src/routes/console/organization-[organization]/members/+page.svelte b/src/routes/console/organization-[organization]/members/+page.svelte index 3d02ba706..0a7c14ee8 100644 --- a/src/routes/console/organization-[organization]/members/+page.svelte +++ b/src/routes/console/organization-[organization]/members/+page.svelte @@ -15,13 +15,13 @@ import Delete from '../_deleteMember.svelte'; import { organization, memberList, newMemberModal } from '$lib/stores/organization'; import { sdkForConsole } from '$lib/stores/sdk'; - import type { Models } from '@aw-labs/appwrite-console'; + import { Query, type Models } from '@aw-labs/appwrite-console'; import { pageLimit } from '$lib/stores/layout'; import { page } from '$app/stores'; import { addNotification } from '$lib/stores/notifications'; let search = ''; - let offset: number = null; + let offset = 0; let selectedMember: Models.Membership; let showDelete = false; @@ -29,7 +29,8 @@ const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 120, 120).toString(); - const deleted = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0); + const deleted = () => + memberList.load($organization.$id, [Query.limit($pageLimit), Query.offset(offset)], search); const resend = async (member: Models.Membership) => { try { await sdkForConsole.teams.createMembership( @@ -52,7 +53,7 @@ }; $: if (search) offset = 0; - $: memberList.load($organization.$id, search, $pageLimit, offset ?? 0); + $: memberList.load($organization.$id, [Query.limit($pageLimit), Query.offset(offset)], search); diff --git a/src/routes/console/project-[project]/authentication/+page.svelte b/src/routes/console/project-[project]/authentication/+page.svelte index 83e6162c1..ed2a1bc23 100644 --- a/src/routes/console/project-[project]/authentication/+page.svelte +++ b/src/routes/console/project-[project]/authentication/+page.svelte @@ -20,7 +20,7 @@ import { Container } from '$lib/layout'; import { base } from '$app/paths'; import { usersList } from './store'; - import type { Models } from '@aw-labs/appwrite-console'; + import { Query, type Models } from '@aw-labs/appwrite-console'; import { pageLimit } from '$lib/stores/layout'; let showCreate = false; @@ -34,7 +34,7 @@ }; $: if (search) offset = 0; - $: usersList.load(search, $pageLimit, offset ?? 0); + $: usersList.load([Query.limit($pageLimit), Query.offset(offset)], search); diff --git a/src/routes/console/project-[project]/authentication/store.ts b/src/routes/console/project-[project]/authentication/store.ts index 923c37ddc..db487c067 100644 --- a/src/routes/console/project-[project]/authentication/store.ts +++ b/src/routes/console/project-[project]/authentication/store.ts @@ -5,19 +5,12 @@ import { cachedStore } from '$lib/helpers/cache'; export const usersList = cachedStore< Models.UserList>, { - load: (search: string, limit: number, offset: number) => Promise; + load: (queries: string[], search: string) => Promise; } >('users', function ({ set }) { return { - load: async (search, limit, offset) => { - const response = await sdkForProject.users.list( - search, - limit, - offset, - undefined, - undefined, - 'DESC' - ); + load: async (queries, search) => { + const response = await sdkForProject.users.list(queries, search); set(response); } }; @@ -26,19 +19,12 @@ export const usersList = cachedStore< export const teamsList = cachedStore< Models.TeamList, { - load: (search: string, limit: number, offset: number) => Promise; + load: (queries: string[], search: string) => Promise; } >('teams', function ({ set }) { return { - load: async (search, limit, offset) => { - const response = await sdkForProject.teams.list( - search, - limit, - offset, - undefined, - undefined, - 'DESC' - ); + load: async (queries, search) => { + const response = await sdkForProject.teams.list(queries, search); set(response); } }; diff --git a/src/routes/console/project-[project]/authentication/teams/+page.svelte b/src/routes/console/project-[project]/authentication/teams/+page.svelte index 6bed8c232..918d08281 100644 --- a/src/routes/console/project-[project]/authentication/teams/+page.svelte +++ b/src/routes/console/project-[project]/authentication/teams/+page.svelte @@ -19,7 +19,7 @@ import { Container } from '$lib/layout'; import { base } from '$app/paths'; import { teamsList } from '../store'; - import type { Models } from '@aw-labs/appwrite-console'; + import { Query, type Models } from '@aw-labs/appwrite-console'; let search = ''; let showCreate = false; @@ -33,7 +33,7 @@ }; $: if (search) offset = 0; - $: teamsList.load(search, limit, offset); + $: teamsList.load([Query.limit(limit), Query.offset(offset)], search); diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte index 15a0d0541..243b02046 100644 --- a/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte +++ b/src/routes/console/project-[project]/authentication/teams/[team]/activity/+page.svelte @@ -15,10 +15,14 @@ import { toLocaleDateTime } from '$lib/helpers/date'; import { sdkForProject } from '$lib/stores/sdk'; import { pageLimit } from '$lib/stores/layout'; + import { Query } from '@aw-labs/appwrite-console'; let offset = 0; - $: request = sdkForProject.teams.listLogs($page.params.team, $pageLimit, offset); + $: request = sdkForProject.teams.listLogs($page.params.team, [ + Query.limit($pageLimit), + Query.offset(offset) + ]); const getBrowser = (clientCode: string) => { return sdkForProject.avatars.getBrowser(clientCode, 80, 80); diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte index a79059c3d..01b7333bb 100644 --- a/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte +++ b/src/routes/console/project-[project]/authentication/teams/[team]/members/+page.svelte @@ -11,7 +11,7 @@ } from '$lib/elements/table'; import { Button } from '$lib/elements/forms'; import { Container } from '$lib/layout'; - import type { Models } from '@aw-labs/appwrite-console'; + import { Query, type Models } from '@aw-labs/appwrite-console'; import { goto } from '$app/navigation'; import { base } from '$app/paths'; import { sdkForProject } from '$lib/stores/sdk'; @@ -22,21 +22,30 @@ import { pageLimit } from '$lib/stores/layout'; const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 32, 32).toString(); - const deleted = () => memberships.load($page.params.team, search, $pageLimit, offset ?? 0); + const deleted = () => + memberships.load( + $page.params.team, + [Query.limit($pageLimit), Query.offset(offset)], + search + ); const project = $page.params.project; let showCreate = false; let showDelete = false; let search = ''; - let offset: number = null; + let offset = 0; let selectedMembership: Models.Membership; $: if (search) offset = 0; - $: memberships.load($page.params.team, search, $pageLimit, offset ?? 0); + $: memberships.load($page.params.team, [Query.limit($pageLimit), Query.offset(offset)], search); const memberCreated = async (event: CustomEvent) => { - memberships.load($page.params.team, search, $pageLimit, offset ?? 0); + memberships.load( + $page.params.team, + [Query.limit($pageLimit), Query.offset(offset)], + search + ); await goto( `${base}/console/project-${project}/authentication/teams/${event.detail.teamId}/members` ); diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/store.ts b/src/routes/console/project-[project]/authentication/teams/[team]/store.ts index a90f90d4c..860ba0fb3 100644 --- a/src/routes/console/project-[project]/authentication/teams/[team]/store.ts +++ b/src/routes/console/project-[project]/authentication/teams/[team]/store.ts @@ -18,20 +18,12 @@ export const team = cachedStore< export const memberships = cachedStore< Models.MembershipList, { - load: (teamId: string, search: string, limit: number, offset: number) => Promise; + load: (teamId: string, queries: string[], search: string) => Promise; } >('memberships', function ({ set }) { return { - load: async (teamId, search, limit, offset) => { - const response = await sdkForProject.teams.getMemberships( - teamId, - search, - limit, - offset, - undefined, - undefined, - 'DESC' - ); + load: async (teamId, queries, search) => { + const response = await sdkForProject.teams.listMemberships(teamId, queries, search); set(response); } }; diff --git a/src/routes/console/project-[project]/authentication/usage/+page.svelte b/src/routes/console/project-[project]/authentication/usage/+page.svelte index 75634caae..0f981af92 100644 --- a/src/routes/console/project-[project]/authentication/usage/+page.svelte +++ b/src/routes/console/project-[project]/authentication/usage/+page.svelte @@ -1,6 +1,6 @@ diff --git a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte index 4e026535b..90a2511dc 100644 --- a/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte +++ b/src/routes/console/project-[project]/authentication/user/[user]/sessions/+page.svelte @@ -26,7 +26,7 @@ let selectedSessionId: string = null; let sessionList: Models.SessionList = null; onMount(async () => { - sessionList = await sdkForProject.users.getSessions($page.params.user); + sessionList = await sdkForProject.users.listSessions($page.params.user); }); const getBrowser = (clientCode: string) => { diff --git a/src/routes/console/project-[project]/databases/+page.svelte b/src/routes/console/project-[project]/databases/+page.svelte index a45485191..87ea885b8 100644 --- a/src/routes/console/project-[project]/databases/+page.svelte +++ b/src/routes/console/project-[project]/databases/+page.svelte @@ -4,7 +4,7 @@ import { Button } from '$lib/elements/forms'; import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components'; import { Pill } from '$lib/elements'; - import type { Models } from '@aw-labs/appwrite-console'; + import { Query, type Models } from '@aw-labs/appwrite-console'; import Create from './_create.svelte'; import { Container } from '$lib/layout'; import { base } from '$app/paths'; @@ -21,7 +21,7 @@ await goto(`${base}/console/project-${project}/databases/database/${event.detail.$id}`); }; - $: databaseList.load(search, limit, offset ?? 0); + $: databaseList.load([Query.limit(limit), Query.offset(offset)], search); diff --git a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte index 6c294fda6..292b78d7e 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/+page.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/+page.svelte @@ -4,7 +4,7 @@ import { Button } from '$lib/elements/forms'; import { Empty, EmptyGridItem, Pagination, Copy, GridItem1 } from '$lib/components'; import { Pill } from '$lib/elements'; - import type { Models } from '@aw-labs/appwrite-console'; + import { Query, type Models } from '@aw-labs/appwrite-console'; import Create from './_create.svelte'; import { Container } from '$lib/layout'; import { base } from '$app/paths'; @@ -24,7 +24,7 @@ ); }; - $: collections.load(databaseId, search, limit, offset ?? 0); + $: collections.load(databaseId, [Query.limit(limit), Query.offset(offset)], search); $: if (search) offset = 0; diff --git a/src/routes/console/project-[project]/databases/database/[database]/_create.svelte b/src/routes/console/project-[project]/databases/database/[database]/_create.svelte index 98e3e39da..0c03874f3 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/_create.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/_create.svelte @@ -22,10 +22,7 @@ const collection = await sdkForProject.databases.createCollection( databaseId, id ? id : 'unique()', - name, - 'collection', - [], - [] + name ); name = id = null; showCreate = false; diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte index cc3fa7241..86432284b 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+page.svelte @@ -16,6 +16,7 @@ import { base } from '$app/paths'; import { wizard } from '$lib/stores/wizard'; import Create from './createDocument.svelte'; + import { Query } from '@aw-labs/appwrite-console'; let offset = 0; @@ -23,7 +24,7 @@ const projectId = $page.params.project; const databaseId = $page.params.database; - $: documentList.load(databaseId, $collection.$id, [], limit, offset); + $: documentList.load(databaseId, $collection.$id, [Query.limit(5), Query.offset(offset)]); $: columns = [ ...$collection.attributes.map((attribute) => ({ key: attribute.key, diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte index e8d87753b..310158379 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/createDocument.svelte @@ -40,8 +40,7 @@ collectionId, $createDocument.id ?? 'unique()', $createDocument.document, - $createDocument.read, - $createDocument.write + $createDocument.permissions ); addNotification({ message: 'Document has been created', @@ -59,8 +58,7 @@ onDestroy(() => { initializeDocument(); - $createDocument.read = []; - $createDocument.write = []; + $createDocument.permissions = []; }); beforeNavigate(() => { diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte index f1a6fed61..3006a378d 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+page.svelte @@ -12,8 +12,7 @@ import { page } from '$app/stores'; let showDelete = false; - let read = $doc?.$read; - let write = $doc?.$write; + let permissions = $doc?.$permissions; let arePermsDisabled = true; const databaseId = $page.params.database; @@ -24,11 +23,9 @@ $doc.collectionId, $doc.$id, $doc.data, - read, - write + permissions ); - $doc.$read = read; - $doc.$write = write; + $doc.$permissions = permissions; arePermsDisabled = true; addNotification({ message: 'Permissions have been updated', @@ -42,8 +39,8 @@ } } - $: if (read || write) { - if (difference(read, $doc.$read).length || difference(write, $doc.$write).length) { + $: if (permissions) { + if (difference(permissions, $doc.$permissions).length) { arePermsDisabled = false; } else arePermsDisabled = true; } @@ -82,15 +79,10 @@
      - + bind:tags={permissions} />
    diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte index b792ef85c..a1fb8791b 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/_document.svelte @@ -36,8 +36,7 @@ collectionId, documentId, $doc, - $doc.$read, - $doc.$write + $doc.$permissions ); currentDoc = JSON.stringify($doc); diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte index b4874aa82..f1b507d8f 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/settings/+page.svelte @@ -19,28 +19,22 @@ errorType: 'error' | 'warning' | 'success' = 'error'; let enabled: boolean = null, collectionName: string = null, - collectionPermissions: string = null, - collectionRead: string[] = null, - collectionWrite: string[] = null, + collectionDocumentSecurity: boolean = null, + collectionPermissions: string[] = [], arePermsDisabled = true; onMount(async () => { enabled ??= $collection.enabled; collectionName ??= $collection.name; - collectionName ??= $collection.name; - collectionPermissions ??= $collection.permission; - collectionRead ??= $collection.$read; - collectionWrite ??= $collection.$write; + collectionPermissions ??= $collection.$permissions; + collectionDocumentSecurity ??= $collection.documentSecurity; }); - $: if (collectionPermissions || collectionRead || collectionWrite) { - if (collectionPermissions !== $collection.permission) { + $: if (collectionDocumentSecurity || collectionPermissions) { + if (collectionDocumentSecurity !== $collection.documentSecurity) { arePermsDisabled = false; - } else if (collectionRead || collectionWrite) { - if ( - difference(collectionRead, $collection.$read).length || - difference(collectionWrite, $collection.$write).length - ) { + } else if (collectionPermissions) { + if (difference(collectionPermissions, $collection.$permissions).length) { arePermsDisabled = false; } else arePermsDisabled = true; } @@ -58,9 +52,8 @@ databaseId, $collection.$id, $collection.name, - $collection.permission, - $collection.$read, - $collection.$write, + $collection.$permissions, + $collection.documentSecurity, enabled ); $collection.enabled = enabled; @@ -81,7 +74,7 @@ databaseId, $collection.$id, $collection.name, - $collection.permission + $collection.$permissions ); $collection.name = collectionName; showError = false; @@ -99,13 +92,10 @@ databaseId, $collection.$id, $collection.name, - collectionPermissions, - collectionPermissions === 'collection' ? collectionRead : $collection.$read, - collectionPermissions === 'collection' ? collectionWrite : $collection.$write + collectionDocumentSecurity ? collectionPermissions : $collection.$permissions ); - $collection.permission = collectionPermissions; - $collection.$read = collectionRead; - $collection.$write = collectionWrite; + $collection.$permissions = collectionPermissions; + $collection.documentSecurity = collectionDocumentSecurity; arePermsDisabled = true; addNotification({ message: 'Permissions have been updated', @@ -139,11 +129,8 @@ - + @@ -167,9 +154,7 @@ + on:click={updateName}>Update @@ -187,8 +172,8 @@ type="radio" class="is-small" name="level" - bind:group={collectionPermissions} - value="collection" /> + bind:group={collectionDocumentSecurity} + value={true} /> Collection Level @@ -198,33 +183,14 @@ type="radio" class="is-small" name="level" - bind:group={collectionPermissions} - value="file" /> + bind:group={collectionDocumentSecurity} + value={false} /> Document Level
- {#if collectionPermissions === 'collection'} - -

- Tip: Add role:all for wildcards access. Check out our - documentation for more on Permissions -

- -
    - - -
- {:else} + {#if collectionDocumentSecurity}

Manage permissions at the Document Level to control access over @@ -233,6 +199,20 @@ Permissions

+ {:else} + +

+ Tip: Add role:all for wildcards access. Check out our + documentation for more on Permissions +

+ +
    + +
{/if} diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts index 7bfcda9f4..b9e406dfd 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/store.ts @@ -63,23 +63,15 @@ export const collection = cachedStore< export const documentList = cachedStore< Models.DocumentList, { - load: ( - databaseId: string, - collectionId: string, - queries?: [], - limit?: number, - offset?: number - ) => Promise; + load: (databaseId: string, collectionId: string, queries?: string[]) => Promise; } >('documentList', function ({ set }) { return { - load: async (databaseId, collectionId, queries, limit, offset) => { + load: async (databaseId, collectionId, queries) => { const response = await sdkForProject.databases.listDocuments( databaseId, collectionId, - queries, - limit, - offset + queries ); set(response); } diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte index d77185aa1..153c03ef1 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/step2.svelte @@ -24,14 +24,9 @@
    - + bind:tags={$createDocument.permissions} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/store.ts b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/store.ts index cfe13f700..eea107307 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/store.ts +++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/wizard/store.ts @@ -4,13 +4,11 @@ import type { Attributes } from '../store'; export const createDocument = writable<{ id?: string; document: object; - read: string[]; - write: string[]; + permissions: string[]; attributes: Attributes[]; }>({ id: null, document: {}, - read: [], - write: [], + permissions: [], attributes: [] }); diff --git a/src/routes/console/project-[project]/databases/database/[database]/store.ts b/src/routes/console/project-[project]/databases/database/[database]/store.ts index 028ea9ed7..4c2adf0bb 100644 --- a/src/routes/console/project-[project]/databases/database/[database]/store.ts +++ b/src/routes/console/project-[project]/databases/database/[database]/store.ts @@ -6,17 +6,16 @@ import { cachedStore } from '$lib/helpers/cache'; export const collections = cachedStore< Models.CollectionList, { - load: (databaseId: string, search: string, limit: number, offset: number) => Promise; + load: (databaseId: string, queries: string[], search: string) => Promise; total: (databaseId: string, id: string) => Promise>; } >('collections', function ({ set }) { return { - load: async (databaseId, search, limit, offset) => { + load: async (databaseId, queries, search) => { const response = await sdkForProject.databases.listCollections( databaseId, - search, - limit, - offset + queries, + search ); set(response); }, diff --git a/src/routes/console/project-[project]/databases/store.ts b/src/routes/console/project-[project]/databases/store.ts index 784aa205f..88256ca12 100644 --- a/src/routes/console/project-[project]/databases/store.ts +++ b/src/routes/console/project-[project]/databases/store.ts @@ -5,12 +5,12 @@ import { cachedStore } from '$lib/helpers/cache'; export const databaseList = cachedStore< Models.DatabaseList, { - load: (search: string, limit: number, offset: number) => Promise; + load: (queries: string[], search: string) => Promise; } >('databaseList', function ({ set }) { return { - load: async (search, limit, offset) => { - const response = await sdkForProject.databases.list(search, limit, offset); + load: async (queries, search) => { + const response = await sdkForProject.databases.list(queries, search); set(response); } }; diff --git a/src/routes/console/project-[project]/functions/+page.svelte b/src/routes/console/project-[project]/functions/+page.svelte index 623fcd87b..12ceda635 100644 --- a/src/routes/console/project-[project]/functions/+page.svelte +++ b/src/routes/console/project-[project]/functions/+page.svelte @@ -6,6 +6,7 @@ import Create from './_create.svelte'; import { Container } from '$lib/layout'; import { base } from '$app/paths'; + import { Query } from '@aw-labs/appwrite-console'; let search = ''; let showCreate = false; @@ -14,7 +15,7 @@ const limit = 25; const project = $page.params.project; - $: request = sdkForProject.functions.list(search, limit, offset); + $: request = sdkForProject.functions.list([Query.limit(0), Query.offset(0)], search); $: if (search) offset = 0; diff --git a/src/routes/console/project-[project]/functions/_create.svelte b/src/routes/console/project-[project]/functions/_create.svelte index ee2091d5c..4e5d9c699 100644 --- a/src/routes/console/project-[project]/functions/_create.svelte +++ b/src/routes/console/project-[project]/functions/_create.svelte @@ -14,7 +14,7 @@ const create = async () => { try { - await sdkForProject.storage.createBucket('unique()', name, 'bucket'); + await sdkForProject.storage.createBucket('unique()', name); name = null; showCreate = false; dispatch('created'); diff --git a/src/routes/console/project-[project]/functions/function/[function]/+page.svelte b/src/routes/console/project-[project]/functions/function/[function]/+page.svelte index b94ce59f4..a81145efa 100644 --- a/src/routes/console/project-[project]/functions/function/[function]/+page.svelte +++ b/src/routes/console/project-[project]/functions/function/[function]/+page.svelte @@ -16,6 +16,7 @@ import { Container } from '$lib/layout'; import Create from './_create.svelte'; import { base } from '$app/paths'; + import { Query } from '@aw-labs/appwrite-console'; let search = ''; let showCreate = false; @@ -25,7 +26,11 @@ const project = $page.params.project; const functionId = $page.params.function; - $: request = sdkForProject.functions.listDeployments(functionId, search, limit, offset); + $: request = sdkForProject.functions.listDeployments( + functionId, + [Query.offset(offset), Query.limit(limit)], + search + ); $: if (search) offset = 0; diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte index 665d9f6b7..bacc4dbda 100644 --- a/src/routes/console/project-[project]/overview/+layout.svelte +++ b/src/routes/console/project-[project]/overview/+layout.svelte @@ -10,6 +10,8 @@ import { onMount } from 'svelte'; import { afterNavigate } from '$app/navigation'; import { DropList, DropListItem } from '$lib/components'; + import { BarChart, LineChart } from '$lib/charts'; + import { humanFileSize } from '$lib/helpers/sizeConvertion'; $: projectId = $page.params.project; $: path = `/console/project-${projectId}/overview`; @@ -71,6 +73,16 @@ } }); } + + //TODO: workaround for broken types + $: network = $usage?.network as unknown as Array<{ + date: number; + value: number; + }>; + $: requests = $usage?.requests as unknown as Array<{ + date: number; + value: number; + }>; @@ -80,14 +92,16 @@ {#if $project} {#if $usage} + {@const bandwith = humanFileSize(total($usage.network))} + {@const storage = humanFileSize(last($usage.storage).value)}
- {total($usage.network)} - KB + {bandwith.value} + {bandwith.unit}
Bandwidth
@@ -116,6 +130,15 @@
+ {#if network.length} + [e.date, e.value])] + } + ]} /> + {/if}
@@ -150,6 +173,15 @@
+ {#if network.length} + [e.date, e.value])] + } + ]} /> + {/if}
@@ -185,9 +217,10 @@
- 8.0 MB + {storage.value} + {storage.unit}
-
Users
+
Storage
@@ -231,7 +264,7 @@
- {format(last($usage.functions).value)} + {format(last($usage.executions).value)}
Executions
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte index f310dd54e..113856d38 100644 --- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte +++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte @@ -9,7 +9,6 @@ Form, FormList, InputCheckbox, - InputNumber, InputPassword, InputText } from '$lib/elements/forms'; @@ -35,7 +34,7 @@ let showDelete = false; let name: string = null; let secret: string = null; - let expire: number = null; + let expire: string = null; onMount(handle); afterNavigate(handle); @@ -229,7 +228,7 @@

Choose any name that will help you distinguish between API keys.

- diff --git a/src/routes/console/project-[project]/storage/_create.svelte b/src/routes/console/project-[project]/storage/_create.svelte index f4b926da8..f935edb9f 100644 --- a/src/routes/console/project-[project]/storage/_create.svelte +++ b/src/routes/console/project-[project]/storage/_create.svelte @@ -16,11 +16,7 @@ const create = async () => { try { - const bucket = await sdkForProject.storage.createBucket( - id ? id : 'unique()', - name, - 'bucket' - ); + const bucket = await sdkForProject.storage.createBucket(id ? id : 'unique()', name); name = null; showCreate = false; dispatch('created', bucket); diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte index ba201bce0..1ec1df410 100644 --- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte +++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+page.svelte @@ -29,7 +29,7 @@ import { Container } from '$lib/layout'; import { base } from '$app/paths'; import { files } from './store'; - import type { Models } from '@aw-labs/appwrite-console'; + import { Query, type Models } from '@aw-labs/appwrite-console'; import { uploader } from '$lib/stores/uploader'; import { addNotification } from '$lib/stores/notifications'; import { pageLimit } from '$lib/stores/layout'; @@ -49,20 +49,20 @@ const fileCreated = () => { showCreate = false; - files.load(bucket, search, $pageLimit, offset); + files.load(bucket, [Query.limit($pageLimit), Query.offset(offset)], search); }; const fileDeleted = (event: CustomEvent) => { showDelete = false; uploader.removeFile(event.detail); - files.load(bucket, search, $pageLimit, offset); + files.load(bucket, [Query.limit($pageLimit), Query.offset(offset)], search); }; const deleteFile = async (file: Models.File) => { try { await sdkForProject.storage.deleteFile(file.bucketId, file.$id); uploader.removeFile(file); - files.load(bucket, search, $pageLimit, offset); + files.load(bucket, [Query.limit($pageLimit), Query.offset(offset)], search); } catch (error) { addNotification({ type: 'error', @@ -71,7 +71,7 @@ } }; - $: files.load(bucket, search, $pageLimit, offset); + $: files.load(bucket, [Query.limit($pageLimit), Query.offset(offset)], search); $: if (search) offset = 0; diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte index a0a1c4b00..fe94f6e7f 100644 --- a/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte +++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte @@ -16,20 +16,19 @@ let list = new DataTransfer(); let files: FileList; - let read: string[] = []; - let write: string[] = []; + let input: HTMLInputElement; + let permissions: string[] = []; let id: string = null; let error: string; let showDropdown = false; - const create = async () => { + async function create() { try { const file = await sdkForProject.storage.createFile( bucketId, id ?? 'unique()', files[0], - read, - write + permissions ); files = null; showCreate = false; @@ -39,10 +38,9 @@ } catch ({ message }) { error = message; } - }; + } function dropHandler(ev: DragEvent) { - console.log(ev); ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) @@ -54,24 +52,17 @@ files = list.files; } } - } else { - // Use DataTransfer interface to access the file(s) - for (let i = 0; i < ev.dataTransfer.files.length; i++) { - console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name); - } } } function dragOverHandler(ev: DragEvent) { - console.log('File(s) in drop zone'); ev.preventDefault(); } $: if (!showCreate) { id = files = error = null; list = new DataTransfer(); - read = []; - write = []; + permissions = []; } $: if (!showDropdown) { @@ -79,7 +70,7 @@ } - +
@@ -88,8 +79,8 @@
dropHandler(e)} - on:dragover|preventDefault={(e) => dragOverHandler(e)}> + on:drop|preventDefault={dropHandler} + on:dragover|preventDefault={dragOverHandler}>
@@ -125,10 +113,11 @@ {#if !showDropdown}
- (showDropdown = !showDropdown)} - >
{:else} @@ -168,14 +157,9 @@

- diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte index 95b977653..38ec20e02 100644 --- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte +++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+page.svelte @@ -11,18 +11,17 @@ import Delete from './_deleteFile.svelte'; import { page } from '$app/stores'; import { onMount } from 'svelte'; + import { difference } from '$lib/helpers/array'; onMount(async () => { let bucketId = $page.params.bucket; let fileId = $page.params.file; await file.load(bucketId, fileId); - fileRead = $file?.$read; - fileWrite = $file?.$write; + filePermissions = $file?.$permissions; }); let showDelete = false; - let fileRead = $file?.$read; - let fileWrite = $file?.$write; + let filePermissions = $file?.$permissions; let arePermsDisabled = true; const getPreview = (fileId: string) => @@ -31,16 +30,10 @@ const getView = (fileId: string) => sdkForProject.storage.getFileView($file.bucketId, fileId).toString() + '&mode=admin'; - $: if (fileRead || fileWrite) { - if (fileRead) { - if (JSON.stringify(fileRead) !== JSON.stringify($file.$read)) { - arePermsDisabled = false; - } else arePermsDisabled = true; - } else if (fileWrite) { - if (JSON.stringify(fileWrite) !== JSON.stringify($file.$write)) { - arePermsDisabled = false; - } else arePermsDisabled = true; - } + $: if (filePermissions) { + if (difference(filePermissions, $file.$permissions).length) { + arePermsDisabled = false; + } else arePermsDisabled = true; } function downloadFile() { @@ -52,9 +45,8 @@ async function updatePermissions() { try { - await sdkForProject.storage.updateFile($file.bucketId, $file.$id, fileRead, fileWrite); - $file.$read = fileRead; - $file.$write = fileWrite; + await sdkForProject.storage.updateFile($file.bucketId, $file.$id, filePermissions); + $file.$permissions = filePermissions; arePermsDisabled = true; addNotification({ message: 'Permissions have been updated', @@ -133,15 +125,10 @@
    - + bind:tags={filePermissions} />
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte index 778684ce5..178c05534 100644 --- a/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte +++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/settings/+page.svelte @@ -19,14 +19,14 @@ import { onMount } from 'svelte'; import { page } from '$app/stores'; import Pill from '$lib/elements/pill.svelte'; + import { difference } from '$lib/helpers/array'; let showDelete = false; let enabled: boolean = null, bucketName: string = null, - bucketPermissions: string = null, - bucketRead: string[] = null, - bucketWrite: string[] = null, + bucketFileSecurity: boolean = null, + bucketPermissions: string[] = null, arePermsDisabled = true, encryption: boolean = null, antivirus: boolean = null, @@ -47,22 +47,17 @@ enabled ??= $bucket.enabled; bucketName ??= $bucket.name; bucketName ??= $bucket.name; - bucketPermissions ??= $bucket.permission; - bucketRead ??= $bucket.$read; - bucketWrite ??= $bucket.$write; + bucketFileSecurity ??= $bucket.fileSecurity; + bucketPermissions ??= $bucket.$permissions; encryption ??= $bucket.encryption; antivirus ??= $bucket.antivirus; }); $: maxSizePlaceholder = bytesToSize($bucket.maximumFileSize, byteUnit); - $: if (bucketPermissions || bucketRead || bucketWrite) { - if (bucketPermissions !== $bucket.permission) { + $: if (bucketFileSecurity || bucketPermissions) { + if (bucketFileSecurity !== $bucket.fileSecurity) { arePermsDisabled = false; - } else if (bucketRead) { - if (JSON.stringify(bucketRead) !== JSON.stringify($bucket.$read)) { - arePermsDisabled = false; - } else arePermsDisabled = true; - } else if (bucketWrite) { - if (JSON.stringify(bucketWrite) !== JSON.stringify($bucket.$write)) { + } else if (bucketPermissions) { + if (difference(bucketPermissions, $bucket.$permissions).length) { arePermsDisabled = false; } else arePermsDisabled = true; } @@ -78,9 +73,8 @@ await sdkForProject.storage.updateBucket( $bucket.$id, $bucket.name, - $bucket.permission, - $bucket.$read, - $bucket.$write, + undefined, + undefined, enabled ); $bucket.enabled = enabled; @@ -97,7 +91,7 @@ } async function updateName() { try { - await sdkForProject.storage.updateBucket($bucket.$id, $bucket.name, $bucket.permission); + await sdkForProject.storage.updateBucket($bucket.$id, bucketName); $bucket.name = bucketName; addNotification({ message: 'Name has been updated', @@ -115,13 +109,11 @@ await sdkForProject.storage.updateBucket( $bucket.$id, $bucket.name, - bucketPermissions, - bucketPermissions === 'bucket' ? bucketRead : $bucket.$read, - bucketPermissions === 'bucket' ? bucketWrite : $bucket.$write + bucketFileSecurity ? bucketPermissions : undefined, + bucketFileSecurity ); - $bucket.permission = bucketPermissions; - $bucket.$read = bucketRead; - $bucket.$write = bucketWrite; + $bucket.fileSecurity = bucketFileSecurity; + $bucket.$permissions = bucketPermissions; arePermsDisabled = true; addNotification({ message: 'Permissions have been updated', @@ -140,12 +132,12 @@ await sdkForProject.storage.updateBucket( $bucket.$id, $bucket.name, - $bucket.permission, - $bucket.$read, - $bucket.$write, - $bucket.enabled, - $bucket.maximumFileSize, - $bucket.allowedFileExtensions, + undefined, + undefined, + undefined, + undefined, + undefined, + undefined, encryption, antivirus ); @@ -169,10 +161,9 @@ await sdkForProject.storage.updateBucket( $bucket.$id, $bucket.name, - $bucket.permission, - $bucket.$read, - $bucket.$write, - $bucket.enabled, + undefined, + undefined, + undefined, size ); $bucket.maximumFileSize = maxSize; @@ -193,11 +184,10 @@ await sdkForProject.storage.updateBucket( $bucket.$id, $bucket.name, - $bucket.permission, - $bucket.$read, - $bucket.$write, - $bucket.enabled, - $bucket.maximumFileSize, + undefined, + undefined, + undefined, + undefined, extensions ); $bucket.allowedFileExtensions = extensions; @@ -274,8 +264,8 @@ type="radio" class="is-small" name="level" - bind:group={bucketPermissions} - value="bucket" /> + bind:group={bucketFileSecurity} + value={true} /> Bucket Level @@ -285,8 +275,8 @@ type="radio" class="is-small" name="level" - bind:group={bucketPermissions} - value="file" /> + bind:group={bucketFileSecurity} + value={false} /> File Level @@ -297,18 +287,13 @@ documentation for more on Permissions

- {#if bucketPermissions === 'bucket'} + {#if bucketFileSecurity}
    - + bind:tags={bucketPermissions} />
{/if} diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts b/src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts index 4a15297b8..e2268e2d0 100644 --- a/src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts +++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/store.ts @@ -26,23 +26,8 @@ function createFilesStore() { return { subscribe, set, - load: async ( - bucketId: string, - search?: string, - limit?: number, - offset?: number, - cursor?: string, - cursorDirection?: string - ) => { - const response = await sdkForProject.storage.listFiles( - bucketId, - search, - limit, - offset, - cursor, - cursorDirection, - 'DESC' - ); + load: async (bucketId: string, queries?: string[], search?: string) => { + const response = await sdkForProject.storage.listFiles(bucketId, queries, search); set(response); } }; diff --git a/src/routes/console/project-[project]/storage/store.ts b/src/routes/console/project-[project]/storage/store.ts index 6078297c2..64130f4d3 100644 --- a/src/routes/console/project-[project]/storage/store.ts +++ b/src/routes/console/project-[project]/storage/store.ts @@ -5,12 +5,12 @@ import { cachedStore } from '$lib/helpers/cache'; export const bucketList = cachedStore< Models.BucketList, { - load: (search: string, limit: number, offset: number) => Promise; + load: (queries: string[], search: string) => Promise; } >('bucketList', function ({ set }) { return { - load: async (search, limit, offset) => { - const response = await sdkForProject.storage.listBuckets(search, limit, offset); + load: async (queries, search) => { + const response = await sdkForProject.storage.listBuckets(queries, search); set(response); } };