refactor: location display

frontend/src/components/dirent-detail/dirent-details/file-details/index.js

@@ -14,7 +14,6 @@ import { MetadataDetails, useMetadata } from '../../../../metadata';
 import ObjectUtils from '../../../../metadata/utils/object-utils';
 import { getCellValueByColumn, getDateDisplayString, decimalToExposureTime } from '../../../../metadata/utils/cell';
 import Collapse from './collapse';
-import Location from './location';
 
 import './index.css';
 
@@ -126,7 +125,6 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
   if (Utils.imageCheck(dirent.name) || Utils.videoCheck(dirent.name)) {
     const fileDetails = getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.FILE_DETAILS });
     const fileDetailsJson = JSON.parse(fileDetails?.slice(9, -7) || '{}');
-    const fileLocation = getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.LOCATION });
 
     component = (
       <>
@@ -142,7 +140,6 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
               </div>
             );
           })}
-          {record && (<Location position={fileLocation} />)}
         </Collapse>
       </>
     );

frontend/src/metadata/components/metadata-details/index.js

@@ -13,6 +13,7 @@ import { gettext } from '../../../utils/constants';
 import { CellType, PREDEFINED_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../../constants';
 import { getColumnOptions, getColumnOriginName } from '../../utils/column';
 import { SYSTEM_FOLDERS } from './constants';
+import Location from './location';
 
 import './index.css';
 
@@ -120,6 +121,7 @@ const MetadataDetails = ({ repoID, filePath, repoInfo, direntType, updateRecord
           </DetailItem>
         );
       })}
+      {isImage && (<Location position={getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.LOCATION })} />)}
     </>
   );
 };

frontend/src/metadata/components/metadata-details/location/index.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { initMapInfo, loadMapSource } from '../../../../../utils/map-utils';
-import { MAP_TYPE, DOMESTIC_MAP_TYPE } from '../../../../../constants';
-import Loading from '../../../../loading';
-import { gettext, baiduMapKey, googleMapKey, googleMapId } from '../../../../../utils/constants';
-import { GEOLOCATION_FORMAT } from '../../../../../metadata/constants';
-import { getGeolocationDisplayString } from '../../../../../metadata/utils/cell';
-import { isValidPosition } from '../../../../../metadata/utils/validate';
-import toaster from '../../../../toast';
-import ObjectUtils from '../../../../../metadata/utils/object-utils';
+import { initMapInfo, loadMapSource } from '../../../../utils/map-utils';
+import { MAP_TYPE, DOMESTIC_MAP_TYPE } from '../../../../constants';
+import Loading from '../../../../components/loading';
+import { gettext, baiduMapKey, googleMapKey, googleMapId } from '../../../../utils/constants';
+import { CellType, GEOLOCATION_FORMAT, PRIVATE_COLUMN_KEY } from '../../../constants';
+import { getGeolocationDisplayString } from '../../../utils/cell';
+import { isValidPosition } from '../../../utils/validate';
+import toaster from '../../../../components/toast';
+import ObjectUtils from '../../../utils/object-utils';
+import DetailItem from '../../../../components/dirent-detail/detail-item';
+import { getColumnDisplayName } from '../../../utils/column';
 
 import './index.css';
 
