Migration amends

client/src/css/bundle.scss

@@ -63,13 +63,31 @@
     }
 }
 
+.cloudinary-field-order {
+    font-size: 2em;
+    padding: 0 0.5em 0 0;
+}
+
+.cloudinary-field-order__move {
+    cursor: pointer;
+    display: block;
+
+    ins {
+        text-decoration: none;
+    }
+}
+.cloudinary-field-order__move--up.cloudinary-field-order__move--first,
+.cloudinary-field-order__move--down.cloudinary-field-order__move--last {
+    cursor: not-allowed;
+}
+
 .cloudinary-field__media {
     position: relative;
     align-self: flex-start;
     line-height: 0;
 
     &:hover .cloudinary-field__actions {
-        opacity: 100%;
+        opacity: 1;
     }
 }
 
@@ -96,7 +114,7 @@
     bottom: 0;
     left: 0;
     display: flex;
-    opacity: 0%;
+    opacity: 0;
     justify-content: space-evenly;
     align-items: center;
     transition: opacity 200ms ease-in-out;

client/src/js/components/field.js

@@ -47,6 +47,7 @@ export default class Field extends Component {
         this.processRaw = this.processRaw.bind(this);
         this.onChange = this.onChange.bind(this);
         this.onRemoveResource = this.onRemoveResource.bind(this);
+        this.onMoveResource = this.onMoveResource.bind(this);
         this.updateProperty = this.updateProperty.bind(this);
         this.renderResources = this.renderResources.bind(this);
     }
@@ -237,6 +238,38 @@ export default class Field extends Component {
         this.onChange(resources);
     }
 
