q-page.admin-storage
.row.q-pa-md.items-center
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-ssd.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.storage.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.storage.subtitle') }}
.col-auto.flex
q-spinner-tail.q-mr-md(
v-show='state.loading > 0'
color='accent'
size='sm'
)
q-btn-toggle.q-mr-md(
v-model='state.displayMode'
push
no-caps
toggle-color='black'
:options=`[
{ label: t('admin.storage.targets'), value: 'targets' },
{ label: t('admin.storage.deliveryPaths'), value: 'delivery' }
]`
)
q-separator.q-mr-md(vertical)
q-btn.q-mr-sm.acrylic-btn(
icon='las la-question-circle'
flat
color='grey'
href='https://docs.js.wiki/admin/storage'
target='_blank'
type='a'
)
q-btn(
unelevated
icon='fa-solid fa-check'
:label='t(`common.actions.apply`)'
color='secondary'
@click='save'
:loading='state.loading > 0'
)
q-separator(inset)
//- ==========================================
//- TARGETS
//- ==========================================
.row.q-pa-md.q-col-gutter-md(v-if='state.displayMode === `targets`')
.col-auto
q-card.rounded-borders.bg-dark
q-list(
style='min-width: 350px;'
padding
dark
)
q-item(
v-for='tgt of state.targets'
:key='tgt.key'
active-class='bg-primary text-white'
:active='state.selectedTarget === tgt.id'
:to='`/_admin/` + adminStore.currentSiteId + `/storage/` + tgt.id'
clickable
)
q-item-section(side)
q-icon(
:name='`img:` + tgt.icon'
)
q-item-section
q-item-label {{tgt.title}}
q-item-label(caption, :class='getTargetSubtitleColor(tgt)') {{getTargetSubtitle(tgt)}}
q-item-section(side)
q-spinner-rings(:color='tgt.isEnabled ? `positive` : `negative`', size='sm')
.col(v-if='state.target')
//- -----------------------
//- Content Types
//- -----------------------
q-card.shadow-1.q-pb-sm
q-card-section
.text-subtitle1 {{t('admin.storage.contentTypes')}}
.text-body2.text-grey {{ t('admin.storage.contentTypesHint') }}
q-item(tag='label')
q-item-section(avatar)
q-checkbox(
v-model='state.target.contentTypes.activeTypes'
:color='state.target.module === `db` ? `grey` : `primary`'
val='pages'
:aria-label='t(`admin.storage.contentTypePages`)'
:disable='state.target.module === `db`'
)
q-item-section
q-item-label {{t(`admin.storage.contentTypePages`)}}
q-item-label(caption) {{t(`admin.storage.contentTypePagesHint`)}}
q-item(tag='label')
q-item-section(avatar)
q-checkbox(
v-model='state.target.contentTypes.activeTypes'
color='primary'
val='images'
:aria-label='t(`admin.storage.contentTypeImages`)'
)
q-item-section
q-item-label {{t(`admin.storage.contentTypeImages`)}}
q-item-label(caption) {{t(`admin.storage.contentTypeImagesHint`)}}
q-item(tag='label')
q-item-section(avatar)
q-checkbox(
v-model='state.target.contentTypes.activeTypes'
color='primary'
val='documents'
:aria-label='t(`admin.storage.contentTypeDocuments`)'
)
q-item-section
q-item-label {{t(`admin.storage.contentTypeDocuments`)}}
q-item-label(caption) {{t(`admin.storage.contentTypeDocumentsHint`)}}
q-item(tag='label')
q-item-section(avatar)
q-checkbox(
v-model='state.target.contentTypes.activeTypes'
color='primary'
val='others'
:aria-label='t(`admin.storage.contentTypeOthers`)'
)
q-item-section
q-item-label {{t(`admin.storage.contentTypeOthers`)}}
q-item-label(caption) {{t(`admin.storage.contentTypeOthersHint`)}}
q-item(tag='label')
q-item-section(avatar)
q-checkbox(
v-model='state.target.contentTypes.activeTypes'
color='primary'
val='large'
:aria-label='t(`admin.storage.contentTypeLargeFiles`)'
)
q-item-section
q-item-label {{t(`admin.storage.contentTypeLargeFiles`)}}
q-item-label(caption) {{t(`admin.storage.contentTypeLargeFilesHint`)}}
q-item-label.text-deep-orange(v-if='state.target.module === `db`', caption) {{t(`admin.storage.contentTypeLargeFilesDBWarn`)}}
q-item-section(side)
q-input(
outlined
:label='t(`admin.storage.contentTypeLargeFilesThreshold`)'
v-model='state.target.contentTypes.largeThreshold'
style='min-width: 150px;'
dense
)
//- -----------------------
//- Content Delivery
//- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section
.text-subtitle1 {{t('admin.storage.assetDelivery')}}
.text-body2.text-grey {{ t('admin.storage.assetDeliveryHint') }}
q-item(:tag='state.target.assetDelivery.isStreamingSupported ? `label` : null')
q-item-section(avatar)
q-checkbox(
v-model='state.target.assetDelivery.streaming'
:color='state.target.module === `db` || !state.target.assetDelivery.isStreamingSupported ? `grey` : `primary`'
:aria-label='t(`admin.storage.contentTypePages`)'
:disable='state.target.module === `db` || !state.target.assetDelivery.isStreamingSupported'
)
q-item-section
q-item-label {{t(`admin.storage.assetStreaming`)}}
q-item-label(caption) {{t(`admin.storage.assetStreamingHint`)}}
q-item-label.text-deep-orange(v-if='!state.target.assetDelivery.isStreamingSupported', caption) {{t(`admin.storage.assetStreamingNotSupported`)}}
q-item(:tag='state.target.assetDelivery.isDirectAccessSupported ? `label` : null')
q-item-section(avatar)
q-checkbox(
v-model='state.target.assetDelivery.directAccess'
:color='!state.target.assetDelivery.isDirectAccessSupported ? `grey` : `primary`'
:aria-label='t(`admin.storage.contentTypePages`)'
:disable='!state.target.assetDelivery.isDirectAccessSupported'
)
q-item-section
q-item-label {{t(`admin.storage.assetDirectAccess`)}}
q-item-label(caption) {{t(`admin.storage.assetDirectAccessHint`)}}
q-item-label.text-deep-orange(v-if='!state.target.assetDelivery.isDirectAccessSupported', caption) {{t(`admin.storage.assetDirectAccessNotSupported`)}}
//- -----------------------
//- Setup
//- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md(v-if='state.target.setup && state.target.setup.handler && state.target.setup.state !== `configured`')
q-card-section
.text-subtitle1 {{t('admin.storage.setup')}}
.text-body2.text-grey {{ t('admin.storage.setupHint') }}
template(v-if='state.target.setup.handler === `github` && state.target.setup.state === `notconfigured`')
q-item
blueprint-icon(icon='test-account')
q-item-section
q-item-label GitHub Account Type
q-item-label(caption) Whether to use an organization or personal GitHub account during setup.
q-item-section.col-auto
q-btn-toggle(
v-model='state.target.setup.values.accountType'
push
glossy
no-caps
toggle-color='primary'
:options=`[
{ label: t('admin.storage.githubAccTypeOrg'), value: 'org' },
{ label: t('admin.storage.githubAccTypePersonal'), value: 'personal' }
]`
)
q-separator.q-my-sm(inset)
template(v-if='state.target.setup.values.accountType === `org`')
q-item
blueprint-icon(icon='github')
q-item-section
q-item-label {{ t('admin.storage.githubOrg') }}
q-item-label(caption) {{ t('admin.storage.githubOrgHint') }}
q-item-section
q-input(
outlined
v-model='state.target.setup.values.org'
dense
:aria-label='t(`admin.storage.githubOrg`)'
)
q-separator.q-my-sm(inset)
q-item
blueprint-icon(icon='dns')
q-item-section
q-item-label {{ t('admin.storage.githubPublicUrl') }}
q-item-label(caption) {{ t('admin.storage.githubPublicUrlHint') }}
q-item-section
q-input(
outlined
v-model='state.target.setup.values.publicUrl'
dense
:aria-label='t(`admin.storage.githubPublicUrl`)'
)
q-card-section.q-pt-sm.text-right
form(
ref='githubSetupForm'
method='POST'
:action='setupCfg.action'
)
input(
type='hidden'
name='manifest'
:value='setupCfg.manifest'
)
q-btn(
unelevated
icon='las la-angle-double-right'
:label='t(`admin.storage.startSetup`)'
color='secondary'
@click='setupGitHub'
:loading='setupCfg.loading'
)
template(v-else-if='state.target.setup.handler === `github` && state.target.setup.state === `pendinginstall`')
q-card-section.q-py-none
q-banner(
rounded
:class='$q.dark.isActive ? `bg-teal-9 text-white` : `bg-teal-1 text-teal-9`'
) {{t('admin.storage.githubFinish')}}
q-card-section.q-pt-sm.text-right
q-btn.q-mr-sm(
unelevated
icon='las la-times-circle'
:label='t(`admin.storage.cancelSetup`)'
color='negative'
@click='setupDestroy'
)
q-btn(
unelevated
icon='las la-angle-double-right'
:label='t(`admin.storage.finishSetup`)'
color='secondary'
@click='setupGitHubStep(`verify`)'
:loading='setupCfg.loading'
)
q-card.shadow-1.q-pb-sm.q-mt-md(v-if='state.target.setup && state.target.setup.handler && state.target.setup.state === `configured`')
q-card-section
.text-subtitle1 {{t('admin.storage.setup')}}
.text-body2.text-grey {{ t('admin.storage.setupConfiguredHint') }}
q-item
blueprint-icon.self-start(icon='matches', :hue-rotate='140')
q-item-section
q-item-label Uninstall
q-item-label(caption) Delete the active configuration and start over the setup process.
q-item-label.text-red(caption): strong This action cannot be undone!
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-arrow-circle-right'
color='negative'
@click='setupDestroy'
:label='t(`admin.storage.uninstall`)'
)
//- -----------------------
//- Configuration
//- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section
.text-subtitle1 {{t('admin.storage.config')}}
q-banner.q-mt-md(
v-if='!state.target.config || Object.keys(state.target.config).length < 1'
rounded
:class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
) {{t('admin.storage.noConfigOption')}}
template(
v-for='(cfg, cfgKey, idx) in state.target.config'
)
template(
v-if='configIfCheck(cfg.if)'
)
q-separator.q-my-sm(inset, v-if='idx > 0')
q-item(v-if='cfg.type === `Boolean`', tag='label')
blueprint-icon(:icon='cfg.icon', :hue-rotate='cfg.readOnly ? -45 : 0')
q-item-section
q-item-label {{cfg.title}}
q-item-label(caption) {{cfg.hint}}
q-item-section(avatar)
q-toggle(
v-model='cfg.value'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.general.allowComments`)'
:disable='cfg.readOnly'
)
q-item(v-else)
blueprint-icon(:icon='cfg.icon', :hue-rotate='cfg.readOnly ? -45 : 0')
q-item-section
q-item-label {{cfg.title}}
q-item-label(caption) {{cfg.hint}}
q-item-section(
:style='cfg.type === `Number` ? `flex: 0 0 150px;` : ``'
:class='{ "col-auto": cfg.enum && cfg.enumDisplay === `buttons` }'
)
q-btn-toggle(
v-if='cfg.enum && cfg.enumDisplay === `buttons`'
v-model='cfg.value'
push
glossy
no-caps
toggle-color='primary'
:options=`cfg.enum`
:disable='cfg.readOnly'
)
q-select(
v-else-if='cfg.enum'
outlined
v-model='cfg.value'
:options='cfg.enum'
emit-value
map-options
dense
options-dense
:aria-label='cfg.title'
:disable='cfg.readOnly'
)
q-input(
v-else
outlined
v-model='cfg.value'
dense
:type='cfg.multiline ? `textarea` : `input`'
:aria-label='cfg.title'
:disable='cfg.readOnly'
)
//- -----------------------
//- Sync
//- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md(v-if='state.target.sync && Object.keys(state.target.sync).length > 0')
q-card-section
.text-subtitle1 {{t('admin.storage.sync')}}
q-banner.q-mt-md(
rounded
:class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
) {{t('admin.storage.noSyncModes')}}
//- -----------------------
//- Actions
//- -----------------------
q-card.shadow-1.q-pb-sm.q-mt-md
q-card-section
.text-subtitle1 {{t('admin.storage.actions')}}
q-banner.q-mt-md(
v-if='!state.target.actions || state.target.actions.length < 1'
rounded
:class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
) {{t('admin.storage.noActions')}}
q-banner.q-mt-md(
v-else-if='!state.target.isEnabled'
rounded
:class='$q.dark.isActive ? `bg-negative text-white` : `bg-grey-2 text-grey-7`'
) {{t('admin.storage.actionsInactiveWarn')}}
template(
v-if='state.target.isEnabled'
v-for='(act, idx) in state.target.actions'
)
q-separator.q-my-sm(inset, v-if='idx > 0')
q-item
blueprint-icon.self-start(:icon='act.icon', :hue-rotate='45')
q-item-section
q-item-label {{act.label}}
q-item-label(caption) {{act.hint}}
q-item-label.text-red(v-if='act.warn', caption): strong {{act.warn}}
q-item-section(side)
q-btn.acrylic-btn(
flat
icon='las la-arrow-circle-right'
color='primary'
@click=''
:label='t(`common.actions.proceed`)'
)
.col-auto(v-if='state.target')
//- -----------------------
//- Infobox
//- -----------------------
q-card.rounded-borders.q-pb-md(style='width: 350px;')
q-card-section
.text-subtitle1 {{state.target.title}}
q-img.q-mt-sm.rounded-borders(
:src='target.banner'
fit='cover'
no-spinner
)
.text-body2.q-mt-md {{state.target.description}}
q-separator.q-mb-sm(inset)
q-item
q-item-section
q-item-label.text-grey {{t(`admin.storage.vendor`)}}
q-item-label {{state.target.vendor}}
q-separator.q-my-sm(inset)
q-item
q-item-section
q-item-label.text-grey {{t(`admin.storage.vendorWebsite`)}}
q-item-label: a(:href='state.target.website', target='_blank', rel='noreferrer') {{state.target.website}}
//- -----------------------
//- Status
//- -----------------------
q-card.rounded-borders.q-pb-md.q-mt-md(style='width: 350px;')
q-card-section
.text-subtitle1 Status
template(v-if='state.target.module !== `db` && !(state.target.setup && state.target.setup.handler && state.target.setup.state !== `configured`)')
q-item(tag='label')
q-item-section
q-item-label {{t(`admin.storage.enabled`)}}
q-item-label(caption) {{t(`admin.storage.enabledHint`)}}
q-item-label.text-deep-orange(v-if='state.target.module === `db`', caption) {{t(`admin.storage.enabledForced`)}}
q-item-section(avatar)
q-toggle(
v-model='state.target.isEnabled'
:disable='state.target.module === `db` || (state.target.setup && state.target.setup.handler && state.target.setup.state !== `configured`)'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.general.allowSearch`)'
)
q-separator.q-my-sm(inset)
q-item
q-item-section
q-item-label.text-grey {{t(`admin.storage.currentState`)}}
q-item-label.text-positive No issues detected.
//- -----------------------
//- Versioning
//- -----------------------
q-card.rounded-borders.q-pb-md.q-mt-md(style='width: 350px;')
q-card-section
.text-subtitle1 {{t(`admin.storage.versioning`)}}
.text-body2.text-grey {{t(`admin.storage.versioningHint`)}}
q-item(:tag='state.target.versioning.isSupported ? `label` : null')
q-item-section
q-item-label {{t(`admin.storage.useVersioning`)}}
q-item-label(caption) {{t(`admin.storage.useVersioningHint`)}}
q-item-label.text-deep-orange(v-if='!state.target.versioning.isSupported', caption) {{t(`admin.storage.versioningNotSupported`)}}
q-item-label.text-deep-orange(v-if='state.target.versioning.isForceEnabled', caption) {{t(`admin.storage.versioningForceEnabled`)}}
q-item-section(avatar)
q-toggle(
v-model='state.target.versioning.enabled'
:disable='!state.target.versioning.isSupported || state.target.versioning.isForceEnabled'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.storage.useVersioning`)'
)
//- ==========================================
//- DELIVERY PATHS
//- ==========================================
.row.q-pa-md.q-col-gutter-md(v-if='state.displayMode === `delivery`')
.col
q-card.rounded-borders
q-card-section.flex.items-center
.text-caption.q-mr-sm {{ t('admin.storage.deliveryPathsLegend') }}
q-chip(square, dense, color='blue-1', text-color='blue-8')
q-avatar(icon='las la-ellipsis-h', color='blue', text-color='white')
span.text-caption.q-px-sm {{ t('admin.storage.deliveryPathsUserRequest') }}
q-chip(square, dense, color='teal-1', text-color='teal-8')
q-avatar(icon='las la-ellipsis-h', color='positive', text-color='white')
span.text-caption.q-px-sm {{ t('admin.storage.deliveryPathsPushToOrigin') }}
q-chip(square, dense, color='red-1', text-color='red-8')
q-avatar(icon='las la-minus', color='negative', text-color='white')
span.text-caption.q-px-sm {{ t('admin.storage.missingOrigin') }}
q-separator
v-network-graph(
:zoom-level='2'
:configs='state.deliveryConfig'
:nodes='state.deliveryNodes'
:edges='state.deliveryEdges'
:paths='state.deliveryPaths'
:layouts='state.deliveryLayouts'
style='height: 600px;'
)
template(#override-node='{ nodeId, scale, config, ...slotProps }')
rect(
:rx='config.borderRadius * scale'
:x='-config.radius * scale'
:y='-config.radius * scale'
:width='config.radius * scale * 2'
:height='config.radius * scale * 2'
:fill='config.color'
v-bind='slotProps'
)
image(
v-if='state.deliveryNodes[nodeId].icon && state.deliveryNodes[nodeId].icon.endsWith(`.svg`)'
:x='(-config.radius + 5) * scale'
:y='(-config.radius + 5) * scale'
:width='(config.radius - 5) * scale * 2'
:height='(config.radius - 5) * scale * 2'
:xlink:href='state.deliveryNodes[nodeId].icon'
)
text(
v-if='state.deliveryNodes[nodeId].icon && state.deliveryNodes[nodeId].iconText'
:class='state.deliveryNodes[nodeId].icon'
:font-size='22 * scale'
fill='#ffffff'
text-anchor='middle'
dominant-baseline='central'
v-html='state.deliveryNodes[nodeId].iconText'
)
//- .overline.my-5 {{t('admin.storage.syncDirection')}}
//- .body-2.ml-3 {{t('admin.storage.syncDirectionSubtitle')}}
//- .pr-3.pt-3
//- v-radio-group.ml-3.py-0(v-model='target.mode')
//- v-radio(
//- :label='t(`admin.storage.syncDirBi`)'
//- color='primary'
//- value='sync'
//- :disabled='target.supportedModes.indexOf(`sync`) < 0'
//- )
//- v-radio(
//- :label='t(`admin.storage.syncDirPush`)'
//- color='primary'
//- value='push'
//- :disabled='target.supportedModes.indexOf(`push`) < 0'
//- )
//- v-radio(
//- :label='t(`admin.storage.syncDirPull`)'
//- color='primary'
//- value='pull'
//- :disabled='target.supportedModes.indexOf(`pull`) < 0'
//- )
//- .body-2.ml-3
//- strong {{t('admin.storage.syncDirBi')}} #[em.red--text.text--lighten-2(v-if='target.supportedModes.indexOf(`sync`) < 0') {{t('admin.storage.unsupported')}}]
//- .pb-3 {{t('admin.storage.syncDirBiHint')}}
//- strong {{t('admin.storage.syncDirPush')}} #[em.red--text.text--lighten-2(v-if='target.supportedModes.indexOf(`push`) < 0') {{t('admin.storage.unsupported')}}]
//- .pb-3 {{t('admin.storage.syncDirPushHint')}}
//- strong {{t('admin.storage.syncDirPull')}} #[em.red--text.text--lighten-2(v-if='target.supportedModes.indexOf(`pull`) < 0') {{t('admin.storage.unsupported')}}]
//- .pb-3 {{t('admin.storage.syncDirPullHint')}}
//- template(v-if='target.hasSchedule')
//- v-divider.mt-3
//- .overline.my-5 {{t('admin.storage.syncSchedule')}}
//- .body-2.ml-3 {{t('admin.storage.syncScheduleHint')}}
//- .pa-3
//- duration-picker(v-model='target.syncInterval')
//- i18next.caption.mt-3(path='admin.storage.syncScheduleCurrent', tag='div')
//- strong(place='schedule') {{getDefaultSchedule(target.syncInterval)}}
//- i18next.caption(path='admin.storage.syncScheduleDefault', tag='div')
//- strong(place='schedule') {{getDefaultSchedule(target.syncIntervalDefault)}}