@@ -167,31 +169,26 @@ class Location extends React.Component {
     const isValid = isValidPosition(position?.lng, position?.lat);
     return (
       <>
-        <div className="dirent-detail-item sf-metadata-property-detail-capture-information-item" key={'location'}>
-          <div className="dirent-detail-item-name">{gettext('Location')}</div>
-          <div className="dirent-detail-item-value" placeholder={gettext('Empty')}>
-            {isValid && (
-              <>
-                {!isLoading && this.mapType && address && (
-                  <>
-                    <span>{address}</span>
-                    <br />
-                  </>
-                )}
-                <span>{getGeolocationDisplayString(position, { geo_format: GEOLOCATION_FORMAT.LNG_LAT })}</span>
-              </>
-            )}
-          </div>
-        </div>
+        <DetailItem field={{ key: PRIVATE_COLUMN_KEY.LOCATION, type: CellType.GEOLOCATION, name: getColumnDisplayName(PRIVATE_COLUMN_KEY.LOCATION) }} readonly={true}>
+          {isValid ? (
+            <div className="sf-metadata-ui cell-formatter-container text-formatter sf-metadata-text-formatter">
+              {!isLoading && this.mapType && address && (
+                <>
+                  <span>{address}</span>
+                  <br />
+                </>
+              )}
+              <span>{getGeolocationDisplayString(position, { geo_format: GEOLOCATION_FORMAT.LNG_LAT })}</span>
+            </div>
+          ) : (
+            <div className="sf-metadata-record-cell-empty" placeholder={gettext('Empty')}></div>
+          )}
+        </DetailItem>
         {isLoading ? (<Loading />) : (
           <>
-            {this.mapType ? (
-              <div className="dirent-detail-item-value-map">
-                {!isLoading && (<div className={classnames('w-100 h-100', { 'd-none': !isValid })} ref={ref => this.ref = ref} id="sf-geolocation-map-container"></div>)}
-              </div>
-            ) : (
-              <div className="dirent-detail-item-value-map alert-danger error-message d-flex justify-content-center">
-                {gettext('The map plugin is not properly configured. Contact the administrator.')}
+            {this.mapType && (
+              <div className={classnames('dirent-detail-item-value-map', { 'd-none': !isValid })}>
+                <div className="w-100 h-100" ref={ref => this.ref = ref} id="sf-geolocation-map-container"></div>
               </div>
             )}
           </>

seahub/templates/file_view_react.html

@@ -43,6 +43,9 @@ window.app.pageOptions = {
   canDownloadFile: {% if can_download_file %}true{% else %}false{% endif %},
   enableWatermark: {% if enable_watermark %}true{% else %}false{% endif %},
   enableMetadataManagement: {% if enable_metadata_management %} true {% else %} false {% endif %},
+  baiduMapKey: '{{ baidu_map_key }}',
+  googleMapKey: '{{ google_map_key }}',
+  googleMapId: '{{ google_map_id }}',
   // for {{filetype}} file
   {% block extra_data %}
   {% endblock %}

seahub/views/file.py

@@ -87,7 +87,8 @@ from seahub.settings import FILE_ENCODING_LIST, FILE_PREVIEW_MAX_SIZE, \
     FILE_ENCODING_TRY_LIST, MEDIA_URL, SEAFILE_COLLAB_SERVER, ENABLE_WATERMARK, \
     SHARE_LINK_EXPIRE_DAYS_MIN, SHARE_LINK_EXPIRE_DAYS_MAX, SHARE_LINK_PASSWORD_MIN_LENGTH, \
     SHARE_LINK_FORCE_USE_PASSWORD, SHARE_LINK_PASSWORD_STRENGTH_LEVEL, \
-    SHARE_LINK_EXPIRE_DAYS_DEFAULT, ENABLE_SHARE_LINK_REPORT_ABUSE, SEADOC_SERVER_URL
+    SHARE_LINK_EXPIRE_DAYS_DEFAULT, ENABLE_SHARE_LINK_REPORT_ABUSE, SEADOC_SERVER_URL, \
+    ENABLE_METADATA_MANAGEMENT, BAIDU_MAP_KEY, GOOGLE_MAP_KEY, GOOGLE_MAP_ID
 
 
 # wopi
@@ -574,10 +575,16 @@ def view_lib_file(request, repo_id, path):
         'share_link_expire_days_max': SHARE_LINK_EXPIRE_DAYS_MAX,
         'can_download_file': parse_repo_perm(permission).can_download,
         'seafile_collab_server': SEAFILE_COLLAB_SERVER,
-        'enable_metadata_management': settings.ENABLE_METADATA_MANAGEMENT,
+        'enable_metadata_management': ENABLE_METADATA_MANAGEMENT,
         'file_download_url': gen_file_get_url_new(repo_id, path)
     }
 
+    if ENABLE_METADATA_MANAGEMENT:
+        return_dict['baidu_map_key'] = BAIDU_MAP_KEY
+        return_dict['google_map_key'] = GOOGLE_MAP_KEY
+        return_dict['google_map_id'] = GOOGLE_MAP_ID
+
+
     # check whether file is starred
     is_starred = is_file_starred(username, repo_id, path, org_id)
     return_dict['is_starred'] = is_starred