+    /**
+     *
+     * @param {string} publicId
+     * @param {integer} direction Positive or negative
+     */
+    onMoveResource(publicId, direction) {
+        const idx = this.state.resources.findIndex(r => r.public_id === publicId);
+        const newIdx = parseInt(direction, 10) + idx;
+
+        if (newIdx < 0 || newIdx > this.state.resources.length) {
+            // Trying to move out or bounds (don't do anything)
+            return;
+        }
+
+        const resource = this.state.resources[idx];
+
+        // New array (without the resource)
+        let resources = [].concat(
+            this.state.resources.slice(0, idx),
+            this.state.resources.slice(idx + 1)
+        );
+
+        // Re-add the resource at the correct location
+        resources.splice(newIdx, 0, resource);
+
+        this.setState({
+            resources: resources
+        });
+
+        this.onChange(resources);
+    }
+
     updateProperty(publicId, property, value) {
         const resources = this.state.resources.map(resource => {
             if (resource.public_id !== publicId) {
@@ -256,8 +289,10 @@ export default class Field extends Component {
     }
 
     renderResources() {
-        return this.state.resources.map(resource => {
+        return this.state.resources.map((resource, idx) => {
             const { actual_type } = resource;
+            const firstItem = idx === 0;
+            const lastItem = idx === this.state.resources.length - 1;
 
             if (actual_type === 'video') {
                 return <Video
@@ -267,6 +302,9 @@ export default class Field extends Component {
                     gravityOptions={ this.props.gravityOptions }
                     onChange={ this.updateProperty }
                     onRemoveResource={ this.onRemoveResource }
+                    onMoveResource={ this.onMoveResource }
+                    firstItem={ firstItem }
+                    lastItem={ lastItem }
                 />;
             }
 
@@ -277,6 +315,9 @@ export default class Field extends Component {
                     fields={ this.props.fields }
                     onChange={ this.updateProperty }
                     onRemoveResource={ this.onRemoveResource }
+                    onMoveResource={ this.onMoveResource }
+                    firstItem={ firstItem }
+                    lastItem={ lastItem }
                 />;
             }
 
@@ -288,6 +329,9 @@ export default class Field extends Component {
                     gravityOptions={ this.props.gravityOptions }
                     onChange={ this.updateProperty }
                     onRemoveResource={ this.onRemoveResource }
+                    onMoveResource={ this.onMoveResource }
+                    firstItem={ firstItem }
+                    lastItem={ lastItem }
                 />;
             }
 
@@ -297,6 +341,9 @@ export default class Field extends Component {
                 fields={ this.props.fields }
                 onChange={ this.updateProperty }
                 onRemoveResource={ this.onRemoveResource }
+                onMoveResource={ this.onMoveResource }
+                firstItem={ firstItem }
+                lastItem={ lastItem }
             />;
         });
     }

client/src/js/components/resource.js

@@ -21,6 +21,8 @@ export default class Resource extends Component {
         this.updateFgColour = this.updateFgColour.bind(this);
         this.updateBgColour = this.updateBgColour.bind(this);
         this.removeResource = this.removeResource.bind(this);
+        this.moveResourceUp = this.moveResourceUp.bind(this);
+        this.moveResourceDown = this.moveResourceDown.bind(this);
         this.url = this.url.bind(this);
         this.thumbnailUrl = this.thumbnailUrl.bind(this);
         this.titleFieldLabel = this.titleFieldLabel.bind(this);
@@ -97,6 +99,20 @@ export default class Resource extends Component {
         );
     }
 
+    moveResourceUp() {
+        this.props.onMoveResource(
+            this.props.public_id,
+            -1
+        );
+    }
+
+    moveResourceDown() {
+        this.props.onMoveResource(
+            this.props.public_id,
+            1
+        );
+    }
+
     url() {
         const { public_id, resource_type } = this.props;
 
@@ -153,6 +169,52 @@ export default class Resource extends Component {
         return uniq(fields);
     }
 
+    renderOrder() {
+        const { firstItem, lastItem } = this.props;
+
+        if (firstItem && lastItem) {
+            // Only a single item so no need to re-order
+            return false;
+        }
+
+        const moveUpClassNames = [
+            'cloudinary-field-order__move',
+            'cloudinary-field-order__move--up',
+        ];
+        const moveDownClassNames = [
+            'cloudinary-field-order__move',
+            'cloudinary-field-order__move--down',
+        ];
+
+        if (firstItem) {
+            moveUpClassNames.push('cloudinary-field-order__move--first');
+        }
+        if (lastItem) {
+            moveDownClassNames.push('cloudinary-field-order__move--last');
+        }
+
+        return (
+            <div className="cloudinary-field-order">
+                <a
+                    className={moveUpClassNames.join(' ')}
+                    onClick={ this.moveResourceUp }
+                    disabled={ firstItem }
+                    title="Move Up"
+                >
+                    <ins className="font-icon-up-open">&nbsp;</ins>
+                </a>
+                <a
+                    className={moveDownClassNames.join(' ')}
+                    onClick={ this.moveResourceDown }
+                    disabled={ lastItem }
+                    title="Move Down"
+                >
+                    <ins className="font-icon-down-open">&nbsp;</ins>
+                </a>
+            </div>
+        );
+    }
+
     render() {
         const { title, description, credit, gravity, foreground_colour, background_colour } = this.state;
         const { actual_type, public_id, resource_type, top_colours, gravityOptions } = this.props;
@@ -161,6 +223,8 @@ export default class Resource extends Component {
 
         return (
             <div className={`cloudinary-field__item cloudinary-field__item--${actual_type}`}>
+                {this.renderOrder()}
+
                 <div className={`cloudinary-field__media cloudinary-field__media--${actual_type}`}>
                     <div className={`cloudinary-field__preview cloudinary-field__preview--${actual_type}`}>
                         { thumbnail && <img src={ thumbnail } /> }
@@ -318,6 +382,9 @@ Resource.propTypes = {
     gravityOptions: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
     onRemoveResource: PropTypes.func.isRequired,
+    onMoveResource: PropTypes.func.isRequired,
+    firstItem: PropTypes.bool.isRequired,
+    lastItem: PropTypes.bool.isRequired,
 }
 
 Resource.defaultProps = {

src/Controllers/API.php

@@ -166,8 +166,8 @@ protected function processResource($data)
             $return['foreground_colour'] = null;
             $return['background_colour'] = null;
             $return['transformations'] = null;
-            $return['width'] = $data['width'];
-            $return['height'] = $data['height'];
+            $return['width'] = @$data['width'];
+            $return['height'] = @$data['height'];
         } else {
             $return['actual_type'] = 'raw';
         }

src/Tasks/MigrationTaskStep2.php

@@ -18,6 +18,8 @@
 use SilverStripe\Security\DefaultAdminService;
 use SilverStripe\Security\Security;
 use SilverStripe\Versioned\Versioned;
+use SilverStripe\View\HTML;
+use SilverStripe\View\Parsers\ShortcodeParser;
 
 class MigrationTaskStep2 extends BuildTask
 {
@@ -190,6 +192,9 @@ public function run($request)
                             case 'CloudinaryFile':
                                 $this->handleCloudinaryFile($do, $fieldName, $suffix);
                                 break;
+                            case 'HTMLText':
+                                $this->handleShortcodes($do, $fieldName, $suffix);
+                                break;
                         }
                     }
                 }
@@ -199,6 +204,42 @@ public function run($request)
         static::output('COMPLETE!!');
     }
 
+    private function handleShortcodes(DataObject $do, string $fieldName, string $tableSuffix)
+    {
+        $tags = ShortcodeParser::get()->extractTags($do->$fieldName);
+
+        if (count($tags)) {
+            $newContent = array_reduce($tags, function ($content, $tag) {
+                switch($tag['open']) {
+                    case 'image':
+                        $content = str_replace(
+                            $tag['text'],
+                            HTML::createTag('img', $tag['attrs']),
+                            $content
+                        );
+                        break;
+                }
+                return $content;
+            }, $do->$fieldName);
+
+            $schema = DataObject::getSchema();
+
+            $tableName = $schema->tableForField($do->ClassName, $fieldName) . $tableSuffix;
+
+            $sql = sprintf(
+                'UPDATE "%s" SET "%s"=? WHERE "ID"=?',
+                $tableName,
+                $fieldName
+            );
+
+            DB::prepared_query($sql, [
+                $newContent,
+                $do->ID,
+            ]);
+        }
+
+    }
+
     /**
      * @param DataObject $do
      * @param string $fieldName
@@ -232,8 +273,12 @@ private function handleCloudinaryFile(DataObject $do, string $fieldName, string
             return;
         }
 
+        if ($do->hasMethod('augmentMigrationData')) {
+            $do->augmentMigrationData($fieldName, $newData, $tableSuffix);
+        }
+
         $sql = sprintf(
-            'UPDATE "%s" SET "%s" = \'%s\' WHERE "ID" = %d',
+            'INSERT INTO %1$s (ID, %2$s) VALUES (%4$d, \'%3$s\') ON DUPLICATE KEY UPDATE %2$s=\'%3$s\'',
             $tableName,
             $fieldName,
             DB::get_conn()->escapeString(json_encode($newData)),
@@ -263,7 +308,7 @@ private function handleMultiImageResource(DataObject $do, string $fieldName, str
                 '{LinkTable}' => $schema->tableName(ImageLink::class),
                 '{FileTable}' => $schema->tableName(File::class),
                 '{VersionSuffix}' => $tableSuffix,
-                '{RootRelationName}' => $do->ClassName,
+                '{RootRelationName}' => $tableName,
                 '{ID}' => $do->ID,
             ]
         ));
@@ -278,8 +323,12 @@ private function handleMultiImageResource(DataObject $do, string $fieldName, str
             array_push($newData, $newItem);
         }
 
+        if ($do->hasMethod('augmentMigrationData')) {
+            $do->augmentMigrationData($fieldName, $newData, $tableSuffix);
+        }
+
         $sql = sprintf(
-            'UPDATE "%s" SET "%s" = \'%s\' WHERE "ID" = %d',
+            'INSERT INTO %1$s (ID, %2$s) VALUES (%4$d, \'%3$s\') ON DUPLICATE KEY UPDATE %2$s=\'%3$s\'',
             $tableName . $tableSuffix,
             $fieldName,
             DB::get_conn()->escapeString(json_encode($newData)),
@@ -327,8 +376,12 @@ private function handleCloudinaryImage(DataObject $do, string $fieldName, string
         $newData->description = $data['AltText'];
         $newData->gravity = $data['Focus'];
 
+        if ($do->hasMethod('augmentMigrationData')) {
+            $do->augmentMigrationData($fieldName, $newData, $tableSuffix);
+        }
+
         $sql = sprintf(
-            'UPDATE "%s" SET "%s" = \'%s\' WHERE "ID" = %d',
+            'INSERT INTO %1$s (ID, %2$s) VALUES (%4$d, \'%3$s\') ON DUPLICATE KEY UPDATE %2$s=\'%3$s\'',
             $tableName,
             $fieldName,
             DB::get_conn()->escapeString(json_encode($newData)),